@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* ==========================================================================   1. Design Tokens Foundation   ========================================================================== *//* Color System   Market tokens alias the shared design-system palette (the Appearance ->   Colors SSOT emitted by #eos-colors) so merchant customizations flow into   the theme; the fallbacks keep Market's own branded look on a fresh   install, where the palette block only ships design-system defaults. */:root {
  /* Market Brand Palette */  --mkt-primary: var(--primary, #2563eb);
  --mkt-primary-dark: var(--primary-hover, #1e40af);
  --mkt-primary-light: color-mix(in srgb, var(--mkt-primary, #2563eb) 70%, #fff);
  --mkt-secondary: var(--text-muted, #64748b);
  --mkt-secondary-dark: color-mix(in srgb, var(--mkt-secondary, #64748b) 80%, #000);
  --mkt-secondary-light: color-mix(in srgb, var(--mkt-secondary, #64748b) 55%, #fff);
  --mkt-accent: var(--secondary, #10b981);
  --mkt-accent-dark: var(--secondary-hover, #059669);
  --mkt-accent-light: color-mix(in srgb, var(--mkt-accent, #10b981) 70%, #fff);
  /* Header shell tokens (TechMart top bar / nav). Kept at :root so the     hero and other sections outside the header scoping resolve them too. */  --tm-primary: var(--primary, #0F65D6);
  --tm-primary-dark: var(--primary-hover, #0b4da6);
  --tm-secondary: var(--surface, #F5F5F5);
  --tm-text-dark: var(--heading, #2D2D2D);
  --tm-text-muted: var(--text-muted, #777777);
  --tm-border: var(--border, #E5E7EB);
  --tm-bg: var(--page-bg, #F8F9FA);
  --tm-surface-hover: var(--surface-hover, #eef2f7);
  --tm-sale: var(--sale, #ef4444);
  --tm-font: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  /* Surface & Background */  --mkt-bg: var(--bg, #ffffff);
  --mkt-surface: var(--surface, #f8fafc);
  --mkt-surface-2: var(--surface-hover, #f1f5f9);
  --mkt-surface-hover: var(--surface-hover, #e2e8f0);
  --mkt-page-bg: var(--page-bg, #f9fafb);
  /* Text Colors */  --mkt-text: var(--text, #1e293b);
  --mkt-text-muted: var(--text-muted, #64748b);
  --mkt-text-inverse: #ffffff;
  --mkt-heading: var(--heading, #0f172a);
  --mkt-heading-inverse: #ffffff;
  /* Commerce Specific */  --mkt-price: var(--price, #16a34a);
  --mkt-sale: var(--sale, #ef4444);
  --mkt-sale-light: #fee2e2;
  --mkt-success: var(--success, #10b981);
  --mkt-success-light: #d1fae5;
  --mkt-warning: var(--warning, #f59e0b);
  --mkt-warning-light: #fef3c7;
  --mkt-danger: var(--danger, #dc2626);
  --mkt-danger-light: #fee2e2;
  --mkt-info: var(--info, #0ea5e9);
  --mkt-info-light: #e0f2fe;
  --mkt-rating: var(--rating, #fbbf24);
  /* Interactive */  --mkt-hover-bg: var(--hover-bg, rgba(59, 130, 246, 0.08));
  --mkt-hover-text: var(--link-hover, #2563eb);
  --mkt-active-bg: var(--active-bg, rgba(59, 130, 246, 0.15));
  --mkt-focus: var(--focus, #2563eb);
  /* Border & Divider */  --mkt-border: var(--border, #e2e8f0);
  --mkt-border-light: var(--border-light, #f1f5f9);
  --mkt-divider: var(--divider, #e2e8f0);
  /* Shadows */  --mkt-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --mkt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --mkt-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --mkt-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --mkt-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);
  --mkt-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
  /* Product card layout — single source of truth for card width. Every     Market product grid (home sections, related, shop/category/search,     flash deals) sizes its tracks from this token so the cards stay     identical across the storefront. 226.8px = 4-col @1440 design width. */  --mkt-card-w: 226.8px;
  /* Typography - Font Families (Typography customizer: body/heading fonts) */  --mkt-font-sans: var(--font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  --mkt-font-display: var(--heading-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  /* Typography - Font Weights */  --mkt-font-weight-normal: 400;
  --mkt-font-weight-medium: 500;
  --mkt-font-weight-semibold: 600;
  --mkt-font-weight-bold: 700;
  --mkt-font-weight-extrabold: 800;
  /* Typography - Line Heights */  --mkt-leading-none: 1;
  --mkt-leading-tight: 1.25;
  --mkt-leading-snug: 1.375;
  --mkt-leading-normal: 1.6;
  --mkt-leading-relaxed: 1.75;
  --mkt-leading-loose: 2;
  /* Typography - Font Sizes */  --mkt-fs-xs: 0.75rem;
  --mkt-fs-sm: 0.875rem;
  --mkt-fs-base: 1rem;
  --mkt-fs-lg: 1.125rem;
  --mkt-fs-xl: 1.25rem;
  --mkt-fs-2xl: 1.5rem;
  --mkt-fs-3xl: 1.875rem;
  --mkt-fs-4xl: 2.25rem;
  --mkt-fs-5xl: 3rem;
  --mkt-fs-6xl: 3.75rem;
  /* Spacing Scale */  --mkt-space-0: 0;
  --mkt-space-1: 0.25rem;
  --mkt-space-2: 0.5rem;
  --mkt-space-3: 0.75rem;
  --mkt-space-4: 1rem;
  --mkt-space-5: 1.25rem;
  --mkt-space-6: 1.5rem;
  --mkt-space-7: 1.75rem;
  --mkt-space-8: 2rem;
  --mkt-space-10: 2.5rem;
  --mkt-space-12: 3rem;
  --mkt-space-14: 3.5rem;
  --mkt-space-16: 4rem;
  --mkt-space-20: 5rem;
  --mkt-space-24: 6rem;
  /* Border Radius */  --mkt-radius-none: 0;
  --mkt-radius-sm: 0.125rem;
  --mkt-radius: 0.25rem;
  --mkt-radius-md: 0.375rem;
  --mkt-radius-lg: 0.5rem;
  --mkt-radius-xl: 0.75rem;
  --mkt-radius-2xl: 1rem;
  --mkt-radius-3xl: 1.5rem;
  --mkt-radius-full: 9999px;
  /* Borders */  --mkt-border-width-0: 0;
  --mkt-border-width-1: 1px;
  --mkt-border-width-2: 2px;
  --mkt-border-width-3: 3px;
  /* Transitions & Animation */  --mkt-duration-fastest: 0.15s;
  --mkt-duration-fast: 0.25s;
  --mkt-duration-normal: 0.35s;
  --mkt-duration-slow: 0.5s;
  --mkt-duration-slower: 0.75s;
  --mkt-dur: var(--mkt-duration-normal);
  --mkt-ease: var(--mkt-ease-in-out);
  --mkt-ease-linear: linear;
  --mkt-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --mkt-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --mkt-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --mkt-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Animation Timing */  --mkt-animation-duration-fast: 150ms;
  --mkt-animation-duration-normal: 300ms;
  --mkt-animation-duration-slow: 500ms;
  /* Layout & Containers */  --mkt-container-sm: 640px;
  --mkt-container-md: 768px;
  --mkt-container-lg: 1024px;
  --mkt-container-xl: 1280px;
  --mkt-container-2xl: 1536px;
  --mkt-container-max: 1400px;
  /* Header & Section Spacing */  --mkt-section-y: 4rem;
  --mkt-section-x: 2rem;
  --mkt-header-height: 72px;
  --mkt-header-height-mobile: 56px;
  /* Product Card Dimensions */  --mkt-product-image-height: 220px;
  --mkt-product-image-height-mobile: 180px;
  --mkt-product-image-height-tablet: 200px;
  --mkt-category-image-height: 140px;
  --mkt-category-image-height-mobile: 120px;
  /* Grid & Gap */  --mkt-grid-gap: 1.5rem;
  --mkt-grid-gap-sm: 1rem;
  --mkt-grid-gap-lg: 2rem;
  --mkt-grid-cols-category: repeat(auto-fill, minmax(180px, 1fr));
  --mkt-grid-cols-product: repeat(auto-fill, minmax(240px, 1fr));
  --mkt-grid-cols-trust: repeat(auto-fit, minmax(240px, 1fr));
  /* Ecommerce States */  --mkt-state-sale: var(--mkt-sale);
  --mkt-state-sale-bg: var(--mkt-sale-light);
  --mkt-state-sale-text: #7f1d1d;
  --mkt-state-success: var(--mkt-success);
  --mkt-state-success-bg: var(--mkt-success-light);
  --mkt-state-success-text: #064e3b;
  --mkt-state-warning: var(--mkt-warning);
  --mkt-state-warning-bg: var(--mkt-warning-light);
  --mkt-state-warning-text: #713f12;
  --mkt-state-danger: var(--mkt-danger);
  --mkt-state-danger-bg: var(--mkt-danger-light);
  --mkt-state-danger-text: #991b1b;
  --mkt-state-info: var(--mkt-info);
  --mkt-state-info-bg: var(--mkt-info-light);
  --mkt-state-info-text: #0c4a6e;
  /* Responsive Breakpoints */  --mkt-bp-sm: 576px;
  --mkt-bp-md: 768px;
  --mkt-bp-lg: 992px;
  --mkt-bp-xl: 1200px;
  --mkt-bp-xxl: 1400px;
}
/* Typography CSS Custom Properties */:root {
  --mkt-font-family-base: var(--mkt-font-sans);
  --mkt-font-family-display: var(--mkt-font-display);
  --mkt-font-weight-base: var(--mkt-font-weight-normal);
  --mkt-font-weight-heading: var(--mkt-font-weight-bold);
  --mkt-font-size-base: var(--mkt-fs-base);
  --mkt-font-size-heading-1: var(--mkt-fs-6xl);
  --mkt-font-size-heading-2: var(--mkt-fs-5xl);
  --mkt-font-size-heading-3: var(--mkt-fs-4xl);
  --mkt-font-size-heading-4: var(--mkt-fs-3xl);
  --mkt-font-size-heading-5: var(--mkt-fs-2xl);
  --mkt-font-size-heading-6: var(--mkt-fs-xl);
  --mkt-line-height-base: var(--mkt-leading-normal);
  --mkt-line-height-heading: var(--mkt-leading-tight);
  --mkt-letter-spacing-base: 0;
  --mkt-letter-spacing-wide: 0.025em;
}
/* ======== Category Section ======== */.category-section {
  padding-top: var(--mkt-section-y);
  padding-bottom: var(--mkt-section-y);
  background: var(--mkt-page-bg);
}
.category-section .section-title {
   text-align: center;
   margin-bottom: var(--mkt-space-6);
   font-size: var(--mkt-fs-2xl);
   font-weight: var(--mkt-font-weight-bold);
   color: var(--mkt-heading);
 }
.category-grid {
   display: grid;
   grid-template-columns: var(--mkt-grid-cols-category);
   gap: var(--mkt-grid-gap);
 }
.category-card {
  display: block;
  border-radius: var(--mkt-radius-lg);
  overflow: hidden;
  background: var(--mkt-surface);
  box-shadow: var(--mkt-shadow-sm);
  transition: transform var(--mkt-dur) var(--mkt-ease), box-shadow var(--mkt-dur) var(--mkt-ease);
  text-decoration: none;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mkt-shadow);
}
.category-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.category-card h3 {
   padding: var(--mkt-space-4);
   margin: 0;
   font-size: var(--mkt-fs-lg);
   font-weight: var(--mkt-font-weight-semibold);
   color: var(--mkt-text);
   text-align: center;
 }
/* ======== Products Grid ======== */.products-grid {
   display: grid;
   grid-template-columns: var(--mkt-grid-cols-product);
   gap: var(--mkt-grid-gap);
 }
/* ======== Section Header ======== */.section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--mkt-space-6);
 }
 .section-header .section-title {
   margin: 0;
   font-size: var(--mkt-fs-xl);
   font-weight: var(--mkt-font-weight-bold);
   color: var(--mkt-heading);
 }
 .section-header .view-all-link {
   font-size: var(--mkt-fs-base);
   font-weight: var(--mkt-font-weight-semibold);
   color: var(--mkt-accent);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: var(--mkt-space-2);
 }
 .section-header .view-all-link:hover {
   text-decoration: underline;
   color: var(--mkt-accent);
 }
/* ======== Trust / Benefits Section ======== */.trust-section {
   padding-top: var(--mkt-section-y);
   padding-bottom: var(--mkt-section-y);
   background: var(--mkt-surface-2);
 }
 .trust-grid {
   display: grid;
   grid-template-columns: var(--mkt-grid-cols-trust);
   gap: var(--mkt-grid-gap);
 }
 .trust-item {
   background: var(--mkt-surface);
   border-radius: var(--mkt-radius-lg);
   box-shadow: var(--mkt-shadow-sm);
   padding: var(--mkt-space-8);
   text-align: center;
   transition: transform var(--mkt-dur) var(--mkt-ease), box-shadow var(--mkt-dur) var(--mkt-ease);
 }
 .trust-item:hover {
   transform: translateY(-4px);
   box-shadow: var(--mkt-shadow);
 }
 .trust-item svg {
   width: 48px;
   height: 48px;
   color: var(--mkt-accent);
   margin-bottom: var(--mkt-space-4);
 }
 .trust-item h3 {
   font-size: var(--mkt-fs-lg);
   font-weight: var(--mkt-font-weight-semibold);
   margin-bottom: var(--mkt-space-2);
   color: var(--mkt-heading);
 }
 .trust-item p {
   color: var(--mkt-text-muted);
   margin: 0;
 }
/* ======== Hero Buttons ======== */.btn-hero-primary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--mkt-space-7) var(--mkt-space-10);
   background: var(--mkt-accent);
   color: var(--mkt-text-inverse);
   border: none;
   border-radius: 5px;
   font-size: var(--mkt-fs-sm);
   font-weight: var(--mkt-font-weight-semibold);
   text-decoration: none;
   cursor: pointer;
   transition: all var(--mkt-dur) var(--mkt-ease);
 }
 .btn-hero-primary:hover {
   background: var(--mkt-secondary-hover, var(--mkt-accent));
   transform: translateY(-1px);
   box-shadow: 0 8px 18px rgba(233, 69, 96, 0.28);
 }
 .btn-hero-ghost {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--mkt-space-7) var(--mkt-space-10);
   background: transparent;
   color: var(--mkt-text);
   border: 1px solid var(--mkt-border);
   border-radius: 5px;
   font-size: var(--mkt-fs-sm);
   font-weight: var(--mkt-font-weight-semibold);
   text-decoration: none;
   cursor: pointer;
   transition: all var(--mkt-dur) var(--mkt-ease);
 }
 .btn-hero-ghost:hover {
   background: var(--mkt-surface-hover);
   border-color: var(--mkt-text-muted);
 }
/* ======== Buttons ======== *//* Primary Button */.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: var(--mkt-space-4) var(--mkt-space-6);
   background: var(--mkt-primary);
   color: var(--mkt-text-inverse);
   border: none;
   border-radius: var(--mkt-radius);
   font-size: var(--mkt-fs-sm);
   font-weight: var(--mkt-font-weight-semibold);
   text-decoration: none;
   cursor: pointer;
   transition: all var(--mkt-duration-normal) var(--mkt-ease-in-out);
   white-space: nowrap;
}
.btn:hover {
   background: var(--mkt-primary-dark);
   transform: translateY(-1px);
   box-shadow: var(--mkt-shadow-md);
}
.btn:active {
   transform: translateY(0);
}
.btn:focus {
   outline: none;
   box-shadow: 0 0 0 3px var(--mkt-focus-ring);
}
/* Secondary Button */.btn-secondary {
   background: var(--mkt-surface);
   color: var(--mkt-text);
   border: var(--mkt-border-width-1) solid var(--mkt-border);
}
.btn-secondary:hover {
   background: var(--mkt-surface-hover);
   border-color: var(--mkt-text-muted);
   color: var(--mkt-text);
}
/* Outline Button */.btn-outline {
   background: transparent;
   color: var(--mkt-primary);
   border: var(--mkt-border-width-1) solid var(--mkt-primary);
}
.btn-outline:hover {
   background: var(--mkt-primary);
   color: var(--mkt-text-inverse);
}
/* Dark/Light Button */.btn-dark {
   background: var(--mkt-text);
   color: var(--mkt-text-inverse);
   border: none;
}
.btn-dark:hover {
   background: var(--mkt-heading);
   color: var(--mkt-text-inverse);
}
/* Icon Button */.btn-icon {
   padding: var(--mkt-space-3);
   background: transparent;
   border: none;
   color: var(--mkt-text-muted);
   cursor: pointer;
   border-radius: var(--mkt-radius);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all var(--mkt-duration-fast) var(--mkt-ease-in-out);
}
.btn-icon:hover {
   background: var(--mkt-hover-bg);
   color: var(--mkt-primary);
}
/* Disabled Button */.btn:disabled,.btn.disabled {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
   transform: none;
}
/* Loading Button */.btn-loading {
   position: relative;
   color: transparent;
   pointer-events: none;
}
.btn-loading::after {
   content: '';
   position: absolute;
   width: 16px;
   height: 16px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 2px solid var(--mkt-text-inverse);
   border-radius: 50%;
   border-top-color: transparent;
   animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin {
   to {
 transform: translate(-50%, -50%) rotate(360deg);
 }
}
/* ======== Product Components ======== *//* Product Card */.product-card {
   background: var(--mkt-surface);
   border-radius: var(--mkt-radius-lg);
   overflow: hidden;
   box-shadow: var(--mkt-shadow-sm);
   transition: all var(--mkt-duration-normal) var(--mkt-ease-in-out);
   position: relative;
   height: 100%;
}
.product-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--mkt-shadow-lg);
}
/* Product Image Wrapper */.product-image-wrapper {
   position: relative;
   overflow: hidden;
   background: var(--mkt-surface);
   height: var(--mkt-product-image-height);
}
@media (max-width: 767.98px) {
   .product-image-wrapper {
      height: var(--mkt-product-image-height-mobile);
   }
}
.product-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform var(--mkt-duration-slow) var(--mkt-ease-in-out);
}
.product-card:hover .product-image {
   transform: scale(1.05);
}
/* Badges */.product-badge {
   position: absolute;
   top: var(--mkt-space-4);
   left: var(--mkt-space-4);
   padding: var(--mkt-space-1) var(--mkt-space-3);
   border-radius: var(--mkt-radius-full);
   font-size: var(--mkt-fs-xs);
   font-weight: var(--mkt-font-weight-semibold);
   text-transform: uppercase;
   letter-spacing: var(--mkt-letter-spacing-wide);
   z-index: 10;
}
.product-badge--sale {
   background: var(--mkt-state-sale);
   color: var(--mkt-state-sale-text);
}
.product-badge--new {
   background: var(--mkt-state-success);
   color: var(--mkt-state-success-text);
}
.product-badge--featured {
   background: var(--mkt-state-info);
   color: var(--mkt-state-info-text);
}
/* Price and Sale Price */.product-price {
   font-size: var(--mkt-fs-lg);
   font-weight: var(--mkt-font-weight-bold);
   color: var(--mkt-price);
}
.product-price--old {
   font-size: var(--mkt-fs-sm);
   font-weight: var(--mkt-font-weight-normal);
   color: var(--mkt-text-muted);
   text-decoration: line-through;
   margin-left: var(--mkt-space-2);
}
/* Rating */.product-rating {
   display: flex;
   align-items: center;
   gap: var(--mkt-space-1);
}
.product-rating-stars {
   display: flex;
   gap: var(--mkt-space-1);
}
.product-rating-star {
   width: 16px;
   height: 16px;
   color: var(--mkt-rating);
}
.product-rating-count {
   font-size: var(--mkt-fs-sm);
   color: var(--mkt-text-muted);
}
/* Wishlist Button */.wishlist-btn {
   position: absolute;
   top: var(--mkt-space-4);
   right: var(--mkt-space-4);
   width: 36px;
   height: 36px;
   background: var(--mkt-surface);
   border: var(--mkt-border-width-1) solid var(--mkt-border);
   border-radius: var(--mkt-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all var(--mkt-duration-fast) var(--mkt-ease-in-out);
   z-index: 10;
}
.wishlist-btn:hover {
   background: var(--mkt-surface-hover);
   border-color: var(--mkt-danger);
   transform: scale(1.05);
}
.wishlist-btn.active {
   background: var(--mkt-danger-light);
   border-color: var(--mkt-danger);
}
.wishlist-btn.active .wishlist-icon {
   fill: var(--mkt-danger);
}
.wishlist-icon {
   width: 20px;
   height: 20px;
   fill: var(--mkt-text-muted);
   transition: fill var(--mkt-duration-fast) var(--mkt-ease-in-out);
}
/* Product Actions */.product-actions {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: var(--mkt-space-4);
   background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent);
   transform: translateY(100%);
   transition: transform var(--mkt-duration-normal) var(--mkt-ease-in-out);
   display: flex;
   gap: var(--mkt-space-2);
   z-index: 10;
}
.product-card:hover .product-actions {
   transform: translateY(0);
}
.action-btn {
   flex: 1;
   padding: var(--mkt-space-3);
   background: var(--mkt-surface);
   border: var(--mkt-border-width-1) solid var(--mkt-border);
   border-radius: var(--mkt-radius);
   font-size: var(--mkt-fs-xs);
   font-weight: var(--mkt-font-weight-medium);
   cursor: pointer;
   transition: all var(--mkt-duration-fast) var(--mkt-ease-in-out);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--mkt-space-2);
}
.action-btn:hover {
   background: var(--mkt-primary);
   border-color: var(--mkt-primary);
   color: var(--mkt-text-inverse);
}
/* ======== Layout ======== *//* Container */.container {
   width: 100%;
   max-width: var(--mkt-container-max);
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--mkt-section-x);
   padding-right: var(--mkt-section-x);
}
.container-sm {
   max-width: var(--mkt-container-sm);
}
.container-md {
   max-width: var(--mkt-container-md);
}
.container-lg {
   max-width: var(--mkt-container-lg);
}
.container-xl {
   max-width: var(--mkt-container-xl);
}
/* Section */.section {
   padding-top: var(--mkt-section-y);
   padding-bottom: var(--mkt-section-y);
}
.section-sm {
   padding-top: var(--mkt-space-12);
   padding-bottom: var(--mkt-space-12);
}
.section-lg {
   padding-top: var(--mkt-space-24);
   padding-bottom: var(--mkt-space-24);
}
/* Section Heading */.section-heading {
   margin-bottom: var(--mkt-space-8);
}
.section-title {
   font-size: var(--mkt-fs-3xl);
   font-weight: var(--mkt-font-weight-bold);
   color: var(--mkt-heading);
   margin-bottom: var(--mkt-space-3);
   line-height: var(--mkt-leading-tight);
}
.section-description {
   font-size: var(--mkt-fs-lg);
   color: var(--mkt-text-muted);
   max-width: 600px;
   margin-bottom: 0;
}
/* Responsive Grid */.grid {
   display: grid;
   gap: var(--mkt-grid-gap);
}
.grid-2 {
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-4 {
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.grid-cols-1 {
 grid-template-columns: 1fr;
 }
.grid-cols-2 {
 grid-template-columns: repeat(2, 1fr);
 }
.grid-cols-3 {
 grid-template-columns: repeat(3, 1fr);
 }
.grid-cols-4 {
 grid-template-columns: repeat(4, 1fr);
 }
/* Column Utilities */.col {
 flex: 1 1 0%;
 }
.col-auto {
 flex: 0 0 auto;
 width: auto;
 }
.col-1 {
 flex: 0 0 8.3333%;
 width: 8.3333%;
 }
.col-2 {
 flex: 0 0 16.6667%;
 width: 16.6667%;
 }
.col-3 {
 flex: 0 0 25%;
 width: 25%;
 }
.col-4 {
 flex: 0 0 33.3333%;
 width: 33.3333%;
 }
.col-5 {
 flex: 0 0 41.6667%;
 width: 41.6667%;
 }
.col-6 {
 flex: 0 0 50%;
 width: 50%;
 }
.col-7 {
 flex: 0 0 58.3333%;
 width: 58.3333%;
 }
.col-8 {
 flex: 0 0 66.6667%;
 width: 66.6667%;
 }
.col-9 {
 flex: 0 0 75%;
 width: 75%;
 }
.col-10 {
 flex: 0 0 83.3333%;
 width: 83.3333%;
 }
.col-11 {
 flex: 0 0 91.6667%;
 width: 91.6667%;
 }
.col-12 {
 flex: 0 0 100%;
 width: 100%;
 }
/* Spacing Utilities */.m-0 {
 margin: 0;
 }
.mt-0 {
 margin-top: 0;
 }
.mr-0 {
 margin-right: 0;
 }
.mb-0 {
 margin-bottom: 0;
 }
.ml-0 {
 margin-left: 0;
 }
.mx-0 {
 margin-left: 0;
 margin-right: 0;
 }
.my-0 {
 margin-top: 0;
 margin-bottom: 0;
 }
.p-0 {
 padding: 0;
 }
p-0 {
 padding-top: 0;
 }
pr-0 {
 padding-right: 0;
 }
pb-0 {
 padding-bottom: 0;
 }
pl-0 {
 padding-left: 0;
 }
px-0 {
 padding-left: 0;
 padding-right: 0;
 }
py-0 {
 padding-top: 0;
 padding-bottom: 0;
 }
.m-1 {
 margin: var(--mkt-space-1);
 }
.mt-1 {
 margin-top: var(--mkt-space-1);
 }
.mr-1 {
 margin-right: var(--mkt-space-1);
 }
.mb-1 {
 margin-bottom: var(--mkt-space-1);
 }
.ml-1 {
 margin-left: var(--mkt-space-1);
 }
.mx-1 {
 margin-left: var(--mkt-space-1);
 margin-right: var(--mkt-space-1);
 }
.my-1 {
 margin-top: var(--mkt-space-1);
 margin-bottom: var(--mkt-space-1);
 }
.p-1 {
 padding: var(--mkt-space-1);
 }
.pt-1 {
 padding-top: var(--mkt-space-1);
 }
.pr-1 {
 padding-right: var(--mkt-space-1);
 }
.pb-1 {
 padding-bottom: var(--mkt-space-1);
 }
.pl-1 {
 padding-left: var(--mkt-space-1);
 }
.px-1 {
 padding-left: var(--mkt-space-1);
 padding-right: var(--mkt-space-1);
 }
.py-1 {
 padding-top: var(--mkt-space-1);
 padding-bottom: var(--mkt-space-1);
 }
.m-2 {
 margin: var(--mkt-space-2);
 }
.mt-2 {
 margin-top: var(--mkt-space-2);
 }
.mr-2 {
 margin-right: var(--mkt-space-2);
 }
.mb-2 {
 margin-bottom: var(--mkt-space-2);
 }
.ml-2 {
 margin-left: var(--mkt-space-2);
 }
.mx-2 {
 margin-left: var(--mkt-space-2);
 margin-right: var(--mkt-space-2);
 }
.my-2 {
 margin-top: var(--mkt-space-2);
 margin-bottom: var(--mkt-space-2);
 }
.p-2 {
 padding: var(--mkt-space-2);
 }
.pt-2 {
 padding-top: var(--mkt-space-2);
 }
.pr-2 {
 padding-right: var(--mkt-space-2);
 }
.pb-2 {
 padding-bottom: var(--mkt-space-2);
 }
.pl-2 {
 padding-left: var(--mkt-space-2);
 }
.px-2 {
 padding-left: var(--mkt-space-2);
 padding-right: var(--mkt-space-2);
 }
.py-2 {
 padding-top: var(--mkt-space-2);
 padding-bottom: var(--mkt-space-2);
 }
.m-3 {
 margin: var(--mkt-space-3);
 }
.mt-3 {
 margin-top: var(--mkt-space-3);
 }
.mr-3 {
 margin-right: var(--mkt-space-3);
 }
.mb-3 {
 margin-bottom: var(--mkt-space-3);
 }
.ml-3 {
 margin-left: var(--mkt-space-3);
 }
.mx-3 {
 margin-left: var(--mkt-space-3);
 margin-right: var(--mkt-space-3);
 }
.my-3 {
 margin-top: var(--mkt-space-3);
 margin-bottom: var(--mkt-space-3);
 }
.p-3 {
 padding: var(--mkt-space-3);
 }
.pt-3 {
 padding-top: var(--mkt-space-3);
 }
.pr-3 {
 padding-right: var(--mkt-space-3);
 }
.pb-3 {
 padding-bottom: var(--mkt-space-3);
 }
.pl-3 {
 padding-left: var(--mkt-space-3);
 }
.px-3 {
 padding-left: var(--mkt-space-3);
 padding-right: var(--mkt-space-3);
 }
.py-3 {
 padding-top: var(--mkt-space-3);
 padding-bottom: var(--mkt-space-3);
 }
.m-4 {
 margin: var(--mkt-space-4);
 }
.mt-4 {
 margin-top: var(--mkt-space-4);
 }
.mr-4 {
 margin-right: var(--mkt-space-4);
 }
.mb-4 {
 margin-bottom: var(--mkt-space-4);
 }
.ml-4 {
 margin-left: var(--mkt-space-4);
 }
.mx-4 {
 margin-left: var(--mkt-space-4);
 margin-right: var(--mkt-space-4);
 }
.my-4 {
 margin-top: var(--mkt-space-4);
 margin-bottom: var(--mkt-space-4);
 }
.p-4 {
 padding: var(--mkt-space-4);
 }
.pt-4 {
 padding-top: var(--mkt-space-4);
 }
.pr-4 {
 padding-right: var(--mkt-space-4);
 }
.pb-4 {
 padding-bottom: var(--mkt-space-4);
 }
.pl-4 {
 padding-left: var(--mkt-space-4);
 }
.px-4 {
 padding-left: var(--mkt-space-4);
 padding-right: var(--mkt-space-4);
 }
.py-4 {
 padding-top: var(--mkt-space-4);
 padding-bottom: var(--mkt-space-4);
 }
.m-5 {
 margin: var(--mkt-space-5);
 }
.mt-5 {
 margin-top: var(--mkt-space-5);
 }
.mr-5 {
 margin-right: var(--mkt-space-5);
 }
.mb-5 {
 margin-bottom: var(--mkt-space-5);
 }
.ml-5 {
 margin-left: var(--mkt-space-5);
 }
.mx-5 {
 margin-left: var(--mkt-space-5);
 margin-right: var(--mkt-space-5);
 }
.my-5 {
 margin-top: var(--mkt-space-5);
 margin-bottom: var(--mkt-space-5);
 }
.p-5 {
 padding: var(--mkt-space-5);
 }
.pt-5 {
 padding-top: var(--mkt-space-5);
 }
.pr-5 {
 padding-right: var(--mkt-space-5);
 }
.pb-5 {
 padding-bottom: var(--mkt-space-5);
 }
.pl-5 {
 padding-left: var(--mkt-space-5);
 }
.px-5 {
 padding-left: var(--mkt-space-5);
 padding-right: var(--mkt-space-5);
 }
.py-5 {
 padding-top: var(--mkt-space-5);
 padding-bottom: var(--mkt-space-5);
 }
/* ======== Forms ======== *//* Form Group */.form-group {
   margin-bottom: var(--mkt-space-6);
}
.form-label {
   display: block;
   margin-bottom: var(--mkt-space-2);
   font-size: var(--mkt-fs-sm);
   font-weight: var(--mkt-font-weight-medium);
   color: var(--mkt-text);
}
/* Input, Select, Textarea */.form-input,.form-select,.form-textarea {
   display: block;
   width: 100%;
   padding: var(--mkt-space-3) var(--mkt-space-4);
   font-size: var(--mkt-fs-base);
   font-weight: var(--mkt-font-weight-normal);
   line-height: var(--mkt-leading-normal);
   color: var(--mkt-text);
   background: var(--mkt-surface);
   border: var(--mkt-border-width-1) solid var(--mkt-border);
   border-radius: var(--mkt-radius);
   transition: all var(--mkt-duration-fast) var(--mkt-ease-in-out);
}
.form-input::placeholder,.form-textarea::placeholder {
   color: var(--mkt-text-muted);
   opacity: 1;
}
.form-input:focus,.form-select:focus,.form-textarea:focus {
   outline: none;
   border-color: var(--mkt-focus);
   box-shadow: 0 0 0 3px var(--mkt-focus-ring);
}
.form-textarea {
   min-height: 100px;
   resize: vertical;
}
/* Select */.form-select {
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--mkt-space-3) center;
   background-size: 20px;
   padding-right: var(--mkt-space-10);
}
/* Checkbox and Radio */.form-checkbox,.form-radio {
   width: 20px;
   height: 20px;
   margin-right: var(--mkt-space-2);
   accent-color: var(--mkt-primary);
   cursor: pointer;
}
.form-checkbox-wrapper,.form-radio-wrapper {
   display: flex;
   align-items: center;
   cursor: pointer;
   user-select: none;
}
.form-checkbox-label,.form-radio-label {
   font-size: var(--mkt-fs-base);
   color: var(--mkt-text);
   cursor: pointer;
}
/* Focus State */.form-input:focus + .form-label,.form-select:focus + .form-label,.form-textarea:focus + .form-label {
   color: var(--mkt-primary);
}
/* Validation State */.form-input--error,.form-select--error,.form-textarea--error {
   border-color: var(--mkt-danger);
}
.form-input--error:focus,.form-select--error:focus,.form-textarea--error:focus {
   box-shadow: 0 0 0 3px var(--mkt-danger-light);
}
.form-error {
   margin-top: var(--mkt-space-2);
   font-size: var(--mkt-fs-sm);
   color: var(--mkt-danger);
}
/* ======== Ecommerce UI ======== *//* Breadcrumbs */.breadcrumbs {
   display: flex;
   align-items: center;
   gap: var(--mkt-space-2);
   font-size: var(--mkt-fs-sm);
   margin-bottom: var(--mkt-space-6);
}
.breadcrumbs a {
   color: var(--mkt-text-muted);
   text-decoration: none;
   transition: color var(--mkt-duration-fast) var(--mkt-ease-in-out);
}
.breadcrumbs a:hover {
   color: var(--mkt-primary);
}
.breadcrumbs .breadcrumb-separator {
   color: var(--mkt-text-muted);
}
.breadcrumbs .breadcrumb-current {
   color: var(--mkt-text);
   font-weight: var(--mkt-font-weight-medium);
}
/* Pagination */.pagination {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--mkt-space-2);
   margin-top: var(--mkt-space-8);
}
.pagination-item {
   display: flex;
   align-items: center;
   justify-content: center;
   min-width: 40px;
   height: 40px;
   padding: var(--mkt-space-2) var(--mkt-space-4);
   background: var(--mkt-surface);
   border: var(--mkt-border-width-1) solid var(--mkt-border);
   border-radius: var(--mkt-radius);
   color: var(--mkt-text);
   text-decoration: none;
   font-size: var(--mkt-fs-sm);
   font-weight: var(--mkt-font-weight-medium);
   transition: all var(--mkt-duration-fast) var(--mkt-ease-in-out);
}
.pagination-item:hover {
   background: var(--mkt-surface-hover);
   border-color: var(--mkt-primary);
   color: var(--mkt-primary);
}
.pagination-item.active {
   background: var(--mkt-primary);
   border-color: var(--mkt-primary);
   color: var(--mkt-text-inverse);
}
.pagination-item.disabled {
   opacity: 0.5;
   pointer-events: none;
   cursor: not-allowed;
}
/* Quantity Selector */.quantity-selector {
   display: flex;
   align-items: center;
   border: var(--mkt-border-width-1) solid var(--mkt-border);
   border-radius: var(--mkt-radius);
   overflow: hidden;
}
.quantity-btn {
   width: 40px;
   height: 40px;
   background: var(--mkt-surface);
   border: none;
   font-size: var(--mkt-fs-base);
   font-weight: var(--mkt-font-weight-medium);
   cursor: pointer;
   transition: all var(--mkt-duration-fast) var(--mkt-ease-in-out);
   display: flex;
   align-items: center;
   justify-content: center;
}
.quantity-btn:hover {
   background: var(--mkt-surface-hover);
   color: var(--mkt-primary);
}
.quantity-input {
   width: 60px;
   height: 40px;
   border: none;
   border-left: var(--mkt-border-width-1) solid var(--mkt-border);
   border-right: var(--mkt-border-width-1) solid var(--mkt-border);
   text-align: center;
   font-size: var(--mkt-fs-base);
   font-weight: var(--mkt-font-weight-medium);
   background: var(--mkt-surface);
}
/* Tabs */.tabs {
   display: flex;
   gap: var(--mkt-space-2);
   border-bottom: var(--mkt-border-width-1) solid var(--mkt-border);
   margin-bottom: var(--mkt-space-6);
}
.tab {
   padding: var(--mkt-space-4) var(--mkt-space-6);
   background: transparent;
   border: none;
   border-bottom: var(--mkt-border-width-3) solid transparent;
   font-size: var(--mkt-fs-base);
   font-weight: var(--mkt-font-weight-medium);
   color: var(--mkt-text-muted);
   cursor: pointer;
   transition: all var(--mkt-duration-fast) var(--mkt-ease-in-out);
}
.tab:hover {
   color: var(--mkt-primary);
}
.tab.active {
   color: var(--mkt-primary);
   border-bottom-color: var(--mkt-primary);
}
.tab-content {
   display: none;
}
.tab-content.active {
   display: block;
}
/* Notices and Alerts */.notice,.alert {
   padding: var(--mkt-space-4) var(--mkt-space-6);
   border-radius: var(--mkt-radius);
   margin-bottom: var(--mkt-space-6);
   font-size: var(--mkt-fs-sm);
   line-height: var(--mkt-leading-normal);
}
.notice--info {
   background: var(--mkt-info-light);
   border-left: var(--mkt-border-width-3) solid var(--mkt-info);
   color: var(--mkt-info-text);
}
.notice--success {
   background: var(--mkt-success-light);
   border-left: var(--mkt-border-width-3) solid var(--mkt-success);
   color: var(--mkt-success-text);
}
.notice--warning {
   background: var(--mkt-warning-light);
   border-left: var(--mkt-border-width-3) solid var(--mkt-warning);
   color: var(--mkt-warning-text);
}
.notice--error {
   background: var(--mkt-danger-light);
   border-left: var(--mkt-border-width-3) solid var(--mkt-danger);
   color: var(--mkt-danger-text);
}
/* Empty State */.empty-state {
   text-align: center;
   padding: var(--mkt-space-12) var(--mkt-space-6);
}
.empty-state-icon {
   width: 80px;
   height: 80px;
   color: var(--mkt-text-muted);
   margin-bottom: var(--mkt-space-6);
}
.empty-state-title {
   font-size: var(--mkt-fs-xl);
   font-weight: var(--mkt-font-weight-semibold);
   color: var(--mkt-heading);
   margin-bottom: var(--mkt-space-3);
}
.empty-state-description {
   font-size: var(--mkt-fs-base);
   color: var(--mkt-text-muted);
   max-width: 400px;
   margin: 0 auto var(--mkt-space-6);
}
/* Divider */.divider {
   height: var(--mkt-border-width-1);
   background: var(--mkt-border);
   border: none;
   margin: var(--mkt-space-6) 0;
}
.divider--vertical {
   width: var(--mkt-border-width-1);
   height: auto;
   background: var(--mkt-border);
   display: inline-block;
}
/* ======== Responsive Breakpoints ======== */@media (max-width: 991.98px) {
   .container {
      padding-left: var(--mkt-space-6);
      padding-right: var(--mkt-space-6);
   }
      .section {
      padding-top: var(--mkt-space-16);
      padding-bottom: var(--mkt-space-16);
   }
      .section-title {
      font-size: var(--mkt-fs-2xl);
   }
      .grid-2, .grid-3, .grid-4 {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   }
      .product-image-wrapper {
      height: var(--mkt-product-image-height-tablet);
   }
      .tabs {
      overflow-x: auto;
      white-space: nowrap;
      padding-bottom: var(--mkt-space-4);
   }
      .tab {
      white-space: nowrap;
   }
}
@media (max-width: 767.98px) {
   .container {
      padding-left: var(--mkt-space-4);
      padding-right: var(--mkt-space-4);
   }
      .section {
      padding-top: var(--mkt-space-12);
      padding-bottom: var(--mkt-space-12);
   }
      .section-title {
      font-size: var(--mkt-fs-xl);
   }
      .section-description {
      font-size: var(--mkt-fs-base);
   }
      .grid-2, .grid-3, .grid-4 {
      grid-template-columns: 1fr;
   }
      .product-image-wrapper {
      height: var(--mkt-product-image-height-mobile);
   }
      .product-actions {
      transform: translateY(0);
   }
      .tabs {
      flex-wrap: wrap;
   }
      .tab {
      flex: 1 1 auto;
      text-align: center;
   }
      .quantity-selector {
      width: 100%;
   }
      .quantity-input {
      flex: 1;
   }
      .pagination {
      gap: var(--mkt-space-1);
   }
      .pagination-item {
      min-width: 36px;
      height: 36px;
      padding: var(--mkt-space-2);
      font-size: var(--mkt-fs-xs);
   }
}
@media (max-width: 575.98px) {
   .container {
      padding-left: var(--mkt-space-3);
      padding-right: var(--mkt-space-3);
   }
      .section {
      padding-top: var(--mkt-space-8);
      padding-bottom: var(--mkt-space-8);
   }
      .section-title {
      font-size: var(--mkt-fs-lg);
   }
      .btn {
      padding: var(--mkt-space-3) var(--mkt-space-4);
      font-size: var(--mkt-fs-xs);
   }
      .product-badge {
      padding: var(--mkt-space-1) var(--mkt-space-2);
      font-size: var(--mkt-fs-xxs);
   }
      .empty-state {
      padding: var(--mkt-space-8) var(--mkt-space-4);
   }
      .empty-state-icon {
      width: 60px;
      height: 60px;
   }
      .empty-state-title {
      font-size: var(--mkt-fs-lg);
   }
}
/* ==========================================================================   Market Header — TechMart shell   Reference: electronics_e_commerce_store.html (blue topbar, pill search,   Browse Categories nav). Uses scoped --tm-* tokens so it never overrides   the core storefront palette.   ========================================================================== *//* -- Shell tokens -------------------------------------------------------- *//* --tm-* colour/font tokens are defined once at :root (aliased to the   shared Appearance -> Colors / Typography palette); this block only   documents the shell that consumes them. */.mkt-topbar,.mkt-announcement,.mkt-header,.mkt-nav,.mkt-mobile-menu,.mkt-bottom-nav,.mkt-breadcrumb-bar {
  font-family: var(--tm-font);
}
/* -- Container (aligned with eos-container, no extra sizing) ------------- */.mkt-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 1272px;
  padding: 0 16px;
  box-sizing: border-box;
}
/* ==========================================================================   Top bar (utility links) + announcement (promo) — two independent strips   ========================================================================== */.mkt-topbar,.mkt-announcement {
  background: var(--tm-announcement-bg, var(--tm-primary));
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.mkt-topbar[hidden],.mkt-announcement[hidden] {
  display: none;
}
.mkt-topbar__inner,.mkt-announcement__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  padding: 6px 0;
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
  box-sizing: border-box;
}
.mkt-topbar__left,.mkt-topbar__right,.mkt-announcement__left,.mkt-announcement__right {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.mkt-topbar__left,.mkt-announcement__left {
  overflow: hidden;
  white-space: nowrap;
}
.mkt-topbar__right,.mkt-announcement__right {
  flex-shrink: 0;
}
.mkt-topbar__link,.mkt-announcement__item,.mkt-announcement__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
}
.mkt-announcement__item svg {
  width: 14px;
  height: 14px;
  opacity: 0.9;
}
.mkt-topbar__link svg {
  width: 13px;
  height: 13px;
  opacity: 0.9;
}
.mkt-topbar__right svg,.mkt-announcement__right svg {
  width: 11px;
  height: 11px;
}
.mkt-topbar__link,.mkt-announcement__link {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.mkt-topbar__link:hover,.mkt-announcement__item.mkt-announcement__link:hover,.mkt-announcement__link:hover {
  color: #e2e8f0;
}
.mkt-topbar__lang,.mkt-announcement__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.mkt-announcement__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.mkt-announcement__close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
/* Mobile: keep the utility strip scrollable and the promo + dismiss visible.   Desktop (≥768px) shows every configured item. */@media (max-width: 767.98px) {
  .mkt-topbar__inner,  .mkt-announcement__inner {
    gap: 10px;
  }
  .mkt-topbar__left,  .mkt-topbar__right {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mkt-topbar__left::-webkit-scrollbar,  .mkt-topbar__right::-webkit-scrollbar {
    display: none;
  }
  .mkt-topbar__link,  .mkt-topbar__lang {
    flex-shrink: 0;
  }
  .mkt-announcement__link {
    flex-shrink: 0;
  }
  .mkt-announcement__right {
    margin-left: auto;
  }
}
/* ==========================================================================   Main header row   ========================================================================== */.mkt-header {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}
.mkt-header.mkt-header--sticky {
  position: sticky;
  top: 0;
  z-index: 1050;
}
.mkt-header-main {
  background: #fff;
  border-bottom: 1px solid var(--tm-border);
}
.mkt-header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (min-width: 768px) {
  .mkt-header-main__inner {
    padding-top: 22px;
    padding-bottom: 22px;
  }
}
/* -- Hamburger ----------------------------------------------------------- */.mkt-hamburger svg {
  width: 24px;
  height: 24px;
}
/* -- Logo ---------------------------------------------------------------- */.mkt-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.mkt-logo__img {
  height: 44px;
  max-width: 200px;
  object-fit: contain;
}
.mkt-logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--tm-primary);
  color: #fff;
}
.mkt-logo__mark svg {
  width: 20px;
  height: 20px;
}
.mkt-logo__word {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.mkt-logo__word--a {
  color: var(--tm-text-dark);
}
.mkt-logo__word--b {
  color: var(--tm-primary);
}
.mkt-logo__img--sm {
  height: 36px;
}
.mkt-logo__mark--sm {
  width: 32px;
  height: 32px;
}
.mkt-logo__mark--sm svg {
  width: 16px;
  height: 16px;
}
.mkt-logo__word--sm {
  font-size: 18px;
}
/* ==========================================================================   Desktop search bar (pill)   ========================================================================== */.mkt-search {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 30;
}
.mkt-header-search {
  display: none;
  max-width: 672px;
  margin: 0 24px;
}
@media (min-width: 768px) {
  .mkt-header-search {
    display: flex;
  }
}
.mkt-header-search .eos-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 0;
  background: #fff;
  border: 2px solid var(--tm-primary);
  border-radius: 5px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mkt-header-search .eos-search-form:focus-within {
  border-color: var(--tm-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(15, 101, 214, 0.12);
}
.mkt-search__select {
  display: none;
  flex-shrink: 0;
  width: 140px;
  height: 100%;
  padding: 0 10px;
  border: none;
  border-right: 1px solid var(--tm-border);
  border-radius: 5px 0 0 5px;
  background: #f9fafb;
  color: var(--tm-text-dark);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  appearance: none;
}
@media (min-width: 1024px) {
  .mkt-search__select {
    display: block;
  }
}
.mkt-header-search .eos-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 16px;
  border: none;
  background: transparent;
  color: var(--tm-text-dark);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}
.mkt-header-search .eos-search-form:focus-within .eos-search-icon {
  color: var(--tm-primary);
}
.mkt-header-search .eos-search-btn,.mkt-header-search .eos-search-btn:active {
  width: 42px;
  height: 42px;
  margin-right: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-header-search .eos-search-btn:hover,.mkt-header-search .eos-search-btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  filter: var(--eos-btn-hover-filter, none);
}
.mkt-header-search .eos-search-btn svg {
  width: 18px;
  height: 18px;
}
.mkt-header-search .eos-search-clear {
  flex: 0 0 auto;
  margin-right: 4px;
}
/* -- Suggest panel (already absolute; keep z-order above nav) ------------ */.mkt-header-search .eos-search-panel {
  z-index: 40;
}
/* -- Market-theme suggestion panel styling ----------------------------- */.mkt-header-search .eos-search-panel {
  border-radius: 10px;
  border: 1px solid var(--tm-border);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  padding: 8px;
  min-width: 360px;
}
.mkt-header-search .eos-search-panel .eos-search-item {
  padding: 10px 12px;
  border-radius: 8px;
  gap: 14px;
}
.mkt-header-search .eos-search-panel .eos-search-item:hover,.mkt-header-search .eos-search-panel .eos-search-item.is-active {
  background: var(--tm-surface-hover);
}
.mkt-header-search .eos-search-panel .eos-search-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--tm-border);
}
.mkt-header-search .eos-search-panel .eos-search-item-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--tm-text-dark);
}
.mkt-header-search .eos-search-panel .eos-search-item-meta {
  font-size: 12px;
  color: var(--tm-text-muted);
}
.mkt-header-search .eos-search-panel .eos-search-item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-sale);
}
.mkt-header-search .eos-search-panel .eos-search-item-price del {
  font-size: 12px;
  font-weight: 400;
  color: var(--tm-text-muted);
  margin-left: 6px;
}
.mkt-header-search .eos-search-panel .eos-search-item-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--tm-sale);
  color: #fff;
}
.mkt-header-search .eos-search-panel .eos-search-foot {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tm-primary);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}
.mkt-header-search .eos-search-panel .eos-search-foot:hover {
  background: var(--tm-surface-hover);
}
.mkt-header-search .eos-search-panel .eos-search-msg {
  padding: 20px 16px;
  text-align: center;
  font-size: 14px;
  color: var(--tm-text-muted);
  gap: 10px;
}
.mkt-header-search .eos-search-panel .eos-search-msg svg {
  width: 28px;
  height: 28px;
  opacity: 0.4;
}
.mkt-header-search .eos-search-panel .eos-search-loader {
  padding: 20px 16px;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  color: var(--tm-text-muted);
}
.mkt-header-search .eos-search-panel .eos-search-spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
.mkt-mobile-search .eos-search-panel {
  border-radius: 10px;
  border: 1px solid var(--tm-border);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  padding: 8px;
}
/* ==========================================================================   Header actions (Sign In / Wishlist / Cart)   ========================================================================== */.mkt-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.mkt-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  color: var(--tm-text-dark);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease;
}
.mkt-action:hover {
  color: var(--tm-primary);
}
.mkt-action:hover svg {
  color: var(--tm-primary);
}
.mkt-action__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  transition: transform 0.2s ease;
}
.mkt-action:hover .mkt-action__icon {
  transform: scale(1.08);
}
.mkt-action__icon svg {
  width: 24px;
  height: 24px;
  transition: color 0.18s ease;
}
.mkt-action__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: inherit;
  white-space: nowrap;
}
.mkt-action--account,.mkt-action--wishlist {
  display: none;
}
@media (min-width: 576px) {
  .mkt-action--account,  .mkt-action--wishlist {
    display: inline-flex;
  }
}
@media (max-width: 575.98px) {
  .mkt-action__label {
    display: none;
  }
}
.mkt-actions .eos-user-avatar-img {
  width: 28px;
  height: 28px;
}
.mkt-actions .eos-user-avatar-initials {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
  background: var(--tm-primary);
}
.mkt-action--wishlist .eos-badge {
  background: var(--tm-primary);
  box-shadow: 0 2px 6px rgba(15, 101, 214, 0.3);
}
.mkt-action--cart .eos-badge {
  background: var(--tm-sale);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.32);
}
.mkt-action--cart[data-cart-total] .mkt-action__label {
  font-weight: 600;
}
/* ==========================================================================   Mobile search row (inside the header)   ========================================================================== */.mkt-header-mobile-search {
  background: #fff;
  padding-bottom: 14px;
}
.mkt-mobile-search {
  position: relative;
  display: flex;
  width: 100%;
}
.mkt-mobile-search .eos-search-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.mkt-mobile-search .eos-search-form:focus-within {
  border-color: var(--tm-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.1);
}
.mkt-mobile-search .eos-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 14px;
  border: none;
  background: transparent;
  color: var(--tm-text-dark);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}
.mkt-mobile-search .eos-search-btn,.mkt-mobile-search .eos-search-btn:active {
  width: 34px;
  height: 34px;
  margin-right: 3px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
}
.mkt-mobile-search .eos-search-btn:hover,.mkt-mobile-search .eos-search-btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  filter: var(--eos-btn-hover-filter, none);
}
.mkt-mobile-search .eos-search-icon {
  margin-left: 16px;
  color: var(--tm-text-muted);
}
.mkt-mobile-search .eos-search-panel {
  z-index: 40;
}
/* ==========================================================================   Primary navigation (Browse Categories + links)   ========================================================================== */.mkt-nav {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--tm-border);
}
@media (min-width: 768px) {
  .mkt-nav {
    display: block;
  }
}
.mkt-nav__inner {
  display: flex;
}
.mkt-nav-cats {
  width: 256px;
  flex-shrink: 0;
  position: relative;
  background: var(--tm-primary);
  color: #fff;
}
.mkt-nav-cats__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.mkt-nav-cats__toggle-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mkt-nav-cats__toggle-title svg {
  width: 16px;
  height: 16px;
}
.mkt-nav-cats__chev {
  width: 12px;
  height: 12px;
}
.mkt-nav-cats:hover .mkt-nav-cats__chev {
  transform: rotate(180deg);
}
.mkt-nav-cats__chev {
  transition: transform 0.25s ease;
}
.mkt-nav-cats__menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  z-index: 60;
}
.mkt-nav-cats:hover .mkt-nav-cats__menu,.mkt-nav-cats:focus-within .mkt-nav-cats__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mkt-nav-cats__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid #f3f4f6;
  color: var(--tm-text-dark);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkt-nav-cats__item:last-of-type {
  border-bottom: 1px solid #f3f4f6;
}
.mkt-nav-cats__item:hover {
  background: #f9fafb;
  color: var(--tm-primary);
}
.mkt-nav-cats__item.active {
  color: var(--tm-primary);
  font-weight: 500;
}
.mkt-nav-cats__icon {
  width: 19px;
  height: 19px;
  color: #9ca3af;
  flex-shrink: 0;
}
.mkt-nav-cats__item:hover .mkt-nav-cats__icon {
  color: var(--tm-primary);
}
.mkt-nav-cats__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  color: var(--tm-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}
.mkt-nav-cats__all:hover {
  background: #f9fafb;
}
.mkt-nav-cats__all svg {
  width: 13px;
  height: 13px;
}
/* -- Menu links ---------------------------------------------------------- */.mkt-nav-list {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0 0 0 32px;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--tm-text-dark);
}
.mkt-nav-item {
  position: relative;
}
.mkt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 0 11px;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.mkt-nav-link:hover {
  color: var(--tm-primary);
}
.mkt-nav-link.active {
  color: var(--tm-primary);
  border-bottom-color: var(--tm-primary);
}
.mkt-nav-link__chev {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.mkt-nav-hot {
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--tm-sale);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  position: relative;
  top: -2px;
}
/* -- Dropdown submenu ---------------------------------------------------- */.mkt-nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 60;
}
.mkt-nav-item:hover > .mkt-nav-submenu,.mkt-nav-item:focus-within > .mkt-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mkt-nav-submenu__link {
  display: block;
  padding: 9px 20px;
  color: var(--tm-text-dark);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkt-nav-submenu__link:hover {
  background: #f9fafb;
  color: var(--tm-primary);
}
/* ==========================================================================   Breadcrumb foundation bar   ========================================================================== */.mkt-breadcrumb-bar {
  background: #fff;
  border-bottom: 1px solid var(--tm-border);
  font-size: 13px;
  padding: 10px 0;
}
.mkt-breadcrumb-bar__inner {
  display: flex;
  align-items: center;
}
/* ==========================================================================   Mobile offcanvas menu   ========================================================================== */.mkt-mobile-menu.offcanvas {
  font-family: var(--tm-font);
  /* Cap the drawer at the viewport width: Bootstrap's fixed 360px
     offcanvas-end would hang 40px off-screen on a 320px phone, clipping
     the left edge of menu content. Selector matches storefront.css's
     `.offcanvas.offcanvas-end` specificity and wins on source order. */
  max-width: min(360px, 100vw);
  /* 100dvh tracks the real visible viewport on mobile browsers (the
     address-bar collapse on Android Chrome / iOS Safari makes 100vh too
     tall and clips the bottom of the drawer). Bootstrap's height:100%
     remains as the fallback for engines without dvh. */
  height: 100%;
  height: 100dvh;
}
.mkt-mobile-menu .offcanvas-header {
  border-bottom: 1px solid var(--tm-border);
  padding: 14px 16px;
  /* iOS notch / status bar: keep the logo + close button clear of the
     safe area without affecting Android (env() is 0 there). */
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.mkt-mobile-menu .offcanvas-body {
  /* Room for the home-indicator bar on notched iPhones. */
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
/* The chat launcher (z-index 99999) would sit on top of the open drawer
   (z-index 1055) and intercept taps near the bottom-right. Suppress the
   whole widget while the drawer is open. body.mkt-menu-open is toggled by
   theme.js; :has() covers engines where that script failed to load. */
body.mkt-menu-open #eos-chat-widget,
body:has(.mkt-mobile-menu.show) #eos-chat-widget {
  visibility: hidden;
  pointer-events: none;
}
/* Nested children of a configured menu item: indented, touch-friendly
   sub-links (no hover required). */
.eos-mobile-nav-link--sub {
  padding-left: 44px;
  font-size: 14px;
  color: var(--tm-text-muted, #64748b);
}
.eos-mobile-nav-link--sub.active,
.eos-mobile-nav-link--sub:hover {
  color: var(--tm-primary);
}
.mkt-mobile-nav {
  padding: 4px 0 16px;
}
.mkt-mobile-nav__section {
  padding: 10px 16px 14px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}
.mkt-mobile-nav__heading {
  display: block;
  padding: 6px 0 8px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mkt-mobile-nav__form {
  margin: 0;
}
.mkt-mobile-nav__btn {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
/* ===================================================================== *//*  Market Homepage (Phase 4) — TechMart reference conversion            *//* ===================================================================== */.mkt-hidden {
  display: none !important;
}
/* ------------------------------------------------------------------ *//*  Hero slider                                                        *//* ------------------------------------------------------------------ */.mkt-hero-wrap {
  padding-top: 24px;
  padding-bottom: 24px;
}
.mkt-hero__slider {
  position: relative;
  width: 100%;
  height: 400px;
  background: var(--mkt-surface-2, #f3f4f6);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mkt-hero__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
}
.mkt-hero__slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 10;
}
.mkt-hero__slide--blue {
  background: linear-gradient(90deg,    color-mix(in srgb, var(--mkt-primary, #2563eb) 8%, #fff) 0%,    color-mix(in srgb, var(--mkt-primary, #2563eb) 14%, #fff) 100%);
}
.mkt-hero__slide--light {
  background: linear-gradient(90deg, #ffffff 0%, var(--mkt-surface-2, #f4f6fa) 100%);
}
.mkt-hero__slide--image {
  background-size: cover;
  background-position: center;
  position: relative;
}
.mkt-hero__slide--image::before {
  content: '';
  position: absolute;
  top: 0;
 left: 0;
 right: 0;
 bottom: 0;
  background: var(--mkt-hero-scrim, rgba(0, 0, 0, 0.35));
  z-index: 1;
}
.mkt-hero__slide--image .mkt-hero__copy {
  position: relative;
  z-index: 10;
}
.mkt-hero__slide--image .mkt-hero__title,.mkt-hero__slide--image .mkt-hero__sub {
  color: #fff;
}
.mkt-hero__slide--image .mkt-hero__eyebrow {
  color: rgba(255, 255, 255, 0.9);
}
.mkt-hero__copy {
  width: 100%;
  z-index: 10;
}
.mkt-hero__eyebrow {
  display: block;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--tm-primary);
}
.mkt-hero__eyebrow--red {
  color: #ef4444;
}
.mkt-hero__title {
  font-family: var(--mkt-hero-font-family, inherit);
  font-size: var(--mkt-hero-font-size, 36px);
  font-weight: var(--mkt-hero-font-weight, 700);
  color: var(--tm-text-dark);
  line-height: var(--mkt-hero-line-height, 1.25);
  margin-bottom: 16px;
}
.mkt-hero__title-light {
  font-weight: 300;
}
.mkt-hero__sub {
  font-family: var(--mkt-hero-font-family, inherit);
  color: var(--mkt-text-muted, #4b5563);
  font-size: 16px;
  margin-bottom: 32px;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
.mkt-hero__cta {
  display: inline-block;
  font-weight: var(--eos-btn-font-weight, 500);
  padding: var(--eos-btn-padding-y, 12px) var(--eos-btn-padding-x, 32px);
  border-radius: var(--eos-btn-radius, 5px);
  border-width: var(--eos-btn-border-width, 0);
  border-style: solid;
  border-color: transparent;
  font-size: var(--eos-btn-font-size, inherit);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,    transform var(--eos-btn-hover-transform, none) 0.18s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkt-hero__cta--primary {
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  border-color: var(--eos-btn-border-color, var(--eos-btn-bg, var(--tm-primary)));
  box-shadow: 0 10px 15px -3px rgba(15, 101, 214, 0.3);
}
.mkt-hero__cta--primary:hover,.mkt-hero__cta--primary:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  border-color: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  transform: var(--eos-btn-hover-transform, none);
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, 0 10px 15px -3px rgba(15, 101, 214, 0.3));
}
.mkt-hero__cta--dark {
  background: var(--tm-text-dark);
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
.mkt-hero__cta--dark:hover {
  background: #000;
  color: #fff;
}
.mkt-hero__cta--ghost {
  background: transparent;
  color: var(--tm-text-dark);
  border: 1px solid rgba(15, 23, 42, 0.25);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mkt-hero__cta--ghost:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--tm-text-dark);
  border-color: rgba(15, 23, 42, 0.45);
}
.mkt-hero__slide--image .mkt-hero__cta--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.mkt-hero__slide--image .mkt-hero__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}
.mkt-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.mkt-hero__art {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}
.mkt-hero__art svg,.mkt-hero__img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.25));
}
.mkt-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #1f2937;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 20;
  transition: background-color 0.2s ease;
}
.mkt-hero__arrow:hover {
  background: #fff;
}
.mkt-hero__arrow--prev {
  left: 16px;
}
.mkt-hero__arrow--next {
  right: 16px;
}
.mkt-hero__dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 20;
}
.mkt-hero__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: #9ca3af;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mkt-hero__dot.is-active {
  background: var(--tm-primary);
}
/* ------------------------------------------------------------------ *//*  Brand logo carousel (logos from admin Catalog > Brands)            *//* ------------------------------------------------------------------ */.mkt-brands-wrap {
  padding-top: 32px;
  padding-bottom: 32px;
}
.mkt-brands {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}
.mkt-brands__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mkt-brands__track {
  display: flex;
  gap: 16px;
  scroll-snap-type: x proximity;
}
.mkt-brands__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mkt-brands__track {
  display: flex;
  gap: 16px;
  scroll-snap-type: x proximity;
}
.mkt-brand {
  flex: 0 0 auto;
  width: 168px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: #f4f5f7;
  border: 1px solid var(--tm-border);
  border-radius: 4px;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mkt-brand:hover {
  border-color: var(--tm-primary);
  box-shadow: 0 6px 18px rgba(15, 101, 214, 0.12);
}
.mkt-brand img {
  max-width: 100%;
  max-height: 44px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.72;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.mkt-brand:hover img {
  filter: grayscale(0%);
  opacity: 1;
}
.mkt-brands__arrow {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--tm-border);
  border-radius: 50%;
  color: var(--tm-text-dark);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}
.mkt-brands:hover .mkt-brands__arrow {
  opacity: 1;
  visibility: visible;
}
.mkt-brands__arrow:hover {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #ffffff;
}
.mkt-brands__arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
}
.mkt-brands:hover .mkt-brands__arrow[disabled] {
  opacity: 0.35;
}
/* ------------------------------------------------------------------ *//*  Popular categories (horizontal scroll row)                         *//* ------------------------------------------------------------------ */.mkt-cats-wrap {
  padding-top: 32px;
  padding-bottom: 32px;
}
.mkt-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0 0 24px;
}
.mkt-hide-scrollbar {
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.mkt-hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.mkt-cats {
  display: flex;
  gap: 16px;
  padding-bottom: 16px;
}
.mkt-cat {
  flex: none;
  width: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--mkt-bg, #fff);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--mkt-border-light, #f3f4f6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}
.mkt-cat:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.mkt-cat__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mkt-surface-2, #f9fafb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mkt-text-muted, #4b5563);
  margin-bottom: 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mkt-cat:hover .mkt-cat__icon {
  background: color-mix(in srgb, var(--mkt-primary, #2563eb) 10%, transparent);
  color: var(--tm-primary);
}
.mkt-cat__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--tm-text-dark);
  text-align: center;
}
/* ------------------------------------------------------------------ *//*  Promotional banners (2:1 cards)                                    *//* ------------------------------------------------------------------ */.mkt-promos-wrap {
  padding-top: 16px;
  padding-bottom: 16px;
}
.mkt-promos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.mkt-promo {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mkt-promo:nth-child(3) {
  display: none;
}
.mkt-promo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.mkt-promo:hover .mkt-promo__img {
  transform: scale(1.05);
}
.mkt-promo__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent);
  z-index: 1;
}
.mkt-promo__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 32px;
}
.mkt-promo__eyebrow {
  color: #facc15;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.mkt-promo:nth-child(2) .mkt-promo__eyebrow {
  color: #4ade80;
}
.mkt-promo:nth-child(3) .mkt-promo__eyebrow {
  color: #f87171;
}
.mkt-promo__heading {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.mkt-promo__sub {
  color: #e5e7eb;
  font-size: 14px;
  margin-bottom: 16px;
}
.mkt-promo__link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
/* ------------------------------------------------------------------ *//*  Offer banner (canonical Admin → Banners → offer placement)         *//* ------------------------------------------------------------------ */.mkt-offer-wrap {
  padding-top: 16px;
  padding-bottom: 16px;
}
.mkt-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 16px;
  overflow: hidden;
  padding: 48px 32px;
  background-color: var(--mkt-primary);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mkt-offer__inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
}
.mkt-offer__eyebrow {
  display: inline-block;
  color: #facc15;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.mkt-offer__title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}
.mkt-offer__text {
  color: #e5e7eb;
  font-size: 16px;
  margin-bottom: 24px;
}
.mkt-offer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--mkt-text-dark, #0f172a);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.mkt-offer__cta:hover {
  background: rgba(255, 255, 255, 0.85);
}
.mkt-offer__art {
  position: relative;
  z-index: 1;
}
.mkt-offer__art img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 12px;
}
@media (min-width: 768px) {
  .mkt-offer {
    padding: 64px 48px;
  }
  .mkt-offer--split {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .mkt-offer--split .mkt-offer__inner {
    flex: 1;
    min-width: 0;
  }
  .mkt-offer--split .mkt-offer__art {
    flex: 0 0 320px;
  }
}
/* ------------------------------------------------------------------ *//*  Newsletter section (canonical Admin → Banners → newsletter)        *//* ------------------------------------------------------------------ */.mkt-news-wrap {
  padding-top: 16px;
  padding-bottom: 16px;
}
.mkt-news {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 16px;
  padding: 48px 32px;
  background: var(--mkt-text-dark, #0f172a);
  color: #fff;
}
.mkt-news__eyebrow {
  display: inline-block;
  color: var(--mkt-primary-light, #3b82f6);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.mkt-news__title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
}
.mkt-news__text {
  color: #cbd5e1;
  font-size: 16px;
  margin: 0;
}
.mkt-news__form {
  width: 100%;
  max-width: 460px;
}
.mkt-news__input-group {
  display: flex;
  gap: 8px;
  /* Single height token for the newsletter controls: the input and the
     Subscribe button read the same custom property, so they cannot drift
     apart across browsers or breakpoints. 42px is the storefront design
     system's canonical button height (storefront.css caps buttons at
     max-height: 42px), so the pair honours the system instead of fighting
     it. Vertical padding no longer drives their box; this token does
     (border-box). */
  --mkt-news-ctl-h: 42px;
}
.mkt-news__input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: var(--mkt-news-ctl-h);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 8px;
  padding: 0 16px;
  line-height: 1.2;
  font-size: 15px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.mkt-news__input::placeholder {
  color: #94a3b8;
}
.mkt-news__btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  height: var(--mkt-news-ctl-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--eos-btn-radius, 8px);
  background: var(--eos-btn-bg, var(--mkt-primary, #2563eb));
  color: var(--eos-btn-color, #fff);
  font-weight: var(--eos-btn-font-weight, 600);
  font-size: var(--eos-btn-font-size, 15px);
  padding: 0 var(--eos-btn-padding-x, 24px);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease,    transform var(--eos-btn-hover-transform, none) 0.18s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkt-news__btn:hover,.mkt-news__btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--mkt-primary-dark, #1e40af));
  color: var(--eos-btn-hover-color, #fff);
  transform: var(--eos-btn-hover-transform, none);
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, none);
}
@media (min-width: 768px) {
  .mkt-news {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 56px 48px;
  }
}
/* ------------------------------------------------------------------ *//*  Testimonials (canonical eligible reviews)                          *//* ------------------------------------------------------------------ */.mkt-testimonials-wrap {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mkt-section-head--center {
  text-align: center;
  justify-content: center;
}
.mkt-testimonials__sub {
  margin: 8px 0 0;
  color: var(--mkt-text-muted);
  font-size: 15px;
}
.mkt-testimonials__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 auto 32px;
  padding: 14px 20px;
  max-width: 420px;
  border-radius: 12px;
  background: var(--mkt-surface-2, #f1f5f9);
  border: 1px solid var(--mkt-border, #e2e8f0);
}
.mkt-testimonials__avg {
  font-size: 22px;
  font-weight: 700;
  color: var(--mkt-heading);
  line-height: 1;
}
.mkt-testimonials__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--mkt-rating, #fbbf24);
}
.mkt-testimonials__count {
  font-size: 13px;
  color: var(--mkt-text-muted);
}
.mkt-testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.mkt-testimonial {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 12px;
  background: var(--mkt-surface, #f8fafc);
  border: 1px solid var(--mkt-border, #e2e8f0);
}
.mkt-testimonial__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--mkt-rating, #fbbf24);
}
.mkt-testimonial__quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mkt-text);
}
.mkt-testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.mkt-testimonial__avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mkt-primary, #2563eb);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.mkt-testimonial__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mkt-testimonial__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--mkt-heading);
}
.mkt-testimonial__verified {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mkt-success, #10b981) 12%, transparent);
  color: var(--mkt-success, #10b981);
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}
.mkt-testimonial__product {
  font-size: 12px;
  color: var(--mkt-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) {
  .mkt-testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .mkt-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ------------------------------------------------------------------ *//*  Featured products (tabbed grid)                                    *//* ------------------------------------------------------------------ */.mkt-feat-wrap {
  padding-top: 40px;
  padding-bottom: 40px;
}
.mkt-feat__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 16px;
  margin-bottom: 32px;
}
.mkt-feat__heading {
  font-size: 24px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0;
}
.mkt-feat__tabs {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 24px;
  font-size: 14px;
  font-weight: 500;
}
.mkt-feat__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 16px;
  color: #6b7280;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mkt-feat__tab:hover {
  color: var(--tm-primary);
}
.mkt-feat__tab.is-active {
  color: var(--tm-primary);
  border-bottom-color: var(--tm-primary);
}
.mkt-pd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.mkt-pd {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* The card is a grid item: drop the automatic minimum so wide content
     (long names, big prices) can never stretch the card past its track. */
  min-width: 0;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease;
}
.mkt-pd:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.mkt-pd__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mkt-pd__badge {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.mkt-pd__badge--sale {
  background: #ef4444;
}
.mkt-pd__badge--new {
  background: #22c55e;
}
.mkt-pd__badge--hot {
  background: var(--tm-primary);
}
.mkt-pd__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
}
.mkt-pd__thumb {
  display: block;
  height: 100%;
  width: 100%;
}
.mkt-pd__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}
.mkt-pd:hover .mkt-pd__img {
  transform: scale(1.05);
}
.mkt-pd__actions {
  position: absolute;
  bottom: 16px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 5;
  pointer-events: none;
}
.mkt-pd:hover .mkt-pd__actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mkt-pd__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mkt-pd__icon {
  background: #fff;
  color: var(--tm-text-dark);
}
.mkt-pd__icon:hover {
  background: var(--tm-primary);
  color: #fff;
}
.mkt-pd__actions .wishlist-btn {
  position: static;
  top: auto;
  right: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--tm-text-dark);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mkt-pd__actions .wishlist-btn:hover {
  background: var(--tm-primary);
  color: #fff;
  transform: none;
}
.mkt-pd__actions .mkt-pd__icon--primary {
  background: var(--tm-primary);
  color: #fff;
}
.mkt-pd__actions .mkt-pd__icon--primary:hover {
  background: var(--tm-primary-dark);
}
.mkt-pd__body {
  padding: 16px;
  box-sizing: border-box;
  min-width: 0;
  border-top: 1px solid #f9fafb;
}
.mkt-pd__cat {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  text-decoration: none;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.mkt-pd__cat:hover {
  color: var(--tm-primary);
}
.mkt-pd__name {
  margin: 0 0 8px;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tm-text-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 38px;
}
.mkt-pd__name a {
  color: inherit;
  text-decoration: none;
}
.mkt-pd__name a:hover {
  color: var(--tm-primary);
}
/* Short-description teaser. Hard-capped at 50 characters by the partial, so   this only owns the visual treatment. Clamped to two lines to keep the   rating/price rows aligned across a row of cards. */.mkt-pd__desc {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--mkt-text-muted, #64748b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mkt-pd__rating {
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-bottom: 12px;
}
.mkt-pd__stars {
  display: inline-flex;
  gap: 2px;
  line-height: 1;
}
.mkt-pd__rcount {
  color: #9ca3af;
  margin-left: 4px;
}
/* Price row. flex-wrap is the responsive contract: the price and the Order
   Now pill share one line only while they both fit the card's content box;
   otherwise the pill drops onto its own line and fills it. Without the wrap
   (and with a non-shrinkable, nowrap pill) the row overflowed 2-col mobile
   cards by up to ~80px and the button escaped / was clipped by the card. */
.mkt-pd__price {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 12px;
}
.mkt-pd__price-col {
  display: flex;
  flex-direction: column;
  /* Greedy flex-grow: the price box swallows any leftover space on a shared
     line, so the pill keeps hugging the row's right edge exactly like the
     old space-between layout. Once the pill wraps onto its own line the
     price is no longer in the mix and the pill fills the row instead. */
  flex: 9999 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.mkt-pd__old {
  color: #9ca3af;
  text-decoration: line-through;
  font-size: 12px;
}
.mkt-pd__price-col .mkt-pd__curr {
  color: var(--tm-primary);
  font-size: 18px;
  font-weight: 700;
}
.mkt-pd__price > .mkt-pd__curr {
  flex: 9999 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  color: var(--tm-text-dark);
  font-size: 18px;
  font-weight: 700;
}
.mkt-pd__cart {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f4f6;
  color: #374151;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mkt-pd__cart:hover {
  background: var(--tm-primary);
  color: #fff;
}
/* Labeled Order Now pill in the price row (replaces the old cart icon).
   Layout contract (see .mkt-pd__price above): flex: 1 1 auto + min-width: 0
   let the pill shrink into narrow cards and fill its line once it wraps;
   max-width: 100% and a wrappable label guarantee it never leaves the card
   (down to 320px) — it used to be flex-shrink: 0 + white-space: nowrap,
   which pushed it outside 2-col mobile cards. Colour / shape stay on the
   shared --eos-btn-* tokens so Appearance -> Buttons keeps working. */
.mkt-pd__order-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--eos-btn-padding-y, 8px) var(--eos-btn-padding-x, 12px);
  box-sizing: border-box;
  border: none;
  border-radius: var(--eos-btn-radius, 8px);
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  font-size: var(--eos-btn-font-size, 12.5px);
  font-weight: var(--eos-btn-font-weight, 600);
  line-height: 1;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  transition: filter 0.2s ease, transform 0.15s ease, background-color 0.18s ease, color 0.18s ease;
}
.mkt-pd__order-btn:hover,.mkt-pd__order-btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary));
  color: var(--eos-btn-hover-color, #fff);
  filter: var(--eos-btn-hover-filter, brightness(0.92));
  transform: var(--eos-btn-hover-transform, none);
  box-shadow: var(--eos-btn-hover-shadow, none);
}
.mkt-pd__order-btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.mkt-pd__order-btn .spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
/* -- Product card rebuild (TechMart reference) ---------------------------- * * The card root also carries .product-card so storefront.js keeps whole-card * navigation, wishlist, cart and buy-now hooks. These rules cancel the core * lift/border hover so the card matches the reference (shadow-only hover).  */.mkt-pd.product-card {
  cursor: pointer;
}
.mkt-pd.product-card:hover {
  transform: none;
  border-color: #f3f4f6;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.mkt-pd__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mkt-pd__price {
  margin-top: auto;
  padding-top: 12px;
}
.mkt-pd__name {
  margin-bottom: 8px;
}
.mkt-pd__rating svg {
  flex-shrink: 0;
}
/* Icon-only buttons: keep JS "Adding... / Added!" label text out of the   circle while the spinner / check icon stays centred. */.mkt-pd__cart,.mkt-pd__icon {
  padding: 0;
  font-size: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.mkt-pd__cart .spinner,.mkt-pd__icon .spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.mkt-pd__badge--stock {
  background: #374151;
}
.mkt-pd__badge--low {
  background: #f59e0b;
}
/* Touch devices never fire :hover - keep the actions reachable. */@media (hover: none) {
  .mkt-pd__actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}
/* ==========================================================================   Flash Deals section (TechMart reference conversion)   ========================================================================== */.mkt-flash-wrap {
  padding-top: 16px;
  padding-bottom: 40px;
}
.mkt-flash {
  background: #fef2f2;
  border: 1px solid #fee2e2;
  border-radius: 16px;
  padding: 40px 16px;
}
/* -- Header: bolt + title + "Ends in" badge + countdown ----------------- */.mkt-flash__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid #fecaca;
}
.mkt-flash__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mkt-flash__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--tm-text-dark);
}
.mkt-flash__bolt {
  color: #ef4444;
  flex-shrink: 0;
}
.mkt-flash__ends {
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.mkt-flash__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #dc2626;
  text-decoration: none;
  white-space: nowrap;
}
.mkt-flash__link svg {
  transition: transform 0.2s ease;
}
.mkt-flash__link:hover {
  color: #b91c1c;
}
.mkt-flash__link:hover svg {
  transform: translateX(3px);
}
/* -- Countdown timer ---------------------------------------------------- */.mkt-flash__timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mkt-flash__unit {
  background: #fff;
  border: 1px solid #fee2e2;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 8px;
  min-width: 55px;
  text-align: center;
}
.mkt-flash__num {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #dc2626;
  font-variant-numeric: tabular-nums;
}
.mkt-flash__label {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6b7280;
}
.mkt-flash__sep {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #fca5a5;
}
/* -- Deal grid ---------------------------------------------------------- */.mkt-flash__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
/* -- Flash card variant ------------------------------------------------- */.mkt-pd--flash .mkt-pd__media {
  height: 160px;
}
.mkt-flash__progress {
  width: 100%;
  height: 6px;
  margin-top: 12px;
  margin-bottom: 8px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}
.mkt-flash__progress-bar {
  display: block;
  height: 100%;
  background: #ef4444;
  border-radius: 9999px;
  transition: width 0.4s ease;
}
.mkt-flash__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin-bottom: 12px;
  font-size: 10px;
  color: #6b7280;
}
.mkt-pd--flash .mkt-pd__price-col .mkt-pd__curr {
  color: #ef4444;
}
@media (min-width: 768px) {
  .mkt-flash__head {
    flex-direction: row;
    justify-content: space-between;
  }
  .mkt-flash__title {
    justify-content: flex-start;
  }
  .mkt-flash__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
  .mkt-pd--flash .mkt-pd__media {
    height: 192px;
  }
}
/* ------------------------------------------------------------------ *//*  Features strip                                                     *//* ------------------------------------------------------------------ */.mkt-features {
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: 40px 0;
  margin-top: 32px;
}
.mkt-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.mkt-feature {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mkt-feature__icon {
  color: var(--tm-primary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-feature__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 16px;
  color: var(--tm-text-dark);
}
.mkt-feature__desc {
  margin: 0;
  font-size: 14px;
  color: var(--mkt-text-muted, #6b7280);
}
/* ------------------------------------------------------------------ *//*  Footer (TechMart reference: gray-900 + gray-800 newsletter card)   *//* ------------------------------------------------------------------ */.mkt-footer {
  background: #111827;
  color: #d1d5db;
  padding-top: 64px;
  padding-bottom: 32px;
}
.mkt-newsletter-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 48px;
}
.mkt-newsletter-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.mkt-newsletter-text {
  margin: 0;
  color: #9ca3af;
}
.mkt-footer .newsletter-form {
  margin-bottom: 0;
  width: 100%;
  max-width: 448px;
  /* storefront.css ships `.newsletter-form { flex-direction: column }` for
     phones (max-width 575.98px). This selector (0-2-0) outranks it (0-1-0)
     at every viewport, so the shared mobile rule can never stack the pill —
     the form is a grid below anyway and ignores flex-direction entirely. */
  flex-direction: row;
}
/* Unified subscription control: CSS Grid keeps the email field and the
   Subscribe button on one row at every viewport width (columns
   minmax(0,1fr) + auto can never overflow their container), while the
   status line spans underneath only when it has content. This replaces the
   old flex-wrap layout, which let the button wrap below the input and let
   the always-present status paragraph carve a phantom row inside the pill. */
.mkt-newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "field btn" "status status";
  align-items: center;
  column-gap: 4px;
  row-gap: 0;
  background: #fff;
  border-radius: 9999px;
  padding: 4px;
}
.mkt-newsletter-field {
  grid-area: field;
  min-width: 0;
  display: flex;
  align-items: center;
}
.mkt-newsletter-icon {
  flex-shrink: 0;
  margin-left: 14px;
  color: #9ca3af;
}
.mkt-newsletter-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tm-text-dark);
}
.mkt-newsletter-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}
/* Visible keyboard focus for the field (the input itself has outline:
   none) — an inset ring that stays inside the pill's rounded edge. */
.mkt-newsletter-field:focus-within {
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
}
.mkt-newsletter-btn {
  grid-area: btn;
  align-self: center;
  justify-self: end;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  border: none;
  padding: var(--eos-btn-padding-y, 10px) var(--eos-btn-padding-x, 24px);
  border-radius: var(--eos-btn-radius, 9999px);
  font-family: inherit;
  font-weight: var(--eos-btn-font-weight, 500);
  font-size: var(--eos-btn-font-size, 14px);
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease,    transform var(--eos-btn-hover-transform, none) 0.18s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkt-newsletter-btn:hover,.mkt-newsletter-btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  transform: var(--eos-btn-hover-transform, none);
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, none);
}
.mkt-newsletter-btn:focus-visible {
  outline: 2px solid var(--mkt-focus, #2563eb);
  outline-offset: 2px;
}
.mkt-newsletter-status {
  grid-area: status;
  margin: 4px 16px 6px;
  font-size: 12px;
  color: #86efac;
  text-align: left;
}
/* The status paragraph is always in the DOM but usually empty — remove it
   from the grid so it never adds a phantom row of margin inside the pill. */
.mkt-newsletter-status:empty {
  display: none;
}
.mkt-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.mkt-footer-brand__name {
  color: #fff;
}
.mkt-footer-about {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.7;
  margin: 24px 0;
  max-width: 300px;
}
.mkt-footer-social {
  display: flex;
  gap: 16px;
}
.mkt-footer-social .footer-social-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #1f2937;
  border: none;
  color: #fff;
}
.mkt-footer-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  margin-bottom: 24px;
  padding-bottom: 0;
}
.mkt-footer-title::after {
  display: none;
}
.mkt-footer-links li {
  margin-bottom: 12px;
}
.mkt-footer-links a {
  color: #d1d5db;
  font-size: 14px;
}
.mkt-footer-links a::before {
  display: none;
}
.mkt-footer-links a:hover {
  color: var(--tm-primary);
}
.mkt-footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mkt-footer-contact__row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #d1d5db;
  margin-bottom: 16px;
}
.mkt-footer-contact__row svg {
  flex-shrink: 0;
  color: var(--tm-primary);
}
.mkt-footer-contact__row a {
  color: #d1d5db;
  text-decoration: none;
}
.mkt-footer-contact__row a:hover {
  color: var(--tm-primary);
}
.mkt-footer-contact__row--start {
  align-items: flex-start;
}
.mkt-footer-contact__row--start svg {
  margin-top: 3px;
}
.mkt-footer-bottom {
  border-top: 1px solid #1f2937;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.mkt-footer-copyright {
  color: #6b7280;
  font-size: 14px;
  margin: 0;
}
.mkt-footer-payments {
  display: flex;
  gap: 8px;
}
.mkt-pay {
  background: #fff;
  width: 40px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #1e40af;
}
.mkt-pay:nth-child(2) {
  color: #dc2626;
}
.mkt-pay:nth-child(3) {
  color: #60a5fa;
}
.mkt-pay:nth-child(4) {
  color: #1f2937;
}
/* ------------------------------------------------------------------ *//*  Responsive (market homepage)                                       *//* ------------------------------------------------------------------ */@media (max-width: 639px) {
  .mkt-brands {
    gap: 8px;
  }
  .mkt-brand {
    width: 116px;
    height: 64px;
    padding: 8px 10px;
  }
  .mkt-brand img {
    max-height: 34px;
  }
  .mkt-brands__arrow {
    width: 32px;
    height: 32px;
  }
}
/* Small screens (320-639px): tighten the footer newsletter pill so the
   input + Subscribe button stay on one comfortable row. The 16px input
   font prevents iOS Safari's zoom-on-focus from yanking the viewport. */
@media (max-width: 639.98px) {
  .mkt-newsletter-card {
    padding: 24px 18px;
  }
  .mkt-newsletter-title {
    font-size: 20px;
  }
  .mkt-newsletter-input {
    font-size: 16px;
    padding: 10px 12px;
  }
  .mkt-newsletter-icon {
    margin-left: 12px;
  }
  .mkt-newsletter-btn {
    padding-left: var(--eos-btn-padding-x, 16px);
    padding-right: var(--eos-btn-padding-x, 16px);
    font-size: 13px;
  }
}
/* Very narrow phones (~320px): drop the decorative envelope icon so the
   email text field keeps a usable width — layout stays identical. */
@media (max-width: 359.98px) {
  .mkt-newsletter-icon {
    display: none;
  }
  .mkt-newsletter-btn {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .mkt-hero__slide {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding: 64px;
  }
  .mkt-hero__slider {
    height: 500px;
  }
  .mkt-hero__copy {
    width: 50%;
  }
  .mkt-hero__ctas {
    justify-content: flex-start;
  }
  .mkt-hero__slide--column .mkt-hero__ctas {
    justify-content: center;
  }
  .mkt-hero__sub {
    margin-left: 0;
    margin-right: 0;
  }
  .mkt-hero__art {
    width: 50%;
    justify-content: center;
    margin-top: 0;
    height: 100%;
  }
  .mkt-section-title {
    font-size: 24px;
  }
  .mkt-cats {
    gap: 24px;
  }
  .mkt-cat {
    width: 160px;
  }
  .mkt-promos {
    grid-template-columns: repeat(2, 1fr);
  }
  .mkt-feat__tabs {
    display: flex;
  }
  .mkt-pd-grid {
    grid-template-columns: repeat(auto-fill, var(--mkt-card-w));
    justify-content: center;
    gap: 24px;
  }
  .mkt-pd__name {
    font-size: 17px;
    min-height: 43px;
  }
  .mkt-pd__order-btn {
    font-size: 13.5px;
    padding: 9px 14px;
  }
  .mkt-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mkt-newsletter-card {
    flex-direction: row;
    align-items: center;
  }
  .mkt-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mkt-footer-bottom {
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .mkt-hero__slide {
    padding: 64px;
  }
  .mkt-promos {
    grid-template-columns: repeat(3, 1fr);
  }
  .mkt-promo:nth-child(3) {
    display: block;
  }
  .mkt-features__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .mkt-footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ==========================================================================   Market homepage — section links, variant chips, trust strip, blog   ========================================================================== *//* -- "View All" link inside section heads -------------------------------- */.mkt-feat__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-primary);
  text-decoration: none;
  white-space: nowrap;
}
.mkt-feat__link svg {
  transition: transform 0.2s ease;
}
.mkt-feat__link:hover {
  color: var(--tm-primary-dark);
}
.mkt-feat__link:hover svg {
  transform: translateX(3px);
}
.mkt-feat__btn {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.mkt-feat__heading--sale {
  color: #ef4444;
}
/* -- Product card variant / attribute chips ------------------------------ */.mkt-pd__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
  margin-bottom: 4px;
}
.mkt-pd__attr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  min-width: 0;
}
.mkt-pd__attr-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}
.mkt-pd__attr-values {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mkt-pd__swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  display: inline-block;
  flex-shrink: 0;
}
.mkt-pd__attr-pill {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: #f8fafc;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  line-height: 1.5;
}
.mkt-pd__attr-more {
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
}
/* ==========================================================================   Quick View modal (Market)   ==========================================================================   Bootstrap owns the backdrop, fade, focus trap and body scroll lock; these   rules only theme the dialog content. `.modal-dialog-centered` +   `.modal-dialog-scrollable` keep it centred with a scrollable body. */.mkt-qv .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}
.mkt-qv .modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--tm-border);
}
.mkt-qv__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkt-qv .modal-body {
  padding: 20px;
}
.mkt-qv__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.mkt-qv__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 12px;
  background: var(--tm-bg);
  border-radius: 12px;
  overflow: hidden;
}
.mkt-qv__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}
.mkt-qv__name {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tm-text-dark);
}
.mkt-qv__desc {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tm-text-muted);
}
.mkt-qv__attrs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
}
.mkt-qv__attrs[hidden] {
  display: none;
}
.mkt-qv__attr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--tm-text-muted);
}
.mkt-qv__attr-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
}
.mkt-qv__attr-values {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.mkt-qv__swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  flex-shrink: 0;
}
.mkt-qv__attr-pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--tm-border);
  border-radius: 9999px;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #475569;
}
.mkt-qv__price {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--tm-primary);
}
.mkt-qv__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mkt-qv__actions .order-now-btn {
  flex: 1 1 auto;
}
.mkt-qv__link {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--tm-border);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mkt-qv__link:hover {
  background: var(--tm-surface-hover);
  border-color: var(--tm-text-muted);
  color: var(--tm-text-dark);
}
@media (min-width: 768px) {
  .mkt-qv__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 575.98px) {
  .mkt-qv .modal-body {
    padding: 16px;
  }
  .mkt-qv__name {
    font-size: 18px;
  }
  .mkt-qv__media {
    min-height: 160px;
  }
}
/* -- Wishlisted heart inside market cards -------------------------------- */.mkt-pd__actions .wishlist-btn.active {
  background: #fef2f2;
  border-color: #ef4444;
  color: #ef4444;
}
.mkt-pd__actions .wishlist-btn.active svg path {
  fill: currentColor;
}
/* -- Trust / benefits strip (four service guarantees) --------------------- */.mkt-features {
  border-top: 1px solid var(--mkt-border, #e5e7eb);
  background: var(--mkt-surface-2, #f8fafc);
  padding: 48px 0;
  margin-top: 32px;
}
.mkt-features__sub {
  margin: 8px 0 0;
  color: var(--mkt-text-muted, #6b7280);
  font-size: 15px;
  text-align: center;
}
.mkt-features__grid {
  gap: 20px;
}
.mkt-feature {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--mkt-bg, #fff);
  border: 1px solid var(--mkt-border, #e5e7eb);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mkt-feature:hover {
  border-color: var(--mkt-text-muted, #cbd5e1);
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  transform: translateY(-2px);
}
.mkt-feature__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--mkt-primary, #2563eb) 10%, transparent);
  color: var(--tm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mkt-feature:hover .mkt-feature__icon {
  background: var(--tm-primary);
  color: #fff;
}
.mkt-feature__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mkt-feature__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--tm-text-dark);
}
.mkt-feature__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mkt-text-muted, #6b7280);
}
/* -- Blog posts ----------------------------------------------------------- */.mkt-blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.mkt-blog__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mkt-blog__card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
  transform: translateY(-3px);
}
.mkt-blog__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9ca3af;
  margin-bottom: 12px;
}
.mkt-blog__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tm-text-dark);
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.mkt-blog__card:hover .mkt-blog__title {
  color: var(--tm-primary);
}
.mkt-blog__excerpt {
  font-size: 14px;
  line-height: 1.65;
  color: #6b7280;
  margin-bottom: 16px;
}
.mkt-blog__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-primary);
}
.mkt-blog__more svg {
  transition: transform 0.2s ease;
}
.mkt-blog__card:hover .mkt-blog__more svg {
  transform: translateX(3px);
}
@media (min-width: 768px) {
  .mkt-blog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ==========================================================================   Storefront Page Layer — mkp-* pages in the homepage design language   ========================================================================== *//* Shell tokens (--tm-*) are defined once at :root in section 1, aliased to   the shared palette (#eos-colors). Do not redeclare them here: a later   hardcoded :root block would win the cascade and freeze Market colors. *//* -- Breadcrumbs ---------------------------------------------------------- */.mkp-breadcrumb-bar,.mkp-cart-breadcrumb-bar,.mkp-product-breadcrumb-bar {
  background: #fff;
  border-bottom: 1px solid var(--tm-border);
}
.mkp-breadcrumb,.mkp-cart-breadcrumb,.mkp-product-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0;
  font-size: 13px;
  line-height: 1.4;
}
.mkp-breadcrumb a,.mkp-cart-breadcrumb a,.mkp-product-breadcrumb a {
  color: var(--tm-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.mkp-breadcrumb a:hover,.mkp-cart-breadcrumb a:hover,.mkp-product-breadcrumb a:hover {
  color: var(--tm-primary);
}
.mkp-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  color: #c4c9d0;
}
.mkp-breadcrumb-current {
  color: var(--tm-text-dark);
  font-weight: 600;
}
.mkp-breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mkp-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.mkp-breadcrumb-item:not(:last-child)::after {
  content: '\203A';
  color: #c4c9d0;
  font-size: 15px;
}
.mkp-breadcrumb-item a {
  color: var(--tm-text-muted);
  text-decoration: none;
}
.mkp-breadcrumb-item a:hover {
  color: var(--tm-primary);
}
.mkp-breadcrumb-item.active {
  color: var(--tm-text-dark);
  font-weight: 600;
}
/* -- Page header (all-categories etc.) ------------------------------------ */.mkp-page-header {
  background: #f8fafc;
  border-bottom: 1px solid var(--tm-border);
  padding: 44px 0 40px;
  text-align: center;
}
.mkp-page-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
  margin: 0 0 8px;
}
.mkp-page-subtitle {
  font-size: 15px;
  color: var(--tm-text-muted);
  margin: 0;
}
/* -- Buttons (shared eos-btn contract + mkp-btn) --------------------------- */.eos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,    box-shadow 0.18s ease, transform 0.18s ease;
}
.eos-btn:hover {
  transform: translateY(-1px);
}
.eos-btn:disabled {
  opacity: 0.55;
  pointer-events: none;
}
.eos-btn-primary {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 101, 214, 0.28);
}
.eos-btn-primary:hover {
  background: var(--tm-primary-dark);
  border-color: var(--tm-primary-dark);
  color: #fff;
}
.eos-btn-outline {
  background: #fff;
  border-color: var(--tm-border);
  color: var(--tm-text-dark);
}
.eos-btn-outline:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.eos-btn-sm {
  padding: 9px 16px;
  font-size: 13px;
  border-radius: 8px;
}
.eos-btn-block {
  width: 100%;
}
.mkp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mkp-btn-primary {
  background: var(--tm-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(15, 101, 214, 0.25);
}
.mkp-btn-primary:hover {
  background: var(--tm-primary-dark);
  transform: translateY(-1px);
}
.mkp-btn-lg {
  padding: 16px 28px;
  font-size: 16px;
}
.mkp-btn-block {
  width: 100%;
}
.mkp-btn-icon {
  display: flex;
}
.mkp-btn:disabled {
  opacity: 0.6;
  pointer-events: none;
}
/* -- Forms ---------------------------------------------------------------- */.mkp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mkp-form-row .mkp-form-group {
  margin-bottom: 0;
}
.mkp-form-group {
  margin-bottom: 18px;
}
.mkp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--tm-text-dark);
  margin-bottom: 7px;
}
.mkp-req {
  color: var(--tm-sale);
}
.mkp-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.mkp-input-icon {
  position: absolute;
  left: 14px;
  color: #9aa3ad;
  pointer-events: none;
  display: flex;
}
.mkp-input {
  width: 100%;
  padding: 12px 14px 12px 44px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14.5px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mkp-input::placeholder {
  color: #9aa3ad;
}
.mkp-input:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-input-wrapper:has(.mkp-password-toggle) .mkp-input {
  padding-right: 48px;
}
.mkp-password-toggle {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9aa3ad;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.mkp-password-toggle:hover {
  color: var(--tm-primary);
  background: #f2f7fe;
}
.mkp-password-icon {
  display: flex;
}
.mkp-password-icon-hidden {
  display: flex;
}
.mkp-password-icon-visible {
  display: none;
}
.mkp-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 22px;
  font-size: 14px;
}
.mkp-checkbox {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--tm-text-muted);
  cursor: pointer;
  line-height: 1.5;
}
.mkp-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mkp-checkbox-mark {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid #cbd2da;
  border-radius: 5px;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mkp-checkbox input:checked + .mkp-checkbox-mark {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
}
.mkp-checkbox input:checked + .mkp-checkbox-mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mkp-checkbox-label a {
  color: var(--tm-primary);
  font-weight: 600;
  text-decoration: none;
}
.mkp-checkbox-label a:hover {
  text-decoration: underline;
}
.mkp-field-error {
  display: block;
  font-size: 12.5px;
  color: var(--tm-sale);
  margin-top: 6px;
}
/* -- Alerts --------------------------------------------------------------- */.mkp-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 20px;
  border: 1px solid;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
}
.mkp-alert-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.mkp-alert-success {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #047857;
}
.mkp-alert-icon {
  flex-shrink: 0;
  display: flex;
  margin-top: 1px;
}
.mkp-alert-content strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}
.mkp-alert-content p {
  margin: 0;
}
.mkp-alert-errors {
  margin: 4px 0 0;
  padding-left: 18px;
}
.mkp-alert-errors li {
  margin-bottom: 2px;
}
/* -- Links & empty states -------------------------------------------------- */.mkp-link {
  color: var(--tm-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.mkp-link-primary {
  color: var(--tm-primary);
  font-weight: 600;
}
.mkp-link-primary:hover {
  text-decoration: underline;
}
.mkp-empty-state {
  text-align: center;
  padding: 72px 24px;
}
.mkp-empty-icon {
  display: flex;
  justify-content: center;
  color: #cbd2da;
  margin-bottom: 16px;
}
.mkp-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0 0 8px;
}
.mkp-empty-text {
  font-size: 14.5px;
  color: var(--tm-text-muted);
  margin: 0;
}
/* -- Sort, result count, load more, pagination ----------------------------- */.mkp-sort-wrap,.mkp-sort-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mkp-sort-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tm-text-muted);
  white-space: nowrap;
}
.mkp-sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 38px 10px 14px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mkp-sort-select:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-result-count {
  font-size: 13.5px;
  color: var(--tm-text-muted);
}
.mkp-load-more-wrapper,.mkp-pagination-wrap,.mkp-category-pagination,.mkp-search-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
}
.mkp-load-more-btn {
  padding: 13px 36px;
}
.mkp-load-more-btn .load-more-spinner svg {
  animation: mkp-spin 0.8s linear infinite;
}
@keyframes mkp-spin {
  to {
    transform: rotate(360deg);
  }
}
.mkp-pagination,.mkp-pagination-links {
  display: flex;
  justify-content: center;
}
.mkp-pagination :is(ul.pagination, ol.pagination),.mkp-pagination-links :is(ul.pagination, ol.pagination),.mkp-search-pagination :is(ul.pagination, ol.pagination) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mkp-pagination :is(ul.pagination > li > a, ul.pagination > li > span),.mkp-pagination-links :is(ul.pagination > li > a, ul.pagination > li > span),.mkp-search-pagination :is(ul.pagination > li > a, ul.pagination > li > span) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mkp-pagination :is(ul.pagination > li > a):hover,.mkp-pagination-links :is(ul.pagination > li > a):hover,.mkp-search-pagination :is(ul.pagination > li > a):hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-pagination ul.pagination > li.active :is(a, span),.mkp-pagination-links ul.pagination > li.active :is(a, span),.mkp-search-pagination ul.pagination > li.active :is(a, span) {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #fff;
}
.mkp-pagination ul.pagination > li.disabled :is(a, span),.mkp-pagination-links ul.pagination > li.disabled :is(a, span),.mkp-search-pagination ul.pagination > li.disabled :is(a, span) {
  opacity: 0.45;
  pointer-events: none;
}
/* ==========================================================================   Shop / catalog pages   ========================================================================== */.mkp-shop-page {
  background: #fff;
}
.mkp-shop-page-header {
  background: #fff;
  border-bottom: 1px solid var(--tm-border);
  padding: 22px 0;
}
.mkp-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.mkp-header-left {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.mkp-header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mkp-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--tm-text-dark);
  margin: 0;
}
.mkp-view-toggle {
  display: inline-flex;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  overflow: hidden;
}
.mkp-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  background: #fff;
  color: #9aa3ad;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-view-btn + .mkp-view-btn {
  border-left: 1px solid var(--tm-border);
}
.mkp-view-btn:hover {
  color: var(--tm-primary);
}
.mkp-view-btn.active {
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-mobile-filter-btn {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
/* Active filter chips */.mkp-active-filters {
  background: #f8fafc;
  border-bottom: 1px solid var(--tm-border);
}
.mkp-chips-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 0;
  min-height: 54px;
}
.mkp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px 6px 13px;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 13px;
}
.mkp-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #eef1f4;
  color: var(--tm-text-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-chip-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}
.mkp-chip-clear {
  padding: 6px 6px;
  border: none;
  background: transparent;
  color: var(--tm-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.mkp-chip-clear:hover {
  text-decoration: underline;
}
.mkp-chips-empty {
  font-size: 13px;
  color: #9aa3ad;
}
/* Layout: sidebar + content */.mkp-main {
  padding: 32px 0 72px;
}
.mkp-layout {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.mkp-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mkp-filter-group {
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  padding: 2px 18px 16px;
}
.mkp-filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 0 4px;
}
.mkp-filter-group-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0;
}
.mkp-filter-chevron {
  color: #9aa3ad;
}
.mkp-filter-group-body {
  padding-top: 6px;
}
.mkp-filter-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 6px;
}
.mkp-filter-search-input {
  width: 100%;
  padding: 10px 38px 10px 12px;
  border: 1.5px solid var(--tm-border);
  border-radius: 9px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mkp-filter-search-input:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-filter-search-icon {
  position: absolute;
  right: 12px;
  top: calc(50% + 3px);
  transform: translateY(-50%);
  color: #9aa3ad;
  pointer-events: none;
}
.mkp-filter-options {
  display: flex;
  flex-direction: column;
}
.mkp-filter-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  color: #4b5563;
  cursor: pointer;
}
.mkp-filter-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mkp-filter-option-check {
  position: relative;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border: 1.5px solid #cbd2da;
  border-radius: 5px;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mkp-filter-option input:checked + .mkp-filter-option-check {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
}
.mkp-filter-option input:checked + .mkp-filter-option-check::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mkp-filter-option-text {
  flex: 1;
  min-width: 0;
  transition: color 0.15s ease;
}
.mkp-filter-option:hover .mkp-filter-option-text {
  color: var(--tm-primary);
}
.mkp-filter-option input:checked ~ .mkp-filter-option-text {
  color: var(--tm-text-dark);
  font-weight: 600;
}
.mkp-filter-option-count {
  font-size: 12.5px;
  color: #9aa3ad;
}
.mkp-filter-option-children {
  margin-left: 8px;
  padding-left: 18px;
  border-left: 1px dashed var(--tm-border);
}
.mkp-filter-price-range {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}
.mkp-filter-price-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mkp-filter-price-field {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.mkp-filter-price-prefix {
  position: absolute;
  left: 12px;
  font-size: 13px;
  color: #9aa3ad;
  pointer-events: none;
}
.mkp-filter-price-input {
  width: 100%;
  padding: 9px 10px 9px 28px;
  border: 1.5px solid var(--tm-border);
  border-radius: 9px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mkp-filter-price-input:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-filter-price-sep {
  color: #9aa3ad;
}
.mkp-filter-price-slider {
  margin-top: 14px;
}
.mkp-filter-slider {
  width: 100%;
  accent-color: var(--tm-primary);
  cursor: pointer;
}
.mkp-filter-rating-options {
  display: flex;
  flex-direction: column;
}
.mkp-filter-rating-option {
  position: relative;
  display: flex;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-filter-rating-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mkp-filter-rating-option:hover {
  background: #f8fafc;
}
.mkp-filter-rating-option:has(input:checked) {
  background: #eaf2fc;
}
.mkp-filter-rating-stars {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: #9aa3ad;
}
.mkp-filter-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}
.mkp-filter-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1.5px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: #4b5563;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mkp-filter-tag input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.mkp-filter-tag svg {
  display: none;
}
.mkp-filter-tag:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-filter-tag.active {
  border-color: var(--tm-primary);
  background: #eaf2fc;
  color: var(--tm-primary);
  font-weight: 600;
}
.mkp-filter-tag.active svg {
  display: block;
}
.mkp-sidebar-apply {
  display: none;
}
.mkp-content {
  min-width: 0;
}
.mkp-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 26px 20px;
}
.mkp-shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
}
.mkp-shop-empty-icon {
  display: flex;
  justify-content: center;
  color: #cbd2da;
  margin-bottom: 16px;
}
.mkp-shop-empty-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0 0 6px;
}
.mkp-shop-empty-text {
  font-size: 14px;
  color: var(--tm-text-muted);
  margin: 0;
}
/* Mobile filter drawer (styled for parity; toggle wiring is pending) */.mkp-filter-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1049;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mkp-filter-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 88vw);
  display: flex;
  flex-direction: column;
  background: #fff;
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform 0.28s ease;
  box-shadow: 4px 0 24px rgba(16, 24, 40, 0.14);
}
.mkp-filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--tm-border);
}
.mkp-filter-drawer-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0;
}
.mkp-filter-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 9px;
  background: #f3f4f6;
  color: var(--tm-text-dark);
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-filter-drawer-close:hover {
  background: #e5e7eb;
}
.mkp-filter-drawer-body {
  overflow-y: auto;
  padding: 16px 20px 32px;
}
/* Comparison tray */.mkp-compare-tray {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 0;
  background: #fff;
  border-top: 1px solid var(--tm-border);
  box-shadow: 0 -6px 24px rgba(16, 24, 40, 0.12);
  z-index: 1040;
  transform: translateY(115%);
  transition: transform 0.3s ease;
}
.mkp-compare-tray.active {
  transform: translateY(0);
}
.compare-tray-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.compare-tray-info {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--tm-text-dark);
  flex-shrink: 0;
}
.compare-tray-info svg {
  color: var(--tm-primary);
}
.compare-tray-items {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  padding: 2px 0;
}
.compare-tray-item {
  position: relative;
  flex-shrink: 0;
}
.compare-tray-item img {
  display: block;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--tm-border);
}
.compare-tray-item-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.compare-tray-item-remove:hover {
  background: #dc2626;
}
.compare-tray-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
@media (max-width: 1023.98px) {
  .mkp-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .mkp-title {
    font-size: 22px;
  }
  .mkp-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .mkp-main {
    padding: 24px 0 56px;
  }
  .compare-tray-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  .compare-tray-info {
    width: 100%;
  }
}
/* ==========================================================================   Category page   ========================================================================== */.mkp-category-page-header {
  padding: 44px 0 36px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid var(--tm-border);
  text-align: center;
}
.mkp-category-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
  margin: 0 0 12px;
}
.mkp-category-description {
  max-width: 640px;
  margin: 0 auto 20px;
  color: var(--tm-text-muted);
  font-size: 15px;
  line-height: 1.7;
}
.mkp-category-page-header .mkp-breadcrumb {
  justify-content: center;
  padding-bottom: 0;
}
.mkp-category-page-header .mkp-breadcrumb-list {
  justify-content: center;
}
.mkp-category-content {
  padding: 36px 0 72px;
}
.mkp-category-grid {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.mkp-category-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mkp-category-info-card,.mkp-categories-tree {
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  padding: 20px;
}
.mkp-category-info-card h3,.mkp-categories-tree h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0 0 12px;
}
.mkp-category-info-content {
  font-size: 14px;
  color: var(--tm-text-muted);
  line-height: 1.7;
}
.mkp-tree-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mkp-tree-item {
  display: block;
}
.mkp-tree-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  color: #4b5563;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-tree-link:hover {
  background: #f8fafc;
  color: var(--tm-primary);
}
.mkp-tree-link.active {
  background: #eaf2fc;
  color: var(--tm-primary);
  font-weight: 600;
}
.mkp-tree-children-count {
  font-size: 12.5px;
  color: #9aa3ad;
}
.mkp-tree-children {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 6px 12px;
  padding-left: 14px;
  border-left: 1px solid var(--tm-border);
}
.mkp-tree-child-link {
  display: block;
  padding: 7px 12px;
  border-radius: 8px;
  color: #6b7280;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-tree-child-link:hover {
  background: #f8fafc;
  color: var(--tm-primary);
}
.mkp-tree-child-link.active {
  background: #f2f7fe;
  color: var(--tm-primary);
  font-weight: 600;
}
.mkp-category-products {
  min-width: 0;
}
.mkp-category-filters {
  margin-bottom: 22px;
}
.mkp-filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mkp-category-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
}
@media (max-width: 1023.98px) {
  .mkp-category-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .mkp-category-title {
    font-size: 26px;
  }
  .mkp-category-page-header {
    padding: 32px 0 26px;
  }
}
/* ==========================================================================   Search page   ========================================================================== */.mkp-search-page {
  background: #fff;
}
.mkp-search-results {
  padding: 10px 0 72px;
}
.mkp-search-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.mkp-search-query-info,.mkp-search-title-bar {
  text-align: center;
  padding: 30px 0 6px;
}
.mkp-search-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
  margin: 0 0 10px;
}
.mkp-search-query {
  margin: 0;
  font-size: 15px;
  color: var(--tm-text-muted);
}
.mkp-query-text {
  color: var(--tm-text-dark);
  font-weight: 700;
}
.mkp-search-subtitle {
  margin: 0;
  font-size: 15px;
  color: var(--tm-text-muted);
}
.mkp-search-bar-container {
  max-width: 640px;
  margin: 24px auto 36px;
}
.mkp-search-bar {
  display: block;
}
.mkp-search-input-wrapper {
  position: relative;
  display: flex;
}
.mkp-search-input {
  width: 100%;
  padding: 15px 60px 15px 18px;
  border: 1.5px solid var(--tm-border);
  border-radius: 14px;
  background: #f8fafc;
  color: var(--tm-text-dark);
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mkp-search-input::placeholder {
  color: #9aa3ad;
}
.mkp-search-input:focus {
  outline: none;
  border-color: var(--tm-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-search-button {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--eos-btn-radius, 11px);
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  cursor: pointer;
  transition: background 0.15s ease, color 0.18s ease, filter 0.18s ease;
}
.mkp-search-button:hover,.mkp-search-button:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  filter: var(--eos-btn-hover-filter, none);
}
.mkp-search-empty,.mkp-search-help {
  text-align: center;
  padding: 60px 20px;
}
.mkp-search-empty-icon,.mkp-search-help-icon {
  display: flex;
  justify-content: center;
  color: #cbd2da;
  margin-bottom: 18px;
}
.mkp-search-empty-title,.mkp-search-help-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0 0 8px;
}
.mkp-search-empty-text,.mkp-search-help-text {
  font-size: 14.5px;
  color: var(--tm-text-muted);
  margin: 0;
}
.mkp-search-suggestions {
  margin-top: 26px;
}
.mkp-search-suggestions h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tm-text-dark);
  margin: 0 0 12px;
}
.mkp-search-suggestion-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.mkp-search-tag {
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 13.5px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-search-tag:hover {
  background: #eaf2fc;
  color: var(--tm-primary);
}
@media (max-width: 640px) {
  .mkp-search-title {
    font-size: 24px;
  }
  .mkp-search-results {
    padding-bottom: 56px;
  }
}
/* ==========================================================================   Product page — gallery + info   ========================================================================== */.mkp-product-section {
  padding: 30px 0 44px;
}
.mkp-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}
/* Gallery */.mkp-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.mkp-gallery-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--tm-border);
  border-radius: 16px;
  background: #f8fafc;
  overflow: hidden;
}
.mkp-gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mkp-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}
.mkp-badge-sale {
  background: var(--tm-sale);
}
.mkp-badge-new {
  background: var(--tm-primary);
}
.mkp-gallery-wishlist {
  width: 42px;
  height: 42px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.14);
}
.mkp-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--tm-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tm-text-dark);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mkp-gallery-arrow:hover {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #fff;
}
.mkp-gallery-arrow--prev {
  left: 14px;
}
.mkp-gallery-arrow--next {
  right: 14px;
}
.mkp-gallery-counter {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}
.mkp-gallery-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--tm-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tm-text-dark);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.1);
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-gallery-zoom:hover {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #fff;
}
.mkp-gallery-thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mkp-gallery-thumb {
  width: 74px;
  height: 74px;
  padding: 0;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #f8fafc;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.mkp-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkp-gallery-thumb:hover {
  border-color: #b9c6d6;
}
.mkp-gallery-thumb.active {
  border-color: var(--tm-primary);
}
/* Zoom lightbox */.mkp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 18, 0.94);
}
.mkp-lightbox.open {
  display: flex;
}
.mkp-lightbox-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
}
.mkp-lightbox-close {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.mkp-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-lightbox-arrow:hover {
  background: rgba(255, 255, 255, 0.26);
}
.mkp-lightbox-arrow--prev {
  left: 24px;
}
.mkp-lightbox-arrow--next {
  right: 24px;
}
.mkp-lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
}
/* Info column */.mkp-product-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.mkp-delivery-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid #d6e6fa;
  border-radius: 10px;
  background: #eaf2fc;
  color: #0b4da6;
  font-size: 13.5px;
  line-height: 1.5;
}
.mkp-delivery-banner svg {
  flex-shrink: 0;
}
.mkp-delivery-banner strong {
  color: #0b4da6;
}
.mkp-brand {
  align-self: flex-start;
  display: inline-flex;
  padding: 5px 12px;
  border: 1px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tm-text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkp-brand:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-product-info .mkp-title {
  font-size: 28px;
  line-height: 1.3;
}
.mkp-rating-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.mkp-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mkp-rating-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-primary);
  text-decoration: none;
}
.mkp-rating-link:hover {
  text-decoration: underline;
}
.mkp-sold-count {
  font-size: 13.5px;
  color: var(--tm-text-muted);
}
.mkp-share-wrap {
  position: relative;
  margin-left: auto;
}
.mkp-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: 1.5px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkp-share-btn:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-share-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.16);
  display: none;
}
.mkp-share-dropdown.open {
  display: block;
}
.mkp-share-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-share-option:hover {
  background: #f8fafc;
  color: var(--tm-primary);
}
.mkp-price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.mkp-price-current {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
}
.mkp-price-original {
  font-size: 17px;
  color: #9aa3ad;
  text-decoration: line-through;
}
.mkp-price-save {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fef2f2;
  color: var(--tm-sale);
  font-size: 12.5px;
  font-weight: 700;
}
.mkp-short-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--tm-text-muted);
}
.mkp-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mkp-highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid #dcfce7;
  border-radius: 999px;
  background: #f0fdf4;
  color: #15803d;
  font-size: 13px;
  font-weight: 600;
}
.mkp-divider {
  height: 1px;
  background: var(--tm-border);
  margin: 4px 0;
}
/* Variants */.mkp-variants {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mkp-option-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkp-option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mkp-option-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-option-selected {
  font-size: 13.5px;
  color: var(--tm-text-muted);
}
.mkp-option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.mkp-option-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 17px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.mkp-option-btn:hover {
  border-color: #b9c6d6;
}
.mkp-option-btn.active,.mkp-option-btn.selected {
  border-color: var(--tm-primary);
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-size-pill {
  padding: 8px 14px;
  font-size: 13.5px;
}
.mkp-scroll-to {
  scroll-margin-top: 90px;
}
.mkp-color-swatch {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
}
.mkp-swatch-inner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.mkp-color-swatch.active .mkp-swatch-inner,.mkp-color-swatch.selected .mkp-swatch-inner {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tm-primary);
}
/* Quantity */.mkp-qty-remaining {
  font-size: 13px;
  font-weight: 600;
  color: #d97706;
}
.mkp-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mkp-qty-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: #f8fafc;
  color: var(--tm-text-dark);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-qty-btn:hover {
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-qty-input {
  width: 58px;
  padding: 11px 4px;
  border: none;
  border-left: 1.5px solid var(--tm-border);
  border-right: 1.5px solid var(--tm-border);
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
}
.mkp-qty-input:focus {
  outline: none;
}
/* Stock status */.mkp-stock {
  display: flex;
  align-items: center;
}
.mkp-stock-in,.mkp-stock-low,.mkp-stock-out {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
}
.mkp-stock-in {
  color: #16a34a;
}
.mkp-stock-low {
  color: #d97706;
}
.mkp-stock-out {
  color: var(--tm-sale);
}
.mkp-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d97706;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.16);
}
/* Actions */.mkp-actions {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 12px;
}
.mkp-actions .mkp-btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  border: none;
  border-radius: 12px;
  background: var(--tm-primary);
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 101, 214, 0.28);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.mkp-actions .mkp-btn-add:hover {
  background: var(--tm-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 101, 214, 0.32);
}
.mkp-actions .mkp-btn-add:disabled {
  opacity: 0.55;
  pointer-events: none;
}
.mkp-btn-text {
  display: inline-flex;
}
.mkp-btn-buy {
  padding: 16px 22px;
  border: none;
  border-radius: 12px;
  background: #2D2D2D;
  color: #fff;
  font-size: 15.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.mkp-btn-buy:hover {
  background: #111;
  transform: translateY(-1px);
}
.mkp-btn-buy:disabled {
  opacity: 0.55;
  pointer-events: none;
}
/* Trust badges */.mkp-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.mkp-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  background: #f8fafc;
}
.mkp-trust-item > svg {
  flex-shrink: 0;
  color: var(--tm-primary);
  margin-top: 1px;
}
.mkp-trust-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mkp-trust-item strong {
  font-size: 13px;
  color: var(--tm-text-dark);
}
.mkp-trust-item span {
  font-size: 12.5px;
  color: var(--tm-text-muted);
  line-height: 1.5;
}
/* Mobile sticky buy bar */.mkp-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1028;
  background: #fff;
  border-top: 1px solid var(--tm-border);
  box-shadow: 0 -6px 22px rgba(16, 24, 40, 0.14);
  transform: translateY(115%);
  transition: transform 0.3s ease;
}
.mkp-sticky-bar.visible {
  transform: translateY(0);
}
.mkp-sticky-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px;
}
.mkp-sticky-bar-info {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.mkp-sticky-bar-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--tm-border);
  flex-shrink: 0;
}
.mkp-sticky-bar-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mkp-sticky-bar-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.mkp-sticky-bar-price {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--tm-primary);
}
.mkp-sticky-bar-cart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 13px 20px;
  border: none;
  border-radius: 999px;
  background: var(--tm-primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-sticky-bar-cart:hover {
  background: var(--tm-primary-dark);
}
.mkp-sticky-bar-cart:disabled {
  opacity: 0.55;
  pointer-events: none;
}
@media (min-width: 769px) {
  .mkp-sticky-bar {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .mkp-product-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mkp-trust {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .mkp-product-section {
    padding: 22px 0 32px;
  }
  .mkp-product-info .mkp-title {
    font-size: 22px;
  }
  .mkp-price-current {
    font-size: 26px;
  }
  .mkp-share-wrap {
    margin-left: 0;
  }
}
/* ==========================================================================   Product page — tabs, description, specs, reviews   ========================================================================== */.mkp-tabs-section {
  padding: 12px 0 72px;
}
.mkp-tabs-nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--tm-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.mkp-tabs-nav::-webkit-scrollbar {
  display: none;
}
.mkp-tab-btn {
  padding: 16px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--tm-text-muted);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.mkp-tab-btn:hover {
  color: var(--tm-text-dark);
}
.mkp-tab-btn.active {
  color: var(--tm-primary);
  border-bottom-color: var(--tm-primary);
}
.mkp-tab-content {
  display: none;
  padding-top: 26px;
}
.mkp-tab-content.active {
  display: block;
}
.mkp-desc-content {
  font-size: 15px;
  line-height: 1.8;
  color: #4b5563;
}
.mkp-desc-content img {
  max-width: 100%;
  border-radius: 12px;
}
.mkp-desc-content p {
  margin: 0 0 14px;
}
.mkp-desc-content p:last-child {
  margin-bottom: 0;
}
.mkp-spec-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  overflow: hidden;
}
.mkp-spec-table tr td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f3f6;
  font-size: 14.5px;
  color: #4b5563;
}
.mkp-spec-table tr:last-child td {
  border-bottom: none;
}
.mkp-spec-table tr td:first-child {
  width: 34%;
  background: #f8fafc;
  color: var(--tm-text-dark);
  font-weight: 600;
}
/* Reviews */.mkp-reviews-wrap {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.mkp-reviews-summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mkp-reviews-score-panel {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 28px;
  padding: 26px 28px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #f8fafc;
  align-items: center;
}
.mkp-reviews-big-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.mkp-reviews-big-number {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--tm-text-dark);
}
.mkp-reviews-big-stars {
  display: flex;
  gap: 3px;
}
.mkp-reviews-big-total {
  font-size: 13.5px;
  color: var(--tm-text-muted);
}
.mkp-reviews-bars {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.mkp-reviews-bar,.mkp-reviews-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkp-reviews-bar-row {
  width: 100%;
  padding: 4px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-reviews-bar-row:hover {
  background: #eef2f7;
}
.mkp-reviews-bar-label {
  width: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-reviews-bar-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #e9edf2;
  overflow: hidden;
}
.mkp-reviews-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tm-primary);
}
.mkp-reviews-bar-fill.is-empty {
  background: #cbd5e1;
}
.mkp-reviews-bar-count {
  width: 30px;
  flex-shrink: 0;
  text-align: right;
  font-size: 13px;
  color: var(--tm-text-muted);
}
.mkp-reviews-clear-filter {
  grid-column: 1 / -1;
  justify-self: end;
  display: none;
}
.mkp-reviews-clear-filter.visible {
  display: inline-flex;
}
.mkp-reviews-clear-filter button {
  padding: 8px 16px;
  border: 1.5px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkp-reviews-clear-filter button:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-reviews-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mkp-reviews-filter-info {
  font-size: 14px;
  color: var(--tm-text-muted);
}
.mkp-reviews-sort {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mkp-reviews-sort-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-reviews-sort-select {
  padding: 9px 34px 9px 13px;
  border: 1.5px solid var(--tm-border);
  border-radius: 9px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.mkp-reviews-sort-select:focus {
  outline: none;
  border-color: var(--tm-primary);
}
.mkp-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mkp-review-card {
  padding: 22px 24px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-review-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mkp-review-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.mkp-review-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--tm-primary);
  font-size: 17px;
  font-weight: 700;
}
.mkp-review-user-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mkp-review-user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.mkp-review-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-review-badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 11.5px;
  font-weight: 600;
}
.mkp-review-stars {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mkp-review-rating-badge {
  padding: 2px 8px;
  border-radius: 6px;
  background: #fffbeb;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}
.mkp-review-date {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #9aa3ad;
}
.mkp-review-title {
  margin: 14px 0 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-review-text {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: #4b5563;
}
.mkp-review-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.mkp-review-tag {
  padding: 5px 11px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 12.5px;
  font-weight: 600;
}
.mkp-review-tag--positive {
  background: #ecfdf5;
  color: #047857;
}
.mkp-review-tag--negative {
  background: #fef2f2;
  color: #b91c1c;
}
.mkp-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f3f6;
}
.mkp-review-helpful-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1.5px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tm-text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkp-review-helpful-btn:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-review-helpful-count {
  font-weight: 700;
}
.mkp-review-report-btn {
  padding: 6px;
  border: none;
  background: transparent;
  color: #b0b7bf;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.mkp-review-report-btn:hover {
  color: var(--tm-sale);
}
.mkp-reviews-empty {
  padding: 52px 20px;
  text-align: center;
}
.mkp-reviews-empty-icon {
  display: flex;
  justify-content: center;
  color: #cbd2da;
  margin-bottom: 16px;
}
.mkp-reviews-empty h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-reviews-empty p {
  margin: 0;
  font-size: 14.5px;
  color: var(--tm-text-muted);
}
.mkp-reviews-load-more {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.mkp-reviews-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkp-reviews-load-more-btn:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-reviews-load-more-btn svg {
  transition: transform 0.2s ease;
}
/* Write a review */.mkp-write-review {
  padding: 26px 28px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #f8fafc;
}
.mkp-write-review-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-write-review-header {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mkp-write-review-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--tm-text-muted);
}
.mkp-review-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
}
.mkp-review-form .pd-form-input {
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
}
.mkp-review-form .pd-form-input:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-review-form-rating label,.mkp-review-form-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-review-star-select {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mkp-review-star-btn {
  padding: 0;
  border: none;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}
.mkp-review-star-btn svg {
  transition: fill 0.12s ease, stroke 0.12s ease, transform 0.12s ease;
}
.mkp-review-star-btn:hover svg,.mkp-review-star-btn.active svg,.mkp-review-star-btn svg.active {
  fill: #ffc107;
  stroke: #ffc107;
}
.mkp-review-rating-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-text-muted);
}
.mkp-review-form-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mkp-review-form-field {
  display: flex;
  flex-direction: column;
}
.mkp-review-form-actions {
  display: flex;
  justify-content: flex-end;
}
.mkp-review-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border: none;
  border-radius: 10px;
  background: var(--tm-primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-review-submit:hover {
  background: var(--tm-primary-dark);
}
/* Guidelines */.mkp-review-guidelines {
  padding: 20px 24px;
  border: 1px dashed var(--tm-border);
  border-radius: 12px;
  background: #f8fafc;
}
.mkp-review-guidelines-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-review-guidelines ul,.mkp-review-guidelines-list {
  margin: 0;
  padding-left: 20px;
}
.mkp-review-guidelines li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tm-text-muted);
}
@media (max-width: 767.98px) {
  .mkp-reviews-score-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  .mkp-reviews-clear-filter {
    justify-self: center;
  }
  .mkp-review-card {
    padding: 18px 16px;
  }
  .mkp-write-review,  .mkp-review-guidelines {
    padding: 20px 16px;
  }
}
/* ==========================================================================   Cart page   ========================================================================== */.mkp-cart-progress-wrap {
  background: #fff;
  border-bottom: 1px solid var(--tm-border);
  padding: 20px 0;
}
.mkp-cart-progress {
  display: flex;
  align-items: flex-start;
}
.mkp-cart-progress-step {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.mkp-cart-progress-step-num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tm-border);
  border-radius: 50%;
  background: #fff;
  color: #9aa3ad;
  font-size: 13.5px;
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mkp-cart-progress-step-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tm-text-muted);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.mkp-cart-progress-step.active .mkp-cart-progress-step-num {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #fff;
}
.mkp-cart-progress-step.active .mkp-cart-progress-step-label {
  color: var(--tm-primary);
  font-weight: 700;
}
.mkp-cart-progress-step.done .mkp-cart-progress-step-num {
  background: #eaf2fc;
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-cart-progress-step.done .mkp-cart-progress-step-label {
  color: var(--tm-text-dark);
}
.mkp-cart-progress-line {
  flex: 1;
  height: 2px;
  margin-top: 17px;
  min-width: 30px;
  background: var(--tm-border);
}
.mkp-cart-progress-line:last-child {
  display: none;
}
.mkp-cart-main {
  padding: 30px 0 72px;
}
.mkp-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 28px;
  align-items: start;
}
/* Items card */.mkp-cart-items-section {
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.mkp-cart-items-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--tm-border);
}
.mkp-cart-page-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-cart-page-title-count {
  font-size: 14px;
  font-weight: 500;
  color: var(--tm-text-muted);
}
.mkp-cart-clear-btn {
  padding: 8px 15px;
  border: 1.5px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tm-text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkp-cart-clear-btn:hover {
  border-color: var(--tm-sale);
  color: var(--tm-sale);
}
.mkp-cart-shipping-progress {
  padding: 16px 22px;
  background: #f8fafc;
  border-bottom: 1px solid var(--tm-border);
}
.mkp-cart-shipping-text {
  margin: 0 0 9px;
  font-size: 13.5px;
  color: var(--tm-text-muted);
}
.mkp-cart-shipping-text.mkp-cart-shipping-achieved {
  color: #16a34a;
  font-weight: 600;
}
.mkp-cart-shipping-bar {
  height: 8px;
  border-radius: 999px;
  background: #e9edf2;
  overflow: hidden;
}
.mkp-cart-shipping-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tm-primary);
  transition: width 0.3s ease;
}
.mkp-cart-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid #f1f3f6;
}
.mkp-cart-items-list .mkp-cart-item:last-child {
  border-bottom: none;
}
.mkp-cart-item-image {
  width: 96px;
  height: 96px;
  border: 1px solid var(--tm-border);
  border-radius: 11px;
  overflow: hidden;
  background: #f8fafc;
}
.mkp-cart-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkp-cart-item-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.mkp-cart-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mkp-cart-item-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
}
.mkp-cart-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--tm-text-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}
.mkp-cart-item-name:hover {
  color: var(--tm-primary);
}
.mkp-cart-item-badge-sale {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fef2f2;
  color: var(--tm-sale);
  font-size: 11.5px;
  font-weight: 700;
}
.mkp-cart-item-remove {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--tm-border);
  border-radius: 50%;
  background: #fff;
  color: #9aa3ad;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mkp-cart-item-remove:hover {
  border-color: var(--tm-sale);
  background: #fef2f2;
  color: var(--tm-sale);
}
.mkp-cart-item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.mkp-cart-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.mkp-cart-item-qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: #f8fafc;
  color: var(--tm-text-dark);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-cart-item-qty-btn:hover {
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-cart-item-qty-value {
  min-width: 42px;
  padding: 0 6px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-cart-item-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.mkp-cart-item-price-original {
  font-size: 13px;
  color: #9aa3ad;
  text-decoration: line-through;
}
.mkp-cart-item-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--tm-text-dark);
}
.mkp-cart-items-footer {
  padding: 16px 22px;
  border-top: 1px solid var(--tm-border);
}
.mkp-cart-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--tm-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.mkp-cart-continue-btn:hover {
  text-decoration: underline;
}
/* Summary card */.mkp-cart-summary-section {
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-cart-summary {
  padding: 24px;
}
.mkp-cart-summary-title {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-cart-coupon-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.mkp-cart-coupon-applied,.mkp-cart-store-credit-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13.5px;
}
.mkp-cart-coupon-applied {
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  color: #047857;
}
.mkp-cart-store-credit-applied {
  background: #eef6ff;
  border: 1px solid #d6e6fa;
  color: #0b4da6;
}
.mkp-cart-coupon-info,.mkp-cart-store-credit-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  min-width: 0;
}
.mkp-cart-coupon-remove,.mkp-cart-store-credit-remove {
  flex-shrink: 0;
  padding: 3px 8px;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.mkp-cart-coupon-remove:hover,.mkp-cart-store-credit-remove:hover {
  opacity: 1;
  text-decoration: underline;
}
.mkp-cart-coupon-form {
  display: flex;
  gap: 8px;
}
.mkp-cart-coupon-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-family: inherit;
}
.mkp-cart-coupon-input::placeholder {
  color: #9aa3ad;
}
.mkp-cart-coupon-input:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-cart-coupon-apply {
  flex-shrink: 0;
  padding: 11px 18px;
  border: none;
  border-radius: 10px;
  background: #2D2D2D;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-cart-coupon-apply:hover {
  background: #111;
}
.mkp-cart-summary-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkp-cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
}
.mkp-cart-summary-row > span:first-child {
  color: var(--tm-text-muted);
}
.mkp-cart-summary-row > span:last-child {
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-cart-summary-row.discount > span:last-child,.mkp-cart-summary-row.store-credit > span:last-child,.mkp-cart-summary-negative {
  color: #16a34a;
  font-weight: 700;
}
.mkp-cart-summary-row.shipping-free > span:last-child {
  color: #16a34a;
}
.mkp-cart-summary-success {
  padding: 11px 14px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #d1fae5;
  color: #047857;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.mkp-cart-summary-divider {
  height: 1px;
  background: var(--tm-border);
}
.mkp-cart-summary-total {
  padding-top: 4px;
}
.mkp-cart-summary-total > span:first-child {
  font-size: 16px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 2px solid var(--tm-text-dark);
}
.mkp-cart-total-row > span:first-child {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-cart-total-amount {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
}
.mkp-cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 20px;
  padding: var(--eos-btn-padding-y, 16px) var(--eos-btn-padding-x, 22px);
  border: none;
  border-radius: var(--eos-btn-radius, 12px);
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  font-size: var(--eos-btn-font-size, 15.5px);
  font-weight: var(--eos-btn-font-weight, 700);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 101, 214, 0.28);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,    transform var(--eos-btn-hover-transform, none) 0.18s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkp-cart-checkout-btn:hover,.mkp-cart-checkout-btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  transform: var(--eos-btn-hover-transform, translateY(-1px));
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, 0 4px 12px rgba(15, 101, 214, 0.28));
}
.mkp-cart-payment-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.mkp-cart-payment-method {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  background: #f8fafc;
  color: var(--tm-text-muted);
  font-size: 13.5px;
}
.mkp-cart-payment-method svg {
  color: #9aa3ad;
}
.mkp-cart-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Empty cart */.mkp-cart-empty {
  padding: 76px 20px;
  text-align: center;
}
.mkp-cart-empty-icon {
  display: flex;
  justify-content: center;
  color: #cbd2da;
  margin-bottom: 18px;
}
.mkp-cart-empty-title {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-cart-empty-text {
  margin: 0;
  font-size: 14.5px;
  color: var(--tm-text-muted);
}
.mkp-cart-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  padding: var(--eos-btn-padding-y, 14px) var(--eos-btn-padding-x, 30px);
  border: none;
  border-radius: var(--eos-btn-radius, 999px);
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  font-size: var(--eos-btn-font-size, 15px);
  font-weight: var(--eos-btn-font-weight, 700);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.18s ease,    transform var(--eos-btn-hover-transform, none) 0.18s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkp-cart-empty-btn:hover,.mkp-cart-empty-btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  transform: var(--eos-btn-hover-transform, none);
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, none);
}
@media (max-width: 991.98px) {
  .mkp-cart-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .mkp-cart-main {
    padding: 22px 0 56px;
  }
  .mkp-cart-item {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 13px;
    padding: 16px;
  }
  .mkp-cart-item-image {
    width: 74px;
    height: 74px;
  }
  .mkp-cart-items-header,  .mkp-cart-items-footer {
    padding: 16px;
  }
  .mkp-cart-shipping-progress {
    padding: 14px 16px;
  }
  .mkp-cart-summary {
    padding: 18px;
  }
  .mkp-cart-progress-step-label {
    font-size: 11.5px;
  }
  .mkp-cart-progress-step-num {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }
  .mkp-cart-progress-line {
    margin-top: 14px;
    min-width: 14px;
  }
}
/* ==========================================================================   Checkout page   ========================================================================== */.mkp-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 28px;
  align-items: start;
}
.mkp-checkout-forms {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
.mkp-checkout-section {
  padding: 24px 26px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-checkout-section-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.mkp-checkout-section-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--tm-primary);
  font-size: 14.5px;
  font-weight: 800;
}
.mkp-checkout-section-title {
  margin: 0 0 3px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-checkout-section-subtitle {
  margin: 0;
  font-size: 13.5px;
  color: var(--tm-text-muted);
}
.mkp-checkout-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mkp-checkout-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.mkp-checkout-form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.mkp-checkout-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-checkout-required {
  color: var(--tm-sale);
}
.mkp-checkout-form-optional {
  color: var(--tm-text-muted);
}
.mkp-checkout-input,.mkp-checkout-select,.mkp-checkout-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14.5px;
  font-family: inherit;
}
.mkp-checkout-input::placeholder,.mkp-checkout-textarea::placeholder {
  color: #9aa3ad;
}
.mkp-checkout-input:focus,.mkp-checkout-select:focus,.mkp-checkout-textarea:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-checkout-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.mkp-checkout-textarea {
  min-height: 92px;
  resize: vertical;
}
/* Payment options */.mkp-checkout-payment-options {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mkp-checkout-payment-option {
  display: block;
  cursor: pointer;
}
.mkp-checkout-payment-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border: 1.5px solid var(--tm-border);
  border-radius: 12px;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mkp-checkout-payment-option:hover .mkp-checkout-payment-card {
  border-color: #b9c6d6;
}
.mkp-checkout-payment-option.selected .mkp-checkout-payment-card {
  border-color: var(--tm-primary);
  background: #eaf2fc;
}
.mkp-checkout-payment-icon-wrap {
  flex-shrink: 0;
  width: 46px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #f8fafc;
  border: 1px solid var(--tm-border);
}
.mkp-checkout-payment-icon-bkash {
  background: #fcefef;
  border-color: #f8d7d7;
}
.mkp-checkout-payment-icon-nagad {
  background: #fff6e9;
  border-color: #f7e3c4;
}
.mkp-checkout-payment-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mkp-checkout-payment-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-checkout-payment-desc {
  font-size: 12.5px;
  color: var(--tm-text-muted);
}
.mkp-checkout-payment-check {
  flex-shrink: 0;
  margin-left: auto;
  width: 21px;
  height: 21px;
  border: 2px solid #d3d9e0;
  border-radius: 50%;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mkp-checkout-payment-option.selected .mkp-checkout-payment-check {
  border-color: var(--tm-primary);
  background: var(--tm-primary);
  box-shadow: inset 0 0 0 3.5px #fff;
}
.mkp-checkout-card-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid #f1f3f6;
}
/* Mobile order button */.mkp-checkout-mobile-order {
  display: none;
}
.mkp-checkout-mobile-order .mkp-cart-checkout-btn {
  margin-top: 0;
}
/* Order summary column */.mkp-checkout-summary-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--tm-border);
}
.mkp-checkout-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mkp-checkout-summary-item-img {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border: 1px solid var(--tm-border);
  border-radius: 9px;
  overflow: hidden;
  background: #f8fafc;
}
.mkp-checkout-summary-item-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkp-checkout-summary-item-qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #2D2D2D;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.mkp-checkout-summary-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mkp-checkout-summary-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-text-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mkp-checkout-summary-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--tm-text-muted);
}
.mkp-cart-summary-free {
  color: #16a34a;
  font-weight: 800;
}
.mkp-cart-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.mkp-cart-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}
.mkp-cart-trust-item svg {
  color: var(--tm-primary);
}
.mkp-cart-trust-item span {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tm-text-muted);
  line-height: 1.4;
}
.mkp-cart-payment-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.mkp-cart-payment-icon {
  height: 26px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-border);
  border-radius: 6px;
  background: #fff;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.mkp-cart-payment-icons:hover .mkp-cart-payment-icon {
  filter: none;
  opacity: 1;
}
@media (max-width: 991.98px) {
  .mkp-checkout-layout {
    grid-template-columns: 1fr;
  }
  .mkp-checkout-mobile-order {
    display: block;
  }
}
@media (max-width: 640px) {
  .mkp-checkout-section {
    padding: 18px 16px;
  }
  .mkp-checkout-form-row {
    grid-template-columns: 1fr;
  }
  .mkp-cart-trust-badges {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================   Checkout success   ========================================================================== */.mkp-checkout-success-page {
  background: #f8fafc;
  padding: 52px 0 84px;
}
.mkp-checkout-success-wrap {
  max-width: 780px;
  margin: 0 auto;
}
.mkp-checkout-success-hero {
  text-align: center;
  padding: 44px 32px 36px;
  border: 1px solid var(--tm-border);
  border-radius: 18px 18px 0 0;
  background: #fff;
}
.mkp-checkout-success-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ecfdf5;
  color: #16a34a;
}
.mkp-checkout-success-title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-subtitle {
  margin: 0 auto;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tm-text-muted);
}
.mkp-checkout-success-order-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--tm-border);
  border-top: none;
  background: #fff;
  text-align: center;
}
.mkp-checkout-success-order-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tm-text-muted);
}
.mkp-checkout-success-order-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--tm-primary);
  font-variant-numeric: tabular-nums;
}
.mkp-checkout-success-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.mkp-checkout-success-section {
  padding: 22px 24px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-checkout-success-items-section {
  grid-column: 1 / -1;
}
.mkp-checkout-success-section-title {
  margin: 0 0 15px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkp-checkout-success-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid #f1f3f6;
  border-radius: 10px;
  background: #f8fafc;
}
.mkp-checkout-success-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mkp-checkout-success-item-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-item-qty {
  font-size: 13px;
  color: var(--tm-text-muted);
}
.mkp-checkout-success-item-price {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-address p {
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tm-text-muted);
}
.mkp-checkout-success-address p:last-child {
  margin-bottom: 0;
}
.mkp-checkout-success-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f3f6;
  font-size: 14px;
}
.mkp-checkout-success-detail:last-child {
  border-bottom: none;
}
.mkp-checkout-success-detail > span:first-child {
  color: var(--tm-text-muted);
}
.mkp-checkout-success-detail > span:last-child {
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-status {
  display: inline-flex;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
}
.mkp-checkout-success-status-paid,.mkp-checkout-success-status-completed,.mkp-checkout-success-status-success {
  background: #ecfdf5;
  color: #047857;
}
.mkp-checkout-success-status-pending {
  background: #fffbeb;
  color: #b45309;
}
.mkp-checkout-success-status-failed,.mkp-checkout-success-status-cancelled {
  background: #fef2f2;
  color: #b91c1c;
}
.mkp-checkout-success-totals {
  margin-top: 18px;
  padding: 22px 24px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-checkout-success-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 14.5px;
}
.mkp-checkout-success-total-row > span:first-child {
  color: var(--tm-text-muted);
}
.mkp-checkout-success-total-row > span:last-child {
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-total-discount > span:last-child {
  color: #16a34a;
}
.mkp-checkout-success-divider {
  height: 1px;
  background: var(--tm-border);
  margin: 8px 0;
}
.mkp-checkout-success-total-final {
  padding-top: 12px;
  border-top: 2px solid var(--tm-text-dark);
  font-size: 17px;
}
.mkp-checkout-success-total-final > span:first-child {
  font-weight: 800;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-total-final > span:last-child {
  font-size: 22px;
  font-weight: 800;
}
.mkp-checkout-success-delivery {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 17px 22px;
  border: 1px solid #d6e6fa;
  border-radius: 14px;
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-checkout-success-delivery > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mkp-checkout-success-delivery-title {
  font-size: 13px;
  font-weight: 600;
  color: #0b4da6;
}
.mkp-checkout-success-delivery-date {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.mkp-checkout-success-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mkp-checkout-success-btn-primary {
  background: var(--tm-primary);
  color: #fff;
}
.mkp-checkout-success-btn-primary:hover {
  background: var(--tm-primary-dark);
}
.mkp-checkout-success-btn-secondary {
  border: 1.5px solid var(--tm-border);
  background: #fff;
  color: var(--tm-text-dark);
}
.mkp-checkout-success-btn-secondary:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
@media (max-width: 640px) {
  .mkp-checkout-success-page {
    padding: 32px 0 64px;
  }
  .mkp-checkout-success-hero {
    padding: 34px 20px 28px;
    border-radius: 14px 14px 0 0;
  }
  .mkp-checkout-success-title {
    font-size: 23px;
  }
  .mkp-checkout-success-section,  .mkp-checkout-success-totals {
    padding: 18px 16px;
  }
  .mkp-checkout-success-actions {
    flex-direction: column;
  }
}
/* ==========================================================================   Auth pages (login, register, forgot, reset)   ========================================================================== */.mkp-auth-page {
  background: #f8fafc;
}
.mkp-auth-container {
  max-width: 468px;
  margin: 0 auto;
  padding: 44px 0 76px;
}
.mkp-auth-card {
  padding: 34px 32px;
  border: 1px solid var(--tm-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(16, 24, 40, 0.06);
}
.mkp-auth-header {
  text-align: center;
  margin-bottom: 26px;
}
.mkp-auth-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-auth-title {
  margin: 0 0 7px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
}
.mkp-auth-subtitle {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tm-text-muted);
}
.mkp-auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mkp-auth-footer {
  margin-top: 22px;
  text-align: center;
}
.mkp-auth-footer-text {
  font-size: 14px;
  color: var(--tm-text-muted);
}
/* Social login divider + buttons */.mkp-social-login {
  margin-top: 26px;
}
.mkp-social-login-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mkp-social-login-text {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 13px;
  color: var(--tm-text-muted);
}
.mkp-social-login-text::before,.mkp-social-login-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--tm-border);
}
.mkp-social-login-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mkp-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mkp-social-btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
@media (max-width: 480px) {
  .mkp-auth-container {
    padding: 30px 0 56px;
  }
  .mkp-auth-card {
    padding: 26px 20px;
    border-radius: 14px;
  }
  .mkp-auth-title {
    font-size: 21px;
  }
}
/* ==========================================================================   Account page   ========================================================================== */.mkp-account-container {
  display: grid;
  grid-template-columns: 274px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  padding: 34px 0 72px;
}
.mkp-account-sidebar {
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.mkp-account-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 24px 20px;
  text-align: center;
}
.mkp-account-user-avatar {
  width: 66px;
  height: 66px;
  margin-bottom: 8px;
  border-radius: 50%;
  overflow: hidden;
  background: #eaf2fc;
  flex-shrink: 0;
}
.mkp-account-user-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkp-account-user-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eaf2fc;
  color: var(--tm-primary);
  font-size: 24px;
  font-weight: 800;
}
.mkp-account-user-name {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-account-user-email {
  font-size: 13.5px;
  color: var(--tm-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.mkp-account-user-role {
  display: inline-flex;
  margin-top: 5px;
  padding: 3px 11px;
  border-radius: 999px;
  background: #eaf2fc;
  color: var(--tm-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mkp-account-nav {
  border-top: 1px solid var(--tm-border);
}
.mkp-account-nav-header {
  padding: 16px 20px 7px;
}
.mkp-account-nav-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9aa3ad;
}
.mkp-account-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px 14px;
  margin: 0;
  list-style: none;
}
.mkp-account-nav-item {
  list-style: none;
}
.mkp-account-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 9px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.mkp-account-nav-link:hover {
  background: #f8fafc;
  color: var(--tm-primary);
}
.mkp-account-nav-item.active .mkp-account-nav-link {
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-account-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: currentColor;
  flex-shrink: 0;
}
.mkp-account-content {
  min-width: 0;
  min-height: 380px;
  padding: 26px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
@media (max-width: 991.98px) {
  .mkp-account-container {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================   All categories   ========================================================================== */.mkp-categories-section {
  padding: 34px 0 76px;
}
.mkp-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 18px;
}
.mkp-category-card {
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.mkp-category-card:hover {
  border-color: #c9d6e5;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08);
}
.mkp-category-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}
.mkp-category-image,.mkp-category-image-placeholder {
  flex-shrink: 0;
  width: 78px;
  height: 78px;
  border: 1px solid var(--tm-border);
  border-radius: 11px;
  overflow: hidden;
  background: #f8fafc;
}
.mkp-category-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkp-category-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b6bfc9;
}
.mkp-category-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.mkp-category-name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
  transition: color 0.15s ease;
}
.mkp-category-card:hover .mkp-category-name {
  color: var(--tm-primary);
}
.mkp-category-count {
  font-size: 13px;
  color: var(--tm-text-muted);
}
.mkp-category-arrow {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-border);
  border-radius: 50%;
  background: #f8fafc;
  color: #9aa3ad;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mkp-category-card:hover .mkp-category-arrow {
  background: #eaf2fc;
  border-color: transparent;
  color: var(--tm-primary);
}
/* ==========================================================================   Content pages — shared header pattern   ========================================================================== */.mkp-shipping-container,.mkp-returns-container,.mkp-size-guide-container,.mkp-track-order-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 0 78px;
}
.mkp-shipping-header,.mkp-returns-header,.mkp-size-guide-header,.mkp-track-order-header {
  text-align: center;
  margin-bottom: 34px;
}
.mkp-shipping-title,.mkp-returns-title,.mkp-size-guide-title,.mkp-track-order-title {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tm-text-dark);
}
.mkp-shipping-subtitle,.mkp-returns-subtitle,.mkp-size-guide-subtitle,.mkp-track-order-subtitle {
  margin: 0 auto;
  max-width: 620px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--tm-text-muted);
}
@media (max-width: 640px) {
  .mkp-shipping-container,  .mkp-returns-container,  .mkp-size-guide-container,  .mkp-track-order-container {
    padding: 30px 0 56px;
  }
  .mkp-shipping-title,  .mkp-returns-title,  .mkp-size-guide-title,  .mkp-track-order-title {
    font-size: 25px;
  }
}
/* ==========================================================================   Shipping page   ========================================================================== */.mkp-shipping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.mkp-shipping-card {
  padding: 24px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-shipping-card-express {
  border-color: #cfe0f7;
  background: linear-gradient(180deg, #f7faff 0%, #fff 60%);
}
.mkp-shipping-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.mkp-shipping-card-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-shipping-card-price {
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--tm-primary);
}
.mkp-shipping-card-content {
  margin: 0 0 15px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tm-text-muted);
}
.mkp-shipping-features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mkp-shipping-features > * {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: #4b5563;
}
.mkp-shipping-features svg {
  flex-shrink: 0;
  color: #16a34a;
  margin-top: 2px;
}
/* Free shipping band */.mkp-shipping-free-shipping {
  margin-top: 26px;
}
.mkp-shipping-free-shipping-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-shipping-free-shipping-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-shipping-free-shipping-content {
  flex: 1;
  min-width: 0;
}
.mkp-shipping-free-shipping-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-shipping-free-shipping-text {
  margin: 0;
  font-size: 14px;
  color: var(--tm-text-muted);
}
.mkp-shipping-free-shipping-progress {
  margin-top: 13px;
}
.mkp-shipping-free-shipping-progress-bar {
  height: 9px;
  border-radius: 999px;
  background: #e9edf2;
  overflow: hidden;
}
.mkp-shipping-free-shipping-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tm-primary);
}
.mkp-shipping-free-shipping-progress-text {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tm-text-muted);
}
/* Services */.mkp-shipping-services {
  margin-top: 28px;
}
.mkp-shipping-services-title {
  margin: 0 0 16px;
  font-size: 19px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-shipping-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.mkp-shipping-service {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: #f8fafc;
}
.mkp-shipping-service-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tm-border);
  border-radius: 50%;
  background: #fff;
  color: var(--tm-primary);
}
.mkp-shipping-service-content {
  min-width: 0;
}
.mkp-shipping-service-title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-shipping-service-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tm-text-muted);
}
/* FAQ */.mkp-shipping-faq {
  margin-top: 34px;
}
.mkp-shipping-faq-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-shipping-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkp-shipping-faq-item {
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.mkp-shipping-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.mkp-shipping-faq-question:hover {
  background: #f8fafc;
}
.mkp-shipping-faq-question h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-shipping-faq-icon {
  flex-shrink: 0;
  color: var(--tm-text-muted);
  transition: transform 0.2s ease;
}
.mkp-shipping-faq-answer {
  display: none;
  padding: 0 20 18px;
}
.mkp-shipping-faq-answer.active {
  display: block;
}
.mkp-shipping-faq-answer p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tm-text-muted);
}
/* ==========================================================================   Returns page   ========================================================================== */.mkp-returns-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mkp-returns-section {
  padding: 26px;
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
}
.mkp-returns-section-title {
  margin: 0 0 17px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-returns-eligibility {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.mkp-returns-eligibility-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: #f8fafc;
}
.mkp-returns-eligibility-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-returns-eligibility-content {
  min-width: 0;
}
.mkp-returns-eligibility-title {
  margin: 0 0 5px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-returns-eligibility-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tm-text-muted);
}
/* Process steps */.mkp-returns-process-title {
  margin: 0 0 16px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-returns-process-steps {
  display: flex;
  flex-direction: column;
}
.mkp-returns-process-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 22px;
}
.mkp-returns-process-step:last-child {
  padding-bottom: 0;
}
.mkp-returns-process-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  bottom: 2px;
  width: 2px;
  background: var(--tm-border);
}
.mkp-returns-process-step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--tm-primary);
  font-size: 13.5px;
  font-weight: 800;
}
.mkp-returns-process-step-content {
  padding-top: 5px;
  min-width: 0;
}
.mkp-returns-process-step-title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-returns-process-step-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tm-text-muted);
}
/* Exchanges */.mkp-returns-exchanges-title {
  margin: 0 0 14px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-returns-exchanges-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkp-returns-exchange-item {
  padding: 14px 17px;
  border-left: 3px solid var(--tm-primary);
  border-radius: 0 10px 10px 0;
  background: #f8fafc;
}
.mkp-returns-exchange-title {
  margin: 0 0 5px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-returns-exchange-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--tm-text-muted);
}
/* Contact card */.mkp-returns-contact-card {
  padding: 24px 26px;
  border: 1px solid #d6e6fa;
  border-radius: 14px;
  background: #eaf2fc;
}
.mkp-returns-contact-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-returns-contact-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #4b5563;
}
.mkp-returns-contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
}
.mkp-returns-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-returns-contact-item svg {
  flex-shrink: 0;
  color: var(--tm-primary);
}
/* ==========================================================================   Size guide page   ========================================================================== */.mkp-size-guide-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mkp-size-guide-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mkp-size-guide-section {
  border: 1px solid var(--tm-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.mkp-size-guide-section-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 24px;
  border-bottom: 1px solid var(--tm-border);
  background: #f8fafc;
}
.mkp-size-guide-section-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-size-guide-section-icon {
  display: flex;
  align-items: center;
  color: var(--tm-primary);
}
.mkp-size-guide-section-content {
  padding: 20px 24px;
}
.mkp-size-guide-table-container {
  overflow-x: auto;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
}
.mkp-size-guide-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}
.mkp-size-guide-table th {
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--tm-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--tm-text-dark);
  text-align: left;
}
.mkp-size-guide-table td {
  padding: 11px 16px;
  border-bottom: 1px solid #f1f3f6;
  font-size: 14px;
  color: #4b5563;
}
.mkp-size-guide-table tbody tr:last-child td {
  border-bottom: none;
}
.mkp-size-guide-table tbody tr:nth-child(even) td {
  background: #fcfdfe;
}
.mkp-size-guide-how-to-measure-title {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-size-guide-how-to-measure-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.mkp-size-guide-how-to-measure-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: #f8fafc;
}
.mkp-size-guide-how-to-measure-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-size-guide-how-to-measure-text {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}
.mkp-size-guide-how-to-measure-text strong {
  display: block;
  margin-bottom: 3px;
  color: var(--tm-text-dark);
}
/* ==========================================================================   Track order page   ========================================================================== */.mkp-track-order-content {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.mkp-track-order-form-card {
  padding: 30px;
  border: 1px solid var(--tm-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(16, 24, 40, 0.06);
}
.mkp-track-order-form-header {
  text-align: center;
  margin-bottom: 22px;
}
.mkp-track-order-form-title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-track-order-form-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--tm-text-muted);
}
.mkp-track-order-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mkp-track-order-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.mkp-track-order-form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mkp-track-order-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkp-track-order-input-wrapper {
  position: relative;
}
.mkp-track-order-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: #9aa3ad;
  pointer-events: none;
}
.mkp-track-order-input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1.5px solid var(--tm-border);
  border-radius: 10px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14.5px;
  font-family: inherit;
}
.mkp-track-order-input::placeholder {
  color: #9aa3ad;
}
.mkp-track-order-input:focus {
  outline: none;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkp-track-order-form-actions {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.mkp-track-order-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  background: var(--tm-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 101, 214, 0.28);
  transition: background 0.15s ease, transform 0.15s ease;
}
.mkp-track-order-btn-primary:hover {
  background: var(--tm-primary-dark);
  transform: translateY(-1px);
}
/* Recent orders */.mkp-track-order-recent-orders {
  padding: 26px;
  border: 1px solid var(--tm-border);
  border-radius: 16px;
  background: #fff;
}
.mkp-track-order-recent-orders-title {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-track-order-recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mkp-track-order-recent-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: #f8fafc;
  transition: border-color 0.15s ease;
}
.mkp-track-order-recent-item:hover {
  border-color: #c9d6e5;
}
.mkp-track-order-recent-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.mkp-track-order-recent-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-track-order-recent-date {
  font-size: 13px;
  color: var(--tm-text-muted);
}
.mkp-track-order-recent-status {
  flex-shrink: 0;
  display: inline-flex;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.mkp-track-order-recent-status-completed {
  background: #ecfdf5;
  color: #047857;
}
.mkp-track-order-recent-status-in-transit {
  background: #eaf2fc;
  color: var(--tm-primary);
}
.mkp-track-order-recent-status-pending {
  background: #fffbeb;
  color: #b45309;
}
.mkp-track-order-recent-total {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--tm-text-dark);
}
.mkp-track-order-recent-action {
  flex-shrink: 0;
}
.mkp-track-order-recent-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1.5px solid var(--tm-border);
  border-radius: 999px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.mkp-track-order-recent-btn:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkp-track-order-recent-empty {
  padding: 40px 20px;
  text-align: center;
}
.mkp-track-order-recent-empty-icon {
  display: flex;
  justify-content: center;
  color: #cbd2da;
  margin-bottom: 14px;
}
.mkp-track-order-recent-empty-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tm-text-dark);
}
.mkp-track-order-recent-empty-text {
  margin: 0;
  font-size: 14px;
  color: var(--tm-text-muted);
}
.mkp-track-order-recent-empty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 12px 26px;
  border: none;
  border-radius: 999px;
  background: var(--tm-primary);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.mkp-track-order-recent-empty-btn:hover {
  background: var(--tm-primary-dark);
}
@media (max-width: 640px) {
  .mkp-shipping-free-shipping-card,  .mkp-returns-section,  .mkp-size-guide-section-content,  .mkp-track-order-form-card,  .mkp-track-order-recent-orders {
    padding: 20px 16px;
  }
  .mkp-shipping-free-shipping-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .mkp-track-order-recent-item {
    flex-wrap: wrap;
    padding: 14px;
  }
  .mkp-track-order-recent-info {
    flex-basis: 100%;
    order: 3;
  }
}
/* ==========================================================================   Page wrappers + small structural completions   ========================================================================== */.mkp-checkout-page,.mkp-account-page,.mkp-shipping-page,.mkp-returns-page,.mkp-size-guide-page,.mkp-track-order-page {
  background: #fff;
  min-height: 60vh;
}
.mkp-tree-name {
  flex: 1;
  min-width: 0;
}
.mkp-tree-child-name {
  display: block;
}
.mkp-sticky-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mkp-account-user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
.mkp-track-order-form-content {
  display: flex;
  flex-direction: column;
}
/* ==========================================================================   Single product page — Market homepage design language (mkt-pdp*)   Reference hierarchy: gallery → info (category/brand, title, rating,   SKU, price, stock, free delivery, attributes, quantity, actions,   delivery area) → detail tabs → benefits → reviews → FAQ → related.   ========================================================================== *//* -- Entry-animation guard (core starts these at opacity:0) ------------- */.mkt-pdp.pd-section .pd-gallery,.mkt-pdp.pd-section .pd-info,.mkt-pdp-tabs.pd-tabs-section .pd-tabs,.mkt-pdp .pd-animate-in {
  opacity: 1;
  transform: none;
}
/* -- Page shell ---------------------------------------------------------- */.mkt-pdp {
  background: #fff;
  padding: 8px 0 40px;
}
.mkt-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 612px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
/* The product-details section never renders below the 614px design height   on desktop. The info column already is a flex column (core .pd-info), so   any room left over is shared evenly between the blocks instead of pooling   under the last one. */@media (min-width: 992px) {
  .mkt-pdp__grid {
    min-height: 614px;
    align-items: stretch;
  }
  .mkt-pdp__info {
    min-height: 614px;
    justify-content: space-between;
  }
  .mkt-pdp__gallery {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .mkt-pdp .pd-gallery-main {
    width: min(612px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }
}
/* -- Gallery stage -------------------------------------------------------   612 x 612 design card on desktop (exact dimensions keep it fixed).   Below 992 px the container becomes a responsive square via aspect-ratio.   Zero padding and zero border so the image reaches every container edge;   object-fit: cover fills without whitespace (minor cropping is fine).   overflow: hidden clips both the fill and the hover zoom.             */.mkt-pdp .pd-gallery-main {
  padding: 0;
  box-sizing: border-box;
  background: var(--tm-bg);
  border: none;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.mkt-pdp__image,.mkt-pdp .pd-gallery-img {
  display: block;
}
.mkt-pdp .pd-gallery-main .pd-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  box-sizing: border-box;
}
.mkt-pdp__badge {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.mkt-pdp__badge--sale {
  background: var(--tm-sale);
  color: #fff;
}
.mkt-pdp__badge--new {
  background: var(--tm-primary);
  color: #fff;
}
.mkt-pdp__stage-btn {
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--tm-text-dark);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,    box-shadow 0.2s ease;
}
.mkt-pdp__stage-btn:hover {
  background: #fff;
  color: var(--tm-primary);
}
.mkt-pdp .pd-gallery-wishlist.active {
  color: var(--tm-sale);
}
.mkt-pdp .pd-gallery-wishlist.active svg {
  fill: var(--tm-sale);
}
.mkt-pdp .pd-gallery-thumb {
  background: #fff;
  border-color: var(--tm-border);
  border-radius: 10px;
}
.mkt-pdp .pd-gallery-thumb.active {
  border-color: var(--tm-primary);
  opacity: 1;
}
.mkt-pdp .pd-gallery-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
  max-width: calc(100% - 120px);
  overflow: hidden;
  padding: 2px;
}
.mkt-pdp .pd-gallery-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.22);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.mkt-pdp .pd-gallery-dot:hover {
  background: rgba(15, 23, 42, 0.4);
}
.mkt-pdp .pd-gallery-dot.active {
  background: var(--tm-primary);
  transform: scale(1.25);
}
/* Hover-to-zoom: only the image scales inside the fixed 612x612 stage.   overflow: hidden on .pd-gallery-main keeps the zoom clipped; the   container dimensions never change so surrounding layout is unaffected.   theme.js initPdpHoverZoom() adds .is-zooming on fine-pointer hover and   writes --mkt-pdp-zoom-x/y so the scale origin tracks the pointer; it   also suppresses the desktop click -> lightbox (touch keeps the   lightbox). Touch devices never get a stuck hover state (`hover: hover`   gate); prefers-reduced-motion disables the transition and the scale. */.mkt-pdp .pd-gallery-main .pd-gallery-img {
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) and (pointer: fine) {
  .mkt-pdp .pd-gallery-main .pd-gallery-img.is-zooming {
    transform: scale(1.8);
    transform-origin: var(--mkt-pdp-zoom-x, 50%) var(--mkt-pdp-zoom-y, 50%);
    cursor: zoom-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-pdp .pd-gallery-main .pd-gallery-img {
    transition-duration: 0.01ms;
  }
  .mkt-pdp .pd-gallery-main .pd-gallery-img.is-zooming {
    transform: none;
  }
}
/* Small screens: container becomes a responsive square filling the   available width with no padding.                                      */@media (max-width: 991.98px) {
  .mkt-pdp .pd-gallery-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
  }
}
@media (max-width: 575.98px) {
  .mkt-pdp .pd-gallery-main {
    padding: 0;
  }
}
/* -- Info column: eyebrow, title, rating, share -------------------------- */.mkt-pdp__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.mkt-pdp__category {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.mkt-pdp__category:hover {
  background: var(--tm-primary);
  color: #fff;
}
.mkt-pdp__eyebrow-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d1d5db;
}
.mkt-pdp .pd-brand {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--tm-primary);
  letter-spacing: 0.06em;
}
.mkt-pdp .pd-brand:hover {
  color: var(--tm-primary-dark);
  text-decoration: none;
}
.mkt-pdp .pd-title {
  color: var(--tm-text-dark);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.mkt-pdp .pd-rating-row {
  gap: 10px;
  margin-bottom: 18px;
}
.mkt-pdp .pd-rating-link {
  color: var(--tm-text-dark);
  font-weight: 600;
}
.mkt-pdp .pd-rating-link:hover {
  color: var(--tm-primary);
  text-decoration: none;
}
.mkt-pdp__rating-count {
  color: var(--tm-text-muted);
  font-weight: 500;
}
.mkt-pdp .pd-sold-count {
  color: var(--tm-text-muted);
  border-left-color: var(--tm-border);
  font-weight: 600;
}
.mkt-pdp .pd-share-btn {
  background: #fff;
  border-color: var(--tm-border);
  border-radius: 999px;
  color: var(--tm-text-muted);
  font-size: 12px;
  padding: 6px 14px;
}
.mkt-pdp .pd-share-btn:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkt-pdp .pd-share-dropdown {
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  box-shadow: 0 14px 34px -14px rgba(15, 23, 42, 0.28);
  padding: 6px;
}
.mkt-pdp .pd-share-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mkt-pdp .pd-share-option {
  color: var(--tm-text-dark);
  border-radius: 8px;
  font-size: 13px;
}
.mkt-pdp .pd-share-option:hover {
  background: var(--tm-bg);
}
/* -- Meta row: product code + rating/reviews (outside the offer card) ---- */.mkt-pdp__meta {
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
}
.mkt-pdp__meta-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #9ca3af;
  white-space: nowrap;
}
/* -- Price --------------------------------------------------------------- */.mkt-pdp__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.mkt-pdp .pd-price-current {
  font-size: 28px;
  font-weight: 800;
  color: var(--tm-primary);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.mkt-pdp .pd-price-original {
  font-size: 16px;
  color: #9ca3af;
}
.mkt-pdp .pd-price-save {
  background: #fee2e2;
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
}
/* -- Stock --------------------------------------------------------------- */.mkt-pdp .pd-stock {
  margin-bottom: 14px;
}
.mkt-pdp .pd-stock span {
  font-size: 13.5px;
  font-weight: 600;
  gap: 7px;
}
.mkt-pdp .pd-stock-in {
  color: #16a34a;
}
.mkt-pdp .pd-stock-low {
  color: #ef4444;
}
.mkt-pdp .pd-stock-out {
  color: #9ca3af;
}
.mkt-pdp__stock-dot {
  background: #ef4444;
}
/* -- Free delivery threshold --------------------------------------------- */.mkt-pdp__freedelivery {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  color: #c2410c;
  font-size: 13px;
  font-weight: 600;
}
.mkt-pdp__freedelivery.is-unlocked {
  background: #ecfdf5;
  border-color: #d1fae5;
  color: #059669;
}
.mkt-pdp__freedelivery svg {
  flex-shrink: 0;
}
/* -- Short description --------------------------------------------------- */.mkt-pdp .pd-short-desc {
  font-size: 15px;
  color: var(--tm-text-muted);
  line-height: 1.65;
  margin: 0 0 18px;
}
/* -- Variant attributes -------------------------------------------------- */.mkt-pdp .pd-option-group {
  margin-bottom: 18px;
}
.mkt-pdp .pd-option-label {
  color: var(--tm-text-dark);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.mkt-pdp .pd-option-selected {
  color: var(--tm-primary);
  font-size: 13px;
  font-weight: 600;
}
.mkt-pdp .pd-option-btn {
  background: #fff;
  border-color: var(--tm-border);
  border-radius: 8px;
  color: var(--tm-text-dark);
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
}
.mkt-pdp .pd-option-btn:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkt-pdp .pd-option-btn.active {
  background: var(--tm-primary);
  border-color: var(--tm-primary);
  color: #fff;
  box-shadow: 0 4px 12px -6px rgba(15, 101, 214, 0.75);
}
.mkt-pdp .pd-size-pill {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
}
.mkt-pdp .pd-color-swatch {
  background: #fff;
  border-color: var(--tm-border);
}
.mkt-pdp .pd-color-swatch.active {
  background: #fff;
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 2px var(--tm-primary);
}
.mkt-pdp .pd-color-swatch.active .pd-swatch-inner {
  border-color: #fff;
  box-shadow: inset 0 0 0 1px var(--tm-primary);
}
/* -- Quantity (minimal stepper, 2px radius) ------------------------------ */.mkt-pdp .pd-qty {
  border: 1px solid var(--tm-border);
  border-radius: 2px;
  height: 40px;
  background: #fff;
}
.mkt-pdp .pd-qty-btn {
  width: 36px;
  height: 38px;
  background: #fff;
  color: var(--tm-text-muted);
}
.mkt-pdp .pd-qty-btn:hover {
  background: var(--tm-bg);
  color: var(--tm-primary);
}
.mkt-pdp .pd-qty-input {
  width: 42px;
  height: 38px;
  background: #fff;
  color: var(--tm-text-dark);
  border-left-color: var(--tm-border);
  border-right-color: var(--tm-border);
  font-size: 14px;
  font-weight: 600;
}
.mkt-pdp .pd-qty-remaining {
  color: var(--tm-sale);
  font-weight: 600;
}
/* -- Actions ------------------------------------------------------------- */.mkt-pdp__actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.mkt-pdp .pd-btn-add {
  width: auto;
  min-width: 0;
  min-height: 42px;
  padding: 0 var(--eos-btn-padding-x, 22px);
  border-radius: var(--eos-btn-radius, 5px);
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  font-size: var(--eos-btn-font-size, 15px);
  font-weight: var(--eos-btn-font-weight, 600);
  gap: 9px;
  box-shadow: 0 10px 22px -16px rgba(15, 101, 214, 0.95);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,    transform var(--eos-btn-hover-transform, none) 0.15s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkt-pdp .pd-btn-add:hover,.mkt-pdp .pd-btn-add:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  transform: var(--eos-btn-hover-transform, translateY(-1px));
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, 0 14px 26px -18px rgba(11, 77, 166, 0.95));
}
.mkt-pdp .pd-btn-add:active {
  transform: translateY(0);
}
.mkt-pdp .pd-btn-add.is-loading {
  background: #64748b;
  box-shadow: none;
  pointer-events: none;
}
.mkt-pdp .pd-btn-add.added {
  background: #16a34a;
  box-shadow: none;
  pointer-events: none;
}
.mkt-pdp .pd-btn-add:disabled {
  opacity: 0.55;
  box-shadow: none;
}
.mkt-pdp .pd-btn-buy {
  min-height: 42px;
  padding: 0 var(--eos-btn-padding-x, 26px);
  border: none;
  border-radius: var(--eos-btn-radius, 5px);
  background: var(--eos-btn-bg, var(--tm-text-dark));
  color: var(--eos-btn-color, #fff);
  font-size: var(--eos-btn-font-size, 15px);
  font-weight: var(--eos-btn-font-weight, 600);
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease,    transform var(--eos-btn-hover-transform, none) 0.15s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkt-pdp .pd-btn-buy:hover,.mkt-pdp .pd-btn-buy:focus-visible {
  background: var(--eos-btn-hover-bg, #111827);
  color: var(--eos-btn-hover-color, #fff);
  transform: var(--eos-btn-hover-transform, translateY(-1px));
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, 0 12px 24px -20px rgba(17, 24, 39, 0.95));
}
.mkt-pdp .pd-btn-buy:disabled {
  opacity: 0.55;
}
/* Sticky PDP bar Add to Cart — shared storefront.css defines .pd-sticky-bar-cart;   these Market-only rules let --eos-btn-* win without touching Default. */.mkt-pdp__sticky-cart,.mkt-pdp__sticky-cart:hover,.mkt-pdp__sticky-cart:active {
  padding: var(--eos-btn-padding-y, 10px) var(--eos-btn-padding-x, 20px);
  border-radius: var(--eos-btn-radius, 10px);
  background: var(--eos-btn-bg, var(--secondary, #e94560));
  color: var(--eos-btn-color, #fff);
  font-size: var(--eos-btn-font-size, 0.8125rem);
  font-weight: var(--eos-btn-font-weight, 700);
}
.mkt-pdp__sticky-cart:hover,.mkt-pdp__sticky-cart:focus-visible {
  background: var(--eos-btn-hover-bg, var(--secondary-hover, #d63851));
  color: var(--eos-btn-hover-color, #fff);
  filter: var(--eos-btn-hover-filter, none);
  transform: var(--eos-btn-hover-transform, none);
  box-shadow: var(--eos-btn-hover-shadow, none);
}
.mkt-pdp__btn--wish {
  /* Core .wishlist-btn pins itself to the nearest positioned ancestor; in the     actions row it must stay in flow so the grid keeps a real third column. */  position: static;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--tm-border);
  background: #fff;
  color: var(--tm-text-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mkt-pdp__btn--wish:hover {
  border-color: var(--tm-sale);
  color: var(--tm-sale);
}
.mkt-pdp__btn--wish.active {
  border-color: #fecaca;
  background: #fef2f2;
  color: var(--tm-sale);
}
.mkt-pdp__btn--wish.active .heart-icon {
  fill: currentColor;
}
.mkt-pdp__btn-label {
  display: none;
}
/* -- Pickers row: quantity on the left, attributes 30px to its right ----- */.mkt-pdp__pickers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 30px;
  margin-bottom: 18px;
}
.mkt-pdp__pickers > .pd-option-group {
  margin-bottom: 0;
}
.mkt-pdp__pickers .mkt-pdp__qty-group {
  flex: 0 0 auto;
}
.mkt-pdp__pickers .mkt-pdp__variants {
  flex: 1 1 240px;
  min-width: 0;
  margin-top: 0;
}
.mkt-pdp__option-group--color .pd-option-values {
  gap: 10px;
}
/* Colour attributes: swatch ellipses only, never a text pill. An   unmapped colour still gets an ellipse (neutral fill from CSS). */.mkt-pdp__option-group--color .pd-option-btn.pd-color-swatch {
  border-radius: 50%;
}
.mkt-pdp .pd-color-swatch .pd-swatch-inner {
  background-image: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 55%, #9ca3af 100%);
}
/* Specifications table: a colour value renders as an ellipse too. */.mkt-pdp__spec-swatch {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  vertical-align: middle;
  background-image: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 55%, #9ca3af 100%);
}
/* -- Hotline (full-width action under the buy buttons) ------------------- */.mkt-pdp__hotline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 46px;
  margin: 0 0 18px;
  padding: 0 18px;
  border: 1px solid var(--tm-border);
  border-radius: 5px;
  background: #fff;
  color: var(--tm-text-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mkt-pdp__hotline:hover,.mkt-pdp__hotline:focus-visible {
  border-color: var(--tm-primary);
  background: #f8fbff;
  color: var(--tm-primary);
  text-decoration: none;
}
.mkt-pdp__hotline svg {
  flex-shrink: 0;
}
/* Hotline Call + WhatsApp pair: same position and button language as the   single hotline action, sharing one row without overflowing. */.mkt-pdp__hotline-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 0 0 18px;
}
.mkt-pdp__hotline-group .mkt-pdp__hotline {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0 16px;
}
.mkt-pdp__hotline-group .mkt-pdp__hotline span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* -- Delivery panel (SSOT tabs) ------------------------------------------ */.mkt-pdp__delivery {
  background: var(--tm-bg);
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  padding: 13px 15px;
}
.mkt-pdp__delivery--tab {
  max-width: 720px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.mkt-pdp__delivery-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.mkt-pdp__delivery-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--tm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkt-pdp__delivery-head strong {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tm-text-muted);
}
/* Zone tabs — labels come from the shipping attributes settings. */.mkt-pdp__ship-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.mkt-pdp__ship-tab {
  border: 1px solid var(--tm-border);
  border-radius: 5px;
  background: #fff;
  color: var(--tm-text-muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  padding: 6px 12px;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.mkt-pdp__ship-tab:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkt-pdp__ship-tab.is-active {
  border-color: var(--tm-primary);
  background: var(--tm-primary);
  color: #fff;
}
.mkt-pdp__ship-panel[hidden] {
  display: none;
}
.mkt-pdp__delivery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mkt-pdp__delivery-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  line-height: 1.5;
}
.mkt-pdp__delivery-list li span {
  color: var(--tm-text-muted);
}
.mkt-pdp__delivery-list li b {
  color: var(--tm-text-dark);
  font-weight: 600;
  text-align: right;
}
.mkt-pdp__delivery-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px dashed var(--tm-border);
}
.mkt-pdp__delivery-links a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tm-primary);
  text-decoration: none;
}
.mkt-pdp__delivery-links a:hover {
  color: var(--tm-primary-dark);
  text-decoration: underline;
}
/* -- Detail tabs ---------------------------------------------------------   Description / Specifications / Delivery live in .mkt-pdp-tabs, a sibling   of .mkt-pdp, so the rules are scoped here (a .mkt-pdp prefix never   matched this markup). One white card, primary active indicator, no   shadows. */.mkt-pdp-tabs {
  background: var(--tm-bg);
  padding: 40px 0 56px;
}
.mkt-pdp-tabs .pd-tabs {
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 5px;
  box-shadow: none;
}
.mkt-pdp-tabs .pd-tabs-nav {
  flex-wrap: wrap;
  border-bottom: 1px solid var(--tm-border);
  padding: 0 10px;
  gap: 4px;
  overflow-x: visible;
}
.mkt-pdp-tabs .pd-tab-btn {
  padding: 17px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tm-text-muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.mkt-pdp-tabs .pd-tab-btn:hover {
  color: var(--tm-primary);
}
.mkt-pdp-tabs .pd-tab-btn.active {
  color: var(--tm-primary);
}
.mkt-pdp-tabs .pd-tab-btn.active::after {
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 3px;
  background: var(--tm-primary);
  border-radius: 3px 3px 0 0;
}
.mkt-pdp-tabs .pd-tab-content {
  padding: 26px 28px 30px;
}
.mkt-pdp-tabs .pd-desc-content {
  font-size: 15px;
  line-height: 1.75;
  color: #475569;
  max-width: 840px;
}
/* -- Specifications ------------------------------------------------------ */.mkt-pdp-tabs .pd-spec-table {
  max-width: 720px;
}
.mkt-pdp-tabs .pd-spec-table tr:nth-child(odd) {
  background: transparent;
}
.mkt-pdp-tabs .pd-spec-table tr:nth-child(odd) td {
  background: #f9fafb;
}
.mkt-pdp-tabs .pd-spec-table td {
  padding: 13px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--tm-border);
  color: #475569;
}
.mkt-pdp-tabs .pd-spec-table td:first-child {
  width: 210px;
  font-weight: 600;
  color: var(--tm-text-muted);
  background: var(--tm-bg);
}
.mkt-pdp-tabs .pd-spec-table td:last-child {
  color: var(--tm-text-dark);
  font-weight: 500;
}
.mkt-pdp-tabs .pd-spec-table td a {
  color: var(--tm-primary);
  font-weight: 600;
}
.mkt-pdp-tabs .pd-spec-table tr:last-child td {
  border-bottom: none;
}
/* -- Benefits band — "Why shop with us" (renders after Customer Reviews) */.mkt-pdp-trust {
  background: #fff;
  border-top: 1px solid var(--tm-border);
  border-bottom: 1px solid var(--tm-border);
}
.mkt-pdp-trust .mkt-feat__head {
  margin-bottom: 26px;
}
.mkt-pdp-trust__grid {
  gap: 26px 32px;
}
.mkt-pdp-trust .mkt-feature {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.mkt-pdp-trust .mkt-feature:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.mkt-pdp-trust .mkt-feature__icon {
  width: 46px;
  height: 46px;
  background: #eff6ff;
}
.mkt-pdp-trust .mkt-feature:hover .mkt-feature__icon {
  background: var(--tm-primary);
  color: #fff;
}
.mkt-pdp-trust .mkt-feature__title {
  transition: color 0.15s ease;
}
.mkt-pdp-trust .mkt-feature:hover .mkt-feature__title {
  color: var(--tm-primary);
}
/* -- Reviews band --------------------------------------------------------   The reviews section is a sibling of .mkt-pdp, so these rules are scoped   to .mkt-pdp-reviews (a .mkt-pdp prefix never matched this markup). */.mkt-pdp-reviews {
  background: #fff;
}
.mkt-pdp-reviews .mkt-feat__head {
  margin-bottom: 26px;
}
.mkt-pdp-reviews .pd-reviews-wrap {
  max-width: none;
}
.mkt-pdp-reviews .pd-reviews-wrap.mkt-reviews-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.mkt-pdp-reviews .pd-reviews-summary.mkt-reviews-summary {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mkt-pdp-reviews .pd-reviews-score-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  box-shadow: none;
}
.mkt-pdp-reviews .pd-reviews-big-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
.mkt-pdp-reviews .pd-reviews-big-number {
  color: var(--tm-text-dark);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
}
.mkt-pdp-reviews .pd-reviews-big-scale {
  font-size: 1rem;
  font-weight: 500;
  color: var(--tm-text-muted);
}
.mkt-pdp-reviews .pd-reviews-big-stars {
  display: flex;
  justify-content: center;
  gap: 2px;
}
.mkt-pdp-reviews .pd-reviews-big-total {
  color: var(--tm-text-muted);
  font-size: 13px;
}
.mkt-pdp-reviews .mkt-reviews-write-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--eos-btn-padding-x, 16px);
  margin-top: 2px;
  background: var(--eos-btn-bg, var(--tm-primary));
  border: 1px solid var(--eos-btn-border-color, var(--eos-btn-bg, var(--tm-primary)));
  border-radius: var(--eos-btn-radius, 8px);
  color: var(--eos-btn-color, #fff);
  font-size: var(--eos-btn-font-size, 14px);
  font-weight: var(--eos-btn-font-weight, 600);
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,    transform var(--eos-btn-hover-transform, none) 0.18s ease,    box-shadow 0.18s ease, filter 0.18s ease;
}
.mkt-pdp-reviews .mkt-reviews-write-btn:hover,.mkt-pdp-reviews .mkt-reviews-write-btn:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  border-color: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  transform: var(--eos-btn-hover-transform, none);
  filter: var(--eos-btn-hover-filter, none);
  box-shadow: var(--eos-btn-hover-shadow, none);
}
.mkt-pdp-reviews .mkt-reviews-write-btn:focus-visible {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}
.mkt-pdp-reviews .mkt-reviews-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}
.mkt-pdp-reviews .pd-reviews-bars {
  gap: 5px;
}
.mkt-pdp-reviews .pd-reviews-bar-row:hover {
  background: rgba(15, 101, 214, 0.06);
}
.mkt-pdp-reviews .pd-reviews-bar-row.active-filter {
  background: rgba(15, 101, 214, 0.09);
  box-shadow: inset 0 0 0 1.5px var(--tm-primary);
}
.mkt-pdp-reviews .pd-reviews-bar-fill {
  background: #fbbf24;
}
.mkt-pdp-reviews .pd-reviews-bar-row.active-filter .pd-reviews-bar-fill {
  background: var(--tm-primary);
}
.mkt-pdp-reviews .pd-reviews-bar-label {
  color: var(--tm-text-dark);
}
.mkt-pdp-reviews .pd-reviews-clear-filter {
  color: var(--tm-primary);
  border-color: var(--tm-border);
  background: #fff;
}
.mkt-pdp-reviews .pd-reviews-clear-filter:hover {
  background: #eff6ff;
  border-color: var(--tm-primary);
  color: var(--tm-primary);
}
.mkt-pdp-reviews .pd-reviews-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--tm-border);
}
.mkt-pdp-reviews .mkt-reviews-main .pd-reviews-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mkt-pdp-reviews .pd-reviews-filter-info {
  color: var(--tm-text-muted);
  font-size: 13.5px;
}
.mkt-pdp-reviews .pd-reviews-filter-info strong {
  color: var(--tm-text-dark);
}
.mkt-pdp-reviews .pd-reviews-sort-label {
  color: var(--tm-text-muted);
  font-size: 13.5px;
}
.mkt-pdp-reviews .pd-reviews-sort-select {
  padding: 7px 10px;
  border-color: var(--tm-border);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--tm-text-dark);
}
.mkt-pdp-reviews .pd-reviews-sort-select:focus {
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkt-pdp-reviews .pd-reviews-list {
  gap: 0;
  margin-bottom: 14px;
}
.mkt-pdp-reviews .pd-review-card {
  padding: 18px 2px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--tm-border);
  border-radius: 0;
}
.mkt-pdp-reviews .pd-review-card:hover {
  background: #fff;
  box-shadow: none;
}
.mkt-pdp-reviews .pd-review-card:last-child {
  border-bottom: 0;
}
.mkt-pdp-reviews .pd-review-avatar {
  background: #eff6ff;
  color: var(--tm-primary);
}
.mkt-pdp-reviews .pd-review-avatar--high {
  background: #ecfdf5;
  color: #059669;
}
.mkt-pdp-reviews .pd-review-avatar--low {
  background: #fef2f2;
  color: #dc2626;
}
.mkt-pdp-reviews .pd-review-name {
  color: var(--tm-text-dark);
}
.mkt-pdp-reviews .pd-review-badge-verified {
  background: #ecfdf5;
  color: #059669;
}
.mkt-pdp-reviews .pd-review-badge-verified svg {
  color: #10b981;
}
.mkt-pdp-reviews .pd-review-rating-badge {
  background: #f1f5f9;
  color: #475569;
}
.mkt-pdp-reviews .pd-review-date {
  color: #9ca3af;
}
.mkt-pdp-reviews .pd-review-title {
  color: var(--tm-text-dark);
  font-size: 15.5px;
}
.mkt-pdp-reviews .pd-review-text {
  color: #475569;
  font-size: 14.5px;
}
.mkt-pdp-reviews .pd-review-footer {
  border-top-color: #f3f4f6;
}
.mkt-pdp-reviews .pd-review-helpful-btn {
  border-color: var(--tm-border);
  border-radius: 999px;
  color: var(--tm-text-muted);
}
.mkt-pdp-reviews .pd-review-helpful-btn:hover,.mkt-pdp-reviews .pd-review-helpful-btn.voted {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
  background: #eff6ff;
}
.mkt-pdp-reviews .pd-review-report-btn {
  color: #9ca3af;
  border-radius: 999px;
}
.mkt-pdp-reviews .pd-review-report-btn:hover {
  color: var(--tm-sale);
}
.mkt-pdp-reviews .pd-reviews-empty {
  padding: 34px 24px;
  background: var(--tm-bg);
  border-radius: 10px;
}
.mkt-pdp-reviews .pd-reviews-empty h4 {
  color: var(--tm-text-dark);
  font-size: 1.0625rem;
}
.mkt-pdp-reviews .pd-reviews-empty p {
  color: var(--tm-text-muted);
}
.mkt-pdp-reviews .mkt-pdp__reviews-empty-icon {
  width: 56px;
  height: 56px;
  background: #fff;
}
.mkt-pdp-reviews .pd-reviews-load-more {
  padding: 4px 0 6px;
}
.mkt-pdp-reviews .pd-reviews-load-more-btn {
  border-color: var(--tm-border);
  border-radius: 8px;
  color: var(--tm-text-dark);
  background: #fff;
}
.mkt-pdp-reviews .pd-reviews-load-more-btn:hover {
  border-color: var(--tm-primary);
  color: var(--tm-primary);
  background: #eff6ff;
  box-shadow: none;
}
.mkt-pdp-reviews .pd-review-guidelines {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--tm-bg);
  border-color: var(--tm-border);
  border-radius: 10px;
}
.mkt-pdp-reviews .pd-review-guidelines-title {
  color: var(--tm-text-dark);
}
.mkt-pdp-reviews .pd-review-guidelines-title svg {
  color: var(--tm-text-muted);
}
.mkt-pdp-reviews .pd-review-guidelines-list {
  color: var(--tm-text-muted);
}
/* -- Write a review modal ------------------------------------------------   Centred white dialog — the form is never rendered inline. */.mkt-review-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}
.mkt-review-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.mkt-review-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.mkt-review-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 10px;
  box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.4);
  outline: none;
  transform: translateY(10px);
  transition: transform 0.18s ease;
}
.mkt-review-modal.is-open .mkt-review-modal__panel {
  transform: none;
}
.mkt-review-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--tm-border);
}
.mkt-review-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tm-text-dark);
}
.mkt-review-modal__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tm-text-muted);
}
.mkt-review-modal__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--tm-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.mkt-review-modal__close:hover {
  background: var(--tm-bg);
  border-color: var(--tm-border);
  color: var(--tm-text-dark);
}
.mkt-review-modal__close:focus-visible {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
}
.mkt-review-modal__body {
  padding: 18px 20px 20px;
  overflow-y: auto;
}
.mkt-review-modal .pd-review-form {
  gap: 16px;
}
.mkt-review-modal .pd-review-form-rating label,.mkt-review-modal .pd-review-form-field label {
  color: var(--tm-text-dark);
}
.mkt-review-modal .pd-form-input {
  border-color: var(--tm-border);
  border-radius: 8px;
  color: var(--tm-text-dark);
  font-size: 14.5px;
}
.mkt-review-modal .pd-form-input:focus {
  border-color: var(--tm-primary);
  box-shadow: 0 0 0 3px rgba(15, 101, 214, 0.12);
}
.mkt-review-modal .pd-review-star-btn.active svg {
  fill: #fbbf24;
  stroke: #fbbf24;
}
.mkt-review-modal .pd-review-rating-text {
  color: var(--tm-primary);
  font-size: 13.5px;
  font-weight: 600;
}
.mkt-review-modal .pd-form-hint,.mkt-review-modal .pd-form-char-count {
  color: #9ca3af;
}
.mkt-review-modal .pd-review-guidelines {
  margin-top: 0;
  padding: 13px 16px;
  background: var(--tm-bg);
  border-color: var(--tm-border);
  border-radius: 8px;
}
.mkt-review-modal .pd-review-guidelines-title {
  color: var(--tm-text-dark);
}
.mkt-review-modal .pd-review-guidelines-list {
  color: var(--tm-text-muted);
  line-height: 1.6;
}
.mkt-review-modal .pd-review-form-actions {
  padding-top: 2px;
}
.mkt-review-modal .pd-review-submit {
  background: var(--eos-btn-bg, var(--tm-primary));
  color: var(--eos-btn-color, #fff);
  border-radius: var(--eos-btn-radius, 5px);
  min-height: 42px;
  padding: 0 var(--eos-btn-padding-x, 24px);
  font-size: var(--eos-btn-font-size, inherit);
  font-weight: var(--eos-btn-font-weight, 600);
}
.mkt-review-modal .pd-review-submit:hover,.mkt-review-modal .pd-review-submit:focus-visible {
  background: var(--eos-btn-hover-bg, var(--tm-primary-dark));
  color: var(--eos-btn-hover-color, #fff);
  filter: var(--eos-btn-hover-filter, none);
  transform: var(--eos-btn-hover-transform, none);
  box-shadow: var(--eos-btn-hover-shadow, none);
}
/* -- FAQ ----------------------------------------------------------------- */.mkt-pdp-faq {
  background: var(--tm-bg);
  border-top: 1px solid var(--tm-border);
  border-bottom: 1px solid var(--tm-border);
}
.mkt-pdp-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 900px;
}
.mkt-pdp-faq__item {
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  overflow: hidden;
}
.mkt-pdp-faq__item[open] {
  border-color: #d7e3f4;
  box-shadow: 0 12px 26px -22px rgba(15, 23, 42, 0.7);
}
.mkt-pdp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tm-text-dark);
}
.mkt-pdp-faq__q::-webkit-details-marker {
  display: none;
}
.mkt-pdp-faq__q::marker {
  content: "";
}
.mkt-pdp-faq__chev {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.2s ease, color 0.2s ease;
}
.mkt-pdp-faq__item[open] .mkt-pdp-faq__chev {
  transform: rotate(180deg);
  color: var(--tm-primary);
}
.mkt-pdp-faq__a {
  padding: 0 20px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: #475569;
}
/* -- Assist: Why Shop With Us + FAQ cards in one shared two-column section - */.mkt-pdp-assist {
  background: var(--tm-bg);
  border-top: 1px solid var(--tm-border);
  border-bottom: 1px solid var(--tm-border);
}
.mkt-pdp-assist__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.mkt-pdp-assist__card {
  min-width: 0;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  padding: 20px;
}
.mkt-pdp-assist__grid > :only-child {
  grid-column: 1 / -1;
}
.mkt-pdp-assist__head {
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
}
.mkt-pdp-assist__benefits {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mkt-pdp-assist__benefits .mkt-feature {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  background: none;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--tm-border);
  border-radius: 0;
  box-shadow: none;
  transform: none;
}
.mkt-pdp-assist__benefits .mkt-feature:first-child {
  padding-top: 0;
}
.mkt-pdp-assist__benefits .mkt-feature:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.mkt-pdp-assist__benefits .mkt-feature:hover {
  border-color: var(--tm-border);
  box-shadow: none;
  transform: none;
}
.mkt-pdp-assist__benefits .mkt-feature__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #eff6ff;
  color: var(--tm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-pdp-assist__benefits .mkt-feature__title {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--tm-text-dark);
}
.mkt-pdp-assist__benefits .mkt-feature__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tm-text-muted);
}
.mkt-pdp-assist__faq-list {
  gap: 0;
  max-width: none;
  border-top: 1px solid var(--tm-border);
}
.mkt-pdp-assist__faq-list .mkt-pdp-faq__item {
  background: none;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--tm-border);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.mkt-pdp-assist__faq-list .mkt-pdp-faq__item:last-child {
  border-bottom: 0;
}
.mkt-pdp-assist__faq-list .mkt-pdp-faq__item[open] {
  border-color: var(--tm-border);
  box-shadow: none;
}
.mkt-pdp-assist__faq-list .mkt-pdp-faq__q {
  gap: 12px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tm-text-dark);
  overflow-wrap: anywhere;
}
.mkt-pdp-assist__faq-list .mkt-pdp-faq__q > span {
  min-width: 0;
}
.mkt-pdp-assist__grid,.mkt-pdp-assist__col,.mkt-pdp-assist__benefits,.mkt-pdp-assist__faq-list {
  max-width: 100%;
}
.mkt-pdp-assist__faq-list .mkt-pdp-faq__a {
  padding: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #475569;
}
/* -- Recently viewed row -------------------------------------------------- */.mkt-pdp-recently {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.mkt-pdp-recently__item {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
}
.mkt-pdp-recently__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 136px;
  background: var(--tm-bg);
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mkt-pdp-recently__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.mkt-pdp-recently__item:hover .mkt-pdp-recently__media {
  border-color: var(--tm-primary);
  box-shadow: 0 12px 22px -18px rgba(15, 101, 214, 0.8);
}
.mkt-pdp-recently__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--tm-text-dark);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.mkt-pdp-recently__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--tm-primary);
}
/* -- Responsive ----------------------------------------------------------- */@media (max-width: 991.98px) {
  .mkt-pdp__grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .mkt-pdp .pd-gallery {
    position: static;
  }
  .mkt-pdp-tabs .pd-tab-content {
    padding: 24px 20px 26px;
  }
  .mkt-pdp-reviews .pd-reviews-wrap.mkt-reviews-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mkt-pdp-reviews .pd-reviews-score-panel {
    gap: 14px;
  }
  .mkt-pdp-reviews .mkt-reviews-write-btn {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .mkt-pdp-tabs {
    padding: 32px 0 44px;
  }
  .mkt-pdp-faq__list {
    max-width: none;
  }
  .mkt-pdp-assist__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .mkt-pdp-assist__card {
    padding: 18px;
  }
}
@media (max-width: 575.98px) {
  .mkt-pdp {
    padding: 4px 0 32px;
  }
  .mkt-pdp .pd-price-current {
    font-size: 24px;
  }
  .mkt-pdp__actions {
    grid-template-columns: 1fr auto;
  }
  .mkt-pdp .pd-btn-add {
    grid-column: 1 / -1;
  }
  /* Attributes and quantity stack instead of sharing the row. */  .mkt-pdp__pickers {
    gap: 16px;
    margin-bottom: 16px;
  }
  .mkt-pdp__pickers .mkt-pdp__variants,  .mkt-pdp__pickers .mkt-pdp__qty-group {
    flex: 1 1 100%;
  }
  .mkt-pdp__hotline {
    height: 44px;
    font-size: 13.5px;
  }
  .mkt-pdp__delivery {
    padding: 12px 13px;
  }
  .mkt-pdp-tabs .pd-tabs-nav {
    padding: 0 4px;
    gap: 0 2px;
    overflow-x: visible;
  }
  .mkt-pdp-tabs .pd-tab-btn {
    padding: 14px 14px;
    font-size: 13.5px;
  }
  .mkt-pdp-tabs .pd-tab-content {
    padding: 20px 16px 24px;
  }
  .mkt-review-modal {
    padding: 12px;
  }
  .mkt-review-modal__panel {
    max-height: calc(100vh - 24px);
  }
  .mkt-review-modal__head {
    padding: 16px 16px 12px;
  }
  .mkt-review-modal__body {
    padding: 16px 16px 18px;
  }
  .mkt-review-modal .pd-review-submit {
    width: 100%;
    justify-content: center;
  }
  .mkt-pdp-reviews .pd-review-card {
    padding: 16px 2px;
  }
  .mkt-pdp-reviews .pd-reviews-score-panel {
    padding: 16px;
  }
  .mkt-pdp-assist__card {
    padding: 16px;
  }
  .mkt-pdp-assist__grid {
    gap: 16px;
  }
  .mkt-pdp__delivery-list li {
    flex-direction: column;
    gap: 2px;
  }
  .mkt-pdp__delivery-list li b {
    text-align: left;
  }
  .mkt-pdp-recently__item {
    flex: 0 0 150px;
  }
}
/* ------------------------------------------------------------------   PDP gap fixes — labels and small wrappers without a core partner------------------------------------------------------------------ */.mkt-pdp__form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--tm-text-dark);
}
.mkt-pdp__required {
  color: var(--tm-sale);
}
.mkt-pdp__optional {
  font-weight: 500;
  font-size: 12px;
  color: var(--tm-text-muted);
}
.mkt-pdp__variants {
  margin-top: 2px;
}
/* ==========================================================================   Breadcrumb — single horizontal row (shared foundation)   The shared partial (storefront/breadcrumb.blade.php) renders the same   <nav>/<ol> markup on every storefront page; the product view only opts   into the Home icon and BreadcrumbList JSON-LD via .mkt-breadcrumb--pdp.   Without these base rules the inner <ol> kept Bootstrap's padding-left and   default decimal numbering and every crumb stacked vertically.   ========================================================================== */.mkt-breadcrumb {
  min-width: 0;
}
.mkt-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.55;
  color: var(--tm-text-muted);
}
.mkt-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.mkt-breadcrumb__link {
  display: block;
  min-width: 0;
  max-width: 240px;
  overflow: hidden;
  color: var(--tm-text-muted);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: none;
  transition: color 0.15s ease;
}
.mkt-breadcrumb__link:hover {
  color: var(--tm-primary);
}
.mkt-breadcrumb__link:focus-visible {
  outline: 2px solid var(--tm-primary);
  outline-offset: 2px;
  border-radius: 3px;
}
.mkt-breadcrumb__home-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: -2px;
}
.mkt-breadcrumb__sep {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: #C4CAD4;
}
.mkt-breadcrumb__sep svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
}
.mkt-breadcrumb__current {
  display: block;
  min-width: 0;
  max-width: min(60vw, 420px);
  overflow: hidden;
  color: var(--tm-text-dark);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 575.98px) {
  .mkt-breadcrumb__list {
    gap: 5px;
    font-size: 12px;
  }
  .mkt-breadcrumb__item {
    gap: 5px;
  }
  .mkt-breadcrumb__link {
    max-width: 150px;
  }
  .mkt-breadcrumb__current {
    max-width: 55vw;
  }
}
/* ==========================================================================   PDP offer card — price + availability meter + free delivery   Holds only three facts: price/old price/savings, the availability   meter (real count + percentage bar) and the free-delivery message.   Desktop (>=992px): fixed 120px height, three balanced rows via grid   areas —       price    | figure (amount + %)       bar      | (full width)       status   | free delivery   .mkt-pdp__avail is display:contents so its children (figure, bar and   the core .pd-stock line) become grid items of the card, which keeps   theme.js initStockMeter working unchanged. Below 992px the fixed   height is released so the card can grow with wrapped content.   The meter percentage is stock_quantity measured against the product's   low_stock_threshold (both real DB columns), capped at 100%: at or   above the threshold the bar reads full, below it drains, out of stock   it empties. storefront.js rewrites #pdPriceBlock and .pd-stock on   variant change; theme.js repaints the meter from real variant stock.   ========================================================================== */.mkt-pdp__offer {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:    "price    figure"    "bar      bar"    "status   delivery";
  align-items: center;
  align-content: space-between;
  column-gap: 16px;
  row-gap: 8px;
  height: 120px;
  margin: 0 0 18px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--tm-border);
  border-radius: 16px;
  box-shadow:    0 1px 2px rgba(16, 24, 40, 0.04),    0 16px 32px -24px rgba(16, 24, 40, 0.28);
}
.mkt-pdp__offer .mkt-pdp__price {
  grid-area: price;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.mkt-pdp__offer .mkt-pdp__price .pd-price-current {
  font-size: 24px;
}
.mkt-pdp__offer .mkt-pdp__price .pd-price-original {
  font-size: 14px;
}
.mkt-pdp__offer .mkt-pdp__price .pd-price-save {
  padding: 3px 9px;
  font-size: 11px;
}
/* -- Availability meter --------------------------------------------------- */.mkt-pdp__avail {
  display: contents;
}
.mkt-pdp__avail-figure {
  grid-area: figure;
  justify-self: end;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--tm-text-muted);
}
.mkt-pdp__avail-num {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tm-text-dark);
}
.mkt-pdp__avail-unit {
  font-weight: 500;
}
.mkt-pdp__avail-pct {
  padding: 1px 7px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}
.mkt-pdp__avail-bar {
  grid-area: bar;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef1f5;
}
.mkt-pdp__avail-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  transition: width 0.35s ease;
}
.mkt-pdp__avail.is-low .mkt-pdp__avail-fill {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}
.mkt-pdp__avail.is-low .mkt-pdp__avail-pct {
  background: #fffbeb;
  color: #b45309;
}
.mkt-pdp__avail.is-out .mkt-pdp__avail-fill {
  background: #e5e7eb;
}
.mkt-pdp__avail.is-out .mkt-pdp__avail-pct {
  background: #f3f4f6;
  color: #6b7280;
}
.mkt-pdp__avail.is-out .mkt-pdp__avail-num {
  color: #9ca3af;
}
.mkt-pdp__offer .mkt-pdp__stock.pd-stock {
  grid-area: status;
  margin: 0;
}
.mkt-pdp__offer .pd-stock span {
  font-size: 12.5px;
}
.mkt-pdp__offer .mkt-pdp__freedelivery {
  grid-area: delivery;
  justify-self: end;
  margin: 0;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
}
/* Below desktop the card grows with its content. */@media (max-width: 991.98px) {
  .mkt-pdp__offer {
    height: auto;
    row-gap: 10px;
    padding: 16px 18px;
  }
}
@media (max-width: 575.98px) {
  .mkt-pdp__offer {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:      "price"      "figure"      "bar"      "status"      "delivery";
    row-gap: 8px;
    padding: 16px 14px;
    border-radius: 14px;
  }
  .mkt-pdp__avail-figure,  .mkt-pdp__offer .mkt-pdp__freedelivery {
    justify-self: start;
    justify-content: flex-start;
  }
  .mkt-pdp__offer .mkt-pdp__price .pd-price-current {
    font-size: 25px;
  }
  .mkt-pdp__meta {
    gap: 8px 10px;
    margin-bottom: 12px;
  }
  .mkt-pdp__meta-code {
    font-size: 11.5px;
    letter-spacing: 0.04em;
  }
}
/* ------------------------------------------------------------------ *//*  Hero � admin-owned layout settings (Admin > Appearance > Homepage) *//*  hero_mode: single | slider | bento, plus height, content width,     *//*  inner padding, typography, bento grid and the per-banner scrim.     *//* ------------------------------------------------------------------ */.mkt-hero {
  max-width: var(--mkt-hero-content-width, 100%);
}
@media (min-width: 768px) {
  .mkt-hero__slide {
    padding: var(--mkt-hero-padding, 64px);
  }
}
.mkt-hero-wrap--full .mkt-hero__slider {
  min-height: 100vh;
  height: auto;
}
.mkt-hero__slide--column {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.mkt-hero__slide--column .mkt-hero__copy {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.mkt-hero__slide--column .mkt-hero__sub {
  margin-left: auto;
  margin-right: auto;
}
/* ------------------------------------------------------------------ *//*  Hero bento grid                                                    *//* ------------------------------------------------------------------ */.mkt-hero__bento {
  display: grid;
  grid-template-columns: repeat(var(--mkt-bento-cols, 3), minmax(0, 1fr));
  grid-auto-rows: minmax(180px, auto);
  gap: var(--mkt-bento-gap, 14px);
}
.mkt-hero__bento-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 180px;
  padding: 24px;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f4f6;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mkt-hero__bento-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
.mkt-hero__bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.05));
  z-index: 1;
}
.mkt-hero__bento-card--empty::before {
  display: none;
}
.mkt-hero__bento-content {
  position: relative;
  z-index: 2;
  color: #fff;
  font-family: var(--mkt-hero-font-family, inherit);
}
.mkt-hero__bento-card--empty .mkt-hero__bento-content {
  color: var(--tm-text-dark);
}
.mkt-hero__bento-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.mkt-hero__bento-title {
  font-size: 1.375rem;
  font-weight: var(--mkt-hero-font-weight, 700);
  line-height: var(--mkt-hero-line-height, 1.2);
  margin: 0 0 6px;
}
.mkt-hero__bento-text {
  font-size: 0.875rem;
  opacity: 0.92;
  margin: 0 0 12px;
  max-width: 420px;
}
.mkt-hero__bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 700;
}
@media (max-width: 767.98px) {
  .mkt-hero__bento {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: minmax(150px, auto);
  }
  .mkt-hero__bento-card:first-child {
    grid-column: span 1;
    grid-row: span 1;
    min-height: 220px;
  }
}
/* Bento cards without a background image use the theme tone + dark text. */.mkt-hero__bento-card.mkt-hero__slide--blue {
  background: linear-gradient(90deg, #eef4fd 0%, #e0ebfb 100%);
}
.mkt-hero__bento-card.mkt-hero__slide--light {
  background: linear-gradient(90deg, #ffffff 0%, #f4f6fa 100%);
}
.mkt-hero__bento-card.mkt-hero__slide--blue::before,.mkt-hero__bento-card.mkt-hero__slide--light::before {
  display: none;
}
.mkt-hero__bento-card.mkt-hero__slide--blue .mkt-hero__bento-content,.mkt-hero__bento-card.mkt-hero__slide--light .mkt-hero__bento-content {
  color: var(--tm-text-dark);
}
.mkt-hero__bento-card.mkt-hero__slide--blue .mkt-hero__bento-badge,.mkt-hero__bento-card.mkt-hero__slide--light .mkt-hero__bento-badge {
  background: rgba(15, 23, 42, 0.08);
  color: var(--tm-primary);
}

/* ==========================================================================
   Blog (Content -> Blog module)
   ========================================================================== */
.mkt-blog { padding-bottom: 8px; }
.mkt-blog__hero { padding: 36px 0 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--mkt-primary, #2563eb) 7%, transparent) 0%, transparent 100%); }
.mkt-blog__hero-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mkt-blog__hero-copy { min-width: 0; }
.mkt-blog__title { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 800; color: var(--mkt-heading, #0f172a); letter-spacing: -0.02em; margin: 0 0 8px; }
.mkt-blog__sub { color: var(--mkt-text-muted, #64748b); font-size: 0.9375rem; margin: 0; max-width: 560px; }
.mkt-blog__back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--mkt-text-muted, #64748b); text-decoration: none; margin-bottom: 10px; }
.mkt-blog__back:hover { color: var(--mkt-heading, #0f172a); }
.mkt-blog__search { display: flex; align-items: center; gap: 6px; background: var(--mkt-bg, #fff); border: 1px solid var(--mkt-border, #e2e8f0); border-radius: 6px; padding: 4px 4px 4px 12px; min-width: 280px; color: var(--mkt-text-muted, #64748b); }
.mkt-blog__search input { border: none; outline: none; background: transparent; padding: 8px; font-size: 0.875rem; flex: 1; min-width: 0; color: var(--mkt-text, #1e293b); }
.mkt-blog__search-btn { padding: 8px 18px; font-size: 0.8125rem; white-space: nowrap; }
.mkt-blog__cats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 22px; }
.mkt-blog__cat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--mkt-border, #e2e8f0); border-radius: 999px; font-size: 0.8125rem; font-weight: 500; color: var(--mkt-text, #1e293b); text-decoration: none; background: var(--mkt-bg, #fff); transition: border-color 0.15s, color 0.15s, background 0.15s; }
.mkt-blog__cat:hover { border-color: var(--mkt-heading, #0f172a); color: var(--mkt-heading, #0f172a); }
.mkt-blog__cat--active { background: var(--mkt-heading, #0f172a); border-color: var(--mkt-heading, #0f172a); color: var(--mkt-text-inverse, #fff); }
.mkt-blog__cat-count { opacity: 0.55; font-size: 0.75rem; }
.mkt-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 28px; }
.mkt-blog__card { border: 1px solid var(--mkt-border, #e2e8f0); border-radius: 6px; overflow: hidden; background: var(--mkt-bg, #fff); display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s; text-decoration: none; color: inherit; }
.mkt-blog__card:hover { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); transform: translateY(-2px); color: inherit; border-color: color-mix(in srgb, var(--mkt-primary, #2563eb) 35%, var(--mkt-border, #e2e8f0)); }
.mkt-blog__card-img { aspect-ratio: 16 / 9; background: var(--mkt-surface, #f8fafc); overflow: hidden; }
.mkt-blog__card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; }
.mkt-blog__card:hover .mkt-blog__card-img img { transform: scale(1.03); }
.mkt-blog__card-img--empty { display: flex; align-items: center; justify-content: center; color: var(--mkt-border, #e2e8f0); }
.mkt-blog__card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.mkt-blog__card-meta { display: flex; align-items: center; gap: 10px; font-size: 0.75rem; color: var(--mkt-text-muted, #64748b); margin-bottom: 8px; flex-wrap: wrap; }
.mkt-blog__badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--mkt-primary, #2563eb) 10%, transparent); color: var(--mkt-primary, #2563eb); font-weight: 600; font-size: 0.6875rem; }
.mkt-blog__card-title { font-size: 1.0625rem; font-weight: 700; color: var(--mkt-heading, #0f172a); margin: 0 0 8px; line-height: 1.35; letter-spacing: -0.01em; }
.mkt-blog__card-excerpt { font-size: 0.875rem; color: var(--mkt-text-muted, #64748b); margin: 0 0 14px; line-height: 1.55; flex: 1; }
.mkt-blog__read { font-size: 0.8125rem; font-weight: 600; color: var(--mkt-heading, #0f172a); display: inline-flex; align-items: center; gap: 4px; margin-top: auto; }
.mkt-blog__read svg { transition: transform 0.15s; }
.mkt-blog__card:hover .mkt-blog__read svg { transform: translateX(3px); }
.mkt-blog__empty { text-align: center; padding: 72px 20px 88px; color: var(--mkt-text-muted, #64748b); }
.mkt-blog__empty svg { color: var(--mkt-border, #e2e8f0); margin-bottom: 14px; }
.mkt-blog__empty h2 { font-size: 1.25rem; font-weight: 800; color: var(--mkt-heading, #0f172a); margin: 0 0 6px; }
.mkt-blog__empty p { margin: 0 0 18px; font-size: 0.9375rem; }
.mkt-blog__article { padding: 28px 0 8px; }
.mkt-blog__article-head { max-width: 760px; margin: 0 auto 26px; }
.mkt-blog__article-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--mkt-text-muted, #64748b); margin-bottom: 12px; }
.mkt-blog__article-meta .mkt-blog__badge { text-decoration: none; }
.mkt-blog__article-title { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800; color: var(--mkt-heading, #0f172a); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 14px; }
.mkt-blog__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.mkt-blog__tag { font-size: 0.75rem; color: var(--mkt-text-muted, #64748b); background: var(--mkt-surface, #f8fafc); border: 1px solid var(--mkt-border, #e2e8f0); border-radius: 999px; padding: 3px 10px; }
.mkt-blog__article-img { max-width: 960px; margin: 0 auto 30px; border-radius: 8px; overflow: hidden; border: 1px solid var(--mkt-border, #e2e8f0); }
.mkt-blog__article-img img { width: 100%; display: block; }
.mkt-blog__body { max-width: 760px; margin: 0 auto; font-size: 1.0625rem; line-height: 1.75; color: var(--mkt-text, #1e293b); overflow-wrap: anywhere; }
.mkt-blog__body p { margin: 0 0 1.1em; }
.mkt-blog__body h2, .mkt-blog__body h3 { color: var(--mkt-heading, #0f172a); letter-spacing: -0.015em; margin: 1.6em 0 0.6em; }
.mkt-blog__body img { max-width: 100%; height: auto; border-radius: 6px; }
.mkt-blog__body a { color: var(--mkt-primary, #2563eb); }
.mkt-blog__body ul, .mkt-blog__body ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.mkt-blog__body blockquote { border-left: 3px solid var(--mkt-border, #e2e8f0); margin: 0 0 1.1em; padding: 2px 0 2px 18px; color: var(--mkt-text-muted, #64748b); }
.mkt-blog__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 0.9375rem; }
.mkt-blog__body th, .mkt-blog__body td { border: 1px solid var(--mkt-border, #e2e8f0); padding: 8px 12px; text-align: left; }
.mkt-blog__body th { background: var(--mkt-surface, #f8fafc); color: var(--mkt-heading, #0f172a); }
.mkt-blog__body pre { background: #0f172a; color: #e2e8f0; padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 0.875rem; }
.mkt-blog__related { border-top: 1px solid var(--mkt-border, #e2e8f0); padding: 36px 0 56px; }
.mkt-blog__related-title { font-size: 1.25rem; font-weight: 800; color: var(--mkt-heading, #0f172a); margin: 0 0 20px; }
@media (max-width: 991.98px) {
  .mkt-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkt-blog__hero-inner { flex-direction: column; align-items: stretch; }
  .mkt-blog__search { min-width: 0; }
}
@media (max-width: 575.98px) {
  .mkt-blog__grid { grid-template-columns: 1fr; gap: 18px; }
  .mkt-blog__search { flex-wrap: wrap; padding: 8px; }
  .mkt-blog__search input { flex: 1 1 100%; order: 2; padding: 10px 8px; }
  .mkt-blog__search svg { display: none; }
  .mkt-blog__search-btn { flex: 1 1 100%; }
  .mkt-blog__article { padding-top: 18px; }
}
/* ==========================================================================   PDP — Recently Viewed strip now hosts the homepage product card   (x-product-card -> storefront.partials.mkt-product-card). Keeps the   legacy horizontal-scroll compact layout: fixed-width cards in a row,   no wrap, thin scrollbar. Legacy .mkt-pdp-recently__* mini-card rules   above are dead (markup replaced) but left in place untouched.   Desktop hover-zoom lives in the gallery block near .pd-gallery-main.   ========================================================================== */.mkt-pdp-recently {
  gap: 14px;
  padding-bottom: 10px;
}
.mkt-pdp-recently > .mkt-pd {
  flex: 0 0 190px;
  min-width: 0;
  scroll-snap-align: start;
}
.mkt-pdp-recently::-webkit-scrollbar {
  height: 6px;
}
.mkt-pdp-recently::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}
@media (max-width: 991.98px) {
  .mkt-pdp-recently > .mkt-pd {
    flex-basis: 170px;
  }
}
@media (max-width: 575.98px) {
  .mkt-pdp-recently {
    gap: 12px;
  }
  .mkt-pdp-recently > .mkt-pd {
    flex-basis: 150px;
  }
}