/** Shopify CDN: Minification failed

Line 15620:12 Unexpected "@keyframes"
Line 15621:2 Unexpected "0%"
Line 15622:2 Unexpected "100%"

**/
/* ====================================================================
   JoCell — Cart Design System
   Brand: Cart (كارت) — Every Thing.. Every Where
   Lead with Orange (#FD572A). Reserve Lime (#D9FF03) for CTAs only.
   ==================================================================== */

/* ---------- Brand Tokens ---------- */
:root {
  /* Brand colors */
  --cart-orange:       #FD572A;
  --cart-orange-soft:  #FF8A4C;
  --cart-violet:       #4E24B5;
  --cart-violet-deep:  #2D1370;
  --cart-lime:         #D9FF03;
  --cart-yellow:       #FFB72A;
  --cart-dark:         #201F1F;
  --cart-cloud:        #EFEFEF;
  --cart-white:        #FFFFFF;
  --cart-black:        #000000;

  /* Tonal grays */
  --cart-gray-900: #201F1F;
  --cart-gray-700: #4A4848;
  --cart-gray-500: #6B6969;
  --cart-gray-300: #C9C7C7;
  --cart-gray-100: #EFEFEF;
  --cart-gray-50:  #F7F7F7;

  /* Semantic */
  --color-bg:            var(--cart-white);
  --color-bg-soft:       var(--cart-cloud);
  --color-bg-alt:        var(--cart-cloud);
  --color-surface:       var(--cart-white);
  --color-surface-2:     var(--cart-gray-50);
  --color-surface-3:     var(--cart-cloud);
  --color-on-surface:    var(--cart-dark);
  --color-on-dark:       var(--cart-white);

  --color-text:           var(--cart-dark);
  --color-text-secondary: var(--cart-gray-700);
  --color-text-muted:     var(--cart-gray-500);
  --color-text-inverse:   var(--cart-white);

  --color-primary:       var(--cart-orange);
  --color-primary-dark:  #E04015;
  --color-primary-light: #FFE8DD;
  --color-on-primary:    var(--cart-white);
  --color-secondary:     var(--cart-violet);
  --color-secondary-light: #ECE6FA;
  --color-on-secondary:  var(--cart-white);
  --color-accent:        var(--cart-orange);
  --color-accent-dark:   #E04015;
  --color-accent-light:  #FFE8DD;

  --color-border:        rgba(32, 31, 31, 0.10);
  --color-border-strong: rgba(32, 31, 31, 0.20);
  --color-divider:       rgba(32, 31, 31, 0.06);

  --color-success: #1FAE6A;
  --color-success-bg: #d1fae5;
  --color-warning: #FFB72A;
  --color-warning-bg: #FFF4E0;
  --color-danger:  #E5283C;
  --color-danger-bg: #FFE4E6;
  --color-info:    var(--cart-violet);

  /* Brand gradients */
  --cart-gradient-hero:
    linear-gradient(135deg, #FD572A 0%, #FD572A 35%, #4E24B5 65%, #D9FF03 100%);
  --cart-gradient-orange:
    linear-gradient(135deg, #FD572A 0%, #FF8A4C 100%);
  --cart-gradient-violet:
    linear-gradient(135deg, #4E24B5 0%, #2D1370 100%);
  --cart-gradient-sunset:
    linear-gradient(135deg, #FD572A 0%, #FFB72A 50%, #D9FF03 100%);

  /* Shadows — soft, low opacity */
  --cart-shadow-card: 0 4px 20px rgba(32, 31, 31, 0.08);
  --cart-shadow-md:   0 8px 28px rgba(32, 31, 31, 0.12);
  --cart-shadow-lg:   0 18px 48px rgba(32, 31, 31, 0.18);
  --cart-shadow-cta:  0 6px 16px rgba(253, 87, 42, 0.35);
  --cart-shadow-cta-lime: 0 6px 16px rgba(217, 255, 3, 0.45);
  --cart-shadow-cta-violet: 0 6px 16px rgba(78, 36, 181, 0.35);
  --shadow-xs: 0 1px 2px rgba(32, 31, 31, 0.04);
  --shadow-sm: var(--cart-shadow-card);
  --shadow-md: var(--cart-shadow-md);
  --shadow-lg: var(--cart-shadow-lg);
  --shadow-xl: var(--cart-shadow-lg);

  /* Radii — pill buttons, 16-24 cards */
  --cart-radius-sm:   8px;
  --cart-radius-md:  16px;
  --cart-radius-lg:  24px;
  --cart-radius-xl:  32px;
  --cart-radius-pill: 999px;
  --radius-xs:       6px;
  --radius-sm:       8px;
  --radius-md:      12px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-2xl:     32px;
  --radius-full:   999px;

  /* Type — Inter for Latin, IBM Plex Sans Arabic for Arabic */
  --cart-font-ar: 'Ping AR', 'IBM Plex Sans Arabic', 'Tajawal', 'Cairo', sans-serif;
  --cart-font-en: 'Ping', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --cart-font-display: var(--cart-font-en);
  --font-body: var(--cart-font-ar);
  --font-heading: var(--cart-font-ar);
  --font-numeric: var(--cart-font-en);

  /* Weights */
  --cart-w-light:  300;
  --cart-w-medium: 500;
  --cart-w-bold:   700;
  --cart-w-heavy:  900;

  /* Type scale */
  --cart-fs-display-xl: 80px;
  --cart-fs-display-lg: 56px;
  --cart-fs-h1:         40px;
  --cart-fs-h2:         30px;
  --cart-fs-h3:         22px;
  --cart-fs-body-lg:    18px;
  --cart-fs-body:       16px;
  --cart-fs-caption:    13px;
  --cart-fs-cta:        15px;
  --fs-xs:    13px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   40px;
  --fs-4xl:   56px;

  /* Line heights */
  --cart-lh-tight:   1.05;
  --cart-lh-snug:    1.2;
  --cart-lh-normal:  1.5;
  --cart-lh-relaxed: 1.65;

  /* Tracking */
  --cart-tracking-display: -0.02em;
  --cart-tracking-tight:   -0.01em;
  --cart-tracking-normal:   0;
  --cart-tracking-wide:     0.04em;

  /* Spacing — 8px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* Layout */
  --page-width: 1280px;
  --header-h: 72px;
  --announcement-h: 36px;
  --bottom-nav-h: 64px;

  /* Z layers — Clear stacking hierarchy
     1   Base content
     50  Sticky elements (header on scroll)
     90  WhatsApp float (below bottom-nav so it doesn't cover ATC bar)
     100 Mobile ATC bar (above whatsapp, below bottom-nav)
     150 Bottom nav (always on top of content + atc)
     300 Drawers (cart, side menu, mobile purchase) — must be above bottom-nav
     400 Modals (zoom, size guide, cashback)
     500 Toast notifications
   */
  --z-base: 0;
  --z-sticky: 50;
  --z-fixed: 90;
  --z-atc-bar: 100;
  --z-bottom-nav: 150;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Motion */
  --cart-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --cart-ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --cart-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cart-dur-fast: 120ms;
  --cart-dur-base: 200ms;
  --cart-dur-slow: 360ms;
  --t-fast:  120ms var(--cart-ease-out);
  --t-base:  200ms var(--cart-ease-out);
  --t-slow:  360ms var(--cart-ease-out);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--cart-fs-body);
  font-weight: var(--cart-w-light);
  line-height: var(--cart-lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  text-rendering: optimizeLegibility;
}
[dir="rtl"] body, body[dir="rtl"] {
  font-family: var(--cart-font-ar);
}
/* ── Directional icon flip (RTL) ──
   chevron-end / arrow-end SVGs carry inline style transform:scaleX(var(--rtl-flip,1)).
   Inline styles beat stylesheet rules, so the ONLY reliable way to mirror these
   "forward/next" arrows for Arabic is to flip the variable here.
   In RTL, "forward" points left, so every chevron-end (slider next, view-all) and
   arrow-end mirrors automatically — one rule, all arrows, no per-block scaleX needed. */
[dir="rtl"] {
  --rtl-flip: -1;
}

img, svg, video, picture { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--cart-orange); }
ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--cart-w-bold);
  line-height: var(--cart-lh-snug);
  color: var(--color-text);
  letter-spacing: var(--cart-tracking-tight);
}
h1, .h1 { font-size: var(--cart-fs-h1); }
h2, .h2 { font-size: var(--cart-fs-h2); }
h3, .h3 { font-size: var(--cart-fs-h3); }

.display-xl, .hero-numeral {
  font-family: var(--cart-font-display);
  font-weight: var(--cart-w-heavy);
  font-size: var(--cart-fs-display-xl);
  line-height: var(--cart-lh-tight);
  letter-spacing: var(--cart-tracking-display);
}
.display-lg {
  font-family: var(--cart-font-display);
  font-weight: var(--cart-w-heavy);
  font-size: var(--cart-fs-display-lg);
  line-height: var(--cart-lh-tight);
  letter-spacing: var(--cart-tracking-display);
}

/* Numerals — always Western, tabular */
.num, .price, .nums, .nums-tabular, [data-nums] {
  font-family: var(--font-numeric);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}
[dir="rtl"] .price-amount, [dir="rtl"] [data-price] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Selection */
::selection {
  background: var(--cart-orange);
  color: white;
}

/* ---------- Accessibility ---------- */
.visually-hidden {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  border: 0;
}
.skip-to-content-link {
  position: absolute;
  top: -40px;
  inset-inline-start: 0;
  background: var(--cart-orange);
  color: white;
  padding: 12px 20px;
  z-index: var(--z-modal);
  border-radius: 0 0 var(--cart-radius-md) 0;
  font-weight: var(--cart-w-bold);
}
.skip-to-content-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid rgba(253, 87, 42, 0.4);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Layout ---------- */
.page-width, .container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .page-width, .container { padding-inline: var(--space-7); }
}
@media (min-width: 1280px) {
  /* On desktop: use 80% of viewport, capped by --page-width setting */
  .page-width, .container {
    max-width: min(80vw, var(--page-width));
  }
}
@media (min-width: 1920px) {
  /* On very large screens: still respect --page-width for readability */
  .page-width, .container {
    max-width: var(--page-width);
  }
}
.section-padding { padding-block: clamp(2.5rem, 5vw, 4rem); }
.grid { display: grid; gap: var(--space-4); }
.flex { display: flex; gap: var(--space-3); }

/* ---------- Buttons (PILL) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 26px;
  border: none;
  border-radius: var(--cart-radius-pill);
  font-family: var(--cart-font-en);
  font-weight: var(--cart-w-bold);
  font-size: var(--cart-fs-cta);
  letter-spacing: var(--cart-tracking-tight);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  min-height: 48px;
  transition: transform var(--cart-dur-fast) var(--cart-ease-spring),
              box-shadow var(--cart-dur-base) var(--cart-ease-out),
              background var(--cart-dur-base);
}
[dir="rtl"] .btn { font-family: var(--cart-font-ar); }
.btn:active { transform: scale(0.96); }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary,
.btn-orange {
  background: var(--cart-orange);
  color: var(--cart-white);
}
.btn--primary:hover,
.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: var(--cart-shadow-cta);
  color: var(--cart-white);
}

.btn--accent,
.btn-lime {
  background: var(--cart-lime);
  color: var(--cart-dark);
  box-shadow: var(--cart-shadow-cta);
  font-weight: var(--cart-w-heavy);
}
.btn--accent:hover,
.btn-lime:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(253, 87, 42, 0.42);
  color: var(--cart-dark);
}

.btn--secondary,
.btn-violet {
  background: var(--cart-violet);
  color: var(--cart-white);
}
.btn--secondary:hover,
.btn-violet:hover {
  transform: translateY(-2px);
  box-shadow: var(--cart-shadow-cta-violet);
  color: var(--cart-white);
}

.btn--ghost,
.btn-ghost {
  background: transparent;
  color: var(--cart-dark);
  border: 2px solid var(--cart-dark);
  padding: 12px 24px;
}
.btn--ghost:hover,
.btn-ghost:hover {
  background: var(--cart-dark);
  color: var(--cart-white);
}

.btn--outline {
  background: transparent;
  color: var(--cart-orange);
  border: 2px solid var(--cart-orange);
  padding: 12px 24px;
}
.btn--outline:hover {
  background: var(--cart-orange);
  color: var(--cart-white);
}

.btn-ghost-on-dark {
  background: transparent;
  color: var(--cart-white);
  border: 2px solid var(--cart-white);
  padding: 12px 24px;
}
.btn-ghost-on-dark:hover {
  background: var(--cart-white);
  color: var(--cart-dark);
}

.btn--lg, .btn-lg { padding: 18px 36px; font-size: 17px; min-height: 56px; }
.btn--sm, .btn-sm { padding: 9px 16px; font-size: 13px; min-height: 36px; }
.btn--block { width: 100%; }
.btn--icon { width: 48px; height: 48px; padding: 0; border-radius: var(--cart-radius-pill); }

/* ---------- Forms ---------- */
.form-input, .form-select, .form-textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: var(--cart-fs-body);
  font-weight: var(--cart-w-medium);
  color: var(--cart-dark);
  background: var(--cart-white);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--cart-radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 50px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--cart-orange);
}
.form-input::placeholder { color: var(--cart-gray-500); font-weight: var(--cart-w-light); }
.form-label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
  text-transform: uppercase;
  letter-spacing: var(--cart-tracking-wide);
}

/* ---------- Cards ---------- */
.card {
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
  transition: transform var(--cart-dur-base) var(--cart-ease-out);
}
.card.hoverable:hover, .card:hover {
  transform: translateY(-4px);
}

/* ---------- Badges & Pills ---------- */
.pill, .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--cart-radius-pill);
  padding: 6px 14px;
  font-size: 12px;
  font-weight: var(--cart-w-bold);
  letter-spacing: 0;
}

.discount-tag,
.badge--sale {
  background: var(--cart-lime);
  color: var(--cart-dark);
  font-weight: var(--cart-w-heavy);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 2px solid var(--cart-violet);
  letter-spacing: -0.01em;
  font-family: var(--cart-font-en);
}
.badge--new {
  background: var(--cart-violet);
  color: var(--cart-white);
  font-weight: var(--cart-w-bold);
}
.badge--bestseller {
  background: var(--cart-orange);
  color: var(--cart-white);
  font-weight: var(--cart-w-bold);
}
.badge--soldout {
  background: var(--cart-gray-500);
  color: var(--cart-white);
  font-weight: var(--cart-w-bold);
}
.badge--cashback {
  background: var(--color-primary-light);
  color: var(--cart-orange);
  font-weight: var(--cart-w-bold);
}

/* ---------- Announcement Bar ---------- */
.announcement-bar {
  background: var(--cart-dark);
  color: var(--cart-white);
  font-size: var(--cart-fs-caption);
  padding-block: 10px;
  text-align: center;
  font-weight: var(--cart-w-medium);
  letter-spacing: var(--cart-tracking-tight);
}
.announcement-bar a {
  color: var(--cart-lime);
  font-weight: var(--cart-w-bold);
  text-decoration: none;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  background: rgba(255, 255, 255, 0.92);
  border-block-end: 1px solid var(--color-border);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
  min-height: var(--header-h);
}
.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.header-logo img { max-height: 40px; width: auto; }
.header-logo-text {
  font-family: var(--cart-font-en);
  font-weight: var(--cart-w-heavy);
  font-size: 28px;
  letter-spacing: -0.03em;
  color: var(--cart-orange);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-logo-text::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cart-lime);
  border-radius: 50%;
  display: inline-block;
}

/* .header-search styles in HEADER REDESIGN section below */
.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}
.header-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--cart-radius-pill);
  color: var(--cart-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.header-icon-btn:hover {
  background: var(--cart-cloud);
  color: var(--cart-orange);
}
/* SVG icon — always visible, never hidden */
.header-icon-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: block;
}
/* Notification-style badge — small circular badge on top-right of icon */
.header-icon-btn .badge-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 900;
  font-family: var(--cart-font-en);
  background: var(--cart-orange);
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cart-white);
  line-height: 1;
  box-shadow: 0 2px 6px rgba(253, 87, 42, 0.4);
  pointer-events: none;
  z-index: 2;
  letter-spacing: -0.02em;
}
/* Hide badge when count is 0 */
.header-icon-btn[data-cart-count="0"] .badge-count,
.header-icon-btn[data-wishlist-count="0"] .badge-count {
  display: none;
}
/* Cart trigger highlight handled by .header-icon-btn--cart (violet design) */
/* Pulse animation when count increases (set via JS) */
@keyframes badge-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.header-icon-btn .badge-count.is-pulsing {
  animation: badge-pulse 0.5s var(--cart-ease-out);
}

.header-nav {
  display: none;
  margin-inline-end: auto;
}
@media (min-width: 1024px) {
  .header-nav { display: flex; gap: 4px; }
}
.header-nav a {
  padding: 8px 14px;
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  border-radius: var(--cart-radius-pill);
}
.header-nav a:hover { background: var(--cart-cloud); color: var(--cart-orange); }
.header-nav a.active { color: var(--cart-orange); }

.header-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--cart-radius-pill);
}
.header-menu-btn svg { width: 24px; height: 24px; }
@media (min-width: 1024px) { .header-menu-btn { display: none; } }

/* Categories sub-bar */
.header-categories {
  background: var(--cart-white);
  border-block-end: 1px solid var(--color-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.header-categories::-webkit-scrollbar { display: none; }
.header-categories-inner {
  display: flex;
  gap: 4px;
  padding-block: 10px;
  white-space: nowrap;
}
.header-categories a {
  padding: 8px 14px;
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  color: var(--cart-gray-700);
  border-radius: var(--cart-radius-pill);
  flex-shrink: 0;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.header-categories a:hover {
  background: var(--color-primary-light);
  color: var(--cart-orange);
}

/* ---------- HERO BANNER (Cart signature gradient) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: var(--cart-gradient-hero);
  background-size: 200% 200%;
  animation: hero-gradient-pan 16s ease-in-out infinite;
  color: var(--cart-white);
  margin-block: var(--space-6) var(--space-8);
}
@keyframes hero-gradient-pan {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (min-width: 768px) {
  .hero {
    margin-inline: var(--space-7);
  }
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 56px 32px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) {
  .hero-inner {
    padding: 56px 60px;
    flex-direction: row;
    align-items: center;
    gap: var(--space-7);
  }
}
.hero-content {
  flex: 1;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  padding: 6px 14px;
  border-radius: var(--cart-radius-pill);
  font-size: 13px;
  font-weight: var(--cart-w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-block-end: 18px;
  font-family: var(--cart-font-en);
}
[dir="rtl"] .hero-eyebrow { font-family: var(--cart-font-ar); letter-spacing: 0; }
.hero-title {
  font-family: var(--cart-font-en);
  font-weight: var(--cart-w-heavy);
  font-size: clamp(40px, 8vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
[dir="rtl"] .hero-title { font-family: var(--cart-font-ar); line-height: 1.1; }
.hero-subtitle {
  font-size: 18px;
  font-weight: var(--cart-w-medium);
  opacity: 0.95;
  max-width: 460px;
  margin-block-end: 28px;
  line-height: 1.5;
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Hero right side — big numeral */
.hero-visual {
  position: relative;
  display: none;
}
@media (min-width: 768px) {
  .hero-visual {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
}
.hero-numeral-big {
  font-family: var(--cart-font-en);
  font-weight: var(--cart-w-heavy);
  font-size: clamp(120px, 20vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--cart-white);
  text-shadow: 0 8px 0 rgba(32, 31, 31, 0.18);
}
.hero-off-tag {
  background: var(--cart-lime);
  color: var(--cart-dark);
  padding: 8px 16px;
  border-radius: 8px;
  font-family: var(--cart-font-en);
  font-weight: var(--cart-w-heavy);
  font-size: 22px;
  border: 3px solid var(--cart-violet);
  margin-block-start: 24px;
  transform: rotate(6deg);
}

/* Decorative geometric blocks */
.hero-block {
  position: absolute;
  z-index: 1;
}
.hero-block-1 {
  inset-inline-start: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  background: rgba(78, 36, 181, 0.4);
  border-radius: 28px;
  transform: rotate(18deg);
}
.hero-block-2 {
  inset-inline-start: 120px;
  top: -30px;
  width: 80px;
  height: 80px;
  background: var(--cart-lime);
  border-radius: 18px;
  transform: rotate(-12deg);
  opacity: 0.85;
}

/* ---------- Trust Bar ---------- */
.trust-bar {
  background: var(--trust-bg, var(--cart-white));
  border-block: 1px solid var(--color-border);
  padding-block: var(--trust-pad-t, 24px) var(--trust-pad-b, 24px);
}
/* Layout variants */
.trust-bar--icons_top .trust-item { flex-direction: column; text-align: center; align-items: center; }
.trust-bar--compact .trust-item-sub { display: none; }
.trust-bar--compact .trust-grid { gap: 12px; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
}
@media (min-width: 768px) {
  .trust-grid { grid-template-columns: repeat(4, 1fr); }
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-inline-start: var(--space-3);
  position: relative;
}
.trust-item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block: 4px;
  width: 3px;
  border-radius: 3px;
  background: var(--cart-orange);
}
.trust-item-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  color: var(--cart-orange);
}
.trust-item-icon svg { width: 100%; height: 100%; }
.trust-item-title {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  line-height: 1.3;
  color: var(--cart-dark);
}
.trust-item-sub {
  font-size: 12px;
  color: var(--cart-gray-500);
  font-weight: var(--cart-w-light);
  margin-block-start: 2px;
}

/* ---------- Section heading ---------- */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}
.section-title {
  font-family: var(--font-heading);
  font-size: var(--cart-fs-h2);
  font-weight: var(--cart-w-bold);
  letter-spacing: -0.01em;
  margin: 0;
}
.section-title-link {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  color: var(--cart-orange);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap var(--t-fast);
}
.section-title-link:hover { gap: 8px; }

/* ---------- Category Tiles ---------- */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(var(--cat-cols-m, 2), 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .category-tiles { grid-template-columns: repeat(var(--cat-cols-t, 3), 1fr); }
}
@media (min-width: 1024px) {
  .category-tiles { grid-template-columns: repeat(var(--cat-cols-d, 6), 1fr); }
}
.category-tiles-section { padding-block: var(--cat-pad-t, 48px) var(--cat-pad-b, 48px); }
.category-tiles-section .category-tile-img { border-radius: var(--cat-radius, 16px); }
.category-tile-count {
  display: inline-block;
  margin-inline-start: 4px;
  font-size: 0.75em;
  color: var(--color-text-muted);
  font-weight: 400;
}
.category-tiles--icon_only .category-tile-img { display: none; }
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  text-align: center;
  transition: transform var(--cart-dur-base) var(--cart-ease-out);
}
.category-tile:hover {
  transform: translateY(-4px);
  color: inherit;
}
.category-tile-img {
  width: 72px; height: 72px;
  border-radius: var(--cart-radius-md);
  background: var(--cart-cloud);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.category-tile-img img { width: 70%; height: 70%; object-fit: contain; }
.category-tile-name {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
}

/* ---------- Product Card ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
  transition: transform var(--cart-dur-base) var(--cart-ease-out);
}
.product-card:hover {
  transform: translateY(-4px);
}
.product-card-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cart-white);
  overflow: hidden;
}
.product-card-image {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--space-3);
  transition: transform var(--cart-dur-slow) var(--cart-ease-out);
}
.product-card:hover .product-card-image { transform: scale(1.04); }

.product-card-badges {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.product-card-wishlist {
  will-change: transform, opacity;
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  width: 34px; height: 34px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-gray-500);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-card-wishlist:hover {
  color: var(--cart-orange);
  transform: scale(1.1);
}
.product-card-wishlist[aria-pressed="true"] { color: var(--cart-orange); }
.product-card-wishlist svg { width: 18px; height: 18px; }

.product-card-content {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.product-card-vendor {
  font-size: 11px;
  color: var(--cart-gray-500);
  font-weight: var(--cart-w-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.product-card-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cart-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;
  letter-spacing: -0.005em;
}
/* Arabic glyphs are taller (hamza, dots) — give extra line-height so the top
   of the first line isn't clipped by overflow:hidden + line-clamp. */
[dir="rtl"] .product-card-title {
  line-height: 1.7;
  min-height: 3.4em;
}
.product-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--cart-gray-700);
  font-weight: var(--cart-w-medium);
}
.product-card-rating svg {
  width: 14px; height: 14px;
  color: var(--cart-yellow);
  fill: currentColor;
}
.product-card-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-start;
}
/* RTL: price row starts from the right edge; money spans stay LTR internally */
[dir="rtl"] .product-card-price-row { justify-content: flex-start; }
.product-card-price-row > span { text-align: start; }
.product-card-price {
  font-family: var(--cart-font-en);
  font-size: 18px;
  font-weight: 900;
  color: var(--cart-dark);
  letter-spacing: -0.015em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* When on sale: price becomes brand orange to draw attention */
.product-card:has(.product-card-compare) .product-card-price {
  color: var(--cart-orange);
}
.product-card-compare {
  font-family: var(--cart-font-en);
  font-size: 13px;
  color: var(--cart-gray-500);
  text-decoration: line-through;
  text-decoration-color: var(--cart-gray-500);
  text-decoration-thickness: 1.5px;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-weight: 600;
  opacity: 0.75;
}
.product-card-discount {
  background: var(--cart-lime);
  color: var(--cart-dark);
  padding: 3px 8px;
  border-radius: 6px;
  border: 2px solid var(--cart-violet);
  font-family: var(--cart-font-en);
  font-size: 11px;
  font-weight: var(--cart-w-heavy);
  letter-spacing: -0.01em;
}
.product-card-delivery {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-block-start: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: var(--cart-w-bold);
  background: var(--cart-cloud);
  color: var(--cart-dark);
  border-radius: var(--cart-radius-pill);
}
.product-card-delivery svg { width: 12px; height: 12px; }

/* ---------- Sale Strip ---------- */
.sale-strip {
  background: var(--cart-orange);
  color: var(--cart-white);
  padding-block: var(--space-5);
  position: relative;
  overflow: hidden;
}
.sale-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
@media (max-width: 749px) {
  .sale-strip-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
  .sale-strip-inner > * { width: 100%; }
  .sale-strip-inner .btn { max-width: 320px; margin-inline: auto; }
}
.sale-strip-eyebrow {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-block-end: 4px;
}
.sale-strip-text {
  font-family: var(--cart-font-en);
  font-size: 22px;
  font-weight: var(--cart-w-heavy);
  letter-spacing: -0.01em;
}
[dir="rtl"] .sale-strip-text { font-family: var(--cart-font-ar); }
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.countdown-unit {
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  border-radius: var(--cart-radius-md);
  font-weight: var(--cart-w-heavy);
  min-width: 48px;
  text-align: center;
  backdrop-filter: blur(10px);
  font-size: 18px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--cart-dark);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--space-9) var(--space-7);
  margin-block-start: var(--space-10);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  margin-block-end: var(--space-7);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.footer-brand-name {
  font-family: var(--cart-font-en);
  font-size: 28px;
  font-weight: var(--cart-w-heavy);
  letter-spacing: -0.03em;
  color: var(--cart-orange);
  margin-block-end: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-brand-name::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--cart-lime);
  border-radius: 50%;
  display: inline-block;
}
.footer-brand-desc {
  font-size: var(--cart-fs-caption);
  color: rgba(255, 255, 255, 0.65);
  max-width: 320px;
  line-height: 1.6;
  margin-block-end: var(--space-4);
}
.footer-heading {
  font-size: 12px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-white);
  margin-block-end: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.footer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-list a {
  font-size: var(--cart-fs-caption);
  color: rgba(255, 255, 255, 0.65);
  font-weight: var(--cart-w-medium);
  transition: color var(--t-fast);
}
.footer-list a:hover { color: var(--cart-lime); }
.footer-social { display: flex; gap: var(--space-2); }
.footer-social a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cart-radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.footer-social a:hover {
  background: var(--cart-orange);
  color: white;
  transform: translateY(-2px);
}
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  padding-block-start: var(--space-5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-payments {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}
.footer-payment-icon {
  height: 26px;
  padding: 5px 10px;
  background: white;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: var(--cart-w-heavy);
  font-family: var(--cart-font-en);
  color: var(--cart-dark);
  letter-spacing: -0.01em;
}

/* ---------- Cart Drawer ---------- */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  pointer-events: none;
  visibility: hidden;
}
.cart-drawer.is-open { pointer-events: auto; visibility: visible; }
.cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 31, 31, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cart-dur-base);
}
.cart-drawer.is-open .cart-drawer-backdrop { opacity: 1; }
.cart-drawer-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 100%;
  max-width: 440px;
  background: var(--cart-white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--cart-dur-slow) var(--cart-ease-out);
}
[dir="rtl"] .cart-drawer-panel {
  transform: translateX(-100%);
}
.cart-drawer.is-open .cart-drawer-panel { transform: translateX(0); }

.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}
.cart-drawer-title {
  font-size: 18px;
  font-weight: var(--cart-w-bold);
}
.cart-drawer-shipping-bar {
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-light);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-medium);
}
.cart-drawer-shipping-progress {
  height: 6px;
  background: white;
  border-radius: var(--cart-radius-pill);
  overflow: hidden;
  margin-block-start: var(--space-2);
}
.cart-drawer-shipping-fill {
  height: 100%;
  background: var(--cart-orange);
  transition: width var(--cart-dur-slow) var(--cart-ease-out);
}
.cart-drawer-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}
.cart-drawer-item {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-divider);
}
.cart-drawer-item:last-child { border-block-end: none; }
.cart-item-image {
  width: 80px; height: 80px;
  border-radius: var(--cart-radius-md);
  background: var(--cart-cloud);
  flex-shrink: 0;
  object-fit: contain;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  line-height: 1.4;
  color: var(--cart-dark);
}
.cart-item-variant {
  font-size: 12px;
  color: var(--cart-gray-500);
  margin-block-start: 2px;
}
.cart-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-2);
}
.cart-item-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--cart-radius-pill);
  overflow: hidden;
}
.cart-item-qty button {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  font-weight: var(--cart-w-bold);
}
.cart-item-qty button:hover { background: var(--cart-cloud); }
.cart-item-qty input {
  width: 32px; height: 32px;
  border: 0;
  text-align: center;
  font-weight: var(--cart-w-bold);
  background: transparent;
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.cart-item-price {
  font-family: var(--cart-font-en);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-heavy);
}
.cart-drawer-empty {
  padding: var(--space-9) var(--space-5);
  text-align: center;
}
.cart-drawer-empty-icon {
  width: 64px; height: 64px;
  color: var(--cart-gray-300);
  margin: 0 auto var(--space-4);
}
.cart-drawer-footer {
  padding: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  background: var(--cart-cloud);
}
.cart-drawer-totals {
  display: flex;
  justify-content: space-between;
  font-family: var(--cart-font-en);
  font-size: 18px;
  font-weight: var(--cart-w-heavy);
  margin-block-end: var(--space-3);
}
.cart-drawer-note {
  font-size: 12px;
  color: var(--cart-gray-500);
  text-align: center;
  margin-block-end: var(--space-3);
}

/* ---------- Bottom Nav (mobile) ---------- */
.bottom-nav {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: var(--z-bottom-nav);
  background: var(--cart-white);
  border-block-start: 1px solid var(--color-border);
  display: flex;
  padding: var(--space-2) 0;
}
@media (min-width: 1024px) { .bottom-nav { display: none; } }
@media (max-width: 1023px) { body { padding-block-end: var(--bottom-nav-h); } }
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block: var(--space-1);
  font-size: 10px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-gray-500);
  position: relative;
}
.bottom-nav-item svg { width: 22px; height: 22px; }
.bottom-nav-item.active { color: var(--cart-orange); }

/* ---------- WhatsApp Float ---------- */
.whatsapp-float {
  position: fixed;
  /* Position uses CSS custom property set dynamically by JS based on ATC bar height */
  inset-block-end: calc(var(--whatsapp-offset, var(--bottom-nav-h)) + var(--space-3));
  inset-inline-end: var(--space-4);
  z-index: var(--z-fixed); /* 90 - below atc-bar (100) and bottom-nav (150) */
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: white;
  border-radius: var(--cart-radius-pill);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  transition: transform var(--t-fast), inset-block-end 0.25s;
  animation: wa-pulse 2s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.08); color: white; }
.whatsapp-float svg { width: 24px; height: 24px; }

/* Desktop: bigger, no bottom-nav stacking needed */
@media (min-width: 1024px) {
  .whatsapp-float {
    inset-block-end: var(--space-5);
    width: 56px;
    height: 56px;
  }
  .whatsapp-float svg { width: 28px; height: 28px; }
}

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.3); }
  50% { box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0); }
}

/* ===================================================================
   PRODUCT PAGE
   =================================================================== */
.product-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .product-page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px;
    gap: var(--space-7);
  }
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--cart-gray-500);
  font-weight: var(--cart-w-medium);
  padding-block: var(--space-3);
}
.breadcrumbs a { color: var(--cart-gray-500); }
.breadcrumbs a:hover { color: var(--cart-orange); }
.breadcrumbs-sep { opacity: 0.4; }
.breadcrumbs-current { color: var(--cart-dark); font-weight: var(--cart-w-bold); }

/* Gallery */
.product-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.product-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
}
.product-gallery-main img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--space-5);
}
.product-gallery-thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block-end: var(--space-1);
}
.product-gallery-thumbs::-webkit-scrollbar { display: none; }
.product-gallery-thumb {
  flex: 0 0 72px;
  height: 72px;
  border: 2px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  overflow: hidden;
  background: var(--cart-white);
  padding: 6px;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery-thumb.active { border-color: var(--cart-orange); }
.product-gallery-zoom-hint {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--cart-radius-pill);
  font-size: 12px;
  font-weight: var(--cart-w-medium);
  color: var(--cart-gray-700);
  pointer-events: none;
}
[dir="rtl"] .product-gallery-zoom-hint { transform: translateX(50%); }
.product-gallery-zoom-hint svg { width: 14px; height: 14px; }

/* Product info */
.product-vendor {
  font-size: 12px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-block-end: var(--space-2);
}
.product-vendor a {
  color: var(--cart-orange);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.product-title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: var(--cart-w-bold);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-block-end: var(--space-3);
}
.product-meta {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
  font-size: var(--cart-fs-caption);
  color: var(--cart-gray-500);
}
.product-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.rating-stars { display: inline-flex; color: var(--cart-yellow); }
.rating-stars svg { width: 16px; height: 16px; fill: currentColor; }

/* Price */
.product-price-block {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
}
.product-price {
  font-family: var(--cart-font-en);
  font-size: 40px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-dark);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.product-compare {
  font-family: var(--cart-font-en);
  font-size: 18px;
  color: var(--cart-gray-500);
  text-decoration: line-through;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.product-savings {
  background: var(--cart-lime);
  color: var(--cart-dark);
  padding: 4px 12px;
  border-radius: 8px;
  border: 2px solid var(--cart-violet);
  font-family: var(--cart-font-en);
  font-size: 13px;
  font-weight: var(--cart-w-heavy);
  letter-spacing: -0.01em;
}

/* Cashback ribbon */
.cashback-ribbon {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-primary-light);
  border: 2px solid var(--cart-orange);
  border-style: dashed;
  border-radius: var(--cart-radius-md);
  margin-block-end: var(--space-4);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cashback-ribbon:hover {
  background: #FFD9C5;
  transform: translateY(-1px);
}
.cashback-ribbon-icon {
  width: 44px; height: 44px;
  background: var(--cart-orange);
  color: white;
  border-radius: var(--cart-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cashback-ribbon-icon svg { width: 22px; height: 22px; }
.cashback-ribbon-text { flex: 1; font-size: var(--cart-fs-caption); }
.cashback-ribbon-text strong {
  font-weight: var(--cart-w-heavy);
  color: var(--cart-dark);
  display: block;
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
[dir="rtl"] .cashback-ribbon-text strong { font-family: var(--cart-font-ar); }
.cashback-ribbon-text span {
  color: var(--cart-gray-700);
  font-size: 12px;
}
.cashback-ribbon-arrow { color: var(--cart-orange); }

/* Limited offer card */
.limited-offer-card {
  border: 2px dashed var(--cart-orange);
  background: linear-gradient(135deg, #FFF8F4 0%, #FFEEE5 100%);
  border-radius: var(--cart-radius-lg);
  padding: var(--space-5);
  margin-block: var(--space-4);
}
.limited-offer-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-danger);
  font-weight: var(--cart-w-heavy);
  margin-block-end: var(--space-2);
}
.limited-offer-body {
  font-size: var(--cart-fs-caption);
  line-height: 1.6;
  margin-block-end: var(--space-3);
}
.limited-offer-body strong {
  color: var(--cart-orange);
  font-weight: var(--cart-w-heavy);
}
.limited-offer-code-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
}
.limited-offer-code-row label {
  font-size: var(--cart-fs-caption);
  color: var(--cart-gray-700);
  font-weight: var(--cart-w-medium);
}
.limited-offer-code {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  background: var(--cart-white);
  border: 2px dashed var(--cart-orange);
  border-radius: var(--cart-radius-md);
  font-family: var(--cart-font-en);
  font-weight: var(--cart-w-heavy);
  color: var(--cart-orange);
  cursor: pointer;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.limited-offer-eta {
  display: block;
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  color: var(--color-success);
  text-align: center;
}
.limited-offer-cta {
  display: block;
  text-align: center;
  font-size: var(--cart-fs-caption);
  color: var(--cart-orange);
  font-weight: var(--cart-w-bold);
}

/* Coupons */
.coupons-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-end: var(--space-4);
}
.coupon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 14px;
  background: var(--cart-cloud);
  border: 2px dashed var(--cart-violet);
  border-radius: var(--cart-radius-md);
  font-size: 12px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.coupon:hover {
  background: var(--cart-white);
  border-color: var(--cart-orange);
}
.coupon-icon {
  width: 24px; height: 24px;
  background: var(--cart-violet);
  color: white;
  border-radius: var(--cart-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}
.coupon-icon svg { width: 14px; height: 14px; }
.coupon-code {
  font-weight: var(--cart-w-heavy);
  font-family: var(--cart-font-en);
  color: var(--cart-orange);
}

/* Variants */
.variants-block { margin-block-end: var(--space-5); }
.variant-group { margin-block-end: var(--space-4); }
.variant-label {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  margin-block-end: var(--space-2);
  color: var(--cart-gray-700);
}
.variant-label strong { color: var(--cart-dark); }
.variant-options { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.variant-option {
  padding: 10px 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--cart-radius-pill);
  background: var(--cart-white);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  cursor: pointer;
  min-width: 60px;
  text-align: center;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.variant-option:hover { border-color: var(--color-border-strong); }
.variant-option.selected {
  border-color: var(--cart-orange);
  background: var(--color-primary-light);
  color: var(--cart-orange);
}
.variant-option.unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* Quantity */
.qty-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.qty-row > .qty-label {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
}
.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--cart-radius-pill);
  overflow: hidden;
}
.qty-stepper button {
  width: 44px; height: 44px;
  font-size: 18px;
  font-weight: var(--cart-w-bold);
}
.qty-stepper button:hover { background: var(--cart-cloud); }
.qty-stepper input {
  width: 56px; height: 44px;
  border: 0;
  text-align: center;
  font-weight: var(--cart-w-heavy);
  background: transparent;
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* Stock indicator */
.stock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--cart-radius-pill);
  font-size: 12px;
  font-weight: var(--cart-w-bold);
}
.stock-indicator.in-stock {
  background: rgba(31, 174, 106, 0.1);
  color: var(--color-success);
}
.stock-indicator.out-stock {
  background: rgba(229, 40, 60, 0.1);
  color: var(--color-danger);
}
.stock-indicator.low-stock {
  background: rgba(255, 183, 42, 0.15);
  color: var(--color-warning);
}
.stock-indicator::before {
  content: '';
  width: 6px; height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

/* Sidebar */
.product-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .product-sidebar {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-3));
    align-self: start;
    /* No max-height + no overflow → sidebar grows with its content, no inner scroll.
       If content is taller than viewport, the WHOLE PAGE scrolls (sidebar stops sticking
       when its bottom edge crosses the viewport, then scrolls naturally with page). */
  }
}
.sidebar-card {
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  padding: var(--space-5);
}
.seller-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-divider);
  margin-block-end: var(--space-4);
}
.seller-avatar {
  width: 48px; height: 48px;
  background: var(--color-primary-light);
  color: var(--cart-orange);
  border-radius: var(--cart-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.seller-name {
  font-weight: var(--cart-w-bold);
  font-size: var(--cart-fs-caption);
}
.seller-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--color-success);
  font-weight: var(--cart-w-bold);
}
.seller-rating svg { width: 14px; height: 14px; fill: currentColor; }

.delivery-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.delivery-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-medium);
}
.delivery-info-item svg {
  width: 18px; height: 18px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-block-start: 2px;
}

/* Governorate */
.governorate-selector {
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
  padding: var(--space-3);
  margin-block-end: var(--space-4);
}
.governorate-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  margin-block-end: var(--space-2);
}
.governorate-label svg {
  width: 16px; height: 16px;
  color: var(--cart-orange);
}
.governorate-result {
  margin-block-start: var(--space-2);
  padding: 8px 12px;
  background: white;
  border-radius: var(--cart-radius-md);
  font-size: 12px;
  font-weight: var(--cart-w-medium);
  display: none;
}
.governorate-result.visible { display: block; }
.governorate-result.same-day {
  background: rgba(31, 174, 106, 0.1);
  color: var(--color-success);
  font-weight: var(--cart-w-bold);
}

/* Tabs */
.product-tabs { margin-block-start: var(--space-7); }
.product-tabs-nav {
  display: flex;
  gap: 0;
  border-block-end: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
  margin-block-end: var(--space-5);
}
.product-tabs-nav::-webkit-scrollbar { display: none; }
.product-tab-btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--cart-fs-body);
  font-weight: var(--cart-w-bold);
  color: var(--cart-gray-500);
  border-block-end: 3px solid transparent;
  margin-block-end: -1px;
  white-space: nowrap;
}
.product-tab-btn.active {
  color: var(--cart-orange);
  border-block-end-color: var(--cart-orange);
}
.product-tab-content { display: none; }
.product-tab-content.active { display: block; }
.product-description {
  line-height: 1.7;
  color: var(--cart-gray-700);
  font-weight: var(--cart-w-light);
}
.product-description h2, .product-description h3 {
  color: var(--cart-dark);
  margin-block: var(--space-5) var(--space-3);
}
.product-description ul {
  padding-inline-start: var(--space-5);
  list-style: disc;
  margin-block: var(--space-3);
}
.product-description li { margin-block: var(--space-1); }

/* Sticky ATC (mobile) */
.sticky-atc {
  position: fixed;
  inset-block-end: var(--bottom-nav-h);
  inset-inline: 0;
  z-index: var(--z-fixed);
  background: var(--cart-white);
  border-block-start: 1px solid var(--color-border);
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transform: translateY(100%);
  transition: transform var(--cart-dur-base) var(--cart-ease-out);
  box-shadow: 0 -4px 16px rgba(32, 31, 31, 0.06);
}
.sticky-atc.is-visible { transform: translateY(0); }
.sticky-atc-price {
  font-family: var(--cart-font-en);
  font-size: 17px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-dark);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
@media (min-width: 1024px) { .sticky-atc { display: none !important; } }

/* ===================================================================
   COLLECTION
   =================================================================== */
.collection-header { padding-block: var(--space-7) var(--space-5); }
.collection-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: var(--cart-w-bold);
  letter-spacing: -0.02em;
  margin-block-end: var(--space-2);
}
.collection-desc { color: var(--cart-gray-700); max-width: 700px; }

.collection-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
  margin-block-end: var(--space-5);
  border-block: 1px solid var(--color-border);
}
.collection-count {
  font-size: var(--cart-fs-caption);
  color: var(--cart-gray-700);
  font-weight: var(--cart-w-medium);
}
.collection-sort { display: flex; align-items: center; gap: var(--space-2); }
.collection-sort select {
  padding: 8px 36px 8px 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--cart-radius-pill);
  background: var(--cart-white);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  cursor: pointer;
}

.facets {
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  padding: var(--space-5);
  align-self: start;
}
.facet-group {
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-divider);
}
.facet-group:last-child { border-block-end: none; }
.facet-heading {
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  margin-block-end: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.facet-options { display: flex; flex-direction: column; gap: var(--space-2); }
.facet-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-medium);
  cursor: pointer;
}
.facet-option input[type="checkbox"] {
  accent-color: var(--cart-orange);
  width: 16px; height: 16px;
}
.facet-option-count {
  color: var(--cart-gray-500);
  font-size: 12px;
  margin-inline-start: auto;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding-block: var(--space-7);
}
.pagination a, .pagination span {
  min-width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border-radius: var(--cart-radius-pill);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  color: var(--cart-gray-700);
  border: 2px solid var(--color-border);
  font-family: var(--cart-font-en);
}
.pagination a:hover {
  background: var(--cart-cloud);
  color: var(--cart-orange);
  border-color: var(--cart-orange);
}
.pagination .current {
  background: var(--cart-orange);
  color: white;
  border-color: var(--cart-orange);
}

/* ===================================================================
   CART PAGE
   =================================================================== */
.cart-page-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .cart-page-layout { grid-template-columns: 1fr 360px; }
}
.cart-table {
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
}
.cart-table-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--space-4);
  padding: var(--space-5);
  border-block-end: 1px solid var(--color-divider);
  align-items: center;
}
.cart-table-row:last-child { border-block-end: none; }
.cart-row-image {
  width: 100px; height: 100px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
  object-fit: contain;
  padding: 8px;
}
.cart-summary {
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  padding: var(--space-6);
}
@media (min-width: 1024px) {
  .cart-summary {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-3));
  }
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding-block: var(--space-2);
  font-weight: var(--cart-w-medium);
}
.cart-summary-row.total {
  font-family: var(--cart-font-en);
  font-size: 22px;
  font-weight: var(--cart-w-heavy);
  padding-block-start: var(--space-3);
  margin-block-start: var(--space-3);
  border-block-start: 2px solid var(--color-border);
  letter-spacing: -0.01em;
}
[dir="rtl"] .cart-summary-row.total { font-family: var(--cart-font-ar); }
.cart-summary-divider {
  height: 1px;
  background: var(--color-divider);
  margin-block: var(--space-3);
}

.cart-discount {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}
.cart-discount input { flex: 1; }

/* ===================================================================
   FAQ
   =================================================================== */
.faq-item {
  background: var(--cart-white, #fff) !important;
  border: 1.5px solid var(--color-border, #E5E5E5) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  margin-top: 10px;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-5) 0;
  font-size: var(--cart-fs-body-lg);
  font-weight: var(--cart-w-bold);
  text-align: start;
  cursor: pointer;
  gap: var(--space-3);
}
.faq-question svg {
  width: 24px; height: 24px;
  flex-shrink: 0;
  transition: transform var(--cart-dur-base) var(--cart-ease-out);
  color: var(--cart-orange);
}
.faq-question[aria-expanded="true"] svg {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--cart-dur-slow) var(--cart-ease-out);
}
.faq-answer-inner {
  padding-block-end: var(--space-5);
  color: var(--cart-gray-700);
  line-height: 1.7;
  font-weight: var(--cart-w-light);
}
.faq-question[aria-expanded="true"] + .faq-answer { max-height: 600px; }

/* ===================================================================
   FBT
   =================================================================== */
.fbt-section {
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-lg);
  padding: var(--space-6);
  margin-block: var(--space-7);
}
.fbt-items {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
}
.fbt-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--cart-white);
  border-radius: var(--cart-radius-md);
  padding: var(--space-3);
  cursor: pointer;
  flex: 1;
  min-width: 140px;
  transition: transform var(--cart-dur-base);
}
.fbt-item:hover { transform: translateY(-2px); }
.fbt-item input[type="checkbox"] { display: none; }
.fbt-item img {
  width: 80px; height: 80px;
  object-fit: contain;
  margin-block-end: var(--space-2);
}
.fbt-item-title {
  font-size: 12px;
  font-weight: var(--cart-w-medium);
  line-height: 1.3;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fbt-item-price {
  font-family: var(--cart-font-en);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-heavy);
  color: var(--cart-orange);
  margin-block-start: var(--space-1);
}
.fbt-plus {
  font-family: var(--cart-font-en);
  font-size: 32px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-orange);
}
.fbt-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-divider);
}
.fbt-total {
  font-family: var(--cart-font-en);
  font-size: 28px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-orange);
  letter-spacing: -0.01em;
}

/* Newsletter */
.newsletter-section {
  background: var(--cart-gradient-orange);
  color: white;
  padding-block: var(--space-9);
  text-align: center;
  border-radius: var(--cart-radius-xl);
  margin-block: var(--space-7);
  overflow: hidden;
  position: relative;
}
.newsletter-section h2 {
  color: white;
  font-size: var(--cart-fs-h2);
  margin-block-end: var(--space-2);
  font-weight: var(--cart-w-heavy);
}
.newsletter-section p {
  color: rgba(255, 255, 255, 0.9);
  margin-block-end: var(--space-5);
  max-width: 500px;
  margin-inline: auto;
  font-weight: var(--cart-w-medium);
}
.newsletter-form {
  display: flex;
  gap: var(--space-2);
  max-width: 480px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  flex-wrap: wrap;
}
.newsletter-form input {
  flex: 1;
  min-width: 200px;
}

/* Image-with-text */
.image-text-section {
  display: grid;
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-8);
}
@media (min-width: 768px) {
  .image-text-section { grid-template-columns: 1fr 1fr; }
}
.image-text-image img {
  border-radius: var(--cart-radius-lg);
}

/* 404 */
.error-page {
  text-align: center;
  padding-block: var(--space-10);
}
.error-page p {
  color: var(--cart-gray-700);
  margin-block-end: var(--space-6);
  font-weight: var(--cart-w-medium);
}

/* ===================================================================
   LOCALE SWITCHER
   =================================================================== */
.locale-switcher {
  position: relative;
}
.locale-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--cart-radius-pill);
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  min-height: 40px;
}
.locale-switcher-trigger:hover {
  background: var(--cart-cloud);
  color: var(--cart-orange);
}
.locale-switcher-flag { font-size: 18px; line-height: 1; }
.locale-switcher-trigger svg {
  width: 14px; height: 14px;
  transition: transform var(--t-fast);
}
.locale-switcher-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* MOBILE: Icon-only compact button (square 40×40px) — must be touch-friendly.
   The side-menu variant overrides this below to show the full label. */
@media (max-width: 1023px) {
  .locale-switcher-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .locale-switcher-trigger:hover {
    background: var(--cart-cloud);
  }
  .locale-switcher-label,
  .locale-switcher-trigger > svg {
    display: none;
  }
  /* Side-menu locale: full-width pill with flag + language name + chevron */
  .side-menu-locale .locale-switcher-trigger {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    gap: 8px;
    justify-content: space-between;
    border-radius: 999px;
  }
  .side-menu-locale .locale-switcher-label {
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    color: var(--cart-dark);
  }
  .side-menu-locale .locale-switcher-trigger > svg { display: inline-flex; }
  .locale-switcher-flag {
    font-size: 22px;
  }
}

/* Mobile panel: position relative to header (full-width drawer instead of dropdown) */
.locale-switcher-panel {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: var(--z-fixed);
  min-width: 280px;
  max-width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--cart-white);
  border-radius: var(--cart-radius-md);
  padding: var(--space-2);
  animation: locale-switcher-in 0.18s var(--cart-ease-out);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--color-border, #E5E5E5);
}
/* Mobile: full-width panel anchored to viewport (CRITICAL: placed AFTER desktop rule) */
@media (max-width: 767px) {
  .locale-switcher-panel {
    position: fixed;
    inset-block-start: calc(var(--header-h, 60px) + 8px);
    inset-inline-end: 12px;
    inset-inline-start: 12px;
    max-width: none;
    min-width: 0;
    z-index: 9999;
  }
}
@keyframes locale-switcher-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.locale-switcher-panel[hidden] { display: none !important; }
.locale-switcher-section { padding: var(--space-2); }
.locale-switcher-section + .locale-switcher-section {
  border-block-start: 1px solid var(--color-divider);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
}
.locale-switcher-heading {
  font-size: 11px;
  font-weight: var(--cart-w-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cart-gray-500);
  padding: 0 var(--space-2);
  margin-block-end: var(--space-2);
}
.locale-switcher-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.locale-switcher-options--countries {
  max-height: 240px;
  overflow-y: auto;
}
.locale-switcher-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  font-size: var(--cart-fs-caption);
  font-weight: var(--cart-w-medium);
  color: var(--cart-dark);
  text-align: start;
  border-radius: var(--cart-radius-md);
  transition: background var(--t-fast);
}
.locale-switcher-option:hover { background: var(--cart-cloud); }
.locale-switcher-option.is-active {
  background: var(--color-primary-light);
  color: var(--cart-orange);
  font-weight: var(--cart-w-bold);
}
.locale-switcher-option svg {
  width: 16px; height: 16px;
  color: var(--cart-orange);
}
.locale-switcher-country {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.locale-switcher-currency {
  font-size: 11px;
  color: var(--cart-gray-500);
  font-weight: var(--cart-w-medium);
}
/* Footer expanded variant */
.locale-switcher-expanded {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.locale-switcher-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 10px 36px 10px 14px;
  font-family: inherit;
  font-size: var(--cart-fs-caption);
  color: white;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--cart-radius-pill);
  cursor: pointer;
  font-weight: var(--cart-w-medium);
}
.locale-switcher-select:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.locale-switcher-select option {
  background: var(--cart-dark);
  color: white;
}
.locale-switcher-select-icon {
  position: absolute;
  inset-inline-end: 14px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.6);
}
.locale-switcher-select-icon svg { width: 16px; height: 16px; }

/* ===================================================================
   PRINT & A11Y
   =================================================================== */
@media print {
  .site-header, .site-footer, .bottom-nav, .whatsapp-float, .cart-drawer, .sticky-atc {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero { animation: none; }
}

/* ===================================================================
   HEADER REDESIGN — Big search, hidden nav, side menu
   =================================================================== */

/* Bigger header search — fully flexible, takes all available space */
.header-search {
  flex: 1 1 0;
  display: none;
  position: relative;
  /* No max-width — takes all available space between logo and actions
     Minimum 240px so it doesn't get crushed on smaller screens */
  min-width: 240px;
}
@media (min-width: 768px) { .header-search { display: block; } }
.header-search input,
.header-search-input {
  width: 100%;
  padding-block: 0;
  padding-inline-start: 46px;
  padding-inline-end: 46px;
  border: 2px solid var(--color-border);
  border-radius: var(--cart-radius-pill);
  background: var(--cart-cloud);
  font-size: 15px;
  font-weight: var(--cart-w-medium);
  font-family: inherit;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  height: 50px;
  box-sizing: border-box;
}
.header-search-field {
  position: relative;
  width: 100%;
}
/* Explicit LTR/RTL fallbacks for older browser engines or specificity overrides */
[dir="ltr"] .header-search input,
[dir="ltr"] .header-search-input,
.is-ltr .header-search input,
.is-ltr .header-search-input {
  padding-left: 46px !important;
  padding-right: 46px !important;
}
[dir="rtl"] .header-search input,
[dir="rtl"] .header-search-input,
.is-rtl .header-search input,
.is-rtl .header-search-input {
  padding-right: 46px !important;
  padding-left: 46px !important;
}
.header-search input:focus,
.header-search-input:focus {
  outline: none;
  border-color: var(--cart-orange);
  background: var(--cart-white);
  box-shadow: 0 0 0 3px rgba(253, 87, 42, 0.12);
}
.header-search-icon {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--cart-gray-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}
.header-search-icon:hover { color: var(--cart-orange); }
.header-search-icon svg { width: 100%; height: 100%; }

.header-search-clear {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cart-gray-300);
  color: var(--cart-white);
  cursor: pointer;
}
.header-search-clear svg { width: 14px; height: 14px; }

/* Predictive search dropdown */
.predictive-search {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--cart-white);
  border-radius: var(--cart-radius-md);
  z-index: 1000;
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.predictive-search[hidden] { display: none; }
.predictive-search-section {
  padding: 12px;
  border-bottom: 1px solid var(--color-divider);
}
.predictive-search-section:last-child { border-bottom: none; }
.predictive-search-heading {
  font-size: 11px;
  font-weight: var(--cart-w-heavy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cart-gray-500);
  padding: 0 8px;
  margin-block-end: 8px;
}
.predictive-search-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.predictive-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--cart-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast);
}
.predictive-search-result:hover {
  background: var(--cart-cloud);
}
.predictive-search-result-image {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: var(--cart-cloud);
  object-fit: contain;
  padding: 4px;
}
.predictive-search-result-info {
  flex: 1;
  min-width: 0;
}
.predictive-search-result-vendor {
  font-size: 11px;
  color: var(--cart-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--cart-w-bold);
}
.predictive-search-result-title {
  font-size: 14px;
  font-weight: var(--cart-w-medium);
  color: var(--cart-dark);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.predictive-search-result-price {
  font-family: var(--cart-font-en);
  font-size: 14px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-orange);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.predictive-search-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--cart-gray-500);
  font-size: 14px;
}
.predictive-search-view-all {
  display: block;
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-orange);
  background: var(--cart-cloud);
  text-decoration: none;
  transition: background var(--t-fast);
}
.predictive-search-view-all:hover {
  background: var(--color-primary-light);
  color: var(--cart-orange);
}

/* ===================================================================
   SIDE MENU DRAWER
   =================================================================== */
.side-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: auto;
}
.side-menu[hidden] {
  display: block !important;
  pointer-events: none;
}
.side-menu[hidden] .side-menu-backdrop {
  opacity: 0;
}
.side-menu[hidden] .side-menu-panel {
  transform: translateX(-100%);
}
[dir="rtl"] .side-menu[hidden] .side-menu-panel {
  transform: translateX(100%);
}
.side-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 31, 31, 0.5);
  transition: opacity var(--cart-dur-base);
  cursor: pointer;
}
.side-menu-panel {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--cart-white);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--cart-dur-slow) var(--cart-ease-out);
}
[dir="rtl"] .side-menu-panel {
  inset-inline-start: 0;
}
.side-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-block-end: 1px solid var(--color-border);
}
.side-menu-title {
  font-size: 18px;
  font-weight: var(--cart-w-heavy);
}
.side-menu-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  background: var(--cart-cloud);
  cursor: pointer;
  border: none;
}
.side-menu-close:hover { background: var(--color-primary-light); color: var(--cart-orange); }
.side-menu-close svg { width: 18px; height: 18px; }
.side-menu-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.side-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.side-menu-link svg { width: 18px; height: 18px; }
.side-menu-link:hover {
  background: var(--cart-cloud);
  color: var(--cart-orange);
}
.side-menu-link.active {
  color: var(--cart-orange);
  background: var(--color-primary-light);
}
.side-menu-sublinks {
  display: flex;
  flex-direction: column;
  background: var(--cart-cloud);
}
.side-menu-sublink {
  padding: 10px 20px 10px 40px;
  font-size: 14px;
  font-weight: var(--cart-w-medium);
  color: var(--cart-gray-700);
  text-decoration: none;
  transition: color var(--t-fast);
}
[dir="rtl"] .side-menu-sublink { padding: 10px 40px 10px 20px; }
.side-menu-sublink:hover { color: var(--cart-orange); }
.side-menu-sublink.active { color: var(--cart-orange); font-weight: var(--cart-w-bold); }

.side-menu-footer {
  border-block-start: 1px solid var(--color-border);
  padding: 12px 0;
}

/* Show menu button on ALL screens (we removed top nav) */
.header-menu-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cart-radius-pill);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cart-dark);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.header-menu-btn:hover {
  background: var(--cart-cloud);
  color: var(--cart-orange);
}
.header-menu-btn svg { width: 26px; height: 26px; }

/* Hide top nav menu (we use side menu now) */
.header-nav { display: none !important; }

/* Hide categories sub-bar by default — use side menu instead */
.header-categories { display: none; }

/* Header inner layout — menu | logo | search | actions */
.header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 14px;
  min-height: 76px;
}

/* Sticky header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* ===================================================================
   FULL-WIDTH OPTION (Desktop)
   =================================================================== */
.layout-full-width {
  --page-width: 100%;
}
.layout-full-width .page-width,
.layout-full-width .container {
  max-width: 100%;
  padding-inline: clamp(16px, 4vw, 64px);
}
@media (min-width: 1280px) {
  .layout-full-width .page-width,
  .layout-full-width .container {
    padding-inline: clamp(24px, 5vw, 96px);
  }
}

/* ===================================================================
   COMPREHENSIVE RESPONSIVE — Mobile/Tablet/Desktop
   =================================================================== */

/* Mobile-first base (≤640px) */
:root {
  --header-h-mobile: 64px;
  --section-padding-mobile: 32px;
  --container-padding-mobile: 16px;
}

/* Container responsive padding */
@media (max-width: 639px) {
  .page-width, .container {
    padding-inline: var(--container-padding-mobile);
  }
  .section-padding {
    padding-block: var(--section-padding-mobile);
  }
}

/* Tablet (640-1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
  .page-width, .container {
    padding-inline: 24px;
  }
  .section-padding {
    padding-block: 48px;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .section-padding {
    padding-block: var(--section-padding-y, 56px);
  }
}

/* ===== HEADER RESPONSIVE ===== */
@media (max-width: 767px) {
  .header-inner {
    min-height: var(--header-h-mobile);
    padding-block: 10px;
    gap: 8px;
  }
  .header-logo img { max-height: 32px; }
  .header-logo-text { font-size: 22px; }
  .header-icon-btn {
    width: 38px;
    height: 38px;
  }
  .header-icon-btn svg { width: 20px; height: 20px; }
  .header-menu-btn {
    width: 38px;
    height: 38px;
  }
  .header-menu-btn svg { width: 22px; height: 22px; }
  .header-actions { gap: 0; }
}

/* Mobile search — slide-down full-width when toggled */
@media (max-width: 767px) {
  /* Mobile: search bar ALWAYS visible as a full-width row below the header
     icons row. No trigger button needed — the search is just there. */
  .header-search {
    display: block !important;
    position: static !important;
    /* Break out of the header-inner flex line onto its own row */
    flex-basis: 100% !important;
    width: 100% !important;
    order: 99 !important;
    margin-block-start: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    min-width: 0 !important;
  }
  /* Make .header-inner wrap so the search row can sit below the icons */
  .header-inner {
    flex-wrap: wrap !important;
  }
  /* Hide the mobile trigger icon completely — search is always visible now */
  .mobile-search-trigger {
    display: none !important;
  }
  /* Hide any close (X) on the search since it should never be closable */
  .header-search-close,
  [data-mobile-search-close] {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .mobile-search-trigger { display: none !important; }
}

/* ===== HERO RESPONSIVE ===== */
@media (max-width: 767px) {
  .hero {
    margin-inline: 0;
    border-radius: 0;
  }
  .hero-inner {
    padding: 40px 20px;
    min-height: 280px;
  }
  .hero-title {
    font-size: clamp(28px, 9vw, 40px);
  }
  .hero-subtitle {
    font-size: 15px;
  }
  .hero-actions { gap: 8px; }
  .hero-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ===== PRODUCT GRID RESPONSIVE ===== */
.product-grid {
  display: grid;
  gap: 12px;
}
@media (max-width: 639px) {
  .product-grid {
    grid-template-columns: repeat(var(--grid-mobile-cols, 2), 1fr);
    gap: 8px;
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(var(--grid-desktop-cols, 4), 1fr);
    gap: 20px;
  }
}

/* Product card mobile compact */
@media (max-width: 639px) {
  .product-card-content {
    padding: 10px;
    gap: 4px;
  }
  .product-card-vendor { font-size: 9px; }
  .product-card-title {
    font-size: 12px;
    -webkit-line-clamp: 2;
    line-height: 1.45;
    min-height: 2.9em;
  }
  .product-card-price { font-size: 16px; }
  .product-card-compare { font-size: 11px; }
  .product-card-discount { font-size: 9px; padding: 2px 6px; }
  .product-card-wishlist,
  .product-card-quick-view,
  .compare-btn--card {
    width: 30px;
    height: 30px;
    inset-inline-end: 6px;
  }
  .product-card-wishlist { inset-block-start: 6px; }
  .product-card-quick-view { inset-block-start: 42px; }
  .compare-btn--card { inset-block-start: 78px; }
  .product-card-wishlist svg,
  .product-card-quick-view svg,
  .compare-btn--card svg { width: 14px; height: 14px; }
  .product-card-badges {
    inset-block-start: 8px;
    inset-inline-start: 8px;
    gap: 3px;
  }
  .badge { font-size: 9px; padding: 3px 7px; }
  .product-card-delivery { font-size: 9px; padding: 2px 6px; }
}

/* ===== PRODUCT PAGE RESPONSIVE ===== */
@media (max-width: 767px) {
  .product-page {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .product-title {
    font-size: clamp(20px, 5vw, 28px) !important;
  }
  .product-price {
    font-size: 28px !important;
  }
  .product-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
  .product-tabs-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .product-tabs-nav::-webkit-scrollbar { display: none; }
  .product-tab-btn {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* Hide sidebar on mobile, show as expandable below */
@media (max-width: 1023px) {
  .product-sidebar {
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ===== CART PAGE RESPONSIVE ===== */
@media (max-width: 767px) {
  .cart-page-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .cart-table-row {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding: 16px;
  }
  .cart-row-image {
    width: 80px;
    height: 80px;
  }
  .cart-summary {
    padding: 20px;
  }
}

/* ===== COLLECTION PAGE RESPONSIVE ===== */
@media (max-width: 1023px) {
  .collection-layout {
    grid-template-columns: 1fr !important;
  }
  .facets {
    margin-block-end: 16px;
  }
}
@media (max-width: 639px) {
  .collection-header {
    padding-block: 24px 16px;
  }
  .collection-title {
    font-size: clamp(22px, 6vw, 30px) !important;
  }
  .collection-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .collection-sort select {
    font-size: 12px;
    padding: 6px 28px 6px 12px;
  }
}

/* ===== TRUST BAR RESPONSIVE ===== */
@media (max-width: 639px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding-block: 16px;
  }
  .trust-item {
    gap: 8px;
    padding-inline-start: 8px;
  }
  .trust-item-icon {
    width: 24px;
    height: 24px;
  }
  .trust-item-title { font-size: 11px; }
  .trust-item-sub { font-size: 10px; }
}

/* ===== CATEGORY TILES RESPONSIVE ===== */
@media (max-width: 639px) {
  .category-tiles {
    gap: 8px;
  }
  .category-tile {
    padding: 16px 8px;
    gap: 6px;
  }
  .category-tile-img {
    width: 56px;
    height: 56px;
  }
  .category-tile-name { font-size: 11px; }
}

/* ===== FOOTER RESPONSIVE ===== */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ===== SECTION HEADING RESPONSIVE ===== */
@media (max-width: 639px) {
  .section-heading {
    margin-block-end: 16px;
  }
  .section-title {
    font-size: clamp(18px, 5vw, 24px);
  }
}

/* ===== FBT RESPONSIVE ===== */
@media (max-width: 639px) {
  .fbt-section {
    padding: 16px;
  }
  .fbt-items {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .fbt-plus {
    text-align: center;
    font-size: 24px;
  }
  .fbt-summary {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
}

/* ===== CART DRAWER RESPONSIVE ===== */
@media (max-width: 480px) {
  .cart-drawer-panel {
    max-width: 100%;
  }
}

/* ===== PRODUCT GALLERY RESPONSIVE ===== */
@media (max-width: 767px) {
  .product-gallery-thumbs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .product-gallery-thumbs::-webkit-scrollbar { display: none; }
  .product-gallery-thumb {
    flex: 0 0 56px;
    height: 56px;
  }
}

/* ===== FORM/INPUT RESPONSIVE ===== */
@media (max-width: 639px) {
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 12px 14px;
    min-height: 46px;
  }
  .btn {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px;
  }
  .btn-lg, .btn--lg {
    padding: 14px 24px;
    font-size: 15px;
    min-height: 50px;
  }
}

/* ===== PREDICTIVE SEARCH RESPONSIVE ===== */
@media (max-width: 767px) {
  .predictive-search {
    max-height: calc(100vh - 130px);
  }
  .predictive-search-result-image {
    width: 44px;
    height: 44px;
  }
  .predictive-search-result-title { font-size: 13px; }
  .predictive-search-result-price { font-size: 13px; }
}

/* ===== TOUCH TARGETS (Accessibility) ===== */
@media (max-width: 1023px) {
  /* Ensure all interactive elements have minimum 44x44 tap target.
     Excludes small decorative/overlay controls that have their own sizing:
     slider dots, card action buttons (wishlist/quick-view/compare). */
  button:not(.btn):not(.product-card-wishlist):not(.product-slider-dot):not(.product-card-quick-view):not(.compare-btn--card):not(.compare-bar-item-remove):not(.compare-bar-close),
  a.header-icon-btn,
  .qty-stepper button,
  .variant-option,
  .pagination a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ===== UTILITIES ===== */
.hidden-mobile {
  display: initial;
}
.hidden-desktop {
  display: none;
}
@media (max-width: 767px) {
  .hidden-mobile { display: none !important; }
  .hidden-desktop { display: initial; }
}

/* iOS safe area */
@supports (padding: max(0px)) {
  body {
    padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
  }
  .bottom-nav {
  z-index: var(--z-bottom-nav);
    padding-block-end: max(var(--space-2), env(safe-area-inset-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════════ */

/* Prevent layout shift — reserve space for images */
img {
  max-width: 100%;
  height: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 1rem;
}

/* Aspect ratio containers for product images (prevents CLS) */
.product-card-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cart-white);
  overflow: hidden;
  border-radius: var(--cart-radius-card);
}
.product-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform var(--cart-dur-base);
  position: relative;
  z-index: 0;
}
/* Badges + overlay buttons inside the image-wrap must sit ABOVE the image,
   even when the image scales on hover (which creates a stacking context). */
.product-card-image-wrap .product-card-badges { z-index: 3; }
.product-card-image-wrap .product-card-wishlist { z-index: 4; }
.product-card:hover .product-card-image {
  transform: scale(1.04);
}

/* Lazy load fade-in animation */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}
img[loading="lazy"].loaded,
img[loading="lazy"].is-loaded {
  opacity: 1;
}

/* Skeleton loaders */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.skeleton {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  background: linear-gradient(90deg, var(--cart-cloud) 0%, var(--cart-gray-300, #E5E5E5) 50%, var(--cart-cloud) 100%);
  background-size: 200% 100%;
}

/* Reduce paint area for animations (use transform/opacity only) */
.btn,
.product-card,
.cart-drawer-panel,
.side-menu-panel {
  will-change: transform;
}

/* Content visibility for offscreen sections (Chromium) */
.section-padding {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
.hero,
.site-header {
  content-visibility: visible;
}

/* GPU acceleration for animations */
.product-card-image,
.cart-drawer-panel,
.side-menu-panel,
.btn {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce repaints on hover */
.product-card,
.btn {
  transition-property: transform, opacity, background-color, border-color, color;
  transition-duration: var(--t-fast);
}

/* Print styles (better SEO and accessibility) */
@media print {
  .site-header,
  .site-footer,
  .bottom-nav,
  .whatsapp-float,
  .cart-drawer,
  .side-menu,
  .product-card-wishlist,
  .btn { display: none !important; }
  body { padding: 0; }
  a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
}

/* Reduce motion respects user preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CONVERSION BOOSTERS — Noon-inspired conversion banners
   ═══════════════════════════════════════════════════════════════════ */

.conversion-boosters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block: 16px;
}

/* ───── Mega Deal Badge ───── */
.cb-mega-deal {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cb-mega-deal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #FFE5DC 0%, #FFCDC0 100%);
  color: #C73E14;
  border-radius: var(--cart-radius-pill);
  font-weight: var(--cart-w-heavy);
  font-size: 13px;
}
.cb-mega-deal-emoji { font-size: 16px; }
.cb-lowest-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cart-orange);
  font-weight: var(--cart-w-bold);
}
.cb-lowest-price-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}

/* ───── Delivery ETA ───── */
.cb-delivery {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  position: relative;
}
.cb-delivery-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-cloud);
  border-radius: 8px;
  color: var(--cart-violet);
}
.cb-delivery-icon svg { width: 20px; height: 20px; }
.cb-delivery-content { flex: 1; min-width: 0; }
.cb-delivery-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--cart-w-bold);
}
.cb-delivery-value {
  font-size: 14px;
  color: var(--cart-dark);
  margin-top: 2px;
}
.cb-delivery-value strong {
  color: var(--cart-violet);
  font-weight: var(--cart-w-heavy);
}
.cb-delivery-badge {
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
  font-weight: var(--cart-w-heavy);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--cart-radius-pill);
}

/* ───── BNPL ───── */
.cb-bnpl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFF2E5 0%, #F4E5FF 100%);
  border-radius: 16px;
  position: relative;
}
.cb-bnpl-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-white);
  border-radius: 8px;
  color: var(--cart-violet);
}
.cb-bnpl-icon svg { width: 20px; height: 20px; }
.cb-bnpl-content { flex: 1; min-width: 0; }
.cb-bnpl-text {
  font-size: 14px;
  color: var(--cart-dark);
  line-height: 1.4;
}
.cb-bnpl-text strong {
  color: var(--cart-violet);
  font-weight: var(--cart-w-heavy);
}
.cb-bnpl-link {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cart-white);
  color: var(--cart-violet);
}
.cb-bnpl-link svg { width: 14px; height: 14px; }

/* ───── Coupons ───── */
.cb-coupons {
  margin-block: 4px;
}
.cb-coupons-heading {
  font-size: 13px;
  font-weight: var(--cart-w-heavy);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.cb-coupons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 480px) {
  .cb-coupons-grid { grid-template-columns: 1fr; }
}
.cb-coupon {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #F0FDF4;
  border: 2px dashed #10B981;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  text-align: start;
  width: 100%;
}
.cb-coupon:hover {
  background: #DCFCE7;
  transform: translateY(-1px);
}
.cb-coupon-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #10B981;
  color: #fff;
  border-radius: 50%;
  font-weight: var(--cart-w-heavy);
  font-size: 16px;
}
.cb-coupon-content { flex: 1; min-width: 0; }
.cb-coupon-label {
  font-size: 13px;
  color: #047857;
  font-weight: var(--cart-w-bold);
  line-height: 1.3;
}
.cb-coupon-code {
  font-family: var(--cart-font-en);
  font-size: 12px;
  color: #065F46;
  font-weight: var(--cart-w-heavy);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.cb-coupon-action {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
}
.cb-coupon-action svg { width: 12px; height: 12px; }
.cb-coupon.copied {
  background: #DCFCE7;
}
.cb-coupon.copied .cb-coupon-code::after {
  content: ' ' var(--cart-copied-msg, '\2713 Copied');
  color: #10B981;
}

/* ───── Cashback Strip ───── */
.cb-cashback {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cart-lime);
  border-radius: 12px;
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
}
.cb-cashback-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(32,31,31,0.1);
  border-radius: 8px;
  color: var(--cart-dark);
}
.cb-cashback-icon svg { width: 20px; height: 20px; }
.cb-cashback-content {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}
.cb-cashback-content strong {
  font-weight: var(--cart-w-heavy);
}
.cb-cashback-cta {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-violet);
  text-decoration: underline;
}

/* ───── Stock Urgency ───── */
.cb-urgency {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FED7AA;
  border-radius: 12px;
}
.cb-urgency-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  animation: pulse-warning 2s ease-in-out infinite;
}
@keyframes pulse-warning {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.cb-urgency-content {
  flex: 1;
  font-size: 14px;
  color: #9A3412;
}
.cb-urgency-content strong {
  color: #C2410C;
  font-weight: var(--cart-w-heavy);
}

/* ───── Social Proof ───── */
.cb-social-proof,
.cb-recently-bought {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cart-cloud);
  border-radius: 10px;
  font-size: 13px;
  color: var(--cart-dark);
}
.cb-social-proof-icon,
.cb-recently-bought-icon {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--cart-violet);
}
.cb-social-proof-icon svg { width: 18px; height: 18px; }
.cb-social-proof-content,
.cb-recently-bought-content {
  flex: 1;
  line-height: 1.4;
}
.cb-social-proof-content strong,
.cb-recently-bought-content strong {
  color: var(--cart-violet);
  font-weight: var(--cart-w-heavy);
}

/* ───── Free Gift ───── */
.cb-gift {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FCE7F3 0%, #FBCFE8 100%);
  border: 1px solid #F9A8D4;
  border-radius: 12px;
}
.cb-gift-icon {
  flex-shrink: 0;
  font-size: 28px;
}
.cb-gift-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: #831843;
}
.cb-gift-content strong {
  font-size: 14px;
  font-weight: var(--cart-w-heavy);
  color: #9D174D;
}

/* ───── Trust Signals ───── */
.cb-trust {
  background: var(--cart-cloud);
  border-radius: 16px;
  padding: 16px;
}
.cb-trust-heading {
  font-size: 12px;
  font-weight: var(--cart-w-heavy);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  text-align: center;
}
.cb-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.cb-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding-inline: 8px;
  position: relative;
}
.cb-trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  inset-block: 12px;
  width: 1px;
  background: var(--color-border);
}
.cb-trust-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-white);
  border-radius: 12px;
  color: var(--cart-violet);
}
.cb-trust-icon svg { width: 24px; height: 24px; }
.cb-trust-label {
  font-size: 12px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-dark);
  line-height: 1.3;
}

/* ───── Expandable Info ───── */
.cb-expandable {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cb-expandable[open] {
  background: var(--cart-cloud);
}
.cb-expandable-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cb-expandable-summary::-webkit-details-marker { display: none; }
.cb-expandable-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-violet);
}
.cb-expandable-icon svg { width: 22px; height: 22px; }
.cb-expandable-title {
  flex: 1;
  font-size: 14px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
}
.cb-expandable-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform var(--t-fast);
}
.cb-expandable-arrow svg { width: 16px; height: 16px; }
.cb-expandable[open] .cb-expandable-arrow {
  transform: rotate(90deg);
}
[dir="rtl"] .cb-expandable[open] .cb-expandable-arrow {
  transform: rotate(-90deg);
}
.cb-expandable-body {
  padding: 0 16px 16px;
  font-size: 14px;
  color: var(--cart-dark);
  line-height: 1.6;
}
.cb-expandable-body p { margin: 0 0 8px; }
.cb-expandable-body p:last-child { margin: 0; }

/* ───── Mobile Responsive ───── */
@media (max-width: 480px) {
  .cb-trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cb-trust-grid .cb-trust-item:nth-child(3) {
    grid-column: span 2;
  }
  .cb-trust-grid .cb-trust-item::after {
    display: none;
  }
  .cb-mega-deal-badge,
  .cb-lowest-price { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW PROTECTION + CART HEADER FIX
   ═══════════════════════════════════════════════════════════════════ */

/* Global: prevent any horizontal scroll on mobile */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Force-contain everything within viewport on mobile */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Prevent images/media from overflowing */
  img, video, iframe, svg {
    max-width: 100%;
    height: auto;
  }

  /* Prevent flex/grid containers from causing scroll */
  .container, .page-width {
    overflow-x: hidden;
    padding-inline: 12px;
  }

  /* Header tweaks */
  .header-inner {
    padding-inline: 0;
  }

  /* Prevent text overflow */
  h1, h2, h3, p {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Tables → scrollable container */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }

  /* Hero banner full width on mobile */
  .hero {
    margin-inline: 0;
    border-radius: 12px;
  }

  .hero-inner {
    padding: 32px 20px;
  }

  /* Conversion boosters: ensure they don't overflow */
  .conversion-boosters {
    padding-inline: 12px;
  }

  /* Coupons grid: stack on small mobile */
  .cb-coupons-grid {
    grid-template-columns: 1fr !important;
  }

  /* Trust signals: 3 columns max on smallest screens */
  .cb-trust-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .cb-trust-grid .cb-trust-item:nth-child(3) {
    grid-column: auto;
  }
  .cb-trust-grid .cb-trust-item::after {
    display: none;
  }
  .cb-trust-icon {
    width: 36px;
    height: 36px;
  }
  .cb-trust-icon svg {
    width: 20px;
    height: 20px;
  }
  .cb-trust-label {
    font-size: 11px;
  }

  /* Product gallery: ensure proper sizing */
  .product-gallery {
    max-width: 100%;
    overflow: hidden;
  }

  /* Header logo: prevent oversized */
  .header-logo {
    max-width: 140px;
  }
  .header-logo img {
    max-height: 32px;
  }

  /* Pricing rows */
  .product-card-price-row {
    flex-wrap: wrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CART ICON HEADER ENHANCEMENT
   ═══════════════════════════════════════════════════════════════════ */

/* Cart icon button: better visual hierarchy */
.header-icon-btn[data-cart-trigger],
.header-icon-btn[href*="/cart"] {
  position: relative;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
/* Visual styling (violet bg, radius, hover) handled by .header-icon-btn--cart */

/* Cart count badge — visible and styled */
.header-cart-count,
.cart-count-bubble {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-numeric);
  line-height: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  z-index: 1;
  animation: cart-bump 0.3s ease;
}

@keyframes cart-bump {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.header-cart-count:empty,
.cart-count-bubble:empty {
  display: none;
}

/* Cart icon SVG sizing */
.header-icon-btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

/* Mobile: cart slightly smaller but still tappable */
@media (max-width: 767px) {
  .header-cart-count,
  .cart-count-bubble {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    line-height: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRELOAD WARNING FIX
   ═══════════════════════════════════════════════════════════════════ */
/* Force preloaded image to be visible immediately */
.product-gallery-main img[fetchpriority="high"] {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCT BOOSTERS — Inline conversion area (in product-info column)
   ═══════════════════════════════════════════════════════════════════ */

.product-boosters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: 16px 20px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(253,87,42,0.02) 0%, rgba(78,36,181,0.02) 100%);
  border: 1px solid var(--color-border);
  border-radius: 16px;
}

.pb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Mega Deal Row */
.pb-mega-row {
  padding-block-end: 10px;
  border-bottom: 1px solid var(--color-border);
}
.pb-mega-deal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #FFE5DC 0%, #FFCDC0 100%);
  color: #C73E14;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
}
.pb-mega-deal-emoji { font-size: 16px; }
.pb-lowest-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cart-orange);
  font-weight: 700;
}
.pb-lowest-price-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}

/* Stock Urgency */
.pb-urgency {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
  border: 1px solid #FED7AA;
  border-radius: 12px;
}
.pb-urgency-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
  animation: pulse-warning 2s ease-in-out infinite;
}
.pb-urgency-content {
  flex: 1;
  font-size: 13px;
  color: #9A3412;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pb-urgency-content strong {
  color: #C2410C;
  font-weight: 800;
}

/* Social Proof Row */
.pb-social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pb-social-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cart-cloud);
  border-radius: 10px;
  font-size: 12px;
  color: var(--cart-dark);
}
.pb-social-item svg {
  width: 16px;
  height: 16px;
  color: var(--cart-violet);
  flex-shrink: 0;
}
.pb-social-item strong {
  color: var(--cart-violet);
  font-weight: 800;
  font-family: var(--font-numeric);
}
.pb-social-emoji {
  font-size: 14px;
  flex-shrink: 0;
}

/* Delivery */
.pb-delivery {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.pb-delivery-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-cloud);
  border-radius: 8px;
  color: var(--cart-violet);
}
.pb-delivery-icon svg { width: 20px; height: 20px; }
.pb-delivery-content { flex: 1; min-width: 0; }
.pb-delivery-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.pb-delivery-value {
  font-size: 14px;
  color: var(--cart-violet);
  font-weight: 800;
  margin-top: 2px;
}
.pb-delivery-badge {
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
  font-weight: 800;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}

/* BNPL */
.pb-bnpl {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF2E5 0%, #F4E5FF 100%);
  border-radius: 12px;
}
.pb-bnpl-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-white);
  border-radius: 8px;
  color: var(--cart-violet);
}
.pb-bnpl-icon svg { width: 20px; height: 20px; }
.pb-bnpl-content {
  flex: 1;
  font-size: 13px;
  color: var(--cart-dark);
  line-height: 1.4;
}
.pb-bnpl-content strong {
  color: var(--cart-violet);
  font-weight: 800;
}

/* Coupons */
.pb-coupons-heading {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.pb-coupons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pb-coupon {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed #10B981;
  border-radius: 15px !important;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, opacity .15s, transform .15s, box-shadow .15s;
  text-align: start;
  width: 100%;
}
.pb-coupon:hover {
  background: #DCFCE7;
  transform: translateY(-1px);
}
.pb-coupon-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #10B981;
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 14px;
}
.pb-coupon-content { flex: 1; min-width: 0; }
.pb-coupon-label {
  font-size: 12px;
  color: #047857;
  font-weight: 700;
  line-height: 1.3;
}
.pb-coupon-code {
  font-family: var(--cart-font-en);
  font-size: 11px;
  color: #065F46;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.pb-coupon.copied {
  background: #DCFCE7;
}
.pb-coupon.copied .pb-coupon-code::after {
  content: ' ' var(--cart-copied-msg, '\2713 Copied');
  color: #10B981;
}

/* Cashback */
.pb-cashback {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cart-lime);
  border-radius: 12px;
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
}
.pb-cashback-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(32,31,31,0.1);
  border-radius: 8px;
  color: var(--cart-dark);
}
.pb-cashback-icon svg { width: 18px; height: 18px; }
.pb-cashback-content {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
}
.pb-cashback-content strong {
  font-weight: 800;
}

/* Trust Signals */
.pb-trust {
  background: var(--cart-cloud);
  border-radius: 14px;
  padding: 14px 12px;
}
.pb-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.pb-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding-inline: 4px;
  position: relative;
}
.pb-trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  inset-block: 8px;
  width: 1px;
  background: var(--color-border);
}
.pb-trust-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-white);
  border-radius: 10px;
  color: var(--cart-violet);
}
.pb-trust-icon svg { width: 20px; height: 20px; }
.pb-trust-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--cart-dark);
  line-height: 1.3;
}

/* Expandable Info */
.pb-expandables {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pb-expandable {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.pb-expandable[open] {
  background: var(--cart-cloud);
}
.pb-expandable-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pb-expandable-summary::-webkit-details-marker { display: none; }
.pb-expandable-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-violet);
}
.pb-expandable-icon svg { width: 18px; height: 18px; }
.pb-expandable-title {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
}
.pb-expandable-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform .15s;
}
.pb-expandable-arrow svg { width: 14px; height: 14px; }
.pb-expandable[open] .pb-expandable-arrow {
  transform: rotate(90deg);
}
[dir="rtl"] .pb-expandable[open] .pb-expandable-arrow {
  transform: rotate(-90deg);
}
.pb-expandable-body {
  padding: 0 14px 14px;
  font-size: 13px;
  color: var(--cart-dark);
  line-height: 1.5;
}
.pb-expandable-body p { margin: 0; }

/* Mobile responsive */
@media (max-width: 480px) {
  .product-boosters {
    padding: 10px;
    margin-block: 12px 16px;
  }
  .pb-mega-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .pb-coupons-grid,
  .pb-social-row {
    grid-template-columns: 1fr;
  }
  .pb-trust-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
  .pb-trust-icon {
    width: 32px;
    height: 32px;
  }
  .pb-trust-icon svg {
    width: 18px;
    height: 18px;
  }
  .pb-trust-label {
    font-size: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FORCE 80% WIDTH ON ALL SECTIONS (Desktop)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1280px) {
  .container,
  .page-width,
  .shopify-section .container,
  .shopify-section > .container,
  section > .container {
    max-width: min(80vw, 1280px) !important;
  }
}
@media (min-width: 1920px) {
  .container,
  .page-width {
    max-width: 1280px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CART DESIGN SYSTEM — Border-only cards (NO shadows on cards)
   Per design system spec + user instruction:
   "Use Border 1px instead of shadow on all cards"
   CTAs keep their shadow (it's part of brand identity).
   ════════════════════════════════════════════════════════════════════ */

/* ─── Base card: replace shadow with border ─── */
.card {
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform var(--cart-dur-base) var(--cart-ease-out),
              border-color var(--cart-dur-base) var(--cart-ease-out);
}
.card.hoverable:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
}

/* ─── Product cards: border instead of shadow ─── */
.product-card {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  transition: transform var(--cart-dur-base) var(--cart-ease-out),
              border-color var(--cart-dur-base) var(--cart-ease-out);
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

/* ─── Cart drawer / side panels: border ─── */
.cart-drawer-panel,
.side-menu-panel {
  border-inline-start: 1px solid var(--color-border);
}

/* ─── Cart items in drawer ─── */
.cart-item {
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
}

/* ─── Predictive search dropdown ─── */
.predictive-search,
.predictive-search-results,
[data-predictive-results] {
  border: 1px solid var(--color-border);
}

/* ─── Conversion Boosters cards: borders only ─── */
.product-boosters {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
}

.pb-delivery,
.pb-bnpl,
.pb-coupon,
.pb-cashback,
.pb-urgency,
.pb-gift,
.pb-trust,
.pb-expandable,
.pb-social-item {
}

/* Override hover shadows on coupons */
.pb-coupon:hover {
  border-color: #047857;
  transform: translateY(-1px);
}

/* Override conversion-boosters CSS shadows */
.cb-delivery,
.cb-bnpl,
.cb-coupon,
.cb-cashback,
.cb-urgency,
.cb-gift,
.cb-trust,
.cb-expandable,
.cb-social-proof,
.cb-recently-bought,
.cb-mega-deal {
}
.cb-coupon:hover {
  border-color: #047857;
}

/* ─── Trust badge / sidebar cards ─── */
.sidebar-seller-card,
.cashback-ribbon,
.limited-offer-card,
.coupon {
  border: 1px solid var(--color-border);
}

/* ─── Trust signals cards ─── */
.trust-bar-item,
.feature-card,
.category-tile {
  border: 1px solid var(--color-border);
}

/* ─── Hero / promo blocks: keep border, no shadow ─── */
.hero,
.featured-collection-item,
.image-with-text-block,
.multicolumn-block {
}

/* ─── FAQ items ─── */
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
}

/* ─── Footer columns ─── */
.footer-column,
.footer-section {
}

/* ─── Header: keep subtle border-bottom only ─── */
.site-header {
  border-bottom: 1px solid var(--color-border);
}
.site-header.scrolled {
  border-bottom-color: var(--color-border-strong);
}

/* ─── Form inputs: border only ─── */
input, textarea, select {
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cart-orange);
}

/* ─── Bottom navigation (mobile) ─── */
.bottom-nav {
  z-index: var(--z-bottom-nav);
  border-top: 1px solid var(--color-border);
}

/* ─── Sticky add to cart ─── */
.sticky-atc {
  border-top: 1px solid var(--color-border);
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   EXCEPTIONS: CTAs keep their shadow (brand identity)
   Per Cart Design System: "Lime CTAs get a subtle orange glow"
   ════════════════════════════════════════════════════════════════════ */

.btn-lime {
  background: var(--cart-lime);
  color: var(--cart-dark);
  box-shadow: var(--cart-shadow-cta) !important;
  border: 2px solid var(--cart-violet);
}
.btn-lime:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(253, 87, 42, 0.45) !important;
}
.btn-orange {
  background: var(--cart-orange);
  color: var(--cart-white);
  box-shadow: none;
}
.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: var(--cart-shadow-cta) !important;
}
.btn-violet {
  background: var(--cart-violet);
  color: var(--cart-white);
  box-shadow: none;
}
.btn-violet:hover {
  transform: translateY(-2px);
  box-shadow: var(--cart-shadow-cta-violet) !important;
}
.btn-ghost {
  background: transparent;
  color: var(--cart-dark);
  border: 2px solid var(--cart-dark);
  box-shadow: none !important;
}

/* Discount tag: keep border accent (not shadow) */
.discount-tag {
  background: var(--cart-lime);
  color: var(--cart-dark);
  font-weight: var(--cart-w-heavy);
  border: 2px solid var(--cart-violet);
  white-space: nowrap;
}

/* Cart count badge keeps its small shadow (UI feedback) */
.header-icon-btn .badge-count {
  box-shadow: 0 2px 6px rgba(253, 87, 42, 0.3) !important;
}

/* ════════════════════════════════════════════════════════════════════
   TYPOGRAPHY: Match Cart Design System weights
   ════════════════════════════════════════════════════════════════════ */

/* Hero numerals are always Heavy 900 */
.hero-numeral,
.product-price,
.cb-mega-deal-text,
.pb-mega-deal-text,
.discount-tag,
.product-card-price {
  font-weight: var(--cart-w-heavy) !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: var(--cart-tracking-display);
}

/* Headlines bold 700 */
.section-title,
.product-card-title,
.pb-expandable-title,
.cb-expandable-title {
  font-weight: var(--cart-w-bold);
  letter-spacing: var(--cart-tracking-tight);
}

/* Body Light 300 (Cart is a "headline brand") */
.product-description,
.pb-expandable-body,
.cb-expandable-body,
.faq-answer-inner {
  font-weight: var(--cart-w-light);
  line-height: var(--cart-lh-relaxed);
}

/* ════════════════════════════════════════════════════════════════════
   RADII: enforce minimum 8px on cards (per design spec)
   ════════════════════════════════════════════════════════════════════ */

.card,
.product-card,
.pb-coupon,
.cb-coupon,
.cb-trust,
.pb-trust,
.cb-delivery,
.pb-delivery,
.cb-bnpl,
.pb-bnpl,
.cb-cashback,
.pb-cashback,
.cb-urgency,
.pb-urgency,
.cb-expandable,
.pb-expandable {
  border-radius: max(8px, var(--cart-radius-md));
}
/* faq-item has its own border-radius (14px) set separately */

/* Buttons fully pill */
.btn {
  border-radius: var(--cart-radius-pill) !important;
}

/* ════════════════════════════════════════════════════════════════════
   ENFORCE: 80% width on ALL sections in desktop
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  .container,
  .page-width,
  section .container,
  .shopify-section .container,
  .shopify-section > * > .container {
    max-width: min(80vw, 1280px) !important;
  }
}

@media (min-width: 1920px) {
  .container,
  .page-width {
    max-width: 1280px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT-BOOSTERS REFINEMENT
   The container has a border. Inside items should be subtle.
   ════════════════════════════════════════════════════════════════════ */

.product-boosters {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-block: 16px 20px;
}

/* Items inside product-boosters: lighter borders */
.product-boosters .pb-delivery,
.product-boosters .pb-bnpl,
.product-boosters .pb-cashback,
.product-boosters .pb-urgency,
.product-boosters .pb-trust,
.product-boosters .pb-expandable,
.product-boosters .pb-coupon {
  border-color: var(--color-border);
}

/* Trust signals: no background, no border (uses dividers instead) */
.product-boosters .pb-trust {
  background: var(--cart-cloud);
  border: none;
}

/* Mobile: tighter padding */
@media (max-width: 480px) {
  .product-boosters {
    padding: 10px;
    border-radius: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FINAL OVERRIDE: 100% WIDTH ON DESKTOP (full-width layout)
   This MUST be at the end of the CSS file to win specificity wars
   against earlier rules and theme settings.
   ════════════════════════════════════════════════════════════════════ */

/* Override the --page-width custom property at the body level */
@media (min-width: 1280px) {
  body {
    --page-width: 100vw;
  }
}

/* Brute-force selector with high specificity + !important */
@media (min-width: 1280px) {
  html body .container,
  html body .page-width,
  html body .shopify-section .container,
  html body .shopify-section > .container,
  html body section .container,
  html body section .page-width,
  html body main .container,
  html body main .page-width {
    max-width: 100% !important;
    width: 100% !important;
    padding-inline: 24px !important;
  }
}

/* Ultra-wide screens: cap at 1900px for readability */
@media (min-width: 1900px) {
  html body .container,
  html body .page-width,
  html body .shopify-section .container,
  html body section .container,
  html body main .container {
    max-width: 1900px !important;
    width: 1900px !important;
  }
}

/* Tablet: full width with padding */
@media (min-width: 768px) and (max-width: 1279px) {
  html body .container,
  html body .page-width {
    max-width: 100% !important;
    width: 100% !important;
    padding-inline: 24px !important;
  }
}

/* Header should also follow */
@media (min-width: 1280px) {
  html body .site-header .container,
  html body .header-inner {
    max-width: 100vw !important;
  }
}
@media (min-width: 1900px) {
  html body .site-header .container,
  html body .header-inner {
    max-width: 1900px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   COVER ALL SECTION WRAPPERS — not just .container
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
  /* Find inner containers in any section */
  html body .section-padding > *,
  html body .featured-collection-inner,
  html body .category-tiles-inner,
  html body .hero-inner,
  html body .footer-inner,
  html body .announcement-bar > *,
  html body .conversion-boosters,
  html body .product-grid {
    /* These are children of sections; their parent should have max-width */
  }

  /* For sections WITHOUT .container, target the section itself */
  html body .shopify-section > .section-padding,
  html body .shopify-section > .hero,
  html body .shopify-section > .featured-collection,
  html body .shopify-section > .category-tiles {
    max-width: 100vw !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  /* Featured collection wrapper */
  html body .featured-collection {
    max-width: 100vw;
    margin-inline: auto;
  }

  /* Category tiles, multicolumn etc */
  html body .category-tiles,
  html body .multicolumn,
  html body .image-with-text,
  html body .rich-text,
  html body .newsletter,
  html body .trust-bar,
  html body .sale-strip {
    max-width: 100vw;
    margin-inline: auto;
  }

  /* Footer site-footer should also constrain */
  html body .site-footer .container,
  html body .footer-inner {
    max-width: 100vw !important;
    margin-inline: auto !important;
  }
}

@media (min-width: 1900px) {
  html body .shopify-section > .section-padding,
  html body .featured-collection,
  html body .category-tiles,
  html body .multicolumn,
  html body .image-with-text,
  html body .rich-text,
  html body .newsletter,
  html body .trust-bar,
  html body .sale-strip,
  html body .site-footer .container,
  html body .footer-inner {
    max-width: 1900px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CASHBACK MODAL
   ════════════════════════════════════════════════════════════════════ */

.cashback-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.cashback-modal[hidden] { display: none; }

.cashback-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 31, 31, 0.55);
  cursor: pointer;
}

.cashback-modal-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  animation: modal-pop 0.3s var(--cart-ease-spring);
}

@keyframes modal-pop {
  0% { opacity: 0; transform: scale(0.95) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.cashback-modal-header {
  background: var(--cart-orange);
  color: #fff;
  padding: 18px 22px;
  border-radius: var(--cart-radius-lg) var(--cart-radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cashback-modal-title {
  font-size: 18px;
  font-weight: var(--cart-w-heavy);
  margin: 0;
  color: #fff;
}
.cashback-modal-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cashback-modal-close:hover { background: rgba(255, 255, 255, 0.3); }
.cashback-modal-close svg { width: 18px; height: 18px; }

.cashback-modal-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Hero */
.cashback-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: #FFF1E8;
  border-radius: var(--cart-radius-md);
}
.cashback-hero-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--cart-white);
  border-radius: var(--cart-radius-md);
  color: var(--cart-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cashback-hero-icon svg { width: 24px; height: 24px; }
.cashback-hero-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--cart-dark);
}
.cashback-hero-text strong { font-weight: var(--cart-w-heavy); }

/* Section title */
.cashback-section-title {
  font-size: 16px;
  font-weight: var(--cart-w-heavy);
  margin: 0 0 12px;
  color: var(--cart-dark);
}

/* Steps */
.cashback-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cashback-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--cart-gray-700);
}
.cashback-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cashback-check svg { width: 14px; height: 14px; }

/* Tiers */
.cashback-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cashback-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
}
.cashback-tier-range {
  font-size: 14px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
}
.cashback-tier-amount {
  font-size: 14px;
  font-weight: var(--cart-w-heavy);
  color: var(--cart-orange);
  font-family: var(--font-numeric);
}

/* Tagline */
.cashback-tagline {
  text-align: center;
  font-size: 14px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
  padding: 14px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: var(--cart-radius-md);
}

.cashback-cta {
  width: 100%;
  justify-content: center;
}

/* PB Cashback button (clickable to open modal) */
.pb-cashback {
  cursor: pointer;
  width: 100%;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
  border-radius: var(--cart-radius-md);
  transition: transform .15s, background .15s;
}
.pb-cashback:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}
.pb-cashback-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-violet);
  margin-inline-start: auto;
}
.pb-cashback-arrow svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .cashback-modal { padding: 0; align-items: flex-end; }
  .cashback-modal-panel {
    max-height: 88vh;
    border-radius: var(--cart-radius-lg) var(--cart-radius-lg) 0 0;
  }
  .cashback-modal-header { border-radius: var(--cart-radius-lg) var(--cart-radius-lg) 0 0; }
}

/* ════════════════════════════════════════════════════════════════════
   LANGUAGE ISOLATION — Prevent RTL/LTR mixing
   ════════════════════════════════════════════════════════════════════ */

/* Force consistent direction inheritance */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  direction: rtl;
  unicode-bidi: embed;
}

html[dir="ltr"] body,
html[dir="ltr"] body * {
  direction: ltr;
  unicode-bidi: embed;
}

/* Numbers always LTR (per Cart Design System) */
.nums,
.num,
.price,
[class*="price"],
[class*="-num"],
[class*="-count"],
.product-card-price,
.product-card-compare,
.discount-tag,
.cb-mega-deal-text,
.pb-mega-deal-text {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
/* Price ROW containers must keep document direction (RTL) so the price block
   aligns to the correct edge — right in Arabic. Only the inner number text is LTR.
   Without this, [class*="price"] matches the *-row/*-prices wrappers and forces
   their flex items to start from the left even on Arabic pages. */
.product-card-price-row,
.product-price-block,
.product-prices,
.price-row,
[class*="price-row"],
[class*="prices"],
[class*="price-block"] {
  direction: inherit !important;
  unicode-bidi: normal !important;
}
[dir="rtl"] .product-card-price-row,
[dir="rtl"] .product-price-block,
[dir="rtl"] [class*="price-row"],
[dir="rtl"] [class*="prices"] {
  justify-content: flex-start;
  text-align: right;
}

/* Force Arabic font on Arabic locale */
html[lang^="ar"] body,
html[lang^="ar"] body input,
html[lang^="ar"] body textarea,
html[lang^="ar"] body button,
html[lang^="ar"] body select,
html[lang^="ar"] body h1,
html[lang^="ar"] body h2,
html[lang^="ar"] body h3,
html[lang^="ar"] body h4,
html[lang^="ar"] body p,
html[lang^="ar"] body span,
html[lang^="ar"] body a,
html[lang^="ar"] body div {
  font-family: var(--cart-font-ar);
}

/* Force Latin font on English locale */
html[lang^="en"] body,
html[lang^="en"] body input,
html[lang^="en"] body textarea,
html[lang^="en"] body button,
html[lang^="en"] body select,
html[lang^="en"] body h1,
html[lang^="en"] body h2,
html[lang^="en"] body h3,
html[lang^="en"] body h4,
html[lang^="en"] body p,
html[lang^="en"] body span,
html[lang^="en"] body a,
html[lang^="en"] body div {
  font-family: var(--cart-font-en);
}

/* But always use Latin font for numbers */
html body .nums,
html body .num,
html body .price,
html body [class*="price"]:not(.product-price-block),
html body input[type="number"],
html body input[type="tel"] {
  font-family: var(--cart-font-en) !important;
}

/* Buttons icons always LTR (chevron stays on right) */
html[dir="rtl"] .btn svg.icon-chevron-end,
html[dir="rtl"] .btn .icon-chevron-end {
  transform: scaleX(-1);
}

/* ════════════════════════════════════════════════════════════════════
   IMAGE ZOOM MODAL — Cross-browser compatible
   ════════════════════════════════════════════════════════════════════ */

.image-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.image-zoom-modal.is-open {
  display: flex;
  animation: zoom-modal-in 0.25s var(--cart-ease-out);
}

@keyframes zoom-modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.image-zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.95);
  cursor: zoom-out;
  -webkit-tap-highlight-color: transparent;
}

.image-zoom-close {
  position: absolute;
  top: 20px;
  inset-inline-end: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.image-zoom-close:hover {
  background: rgba(255, 255, 255, 0.25);
}

.image-zoom-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.image-zoom-content img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform 0.2s var(--cart-ease-out);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  touch-action: none;
}

/* Mobile: full-screen zoom */
@media (max-width: 768px) {
  .image-zoom-close {
    top: 12px;
    inset-inline-end: 12px;
    width: 40px;
    height: 40px;
  }
  .image-zoom-content img {
    max-width: 100vw;
    max-height: 100vh;
  }
}

/* Smooth main image transition */
.product-gallery-main img {
  transition: opacity 0.2s var(--cart-ease-out);
  cursor: zoom-in;
}

/* Active thumbnail: clear visual indicator */
.product-gallery-thumb {
  border: 2px solid transparent;
  border-radius: var(--cart-radius-md);
  background: var(--cart-cloud);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.product-gallery-thumb:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}
.product-gallery-thumb.active {
  border-color: var(--cart-orange);
}
.product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zoom hint badge on main image */
.product-gallery-zoom-hint {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cart-dark);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.product-gallery-main:hover .product-gallery-zoom-hint {
  opacity: 1;
}

/* ════════════════════════════════════════════════════════════════════
   VARIANT OPTIONS — Make sure clicks register
   ════════════════════════════════════════════════════════════════════ */

.variant-option {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.variant-option:hover:not(.unavailable) {
  border-color: var(--cart-orange);
  background: rgba(253, 87, 42, 0.04);
}

.variant-option.selected {
  border-color: var(--cart-orange) !important;
  background: rgba(253, 87, 42, 0.08) !important;
  color: var(--cart-orange) !important;
  font-weight: 700;
}

.variant-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Variant change → smooth feedback */
.variants-block {
  transition: opacity 0.15s;
}
.variants-block.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT META ROW — Stock | SKU | New (unified design)
   ════════════════════════════════════════════════════════════════════ */

.product-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-block: 8px 14px;
  font-size: 13px;
}

.product-meta-row .meta-divider {
  color: var(--color-border-strong);
  font-weight: 300;
  user-select: none;
  font-size: 14px;
}

/* SKU */
.product-meta-row .product-sku {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 400;
}
.product-meta-row .product-sku strong {
  color: var(--cart-dark);
  font-weight: 700;
  font-family: var(--cart-font-en);
  letter-spacing: 0.02em;
}

/* Stock indicator — pill badge (matches new badge style) */
.product-meta-row .stock-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.product-meta-row .stock-indicator.in-stock {
  background: rgba(31, 174, 106, 0.12);
  color: #1FAE6A;
  border: 1px solid rgba(31, 174, 106, 0.25);
}
.product-meta-row .stock-indicator.in-stock::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #1FAE6A;
  border-radius: 50%;
  display: inline-block;
  animation: stock-pulse 2s ease-in-out infinite;
}
.product-meta-row .stock-indicator.out-stock {
  background: rgba(229, 40, 60, 0.10);
  color: #E5283C;
  border: 1px solid rgba(229, 40, 60, 0.25);
}
.product-meta-row .stock-indicator.out-stock::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #E5283C;
  border-radius: 50%;
  display: inline-block;
}

@keyframes stock-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

/* New badge — same style as stock-indicator */
.product-meta-row .badge-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background: linear-gradient(135deg, rgba(78, 36, 181, 0.10) 0%, rgba(253, 87, 42, 0.10) 100%);
  color: var(--cart-violet);
  border: 1px solid rgba(78, 36, 181, 0.25);
}
.product-meta-row .badge-new::before {
  content: '✨';
  font-size: 11px;
  line-height: 1;
}

/* Rating in row */
.product-meta-row .product-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 183, 42, 0.10);
  border: 1px solid rgba(255, 183, 42, 0.25);
  font-size: 12px;
  font-weight: 700;
  color: #B6791D;
}
.product-meta-row .product-rating .rating-stars {
  display: inline-flex;
  gap: 1px;
  color: #FFB72A;
}
.product-meta-row .product-rating .rating-stars svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.product-meta-row .product-rating strong {
  color: var(--cart-dark);
  font-weight: 800;
  font-family: var(--cart-font-en);
}
.product-meta-row .product-rating .rating-count {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .product-meta-row {
    gap: 6px;
    font-size: 12px;
  }
  .product-meta-row .meta-divider {
    display: none; /* dividers off on mobile */
  }
  .product-meta-row .stock-indicator,
  .product-meta-row .badge-new,
  .product-meta-row .product-rating {
    padding: 4px 10px;
    font-size: 11px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT BOOSTERS — SOCIAL ROW (refined with live indicator)
   ════════════════════════════════════════════════════════════════════ */

.pb-social-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pb-social-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
  position: relative;
  overflow: hidden;
}

.pb-social-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-white);
  border-radius: 8px;
  color: var(--cart-violet);
}
.pb-social-icon svg {
  width: 18px;
  height: 18px;
}

.pb-social-icon--bought {
  color: var(--cart-orange);
}

.pb-social-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.pb-social-count {
  font-size: 18px;
  font-weight: 900;
  color: var(--cart-dark);
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  display: inline-block;
  transition: transform 0.3s var(--cart-ease-spring), color 0.3s;
  line-height: 1;
}

.pb-social-count.is-updating {
  animation: count-bump 0.6s var(--cart-ease-spring);
  color: var(--cart-orange);
}

@keyframes count-bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.25); color: var(--cart-orange); }
  60% { transform: scale(0.95); }
  100% { transform: scale(1); color: var(--cart-dark); }
}

.pb-social-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Live pulsing dot */
.pb-live-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1FAE6A;
  position: relative;
  margin-inline-start: auto;
  margin-inline-end: 4px;
}
.pb-live-dot::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #1FAE6A;
  opacity: 0.4;
  animation: live-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-ping {
  0% { transform: scale(1); opacity: 0.4; }
  75%, 100% { transform: scale(2.5); opacity: 0; }
}

@media (max-width: 480px) {
  .pb-social-row {
    grid-template-columns: 1fr;
  }
  .pb-social-count { font-size: 16px; }
  .pb-social-label { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT SIDEBAR — Primary purchase area (desktop)
   Includes: Quantity, ATC, Buy Now, Wishlist, Share
   ════════════════════════════════════════════════════════════════════ */

.product-sidebar {
  position: sticky;
  top: 80px;
  height: fit-content;
  align-self: start;
}

.sidebar-card {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Price block */
.sidebar-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  line-height: 1;
}
.sidebar-compare {
  font-size: 14px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

/* Stock row */
.sidebar-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Delivery info card inside sidebar */
.sidebar-delivery {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
}
.sidebar-delivery-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--cart-white);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-violet);
}
.sidebar-delivery-icon svg { width: 20px; height: 20px; }
.sidebar-delivery-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.sidebar-delivery-label {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-delivery-label strong {
  color: var(--cart-dark);
  font-weight: 700;
}
.sidebar-delivery-eta {
  font-size: 13px;
  color: var(--cart-violet);
  font-weight: 800;
}

/* Trust badges list */
.delivery-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delivery-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cart-dark);
  line-height: 1.4;
}
.delivery-info-item svg {
  width: 16px;
  height: 16px;
  color: #1FAE6A;
  flex-shrink: 0;
}

/* Quantity row */
.sidebar-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.sidebar-qty-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
}
.sidebar-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--cart-cloud);
  border-radius: 999px;
  padding: 2px;
}
.sidebar-qty-stepper button {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--cart-white);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  color: var(--cart-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sidebar-qty-stepper button:hover {
  background: var(--cart-orange);
  color: #fff;
}
.sidebar-qty-stepper input {
  width: 50px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  color: var(--cart-dark);
  font-family: var(--cart-font-en);
  -moz-appearance: textfield;
}
.sidebar-qty-stepper input::-webkit-outer-spin-button,
.sidebar-qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Action buttons */
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebar-atc,
.sidebar-buy-now {
  width: 100%;
  justify-content: center;
  font-size: 15px;
  padding: 14px 20px;
}
.sidebar-atc svg {
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
}

/* Secondary actions: Wishlist + Share */
.sidebar-secondary-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 6px;
}
.sidebar-icon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  background: var(--cart-cloud);
  border: 1px solid transparent;
  border-radius: var(--cart-radius-md);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  color: var(--cart-dark);
  font-family: inherit;
}
.sidebar-icon-btn:hover {
  background: var(--cart-white);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}
.sidebar-icon-btn[aria-pressed="true"] {
  background: rgba(229, 40, 60, 0.08);
  border-color: rgba(229, 40, 60, 0.3);
  color: #E5283C;
}
.sidebar-icon-btn[aria-pressed="true"] svg {
  fill: currentColor;
}
.sidebar-icon-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidebar-icon-btn-icon svg {
  width: 20px;
  height: 20px;
}
.sidebar-icon-btn-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Trust footer */
.sidebar-trust-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.sidebar-trust-footer span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sidebar-trust-footer svg {
  width: 14px;
  height: 14px;
}
.sidebar-trust-divider {
  color: var(--color-border-strong);
}

/* Hide sidebar on mobile (sticky-atc takes over) */
@media (max-width: 1024px) {
  .product-sidebar {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT TABS — Full-width section (description)
   ════════════════════════════════════════════════════════════════════ */

.product-tabs-section {
  margin-block: 32px 24px;
}

.product-tabs {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
}

.product-tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--cart-cloud);
  overflow-x: auto;
  scrollbar-width: none;
}
.product-tabs-nav::-webkit-scrollbar { display: none; }

.product-tab-btn {
  flex: 1;
  min-width: 120px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.product-tab-btn:hover {
  color: var(--cart-dark);
  background: rgba(255, 255, 255, 0.5);
}
.product-tab-btn.active {
  color: var(--cart-orange);
  background: var(--cart-white);
  border-bottom-color: var(--cart-orange);
}

.product-tab-content {
  display: none;
  padding: 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cart-dark);
}
.product-tab-content.active {
  display: block;
}

.product-tab-content h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--cart-dark);
  margin: 16px 0 8px;
}
.product-tab-content h3:first-child { margin-top: 0; }

.product-tab-content ul {
  margin: 8px 0;
  padding-inline-start: 18px;
}
.product-tab-content li {
  margin-bottom: 6px;
}

.product-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.product-specs-table tr {
  border-bottom: 1px solid var(--color-border);
}
.product-specs-table tr:last-child { border-bottom: none; }
.product-specs-table td {
  padding: 12px 0;
}
.product-specs-table td:first-child {
  color: var(--color-text-muted);
  width: 40%;
  font-weight: 500;
}
.product-specs-table td:last-child {
  color: var(--cart-dark);
  font-weight: 700;
}

@media (max-width: 768px) {
  .product-tabs {
    border-radius: var(--cart-radius-md);
  }
  .product-tab-btn {
    padding: 12px 14px;
    font-size: 13px;
  }
  .product-tab-content {
    padding: 18px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   VIEWING NOW — Minimal old style (less prominent)
   Override the previous big design
   ════════════════════════════════════════════════════════════════════ */

.pb-social-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 16px !important;
  padding: 8px 0;
  font-size: 12px;
  color: var(--color-text-muted);
  background: transparent !important;
  border: none !important;
}

.pb-social-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px;
  color: var(--color-text-muted);
}

.pb-social-icon {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--cart-violet);
}
.pb-social-icon svg {
  width: 14px !important;
  height: 14px !important;
}
.pb-social-icon--bought {
  color: var(--cart-orange);
}

.pb-social-text {
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 4px !important;
  align-items: baseline !important;
  line-height: 1 !important;
}

.pb-social-count {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--cart-dark) !important;
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.pb-social-label {
  font-size: 12px !important;
  color: var(--color-text-muted) !important;
  font-weight: 500 !important;
  margin-top: 0 !important;
}

.pb-live-dot {
  width: 6px !important;
  height: 6px !important;
  background: #1FAE6A;
  border-radius: 50%;
  margin-inline-start: 2px !important;
  position: relative;
  flex-shrink: 0;
}
.pb-live-dot::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #1FAE6A;
  opacity: 0.4;
  animation: live-ping 2s cubic-bezier(0,0,0.2,1) infinite;
}

@media (max-width: 480px) {
  .pb-social-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   VENDOR INFO CARD — "Sold by" with logo
   ════════════════════════════════════════════════════════════════════ */

.vendor-info-card {
  background: linear-gradient(135deg, rgba(78,36,181,0.04) 0%, rgba(253,87,42,0.04) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vendor-info-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vendor-info-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vendor-info-body {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  border-radius: var(--cart-radius-sm);
  transition: background 0.15s;
}
.vendor-info-body:hover {
  background: rgba(255, 255, 255, 0.5);
}

.vendor-info-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vendor-info-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vendor-info-logo--initial {
  background: var(--cart-violet);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  font-family: var(--cart-font-en);
}

.vendor-info-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vendor-info-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.vendor-info-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #1FAE6A;
  color: #fff;
  border-radius: 50%;
}
.vendor-info-verified svg {
  width: 10px;
  height: 10px;
}

.vendor-info-tagline {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.vendor-info-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--cart-dark);
  margin-top: 2px;
}
.vendor-info-rating svg {
  width: 12px;
  height: 12px;
  color: #FFB72A;
  fill: currentColor;
}
.vendor-info-rating strong {
  font-family: var(--cart-font-en);
  color: var(--cart-dark);
}

.vendor-info-badge {
  background: rgba(31,174,106,0.10);
  color: #1FAE6A;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.vendor-info-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.vendor-info-arrow svg {
  width: 14px;
  height: 14px;
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT BUNDLE — Buy together & save (with discount)
   ════════════════════════════════════════════════════════════════════ */

.product-bundle-section {
  margin-block: 32px 24px;
}

.bundle-block {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  padding: 24px;
}

.bundle-header {
  margin-bottom: 20px;
}

.bundle-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--cart-dark);
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bundle-discount-pill {
  display: inline-flex;
  align-items: center;
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
  font-weight: 900;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--cart-font-en);
}

.bundle-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

.bundle-items {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
}

.bundle-item {
  flex: 1 1 180px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--cart-cloud);
  border: 2px solid transparent;
  border-radius: var(--cart-radius-md);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}
.bundle-item:has(input:checked) {
  border-color: var(--cart-orange);
  background: rgba(253, 87, 42, 0.04);
}
.bundle-item:hover:not(.bundle-item--main) {
  transform: translateY(-2px);
}

.bundle-item input[type="checkbox"] {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  width: 20px;
  height: 20px;
  accent-color: var(--cart-orange);
  cursor: pointer;
  z-index: 2;
}

.bundle-item--main input {
  display: none;
}

.bundle-item-image {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--cart-radius-sm);
  overflow: hidden;
  background: var(--cart-white);
}
.bundle-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bundle-item-badge {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 6px;
  background: var(--cart-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  z-index: 1;
}

.bundle-item-check {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  width: 20px;
  height: 20px;
  background: #1FAE6A;
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}
.bundle-item:has(input:checked) .bundle-item-check {
  display: inline-flex;
}
.bundle-item-check svg {
  width: 12px;
  height: 12px;
}

.bundle-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bundle-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  line-height: 1.3;
}
.bundle-item-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}

.bundle-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  color: var(--color-text-muted);
  flex-shrink: 0;
  padding: 0 4px;
}

.bundle-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bundle-totals {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bundle-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.bundle-total-original {
  text-decoration: line-through;
  font-family: var(--cart-font-en);
  color: var(--color-text-muted);
}

.bundle-total-row--save {
  color: #1FAE6A;
  font-weight: 700;
}
.bundle-total-saved {
  color: #1FAE6A;
  font-weight: 800;
  font-family: var(--cart-font-en);
}

.bundle-total-row--final {
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  font-size: 16px;
  color: var(--cart-dark);
  font-weight: 800;
}
.bundle-total-final {
  font-size: 22px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}

.bundle-add-btn {
  flex-shrink: 0;
}
.bundle-add-btn svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
  .bundle-block {
    padding: 16px;
  }
  .bundle-title {
    font-size: 18px;
  }
  .bundle-items {
    flex-direction: column;
  }
  .bundle-plus {
    display: none;
  }
  .bundle-item {
    flex-direction: row;
    align-items: center;
  }
  .bundle-item-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }
  .bundle-item-info {
    flex: 1;
  }
  .bundle-summary {
    flex-direction: column;
    align-items: stretch;
  }
  .bundle-add-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT GRID — Responsive columns per device
   ════════════════════════════════════════════════════════════════════ */

.product-grid--responsive {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--cols-m, 2), 1fr);
}

@media (min-width: 768px) {
  .product-grid--responsive {
    grid-template-columns: repeat(var(--cols-t, 3), 1fr);
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .product-grid--responsive {
    grid-template-columns: repeat(var(--cols-d, 4), 1fr);
    gap: 20px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT SLIDER — Horizontal scroll with arrows
   ════════════════════════════════════════════════════════════════════ */

.product-slider {
  position: relative;
}

.product-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols-m, 2) - 1) * 16px) / var(--cols-m, 2));
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 8px;
}
/* Mobile: lock manual touch/wheel scroll — navigate only via arrows + dots.
   Programmatic JS scrollTo/scrollBy (from arrows/dots) still works. */
@media (max-width: 1023px) {
  .product-slider-track {
    overflow-x: hidden;
    scroll-snap-type: none;
    touch-action: pan-y; /* allow vertical page scroll, block horizontal swipe of the track */
    -webkit-overflow-scrolling: auto;
    padding-bottom: 0;
  }
}
.product-slider-track::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .product-slider-track {
    grid-auto-columns: calc((100% - (var(--cols-t, 3) - 1) * 18px) / var(--cols-t, 3));
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .product-slider-track {
    grid-auto-columns: calc((100% - (var(--cols-d, 4) - 1) * 20px) / var(--cols-d, 4));
    gap: 20px;
  }
}

.product-slider-slide {
  scroll-snap-align: start;
  min-width: 0;
}

.slider-arrow {
  position: absolute;
  /* Anchor on the product IMAGE center. Image is square, so its height ≈ column
     width in vw. For the default 2-col mobile that's ~22vw from the top.
     Overridden per breakpoint below. Avoids arrows drifting to card bottom
     (which happens with %-based top since the slider is much taller than the image). */
  top: 22vw;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cart-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.16);
  transition: background 0.15s, color 0.15s, transform 0.15s, opacity 0.15s;
}
.slider-arrow:hover {
  background: var(--cart-orange);
  color: #fff;
}
.slider-arrow:active { transform: translateY(-50%) scale(0.9); }
.slider-arrow svg {
  width: 20px;
  height: 20px;
}
/* Arrow positioning — physical sides, with RTL-correct glyph direction.
   chevron-end points "next" in reading direction. */
.slider-arrow--prev { inset-inline-start: 6px; }
.slider-arrow--next { inset-inline-end: 6px; }
/* Arrow glyph direction via --rtl-flip (overrides icon inline style).
   prev = opposite of document direction; next = same as document direction. */
.slider-arrow--prev { --rtl-flip: -1; }
.slider-arrow--next { --rtl-flip: 1; }
[dir="rtl"] .slider-arrow--prev { --rtl-flip: 1; }
[dir="rtl"] .slider-arrow--next { --rtl-flip: -1; }

.slider-arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
/* Arrows visible on ALL sizes (mobile users benefit too), slightly smaller on phone */
@media (max-width: 767px) {
  .slider-arrow { width: 38px; height: 38px; top: 22vw; }
  .slider-arrow svg { width: 17px; height: 17px; }
  .slider-arrow--prev { inset-inline-start: 2px; }
  .slider-arrow--next { inset-inline-end: 2px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .slider-arrow { top: 15vw; }
}
@media (min-width: 1024px) {
  /* Desktop: container is centered max ~1200px; 4-col image ≈ 270px → center ≈ 135px */
  .slider-arrow { top: 135px; }
}

/* ── Slider dots (pagination) ── */
.product-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.product-slider-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--color-border, #d8d8d8);
  cursor: pointer;
  transition: width 0.25s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.product-slider-dot.is-active {
  width: 26px;
  background: var(--cart-orange, #FD572A);
}
.product-slider-dot:hover { background: var(--cart-violet, #4E24B5); }
/* Dots: keep visual size tiny but give a comfortable invisible tap zone */
.product-slider-dot { position: relative; }
.product-slider-dot::before {
  content: '';
  position: absolute;
  inset: -10px;
}

@media (max-width: 767px) {
  .product-slider-dots { gap: 5px; margin-top: 12px; }
  .product-slider-dot { width: 6px; height: 6px; }
  .product-slider-dot.is-active { width: 16px; }
}


/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — Refined: NO PRICE, Variants above ATC, minimal qty
   ════════════════════════════════════════════════════════════════════ */

/* Sidebar variants: minimal pill design */
.sidebar-variants {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-block: 8px 4px;
}

.sidebar-variant-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-variant-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.sidebar-variant-name {
  color: var(--color-text-muted);
  font-weight: 500;
}
.sidebar-variant-name::after {
  content: ': ';
}
.sidebar-variant-selected {
  color: var(--cart-dark);
  font-weight: 700;
}

.sidebar-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sidebar-variant-option {
  position: relative;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  background: var(--cart-white);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cart-dark);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
}

.sidebar-variant-option:hover:not(.unavailable) {
  border-color: var(--cart-orange);
  color: var(--cart-orange);
}

.sidebar-variant-option.selected {
  border-color: var(--cart-orange) !important;
  background: rgba(253, 87, 42, 0.08) !important;
  color: var(--cart-orange) !important;
  font-weight: 800;
}

/* Unavailable: grayscale + strikethrough */
.sidebar-variant-option.unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--cart-cloud);
  color: var(--color-text-muted);
  position: relative;
  pointer-events: none;
}
.sidebar-variant-option.unavailable .sidebar-variant-option-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.sidebar-variant-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Minimal Quantity row */
.sidebar-qty-minimal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.sidebar-qty-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.sidebar-qty-controls {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--cart-white);
}
.sidebar-qty-controls button {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--cart-dark);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}
.sidebar-qty-controls button:hover {
  color: var(--cart-orange);
}
.sidebar-qty-controls input {
  width: 36px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  font-family: var(--cart-font-en);
  -moz-appearance: textfield;
  padding: 0;
}
.sidebar-qty-controls input::-webkit-outer-spin-button,
.sidebar-qty-controls input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Disabled buttons (out of stock) */
.sidebar-atc:disabled,
.sidebar-buy-now:disabled,
.sticky-atc button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: var(--cart-cloud) !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
  transform: none !important;
  border-color: var(--color-border) !important;
}

/* Hide old sidebar-price-block (now removed) */
.sidebar-price-block { display: none; }

/* ════════════════════════════════════════════════════════════════════
   BUNDLE MINI — Compact "Buy together & save" before tabs
   ════════════════════════════════════════════════════════════════════ */

.bundle-mini-section {
  margin-block: 24px 16px;
}

.bundle-mini {
  background: linear-gradient(135deg, rgba(253,87,42,0.04) 0%, rgba(78,36,181,0.04) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bundle-mini-header {
  flex: 1 1 auto;
  min-width: 200px;
}

.bundle-mini-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bundle-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 8px;
  flex-shrink: 0;
}
.bundle-mini-icon svg {
  width: 14px;
  height: 14px;
}

.bundle-mini-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-dark);
  margin: 0;
}

.bundle-mini-pill {
  display: inline-flex;
  align-items: center;
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 1px solid var(--cart-violet);
  font-weight: 800;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--cart-font-en);
}

.bundle-mini-items {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.bundle-mini-item {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--cart-radius-sm);
  overflow: hidden;
  background: var(--cart-white);
  border: 2px solid var(--color-border);
  cursor: pointer;
  transition: border-color 0.15s;
}
.bundle-mini-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bundle-mini-item--main {
  border-color: var(--cart-orange);
  cursor: default;
}
.bundle-mini-item:has(input:checked):not(.bundle-mini-item--main) {
  border-color: var(--cart-orange);
}

.bundle-mini-item input[type="checkbox"] {
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 14px;
  height: 14px;
  accent-color: var(--cart-orange);
  cursor: pointer;
  z-index: 2;
  margin: 0;
}

.bundle-mini-check {
  display: none;
}

.bundle-mini-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--color-text-muted);
  width: 16px;
}

.bundle-mini-summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bundle-mini-prices {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  line-height: 1.2;
}

.bundle-mini-original {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

.bundle-mini-final {
  font-size: 16px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}

.bundle-mini-saved {
  font-size: 10px;
  color: #1FAE6A;
  font-weight: 700;
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.bundle-mini-saved strong {
  font-family: var(--cart-font-en);
  font-weight: 800;
}

.bundle-mini-add {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .bundle-mini {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .bundle-mini-items {
    justify-content: center;
    margin-block: 4px;
  }
  .bundle-mini-summary {
    justify-content: space-between;
    width: 100%;
  }
  .bundle-mini-prices {
    align-items: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT TABS — Better design
   ════════════════════════════════════════════════════════════════════ */

.product-tabs {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.product-tabs-nav {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--cart-cloud);
  border-radius: 999px;
  border-bottom: none;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.product-tabs-nav::-webkit-scrollbar { display: none; }

.product-tab-btn {
  flex: 0 0 auto;
  padding: 10px 22px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.2s var(--cart-ease-out), color 0.2s var(--cart-ease-out), border-color 0.2s var(--cart-ease-out), opacity 0.2s var(--cart-ease-out), transform 0.2s var(--cart-ease-out), box-shadow 0.2s var(--cart-ease-out);
  white-space: nowrap;
  font-family: inherit;
}
.product-tab-btn:hover {
  color: var(--cart-dark);
  background: rgba(255, 255, 255, 0.5);
}
.product-tab-btn.active {
  color: var(--cart-white);
  background: var(--cart-dark);
  border-bottom-color: transparent;
}

.product-tab-content {
  display: none;
  padding: 22px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cart-dark);
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  animation: tab-in 0.25s var(--cart-ease-out);
}
.product-tab-content.active {
  display: block;
}

@keyframes tab-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.product-tab-content h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--cart-dark);
  margin: 18px 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-tab-content h3:first-child { margin-top: 0; }

.product-tab-content ul {
  margin: 8px 0;
  padding-inline-start: 0;
  list-style: none;
}
.product-tab-content ul li {
  position: relative;
  padding-inline-start: 24px;
  margin-bottom: 8px;
  line-height: 1.6;
}
.product-tab-content ul li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: rgba(31, 174, 106, 0.12);
  color: #1FAE6A;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-specs-table {
  width: 100%;
  border-collapse: collapse;
}
.product-specs-table tr {
  border-bottom: 1px solid var(--color-border);
}
.product-specs-table tr:last-child { border-bottom: none; }
.product-specs-table td {
  padding: 12px 0;
}
.product-specs-table td:first-child {
  color: var(--color-text-muted);
  width: 35%;
  font-weight: 500;
  font-size: 13px;
}
.product-specs-table td:last-child {
  color: var(--cart-dark);
  font-weight: 700;
}

@media (max-width: 768px) {
  .product-tabs-nav {
    width: 100%;
  }
  .product-tab-btn {
    padding: 8px 14px;
    font-size: 12px;
  }
  .product-tab-content {
    padding: 16px;
  }
}

/* Reset old tabs container styles */
.product-tabs-section .product-tabs-nav {
  background: var(--cart-cloud);
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE STICKY ATC BAR — Always visible at bottom on mobile
   Replaces old .sticky-atc with smarter design
   ════════════════════════════════════════════════════════════════════ */

.mobile-atc-bar {
  position: fixed;
  inset-block-end: var(--bottom-nav-h, 64px);
  inset-inline: 0;
  z-index: var(--z-atc-bar);
  background: var(--cart-white);
  border-top: 1px solid var(--color-border);
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  display: none; /* Hidden by default — only mobile */
}

@media (max-width: 1023px) {
  .mobile-atc-bar {
    display: flex;
  }
  /* Add bottom padding to body so content doesn't hide behind bar */
  body.template-product {
    padding-block-end: calc(var(--bottom-nav-h, 64px) + 70px);
  }
}

.mobile-atc-bar-price {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  line-height: 1.1;
  min-width: 70px;
}
.mobile-atc-bar-price-current {
  font-size: 16px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.mobile-atc-bar-price-compare {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

.mobile-atc-bar-actions {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-atc-bar-buy,
.mobile-atc-bar-cart {
  font-size: 13px;
  padding: 11px 10px;
  white-space: nowrap;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
}
.mobile-atc-bar-cart svg {
  width: 16px;
  height: 16px;
}
.mobile-atc-bar-buy:disabled,
.mobile-atc-bar-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cart-cloud) !important;
  color: var(--color-text-muted) !important;
}

/* Hide old sticky-atc completely (replaced by mobile-atc-bar) */
.sticky-atc { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   MOBILE PURCHASE DRAWER — Slides up from bottom
   Shows variants + qty + final actions
   ════════════════════════════════════════════════════════════════════ */

.mobile-purchase-drawer {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
}
.mobile-purchase-drawer:not([hidden]) {
  display: block;
}
.mobile-purchase-drawer.is-open {
  display: block;
}

.mobile-purchase-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  opacity: 0;
  transition: opacity 0.25s var(--cart-ease-out);
}
.mobile-purchase-drawer.is-open .mobile-purchase-backdrop {
  opacity: 1;
}

.mobile-purchase-panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--cart-white);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  transform: translateY(100%);
  transition: transform 0.3s var(--cart-ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-purchase-drawer.is-open .mobile-purchase-panel {
  transform: translateY(0);
}

.mobile-purchase-handle {
  width: 40px;
  height: 4px;
  background: var(--color-border-strong);
  border-radius: 999px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}

.mobile-purchase-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-purchase-product {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.mobile-purchase-image {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--cart-radius-sm);
  overflow: hidden;
  background: var(--cart-cloud);
  border: 1px solid var(--color-border);
}
.mobile-purchase-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-purchase-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-purchase-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mobile-purchase-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.mobile-purchase-price .nums:first-child {
  font-size: 16px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}
.mobile-purchase-compare {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

.mobile-purchase-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cart-cloud);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  transition: background 0.15s;
}
.mobile-purchase-close:hover {
  background: var(--color-border);
}
.mobile-purchase-close svg {
  width: 16px;
  height: 16px;
}

.mobile-purchase-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Variants in mobile drawer */
.mobile-purchase-variants {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.mobile-variant-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-variant-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.mobile-variant-name {
  color: var(--color-text-muted);
  font-weight: 500;
}
.mobile-variant-name::after {
  content: ': ';
}
.mobile-variant-selected {
  color: var(--cart-dark);
  font-weight: 800;
}

.mobile-variant-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mobile-variant-option {
  position: relative;
  padding: 10px 16px;
  border: 1.5px solid var(--color-border);
  background: var(--cart-white);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-variant-option:active:not(.unavailable) {
  transform: scale(0.97);
}

.mobile-variant-option.selected {
  border-color: var(--cart-orange) !important;
  background: rgba(253, 87, 42, 0.08) !important;
  color: var(--cart-orange) !important;
  font-weight: 800;
}

.mobile-variant-option.unavailable {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--cart-cloud);
  color: var(--color-text-muted);
  pointer-events: none;
}
.mobile-variant-option.unavailable .mobile-variant-option-text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.mobile-variant-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Quantity in mobile drawer */
.mobile-purchase-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.mobile-purchase-qty-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--cart-dark);
}

.mobile-purchase-qty-controls {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--cart-white);
}
.mobile-purchase-qty-controls button {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--cart-dark);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-purchase-qty-controls button:active {
  background: var(--cart-cloud);
}
.mobile-purchase-qty-controls input {
  width: 44px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 800;
  color: var(--cart-dark);
  font-family: var(--cart-font-en);
  -moz-appearance: textfield;
}
.mobile-purchase-qty-controls input::-webkit-outer-spin-button,
.mobile-purchase-qty-controls input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mobile-purchase-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--cart-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.mobile-purchase-buy,
.mobile-purchase-add {
  font-size: 14px;
  padding: 14px 12px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}
.mobile-purchase-add svg {
  width: 18px;
  height: 18px;
}

.mobile-purchase-buy:disabled,
.mobile-purchase-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--cart-cloud) !important;
  color: var(--color-text-muted) !important;
}

/* Hide drawer entirely on desktop */
@media (min-width: 1024px) {
  .mobile-atc-bar,
  .mobile-purchase-drawer {
    display: none !important;
  }
  body.template-product {
    padding-block-end: 0;
  }
}

/* Lock scroll on body when drawer is open */
body.mobile-drawer-open {
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   WHATSAPP ORDER BUTTON
   ════════════════════════════════════════════════════════════════════ */

.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.btn-whatsapp:hover {
  background: #1FB755;
  transform: translateY(-1px);
  color: #fff;
}
.btn-whatsapp:active {
  transform: scale(0.98);
}
.btn-whatsapp svg {
  width: 18px;
  height: 18px;
}

.sidebar-whatsapp {
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   REVIEWS TAB — Rating badge in tab + native fallback
   ════════════════════════════════════════════════════════════════════ */

.tab-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-start: 6px;
  padding: 1px 8px;
  background: rgba(255, 183, 42, 0.15);
  color: #B6791D;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--cart-font-en);
}

.product-tab-btn.active .tab-rating-badge {
  background: rgba(255, 183, 42, 0.25);
  color: #FFB72A;
}

/* Native reviews fallback styles */
.reviews-summary {
  text-align: center;
  padding: 24px;
}
.reviews-summary-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.reviews-rating-value {
  font-size: 48px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
  line-height: 1;
}
.reviews-rating-stars {
  display: inline-flex;
  gap: 2px;
  color: #FFB72A;
}
.reviews-rating-stars svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.reviews-summary-count {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

.reviews-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--color-text-muted);
  font-size: 14px;
}
.reviews-empty p {
  margin: 0;
}

.judgeme-fallback {
  text-align: center;
  padding: 24px 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
  margin-top: 12px;
}

/* Judge.me widget styling overrides */
.jdgm-widget,
.jdgm-rev-widg {
  font-family: inherit !important;
}
.jdgm-rev-widg__title {
  color: var(--cart-dark) !important;
  font-weight: 800 !important;
}

/* RTL support for Judge.me widget */
[dir="rtl"] .jdgm-widget,
[dir="rtl"] .jdgm-rev-widg {
  direction: rtl;
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════════
   IQD price display (for Iraqi market)
   ════════════════════════════════════════════════════════════════════ */

.price-iqd {
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: var(--cart-font-en);
  display: inline-block;
  margin-inline-start: 6px;
}
.price-iqd::before {
  content: '≈ ';
}

/* ════════════════════════════════════════════════════════════════════
   STOCK NOTIFY (Out of stock subscription)
   ════════════════════════════════════════════════════════════════════ */

.stock-notify-block {
  margin-block: 14px 16px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(78,36,181,0.06) 0%, rgba(253,87,42,0.04) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
}

.stock-notify-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.stock-notify-header strong {
  font-size: 14px;
  color: var(--cart-dark);
  font-weight: 800;
  display: block;
}
.stock-notify-sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 2px;
}

.stock-notify-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--cart-violet);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stock-notify-icon svg { width: 16px; height: 16px; }

.stock-notify-header--preorder .stock-notify-icon {
  background: var(--cart-orange);
}

.stock-notify-input-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.stock-notify-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-family: inherit;
  background: var(--cart-white);
}
.stock-notify-input:focus {
  outline: none;
  border-color: var(--cart-orange);
}

.stock-notify-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 13px;
}

.stock-notify-success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  margin-top: 8px;
  background: rgba(31, 174, 106, 0.10);
  color: #1FAE6A;
  border-radius: var(--cart-radius-sm);
  font-size: 13px;
  font-weight: 700;
}
.stock-notify-success svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 480px) {
  .stock-notify-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   BULK DISCOUNT TIERS
   ════════════════════════════════════════════════════════════════════ */

.bulk-discount {
  margin-block: 16px;
  padding: 14px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
}

.bulk-discount-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--cart-dark);
}
.bulk-discount-header strong {
  font-weight: 800;
  font-size: 14px;
}
.bulk-discount-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
}
.bulk-discount-icon svg { width: 12px; height: 12px; }

.bulk-discount-tiers {
  display: grid;
  gap: 6px;
}

.bulk-discount-tier {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--cart-cloud);
  border: 1.5px solid transparent;
  border-radius: var(--cart-radius-sm);
  cursor: pointer;
  text-align: start;
  transition: border-color 0.15s, transform 0.15s;
  font-family: inherit;
}
.bulk-discount-tier:hover {
  border-color: var(--cart-orange);
  background: rgba(253, 87, 42, 0.04);
}
.bulk-discount-tier.selected {
  border-color: var(--cart-orange) !important;
  background: rgba(253, 87, 42, 0.08) !important;
}

.bulk-discount-best-value {
  position: absolute;
  top: -8px;
  inset-inline-end: 10px;
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 1px solid var(--cart-violet);
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bulk-discount-tier-qty {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--cart-white);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
  border: 2px solid var(--cart-orange);
}

.bulk-discount-tier-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bulk-discount-tier-label {
  font-size: 12px;
  color: var(--cart-dark);
  font-weight: 700;
  line-height: 1.2;
}
.bulk-discount-tier-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
}
.bulk-discount-tier-price strong {
  color: var(--cart-orange);
  font-weight: 800;
  font-family: var(--cart-font-en);
}
.bulk-discount-tier-per {
  color: var(--color-text-muted);
}

.bulk-discount-tier-saving {
  flex-shrink: 0;
  background: var(--cart-orange);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--cart-font-en);
}

/* ════════════════════════════════════════════════════════════════════
   SIZE GUIDE
   ════════════════════════════════════════════════════════════════════ */

.size-guide-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--color-border-strong);
  border-radius: 999px;
  color: var(--cart-dark);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.size-guide-trigger:hover {
  border-color: var(--cart-orange);
  color: var(--cart-orange);
}
.size-guide-trigger svg { width: 14px; height: 14px; }

.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.size-guide-modal:not([hidden]) { display: flex; }

.size-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 31, 31, 0.55);
  cursor: pointer;
}

.size-guide-panel {
  position: relative;
  background: var(--cart-white);
  border-radius: var(--cart-radius-lg);
  border: 1px solid var(--color-border);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.size-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.size-guide-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--cart-dark);
}
.size-guide-close {
  background: var(--cart-cloud);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.size-guide-close svg { width: 16px; height: 16px; }

.size-guide-body {
  padding: 20px;
  overflow-y: auto;
}
.size-guide-body img {
  width: 100%;
  height: auto;
  border-radius: var(--cart-radius-sm);
  margin-bottom: 16px;
}
.size-guide-content table {
  width: 100%;
  border-collapse: collapse;
}
.size-guide-content table td,
.size-guide-content table th {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  text-align: center;
}

@media (max-width: 480px) {
  .size-guide-modal { padding: 0; align-items: flex-end; }
  .size-guide-panel {
    max-height: 90vh;
    border-radius: var(--cart-radius-lg) var(--cart-radius-lg) 0 0;
  }
}

/* ════════════════════════════════════════════════════════════════════
   RECENTLY VIEWED
   ════════════════════════════════════════════════════════════════════ */

.recently-viewed-section {
  margin-block: 32px 24px;
}

.recently-viewed-track::-webkit-scrollbar { display: none; }

.recently-viewed-card {
  scroll-snap-align: start;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.recently-viewed-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.recently-viewed-image {
  aspect-ratio: 1;
  background: var(--cart-cloud);
  overflow: hidden;
}
.recently-viewed-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.recently-viewed-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recently-viewed-title {
  font-size: 12px;
  color: var(--cart-dark);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recently-viewed-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.recently-viewed-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}
.recently-viewed-compare {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

/* ════════════════════════════════════════════════════════════════════
   PRODUCT Q&A
   ════════════════════════════════════════════════════════════════════ */

.product-qa-section {
  margin-block: 32px 24px;
}

.product-qa {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  padding: 22px;
}

.product-qa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.product-qa-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--cart-dark);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-qa-title svg {
  width: 18px;
  height: 18px;
  color: var(--cart-violet);
}

.product-qa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-qa-item {
  background: var(--cart-cloud);
  border: 1px solid transparent;
  border-radius: var(--cart-radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}
.product-qa-item[open] {
  background: var(--cart-white);
  border-color: var(--color-border);
}

.product-qa-question {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--cart-dark);
}
.product-qa-question::-webkit-details-marker { display: none; }

.product-qa-q-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--cart-violet);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  font-family: var(--cart-font-en);
}

.product-qa-question > span:nth-child(2) {
  flex: 1;
  line-height: 1.3;
}

.product-qa-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}
.product-qa-arrow svg {
  width: 14px;
  height: 14px;
}
.product-qa-item[open] .product-qa-arrow {
  transform: rotate(90deg);
}
[dir="rtl"] .product-qa-item[open] .product-qa-arrow {
  transform: rotate(-90deg);
}

.product-qa-answer {
  display: flex;
  gap: 10px;
  padding: 0 14px 14px;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}
.product-qa-a-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  font-family: var(--cart-font-en);
}

.product-qa-answer-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cart-dark);
}
.product-qa-answer-text p:first-child { margin-top: 0; }
.product-qa-answer-text p:last-child { margin-bottom: 0; }

.product-qa-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.product-qa-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.product-qa-form-wrapper {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.product-qa-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-qa-form-row {
  display: flex;
  flex-direction: column;
}

.product-qa-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--cart-white);
  resize: vertical;
}
.product-qa-input:focus {
  outline: none;
  border-color: var(--cart-orange);
}

@media (max-width: 480px) {
  .product-qa { padding: 14px; }
  .product-qa-title { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   VIDEO IN GALLERY THUMBS
   ════════════════════════════════════════════════════════════════════ */

.product-gallery-thumb.is-video {
  position: relative;
}
.product-gallery-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  pointer-events: none;
  border-radius: inherit;
}
.product-gallery-thumb-play svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Video player container in main gallery */
.product-gallery-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #000;
  border-radius: var(--cart-radius-md);
  overflow: hidden;
}
.product-gallery-video-wrap video,
.product-gallery-video-wrap iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
}

/* ════════════════════════════════════════════════════════════════════
   OUT-OF-STOCK PRODUCT CARDS — Visual de-emphasis
   When products are pushed to end via sort_unavailable_last,
   give them a subtle "less attention" visual treatment
   ════════════════════════════════════════════════════════════════════ */

/* Out-of-stock cards: slightly desaturated + soft overlay on image */
.product-card:has(.badge--soldout) .product-card-image-wrap img,
.product-card:has(.badge--soldout) .product-card-image img {
  filter: grayscale(0.35) opacity(0.85);
  transition: filter 0.2s;
}
.product-card:has(.badge--soldout):hover .product-card-image-wrap img,
.product-card:has(.badge--soldout):hover .product-card-image img {
  filter: grayscale(0) opacity(1);
}

/* Sold-out badge enhanced styling */
.badge--soldout {
  background: #6B7280 !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* Recently viewed: OOS state */
.recently-viewed-card.is-oos .recently-viewed-image img {
  filter: grayscale(0.4) opacity(0.8);
}
.recently-viewed-card.is-oos .recently-viewed-image {
  position: relative;
}
.recently-viewed-oos-badge {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  background: rgba(107, 114, 128, 0.95);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.recently-viewed-card.is-oos .recently-viewed-price {
  color: var(--color-text-muted);
}

/* ════════════════════════════════════════════════════════════════════
   PREDICTIVE SEARCH — Enhanced design with skeleton + product cards
   ════════════════════════════════════════════════════════════════════ */

.predictive-search {
  border-radius: var(--cart-radius-md);
  overflow: hidden;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  max-height: 72vh;
  overflow-y: auto;
}

.predictive-search-section {
  border-bottom: 1px solid var(--color-border);
}
.predictive-search-section:last-child { border-bottom: none; }

.predictive-search-heading {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px 6px;
  background: var(--cart-cloud);
}

.predictive-search-results-list {
  display: flex;
  flex-direction: column;
}

.predictive-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
  border-bottom: 1px solid var(--color-border);
}
.predictive-search-result:last-child { border-bottom: none; }
.predictive-search-result:hover {
  background: var(--cart-cloud);
}

.predictive-search-result.is-oos {
  opacity: 0.7;
}
.predictive-search-result.is-oos .predictive-search-result-image img {
  filter: grayscale(0.45);
}

.predictive-search-result-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--cart-radius-sm);
  overflow: hidden;
  background: var(--cart-cloud);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.predictive-search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.predictive-search-result-image--placeholder {
  background: var(--cart-cloud);
}

.predictive-search-result-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.predictive-search-result-vendor {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.predictive-search-result-title {
  font-size: 13px;
  color: var(--cart-dark);
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.predictive-search-result-pricing {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}

.predictive-search-result-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}

.predictive-search-result-compare {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

.predictive-search-result--simple {
  padding: 12px 16px;
}

.predictive-search-view-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: var(--cart-dark);
  color: var(--cart-white);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  transition: background 0.15s;
}
.predictive-search-view-all:hover {
  background: var(--cart-orange);
  color: #fff;
}
.predictive-search-view-all strong {
  background: rgba(255,255,255,0.18);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
}

/* SKELETON LOADER */
.predictive-search-skeleton {
  padding: 8px 0;
}

.predictive-search-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
}
.predictive-search-skeleton-row:last-child { border-bottom: none; }

.predictive-search-skeleton-img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--cart-radius-sm);
  background: linear-gradient(90deg, var(--cart-cloud) 0%, #E5E5E5 50%, var(--cart-cloud) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.predictive-search-skeleton-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.predictive-search-skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--cart-cloud) 0%, #E5E5E5 50%, var(--cart-cloud) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.predictive-search-skeleton-line--short {
  width: 50%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* EMPTY STATE */
.predictive-search-empty {
  padding: 32px 20px;
  text-align: center;
}
.predictive-search-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.6;
}
.predictive-search-empty-text {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.4;
}
.predictive-search-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cart-orange);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--cart-orange);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.predictive-search-empty-link:hover {
  background: var(--cart-orange);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════════
   CART DRAWER — Completely redesigned for conversion
   Header, items, shipping bar, upsell, trust badges
   ════════════════════════════════════════════════════════════════════ */

/* Override drawer panel */
.cart-drawer-panel {
  width: 420px !important;
  max-width: 100vw !important;
  background: var(--cart-white);
  display: flex;
  flex-direction: column;
  padding: 0 !important;
}

/* Header */
.cart-drawer-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--color-border);
  background: var(--cart-white);
  flex-shrink: 0;
}

.cart-drawer-title {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 16px !important;
  font-weight: 800;
  margin: 0;
  color: var(--cart-dark);
}
.cart-drawer-title svg { color: var(--cart-orange); flex-shrink: 0; }
.cart-drawer-title-count {
  background: var(--cart-orange);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--cart-font-en);
  min-width: 22px;
  text-align: center;
}

.cart-drawer-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cart-cloud);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  transition: background 0.15s;
}
.cart-drawer-close-btn:hover {
  background: var(--color-border);
}

/* Shipping bar */
.cart-drawer-shipping-bar {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 18px !important;
  background: linear-gradient(135deg, rgba(253,87,42,0.06) 0%, rgba(78,36,181,0.04) 100%);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.cart-drawer-shipping-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.cart-drawer-shipping-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cart-drawer-shipping-text {
  font-size: 12px;
  color: var(--cart-dark);
  line-height: 1.3;
}
.cart-drawer-shipping-text strong {
  color: var(--cart-orange);
  font-weight: 800;
}

.cart-drawer-shipping-progress {
  height: 6px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cart-drawer-shipping-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cart-orange), var(--cart-violet));
  border-radius: 999px;
  transition: width 0.4s var(--cart-ease-out);
}
.cart-drawer-shipping-fill.is-complete {
  background: linear-gradient(90deg, #1FAE6A, #16C97D);
}

/* Scrollable area */
.cart-drawer-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cart-cloud);
}

/* Items list */
.cart-drawer-items {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cart-drawer-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  transition: border-color 0.15s, opacity 0.2s;
}
.cart-drawer-item:hover {
  border-color: var(--color-border-strong);
}

.cart-item-image-wrap {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: var(--cart-radius-sm);
  overflow: hidden;
  background: var(--cart-cloud);
  display: block;
}
.cart-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  line-height: 1.3;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-item-title:hover { color: var(--cart-orange); }

.cart-item-variant {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.cart-item-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.cart-item-qty {
  display: inline-flex;
  align-items: center;
  background: var(--cart-cloud);
  border-radius: 999px;
  padding: 2px;
}
.cart-item-qty button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  color: var(--cart-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.cart-item-qty button:hover { background: var(--cart-white); }
.cart-item-qty input {
  width: 28px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--cart-dark);
  font-family: var(--cart-font-en);
  -moz-appearance: textfield;
}
.cart-item-qty input::-webkit-outer-spin-button,
.cart-item-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-item-pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}
.cart-item-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}
.cart-item-compare {
  font-size: 10px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

.cart-item-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
}
.cart-item-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0;
  font-family: inherit;
  transition: color 0.12s;
}
.cart-item-action-btn:hover {
  color: var(--cart-dark);
}
.cart-item-action-btn--remove:hover {
  color: #E5283C;
}
.cart-item-action-btn svg {
  flex-shrink: 0;
}

/* Empty state */
.cart-drawer-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  background: var(--cart-white);
}
.cart-drawer-empty[style*="flex"] {
  display: flex !important;
}
.cart-drawer-empty-icon-wrap {
  width: 80px;
  height: 80px;
  background: var(--cart-cloud);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--cart-orange);
}
.cart-drawer-empty-icon-wrap svg {
  width: 36px;
  height: 36px;
}
.cart-drawer-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--cart-dark);
  margin: 0 0 6px;
}
.cart-drawer-empty-text {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}

/* Upsell section */
.cart-drawer-upsell {
  padding: 16px 14px 18px;
  background: var(--cart-white);
  border-top: 1px solid var(--color-border);
}
.cart-drawer-upsell-header {
  margin-bottom: 12px;
}
.cart-drawer-upsell-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-dark);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-drawer-upsell-title::before {
  content: '✨';
  font-size: 14px;
}
.cart-drawer-upsell-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
  font-weight: 500;
}

.cart-drawer-upsell-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cart-drawer-upsell-track::-webkit-scrollbar { display: none; }

.cart-upsell-card {
  flex: 0 0 145px;
  display: flex;
  flex-direction: column;
  background: var(--cart-cloud);
  border: 1px solid transparent;
  border-radius: var(--cart-radius-sm);
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}
.cart-upsell-card:hover {
  border-color: var(--color-border-strong);
}

.cart-upsell-image {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--cart-white);
}
.cart-upsell-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-upsell-info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cart-upsell-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--cart-dark);
  line-height: 1.3;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 28px;
}

.cart-upsell-pricing {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 2px;
}
.cart-upsell-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}
.cart-upsell-compare {
  font-size: 10px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--cart-font-en);
}

.cart-upsell-add {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 8px;
  width: 28px;
  height: 28px;
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
}
.cart-upsell-add:hover {
  transform: scale(1.1);
  background: var(--cart-orange);
  color: #fff;
  border-color: var(--cart-orange);
}
.cart-upsell-add.is-loading {
  pointer-events: none;
  opacity: 0.6;
}
.cart-upsell-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Footer */
.cart-drawer-footer {
  flex-shrink: 0;
  padding: 14px 18px 16px !important;
  border-top: 1px solid var(--color-border);
  background: var(--cart-white);
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

.cart-drawer-trust-row {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.cart-drawer-trust-item--cod {
  font-size: 11px;
  font-weight: 700;
  color: #1FAE6A;
  background: rgba(31, 174, 106, 0.10);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(31, 174, 106, 0.2);
}

.cart-drawer-totals {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.cart-drawer-totals-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.cart-drawer-totals-amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}

.cart-drawer-note {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 0 12px;
  text-align: center;
}

.cart-drawer-checkout-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px !important;
  font-size: 15px;
}
.cart-drawer-checkout-btn svg {
  background: rgba(0,0,0,0.1);
  border-radius: 50%;
  padding: 3px;
  width: 20px;
  height: 20px;
}

.cart-drawer-view-btn {
  font-size: 12px !important;
  padding: 8px !important;
}

.cart-drawer-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.cart-drawer-trust-mini {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
  padding: 6px 4px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-sm);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .cart-drawer-panel {
    width: 100vw !important;
  }
  .cart-item-image-wrap {
    width: 60px;
    height: 60px;
  }
  .cart-upsell-card {
    flex: 0 0 120px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HEADER ICONS — Cleaner, more prominent
   ════════════════════════════════════════════════════════════════════ */

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.header-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.header-icon-btn:hover {
  background: var(--cart-cloud);
  color: var(--cart-orange);
}
.header-icon-btn svg {
  width: 22px;
  height: 22px;
}

.header-icon-btn .badge-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 18px;
  height: 18px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  padding: 0 5px;
  font-family: var(--cart-font-en);
  line-height: 1;
  border: 2px solid var(--cart-white);
  transform: translate(25%, -25%);
}
.header-icon-btn .badge-count:empty,
.header-icon-btn .badge-count[data-cart-count="0"] {
  display: none;
}

[dir="rtl"] .header-icon-btn .badge-count {
  transform: translate(-25%, -25%);
}

/* Pulse on cart add */
@keyframes cart-pulse {
  0% { transform: translate(25%, -25%) scale(1); }
  50% { transform: translate(25%, -25%) scale(1.3); }
  100% { transform: translate(25%, -25%) scale(1); }
}
[data-cart-count].is-pulsing {
  animation: cart-pulse 0.4s var(--cart-ease-out);
}

/* ════════════════════════════════════════════════════════════════════
   BESTSELLER BADGE — "Top Seller / JoCell's Choice"
   ════════════════════════════════════════════════════════════════════ */

.bestseller-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block: 0 12px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #FFB72A 0%, #FD572A 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  align-self: flex-start;
}
.bestseller-badge-icon {
  font-size: 13px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   TRUST CARD — Unified "Why buy from us"
   ════════════════════════════════════════════════════════════════════ */

.trust-card {
  margin-block: 14px;
  padding: 14px 14px 12px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  position: relative;
  overflow: hidden;
}
.trust-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(31,174,106,0.04) 0%, rgba(78,36,181,0.04) 100%);
  pointer-events: none;
}

.trust-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
}
.trust-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--cart-violet);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
}
.trust-card-icon svg { width: 14px; height: 14px; }

.trust-card-heading {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-dark);
}

.trust-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: relative;
}

.trust-card-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.trust-card-item-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-cloud);
}
.trust-card-item-icon svg { width: 16px; height: 16px; }
.trust-card-item-icon--delivery { background: rgba(78,36,181,0.10); color: var(--cart-violet); }
.trust-card-item-icon--cod { background: rgba(31,174,106,0.10); color: #1FAE6A; }
.trust-card-item-icon--authentic { background: rgba(253,87,42,0.10); color: var(--cart-orange); }
.trust-card-item-icon--returns { background: rgba(255,183,42,0.12); color: #B6791D; }

.trust-card-item-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.trust-card-item-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--cart-dark);
  line-height: 1.25;
}
.trust-card-item-sub {
  font-size: 10.5px;
  color: var(--color-text-muted);
  line-height: 1.3;
  font-weight: 500;
}
.trust-card-item-sub strong {
  color: var(--cart-dark);
  font-weight: 700;
}

@media (max-width: 480px) {
  .trust-card-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CONTACT CHANNELS — WhatsApp / Phone / Telegram
   ════════════════════════════════════════════════════════════════════ */

.contact-channels {
  margin-block: 14px 12px;
  padding: 12px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
}

.contact-channels-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-align: center;
}

.contact-channels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
}

.contact-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: var(--cart-radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid transparent;
  background: var(--cart-white);
  color: var(--cart-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-channel:hover {
  transform: translateY(-1px);
}

.contact-channel-icon {
  flex-shrink: 0;
}

.contact-channel--whatsapp {
  background: #25D366;
  color: #fff;
}
.contact-channel--whatsapp:hover {
  background: #1FB755;
  color: #fff;
}

.contact-channel--phone {
  background: var(--cart-orange);
  color: #fff;
}
.contact-channel--phone:hover {
  background: var(--cart-dark);
  color: #fff;
}

.contact-channel--telegram {
  background: #0088CC;
  color: #fff;
}
.contact-channel--telegram:hover {
  background: #006699;
  color: #fff;
}

.contact-channel-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
   PROMO CODES "MORE" toggle
   ════════════════════════════════════════════════════════════════════ */

.pb-coupons-more {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--cart-radius-sm);
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-orange);
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.pb-coupons-more:hover {
  background: rgba(253, 87, 42, 0.05);
  border-color: var(--cart-orange);
}


/* ════════════════════════════════════════════════════════════════════
   DELIVERY BOX — Standalone, prominent
   Strongest conversion signal for MENA market
   ════════════════════════════════════════════════════════════════════ */

.delivery-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 14px 8px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(78,36,181,0.06) 0%, rgba(31,174,106,0.04) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  position: relative;
  overflow: hidden;
}
.delivery-box::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cart-violet), #1FAE6A);
}

.delivery-box-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--cart-violet);
  color: #fff;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.delivery-box-icon svg {
  width: 22px;
  height: 22px;
}

.delivery-box-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.delivery-box-label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
  line-height: 1.3;
}
.delivery-box-label strong {
  color: var(--cart-dark);
  font-weight: 800;
}

.delivery-box-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--cart-violet);
  line-height: 1.2;
}

.delivery-box-badge {
  flex-shrink: 0;
  background: #1FAE6A;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 480px) {
  .delivery-box {
    padding: 12px;
  }
  .delivery-box-icon {
    width: 40px;
    height: 40px;
  }
  .delivery-box-icon svg {
    width: 20px;
    height: 20px;
  }
  .delivery-box-value {
    font-size: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   DELIVERY BOX — Per-governorate smart delivery time calculator
   ════════════════════════════════════════════════════════════════════ */

.delivery-box {
  margin-block: 16px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}
.delivery-box:hover {
  border-color: var(--color-border-strong);
}

/* ─── HEADER (always visible) ─── */
.delivery-box-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
}

.delivery-box-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--cart-orange) 0%, var(--cart-violet) 100%);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.delivery-box-icon svg {
  width: 18px;
  height: 18px;
}

.delivery-box-header-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.delivery-box-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-dark);
}

.delivery-box-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.delivery-box-sub strong {
  color: var(--cart-orange);
  font-weight: 700;
}

.delivery-box-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--cart-cloud);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  transition: background 0.15s, transform 0.2s;
}
.delivery-box-toggle:hover {
  background: var(--color-border);
}
.delivery-box-toggle svg {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform 0.2s;
}
[dir="rtl"] .delivery-box-toggle svg {
  transform: rotate(-90deg);
}
.delivery-box-toggle.is-open svg {
  transform: rotate(270deg);
}
[dir="rtl"] .delivery-box-toggle.is-open svg {
  transform: rotate(90deg);
}

/* ─── BODY (collapsible select area) ─── */
.delivery-box-body {
  padding: 0 14px 12px;
  border-top: 1px dashed var(--color-border);
  padding-top: 12px;
}

.delivery-box-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-dark);
  margin-bottom: 6px;
}
.delivery-box-label svg {
  width: 13px;
  height: 13px;
  color: var(--cart-violet);
}

.delivery-box-select-wrap {
  position: relative;
}
.delivery-box-select-wrap::after {
  content: '';
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
}

.delivery-box-select {
  width: 100%;
  padding: 11px 36px 11px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--cart-radius-sm);
  background: var(--cart-cloud);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--cart-dark);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s, background 0.15s;
}
[dir="rtl"] .delivery-box-select {
  padding: 11px 14px 11px 36px;
}
.delivery-box-select:focus {
  outline: none;
  border-color: var(--cart-orange);
  background: var(--cart-white);
}

/* ─── IP-DETECTED SUGGESTION ─── */
.delivery-box-detected {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(78, 36, 181, 0.06) 0%, rgba(253, 87, 42, 0.04) 100%);
  border: 1px dashed var(--cart-violet);
  border-radius: var(--cart-radius-sm);
  font-size: 12px;
}
.delivery-box-detected-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: var(--cart-violet);
}
.delivery-box-detected-icon svg {
  width: 14px;
  height: 14px;
}
.delivery-box-detected span {
  flex: 1;
  color: var(--cart-dark);
}
.delivery-box-detected strong {
  color: var(--cart-violet);
}
.delivery-box-detected-confirm {
  flex-shrink: 0;
  padding: 5px 12px;
  background: var(--cart-violet);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.12s;
}
.delivery-box-detected-confirm:hover {
  background: var(--cart-orange);
  transform: scale(1.03);
}

/* ─── RESULT (after selection) ─── */
.delivery-box-result {
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.04) 0%, rgba(78, 36, 181, 0.03) 100%);
  border-top: 1px solid var(--color-border);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.delivery-box-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.delivery-box-result-row--main {
  align-items: flex-start;
}

.delivery-box-result-icon-wrap {
  flex-shrink: 0;
}

.delivery-box-result-icon {
  width: 44px;
  height: 44px;
  background: var(--cart-white);
  border: 2px solid var(--cart-orange);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

.delivery-box-result-content {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.delivery-box-result-eta {
  font-size: 15px;
  font-weight: 900;
  color: var(--cart-orange);
  margin-bottom: 2px;
}

.delivery-box-result-when {
  font-size: 13px;
  color: var(--cart-dark);
  font-weight: 600;
}

.delivery-box-result-row--meta {
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
}

.delivery-box-result-meta-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.delivery-box-result-meta-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delivery-box-result-meta-value {
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-dark);
  font-family: var(--cart-font-en);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.delivery-box-result-meta-value--success {
  color: #1FAE6A;
  font-family: inherit;
  font-size: 12px;
}
.delivery-box-result-meta-value--success svg {
  width: 14px;
  height: 14px;
}

.delivery-box-result-cutoff {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--cart-yellow);
  color: var(--cart-dark);
  border-radius: var(--cart-radius-sm);
  font-size: 12px;
  font-weight: 700;
}
.delivery-box-cutoff-icon {
  font-size: 14px;
  line-height: 1;
}

/* ─── MOBILE ─── */
@media (max-width: 480px) {
  .delivery-box-header {
    padding: 11px 12px;
    gap: 10px;
  }
  .delivery-box-icon {
    width: 32px;
    height: 32px;
  }
  .delivery-box-icon svg {
    width: 16px;
    height: 16px;
  }
  .delivery-box-result {
    padding: 12px;
  }
  .delivery-box-result-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .delivery-box-result-eta {
    font-size: 14px;
  }
  .delivery-box-result-when {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR DELIVERY CARD — Classic v55 design + gov picker dropdown
   ════════════════════════════════════════════════════════════════════ */

.sidebar-delivery-card {
  position: relative;
  margin: 14px 0 12px;
  cursor: default;
}

/* Make the gov name a clickable inline button */
.pb-delivery-gov-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  vertical-align: baseline;
  margin-inline-start: 2px;
}
.pb-delivery-gov-btn:hover strong {
  color: var(--cart-orange);
}
.pb-delivery-gov-btn strong {
  font-weight: 800;
  color: var(--cart-violet);
  border-bottom: 1px dashed var(--cart-violet);
  transition: color 0.15s, border-color 0.15s;
}
.pb-delivery-gov-chev {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.2s;
}
.sidebar-delivery-card.is-dropdown-open .pb-delivery-gov-chev {
  transform: rotate(180deg);
}

/* Dropdown */
.pb-delivery-dropdown {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline: 0;
  z-index: 100;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
  animation: pb-dropdown-in 0.18s var(--cart-ease-out);
}
@keyframes pb-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pb-delivery-dropdown-header {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--cart-cloud);
}

.pb-delivery-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.pb-delivery-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  color: var(--cart-dark);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.12s;
  font-family: inherit;
}
.pb-delivery-dropdown-item:hover {
  background: var(--cart-cloud);
}
.pb-delivery-dropdown-item.is-selected {
  background: rgba(253, 87, 42, 0.08);
  color: var(--cart-orange);
}
.pb-delivery-dropdown-item.is-selected::after {
  content: '✓';
  color: var(--cart-orange);
  font-weight: 900;
  font-size: 14px;
}

/* Mobile: dropdown fills width with bigger touch targets */
@media (max-width: 768px) {
  .pb-delivery-dropdown {
    max-height: 50vh;
  }
  .pb-delivery-dropdown-item {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* The base .pb-delivery card styles are defined elsewhere in base.css */

/* ════════════════════════════════════════════════════════════════════
   PRODUCT SIDEBAR — Hard rule: no inner scroll, ever
   The sidebar grows naturally with its content; if longer than viewport
   the WHOLE PAGE scrolls (the sidebar simply un-sticks once its bottom
   edge passes the viewport bottom). This is what the user wants.
   ════════════════════════════════════════════════════════════════════ */
.product-sidebar {
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
}
@media (min-width: 1024px) {
  .product-sidebar {
    height: fit-content !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS — Master styles for all new sections
   ════════════════════════════════════════════════════════════════════ */

/* ─── Shared section heading ─── */
.section-heading {
  margin-bottom: 18px;
}
.section-heading--center { text-align: center; }
.section-heading--with-action {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.section-title {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  color: var(--cart-dark);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.section-sub {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 4px 0 0;
}
.section-view-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-orange);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.section-view-all:hover { color: var(--cart-violet); }

/* ════════════════════════════════════════════════════════════════════
   HERO CAROUSEL PRO  (rebuilt) — slide/fade, Ken Burns, progress dots,
   animated content reveal, counter, RTL-aware
   ════════════════════════════════════════════════════════════════════ */
.hero-cp {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--cart-dark, #201F1F);
}
.hero-cp--mode-aspect.hero-cp--wide       { aspect-ratio: 21 / 9; }
.hero-cp--mode-aspect.hero-cp--standard   { aspect-ratio: 16 / 9; }
.hero-cp--mode-aspect.hero-cp--tall       { aspect-ratio: 4 / 3; }
.hero-cp--mode-aspect.hero-cp--square     { aspect-ratio: 1 / 1; }
.hero-cp--mode-aspect.hero-cp--ultra-wide { aspect-ratio: 32 / 9; }
.hero-cp--mode-fixed { height: var(--hero-h-desktop, 560px); }
@media (max-width: 749px) {
  .hero-cp--mode-fixed { height: var(--hero-h-mobile, 480px); }
  .hero-cp--mode-aspect.hero-cp--wide,
  .hero-cp--mode-aspect.hero-cp--ultra-wide,
  .hero-cp--mode-aspect.hero-cp--standard { aspect-ratio: 4 / 3; }
}
.hero-cp-viewport { position: absolute; inset: 0; overflow: hidden; }
.hero-cp-track { position: relative; width: 100%; height: 100%; }
.hero-cp.is-slide-mode .hero-cp-track {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.6s cubic-bezier(0.6, 0.04, 0.2, 1);
  will-change: transform;
}
.hero-cp.is-slide-mode .hero-cp-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
}
.hero-cp--trans-fade .hero-cp-track { display: block; }
.hero-cp--trans-fade .hero-cp-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s var(--cart-ease-out, ease), visibility 0s 0.7s;
}
.hero-cp--trans-fade .hero-cp-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s var(--cart-ease-out, ease);
  z-index: 1;
}
.hero-cp-link { display: block; height: 100%; width: 100%; }
.hero-cp-image { display: block; width: 100%; height: 100%; overflow: hidden; }
.hero-cp-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-cp-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--cart-orange, #FD572A), var(--cart-violet, #4E24B5));
}
.hero-cp--kenburns .hero-cp-slide.is-active .hero-cp-image img {
  animation: hero-cp-kenburns 7s ease-out forwards;
}
@keyframes hero-cp-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.hero-cp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(16px, 4vw, 64px);
  pointer-events: none;
}
.hero-cp-overlay--left   { align-items: center; justify-content: flex-start; text-align: start; }
.hero-cp-overlay--center { align-items: center; justify-content: center;     text-align: center; }
.hero-cp-overlay--right  { align-items: center; justify-content: flex-end;   text-align: end; }
.hero-cp-overlay--light  { color: #fff; }
.hero-cp-overlay--dark   { color: var(--cart-dark, #201F1F); }
.hero-cp-scrim--gradient::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
}
.hero-cp-overlay--center.hero-cp-scrim--gradient::before {
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.3) 100%);
}
.hero-cp-overlay--right.hero-cp-scrim--gradient::before {
  background: linear-gradient(270deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
}
.hero-cp-scrim--full::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(0,0,0,0.4);
}
.hero-cp-overlay--dark.hero-cp-scrim--gradient::before,
.hero-cp-overlay--dark.hero-cp-scrim--full::before { background: rgba(255,255,255,0.35); }
.hero-cp-content { position: relative; max-width: 560px; z-index: 1; }
.hero-cp-slide [data-hero-anim] { opacity: 0; transform: translateY(18px); }
.hero-cp-slide.is-active [data-hero-anim] {
  animation: hero-cp-rise 0.6s var(--cart-ease-out, ease) forwards;
}
.hero-cp-slide.is-active [data-hero-anim="1"] { animation-delay: 0.15s; }
.hero-cp-slide.is-active [data-hero-anim="2"] { animation-delay: 0.28s; }
.hero-cp-slide.is-active [data-hero-anim="3"] { animation-delay: 0.40s; }
.hero-cp-slide.is-active [data-hero-anim="4"] { animation-delay: 0.52s; }
@keyframes hero-cp-rise { to { opacity: 1; transform: translateY(0); } }
.hero-cp-eyebrow {
  display: inline-block;
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.hero-cp-overlay--dark .hero-cp-eyebrow { background: var(--cart-lime, #D9FF03); color: var(--cart-dark, #201F1F); }
.hero-cp-heading {
  font-size: clamp(28px, 5vw, 58px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.hero-cp-overlay--light .hero-cp-heading { text-shadow: 0 2px 12px rgba(0,0,0,0.4); }
.hero-cp-sub {
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 500;
  margin: 0 0 22px;
  opacity: 0.96;
}
.hero-cp-overlay--light .hero-cp-sub { text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.hero-cp-cta { pointer-events: auto; font-size: 15px; }
.hero-cp-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark, #201F1F);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition: background 0.18s, transform 0.18s, opacity 0.18s;
  opacity: 0;
}
.hero-cp:hover .hero-cp-arrow,
.hero-cp:focus-within .hero-cp-arrow { opacity: 1; }
@media (max-width: 749px) { .hero-cp-arrow { opacity: 1; width: 40px; height: 40px; } }
.hero-cp-arrow:hover { background: var(--cart-orange, #FD572A); color: #fff; }
.hero-cp-arrow:active { transform: translateY(-50%) scale(0.92); }
.hero-cp-arrow svg { width: 18px; height: 18px; }
.hero-cp-arrow--prev { inset-inline-start: 18px; }
.hero-cp-arrow--next { inset-inline-end: 18px; }
.hero-cp-arrow--prev svg { transform: rotate(180deg); }
[dir="rtl"] .hero-cp-arrow--prev svg { transform: rotate(0deg); }
[dir="rtl"] .hero-cp-arrow--next svg { transform: rotate(180deg); }
.hero-cp-controls {
  position: absolute;
  inset-block-end: 18px;
  inset-inline: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}
.hero-cp-counter {
  pointer-events: auto;
  font-size: 13px; font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 4px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hero-cp-counter-sep { opacity: 0.6; margin: 0 3px; }
.hero-cp-dots { pointer-events: auto; display: flex; justify-content: center; gap: 8px; }
.hero-cp-dot {
  position: relative;
  width: 28px; height: 6px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: background 0.2s, width 0.25s;
}
.hero-cp-dot.is-active { background: rgba(255,255,255,0.45); width: 44px; }
.hero-cp-dot-progress {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--cart-lime, #D9FF03);
  border-radius: inherit;
}
[dir="rtl"] .hero-cp-dot-progress { transform-origin: right center; }
.hero-cp-empty { padding: 64px 24px; text-align: center; color: var(--color-text-muted, #777); }
@media (prefers-reduced-motion: reduce) {
  .hero-cp--kenburns .hero-cp-slide.is-active .hero-cp-image img { animation: none; }
  .hero-cp-slide [data-hero-anim] { opacity: 1; transform: none; animation: none !important; }
  .hero-cp.is-slide-mode .hero-cp-track { transition: none; }
}

.hero-split { padding: 24px 0; }
.hero-split-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .hero-split--split-1-2 .hero-split-grid {
    grid-template-columns: 1.6fr 1fr;
  }
  .hero-split--split-2-1 .hero-split-grid {
    grid-template-columns: 1fr 1.6fr;
  }
  .hero-split--split-2-1 .hero-split-card--main { order: 2; }
  .hero-split--split-2-1 .hero-split-secondary-col { order: 1; }
}
.hero-split-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--cart-radius-lg);
  background: var(--cart-cloud);
}
.hero-split-card--main { aspect-ratio: 16 / 9; }
.hero-split-card--secondary { aspect-ratio: 16 / 5.8; }
.hero-split-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-split-card-link { display: block; height: 100%; }
.hero-split-placeholder {
  background: linear-gradient(135deg, var(--cart-orange), var(--cart-violet));
  width: 100%; height: 100%;
}
.hero-split-secondary-col {
  display: grid;
  gap: 12px;
  grid-template-rows: 1fr 1fr;
}
.hero-split-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  padding: clamp(16px, 3vw, 32px);
}
.hero-split-overlay--left { align-items: center; justify-content: flex-start; text-align: start; }
.hero-split-overlay--center { align-items: center; justify-content: center; text-align: center; }
.hero-split-overlay--right { align-items: center; justify-content: flex-end; text-align: end; }
.hero-split-overlay--light { color: #fff; }
.hero-split-overlay--light .hero-split-heading,
.hero-split-overlay--light .hero-split-eyebrow { text-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.hero-split-overlay--dark { color: var(--cart-dark); }
.hero-split-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cart-lime);
  color: var(--cart-dark);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.hero-split-eyebrow--sm { font-size: 10px; padding: 3px 10px; }
.hero-split-heading {
  font-size: clamp(20px, 3.2vw, 36px);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 6px;
}
.hero-split-heading--sm { font-size: clamp(16px, 2.2vw, 24px); }
.hero-split-sub {
  font-size: 14px;
  margin: 0 0 14px;
  opacity: 0.92;
}
.hero-split-cta { margin-top: 4px; }
.hero-split-cta-text {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

/* ════ HERO GRID (4-6 banners) ════ */
.hero-grid { padding: 16px 0; }
.hero-grid-cells {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(var(--cols-mobile), 1fr);
}
@media (min-width: 1024px) {
  .hero-grid-cells {
    grid-template-columns: repeat(var(--cols-desktop), 1fr);
  }
}
.hero-grid-cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--cart-radius-md);
  background: var(--cart-cloud);
}
.hero-grid--square .hero-grid-cell { aspect-ratio: 1; }
.hero-grid--portrait .hero-grid-cell { aspect-ratio: 3 / 4; }
.hero-grid--landscape .hero-grid-cell { aspect-ratio: 16 / 9; }
.hero-grid-cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.4s var(--cart-ease-out);
}
.hero-grid-cell:hover img { transform: scale(1.04); }
.hero-grid-cell-link { display: block; height: 100%; }
.hero-grid-placeholder {
  background: linear-gradient(135deg, var(--cart-orange), var(--cart-violet));
  width: 100%; height: 100%;
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
  pointer-events: none;
}
.hero-grid-overlay--top { justify-content: flex-start; }
.hero-grid-overlay--center { justify-content: center; align-items: center; text-align: center; }
.hero-grid-overlay--bottom { justify-content: flex-end; }
.hero-grid-overlay--light { color: #fff; }
.hero-grid-overlay--light .hero-grid-heading { text-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.hero-grid-overlay--dark { color: var(--cart-dark); }
.hero-grid-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
  align-self: flex-start;
}
.hero-grid-overlay--center .hero-grid-eyebrow { align-self: center; }
.hero-grid-overlay--dark .hero-grid-eyebrow { background: var(--cart-lime); color: var(--cart-dark); }
.hero-grid-heading {
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 4px;
}
.hero-grid-cta {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}

/* ════ MINI BANNERS ════ */
.mini-banners { padding: 16px 0; }
.mini-banners { padding-block: var(--mb-pad-t, 24px) var(--mb-pad-b, 24px); }
.mini-banners-row {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--mb-cols-d, 3), 1fr);
}
@media (max-width: 749px) {
  .mini-banners-row {
    grid-template-columns: repeat(var(--mb-cols-m, 1), 1fr);
  }
}
.mini-banners--aspect-square .mini-banner-image { aspect-ratio: 1 / 1; object-fit: cover; }
.mini-banners--aspect-wide .mini-banner-image { aspect-ratio: 16 / 9; object-fit: cover; }
.mini-banner-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.mini-banner-card:hover {
  border-color: var(--cart-orange);
  transform: translateY(-1px);
}
.mini-banner-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-sm);
  font-size: 22px;
  line-height: 1;
}
.mini-banner-icon-img {
  width: 40px; height: 40px; object-fit: contain;
}
.mini-banner-image {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--cart-radius-sm);
}
.mini-banner-content {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.mini-banner-heading {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-dark);
}
.mini-banner-sub {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.mini-banner-arrow {
  flex-shrink: 0;
  color: var(--cart-orange);
  font-weight: 800;
  font-size: 18px;
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
}
.mini-banner-card:hover .mini-banner-arrow {
  opacity: 1;
  transform: translateX(4px);
}
[dir="rtl"] .mini-banner-card:hover .mini-banner-arrow {
  transform: translateX(-4px);
}

/* ════ BRAND STRIP ════ */
.brand-strip { padding: 24px 0; }
.brand-strip-track-wrap {
  overflow: hidden;
  mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.brand-strip-track {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 8px 0;
}
[data-brand-autoscroll] .brand-strip-track {
  animation: brand-scroll 25s linear infinite;
  width: fit-content;
}
[data-brand-autoscroll]:hover .brand-strip-track {
  animation-play-state: paused;
}
@keyframes brand-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
[dir="rtl"] [data-brand-autoscroll] .brand-strip-track {
  animation-name: brand-scroll-rtl;
}
@keyframes brand-scroll-rtl {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
.brand-strip-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 60px;
  opacity: 0.8;
  transition: opacity 0.2s, filter 0.2s;
  text-decoration: none;
}
.brand-strip-logo:hover { opacity: 1; }
.brand-strip-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.brand-strip--grayscale .brand-strip-logo img {
  filter: grayscale(1);
  transition: filter 0.2s;
}
.brand-strip--grayscale .brand-strip-logo:hover img {
  filter: grayscale(0);
}

/* ════ FLASH SALE ════ */
.flash-sale-section {
  padding: 32px 0;
  background: linear-gradient(135deg, rgba(253,87,42,0.04), rgba(78,36,181,0.04));
}
.flash-sale-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.flash-sale-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.flash-sale-icon {
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1;
  animation: flash-pulse 1.4s ease-in-out infinite;
}
@keyframes flash-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
.flash-sale-title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900;
  color: var(--cart-orange);
  margin: 0;
  line-height: 1.1;
}
.flash-sale-sub {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 2px 0 0;
}
.flash-sale-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
}
.flash-sale-countdown-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-dark);
}
.flash-sale-countdown-blocks {
  display: flex;
  gap: 4px;
}
.flash-sale-countdown-block {
  background: var(--cart-dark);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  text-align: center;
  min-width: 42px;
}
.flash-sale-countdown-block strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  font-family: var(--cart-font-en);
  line-height: 1;
}
.flash-sale-countdown-block span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
.flash-sale-view-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-orange);
  text-decoration: none;
}
.flash-sale-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.flash-sale-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.flash-sale-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cart-orange), var(--cart-violet));
  border-radius: 999px;
  transition: width 0.4s;
}
.flash-sale-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--cart-dark);
  white-space: nowrap;
}
.flash-sale-progress-label strong { color: var(--cart-orange); font-weight: 900; }
.flash-sale-products {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .flash-sale-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .flash-sale-products { grid-template-columns: repeat(4, 1fr); } }
.flash-sale-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-muted);
}

/* ════ DEAL OF THE DAY ════ */
.deal-of-day { padding: 24px 0; }
.deal-of-day-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) {
  .deal-of-day-card { grid-template-columns: 1fr 1fr; }
}
.deal-of-day-image {
  position: relative;
  background: var(--cart-cloud);
  aspect-ratio: 1;
  overflow: hidden;
}
.deal-of-day-image img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.deal-of-day-badge {
  position: absolute;
  top: 16px;
  inset-inline-start: 16px;
  background: var(--cart-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
}
.deal-of-day-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.deal-of-day-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.deal-of-day-title { margin: 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; line-height: 1.2; }
.deal-of-day-title a { color: var(--cart-dark); text-decoration: none; }
.deal-of-day-title a:hover { color: var(--cart-orange); }
.deal-of-day-prices {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.deal-of-day-price { font-size: 28px; font-weight: 900; color: var(--cart-orange); font-family: var(--cart-font-en); }
.deal-of-day-compare { font-size: 16px; color: var(--color-text-muted); text-decoration: line-through; font-family: var(--cart-font-en); }
.deal-of-day-discount {
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 1px solid var(--cart-violet);
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--cart-font-en);
}
.deal-of-day-countdown {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.deal-of-day-countdown-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
}
.deal-of-day-countdown-blocks { display: flex; gap: 6px; }
.deal-of-day-countdown-block {
  background: var(--cart-dark);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  min-width: 50px;
}
.deal-of-day-countdown-block strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  font-family: var(--cart-font-en);
}
.deal-of-day-countdown-block span {
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.8;
}
.deal-of-day-claimed {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.deal-of-day-claimed-bar {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.deal-of-day-claimed-fill {
  height: 100%;
  background: var(--cart-orange);
  border-radius: 999px;
}
.deal-of-day-claimed-label { font-size: 12px; font-weight: 600; color: var(--cart-dark); white-space: nowrap; }
.deal-of-day-claimed-label strong { color: var(--cart-orange); font-weight: 900; }
.deal-of-day-actions { margin-top: 12px; }

/* ════ PROMO CODES GRID ════ */
.promo-codes-section { padding: 24px 0; }
.promo-codes-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) { .promo-codes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .promo-codes-grid { grid-template-columns: repeat(var(--cols), 1fr); } }
.promo-code-card {
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 18px 16px;
  border-radius: var(--cart-radius-md);
  overflow: visible;
}
.promo-code-card--orange { background: var(--cart-orange); color: #fff; }
.promo-code-card--violet { background: var(--cart-violet); color: #fff; }
.promo-code-card--lime { background: var(--cart-lime); color: var(--cart-dark); border: 2px solid var(--cart-violet); }
.promo-code-card--dark { background: var(--cart-dark); color: #fff; }
.promo-code-cut {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--page-bg, #fff);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
.promo-code-cut--start { inset-inline-start: -7px; }
.promo-code-cut--end { inset-inline-end: -7px; }
.promo-code-discount {
  flex-shrink: 0;
  text-align: center;
  padding-inline-end: 14px;
}
.promo-code-discount strong {
  display: block;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  font-family: var(--cart-font-en);
}
.promo-code-discount span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.9;
  margin-top: 2px;
}
.promo-code-divider {
  border-inline-start: 2px dashed rgba(255,255,255,0.4);
  margin: 0 8px;
}
.promo-code-card--lime .promo-code-divider { border-color: rgba(32,31,31,0.25); }
.promo-code-info {
  flex: 1;
  min-width: 0;
  padding-inline-start: 10px;
}
.promo-code-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 2px;
}
.promo-code-condition {
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 8px;
}
.promo-code-copy {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.95);
  color: var(--cart-dark);
  border: 1px dashed currentColor;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.promo-code-card--lime .promo-code-copy { background: var(--cart-white); }
.promo-code-copy:hover { background: var(--cart-lime); }
.promo-code-copy.is-copied { background: var(--cart-lime); }
.promo-code-value {
  font-family: var(--cart-font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
.promo-code-copy-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cart-orange);
}

/* ════ CASHBACK SHOWCASE ════ */
.cashback-showcase { padding: 24px 0; }
.cashback-showcase-card {
  background: linear-gradient(135deg, var(--cart-lime) 0%, #C5E600 100%);
  border: 2px solid var(--cart-violet);
  border-radius: var(--cart-radius-lg);
  padding: clamp(20px, 3vw, 32px);
}
.cashback-showcase-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.cashback-showcase-icon {
  font-size: 42px;
  line-height: 1;
}
.cashback-showcase-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
  color: var(--cart-dark);
  margin: 0;
  line-height: 1.2;
}
.cashback-showcase-sub {
  font-size: 14px;
  color: var(--cart-dark);
  margin: 4px 0 0;
  opacity: 0.85;
}
.cashback-showcase-tiers {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.6);
  border-radius: var(--cart-radius-md);
  padding: 14px;
  flex-wrap: wrap;
}
.cashback-tier {
  flex: 1;
  min-width: 100px;
  text-align: center;
  position: relative;
  padding: 8px;
}
.cashback-tier-amount {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
  line-height: 1;
}
.cashback-tier-label {
  font-size: 11px;
  color: var(--cart-dark);
  font-weight: 600;
  margin-top: 4px;
}
.cashback-tier--best {
  background: var(--cart-violet);
  color: #fff;
  border-radius: var(--cart-radius-sm);
  padding: 12px 8px;
}
.cashback-tier--best .cashback-tier-amount { color: var(--cart-lime); }
.cashback-tier--best .cashback-tier-label { color: rgba(255,255,255,0.9); }
.cashback-tier-badge {
  position: absolute;
  top: -10px;
  inset-inline-end: 4px;
  background: var(--cart-orange);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cashback-tier-arrow {
  align-self: center;
  color: var(--cart-violet);
  font-size: 20px;
  font-weight: 900;
}
.cashback-showcase-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.cashback-showcase-note {
  font-size: 12px;
  color: var(--cart-dark);
  opacity: 0.8;
}
@media (max-width: 749px) {
  .cashback-showcase-tiers { gap: 4px; }
  .cashback-tier { min-width: 60px; }
  .cashback-tier-arrow { display: none; }
}

/* ════ DISCOUNT BANNER ════ */
.discount-banner {
  position: relative;
  padding: clamp(36px, 6vw, 72px) 16px;
  overflow: hidden;
}
.discount-banner--gradient {
  background: linear-gradient(135deg, var(--cart-orange) 0%, var(--cart-violet) 50%, var(--cart-lime) 100%);
  color: #fff;
}
.discount-banner--orange { background: var(--cart-orange); color: #fff; }
.discount-banner--violet { background: var(--cart-violet); color: #fff; }
.discount-banner--lime { background: var(--cart-lime); color: var(--cart-dark); }
.discount-banner--dark { background: var(--cart-dark); color: #fff; }
.discount-banner--light { background: var(--cart-cloud); color: var(--cart-dark); }
.discount-banner--has-image { color: #fff; }
.discount-banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.discount-banner-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.discount-banner--has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.discount-banner-content {
  position: relative;
  z-index: 2;
}
.discount-banner-content--left { text-align: start; }
.discount-banner-content--center { text-align: center; }
.discount-banner-content--right { text-align: end; }
.discount-banner-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.95;
}
.discount-banner-discount {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.discount-banner-discount-value {
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 900;
  line-height: 0.9;
  font-family: var(--cart-font-en);
  letter-spacing: -0.04em;
}
.discount-banner-discount-unit {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: 0.08em;
}
.discount-banner-heading {
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.discount-banner-sub {
  font-size: 16px;
  margin: 0 0 24px;
  opacity: 0.92;
  max-width: 640px;
}
.discount-banner-content--center .discount-banner-sub { margin-inline: auto; }
.discount-banner-cta { font-size: 15px; }

/* ════ CATEGORIES CIRCULAR ════ */
.categories-circular { padding: 24px 0; }
.categories-circular-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(var(--cols-mobile), 1fr);
}
@media (min-width: 1024px) {
  .categories-circular-grid {
    grid-template-columns: repeat(var(--cols-desktop), 1fr);
  }
}
.categories-circular-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s;
}
.categories-circular-item:hover { transform: translateY(-3px); }
.categories-circular-icon {
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  border-radius: 50%;
  background: var(--cart-cloud);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background 0.15s;
}
.categories-circular-item:hover .categories-circular-icon {
  background: rgba(253,87,42,0.1);
}
.categories-circular-icon img {
  width: 80%; height: 80%; object-fit: contain;
}
.categories-circular-emoji {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1;
}
.categories-circular-label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--cart-dark);
  line-height: 1.2;
}

/* ════ PRODUCT SLIDER (shared by trending, bestsellers, new arrivals) ════ */
.product-slider {
  position: relative;
}

/* Default: 2 mobile / 3 tablet / 5 desktop — overridden by --cards-m/-t/-d on section */
.product-slider-slide {
  /* Default mobile: 2 visible — formula: (100% - (gap × (n-1))) / n
     gap = 14px; for n cards: gap × (n-1) total gap pixels between cards
     Each card width = (100% - gap × (n-1)) / n
     Using calc with var() so each section can override */
  flex: 0 0 calc((100% - (var(--cols-m, var(--cards-m, 2)) - 1) * 14px) / var(--cols-m, var(--cards-m, 2)));
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 640px) {
  .product-slider-slide {
    flex: 0 0 calc((100% - (var(--cols-t, var(--cards-t, 3)) - 1) * 14px) / var(--cols-t, var(--cards-t, 3)));
  }
}
@media (min-width: 1024px) {
  .product-slider-slide {
    flex: 0 0 calc((100% - (var(--cols-d, var(--cards-d, 5)) - 1) * 14px) / var(--cols-d, var(--cards-d, 5)));
  }
}

/* Fixed card height — applied when section has data-card-height="fixed" */
[data-card-height="fixed"] .product-slider-slide {
  height: var(--card-h-mobile, 320px);
}
[data-card-height="fixed"] .product-slider-slide > .product-card,
[data-card-height="fixed"] .product-slider-slide > article {
  height: 100%;
  display: flex;
  flex-direction: column;
}
[data-card-height="fixed"] .product-slider-slide .product-card-image,
[data-card-height="fixed"] .product-slider-slide article .product-card-image {
  flex-shrink: 0;
}
[data-card-height="fixed"] .product-slider-slide .product-card-body,
[data-card-height="fixed"] .product-slider-slide article .product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
@media (min-width: 1024px) {
  [data-card-height="fixed"] .product-slider-slide {
    height: var(--card-h-desktop, 380px);
  }
}
.slider-arrow {
  position: absolute;
  top: 22vw;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.16);
  transition: background 0.15s, color 0.15s, opacity 0.15s, transform 0.15s;
}
.slider-arrow:hover { background: var(--cart-orange); color: #fff; }
.slider-arrow:active { transform: translateY(-50%) scale(0.9); }
.slider-arrow svg { width: 20px; height: 20px; }
.slider-arrow--prev { inset-inline-start: 6px; }
.slider-arrow--next { inset-inline-end: 6px; }
/* Arrow glyph direction via --rtl-flip (overrides icon inline style).
   prev = opposite of document direction; next = same as document direction. */
.slider-arrow--prev { --rtl-flip: -1; }
.slider-arrow--next { --rtl-flip: 1; }
[dir="rtl"] .slider-arrow--prev { --rtl-flip: 1; }
[dir="rtl"] .slider-arrow--next { --rtl-flip: -1; }
.slider-arrow.is-disabled { opacity: 0.3; pointer-events: none; }
@media (max-width: 767px) {
  .slider-arrow { display: inline-flex; width: 38px; height: 38px; top: 22vw; }
  .slider-arrow svg { width: 17px; height: 17px; }
  .slider-arrow--prev { inset-inline-start: 2px; }
  .slider-arrow--next { inset-inline-end: 2px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .slider-arrow { top: 15vw; }
}
@media (min-width: 1024px) {
  .slider-arrow { top: 135px; }
}

/* ════ CUSTOMERS CHOICE ════ */
.customers-choice { padding: 24px 0; }
.customers-choice-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .customers-choice-grid { grid-template-columns: 1.5fr 1fr; }
}
.customers-choice-hero {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
}
.customers-choice-hero-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
@media (max-width: 749px) {
  .customers-choice-hero-link { grid-template-columns: 1fr; }
}
.customers-choice-hero-image {
  position: relative;
  background: var(--cart-cloud);
  aspect-ratio: 1;
}
.customers-choice-hero-image img {
  width: 100%; height: 100%; object-fit: cover;
}
.customers-choice-hero-badge {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  background: var(--cart-violet);
  color: var(--cart-lime);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
}
.customers-choice-hero-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
.customers-choice-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.customers-choice-stars { color: #FFB72A; font-size: 14px; letter-spacing: 1px; }
.customers-choice-rating-text { font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
.customers-choice-hero-title { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.2; }
.customers-choice-hero-desc { font-size: 13px; color: var(--color-text-muted); line-height: 1.5; margin: 0; }
.customers-choice-hero-prices { display: inline-flex; gap: 10px; align-items: baseline; }
.customers-choice-price { font-size: 20px; font-weight: 900; color: var(--cart-orange); font-family: var(--cart-font-en); }
.customers-choice-compare { font-size: 14px; color: var(--color-text-muted); text-decoration: line-through; font-family: var(--cart-font-en); }
.customers-choice-cta-text {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-orange);
  margin-top: 6px;
}
.customers-choice-side {
  display: grid;
  gap: 12px;
}

/* ════ SHOP BY PRICE ════ */
.shop-by-price { padding: 24px 0; }
.shop-by-price-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
  .shop-by-price-grid { grid-template-columns: repeat(var(--cols), 1fr); }
}
.shop-by-price-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  border-radius: var(--cart-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s var(--cart-ease-out);
  overflow: hidden;
}
.shop-by-price-tile:hover { transform: translateY(-3px); }
.shop-by-price-tile--orange { background: var(--cart-orange); color: #fff; }
.shop-by-price-tile--violet { background: var(--cart-violet); color: #fff; }
.shop-by-price-tile--lime { background: var(--cart-lime); color: var(--cart-dark); border: 2px solid var(--cart-violet); }
.shop-by-price-tile--dark { background: var(--cart-dark); color: #fff; }
.shop-by-price-image {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
}
.shop-by-price-image img {
  width: 100%; height: 100%; object-fit: contain;
}
.shop-by-price-content {
  text-align: center;
  width: 100%;
}
.shop-by-price-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-bottom: 4px;
}
.shop-by-price-amount {
  display: block;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900;
  line-height: 1;
  font-family: var(--cart-font-en);
}
.shop-by-price-note {
  display: block;
  font-size: 11px;
  opacity: 0.85;
  margin-top: 4px;
}
.shop-by-price-arrow {
  display: inline-block;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 800;
  opacity: 0.7;
  transition: transform 0.2s, opacity 0.2s;
}
.shop-by-price-tile:hover .shop-by-price-arrow {
  opacity: 1;
  transform: translateX(4px);
}
[dir="rtl"] .shop-by-price-tile:hover .shop-by-price-arrow { transform: translateX(-4px); }

/* ════ TESTIMONIALS ════ */
.testimonials-section { padding: 32px 0; }
.testimonials-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 18px 0 24px;
  flex-wrap: wrap;
}
.testimonials-stat { text-align: center; }
.testimonials-stat strong {
  display: block;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
  line-height: 1;
}
.testimonials-stat span {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.testimonials-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border);
}
.testimonials-slider {
  position: relative;
}
.testimonials-slider-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
  padding: 4px;
}
.testimonials-slider-track::-webkit-scrollbar { display: none; }
.testimonials-slider-slide {
  flex: 0 0 calc(100% - 4px);
  scroll-snap-align: start;
}
@media (min-width: 768px) { .testimonials-slider-slide { flex: 0 0 calc(50% - 7px); } }
@media (min-width: 1024px) { .testimonials-slider-slide { flex: 0 0 calc(33.333% - 9.33px); } }
.testimonial-card {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  padding: 20px;
  height: 100%;
}
.testimonial-rating {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
}
.testimonial-star {
  color: #E5E5E5;
  font-size: 16px;
}
.testimonial-star.is-filled { color: #FFB72A; }
.testimonial-quote {
  font-size: 14px;
  color: var(--cart-dark);
  line-height: 1.6;
  margin: 0 0 16px;
  font-style: normal;
  border: none;
  padding: 0;
  font-weight: 500;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-avatar--initials {
  background: linear-gradient(135deg, var(--cart-orange), var(--cart-violet));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.testimonial-author-meta { flex: 1; line-height: 1.3; }
.testimonial-name {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-dark);
}
.testimonial-location {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
}
.testimonial-verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #1FAE6A;
  padding: 3px 7px;
  background: rgba(31,174,106,0.1);
  border-radius: 999px;
}

/* ════ BLOG PREVIEW ════ */
.blog-preview-section { padding: 24px 0; }
.blog-preview-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .blog-preview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog-preview-grid { grid-template-columns: repeat(var(--cols, 3), 1fr); }
}
.blog-preview-card {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.blog-preview-card:hover {
  border-color: var(--cart-orange);
  transform: translateY(-2px);
}
.blog-preview-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.blog-preview-image {
  aspect-ratio: 16 / 10;
  background: var(--cart-cloud);
  overflow: hidden;
}
.blog-preview-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s var(--cart-ease-out);
}
.blog-preview-card:hover .blog-preview-image img { transform: scale(1.04); }
.blog-preview-content {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blog-preview-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cart-orange);
  background: rgba(253,87,42,0.1);
  padding: 3px 10px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 4px;
}
.blog-preview-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  color: var(--cart-dark);
  line-height: 1.3;
}
.blog-preview-excerpt {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 4px 0 0;
}
.blog-preview-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 8px;
}
.blog-preview-cta {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-orange);
  margin-top: 6px;
}
.blog-preview-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-muted);
}

/* ════ INSTAGRAM FEED ════ */
.instagram-feed { padding: 24px 0; }
.instagram-feed-follow { margin-top: 14px; }
.instagram-feed-grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(var(--cols-mobile), 1fr);
}
@media (min-width: 1024px) {
  .instagram-feed-grid {
    grid-template-columns: repeat(var(--cols-desktop), 1fr);
    gap: 8px;
  }
}
.instagram-feed-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--cart-radius-sm);
  background: var(--cart-cloud);
}
.instagram-feed-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s;
}
.instagram-feed-item:hover img { transform: scale(1.08); }
.instagram-feed-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: background 0.2s, opacity 0.2s;
}
.instagram-feed-item:hover .instagram-feed-overlay {
  background: rgba(0,0,0,0.4);
  opacity: 1;
}
.instagram-feed-overlay svg { width: 28px; height: 28px; }

/* ════ COUNTDOWN CTA ════ */
.countdown-cta { padding: 24px 0; }
.countdown-cta-card {
  border-radius: var(--cart-radius-lg);
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.countdown-cta--gradient .countdown-cta-card {
  background: linear-gradient(135deg, var(--cart-orange), var(--cart-violet));
  color: #fff;
}
.countdown-cta--orange .countdown-cta-card { background: var(--cart-orange); color: #fff; }
.countdown-cta--violet .countdown-cta-card { background: var(--cart-violet); color: #fff; }
.countdown-cta--dark .countdown-cta-card { background: var(--cart-dark); color: #fff; }
.countdown-cta-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.2);
  padding: 4px 14px;
  border-radius: 999px;
}
.countdown-cta-heading {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 900;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.countdown-cta-sub {
  font-size: 16px;
  margin: 0;
  opacity: 0.92;
  max-width: 580px;
}
.countdown-cta-timer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.countdown-cta-timer-block {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 14px;
  border-radius: 10px;
  text-align: center;
  min-width: 64px;
}
.countdown-cta-timer-block strong {
  display: block;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  line-height: 1;
  font-family: var(--cart-font-en);
}
.countdown-cta-timer-block span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  margin-top: 2px;
}
.countdown-cta-timer-sep {
  font-size: 20px;
  font-weight: 900;
  opacity: 0.5;
  align-self: flex-start;
  padding-top: 12px;
}
@media (max-width: 480px) {
  .countdown-cta-timer-sep { display: none; }
  .countdown-cta-timer { gap: 4px; }
  .countdown-cta-timer-block { padding: 8px 10px; min-width: 56px; }
}

/* ════════════════════════════════════════════════════════════════════
   COLLECTION BANNER (from metafield)
   ════════════════════════════════════════════════════════════════════ */
.collection-banner {
  margin-block: 16px 12px;
}
.collection-banner-link {
  display: block;
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
  transition: transform 0.2s var(--cart-ease-out);
  text-decoration: none;
  background: var(--cart-cloud);
}
a.collection-banner-link:hover {
  transform: translateY(-2px);
}
.collection-banner-image {
  display: block;
}
.collection-banner-image img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
@media (max-width: 749px) {
  .collection-banner-image img {
    aspect-ratio: 1 / 1;
  }
}

/* ════════════════════════════════════════════════════════════════════
   COLLECTION PROMO BAR — top discount strip
   ════════════════════════════════════════════════════════════════════ */
.collection-promo-bar {
  background: linear-gradient(135deg, var(--cart-orange) 0%, var(--cart-violet) 100%);
  color: #fff;
  padding: 10px 0;
  margin-block: 0 16px;
  position: relative;
  overflow: hidden;
}
.collection-promo-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);
  pointer-events: none;
}
.collection-promo-bar-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: 4px 0;
}
@media (min-width: 1024px) {
  .collection-promo-bar-inner {
    justify-content: space-between;
    text-align: start;
  }
}
.collection-promo-bar-icon {
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  animation: promo-bar-bounce 2.4s ease-in-out infinite;
}
@keyframes promo-bar-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-6deg); }
  75% { transform: translateY(-2px) rotate(6deg); }
}
.collection-promo-bar-content {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  justify-content: center;
}
@media (min-width: 1024px) {
  .collection-promo-bar-content {
    justify-content: flex-start;
  }
}
.collection-promo-bar-text {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.collection-promo-bar-divider {
  opacity: 0.5;
  font-size: 16px;
  line-height: 1;
}
.collection-promo-bar-code-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.collection-promo-bar-code-label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.92;
}
.collection-promo-bar-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.95);
  color: var(--cart-dark);
  border: 1px dashed currentColor;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.12s;
}
.collection-promo-bar-code:hover {
  background: var(--cart-lime);
  transform: translateY(-1px);
}
.collection-promo-bar-code.is-copied {
  background: var(--cart-lime);
  border-color: var(--cart-violet);
}
.collection-promo-bar-code-value {
  font-family: var(--cart-font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
}
.collection-promo-bar-code-icon {
  flex-shrink: 0;
  opacity: 0.8;
}
.collection-promo-bar-expiry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.95;
}
.collection-promo-bar-expiry svg {
  flex-shrink: 0;
  opacity: 0.9;
}
.collection-promo-bar-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--cart-lime);
  color: var(--cart-dark);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  transition: transform 0.15s, background 0.15s;
  white-space: nowrap;
}
.collection-promo-bar-cta:hover {
  transform: translateX(3px);
  background: #C5E600;
}
[dir="rtl"] .collection-promo-bar-cta:hover {
  transform: translateX(-3px);
}

/* Mobile compact layout */
@media (max-width: 749px) {
  .collection-promo-bar {
    padding: 8px 0;
  }
  .collection-promo-bar-inner {
    gap: 8px;
  }
  .collection-promo-bar-icon {
    font-size: 18px;
  }
  .collection-promo-bar-text {
    font-size: 12px;
  }
  .collection-promo-bar-code-label {
    font-size: 11px;
  }
  .collection-promo-bar-code-value {
    font-size: 12px;
  }
  .collection-promo-bar-expiry {
    font-size: 11px;
  }
  .collection-promo-bar-cta {
    font-size: 12px;
    padding: 6px 14px;
  }
  .collection-promo-bar-divider {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   COLLECTION PAGE — Layout, Sidebar Filters, View Toggle, Trust Badges
   ════════════════════════════════════════════════════════════════════ */

.collection-section {
  padding-block: 16px 48px;
}

/* ━━━ Header ━━━ */
.collection-header {
  margin-block-end: 20px;
}
.collection-title {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  margin: 0 0 6px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cart-dark);
}
.collection-description {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
  margin-block-end: 8px;
  max-width: 720px;
}
.collection-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}

/* ━━━ Toolbar (filters trigger + view toggle + sort) ━━━ */
.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 12px;
  border-block: 1px solid var(--color-border);
  margin-block-end: 20px;
  flex-wrap: wrap;
}
.collection-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.collection-toolbar-btn:hover {
  border-color: var(--cart-orange);
  color: var(--cart-orange);
}
.collection-toolbar-btn--mobile-only {
  /* Visible only when filters are on (drawer mode = mobile + tablet < 1024px) */
}
@media (min-width: 1024px) {
  .collection-toolbar-btn--mobile-only {
    display: none;
  }
}
.collection-toolbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 999px;
  font-family: var(--cart-font-en);
  font-size: 11px;
  font-weight: 900;
  margin-inline-start: 2px;
}
.collection-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}

/* ━━━ View toggle (grid / list) ━━━ */
.collection-view-toggle {
  display: inline-flex;
  background: var(--cart-cloud);
  border-radius: 999px;
  padding: 3px;
}
.collection-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.collection-view-toggle-btn:hover {
  color: var(--cart-dark);
}
.collection-view-toggle-btn.is-active {
  background: var(--cart-white);
  color: var(--cart-orange);
  box-shadow: 0 1px 4px rgba(32, 31, 31, 0.08);
}
.collection-view-toggle-btn svg {
  width: 16px;
  height: 16px;
}

/* ━━━ Sort dropdown ━━━ */
.collection-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.collection-sort-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
@media (max-width: 540px) {
  .collection-sort-label { display: none; }
}
.collection-sort-select {
  padding: 7px 32px 7px 12px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-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='%23201F1F' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}
[dir="rtl"] .collection-sort-select {
  background-position: left 12px center;
  padding: 7px 12px 7px 32px;
}
.collection-sort-select:hover {
  border-color: var(--cart-orange);
}
.collection-sort-select:focus {
  outline: none;
  border-color: var(--cart-orange);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   COLLECTION SIDEBAR — Flat design, 20% width, Cart identity
   Matches theme cards: white bg, 24px radius, 1px border, no shadow
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Main layout: 20% sidebar + 80% products on desktop */
.collection-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
/* CRITICAL: Force ALL direct grid children to respect container width.
   Without min-width: 0, content can expand cells beyond the grid track. */
.collection-layout > * {
  min-width: 0;
}
.collection-products {
  min-width: 0;
  width: 100%;
}
@media (min-width: 1024px) {
  .collection-layout {
    grid-template-columns: minmax(0, 20%) minmax(0, 1fr);
    gap: 24px;
  }
  .collection-layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1440px) {
  .collection-layout {
    gap: 28px;
  }
}

/* ━━━ Filters wrapper (mobile drawer / desktop static) ━━━ */
.collection-filters {
  /* Mobile/tablet: closed drawer by default */
}
@media (max-width: 1023px) {
  .collection-filters {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer, 300);
    visibility: hidden;
    pointer-events: none;
  }
  .collection-filters.is-open {
    visibility: visible;
    pointer-events: auto;
  }
  .collection-filters-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 31, 31, 0.55);
    opacity: 0;
    transition: opacity 0.25s var(--cart-ease-out);
    cursor: pointer;
  }
  .collection-filters.is-open .collection-filters-backdrop {
    opacity: 1;
  }
  .collection-filters-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(360px, 88vw);
    background: var(--cart-white);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.32s var(--cart-ease-out);
    display: flex;
    flex-direction: column;
  }
  [dir="rtl"] .collection-filters-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(100%);
  }
  .collection-filters.is-open .collection-filters-panel {
    transform: translateX(0);
  }
}

/* Desktop: Flat sidebar matching theme cards */
@media (min-width: 1024px) {
  .collection-filters-backdrop { display: none; }
  .collection-filters-close { display: none; }
  .collection-filters-panel {
    background: var(--cart-white);
    border: 1px solid var(--color-border);
    border-radius: var(--cart-radius-lg);
    padding: 0;
    /* Static positioning — no sticky, no overflow */
    position: relative;
    /* Auto-fit height — no overflow */
    align-self: start;
  }
}

/* ━━━ Filters header ━━━ */
.collection-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-block-end: 1px solid var(--color-border);
  background: var(--cart-white);
}
@media (max-width: 1023px) {
  .collection-filters-header {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}
@media (min-width: 1024px) {
  .collection-filters-header {
    border-radius: var(--cart-radius-lg) var(--cart-radius-lg) 0 0;
  }
}
.collection-filters-title {
  font-size: 16px;
  font-weight: 900;
  margin: 0;
  color: var(--cart-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
}
/* Orange accent bar — brand identity */
.collection-filters-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--cart-orange);
  border-radius: 4px;
}
.collection-filters-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--cart-cloud);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cart-dark);
  transition: background 0.15s, color 0.15s;
}
.collection-filters-close:hover {
  background: var(--cart-orange);
  color: #fff;
}
.collection-filters-close svg { width: 16px; height: 16px; }

/* ━━━ Filter groups — Flat, spacious, no animations ━━━ */
.collection-filter-group {
  border-block-end: 1px solid var(--color-border);
}
.collection-filter-group:last-of-type {
  border-block-end: none;
}
.collection-filter-group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  font-size: 12px;
  font-weight: 800;
  color: var(--cart-gray-700);
  cursor: pointer;
  list-style: none;
  user-select: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.collection-filter-group-summary::-webkit-details-marker { display: none; }
.collection-filter-group-summary:hover {
  color: var(--cart-orange);
}
.collection-filter-group[open] .collection-filter-group-summary {
  color: var(--cart-orange);
  padding-block-end: 8px;
}
.collection-filter-chevron {
  transition: transform 0.2s var(--cart-ease-out);
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.6;
}
.collection-filter-group[open] .collection-filter-chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.collection-filter-group-body {
  padding: 4px 22px 18px;
}

/* ━━━ Filter list (checkboxes) — Clean flat ━━━ */
.collection-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.collection-filter-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--cart-dark);
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
}
.collection-filter-option:hover {
  background: rgba(253, 87, 42, 0.06);
}
.collection-filter-option:has(input:checked) {
  background: rgba(253, 87, 42, 0.1);
  color: var(--cart-orange);
}
.collection-filter-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.collection-filter-checkbox {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 5px;
  background: var(--cart-white);
  color: transparent;
  transition: background-color 0.15s var(--cart-ease-out), color 0.15s var(--cart-ease-out), border-color 0.15s var(--cart-ease-out), opacity 0.15s var(--cart-ease-out), transform 0.15s var(--cart-ease-out), box-shadow 0.15s var(--cart-ease-out);
}
.collection-filter-checkbox svg {
  width: 11px;
  height: 11px;
  transition: transform 0.15s var(--cart-ease-out);
  transform: scale(0);
}
.collection-filter-option input:checked ~ .collection-filter-checkbox {
  background: var(--cart-orange);
  border-color: var(--cart-orange);
  color: #fff;
}
.collection-filter-option input:checked ~ .collection-filter-checkbox svg {
  transform: scale(1);
}
.collection-filter-name {
  flex: 1;
  font-weight: 600;
  line-height: 1.3;
}
.collection-filter-count {
  font-size: 11px;
  color: var(--color-text-muted);
  font-family: var(--cart-font-en);
  font-weight: 700;
  flex-shrink: 0;
}
.collection-filter-option:has(input:checked) .collection-filter-count {
  color: var(--cart-orange);
}
.collection-filter-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.collection-filter-option.is-disabled:hover {
  background: transparent;
}

/* ━━━ Price range filter ━━━ */
.collection-filter-price-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: end;
}
.collection-filter-price-inputs::before {
  content: '';
  grid-column: 2;
  height: 1.5px;
  width: 10px;
  background: var(--color-border);
  border-radius: 1px;
  margin-block-end: 14px;
}
.collection-filter-price-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.collection-filter-price-field input {
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--cart-font-en);
  font-weight: 700;
  background: var(--cart-white);
  color: var(--cart-dark);
  transition: border-color 0.15s;
  width: 100%;
}
.collection-filter-price-field input:focus {
  outline: none;
  border-color: var(--cart-orange);
}
.collection-filter-price-info {
  margin-block-start: 12px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.collection-filter-price-info strong {
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
  font-weight: 900;
}

/* ━━━ Apply / Clear actions — Brand-colored CTAs ━━━ */
.collection-filters-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px 18px;
  border-block-start: 1px solid var(--color-border);
}
@media (max-width: 1023px) {
  .collection-filters-actions {
    position: sticky;
    inset-block-end: 0;
    background: var(--cart-white);
    margin-block-start: auto;
  }
}
@media (min-width: 1024px) {
  .collection-filters-actions {
    border-radius: 0 0 var(--cart-radius-lg) var(--cart-radius-lg);
  }
}
.collection-filters-clear {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 999px;
  transition: color 0.15s, background 0.15s;
}
.collection-filters-clear:hover {
  color: var(--cart-violet);
  background: rgba(78, 36, 181, 0.08);
}
.collection-filters-apply {
  flex: 1;
  font-size: 13px;
  padding: 11px 18px;
  font-weight: 800;
  /* Uses .btn-orange — already styled with brand orange + hover shadow */
}

.product-grid--collection {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr));
  min-width: 0;
}
@media (min-width: 640px) {
  .product-grid--collection {
    grid-template-columns: repeat(var(--cols-t, 3), minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .product-grid--collection {
    grid-template-columns: repeat(var(--cols-d, 6), minmax(0, 1fr));
    gap: 14px;
  }
}

/* Force product cards to respect container — never overflow */
.product-grid--collection > .product-card,
.product-grid--collection > * {
  min-width: 0;
  max-width: 100%;
}
.product-grid--collection .product-card-image-wrap img,
.product-grid--collection .product-card-image {
  max-width: 100%;
  height: auto;
}

/* ━━━ LIST VIEW ━━━ */
[data-view="list"].product-grid--collection {
  grid-template-columns: 1fr;
  gap: 10px;
}
[data-view="list"] .product-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 12px;
  border-radius: var(--cart-radius-md, 10px);
}
@media (min-width: 768px) {
  [data-view="list"] .product-card {
    grid-template-columns: 200px 1fr;
    gap: 20px;
    padding: 16px;
  }
}
[data-view="list"] .product-card-image-wrap {
  aspect-ratio: 1;
  border-radius: var(--cart-radius-sm, 8px);
}
[data-view="list"] .product-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
[data-view="list"] .product-card-title {
  font-size: 15px;
  -webkit-line-clamp: 2;
}
@media (min-width: 768px) {
  [data-view="list"] .product-card-title {
    font-size: 17px;
    -webkit-line-clamp: 3;
  }
}

/* ━━━ TRUST BADGES — Cart Design pattern (15% tint + solid color, pill, no border) ━━━ */
.product-card-trust {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  margin-block-start: 6px;
  align-self: flex-start;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.product-card-trust svg {
  flex-shrink: 0;
}
/* Warranty 1Y — Cart Success green (#1FAE6A) at 15% tint */
.product-card-trust--warranty_1y,
.product-card-trust--warranty_anker {
  background: rgba(31, 174, 106, 0.15);
  color: #1FAE6A;
}
/* Fast delivery — Cart Orange at 15% tint */
.product-card-trust--fast_delivery {
  background: rgba(253, 87, 42, 0.15);
  color: var(--cart-orange);
}
/* Authentic — Cart Violet at 15% tint */
.product-card-trust--authentic {
  background: rgba(78, 36, 181, 0.15);
  color: var(--cart-violet);
}
/* Authorized dealer — Cart Yellow/Gold at 18% tint */
.product-card-trust--authorized {
  background: rgba(255, 183, 42, 0.22);
  color: #B26B00;
}
/* Same-day delivery — RED urgent (Amman, Sat-Thu before 5pm) */
.product-card-trust--same_day {
  background: rgba(229, 40, 60, 0.12);
  color: #C5283D;
  position: relative;
}
.product-card-trust--same_day::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #E5283C;
  border-radius: 50%;
  flex-shrink: 0;
  animation: same-day-pulse 1.5s ease-in-out infinite;
}
@keyframes same-day-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 40, 60, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(229, 40, 60, 0); }
}

/* Next-day delivery — Violet calm (after 5pm or Friday — less urgent) */
.product-card-trust--next_day {
  background: rgba(78, 36, 181, 0.12);
  color: var(--cart-violet);
}

/* In LIST view, trust badge gets a bit more breathing room */
[data-view="list"] .product-card-trust {
  font-size: 12.5px;
  padding: 5px 12px;
}

/* ━━━ Empty state ━━━ */
.collection-empty {
  text-align: center;
  padding: 64px 16px;
  color: var(--color-text-muted);
}
.collection-empty p {
  font-size: 16px;
  margin-block-end: 16px;
}

/* ━━━ Lock body scroll when filters drawer open (mobile) ━━━ */
body.filters-open {
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════════════
   COLLECTION — Quick Filters Pills, Promo Strip, Stock Urgency, Savings
   Cart Design System identity: pill 999px, brand colors, no shadows on cards
   ════════════════════════════════════════════════════════════════════ */

/* ━━━ Quick Filters Bar — Pills row ━━━ */
.collection-quick-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 4px;
  width: 100%;
  order: 99; /* push to a new row on mobile (after toolbar) */
}
.collection-quick-filters::-webkit-scrollbar {
  display: none;
}

/* Desktop: tight inline alignment — all toolbar items share 36px height */
@media (min-width: 1024px) {
  .collection-toolbar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    align-items: center;
  }
  .collection-quick-filters {
    flex: 1 1 auto;
    min-width: 0;
    margin-block-end: 0;
    padding-block-end: 0;
    order: 0;
    justify-content: flex-start;
    gap: 8px;
  }
  /* Unified 36px height across all toolbar pills/buttons */
  .quick-filter-pill {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 16px;
    line-height: 1;
  }
  .quick-filter-pill-count {
    line-height: 1;
  }
  /* Push view toggle + sort to the right */
  .collection-toolbar-right {
    margin-inline-start: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .collection-view-toggle {
    height: 36px;
    padding: 3px;
  }
  .collection-view-toggle-btn {
    height: 30px;
  }
  .collection-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .collection-sort-label {
    margin: 0;
    line-height: 1;
  }
  .collection-sort-select {
    height: 36px;
    padding: 0 32px 0 12px;
    line-height: 1;
  }
  [dir="rtl"] .collection-sort-select {
    padding: 0 12px 0 32px;
  }
}
.quick-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
  line-height: 1;
  background: var(--cart-white);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
  flex-shrink: 0;
  vertical-align: middle;
}
/* Inner elements must never stretch the pill — keep them inside the fixed height. */
.quick-filter-pill > * { flex-shrink: 0; }
.quick-filter-pill:hover {
  border-color: var(--cart-orange);
  color: var(--cart-orange);
  transform: translateY(-1px);
}
.quick-filter-pill svg {
  flex-shrink: 0;
}
.quick-filter-pill-label {
  line-height: 1;
}
.quick-filter-pill-count {
  font-family: var(--cart-font-en);
  font-weight: 800;
  font-size: 11px;
  color: var(--color-text-muted);
  background: var(--cart-cloud);
  padding: 3px 8px;
  border-radius: 999px;
  line-height: 1;
}
/* Active state — orange filled (brand) */
.quick-filter-pill.is-active {
  background: var(--cart-orange);
  border-color: var(--cart-orange);
  color: #fff;
}
.quick-filter-pill.is-active .quick-filter-pill-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
/* Sale pill: lime + violet border (Cart signature discount tag pattern) */
.quick-filter-pill--sale.is-active,
.quick-filter-pill--sale:hover {
  background: var(--cart-lime);
  border-color: var(--cart-violet);
  color: var(--cart-dark);
}
.quick-filter-pill--sale.is-active .quick-filter-pill-count {
  background: rgba(78, 36, 181, 0.15);
  color: var(--cart-dark);
}
/* New pill: violet (Cart secondary) */
.quick-filter-pill--new:hover {
  border-color: var(--cart-violet);
  color: var(--cart-violet);
}
.quick-filter-pill--new.is-active {
  background: var(--cart-violet);
  border-color: var(--cart-violet);
  color: #fff;
}
.quick-filter-pill--new.is-active .quick-filter-pill-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ━━━ Multi Promo Strip — single horizontal row ━━━ */
.collection-promo-strip {
  margin-block-end: 16px;
  padding: 0;
}
.collection-promo-strip-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.collection-promo-strip-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 999px;
}
.collection-promo-strip-list {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  padding-block: 2px;
}
.collection-promo-strip-list::-webkit-scrollbar {
  display: none;
}
.collection-promo-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cart-lime);
  color: var(--cart-dark);
  border: 2px solid var(--cart-violet);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s, box-shadow 0.15s;
  line-height: 1;
}
.collection-promo-strip-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--cart-shadow-cta);
}
.collection-promo-strip-btn.is-copied {
  background: #fff;
  border-color: var(--cart-orange);
  color: var(--cart-orange);
}
.collection-promo-strip-btn-code {
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.collection-promo-strip-btn-label {
  font-weight: 600;
  font-size: 11.5px;
  opacity: 0.85;
}
.collection-promo-strip-btn-value {
  font-family: var(--cart-font-en);
  font-weight: 800;
  font-size: 12px;
  padding-inline-start: 6px;
  border-inline-start: 1.5px solid currentColor;
  opacity: 0.9;
}
.collection-promo-strip-btn-icon {
  opacity: 0.6;
}
.collection-promo-strip-btn:hover .collection-promo-strip-btn-icon {
  opacity: 1;
}

/* Mobile compact */
@media (max-width: 749px) {
  .collection-promo-strip-icon {
    width: 32px;
    height: 32px;
  }
  .collection-promo-strip-btn {
    padding: 7px 12px;
    font-size: 11.5px;
  }
  .collection-promo-strip-btn-code {
    font-size: 12px;
  }
  .quick-filter-pill {
    padding: 0 14px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    box-sizing: border-box;
    line-height: 1;
    font-size: 12.5px;
  }
}

/* ━━━ Product Card: Savings amount ━━━ */
.product-card-savings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1FAE6A;
  margin-block-start: 4px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.product-card-savings svg {
  flex-shrink: 0;
}
.product-card-savings strong {
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: -0.01em;
}

/* ━━━ Product Card: Stock urgency (low stock) ━━━ */
.product-card-urgency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(229, 40, 60, 0.1);
  color: #C5283D;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-block-start: 6px;
  align-self: flex-start;
  line-height: 1.3;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.product-card-urgency-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #E5283C;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  animation: urgency-pulse 1.8s ease-in-out infinite;
}
@keyframes urgency-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(229, 40, 60, 0.55);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(229, 40, 60, 0);
  }
}

/* List view: more breathing room */
[data-view="list"] .product-card-savings {
  font-size: 12.5px;
}
[data-view="list"] .product-card-savings strong {
  font-size: 13px;
}
[data-view="list"] .product-card-urgency {
  font-size: 12px;
  padding: 5px 12px;
}

/* ════════════════════════════════════════════════════════════════════
   COLLECTION — Phase 2: Bestsellers Strip, Cart Summary, Recently Viewed
   Cart Design System: pills, 24px radius cards, brand colors
   ════════════════════════════════════════════════════════════════════ */

/* ━━━ Bestsellers Strip (inline within collection) ━━━ */
.collection-bestsellers-strip {
  margin-block: 32px 24px;
  padding: 24px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-lg);
}
.collection-bestsellers-strip-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 18px;
}
.collection-bestsellers-strip-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.collection-bestsellers-strip-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--cart-orange);
  color: var(--cart-lime);
  border-radius: 50%;
}
.collection-bestsellers-strip-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-orange);
  margin-block-end: 2px;
}
.collection-bestsellers-strip-title {
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--cart-dark);
  line-height: 1.2;
}
.collection-bestsellers-strip-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-violet);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.collection-bestsellers-strip-link:hover {
  background: var(--cart-violet);
  color: #fff;
  border-color: var(--cart-violet);
  transform: translateY(-1px);
}

.collection-bestsellers-strip-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cart-orange) transparent;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 4px;
}
.collection-bestsellers-strip-track::-webkit-scrollbar {
  height: 6px;
}
.collection-bestsellers-strip-track::-webkit-scrollbar-thumb {
  background: var(--cart-orange);
  border-radius: 999px;
}
.collection-bestsellers-strip-track::-webkit-scrollbar-track {
  background: transparent;
}

/* Individual bestseller card */
.bestseller-strip-card {
  flex: 0 0 auto;
  width: 160px;
  background: var(--cart-white);
  border-radius: var(--cart-radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--cart-ease-out), border-color 0.18s;
}
@media (min-width: 768px) {
  .bestseller-strip-card { width: 180px; }
}
.bestseller-strip-card:hover {
  transform: translateY(-3px);
  border-color: var(--cart-orange);
}
.bestseller-strip-card-rank {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: 13px;
  border: 2px solid var(--cart-lime);
}
.bestseller-strip-card-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--cart-cloud);
  overflow: hidden;
}
.bestseller-strip-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bestseller-strip-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--cart-cloud), var(--cart-gray-300));
}
.bestseller-strip-card-discount {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
}
.bestseller-strip-card-info {
  padding: 10px 12px 12px;
}
.bestseller-strip-card-title {
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--cart-dark);
  min-height: 2.6em;
}
.bestseller-strip-card-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.bestseller-strip-card-price {
  font-family: var(--cart-font-en);
  font-size: 14px;
  font-weight: 900;
  color: var(--cart-dark);
}
.bestseller-strip-card:has(.bestseller-strip-card-compare) .bestseller-strip-card-price {
  color: var(--cart-orange);
}
.bestseller-strip-card-compare {
  font-family: var(--cart-font-en);
  font-size: 11px;
  color: var(--cart-gray-500);
  text-decoration: line-through;
  font-weight: 600;
  opacity: 0.7;
}

/* Mobile: compact bestseller cards */
@media (max-width: 749px) {
  .collection-bestsellers-strip {
    padding: 16px;
    margin-block: 24px 16px;
  }
  .collection-bestsellers-strip-icon {
    width: 36px;
    height: 36px;
  }
  .collection-bestsellers-strip-title {
    font-size: 17px;
  }
  .bestseller-strip-card {
    width: 140px;
  }
}

/* ━━━ Floating Cart Summary (sidebar bottom) ━━━ */
.collection-cart-summary {
  display: none; /* hidden by default; mobile gets bottom-fixed via JS or N/A */
}
@media (min-width: 1024px) {
  .collection-cart-summary {
    display: block;
    margin-block-start: 16px;
    background: var(--cart-white);
    border: 1px solid var(--color-border);
    border-radius: var(--cart-radius-lg);
    overflow: hidden;
    position: sticky;
    top: calc(var(--header-h, 70px) + 16px);
  }
  .collection-cart-summary[hidden] {
    display: none;
  }
}
.collection-cart-summary-inner {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.collection-cart-summary-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.collection-cart-summary-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(253, 87, 42, 0.1);
  color: var(--cart-orange);
  border-radius: 12px;
}
.collection-cart-summary-icon svg {
  width: 20px;
  height: 20px;
}
.collection-cart-summary-counts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.collection-cart-summary-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}
.collection-cart-summary-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-dark);
}
.collection-cart-summary-count .nums {
  font-family: var(--cart-font-en);
  font-weight: 900;
  color: var(--cart-orange);
}

.collection-cart-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 10px;
  border-block: 1px solid var(--color-border);
}
.collection-cart-summary-total-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-gray-700);
  letter-spacing: -0.005em;
}
.collection-cart-summary-total-value {
  font-family: var(--cart-font-en);
  font-size: 16px;
  font-weight: 900;
  color: var(--cart-dark);
  letter-spacing: -0.01em;
}

.collection-cart-summary-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.collection-cart-summary-progress-text {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cart-violet);
  line-height: 1.3;
}
.collection-cart-summary-progress.is-complete .collection-cart-summary-progress-text {
  color: #1FAE6A;
  font-weight: 800;
}
.collection-cart-summary-progress-bar {
  height: 6px;
  background: var(--cart-cloud);
  border-radius: 999px;
  overflow: hidden;
}
.collection-cart-summary-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cart-orange) 0%, var(--cart-violet) 100%);
  border-radius: 999px;
  transition: width 0.35s var(--cart-ease-out);
}
.collection-cart-summary-progress.is-complete .collection-cart-summary-progress-fill {
  background: #1FAE6A;
}

.collection-cart-summary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 800;
  padding: 11px 18px;
  border-radius: 999px;
}

/* ════════════════════════════════════════════════════════════════════
   COLLECTION — Phase 3: Social Proof + Smart Recommendations
   Cart Design: subtle, brand-colored, live-feel signals
   ════════════════════════════════════════════════════════════════════ */

/* ━━━ Social Proof (on product cards) ━━━ */
.product-card-social-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-block-start: 6px;
  font-size: 10.5px;
  line-height: 1.3;
}
.social-proof-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.social-proof-item .nums {
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: 11px;
}
.social-proof-item--viewers {
  color: var(--cart-violet);
}
.social-proof-item--sold {
  color: #1FAE6A;
}
.social-proof-item--sold svg {
  flex-shrink: 0;
}
.social-proof-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--cart-violet);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  animation: social-proof-pulse 1.6s ease-in-out infinite;
}
@keyframes social-proof-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(78, 36, 181, 0.55);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(78, 36, 181, 0);
  }
}

/* List view: slightly larger */
[data-view="list"] .product-card-social-proof {
  font-size: 12px;
}
[data-view="list"] .social-proof-item .nums {
  font-size: 12.5px;
}

/* ━━━ Smart Recommendations Strip ━━━ */
.collection-recommendations {
  margin-block: 32px 16px;
  padding: 24px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
}
.collection-recommendations[hidden] {
  display: none;
}
.collection-recommendations-header {
  margin-block-end: 18px;
}
.collection-recommendations-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.collection-recommendations-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--cart-violet);
  color: var(--cart-lime);
  border-radius: 50%;
}
.collection-recommendations-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-violet);
  margin-block-end: 2px;
}
.collection-recommendations-title {
  font-size: 20px;
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--cart-dark);
  line-height: 1.2;
}

.collection-recommendations-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cart-violet) transparent;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 4px;
}
.collection-recommendations-track::-webkit-scrollbar {
  height: 6px;
}
.collection-recommendations-track::-webkit-scrollbar-thumb {
  background: var(--cart-violet);
  border-radius: 999px;
}
.collection-recommendations-track::-webkit-scrollbar-track {
  background: transparent;
}

/* Recommendation card */
.recommendation-card {
  flex: 0 0 auto;
  width: 170px;
  background: var(--cart-white);
  border-radius: var(--cart-radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s var(--cart-ease-out), border-color 0.18s;
  position: relative;
}
@media (min-width: 768px) {
  .recommendation-card { width: 190px; }
}
.recommendation-card:hover {
  transform: translateY(-3px);
  border-color: var(--cart-violet);
}
.recommendation-card.is-oos {
  opacity: 0.6;
}
.recommendation-card-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--cart-cloud);
  overflow: hidden;
}
.recommendation-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recommendation-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--cart-cloud), var(--cart-gray-300));
}
.recommendation-card-discount {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
}
.recommendation-card-oos-badge {
  position: absolute;
  bottom: 8px;
  inset-inline-start: 8px;
  background: var(--cart-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.recommendation-card-info {
  padding: 10px 12px 12px;
}
.recommendation-card-title {
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--cart-dark);
  min-height: 2.6em;
}
.recommendation-card-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.recommendation-card-price {
  font-family: var(--cart-font-en);
  font-size: 14px;
  font-weight: 900;
  color: var(--cart-dark);
}
.recommendation-card:has(.recommendation-card-compare) .recommendation-card-price {
  color: var(--cart-orange);
}
.recommendation-card-compare {
  font-family: var(--cart-font-en);
  font-size: 11px;
  color: var(--cart-gray-500);
  text-decoration: line-through;
  font-weight: 600;
  opacity: 0.7;
}

/* Mobile: compact recommendations */
@media (max-width: 749px) {
  .collection-recommendations {
    padding: 16px;
  }
  .collection-recommendations-icon {
    width: 36px;
    height: 36px;
  }
  .collection-recommendations-title {
    font-size: 17px;
  }
  .recommendation-card {
    width: 150px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   SEARCH PAGE — Matches collection page polish with Cart identity
   ════════════════════════════════════════════════════════════════════ */

.search-page {
  padding-block: 32px 48px;
}

/* ━━━ Search header ━━━ */
.search-page-header {
  margin-block-end: 24px;
}
.search-page-title {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 900;
  margin: 0 0 20px;
  color: var(--cart-dark);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.search-page-title strong {
  color: var(--cart-orange);
  font-weight: 900;
}

/* Search input */
.search-page-form {
  margin-block-end: 16px;
}
.search-page-form-wrap {
  position: relative;
  max-width: 720px;
  display: flex;
  align-items: center;
  background: var(--cart-white);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.search-page-form-wrap:focus-within {
  border-color: var(--cart-orange);
}
.search-page-form-icon {
  position: absolute;
  inset-inline-start: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  display: inline-flex;
}
.search-page-form-icon svg {
  width: 18px;
  height: 18px;
}
.search-page-form-input {
  flex: 1 1 auto;
  padding: 14px 12px 14px 48px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: var(--cart-dark);
  font-weight: 500;
  outline: none;
  min-width: 0;
}
[dir="rtl"] .search-page-form-input {
  padding: 14px 48px 14px 12px;
}
.search-page-form-input::placeholder {
  color: var(--color-text-muted);
  font-weight: 400;
}
.search-page-form-submit {
  flex-shrink: 0;
  margin: 4px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 999px;
}

/* Result count meta */
.search-page-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 4px;
}
.search-page-count {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.search-page-count strong,
.search-page-count .nums {
  font-family: var(--cart-font-en);
  font-weight: 900;
  color: var(--cart-orange);
}

/* ━━━ Toolbar — same structure as collection but simpler ━━━ */
.collection-toolbar--search {
  justify-content: space-between;
}
.search-toolbar-info {
  display: inline-flex;
  align-items: center;
}
.search-toolbar-info-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 600;
}
@media (max-width: 749px) {
  .search-toolbar-info {
    display: none;
  }
}

/* ━━━ Non-product cards (articles, pages, collections) ━━━ */
.search-non-product-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s var(--cart-ease-out);
  /* spans multiple grid columns on desktop for visibility */
  grid-column: span 2;
}
@media (min-width: 1024px) {
  .search-non-product-card {
    grid-column: span 3;
  }
}
.search-non-product-card:hover {
  border-color: var(--cart-violet);
  transform: translateY(-2px);
}
.search-non-product-card-type {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-violet);
  align-self: flex-start;
  padding: 3px 9px;
  background: rgba(78, 36, 181, 0.1);
  border-radius: 999px;
}
.search-non-product-card-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0;
  color: var(--cart-dark);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.search-non-product-card-content {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ━━━ Empty state (no results) ━━━ */
.search-empty-state {
  max-width: 560px;
  margin: 32px auto 48px;
  text-align: center;
  padding: 40px 24px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
}
.search-empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: var(--cart-cloud);
  border-radius: 50%;
  margin-block-end: 20px;
  color: var(--color-text-muted);
}
.search-empty-state-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--cart-dark);
  letter-spacing: -0.01em;
}
.search-empty-state-message {
  font-size: 15px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.search-empty-state-message strong {
  color: var(--cart-dark);
  font-weight: 800;
}
.search-empty-state-suggestions {
  text-align: start;
  padding: 18px 22px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
  margin-block-end: 24px;
}
.search-empty-state-suggestions-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-orange);
  margin: 0 0 10px;
}
.search-empty-state-suggestions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-empty-state-suggestions-list li {
  font-size: 13.5px;
  color: var(--cart-dark);
  font-weight: 500;
  padding-inline-start: 16px;
  position: relative;
  line-height: 1.4;
}
.search-empty-state-suggestions-list li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 0;
  color: var(--cart-orange);
  font-weight: 900;
}
.search-empty-state-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ━━━ Initial state (no query yet) ━━━ */
.search-initial-state {
  text-align: center;
  padding-block: 48px;
}
.search-initial-state-message {
  font-size: 15px;
  color: var(--color-text-muted);
}

/* ━━━ Mobile adjustments ━━━ */
@media (max-width: 749px) {
  .search-page {
    padding-block: 20px 32px;
  }
  .search-page-form-input {
    padding: 12px 12px 12px 44px;
    font-size: 14px;
  }
  [dir="rtl"] .search-page-form-input {
    padding: 12px 44px 12px 12px;
  }
  .search-page-form-submit {
    padding: 8px 16px;
    font-size: 12px;
  }
  .search-empty-state {
    padding: 32px 16px;
  }
  .search-empty-state-icon {
    width: 72px;
    height: 72px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   JEZDAN WALLET — Customer cashback wallet page
   Cart Design: gradient hero card, flat tier cards, identity-driven
   ════════════════════════════════════════════════════════════════════ */

.wallet-page {
  padding-block: 32px 64px;
}

/* ━━━ Wallet header ━━━ */
.wallet-header {
  margin-block-end: 28px;
}
.wallet-header-back {
  margin-block-end: 16px;
}
.wallet-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 8px 14px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: background-color 0.15s var(--cart-ease-out), color 0.15s var(--cart-ease-out), border-color 0.15s var(--cart-ease-out), opacity 0.15s var(--cart-ease-out), transform 0.15s var(--cart-ease-out), box-shadow 0.15s var(--cart-ease-out);
}
.wallet-back-link:hover {
  color: var(--cart-orange);
  border-color: var(--cart-orange);
  transform: translateX(-2px);
}
[dir="rtl"] .wallet-back-link:hover {
  transform: translateX(2px);
}
.wallet-back-link svg {
  flex-shrink: 0;
}
[dir="rtl"] .wallet-back-link svg {
  transform: scaleX(-1);
}

.wallet-page-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 900;
  margin: 0 0 6px;
  color: var(--cart-dark);
  letter-spacing: -0.015em;
}
.wallet-page-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(253, 87, 42, 0.12);
  color: var(--cart-orange);
  border-radius: 12px;
}
.wallet-page-subtitle {
  font-size: 14.5px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.wallet-page-subtitle strong {
  color: var(--cart-dark);
  font-weight: 800;
}

/* ━━━ Overview (balance + stats grid) ━━━ */
.wallet-overview {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-block-end: 40px;
}
@media (min-width: 768px) {
  .wallet-overview {
    grid-template-columns: 2fr 1fr;
    gap: 20px;
  }
}

/* Main balance card — bold gradient hero */
.wallet-balance-card {
  position: relative;
  background: linear-gradient(135deg, var(--cart-orange) 0%, #ff7748 50%, var(--cart-violet) 100%);
  color: #fff;
  border-radius: var(--cart-radius-lg);
  padding: 32px 28px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(253, 87, 42, 0.18);
}
.wallet-balance-card-decoration {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--cart-lime) 0%, transparent 70%);
  opacity: 0.18;
  pointer-events: none;
}
.wallet-balance-card-content {
  position: relative;
  z-index: 1;
}
.wallet-balance-card-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-block-end: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.wallet-balance-card-label-icon {
  display: inline-flex;
}
.wallet-balance-card-amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: clamp(40px, 8vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-block-end: 14px;
}
.wallet-balance-card-currency {
  font-size: 0.5em;
  font-weight: 800;
  opacity: 0.9;
  letter-spacing: 0;
}
.wallet-balance-card-note {
  font-size: 13px;
  margin: 0;
  opacity: 0.92;
  line-height: 1.4;
  font-weight: 500;
}

/* Stat cards (lifetime / used) — flat, brand-tinted */
.wallet-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) {
  .wallet-stats {
    grid-template-columns: 1fr;
  }
}
.wallet-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  transition: border-color 0.18s, transform 0.18s;
}
.wallet-stat-card:hover {
  border-color: var(--cart-orange);
  transform: translateY(-2px);
}
.wallet-stat-card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.wallet-stat-card--earned .wallet-stat-card-icon {
  background: rgba(31, 174, 106, 0.14);
  color: #1FAE6A;
}
.wallet-stat-card--used .wallet-stat-card-icon {
  background: rgba(78, 36, 181, 0.12);
  color: var(--cart-violet);
}
.wallet-stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.wallet-stat-card-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: 1;
}
.wallet-stat-card-value {
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: 22px;
  color: var(--cart-dark);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.wallet-stat-card-value small {
  font-size: 0.55em;
  font-weight: 700;
  opacity: 0.7;
  letter-spacing: 0;
}

/* ━━━ Wallet sections (How it works, History) ━━━ */
.wallet-section {
  margin-block-end: 40px;
}
.wallet-section--history {
  margin-block-end: 0;
}
.wallet-section-header {
  margin-block-end: 22px;
}
.wallet-section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-orange);
  margin-block-end: 6px;
}
.wallet-section-title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--cart-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wallet-section-description {
  font-size: 14.5px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
  max-width: 720px;
}

/* ━━━ Tier cards (ladder) ━━━ */
.wallet-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-block-end: 24px;
}
@media (min-width: 1024px) {
  .wallet-tiers {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
}
.wallet-tier-card {
  position: relative;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  padding: 18px 14px;
  text-align: center;
  transition: border-color 0.18s, transform 0.18s;
}
.wallet-tier-card:hover {
  border-color: var(--cart-orange);
  transform: translateY(-2px);
}
.wallet-tier-card-range {
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: 16px;
  color: var(--cart-dark);
  line-height: 1;
  margin-block-end: 2px;
}
.wallet-tier-card-currency {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-block-end: 12px;
}
.wallet-tier-card-reward {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--cart-font-en);
  font-weight: 900;
  font-size: 28px;
  color: var(--cart-orange);
  line-height: 1;
  margin-block-end: 4px;
  letter-spacing: -0.015em;
}
.wallet-tier-card-reward-unit {
  font-size: 0.55em;
  font-weight: 800;
  opacity: 0.85;
}
.wallet-tier-card-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* VIP tier — special treatment with lime accent */
.wallet-tier-card--vip {
  background: linear-gradient(135deg, var(--cart-violet) 0%, #6537c9 100%);
  border-color: var(--cart-violet);
  color: #fff;
}
.wallet-tier-card--vip:hover {
  border-color: var(--cart-lime);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(78, 36, 181, 0.3);
}
.wallet-tier-card--vip .wallet-tier-card-range,
.wallet-tier-card--vip .wallet-tier-card-label {
  color: rgba(255, 255, 255, 0.95);
}
.wallet-tier-card--vip .wallet-tier-card-currency {
  color: rgba(255, 255, 255, 0.7);
}
.wallet-tier-card--vip .wallet-tier-card-reward {
  color: var(--cart-lime);
}
.wallet-tier-card-vip-badge {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  background: var(--cart-lime);
  color: var(--cart-violet);
  border-radius: 999px;
  font-family: var(--cart-font-en);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  border: 2px solid var(--cart-white);
}

/* ━━━ CTA ━━━ */
.wallet-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-lg);
  flex-wrap: wrap;
}
.wallet-cta-text {
  font-size: 14.5px;
  font-weight: 700;
  margin: 0;
  color: var(--cart-dark);
  line-height: 1.4;
}
.wallet-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  padding: 11px 22px;
  flex-shrink: 0;
}
[dir="rtl"] .wallet-cta-btn svg {
  transform: scaleX(-1);
}

/* ━━━ Transaction history ━━━ */
.wallet-history {
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
}
.wallet-history-loading {
  padding: 32px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}
.wallet-history-list {
  display: flex;
  flex-direction: column;
}
.wallet-history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-block-end: 1px solid var(--color-border);
}
.wallet-history-item:last-child {
  border-block-end: none;
}
.wallet-history-item-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.wallet-history-item--earn .wallet-history-item-icon {
  background: rgba(31, 174, 106, 0.14);
  color: #1FAE6A;
}
.wallet-history-item--spend .wallet-history-item-icon {
  background: rgba(229, 40, 60, 0.12);
  color: #C5283D;
}
[dir="rtl"] .wallet-history-item--spend .wallet-history-item-icon svg {
  transform: scaleX(-1);
}
.wallet-history-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wallet-history-item-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--cart-dark);
  line-height: 1.3;
}
.wallet-history-item-note {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.wallet-history-item-date {
  font-size: 11.5px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.wallet-history-item-amount {
  flex-shrink: 0;
  font-family: var(--cart-font-en);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}
.wallet-history-item-amount small {
  font-size: 0.65em;
  font-weight: 700;
  opacity: 0.7;
}
.wallet-history-item--earn .wallet-history-item-amount {
  color: #1FAE6A;
}
.wallet-history-item--spend .wallet-history-item-amount {
  color: #C5283D;
}

/* History empty state */
.wallet-history-empty {
  padding: 48px 24px;
  text-align: center;
}
.wallet-history-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  background: var(--cart-cloud);
  border-radius: 50%;
  margin-block-end: 16px;
  color: var(--color-text-muted);
}
.wallet-history-empty-message {
  font-size: 14.5px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ━━━ Guest state (not logged in) ━━━ */
.wallet-guest-card {
  max-width: 480px;
  margin: 32px auto;
  text-align: center;
  padding: 48px 28px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
}
.wallet-guest-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: rgba(253, 87, 42, 0.1);
  color: var(--cart-orange);
  border-radius: 50%;
  margin-block-end: 18px;
}
.wallet-guest-card-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--cart-dark);
  letter-spacing: -0.01em;
}
.wallet-guest-card-message {
  font-size: 14.5px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}
.wallet-guest-card-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ━━━ Mobile adjustments ━━━ */
@media (max-width: 749px) {
  .wallet-page {
    padding-block: 20px 40px;
  }
  .wallet-balance-card {
    padding: 24px 20px;
  }
  .wallet-stat-card {
    padding: 14px 16px;
  }
  .wallet-stat-card-value {
    font-size: 18px;
  }
  .wallet-tier-card {
    padding: 14px 10px;
  }
  .wallet-tier-card-reward {
    font-size: 24px;
  }
  .wallet-cta {
    padding: 14px 16px;
  }
  .wallet-cta-text {
    font-size: 13px;
  }
  .wallet-history-item {
    padding: 14px 16px;
    gap: 10px;
  }
  .wallet-history-item-amount {
    font-size: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CART WALLET APPLY — "Use my wallet credit" button in cart page/drawer
   ════════════════════════════════════════════════════════════════════ */

.cart-wallet-apply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.06) 0%, rgba(78, 36, 181, 0.06) 100%);
  border: 1.5px solid rgba(253, 87, 42, 0.18);
  border-radius: var(--cart-radius-lg);
  margin-block: 16px;
  flex-wrap: wrap;
}
.cart-wallet-apply-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.cart-wallet-apply-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 12px;
}
.cart-wallet-apply-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cart-wallet-apply-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cart-orange);
  line-height: 1;
}
.cart-wallet-apply-balance {
  font-family: var(--cart-font-en);
  font-size: 18px;
  font-weight: 900;
  color: var(--cart-dark);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.cart-wallet-apply-balance .nums {
  font-family: inherit;
}

.cart-wallet-apply-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-wallet-apply-btn[disabled] {
  opacity: 0.7;
  cursor: progress;
}
.cart-wallet-apply-btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cart-wallet-spinner {
  animation: cart-wallet-spin 0.8s linear infinite;
}
@keyframes cart-wallet-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 599px) {
  .cart-wallet-apply {
    padding: 12px 14px;
    gap: 10px;
  }
  .cart-wallet-apply-icon {
    width: 36px;
    height: 36px;
  }
  .cart-wallet-apply-balance {
    font-size: 16px;
  }
  .cart-wallet-apply-btn {
    padding: 9px 14px;
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HELP CTA — "Can't find what you're looking for?" block
   Shown at bottom of collection / search / vendor pages
   Cart identity: orange-tinted bg, lime CTA, signature DNA
   ════════════════════════════════════════════════════════════════════ */

.help-cta-section {
  margin-block: 48px 24px;
  padding-inline: 0;
}

.help-cta {
  position: relative;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.04) 0%, rgba(78, 36, 181, 0.05) 100%);
  border: 1.5px solid rgba(253, 87, 42, 0.15);
  border-radius: var(--cart-radius-lg);
  padding: 40px 32px;
  overflow: hidden;
  text-align: center;
}

/* Decorative shapes (subtle, on-brand) */
.help-cta-decoration {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.help-cta-decoration--1 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(253, 87, 42, 0.12) 0%, transparent 70%);
  inset-block-start: -60px;
  inset-inline-end: -60px;
}
.help-cta-decoration--2 {
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(217, 255, 3, 0.18) 0%, transparent 70%);
  inset-block-end: -50px;
  inset-inline-start: -50px;
}

.help-cta-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}

.help-cta-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-orange);
  margin-block-end: 10px;
  padding: 5px 12px;
  background: rgba(253, 87, 42, 0.1);
  border-radius: 999px;
}

.help-cta-title {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 900;
  margin: 0 0 14px;
  color: var(--cart-dark);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.help-cta-message {
  font-size: clamp(14px, 2vw, 15.5px);
  color: var(--color-text-muted);
  margin: 0 0 24px;
  line-height: 1.6;
  font-weight: 500;
}

/* Action buttons */
.help-cta-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-block-end: 22px;
}

.help-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.18s var(--cart-ease-out), box-shadow 0.18s, background 0.18s, border-color 0.18s;
  border: 2px solid transparent;
}

/* WhatsApp button — Lime + Violet border (Cart DNA) */
.help-cta-btn--whatsapp {
  background: var(--cart-lime);
  color: var(--cart-violet);
  border-color: var(--cart-violet);
  box-shadow: 0 4px 14px rgba(217, 255, 3, 0.35);
}
.help-cta-btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 255, 3, 0.55);
  background: #e8ff32;
}
.help-cta-btn--whatsapp:active {
  transform: translateY(0);
}

/* Phone fallback button — Orange ghost */
.help-cta-btn--phone {
  background: var(--cart-white);
  color: var(--cart-orange);
  border-color: rgba(253, 87, 42, 0.3);
}
.help-cta-btn--phone:hover {
  transform: translateY(-2px);
  border-color: var(--cart-orange);
  box-shadow: 0 4px 14px rgba(253, 87, 42, 0.18);
}
.help-cta-btn--phone:active {
  transform: translateY(0);
}

.help-cta-btn-icon {
  display: inline-flex;
  align-items: center;
}
.help-cta-btn-icon svg {
  display: block;
}

/* Trust indicators below buttons */
.help-cta-trust {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-weight: 600;
}
.help-cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.help-cta-trust-item svg {
  color: var(--cart-orange);
  flex-shrink: 0;
}
.help-cta-trust-divider {
  opacity: 0.4;
  font-weight: 800;
}

/* Mobile adjustments */
@media (max-width: 749px) {
  .help-cta-section {
    margin-block: 36px 20px;
  }
  .help-cta {
    padding: 28px 20px;
  }
  .help-cta-decoration--1 {
    width: 140px;
    height: 140px;
  }
  .help-cta-decoration--2 {
    width: 100px;
    height: 100px;
  }
  .help-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .help-cta-btn {
    justify-content: center;
    padding: 13px 18px;
  }
  .help-cta-trust {
    gap: 8px;
    font-size: 11.5px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   SMART BADGES STRIP — Dynamic, realistic per-product badges
   Used on PDP. Each badge has its own brand-tinted color.
   ════════════════════════════════════════════════════════════════════ */

.smart-badges-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-block: 16px;
}
@media (min-width: 600px) {
  .smart-badges-strip {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.smart-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  transition: transform 0.18s var(--cart-ease-out), border-color 0.18s;
}
.smart-badge:hover {
  transform: translateY(-1px);
}
.smart-badge-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.smart-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.smart-badge-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--cart-dark);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.smart-badge-sub {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  line-height: 1.2;
}

/* Per-badge color identity */

.smart-badge--bestseller .smart-badge-icon {
  background: rgba(253, 87, 42, 0.14);
  color: var(--cart-orange);
}
.smart-badge--bestseller:hover {
  border-color: var(--cart-orange);
}

.smart-badge--value .smart-badge-icon {
  background: rgba(31, 174, 106, 0.14);
  color: #1FAE6A;
}
.smart-badge--value:hover { border-color: #1FAE6A; }

.smart-badge--cashback .smart-badge-icon {
  background: rgba(78, 36, 181, 0.12);
  color: var(--cart-violet);
}
.smart-badge--cashback:hover { border-color: var(--cart-violet); }

.smart-badge--shipping .smart-badge-icon {
  background: rgba(78, 36, 181, 0.12);
  color: var(--cart-violet);
}
.smart-badge--shipping:hover { border-color: var(--cart-violet); }

.smart-badge--fast .smart-badge-icon {
  background: rgba(229, 40, 60, 0.12);
  color: #C5283D;
  position: relative;
}
.smart-badge--fast .smart-badge-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: smart-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes smart-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 40, 60, 0); }
  50% { box-shadow: 0 0 0 4px rgba(229, 40, 60, 0.18); }
}
.smart-badge--fast:hover { border-color: #C5283D; }

.smart-badge--delivery .smart-badge-icon {
  background: rgba(253, 87, 42, 0.14);
  color: var(--cart-orange);
}
.smart-badge--delivery:hover { border-color: var(--cart-orange); }

.smart-badge--warranty .smart-badge-icon {
  background: rgba(31, 174, 106, 0.14);
  color: #1FAE6A;
}
.smart-badge--warranty:hover { border-color: #1FAE6A; }

.smart-badge--sale .smart-badge-icon {
  background: var(--cart-lime);
  color: var(--cart-violet);
  border: 2px solid var(--cart-violet);
}
.smart-badge--sale:hover { border-color: var(--cart-violet); }

.smart-badge--featured .smart-badge-icon {
  background: rgba(255, 183, 42, 0.18);
  color: #d99800;
}
.smart-badge--featured:hover { border-color: #d99800; }

/* Mobile: tighter spacing */
@media (max-width: 599px) {
  .smart-badge {
    padding: 10px 12px;
    gap: 8px;
  }
  .smart-badge-icon {
    width: 28px;
    height: 28px;
  }
  .smart-badge-title {
    font-size: 12px;
  }
  .smart-badge-sub {
    font-size: 10.5px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CART PAGE BOOSTERS — Progress, Cashback Hint, Trust Bar, Cross-sell
   ════════════════════════════════════════════════════════════════════ */

/* ━━━ Free shipping progress (top of cart) ━━━ */
.cart-shipping-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.06) 0%, rgba(78, 36, 181, 0.06) 100%);
  border: 1.5px solid rgba(253, 87, 42, 0.2);
  border-radius: var(--cart-radius-lg);
  margin-block-end: 20px;
  transition: background 0.4s, border-color 0.4s;
}
.cart-shipping-progress.is-unlocked {
  background: rgba(31, 174, 106, 0.1);
  border-color: #1FAE6A;
}
.cart-shipping-progress-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 10px;
  transition: background 0.3s;
}
.cart-shipping-progress.is-unlocked .cart-shipping-progress-icon {
  background: #1FAE6A;
}
.cart-shipping-progress-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-shipping-progress-message {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cart-dark);
  line-height: 1.3;
}
.cart-shipping-progress.is-unlocked .cart-shipping-progress-message {
  color: #1FAE6A;
}
.cart-shipping-progress-message strong {
  font-family: var(--cart-font-en);
  color: var(--cart-orange);
  font-weight: 900;
}
.cart-shipping-progress-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cart-shipping-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cart-orange) 0%, var(--cart-violet) 100%);
  border-radius: 999px;
  transition: width 0.6s var(--cart-ease-out);
  position: relative;
}
.cart-shipping-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  animation: cart-shipping-shimmer 2s linear infinite;
}
@keyframes cart-shipping-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
[dir="rtl"] @keyframes cart-shipping-shimmer {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ━━━ Cashback hint (inside summary) ━━━ */
.cart-cashback-hint {
  margin-block: 14px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(78, 36, 181, 0.06) 0%, rgba(253, 87, 42, 0.06) 100%);
  border: 1px solid rgba(78, 36, 181, 0.15);
  border-radius: var(--cart-radius-md);
}
.cart-cashback-hint-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cart-cashback-hint-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--cart-violet);
  color: #fff;
  border-radius: 10px;
}
.cart-cashback-hint-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  gap: 8px;
}
.cart-cashback-hint-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cart-dark);
}
.cart-cashback-hint-value {
  font-family: var(--cart-font-en);
  font-size: 17px;
  font-weight: 900;
  color: #1FAE6A;
  letter-spacing: -0.01em;
}
.cart-cashback-hint-value small {
  font-size: 0.6em;
  font-weight: 700;
}
.cart-cashback-hint-upgrade {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px dashed rgba(78, 36, 181, 0.2);
  font-size: 12px;
  color: var(--cart-violet);
  font-weight: 600;
  line-height: 1.4;
}
.cart-cashback-hint-upgrade-icon {
  font-family: var(--cart-font-en);
  font-weight: 900;
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}
.cart-cashback-hint-upgrade strong {
  font-family: var(--cart-font-en);
  font-weight: 900;
  color: var(--cart-violet);
}

/* ━━━ Trust bar (under checkout button) ━━━ */
.cart-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-block: 16px 0;
  padding: 14px 8px;
  background: var(--cart-cloud);
  border-radius: var(--cart-radius-md);
}
.cart-trust-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.cart-trust-bar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--cart-white);
  color: var(--cart-orange);
  border-radius: 50%;
}
.cart-trust-bar-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cart-dark);
  line-height: 1.2;
}

/* ━━━ Cross-sell (below cart) ━━━ */
.cart-cross-sell {
  margin-block: 40px 24px;
  padding-block: 24px;
  border-block-start: 1px solid var(--color-border);
}
.cart-cross-sell-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-end: 20px;
}
.cart-cross-sell-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-orange);
  order: -1;
}
.cart-cross-sell-title {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 900;
  margin: 0;
  color: var(--cart-dark);
  letter-spacing: -0.01em;
}
.cart-cross-sell-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}
@media (max-width: 749px) {
  .cart-cross-sell-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block-end: 8px;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .cart-cross-sell-track::-webkit-scrollbar { display: none; }
  .cart-cross-sell-card {
    flex-shrink: 0;
    width: 150px;
  }
}
.cart-cross-sell-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s;
}
.cart-cross-sell-card:hover {
  border-color: var(--cart-orange);
  transform: translateY(-2px);
}
.cart-cross-sell-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--cart-cloud);
  border-radius: 10px;
  overflow: hidden;
}
.cart-cross-sell-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-cross-sell-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--cart-cloud);
}
.cart-cross-sell-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cart-dark);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-cross-sell-card-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.cart-cross-sell-card-price {
  font-family: var(--cart-font-en);
  font-size: 13px;
  font-weight: 900;
  color: var(--cart-orange);
  letter-spacing: -0.01em;
}
.cart-cross-sell-card-compare {
  font-family: var(--cart-font-en);
  font-size: 11px;
  text-decoration: line-through;
  color: var(--color-text-muted);
  font-weight: 600;
}
.cart-cross-sell-loading {
  display: contents;
}
.cart-cross-sell-skeleton {
  aspect-ratio: 1 / 1.4;
  background: linear-gradient(90deg, var(--cart-cloud) 0%, rgba(0, 0, 0, 0.04) 50%, var(--cart-cloud) 100%);
  background-size: 200% 100%;
  border-radius: var(--cart-radius-md);
  animation: cart-cross-sell-shimmer 1.4s ease-in-out infinite;
}
@keyframes cart-cross-sell-shimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

/* Mobile cart adjustments */
@media (max-width: 599px) {
  .cart-shipping-progress {
    padding: 12px 14px;
    gap: 10px;
  }
  .cart-shipping-progress-icon {
    width: 32px;
    height: 32px;
  }
  .cart-shipping-progress-message {
    font-size: 12.5px;
  }
  .cart-trust-bar {
    padding: 12px 4px;
    gap: 4px;
  }
  .cart-trust-bar-icon {
    width: 26px;
    height: 26px;
  }
  .cart-trust-bar-label {
    font-size: 9.5px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ════════════════════════════════════════════════════════════════════ */

.cookie-consent {
  position: fixed;
  z-index: 9998;
  inset-inline: 0;
  background: var(--cc-bg, #201F1F);
  color: var(--cc-text, #fff);
  transform: translateY(100%);
  transition: transform 0.4s var(--cart-ease-out);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2);
  padding: 20px 16px;
  max-height: 90vh;
  overflow-y: auto;
}
.cookie-consent--bottom { inset-block-end: 0; }
.cookie-consent--top {
  inset-block-start: 0;
  transform: translateY(-100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.cookie-consent--bottom-end,
.cookie-consent--bottom-start {
  inset: auto auto 20px;
  inset-inline-end: 20px;
  max-width: 400px;
  border-radius: var(--cart-radius-lg);
  inset-inline-start: auto;
}
.cookie-consent--bottom-start {
  inset-inline-start: 20px;
  inset-inline-end: auto;
}
.cookie-consent--visible {
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-consent--hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.cookie-consent--top.cookie-consent--hidden {
  transform: translateY(-110%);
}
.cookie-consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cookie-consent-content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cookie-consent-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.cookie-consent-text {
  flex: 1;
  min-width: 0;
}
.cookie-consent-title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--cc-text, #fff);
}
.cookie-consent-message {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: var(--cc-text, #fff);
  opacity: 0.9;
}
.cookie-consent-link {
  color: var(--cc-accent, #D9FF03);
  text-decoration: underline;
  font-weight: 600;
  margin-inline-start: 4px;
}
.cookie-consent-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}
.cookie-consent-category {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.18s;
}
.cookie-consent-category:hover {
  background: rgba(255, 255, 255, 0.06);
}
.cookie-consent-category input {
  margin-block-start: 2px;
  accent-color: var(--cc-accent, #D9FF03);
}
.cookie-consent-category strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-block-end: 2px;
}
.cookie-consent-category small {
  display: block;
  font-size: 11.5px;
  opacity: 0.7;
  line-height: 1.4;
}
.cookie-consent-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-consent-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.cookie-consent-btn--primary {
  background: var(--cc-accent, #D9FF03);
  color: var(--cc-accent-text, #4E24B5);
  border: 2px solid var(--cc-accent-text, #4E24B5);
}
.cookie-consent-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(217, 255, 3, 0.4);
}
.cookie-consent-btn--ghost {
  background: transparent;
  color: var(--cc-text, #fff);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.cookie-consent-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.6);
}
@media (max-width: 600px) {
  .cookie-consent {
    padding: 16px 14px;
  }
  .cookie-consent-actions {
    flex-direction: column;
  }
  .cookie-consent-btn {
    width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════════
   WHATSAPP FAB
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   WHATSAPP FLOATING ACTION BUTTON — Redesigned (modern, polished)
   ════════════════════════════════════════════════════════════════════ */
.whatsapp-fab {
  position: fixed;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 12px;
  inset-block-end: 24px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.whatsapp-fab--bottom-end {
  inset-inline-end: 22px;
  flex-direction: row-reverse;
}
.whatsapp-fab--bottom-start {
  inset-inline-start: 22px;
}
.whatsapp-fab--hidden {
  opacity: 0;
  transform: translateY(24px) scale(0.7);
  pointer-events: none;
}

/* The button itself — gradient + layered shadow + ring */
.whatsapp-fab-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wa-fab-size, 60px);
  height: var(--wa-fab-size, 60px);
  border-radius: 50%;
  background: linear-gradient(145deg, #25D366 0%, #20BA5A 60%, #128C7E 100%);
  color: #fff;
  text-decoration: none;
  box-shadow:
    0 6px 18px rgba(37, 211, 102, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
  will-change: transform;
  isolation: isolate;
}
.whatsapp-fab-button:hover {
  transform: scale(1.09) rotate(-4deg);
  box-shadow:
    0 10px 28px rgba(37, 211, 102, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.whatsapp-fab-button:active {
  transform: scale(0.96);
}
.whatsapp-fab-button:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.5);
  outline-offset: 3px;
}

/* Brand "Cart" style variant — lime + violet */
.whatsapp-fab--style-cart .whatsapp-fab-button {
  background: linear-gradient(145deg, #E4FF3A 0%, #D9FF03 55%, #B8D900 100%);
  color: var(--cart-violet, #4E24B5);
  box-shadow:
    0 6px 18px rgba(217, 255, 3, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
.whatsapp-fab--style-cart .whatsapp-fab-button:hover {
  box-shadow:
    0 10px 28px rgba(217, 255, 3, 0.65),
    0 4px 10px rgba(0, 0, 0, 0.18),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.whatsapp-fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56%;
  height: 56%;
  position: relative;
  z-index: 2;
}
.whatsapp-fab-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* Pulse ring */
.whatsapp-fab-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.45);
  animation: wa-fab-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  z-index: 1;
}
.whatsapp-fab--style-cart .whatsapp-fab-pulse {
  background: rgba(217, 255, 3, 0.5);
}
@keyframes wa-fab-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Welcome label bubble */
.whatsapp-fab-label {
  position: relative;
  background: #fff;
  color: var(--cart-dark, #201F1F);
  padding: 11px 16px;
  padding-inline-end: 32px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--cart-font-ar, inherit);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0,0,0,0.1);
  opacity: 0;
  transform: scale(0.8) translateX(16px);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  white-space: nowrap;
  max-width: 240px;
}
/* Little speech-bubble tail pointing to the button */
.whatsapp-fab--bottom-end .whatsapp-fab-label::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 2px;
}
.whatsapp-fab--bottom-start .whatsapp-fab-label::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 2px;
}
[dir="rtl"] .whatsapp-fab-label {
  transform: scale(0.8) translateX(-16px);
  padding-inline-start: 32px;
  padding-inline-end: 16px;
}
.whatsapp-fab-label--visible {
  opacity: 1;
  transform: scale(1) translateX(0);
  pointer-events: auto;
}
.whatsapp-fab-label-close {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 8px;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.06);
  border: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition: background 0.15s;
}
.whatsapp-fab-label-close:hover {
  background: rgba(0, 0, 0, 0.13);
}

/* Hide-on rules + mobile safe area */
@media (max-width: 749px) {
  .whatsapp-fab--hide-mobile { display: none !important; }
  /* Sit above bottom nav + iOS home-indicator. Falls back gracefully if no nav. */
  .whatsapp-fab {
    inset-block-end: var(--wa-safe-bottom, calc(var(--bottom-nav-h, 64px) + 14px + env(safe-area-inset-bottom, 0px)));
    z-index: 9997;
  }
  .whatsapp-fab--bottom-end { inset-inline-end: max(14px, env(safe-area-inset-right, 0px)); }
  .whatsapp-fab--bottom-start { inset-inline-start: max(14px, env(safe-area-inset-left, 0px)); }
  .whatsapp-fab-label { display: none; } /* keep mobile clean */
}
@media (min-width: 750px) {
  .whatsapp-fab--hide-desktop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab-pulse { animation: none; }
  .whatsapp-fab-button:hover { transform: scale(1.05); }
}

/* ════════════════════════════════════════════════════════════════════
   STICKY ADD TO CART (MOBILE PDP)
   ════════════════════════════════════════════════════════════════════ */
.sticky-atc {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 9996;
  background: var(--cart-white, #fff);
  border-block-start: 1px solid var(--color-border, #eee);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
  padding-block-end: calc(10px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.3s var(--cart-ease-out);
  pointer-events: none;
}
.sticky-atc--visible { transform: translateY(0); pointer-events: auto; }
.sticky-atc--mobile_only {
  @media (min-width: 750px) { display: none; }
}
.sticky-atc--mobile_and_tablet {
  @media (min-width: 1024px) { display: none; }
}
.sticky-atc-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sticky-atc-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--cart-cloud, #efefef);
}
.sticky-atc-image img { width: 100%; height: 100%; object-fit: cover; }
.sticky-atc-info { flex: 1; min-width: 0; }
.sticky-atc-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cart-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-atc-prices {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-block-start: 2px;
}
.sticky-atc-price {
  font-family: var(--cart-font-en);
  font-size: 14px;
  font-weight: 900;
  color: var(--cart-orange);
}
.sticky-atc-compare {
  font-family: var(--cart-font-en);
  font-size: 11px;
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.sticky-atc-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
}
.sticky-atc-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.sticky-atc-qty input {
  width: 32px;
  text-align: center;
  border: 0;
  font-weight: 700;
  font-family: var(--cart-font-en);
  -moz-appearance: textfield;
}
.sticky-atc-qty input::-webkit-outer-spin-button,
.sticky-atc-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.sticky-atc-qty-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
}
.sticky-atc-button {
  background: var(--cart-lime, #D9FF03);
  color: var(--cart-violet, #4E24B5);
  border: 2px solid var(--cart-violet);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(217, 255, 3, 0.4);
}
.sticky-atc-button--sold-out {
  background: var(--cart-cloud);
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: not-allowed;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════════════════
   WISHLIST
   ════════════════════════════════════════════════════════════════════ */
.wishlist-btn {
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  cursor: pointer;
  color: var(--cart-dark);
  transition: transform 0.18s, color 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.wishlist-btn--card {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.wishlist-btn--pdp {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
}
.wishlist-btn-icon { display: inline-flex; align-items: center; }
.wishlist-icon-filled { display: none; color: #E5283C; }
.wishlist-btn--active .wishlist-icon-outline { display: none; }
.wishlist-btn--active .wishlist-icon-filled { display: inline-block; }
.wishlist-btn--active { color: #E5283C; }
.wishlist-btn:hover { transform: scale(1.1); }
.wishlist-btn--animate {
  animation: wishlist-pop 0.5s ease;
}
@keyframes wishlist-pop {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(0.9); }
}
.wishlist-label-remove { display: none; }
.wishlist-btn--active .wishlist-label-add { display: none; }
.wishlist-btn--active .wishlist-label-remove { display: inline; }

.wishlist-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--cart-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  z-index: 99999;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.wishlist-toast--success { background: #1FAE6A; }
.wishlist-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Wishlist page */
.wishlist-page-header {
  text-align: center;
  margin-block-end: 32px;
}
.wishlist-page-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--cart-dark);
}
.wishlist-page-subtitle {
  color: var(--color-text-muted);
  font-size: 14px;
}
.wishlist-page-subtitle strong {
  color: var(--cart-orange);
  font-family: var(--cart-font-en);
}
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.wishlist-card {
  position: relative;
  background: var(--cart-white);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
  transition: border-color 0.18s, transform 0.18s;
}
.wishlist-card:hover {
  border-color: var(--cart-orange);
  transform: translateY(-2px);
}
.wishlist-card-remove {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.wishlist-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.wishlist-card-image {
  aspect-ratio: 1 / 1;
  background: var(--cart-cloud);
  overflow: hidden;
}
.wishlist-card-image img { width: 100%; height: 100%; object-fit: cover; }
.wishlist-card-body { padding: 12px; }
.wishlist-card-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wishlist-card-prices {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.wishlist-card-price {
  font-family: var(--cart-font-en);
  font-size: 14px;
  font-weight: 900;
  color: var(--cart-orange);
}
.wishlist-card-compare {
  font-family: var(--cart-font-en);
  font-size: 11px;
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.wishlist-card-skeleton-img,
.wishlist-card-skeleton-text {
  background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
}
.wishlist-card-skeleton-img { aspect-ratio: 1; }
.wishlist-card-skeleton-text { height: 30px; margin: 12px; }
@keyframes skeleton-shimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}
.wishlist-empty {
  text-align: center;
  padding: 60px 20px;
}
.wishlist-empty-icon { font-size: 56px; margin-block-end: 16px; }

/* ════════════════════════════════════════════════════════════════════
   QUICK VIEW MODAL
   ════════════════════════════════════════════════════════════════════ */
.quick-view-modal {
  position: fixed;
  inset: 0;
  z-index: 9994;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.quick-view-modal--visible { opacity: 1; pointer-events: auto; }
.quick-view-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.quick-view-container {
  position: relative;
  background: #fff;
  border-radius: var(--cart-radius-lg);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.95);
  transition: transform 0.3s var(--cart-ease-out);
}
.quick-view-modal--visible .quick-view-container { transform: scale(1); }
.quick-view-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.quick-view-close:hover { background: rgba(0, 0, 0, 0.12); }
.quick-view-loading {
  padding: 80px;
  display: flex;
  justify-content: center;
}
.quick-view-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--cart-orange);
  border-radius: 50%;
  animation: ps-spin 0.8s linear infinite;
}
.quick-view-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 32px;
}
@media (max-width: 700px) {
  .quick-view-grid { grid-template-columns: 1fr; padding: 20px; }
}
.quick-view-main-image {
  aspect-ratio: 1 / 1;
  background: var(--cart-cloud);
  border-radius: 12px;
  overflow: hidden;
  margin-block-end: 10px;
}
.quick-view-main-image img { width: 100%; height: 100%; object-fit: cover; }
.quick-view-thumbs { display: flex; gap: 8px; }
.quick-view-thumb {
  width: 60px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cart-cloud);
  cursor: pointer;
  padding: 0;
}
.quick-view-thumb.is-active { border-color: var(--cart-orange); }
.quick-view-thumb img { width: 100%; height: 100%; object-fit: cover; }
.quick-view-vendor {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-block-end: 6px;
}
.quick-view-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.25;
}
.quick-view-prices {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-block-end: 16px;
}
.quick-view-price {
  font-family: var(--cart-font-en);
  font-size: 26px;
  font-weight: 900;
  color: var(--cart-orange);
}
.quick-view-compare {
  font-family: var(--cart-font-en);
  font-size: 16px;
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.quick-view-discount {
  background: var(--cart-lime);
  color: var(--cart-violet);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  border: 1.5px solid var(--cart-violet);
}
.quick-view-description {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-block-end: 20px;
}
.quick-view-variants { margin-block-end: 14px; }
.quick-view-variants label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-block-end: 6px;
}
.quick-view-variants select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
}
.quick-view-actions {
  display: flex;
  gap: 8px;
  margin-block-end: 14px;
}
.quick-view-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  overflow: hidden;
}
.quick-view-qty button {
  width: 36px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}
.quick-view-qty input {
  width: 40px;
  text-align: center;
  border: 0;
  font-weight: 700;
  font-family: var(--cart-font-en);
  -moz-appearance: textfield;
}
.quick-view-qty input::-webkit-outer-spin-button,
.quick-view-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.quick-view-add-btn {
  flex: 1;
  background: var(--cart-lime);
  color: var(--cart-violet);
  border: 2px solid var(--cart-violet);
  border-radius: 999px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(217, 255, 3, 0.4);
}
.quick-view-full-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-orange);
  text-decoration: none;
}

/* Quick view button on product cards */
.product-card-quick-view {
  position: absolute;
  inset-block-start: 50px;
  inset-inline-end: 8px;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-dark);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, color 0.18s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.product-card:hover .product-card-quick-view {
  opacity: 1;
  transform: translateY(0);
}
.product-card-quick-view:hover {
  color: var(--cart-orange);
}
@media (hover: none) {
  .product-card-quick-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════════════════════════════
   BACK TO TOP BUTTON
   ════════════════════════════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  z-index: 9993;
  /* Safe area: sit clear of the mobile bottom nav + iOS home indicator.
     On desktop the bottom nav is hidden so --btt-safe-bottom falls back to 20px. */
  inset-block-end: var(--btt-safe-bottom, 24px);
  border: 0;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  width: var(--btt-size, 44px);
  height: var(--btt-size, 44px);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(253, 87, 42, 0.4);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  visibility: hidden scale(0.8);
  transition: opacity 0.3s, transform 0.3s;
  /* Must not intercept taps while hidden — it is lifted above the ATC bar on
     mobile and would otherwise swallow Buy/Add-to-Cart clicks in its corner. */
  pointer-events: none;
}
/* Mobile (bottom nav visible): lift the button above nav + ATC bar + home indicator */
@media (max-width: 1023px) {
  .back-to-top {
    --btt-safe-bottom: calc(var(--bottom-nav-h, 64px) + 16px + env(safe-area-inset-bottom, 0px));
  }
}
.back-to-top--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(253, 87, 42, 0.55);
}
.back-to-top--bottom-start { inset-inline-start: max(16px, env(safe-area-inset-left, 0px)); }
.back-to-top--bottom-end   { inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); }

/* ════════════════════════════════════════════════════════════════════
   NEWSLETTER POPUP
   ════════════════════════════════════════════════════════════════════ */
.newsletter-popup {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.newsletter-popup--visible { opacity: 1; pointer-events: auto; }
.newsletter-popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.newsletter-popup-container {
  position: relative;
  background: #fff;
  border-radius: var(--cart-radius-lg);
  max-width: 460px;
  width: 100%;
  padding: 32px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.9);
  transition: transform 0.3s var(--cart-ease-out);
}
.newsletter-popup--visible .newsletter-popup-container { transform: scale(1); }
.newsletter-popup-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.newsletter-popup-close:hover { background: rgba(0, 0, 0, 0.12); }
.newsletter-popup-icon {
  font-size: 52px;
  margin-block-end: 12px;
  line-height: 1;
}
.newsletter-popup-title {
  font-size: 24px;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--cart-dark);
}
.newsletter-popup-message {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.newsletter-popup-form { margin: 0 0 14px; }
.newsletter-popup-input {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  font-size: 14px;
  margin-block-end: 8px;
}
.newsletter-popup-input:focus {
  outline: none;
  border-color: var(--cart-orange);
}
.newsletter-popup-submit {
  width: 100%;
  background: var(--cart-lime, #D9FF03);
  color: var(--cart-violet, #4E24B5);
  border: 2px solid var(--cart-violet);
  border-radius: 999px;
  padding: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 255, 3, 0.4);
}
.newsletter-popup-submit:hover { transform: translateY(-1px); }
.newsletter-popup-success {
  background: #1FAE6A;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  margin-block-start: 12px;
  font-weight: 700;
}
.newsletter-popup-privacy {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 12px 0 0;
}
.newsletter-popup-decline {
  background: none;
  border: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
  margin-block-start: 10px;
}
.newsletter-popup-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(78, 36, 181, 0.3);
  border-top-color: var(--cart-violet);
  border-radius: 50%;
  animation: ps-spin 0.8s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════
   FOOTER NEWSLETTER
   ════════════════════════════════════════════════════════════════════ */
.footer-newsletter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
  border-block-end: 1px solid rgba(255, 255, 255, 0.1);
  margin-block: 16px;
}
@media (max-width: 749px) {
  .footer-newsletter {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.footer-newsletter-text .footer-heading {
  margin: 0 0 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}
.footer-newsletter-subtitle {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.footer-newsletter-form {
  display: flex;
  gap: 8px;
  margin: 0;
}
.footer-newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
}
.footer-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.footer-newsletter-input:focus {
  outline: none;
  border-color: var(--cart-lime, #D9FF03);
  background: rgba(255, 255, 255, 0.1);
}
.footer-newsletter-btn {
  background: var(--cart-lime, #D9FF03);
  color: var(--cart-violet, #4E24B5);
  border: 2px solid var(--cart-violet);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.footer-newsletter-btn:hover { transform: translateY(-1px); }
.footer-newsletter-success {
  grid-column: 1 / -1;
  width: 100%;
  background: #1FAE6A;
  color: #fff;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  margin: 8px 0 0;
}

/* badge-count hidden helper */
.badge-count.hidden { display: none; }

/* ════════════════════════════════════════════════════════════════════
   COMPARE PRODUCTS
   ════════════════════════════════════════════════════════════════════ */
.compare-btn {
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  cursor: pointer;
  color: var(--cart-dark);
  transition: transform 0.18s, color 0.18s, background 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.compare-btn--card {
  position: absolute;
  inset-block-start: 92px;
  inset-inline-end: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  z-index: 4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-4px);
}
.product-card:hover .compare-btn--card {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) {
  .compare-btn--card {
    opacity: 1;
    transform: translateY(0);
  }
}
.compare-btn--pdp {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
}
.compare-btn:hover {
  transform: scale(1.05);
  color: var(--cart-violet);
}
.compare-btn--active {
  background: var(--cart-violet);
  color: #fff;
}
.compare-label-remove { display: none; }
.compare-btn--active .compare-label-add { display: none; }
.compare-btn--active .compare-label-remove { display: inline; }

/* Compare toast */
.compare-toast {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--cart-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  z-index: 99999;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.compare-toast--success { background: #1FAE6A; }
.compare-toast--error { background: #E5283C; }
.compare-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Floating compare bar */
.compare-bar {
  position: fixed;
  inset-block-end: 16px;
  inset-inline: 16px;
  z-index: 9991;
  max-width: 920px;
  margin-inline: auto;
  background: #fff;
  border: 1px solid rgba(78, 36, 181, 0.1);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(32, 31, 31, 0.22), 0 2px 8px rgba(78, 36, 181, 0.08);
  transform: translateY(calc(100% + 24px));
  opacity: 0;
  transition: transform 0.45s var(--cart-ease-out), opacity 0.35s ease;
  padding: 0;
  overflow: hidden;
  /* CRITICAL: when hidden the bar must NOT intercept taps. Without this it
     sits (invisible) over the product page Add-to-Cart / Buy buttons at a
     high z-index (9991) and swallows every click on mobile. */
  pointer-events: none;
  visibility: hidden;
}
/* Brand accent bar on top */
.compare-bar::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--cart-orange) 0%, var(--cart-violet) 55%, var(--cart-lime) 100%);
}
.compare-bar--visible { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; }
.compare-bar-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  padding-block-end: calc(16px + env(safe-area-inset-bottom));
}
@media (max-width: 749px) {
  .compare-bar { inset-inline: 8px; inset-block-end: calc(8px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .compare-bar-inner { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
}
.compare-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 10px;
  grid-column: 1 / -1;
}
.compare-bar-title {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  color: var(--cart-dark);
  display: flex;
  align-items: center;
  gap: 6px;
}
.compare-bar-counter {
  font-family: var(--cart-font-en);
  color: var(--cart-violet);
  font-weight: 700;
  font-size: 12px;
  background: rgba(78, 36, 181, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
}
.compare-bar-clear {
  background: none;
  border: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.compare-bar-clear:hover { background: rgba(229, 40, 60, 0.08); color: #E5283C; }
.compare-bar-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.compare-bar-item {
  position: relative;
  background: var(--cart-cloud);
  border-radius: 14px;
  padding: 8px;
  text-align: center;
  transition: transform 0.18s, box-shadow 0.18s;
}
.compare-bar-item:not(.compare-bar-item--empty):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.compare-bar-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
.compare-bar-item-title {
  font-size: 10px;
  font-weight: 600;
  margin-block-start: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.compare-bar-item-remove {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  background: var(--cart-orange);
  color: #fff;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(253, 87, 42, 0.4);
  transition: transform 0.15s;
}
.compare-bar-item-remove:hover { transform: scale(1.12); }
.compare-bar-item-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.compare-bar-item--empty {
  border: 2px dashed rgba(78, 36, 181, 0.2);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: rgba(78, 36, 181, 0.3);
  aspect-ratio: 1;
  font-weight: 300;
}
.compare-bar-cta {
  background: var(--cart-lime);
  color: var(--cart-violet);
  border: 2px solid var(--cart-violet);
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(217, 255, 3, 0.5);
  transition: transform 0.18s, box-shadow 0.18s;
}
.compare-bar-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 255, 3, 0.65);
}
@media (max-width: 749px) {
  .compare-bar-cta { display: block; width: 100%; }
}
.compare-bar-cta[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  background: var(--cart-cloud);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  box-shadow: none;
}
.compare-bar-close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  background: rgba(32, 31, 31, 0.06);
  color: var(--cart-dark);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}
.compare-bar-close:hover { background: rgba(229, 40, 60, 0.12); color: #E5283C; }

/* Compare page */
.compare-page-header {
  text-align: center;
  margin-block-end: 28px;
}
.compare-page-title {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 900;
  margin: 0 0 8px;
}
.compare-page-subtitle {
  color: var(--color-text-muted);
  font-size: 14px;
}
.compare-table-actions {
  display: flex;
  justify-content: flex-end;
  margin-block-end: 14px;
}
.compare-table {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  overflow: hidden;
  overflow-x: auto;
}
.compare-row {
  display: contents;
}
.compare-cell {
  background: #fff;
  padding: 12px;
  font-size: 13px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.compare-cell--label {
  background: var(--cart-cloud);
  font-weight: 800;
  color: var(--cart-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.compare-row--images .compare-cell { padding: 16px; position: relative; }
.compare-row--title .compare-cell { font-weight: 800; }
.compare-product-image {
  aspect-ratio: 1;
  background: var(--cart-cloud);
  border-radius: 8px;
  overflow: hidden;
}
.compare-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.compare-product-title {
  font-weight: 800;
  color: var(--cart-dark);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
}
.compare-product-title:hover { color: var(--cart-orange); }
.compare-remove-x {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-price {
  font-family: var(--cart-font-en);
  font-size: 16px;
  font-weight: 900;
  color: var(--cart-orange);
}
.compare-compare {
  font-family: var(--cart-font-en);
  font-size: 12px;
  text-decoration: line-through;
  color: var(--color-text-muted);
  margin-block-start: 2px;
}
.compare-availability {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.compare-availability--in {
  background: rgba(31, 174, 106, 0.15);
  color: #1FAE6A;
}
.compare-availability--out {
  background: rgba(229, 40, 60, 0.12);
  color: #E5283C;
}
.compare-description {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.compare-variants {
  font-size: 12px;
  line-height: 1.5;
}
.compare-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.compare-tags span {
  background: var(--cart-cloud);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.compare-empty {
  text-align: center;
  padding: 60px 20px;
}
.compare-empty-icon {
  font-size: 56px;
  margin-block-end: 16px;
}
.btn-sm {
  padding: 8px 14px;
  font-size: 12px;
}

@media (max-width: 700px) {
  .compare-table {
    min-width: 600px;
  }
  .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ════════════════════════════════════════════════════════════════════
   RECENT BOUGHT POPUP (live sales social proof)
   ════════════════════════════════════════════════════════════════════ */
.recent-bought {
  position: fixed;
  z-index: 9989;
  max-width: 320px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 12px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s, transform 0.4s var(--cart-ease-out);
  pointer-events: none;
}
.recent-bought--bottom-start { inset-block-end: 24px; inset-inline-start: 20px; }
.recent-bought--bottom-end { inset-block-end: 24px; inset-inline-end: 20px; }
.recent-bought--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.recent-bought-content {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
}
.recent-bought-close {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.5);
}
.recent-bought-close:hover { background: rgba(0, 0, 0, 0.12); }
.recent-bought-image {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cart-cloud);
}
.recent-bought-image img { width: 100%; height: 100%; object-fit: cover; }
.recent-bought-text { min-width: 0; }
.recent-bought-message {
  font-size: 11.5px;
  margin-block-end: 1px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.recent-bought-message strong {
  color: var(--cart-dark);
  margin-inline-end: 4px;
}
.recent-bought-product {
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-orange);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-bought-time {
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-block-start: 1px;
}
.recent-bought-verified {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1FAE6A;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .recent-bought {
    inset-inline: 12px !important;
    max-width: calc(100% - 24px);
  }
}

/* ════════════════════════════════════════════════════════════════════
   SHIPPING ESTIMATOR
   ════════════════════════════════════════════════════════════════════ */
.shipping-estimator {
  border: 1px solid var(--color-border);
  border-radius: var(--cart-radius-lg);
  background: #fff;
  margin-block: 12px;
}
.shipping-estimator-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
}
.shipping-estimator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--cart-cloud);
  border-radius: 8px;
  color: var(--cart-orange);
  flex-shrink: 0;
}
.shipping-estimator-title {
  flex: 1;
  min-width: 0;
}
.shipping-estimator-title strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-dark);
}
.shipping-estimator-current {
  display: block;
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-block-start: 1px;
}
.shipping-estimator-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: transform 0.25s;
}
.shipping-estimator--open .shipping-estimator-toggle {
  transform: rotate(180deg);
}
.shipping-estimator-body {
  padding: 0 14px 14px;
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 12px;
}
.shipping-estimator-help {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.shipping-estimator-governorates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.shipping-estimator-gov-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--cart-cloud);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}
.shipping-estimator-gov-btn:hover {
  background: #fff;
  border-color: var(--cart-orange);
  color: var(--cart-orange);
}
.gov-name { font-weight: 700; }
.gov-days {
  font-family: var(--cart-font-en);
  color: var(--color-text-muted);
  font-size: 11px;
}
.shipping-estimator-result {
  padding: 10px 14px;
  background: rgba(31, 174, 106, 0.05);
  border-block-start: 1px solid var(--color-border);
}
.shipping-result-line {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  margin-block-end: 4px;
  line-height: 1.4;
}
.shipping-result-line:last-child { margin-block-end: 0; }
.shipping-result-line--cost { color: var(--color-text-secondary); }
.shipping-result-icon { flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════
   CART UPSELL MODAL
   ════════════════════════════════════════════════════════════════════ */
.cart-upsell-modal {
  position: fixed;
  inset: 0;
  z-index: 9988;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.cart-upsell-modal--visible { opacity: 1; pointer-events: auto; }
.cart-upsell-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}
.cart-upsell-container {
  position: relative;
  background: #fff;
  border-radius: var(--cart-radius-lg);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  transform: scale(0.95);
  transition: transform 0.3s var(--cart-ease-out);
  padding: 28px;
}
.cart-upsell-modal--visible .cart-upsell-container { transform: scale(1); }
.cart-upsell-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-upsell-close:hover { background: rgba(0, 0, 0, 0.12); }
.cart-upsell-success {
  text-align: center;
  margin-block-end: 20px;
}
.cart-upsell-check {
  display: inline-flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #1FAE6A;
  color: #fff;
  margin-block-end: 12px;
}
.cart-upsell-title {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 12px;
  color: var(--cart-dark);
}
.cart-upsell-added-item {
  display: inline-grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  align-items: center;
  background: var(--cart-cloud);
  padding: 10px;
  border-radius: 10px;
  text-align: start;
}
.cart-upsell-added-item img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}
.cart-upsell-added-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-dark);
}
.cart-upsell-added-price {
  font-family: var(--cart-font-en);
  font-weight: 800;
  color: var(--cart-orange);
  margin-block-start: 4px;
}
.cart-upsell-recommendations {
  margin-block-end: 20px;
}
.cart-upsell-rec-heading {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 12px;
  color: var(--cart-dark);
}
.cart-upsell-loading {
  display: flex;
  justify-content: center;
  padding: 24px;
}
.cart-upsell-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--color-border);
  border-top-color: var(--cart-orange);
  border-radius: 50%;
  animation: ps-spin 0.8s linear infinite;
}
.cart-upsell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.cart-upsell-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.18s;
}
.cart-upsell-card:hover { border-color: var(--cart-orange); }
.cart-upsell-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.cart-upsell-card-image {
  aspect-ratio: 1;
  background: var(--cart-cloud);
}
.cart-upsell-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-upsell-card-info { padding: 8px; }
.cart-upsell-card-title {
  font-size: 11.5px;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-block-end: 4px;
}
.cart-upsell-card-prices {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: baseline;
}
.cart-upsell-card-price {
  font-family: var(--cart-font-en);
  font-size: 12px;
  font-weight: 900;
  color: var(--cart-orange);
}
.cart-upsell-card-compare {
  font-family: var(--cart-font-en);
  font-size: 10px;
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.cart-upsell-card-add {
  width: 100%;
  padding: 6px;
  background: var(--cart-lime);
  color: var(--cart-violet);
  border: 0;
  border-block-start: 1.5px solid var(--cart-violet);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s;
}
.cart-upsell-card-add:hover { background: #c8ee03; }
.cart-upsell-card-add:disabled { opacity: 0.6; cursor: not-allowed; }
.cart-upsell-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--color-border);
}
@media (max-width: 600px) {
  .cart-upsell-container { padding: 20px; }
  .cart-upsell-actions { flex-direction: column-reverse; }
  .cart-upsell-actions > * { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   IMAGE LIGHTBOX
   ════════════════════════════════════════════════════════════════════ */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9987;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.image-lightbox--visible { opacity: 1; pointer-events: auto; }
.image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: var(--lb-bg, #000);
}
.image-lightbox-close {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-end: 16px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.image-lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.image-lightbox-counter {
  position: absolute;
  inset-block-start: 22px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--cart-font-en);
  font-size: 13px;
  font-weight: 700;
  z-index: 5;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.image-lightbox-stage {
  position: relative;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.image-lightbox-stage img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.25s var(--cart-ease-out);
  user-select: none;
}
.image-lightbox-nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.18s;
}
.image-lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); }
.image-lightbox-nav--prev { inset-inline-start: 16px; }
.image-lightbox-nav--next { inset-inline-end: 16px; }
.image-lightbox-thumbs {
  position: absolute;
  inset-block-end: 16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  max-width: 90vw;
  overflow-x: auto;
  padding: 6px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  z-index: 5;
}
.image-lightbox-thumb {
  width: 56px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  background: var(--cart-cloud);
}
.image-lightbox-thumb.is-active { border-color: var(--cart-lime); }
.image-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 600px) {
  .image-lightbox-nav { display: none; }
  .image-lightbox-thumb { width: 44px; height: 44px; }
}

/* ════════════════════════════════════════════════════════════════════
   BUTTON SHADOWS REMOVAL — User requested no shadows on buttons
   ════════════════════════════════════════════════════════════════════
   
   This is an override block at end of CSS — overrides earlier rules
   without modifying them (preserves all other features intact).
   
   Applies to: all buttons + button-like clickable CTAs.
   Does NOT remove: card shadows (none exist), dropdown shadows,
   modal shadows, FAB pulse animations (those use shadow for the pulse).
*/

.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn-orange,
.btn-orange:hover,
.btn-lime,
.btn-lime:hover,
.btn-violet,
.btn-violet:hover,
.btn-ghost,
.btn-ghost:hover,
.btn-sm,
.btn-sm:hover,
.btn-lg,
.btn-lg:hover,
button.btn,
button.btn:hover,
a.btn,
a.btn:hover,

/* Sticky ATC button */
.sticky-atc-button,
.sticky-atc-button:hover,

/* Cookie consent buttons */
.cookie-consent-btn,
.cookie-consent-btn:hover,
.cookie-consent-btn--primary,
.cookie-consent-btn--primary:hover,

/* Newsletter popup */
.newsletter-popup-submit,
.newsletter-popup-submit:hover,

/* Quick view button */
.quick-view-add-btn,
.quick-view-add-btn:hover,

/* Cart upsell buttons */
.cart-upsell-card-add,
.cart-upsell-card-add:hover,

/* Compare bar CTA */
.compare-bar-cta,
.compare-bar-cta:hover,

/* Footer newsletter button */
.footer-newsletter-btn,
.footer-newsletter-btn:hover,

/* Cashback CTA on homepage */
.cashback-cta,
.cashback-cta:hover,

/* Help CTA */
.help-cta-btn,
.help-cta-btn:hover,

/* Wishlist + Compare + Quick view buttons on cards */
.wishlist-btn,
.wishlist-btn:hover,
.wishlist-btn--card,
.wishlist-btn--pdp,
.product-card-quick-view,
.product-card-quick-view:hover,
.compare-btn,
.compare-btn:hover,
.compare-btn--card,
.compare-btn--pdp,

/* Header icon buttons */
.header-icon-btn,
.header-icon-btn:hover,

/* Back to top button — keep pulse for FAB but remove static shadow */
.back-to-top,

/* Quantity buttons */
.sticky-atc-qty-btn,
.quick-view-qty button {
  box-shadow: none !important;
}

/* Note: Following retain shadows by design:
   - .whatsapp-fab-button (pulse animation needs it for the radiating effect)
   - .recent-bought (popup, not a button)
   - .quick-view-container, .newsletter-popup-container, .cart-upsell-container (modals)
   - .compare-bar (floating bar)
   - Header sticky (when scrolled)
*/


/* Hover-state shadows specifically removed (keeps any pulse/animation shadows) */
.cookie-consent-btn--primary:hover,
.compare-bar-cta:hover,
.newsletter-popup-submit:hover,
.cart-upsell-card-add:hover,
.footer-newsletter-btn:hover,
.btn:hover,
.btn-orange:hover,
.btn-lime:hover,
.btn-violet:hover {
  box-shadow: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   DELIVERY BADGE COLOR ALIASES — for renamed badge kinds
   ════════════════════════════════════════════════════════════════════
   - 'today' badge → red urgent (was 'same_day')
   - 'tomorrow' badge → violet calm (was 'next_day')
   - 'fast_delivery' stays orange (already defined above)
*/

/* Today in Amman — RED urgent with pulse */
.product-card-trust--today {
  background: rgba(229, 40, 60, 0.12);
  color: #C5283D;
  position: relative;
}
.product-card-trust--today::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #E5283C;
  border-radius: 50%;
  flex-shrink: 0;
  animation: same-day-pulse 1.5s ease-in-out infinite;
}

/* Tomorrow in Amman — Violet calm */
.product-card-trust--tomorrow {
  background: rgba(78, 36, 181, 0.12);
  color: var(--cart-violet);
}

/* ════════════════════════════════════════════════════════════════════
   PRICE DIRECTION FIX FOR RTL (Arabic)
   ════════════════════════════════════════════════════════════════════
   
   When in Arabic (RTL), prices like "45.000 د.أ" should display as a
   single unit reading left-to-right (Western Arabic numerals + currency
   symbol on the right of the number).
   
   This fixes price displays in:
     - PDP main price + compare + savings
     - Mobile ATC bar prices
     - Mobile purchase drawer prices
     - Sticky ATC prices
     - Cart prices
     - Quick view prices
     - All elements with .nums class (already partially handled)
   
   Without this: in RTL mode, "45.000 د.أ" may render as "د.أ 000.45"
   because flex/text-direction reverses the number-currency order.
*/

/* PDP main price block — force LTR direction for price text */
[dir="rtl"] .product-price,
[dir="rtl"] .product-compare,
[dir="rtl"] .product-savings,
[dir="rtl"] .mobile-atc-bar-price-current,
[dir="rtl"] .mobile-atc-bar-price-compare,
[dir="rtl"] .mobile-purchase-price,
[dir="rtl"] .mobile-purchase-compare,
[dir="rtl"] .sticky-atc-price,
[dir="rtl"] .sticky-atc-compare,
[dir="rtl"] .nums {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Price block flex direction — keep main price first, compare second visually */
[dir="rtl"] .product-price-block,
[dir="rtl"] .sticky-atc-prices,
[dir="rtl"] .mobile-atc-bar-price,
[dir="rtl"] .mobile-purchase-price-row {
  /* Use flex-direction: row, NOT row-reverse, so the main price stays first
     in visual order matching Arabic reading flow (price → compare → savings) */
  flex-direction: row;
}

/* Ensure currency text portion follows Arabic reading direction within ltr container */
[dir="rtl"] .product-price,
[dir="rtl"] .product-compare {
  text-align: start;
}

/* ════════════════════════════════════════════════════════════════════
   HEADER ICONS — Enhanced design (cart, wishlist, wallet, account)
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   CART BUTTON — icon ALWAYS visible (like wishlist), red count badge on corner
   Single consolidated definition — no conflicting overrides.
   ════════════════════════════════════════════════════════════════════ */
.header-icon-btn--cart {
  position: relative;
  width: 46px;
  height: 46px;
  padding: 0;
  background: linear-gradient(145deg, var(--cart-violet, #4E24B5) 0%, #3a1a8a 100%);
  border: none;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 4px 12px rgba(78, 36, 181, 0.32), inset 0 1px 1px rgba(255,255,255,0.18);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
}
.header-icon-btn--cart:hover {
  background: linear-gradient(145deg, #5a2dd0 0%, var(--cart-violet, #4E24B5) 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(78, 36, 181, 0.42), inset 0 1px 1px rgba(255,255,255,0.22);
  color: #fff;
}
.header-icon-btn--cart:active {
  transform: translateY(0) scale(0.95);
}
.header-icon-btn--cart:focus-visible {
  outline: 3px solid rgba(78, 36, 181, 0.4);
  outline-offset: 2px;
}
/* Cart icon — ALWAYS visible, white, never hidden or replaced */
.header-icon-btn--cart svg {
  width: 23px;
  height: 23px;
  color: #fff;
  stroke: currentColor;
  flex-shrink: 0;
  display: block;
  fill: #fff;
}
/* Count badge — small RED circle on the top-trailing corner (like a notification) */
.header-icon-btn--cart .badge-count {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border: 2px solid var(--cart-white, #fff);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  font-family: var(--cart-font-en);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: -0.02em;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(253, 87, 42, 0.45);
  pointer-events: none;
  z-index: 3;
}
/* Hide badge ONLY when cart is empty — icon stays visible */
.header-icon-btn--cart[data-cart-count="0"] .badge-count,
.header-icon-btn--cart .badge-count:empty {
  display: none;
}
/* Larger counts (99+) shrink font, never resize the icon */
.header-icon-btn--cart .badge-count.is-large {
  font-size: 9px;
  padding: 0 3px;
}
/* Bump animation when an item is added (uses existing is-pulsing hook) */
.header-icon-btn--cart.is-pulsing {
  animation: cart-icon-bump 0.5s ease;
}
@keyframes cart-icon-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.header-icon-btn--cart.is-pulsing .badge-count {
  animation: cart-badge-pulse 0.45s var(--cart-ease-out, ease-out);
}
@keyframes cart-badge-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .header-icon-btn--cart.is-pulsing,
  .header-icon-btn--cart.is-pulsing .badge-count { animation: none; }
}

/* Wishlist icon */
.header-icon-btn--wishlist:hover {
  background: rgba(229, 40, 60, 0.08);
}
.header-icon-btn--wishlist:hover svg {
  color: #E5283C;
  transform: scale(1.05);
}
.header-icon-btn--wishlist svg {
  transition: transform 0.2s ease, color 0.2s ease;
}
.header-icon-btn--wishlist .badge-count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #E5283C;
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  font-family: var(--cart-font-en);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
  box-sizing: content-box;
}

/* Wallet icon */
.header-icon-btn--wallet:hover {
  background: rgba(78, 36, 181, 0.08);
}
.header-icon-btn--wallet:hover svg {
  color: var(--cart-violet);
  transform: scale(1.05);
}
.header-icon-btn--wallet svg {
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Hide badge if has 'hidden' class (set by wishlist.js when 0 items) */
.badge-count.hidden { display: none !important; }




/* ═══════════════════════════════════════════════════════════════
   MEGA MENU — bulletproof: pure CSS hover + JS click for touch
   Strategy: Use display:none/block (most reliable across browsers).
   Force visible parent overflow. Use VERY high z-index.
   ═══════════════════════════════════════════════════════════════ */

/* The bar - ultra-high specificity to prevent any conflict */
html body .mega-menu-bar,
.shopify-section .mega-menu-bar,
.mega-menu-bar {
  display: none;
  background: #ffffff;
  border-block-start: 1px solid #E5E5E5;
  border-block-end: 1px solid #E5E5E5;
  position: relative;
  overflow: visible !important;
  width: 100%;
  /* Diagnostic: in case of conflict, force into normal flow */
  visibility: visible;
  opacity: 1;
}

/* Show on desktop only - ultra-high specificity */
@media (min-width: 1024px) {
  html body .mega-menu-bar,
  .shopify-section .mega-menu-bar,
  .mega-menu-bar { 
    display: block !important;
  }
}

/* Hide old marker block (defined above gets overridden by this) */
.mega-menu-bar.hidden-by-old-rule { display: none !important; }

/* Force parent containers to NOT clip */
.mega-menu-bar,
.mega-menu-bar .container,
.mega-menu-bar .mega-menu-list,
.mega-menu-bar .mega-menu-item {
  overflow: visible !important;
}

.mega-menu-bar .container {
  width: 100%;
  max-width: none;
  padding-inline: 16px;
}

.mega-menu-list {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* Each item: position relative, dropdown anchors here */
.mega-menu-item {
  position: static; /* dropdown anchors to .mega-menu-bar (full width) */
  flex-shrink: 0;
  list-style: none;
}

/* Top-level link */
.mega-menu-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  color: #201F1F;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border-block-end: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.mega-menu-link:hover,
.mega-menu-link.is-active,
.mega-menu-item:hover > .mega-menu-link,
.mega-menu-item.is-open > .mega-menu-link {
  color: #FD572A;
  border-block-end-color: #FD572A;
}

.mega-menu-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.mega-menu-chevron svg { width: 100%; height: 100%; }

.mega-menu-item:hover .mega-menu-chevron,
.mega-menu-item.is-open .mega-menu-chevron {
  transform: rotate(180deg);
}

/* ═══ DROPDOWN: hidden by default - full width across the bar ═══ */
.mega-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  width: 100%; /* span the full bar */
  background: #ffffff;
  border-top: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  padding: 0;
  margin: 0;
}

/* SHOW on hover (desktop) */
@media (hover: hover) and (pointer: fine) {
  .mega-menu-item.has-dropdown:hover > .mega-menu-dropdown {
    display: block !important;
  }
}

/* SHOW via JS (touch + click) */
.mega-menu-item.has-dropdown.is-open > .mega-menu-dropdown {
  display: block !important;
}

/* Dropdown is full-width — content is centered within site container */

.mega-menu-dropdown > .container {
  padding: 28px 16px !important;
  max-width: var(--container-max-width, 1440px) !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

@media (min-width: 1280px) {
  .mega-menu-dropdown > .container {
    padding: 32px !important;
  }
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* When featured present, use 2 cols */
.mega-menu-grid:has(.mega-menu-feature),
.mega-menu-grid.has-feature {
  grid-template-columns: 1fr 260px;
}

/* === Sub-links columns === */
.mega-menu-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px 24px;
}

.mega-menu-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mega-menu-sublink {
  display: block;
  color: #201F1F;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 0;
}
.mega-menu-sublink:hover { color: #FD572A; }

.mega-menu-sublist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}
.mega-menu-sublist li { margin: 0; list-style: none; }

.mega-menu-grandlink {
  display: block;
  padding: 2px 0;
  color: #6B6B6B;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
}
.mega-menu-grandlink:hover { color: #FD572A; }

/* === Product fallback (when link is a collection) === */
.mega-menu-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.mega-menu-product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.15s;
}
.mega-menu-product:hover { background: #F7F7F7; }
.mega-menu-product img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.mega-menu-product-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mega-menu-product-title {
  font-size: 13px;
  font-weight: 600;
  color: #201F1F;
  line-height: 1.3;
}
.mega-menu-product-price {
  font-size: 14px;
  font-weight: 700;
  color: #FD572A;
}

.mega-menu-view-all {
  display: inline-block;
  margin-top: 12px;
  color: #FD572A;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.mega-menu-view-all:hover { text-decoration: underline; }

/* === Featured card === */
.mega-menu-feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #F7F7F7;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mega-menu-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.mega-menu-feature img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.mega-menu-feature-content h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #201F1F;
}
.mega-menu-feature-content p {
  margin: 0 0 6px;
  font-size: 12px;
  color: #6B6B6B;
  line-height: 1.4;
}
.mega-menu-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #FD572A;
  font-weight: 700;
  font-size: 13px;
}

[dir="rtl"] .mega-menu-feature-cta span[aria-hidden] {
  transform: scaleX(-1);
}

/* Header menu button — hide on desktop when setting disabled */
@media (min-width: 1024px) {
  .header-menu-btn--mobile-only { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDE MENU ACCORDION — Collapsible sub-items
   ═══════════════════════════════════════════════════════════════ */

.side-menu-group {
  display: flex;
  flex-direction: column;
}

.side-menu-link--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: var(--cart-w-bold);
  color: var(--cart-dark);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: start;
  transition: background var(--t-fast), color var(--t-fast);
  font-family: inherit;
}

.side-menu-link--toggle:hover {
  background: var(--cart-cloud);
  color: var(--cart-orange);
}

.side-menu-link--toggle.active {
  color: var(--cart-orange);
}

.side-menu-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.side-menu-chevron svg {
  width: 100%;
  height: 100%;
}

/* When group is open, rotate chevron 90° downward */
.side-menu-group.is-open .side-menu-chevron {
  transform: rotate(90deg);
}
[dir="rtl"] .side-menu-group.is-open .side-menu-chevron {
  transform: rotate(-90deg);
}

/* Sub-links: smooth slide animation */
.side-menu-sublinks[hidden] {
  display: none !important;
}

.side-menu-group.is-open .side-menu-sublinks {
  animation: side-menu-slide-down 0.25s ease-out;
}

@keyframes side-menu-slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "View all" link in sub-items */
.side-menu-sublink--all {
  font-weight: var(--cart-w-bold);
  color: var(--cart-orange);
  border-block-end: 1px solid var(--color-border);
  margin-block-end: 4px;
  padding-block-end: 12px;
}
.side-menu-sublink--all:hover {
  color: var(--cart-orange-dark, #E04015);
  background: rgba(253, 87, 42, 0.05);
}

/* Featured collection description (when shown) */
.featured-collection-description {
  margin-block: 16px 24px;
  max-width: 800px;
  color: var(--cart-gray-700, #6B6B6B);
  font-size: 15px;
  line-height: 1.6;
}
.featured-collection-description p { margin: 0 0 8px; }
.featured-collection-description p:last-child { margin-bottom: 0; }

/* ═══ Cart Order Notes ═══ */
.cart-notes {
  margin-block: 12px 16px;
}
.cart-notes-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--cart-dark, #201F1F);
  margin-block-end: 6px;
}
.cart-notes-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border, #E5E5E5);
  border-radius: 12px;
  background: var(--cart-cloud, #F7F7F7);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
  transition: border-color 0.15s ease;
}
.cart-notes-input:focus {
  outline: none;
  border-color: var(--cart-orange, #FD572A);
  background: #fff;
}

/* ═══ Header Phone Number (desktop only) ═══ */
.header-phone {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--cart-cloud, #F7F7F7);
  color: var(--cart-dark, #201F1F);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
@media (min-width: 1024px) {
  .header-phone { display: inline-flex; }
}
.header-phone:hover {
  background: var(--cart-orange, #FD572A);
  color: #fff;
}
.header-phone-icon {
  display: inline-flex;
  align-items: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.header-phone-icon svg {
  width: 100%;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   TARGETED FIXES — Cart upsell + Search icon sizing on iOS Safari
   These rules are SCOPED to specific elements only.
   They do NOT touch: .header-search input, .predictive-search,
   form structure, or any JS-dependent attributes.
   ═══════════════════════════════════════════════════════════════ */

/* 1) Cart drawer upsell — fix collision with modal title styles */
.cart-drawer-upsell-track .cart-upsell-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 30px;
  margin: 0;
  color: var(--cart-dark, #201F1F);
  text-decoration: none;
}

/* 2) Cart drawer upsell — add button: force small circular size on iOS Safari */
.cart-drawer-upsell-track .cart-upsell-add {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  min-width: 0;
  max-width: 28px;
  max-height: 28px;
  padding: 0;
  flex: 0 0 28px;
  -webkit-appearance: none;
  appearance: none;
}
.cart-drawer-upsell-track .cart-upsell-add svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* 3) Cart drawer upsell — leave space for + button so price doesn't overlap */
.cart-drawer-upsell-track .cart-upsell-pricing {
  padding-inline-end: 36px;
}

/* 4) Mobile: smaller cards + button */
@media (max-width: 480px) {
  .cart-drawer-upsell-track .cart-upsell-card {
    flex: 0 0 130px;
  }
  .cart-drawer-upsell-track .cart-upsell-add {
    width: 26px;
    height: 26px;
    max-width: 26px;
    max-height: 26px;
    flex: 0 0 26px;
    bottom: 6px;
    inset-inline-end: 6px;
  }
  .cart-drawer-upsell-track .cart-upsell-add svg {
    width: 13px;
    height: 13px;
  }
  .cart-drawer-upsell-track .cart-upsell-title {
    font-size: 11px;
    min-height: 28px;
  }
  .cart-drawer-upsell-track .cart-upsell-price {
    font-size: 12px;
  }
  .cart-drawer-upsell-track .cart-upsell-pricing {
    padding-inline-end: 32px;
  }
}

/* 5) Mobile search icon — balanced size matching the input height.
   Icon button sits at inset-inline-start of the input.
   Input height is 52px so icon should be ~20px to look proportional.
   We ONLY adjust the icon SIZE/POSITION — never the input, never the form structure.
   This preserves predictive search behavior 100%. */
@media (max-width: 767px) {
  .header-search-icon {
    box-sizing: border-box;
    inset-inline-start: 12px;
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    padding: 0;
  }
  .header-search-icon svg {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    display: block;
  }
  /* Clear button — proportional too */
  .header-search-clear {
    inset-inline-end: 10px;
    width: 22px;
    height: 22px;
  }
  .header-search-clear svg {
    width: 11px;
    height: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SIDE MENU — Nested submenu styles (depth 0-4)
   Each level is indented + has slightly smaller text + visual hierarchy
   Works for both LTR and RTL via logical properties.
   ═══════════════════════════════════════════════════════════════ */

/* Nested groups: each level indented from start */
.side-menu-sublinks .side-menu-group {
  border-block-start: 1px solid var(--color-divider, #EEE);
}

/* Toggle buttons at deeper levels — slightly smaller + indented */
.side-menu-link--depth-1 {
  padding-inline-start: 36px;
  font-size: 14px;
  font-weight: 600;
}
.side-menu-link--depth-2 {
  padding-inline-start: 52px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cart-gray-700, #6B6B6B);
}
.side-menu-link--depth-3 {
  padding-inline-start: 68px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cart-gray-700, #6B6B6B);
}
.side-menu-link--depth-4 {
  padding-inline-start: 84px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cart-gray-700, #6B6B6B);
}

/* Same indent for leaf links at each depth */
.side-menu-link--leaf.side-menu-link--depth-1 {
  padding-inline-start: 36px;
  font-size: 14px;
}
.side-menu-link--leaf.side-menu-link--depth-2 {
  padding-inline-start: 52px;
  font-size: 13.5px;
}
.side-menu-link--leaf.side-menu-link--depth-3 {
  padding-inline-start: 68px;
  font-size: 13px;
}
.side-menu-link--leaf.side-menu-link--depth-4 {
  padding-inline-start: 84px;
  font-size: 12.5px;
}

/* "View all X" links at each depth */
.side-menu-sublink--depth-1 {
  padding-inline-start: 52px;
}
.side-menu-sublink--depth-2 {
  padding-inline-start: 68px;
}
.side-menu-sublink--depth-3 {
  padding-inline-start: 84px;
}
.side-menu-sublink--depth-4 {
  padding-inline-start: 100px;
}

/* "View all X" links: smaller font at deeper levels for hierarchy */
.side-menu-sublink--all.side-menu-sublink--depth-1 {
  font-size: 13.5px;
}
.side-menu-sublink--all.side-menu-sublink--depth-2,
.side-menu-sublink--all.side-menu-sublink--depth-3,
.side-menu-sublink--all.side-menu-sublink--depth-4 {
  font-size: 13px;
}

/* Smaller chevron at deeper levels */
.side-menu-link--depth-2 .side-menu-chevron,
.side-menu-link--depth-3 .side-menu-chevron,
.side-menu-link--depth-4 .side-menu-chevron {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* Visual tree-line guide for deep nesting (subtle vertical line on the start side) */
.side-menu-sublinks .side-menu-sublinks {
  position: relative;
}
.side-menu-sublinks .side-menu-sublinks::before {
  content: '';
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 24px;
  width: 1px;
  background: var(--color-border, #E5E5E5);
  opacity: 0.6;
  pointer-events: none;
}
[dir="rtl"] .side-menu-sublinks .side-menu-sublinks::before {
  inset-inline-start: auto;
  inset-inline-end: 24px;
}

/* Make sure nested sublinks containers don't have the "View all" border at depth > 0 */
.side-menu-sublink--depth-1.side-menu-sublink--all,
.side-menu-sublink--depth-2.side-menu-sublink--all,
.side-menu-sublink--depth-3.side-menu-sublink--all,
.side-menu-sublink--depth-4.side-menu-sublink--all {
  border-block-end: 1px solid var(--color-divider, #EEE);
  margin-block-end: 0;
  padding-block-end: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   LOCALE SWITCHER INSIDE SIDE MENU
   When locale switcher is rendered inside the side menu drawer
   (mobile only), make sure it works with proper positioning.
   ═══════════════════════════════════════════════════════════════ */
.side-menu-locale {
  padding: 12px 16px;
  border-block-start: 1px solid var(--color-divider, #EEE);
  position: relative;
  z-index: 1;
}
.side-menu-locale .locale-switcher {
  width: 100%;
}
.side-menu-locale .locale-switcher-trigger {
  width: 100%;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border, #E5E5E5);
  border-radius: 999px;
  background: var(--cart-cloud, #F7F7F7);
}
/* Panel inside side menu — anchor to viewport (mobile drawer is full-screen) */
.side-menu-locale .locale-switcher-panel {
  position: fixed !important;
  inset-block-start: auto !important;
  inset-block-end: 80px !important;
  inset-inline-start: 12px !important;
  inset-inline-end: 12px !important;
  z-index: 10000 !important;
  max-height: 60vh !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   JUDGE.ME INTEGRATION — Theme-styled widgets
   Judge.me ships its own CSS via App Embed (jdgm.css).
   Our overrides match JoCell brand: orange stars, lime accents.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Product card badge (compact stars + count) ─── */
.product-card-judgeme {
  margin-block: 4px 0;
  min-height: 18px;
}
.product-card-judgeme .jdgm-prev-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-family: var(--cart-font-en);
}
.product-card-judgeme .jdgm-prev-badge__stars {
  font-size: 13px;
  letter-spacing: 0;
  color: var(--cart-orange, #FD572A) !important;
}
.product-card-judgeme .jdgm-prev-badge__text {
  color: var(--color-text-muted, #6B6B6B);
  font-size: 11px;
}
/* Hide badge entirely if no reviews & we don't want empty placeholders */
.product-card-judgeme .jdgm-prev-badge[data-average-rating="0.00"] {
  display: none;
}

/* ─── PDP preview badge (under H1) ─── */
.product-judgeme-badge {
  margin-block: 8px 12px;
}
.product-judgeme-badge .jdgm-prev-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--cart-font-en);
}
.product-judgeme-badge .jdgm-prev-badge__stars {
  color: var(--cart-orange, #FD572A) !important;
  font-size: 16px;
}
.product-judgeme-badge .jdgm-prev-badge__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--cart-dark, #201F1F);
  text-decoration: underline;
  text-decoration-color: var(--color-border, #E5E5E5);
  text-underline-offset: 3px;
}
.product-judgeme-badge .jdgm-prev-badge__text:hover {
  color: var(--cart-orange, #FD572A);
}

/* ─── Full reviews widget on PDP ─── */
.product-judgeme-reviews-wrap {
  margin-block: 48px 32px;
  padding-block: 32px 0;
  border-block-start: 1px solid var(--color-divider, #EEE);
}
.product-judgeme-reviews-wrap .jdgm-rev-widg__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--cart-dark, #201F1F);
  margin-block-end: 8px;
}
.product-judgeme-reviews-wrap .jdgm-rev-widg__summary-stars {
  color: var(--cart-orange, #FD572A) !important;
}
.product-judgeme-reviews-wrap .jdgm-write-rev-link {
  background: var(--cart-orange, #FD572A) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  font-weight: 700;
  border: none !important;
  transition: background 0.15s, transform 0.15s;
}
.product-judgeme-reviews-wrap .jdgm-write-rev-link:hover {
  background: var(--cart-orange-dark, #E04015) !important;
  transform: translateY(-1px);
}
.product-judgeme-reviews-wrap .jdgm-rev {
  border-block-end: 1px solid var(--color-divider, #EEE);
  padding-block: 20px;
}
.product-judgeme-reviews-wrap .jdgm-rev__author {
  font-weight: 700;
  color: var(--cart-dark, #201F1F);
}
.product-judgeme-reviews-wrap .jdgm-rev__buyer-badge {
  background: var(--cart-success, #1FAE6A);
  color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.product-judgeme-reviews-wrap .jdgm-rev__rating {
  color: var(--cart-orange, #FD572A) !important;
}

/* ─── Homepage reviews carousel ─── */
.jdgm-carousel-wrapper {
  padding-block: 32px;
  background: var(--cart-cloud, #F7F7F7);
  border-radius: 16px;
  margin-block: 32px;
}
.jdgm-carousel-title {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--cart-dark, #201F1F);
  margin-block-end: 16px;
}
.jdgm-carousel-wrapper .jdgm-all-reviews-rating {
  color: var(--cart-orange, #FD572A) !important;
}

/* ─── Verified Judge.me badge ─── */
.jdgm-verified-badge {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.jdgm-verified-badge:hover { opacity: 1; }
.jdgm-verified-badge img {
  height: 36px;
  width: auto;
  display: block;
}

/* ─── RTL adjustments for Judge.me ─── */
[dir="rtl"] .jdgm-prev-badge,
[dir="rtl"] .jdgm-rev-widg,
[dir="rtl"] .jdgm-rev {
  direction: rtl;
}
[dir="rtl"] .jdgm-prev-badge__stars {
  direction: ltr; /* Stars always render LTR */
  display: inline-block;
}

/* ─── Mobile responsive ─── */
@media (max-width: 767px) {
  .product-judgeme-reviews-wrap {
    margin-block: 32px 24px;
    padding-block: 24px 0;
  }
  .product-judgeme-reviews-wrap .jdgm-rev-widg__title {
    font-size: 18px;
  }
  .jdgm-carousel-title {
    font-size: 20px;
  }
  .product-card-judgeme {
    margin-block: 2px;
  }
  .product-card-judgeme .jdgm-prev-badge__stars {
    font-size: 12px;
  }
}

/* Footer trust badges (Judge.me verified, etc.) */
.footer-trust-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-block: 16px;
  border-block-start: 1px solid var(--color-divider, rgba(255,255,255,0.1));
  margin-block-start: 16px;
}

/* Vendor link styling — clickable when enabled */
.product-card-vendor--link {
  color: var(--cart-orange, #FD572A);
  text-decoration: none;
  transition: color 0.15s, text-decoration-color 0.15s;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-block;
  position: relative;
}
.product-card-vendor--link::after {
  content: '';
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.2s;
}
.product-card-vendor--link:hover::after {
  transform: scaleX(1);
}
.product-card-vendor--link:hover {
  color: var(--cart-orange-dark, #E04015);
}

/* ═══════════════════════════════════════════════════════════════
   VARIANT → GALLERY INTERACTION POLISH
   When variant changes, the matching thumbnail glows briefly to
   signal the visual link between swatch and gallery.
   ═══════════════════════════════════════════════════════════════ */
@keyframes thumb-flash {
  0% { box-shadow: 0 0 0 0 var(--cart-orange, #FD572A); }
  60% { box-shadow: 0 0 0 4px rgba(253, 87, 42, 0.25); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.product-gallery-thumb.active {
  animation: thumb-flash 0.6s ease-out;
}
/* Smooth opacity transition during variant image swap */
.product-gallery-main img[data-gallery-main] {
  transition: opacity 0.18s ease-out;
  will-change: opacity;
}
/* On mobile, make sure thumb strip scrolls smoothly */
@media (max-width: 768px) {
  .product-gallery-thumbs {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DEALS PAGE — Conversion-optimized layout
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero banner ─── */
.deals-hero {
  background: linear-gradient(135deg, var(--hero-bg, #FD572A) 0%, color-mix(in srgb, var(--hero-bg, #FD572A) 80%, #000) 100%);
  color: var(--hero-text, #fff);
  padding: 48px 0 56px;
  position: relative;
  overflow: hidden;
}
.deals-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.05) 0%, transparent 50%);
  pointer-events: none;
}
.deals-hero-content {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.deals-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 16px;
}
.deals-hero-icon { font-size: 16px; line-height: 1; }
.deals-hero-icon svg { width: 16px; height: 16px; vertical-align: middle; }
.deals-hero-title {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.deals-hero-subtitle {
  font-size: clamp(15px, 2vw, 18px);
  opacity: 0.92;
  margin: 0 0 24px;
  line-height: 1.5;
}
.deals-hero-stats {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-block-start: 12px;
  padding: 12px 24px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
}
.deals-stat { text-align: center; }
.deals-stat strong { display: block; font-size: 24px; font-weight: 900; line-height: 1; }
.deals-stat span { font-size: 11px; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; }
.deals-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
}

/* ─── Countdown ─── */
.deals-countdown {
  margin: 20px auto 0;
  max-width: 480px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.deals-countdown-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.85;
  margin-block-end: 8px;
}
.deals-countdown-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dc-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px 4px;
}
.dc-num {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dc-text {
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.75;
  margin-block-start: 4px;
  letter-spacing: 0.03em;
}
.dc-sep {
  font-size: 24px;
  font-weight: 900;
  opacity: 0.5;
  line-height: 1;
}

/* ─── Flash deals strip ─── */
.deals-flash-strip {
  background: linear-gradient(180deg, #FFF5F0 0%, #fff 100%);
  padding: 32px 0;
  border-block-end: 1px solid var(--color-border);
}
.deals-flash-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 16px;
}
.deals-flash-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}
.deals-flash-icon svg { width: 18px; height: 18px; }
.deals-flash-title {
  font-size: 22px;
  font-weight: 900;
  margin: 0;
  color: var(--cart-dark, #201F1F);
}
.deals-flash-pulse {
  width: 10px;
  height: 10px;
  background: #FF3B30;
  border-radius: 50%;
  animation: flash-pulse 1.2s ease-in-out infinite;
  margin-inline-start: auto;
}
@keyframes flash-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
  50% { transform: scale(1.2); opacity: 0.8; box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
}
.deals-flash-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-block-end: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.deals-flash-scroll::-webkit-scrollbar { height: 4px; }
.deals-flash-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.flash-deal-card {
  flex: 0 0 auto;
  width: 200px;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--color-border);
  transition: transform 0.18s, box-shadow 0.18s;
  scroll-snap-align: start;
}
.flash-deal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border-color: var(--cart-orange, #FD572A);
}
.flash-deal-image {
  position: relative;
  aspect-ratio: 1;
  margin-block-end: 8px;
  background: var(--cart-cloud);
  border-radius: 8px;
  overflow: hidden;
}
.flash-deal-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flash-deal-badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.flash-deal-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-block-end: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 36px;
}
.flash-deal-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.flash-deal-price {
  font-size: 15px;
  font-weight: 900;
  color: var(--cart-orange, #FD572A);
}
.flash-deal-compare {
  font-size: 12px;
  text-decoration: line-through;
  color: var(--color-text-muted);
}
.flash-deal-empty {
  text-align: center;
  padding: 32px;
  color: var(--color-text-muted);
  width: 100%;
}

/* ─── Filter pills ─── */
.deals-filters {
  padding: 20px 0;
  position: sticky;
  top: var(--header-h, 60px);
  background: var(--cart-white);
  z-index: 10;
  border-block-end: 1px solid var(--color-border);
}
.deals-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 4px;
}
.deals-filter-pill {
  flex: 0 0 auto;
  padding: 8px 18px;
  border: 1.5px solid var(--color-border);
  background: var(--cart-white);
  color: var(--cart-dark, #201F1F);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.deals-filter-pill:hover {
  border-color: var(--cart-orange, #FD572A);
  color: var(--cart-orange, #FD572A);
}
.deals-filter-pill.active {
  background: var(--cart-orange, #FD572A);
  border-color: var(--cart-orange, #FD572A);
  color: #fff;
}
.filter-pill-icon svg { width: 14px; height: 14px; vertical-align: middle; }

/* ─── Grid + Empty state ─── */
.deals-grid-section { padding: 24px 0 48px; }
.product-grid--deals { padding-block-start: 16px; }
.deals-empty {
  text-align: center;
  padding: 80px 24px;
}
.deals-empty-icon {
  display: inline-flex;
  width: 80px;
  height: 80px;
  background: var(--cart-cloud);
  color: var(--cart-orange, #FD572A);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-block-end: 16px;
}
.deals-empty-icon svg { width: 36px; height: 36px; }
.deals-empty h2 { font-size: 22px; margin: 0 0 8px; }
.deals-empty p { color: var(--color-text-muted); margin: 0 0 20px; }

/* ─── Trust signals row ─── */
.deals-trust {
  background: var(--cart-cloud);
  padding: 32px 0;
}
.deals-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.deals-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cart-white);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.deals-trust-icon {
  width: 44px;
  height: 44px;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.deals-trust-icon svg { width: 22px; height: 22px; }
.deals-trust-content { display: flex; flex-direction: column; min-width: 0; }
.deals-trust-content strong { font-size: 14px; font-weight: 700; }
.deals-trust-content span { font-size: 12px; color: var(--color-text-muted); }

/* ─── Newsletter ─── */
.deals-newsletter { padding: 40px 0; background: var(--cart-white); }
.deals-newsletter-card {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: linear-gradient(135deg, var(--cart-orange, #FD572A), var(--cart-orange-dark, #E04015));
  color: #fff;
  padding: 36px 24px;
  border-radius: 20px;
}
.deals-newsletter-icon {
  display: inline-flex;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-block-end: 12px;
}
.deals-newsletter-icon svg { width: 28px; height: 28px; }
.deals-newsletter-title { font-size: 22px; font-weight: 900; margin: 0 0 8px; }
.deals-newsletter-subtitle { font-size: 14px; opacity: 0.9; margin: 0 0 20px; }
.deals-newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 400px;
  margin: 0 auto;
}
.deals-newsletter-form input[type="email"] {
  flex: 1;
  padding: 12px 18px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cart-dark);
}
.deals-newsletter-form input[type="email"]:focus { outline: 2px solid var(--cart-lime); }
.deals-newsletter-form .btn {
  background: var(--cart-dark);
  color: #fff;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.deals-newsletter-form .btn:hover { background: #000; }
.deals-newsletter-success { margin-block-start: 12px; font-weight: 600; color: var(--cart-lime); }

/* ─── Mobile ─── */
@media (max-width: 767px) {
  .deals-hero { padding: 32px 0 36px; }
  .deals-hero-stats { gap: 14px; padding: 10px 16px; }
  .deals-stat strong { font-size: 20px; }
  .deals-stat span { font-size: 10px; }
  .dc-unit { min-width: 48px; padding: 6px 4px; }
  .dc-num { font-size: 20px; }
  .deals-filters { padding: 12px 0; }
  .deals-trust-grid { grid-template-columns: 1fr; gap: 8px; }
  .deals-newsletter-form { flex-direction: column; }
  .deals-newsletter-form .btn { width: 100%; }
}

/* Bottom nav Deals item — highlighted with pulse to draw eyes */
.bottom-nav-item--deals {
  position: relative;
  color: var(--cart-orange, #FD572A) !important;
}
.bottom-nav-item--deals svg {
  color: var(--cart-orange, #FD572A) !important;
}
.bottom-nav-pulse {
  position: absolute;
  top: 4px;
  inset-inline-end: 22%;
  width: 8px;
  height: 8px;
  background: #FF3B30;
  border-radius: 50%;
  animation: bottom-nav-pulse 1.6s ease-in-out infinite;
  border: 1.5px solid var(--cart-white, #fff);
}
@keyframes bottom-nav-pulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }
  50% { 
    transform: scale(1.15); 
    box-shadow: 0 0 0 6px rgba(255, 59, 48, 0);
  }
}

/* ─── Judge.me empty state polish ─── */
.jdgm-rev-widg--empty,
.jdgm-rev-widg .jdgm-rev-widg__body--no-revs {
  text-align: center;
  padding: 24px 16px;
}
/* Hide redundant "No reviews yet" when the widget has its own empty state UI */
.product-judgeme-reviews-wrap .jdgm-rev-widg .jdgm-write-rev-link,
.product-tab-content .jdgm-rev-widg .jdgm-write-rev-link {
  margin: 16px auto;
  display: inline-block;
}
/* Properly contain RTL/LTR mixed content in reviews */
.jdgm-rev .jdgm-rev__icon,
.jdgm-rev .jdgm-rev__title,
.jdgm-rev .jdgm-rev__body {
  text-align: start;
}
[dir="rtl"] .jdgm-rev__rating { direction: ltr; display: inline-block; }

/* ═══════════════════════════════════════════════════════════════
   JUDGE.ME TAB FIX
   Some Judge.me account modes need the widget to have non-zero
   dimensions during initialization. To support that, we use
   off-screen positioning instead of display:none for the reviews tab.
   This guarantees Judge.me's JS can find and render the widget,
   even before the user clicks the tab.
   ═══════════════════════════════════════════════════════════════ */
.product-tab-content[data-tab-content="reviews"]:not(.active) {
  display: block !important;
  position: absolute !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  inset-block-start: -9999px !important;
  inset-inline-start: 0 !important;
}
.product-tab-content[data-tab-content="reviews"].active {
  position: static !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: auto !important;
  opacity: 1 !important;
  inset-block-start: auto !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   CART PAYMENT METHODS BANNER — Conversion booster
   ═══════════════════════════════════════════════════════════════ */
.cart-payment-methods {
  margin-block-start: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #FFF8F4 0%, #FFFCFA 100%);
  border: 1.5px solid rgba(253, 87, 42, 0.18);
  border-radius: 14px;
}
.cart-payment-methods-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-dark, #201F1F);
  margin-block-end: 12px;
  text-transform: none;
}
.cart-payment-methods-title svg {
  width: 16px;
  height: 16px;
  color: var(--cart-success, #1FAE6A);
}
.cart-payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.cart-payment-method {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--cart-white, #fff);
  border: 1.5px solid var(--color-border, #E5E5E5);
  border-radius: 10px;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  cursor: default;
}
.cart-payment-method:hover {
  border-color: var(--cart-orange, #FD572A);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 87, 42, 0.1);
}
.cart-payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
  color: #fff;
}
.cart-payment-method--cod .cart-payment-icon { background: var(--cart-success, #1FAE6A); }
.cart-payment-method--click .cart-payment-icon { background: #00BCD4; }
.cart-payment-method--visa .cart-payment-icon { background: #1A1F71; }
.cart-payment-method--online .cart-payment-icon { background: var(--cart-violet, #4E24B5); }
.cart-payment-icon svg {
  width: 16px;
  height: 16px;
}
.cart-payment-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-dark, #201F1F);
  line-height: 1.2;
}
.cart-payment-methods-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px dashed var(--color-border, #E5E5E5);
  font-size: 11px;
  font-weight: 600;
  color: var(--cart-success, #1FAE6A);
}
.cart-payment-methods-note svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 480px) {
  .cart-payment-methods-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cart-payment-method {
    padding: 8px 10px;
  }
  .cart-payment-label { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   CONVERSION STRIPS — Customer Picks / Just Arrived / Don't Miss / Picked For You
   Shared visual language across all four sections.
   ═══════════════════════════════════════════════════════════════ */
.conversion-strip {
  padding-block: 40px 32px;
  margin-block-start: 24px;
}
.conversion-strip-header {
  text-align: center;
  margin-block-end: 24px;
}
.conversion-strip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--strip-accent, var(--cart-orange, #FD572A));
  margin-block-end: 8px;
}
.conversion-strip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
}
.conversion-strip-badge svg {
  width: 16px;
  height: 16px;
}
.conversion-strip-eyebrow-text {
  letter-spacing: 0.06em;
}
.conversion-strip-live-pulse {
  width: 8px;
  height: 8px;
  background: #FF3B30;
  border-radius: 50%;
  animation: conv-strip-pulse 1.5s ease-in-out infinite;
}
@keyframes conv-strip-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
  50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
}
.conversion-strip-title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 900;
  color: var(--cart-dark, #201F1F);
  margin: 0 0 8px;
  line-height: 1.2;
}
.conversion-strip-subtitle {
  font-size: 14px;
  color: var(--color-text-muted, #5F5E5A);
  margin: 0;
  max-width: 540px;
  margin-inline: auto;
}

.conversion-strip-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.conversion-strip-item {
  position: relative;
}
.conversion-strip-item--deal {
  /* highlight deal cards with subtle border */
}
.conversion-strip-discount-badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  background: var(--strip-accent, #E5283C);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(229, 40, 60, 0.3);
}

.conversion-strip-cta {
  text-align: center;
  margin-block-start: 24px;
}
.conversion-strip-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.conversion-strip-cta .btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 767px) {
  .conversion-strip { padding-block: 28px 24px; }
  .conversion-strip-scroll {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-block-end: 8px;
    gap: 12px;
  }
  .conversion-strip-scroll::-webkit-scrollbar { height: 4px; }
  .conversion-strip-scroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
  .conversion-strip-item {
    flex: 0 0 auto;
    width: calc(55% - 8px);
    min-width: 180px;
    max-width: 240px;
    scroll-snap-align: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TRENDING SEARCHES — Tag chips with vendor/type variety
   ═══════════════════════════════════════════════════════════════ */
.trending-searches {
  padding-block: 32px 24px;
  margin-block-start: 16px;
}
.trending-searches-header {
  text-align: center;
  margin-block-end: 20px;
}
.trending-searches-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cart-orange, #FD572A);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 6px;
}
.trending-searches-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  background: rgba(253, 87, 42, 0.12);
  color: var(--cart-orange);
  border-radius: 6px;
  align-items: center;
  justify-content: center;
}
.trending-searches-icon svg { width: 14px; height: 14px; }
.trending-searches-live-dot {
  width: 6px;
  height: 6px;
  background: #FF3B30;
  border-radius: 50%;
  animation: conv-strip-pulse 1.5s ease-in-out infinite;
}
.trending-searches-title {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 800;
  color: var(--cart-dark, #201F1F);
  margin: 0;
}
.trending-searches-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.trending-search-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cart-white, #fff);
  border: 1.5px solid var(--color-border, #E5E5E5);
  color: var(--cart-dark, #201F1F);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-search-tag:hover {
  border-color: var(--cart-orange, #FD572A);
  color: var(--cart-orange, #FD572A);
  transform: translateY(-1px);
}
.trending-search-tag--vendor {
  background: linear-gradient(135deg, #FFF8F4 0%, #FFFCFA 100%);
  border-color: rgba(253, 87, 42, 0.2);
}
.trending-search-tag--type {
  background: linear-gradient(135deg, #F5F0FF 0%, #FAF7FF 100%);
  border-color: rgba(78, 36, 181, 0.2);
}
.trending-search-tag--recent {
  background: linear-gradient(135deg, #F0FAF5 0%, #F7FCFA 100%);
  border-color: rgba(31, 174, 106, 0.25);
  color: var(--cart-success, #1FAE6A);
}
.trending-search-tag-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.trending-search-tag-icon svg { width: 14px; height: 14px; }
.trending-search-tag-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.trending-searches-recent {
  margin-block-start: 16px;
  padding-block-start: 16px;
  border-block-start: 1px dashed var(--color-border, #E5E5E5);
  text-align: center;
}
.trending-searches-recent-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text-muted, #5F5E5A);
  margin-block-end: 10px;
  letter-spacing: 0.05em;
}
.trending-searches-recent-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

@media (max-width: 767px) {
  .trending-searches-tags { gap: 6px; }
  .trending-search-tag {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRODUCT INSIGHTS — MINIMAL COMPACT LAYOUT
   Slim strip instead of 4 large cards. ~40% less vertical space.
   ═══════════════════════════════════════════════════════════════ */
.insights-min {
  padding-block: 24px 16px;
  margin-block-start: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Audience bar — single horizontal line */
.insights-min-audience {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(78, 36, 181, 0.06) 0%, rgba(78, 36, 181, 0.02) 100%);
  border: 1px solid rgba(78, 36, 181, 0.15);
  border-radius: 999px;
  align-self: flex-start;
  font-size: 13px;
  line-height: 1.4;
}
.insights-min-audience-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  background: #4E24B5;
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.insights-min-audience-icon svg {
  width: 12px;
  height: 12px;
}
.insights-min-audience-label {
  font-weight: 600;
  color: var(--color-text-muted, #5F5E5A);
}
.insights-min-audience-value {
  font-weight: 800;
  color: var(--cart-dark, #201F1F);
}

/* Feature chips — horizontal wrap */
.insights-min-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.insights-min-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cart-white, #fff);
  border: 1px solid var(--color-border, #E5E5E5);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cart-dark, #201F1F);
  line-height: 1;
}
.insights-min-chip-dot {
  width: 6px;
  height: 6px;
  background: var(--cart-orange, #FD572A);
  border-radius: 50%;
}

/* Two-column row: Why buy + Guarantees */
.insights-min-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.insights-min-col {
  background: var(--cart-white, #fff);
  border: 1px solid var(--color-border, #E5E5E5);
  border-radius: 12px;
  padding: 14px 16px;
}
.insights-min-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 8px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--color-border, #E5E5E5);
}
.insights-min-col-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.insights-min-col-icon svg {
  width: 13px;
  height: 13px;
}
.insights-min-col-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-dark, #201F1F);
}
.insights-min-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.insights-min-reason {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cart-dark, #201F1F);
}
.insights-min-reason svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.insights-min-reason--sale .insights-min-reason-pct {
  background: #FD572A;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.insights-min-reason--rating .insights-min-reason-pct {
  background: #FFB72A;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 900;
}
.insights-min-reason--bestseller svg { color: #FD572A; }
.insights-min-reason--new svg { color: #4E24B5; }
.insights-min-reason--stock svg { color: #1FAE6A; }
.insights-min-check {
  display: inline-flex;
  width: 14px;
  height: 14px;
  background: #1FAE6A;
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .insights-min { padding-block: 16px 12px; gap: 10px; }
  .insights-min-audience {
    width: 100%;
    align-self: stretch;
    justify-content: flex-start;
    padding: 8px 14px;
  }
  .insights-min-row { grid-template-columns: 1fr; gap: 8px; }
  .insights-min-col { padding: 12px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   RELATED PRODUCTS CAROUSEL — Picked For You
   Horizontal slider with prev/next arrows
   ═══════════════════════════════════════════════════════════════ */
.related-carousel {
  padding-block: 32px 24px;
  margin-block-start: 16px;
}
.related-carousel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 16px;
}
.related-carousel-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.related-carousel-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.related-carousel-icon svg {
  width: 18px;
  height: 18px;
}
.related-carousel-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--strip-accent, var(--cart-orange));
  line-height: 1;
}
.related-carousel-title {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 900;
  color: var(--cart-dark, #201F1F);
  margin: 4px 0 0;
  line-height: 1.2;
}
.related-carousel-nav {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.related-carousel-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border, #E5E5E5);
  background: var(--cart-white, #fff);
  color: var(--cart-dark, #201F1F);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
}
.related-carousel-arrow:hover:not(:disabled) {
  border-color: var(--cart-orange, #FD572A);
  color: var(--cart-orange, #FD572A);
  transform: translateY(-1px);
}
.related-carousel-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.related-carousel-arrow svg {
  width: 18px;
  height: 18px;
}
[data-related-prev] svg {
  transform: scaleX(-1);
}
[dir="rtl"] [data-related-prev] svg { transform: scaleX(1); }
[dir="rtl"] [data-related-next] svg { transform: scaleX(-1); }

.related-carousel-track-wrap {
  position: relative;
}
.related-carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-block-end: 4px;
  /* Hide scrollbar but keep functionality */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.related-carousel-track::-webkit-scrollbar {
  height: 4px;
}
.related-carousel-track::-webkit-scrollbar-thumb {
  background: var(--color-border, #E5E5E5);
  border-radius: 2px;
}
.related-carousel-track::-webkit-scrollbar-track {
  background: transparent;
}
.related-carousel-slide {
  flex: 0 0 auto;
  width: calc(25% - 9px);
  min-width: 200px;
  max-width: 280px;
  scroll-snap-align: start;
}

.related-carousel-cta {
  text-align: center;
  margin-block-start: 20px;
}
.related-carousel-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.related-carousel-cta .btn svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1024px) {
  .related-carousel-slide {
    width: calc(33.333% - 8px);
  }
}
@media (max-width: 767px) {
  .related-carousel { padding-block: 24px 16px; }
  .related-carousel-header { margin-block-end: 12px; }
  .related-carousel-nav { display: none; }
  .related-carousel-slide {
    width: calc(55% - 8px);
    min-width: 180px;
  }
}
@media (max-width: 480px) {
  .related-carousel-slide {
    width: calc(70% - 8px);
  }
}

/* Discount badge on carousel slides */
.related-carousel-discount-badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  background: var(--strip-accent, #E5283C);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.related-carousel-slide {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════
   TIGHTER PDP SPACING
   Reduces gaps between conversion sections by ~40%
   ═══════════════════════════════════════════════════════════════ */
.related-carousel {
  padding-block: 20px 12px !important;
  margin-block-start: 8px !important;
}
.insights-min {
  padding-block: 16px 8px !important;
  margin-block-start: 8px !important;
}
.product-qa-section {
  margin-block: 8px !important;
}
.product-faq-wrapper {
  margin-block-start: 12px !important;
}
[data-product-faq] {
  padding-block: 24px 16px !important;
}
.trending-searches {
  padding-block: 16px 12px !important;
  margin-block-start: 8px !important;
}

/* Recently viewed tighter too */
.recently-viewed-section,
section[data-recently-viewed] {
  padding-block: 20px 16px !important;
  margin-block-start: 8px !important;
}

/* Mobile - even tighter */
@media (max-width: 767px) {
  .related-carousel { padding-block: 14px 8px !important; }
  .insights-min { padding-block: 12px 6px !important; }
  [data-product-faq] { padding-block: 16px 12px !important; }
  .trending-searches { padding-block: 12px 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PDP PAYMENT METHODS STRIP
   Shown below Trust Grid, before Expandables — prime location
   ═══════════════════════════════════════════════════════════════ */
.pdp-payment-methods {
  margin-block-start: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF8F4 0%, #FFFCFA 100%);
  border: 1.5px solid rgba(253, 87, 42, 0.15);
  border-radius: 12px;
}
.pdp-payment-methods-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 10px;
  padding-block-end: 8px;
  border-block-end: 1px solid rgba(253, 87, 42, 0.1);
}
.pdp-payment-methods-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  color: var(--cart-success, #1FAE6A);
}
.pdp-payment-methods-icon svg { width: 16px; height: 16px; }
.pdp-payment-methods-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--cart-dark, #201F1F);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pdp-payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pdp-payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  background: var(--cart-white, #fff);
  border: 1px solid var(--color-border, #E5E5E5);
  border-radius: 8px;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  cursor: default;
  text-align: center;
}
.pdp-payment-method:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.pdp-payment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: #fff;
  flex-shrink: 0;
}
.pdp-payment-method--cod .pdp-payment-icon { background: var(--cart-success, #1FAE6A); }
.pdp-payment-method--click .pdp-payment-icon { background: #00BCD4; }
.pdp-payment-method--visa .pdp-payment-icon { background: #1A1F71; }
.pdp-payment-method--online .pdp-payment-icon { background: var(--cart-violet, #4E24B5); }
.pdp-payment-icon svg { width: 14px; height: 14px; }
.pdp-payment-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--cart-dark, #201F1F);
  line-height: 1.2;
}

@media (max-width: 480px) {
  .pdp-payment-methods { padding: 10px 12px; }
  .pdp-payment-methods-grid { gap: 4px; }
  .pdp-payment-method { padding: 6px 4px; gap: 3px; }
  .pdp-payment-icon { width: 24px; height: 24px; }
  .pdp-payment-icon svg { width: 12px; height: 12px; }
  .pdp-payment-label { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════
   Q&A SECTION — PREMIUM REDESIGN
   Card-based, branded, conversational feel
   ═══════════════════════════════════════════════════════════════ */
.product-qa-section {
  margin-block: 8px !important;
  padding: 0 !important;
}
.product-qa {
  background: linear-gradient(135deg, #FAFAFD 0%, #FFFFFF 100%) !important;
  border: 1px solid var(--color-border, #E5E5E5) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  position: relative;
  overflow: hidden;
}
.product-qa::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--cart-violet, #4E24B5) 0%, var(--cart-orange, #FD572A) 100%);
}
.product-qa-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 16px !important;
  padding-block-end: 14px !important;
  border-block-end: 1px dashed var(--color-border, #E5E5E5);
}
.product-qa-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: var(--cart-dark, #201F1F);
  margin: 0;
  line-height: 1.2;
}
.product-qa-title svg {
  width: 22px !important;
  height: 22px !important;
  background: var(--cart-violet, #4E24B5);
  color: #fff;
  border-radius: 8px;
  padding: 4px;
  box-sizing: content-box;
}
.product-qa-ask-btn {
  background: var(--cart-orange, #FD572A) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, opacity 0.18s, transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
}
.product-qa-ask-btn:hover {
  background: var(--cart-orange-dark, #E04015) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 87, 42, 0.25);
}
.product-qa-list {
  display: flex;
  flex-direction: column;
  gap: 10px !important;
}
.product-qa-item {
  background: var(--cart-white, #fff) !important;
  border: 1.5px solid var(--color-border, #E5E5E5) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.product-qa-item:hover {
  border-color: rgba(78, 36, 181, 0.3) !important;
  transform: translateY(-1px);
}
.product-qa-item[open] {
  border-color: var(--cart-violet, #4E24B5) !important;
  box-shadow: 0 4px 16px rgba(78, 36, 181, 0.08);
}
.product-qa-question {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 14px 16px !important;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 14px;
  color: var(--cart-dark, #201F1F);
  user-select: none;
}
.product-qa-question::-webkit-details-marker { display: none; }
.product-qa-q-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  background: var(--cart-violet, #4E24B5) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  flex-shrink: 0;
}
.product-qa-question > span:nth-child(2) {
  flex: 1;
  line-height: 1.4;
}
.product-qa-arrow {
  margin-inline-start: auto;
  color: var(--color-text-muted, #5F5E5A);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.product-qa-item[open] .product-qa-arrow {
  transform: rotate(90deg);
}
[dir="rtl"] .product-qa-arrow {
  transform: scaleX(-1);
}
[dir="rtl"] .product-qa-item[open] .product-qa-arrow {
  transform: scaleX(-1) rotate(90deg);
}
.product-qa-answer {
  padding: 0 16px 14px 16px !important;
  display: flex;
  gap: 12px;
  background: linear-gradient(180deg, rgba(78, 36, 181, 0.02) 0%, transparent 100%);
  border-top: 1px dashed var(--color-border, #E5E5E5);
  padding-top: 14px !important;
}
.product-qa-a-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;
  height: 28px !important;
  background: var(--cart-orange, #FD572A) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  flex-shrink: 0;
}
.product-qa-answer-text {
  flex: 1;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--cart-dark, #201F1F);
}
.product-qa-meta {
  margin-block-start: 8px;
  font-size: 11px;
  color: var(--color-text-muted, #5F5E5A);
  font-style: italic;
}
.product-qa-empty {
  text-align: center;
  padding: 30px 16px !important;
  color: var(--color-text-muted, #5F5E5A);
  background: var(--cart-cloud, #EFEFEF);
  border-radius: 12px;
}
.product-qa-form-wrapper {
  margin-block-start: 16px;
  padding: 16px;
  background: var(--cart-cloud, #EFEFEF);
  border-radius: 12px;
}
.product-qa-form-row {
  margin-block-end: 10px;
}
.product-qa-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border, #E5E5E5);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--cart-white, #fff);
  transition: border-color 0.18s;
}
.product-qa-input:focus {
  outline: none;
  border-color: var(--cart-violet, #4E24B5);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ SECTION — PREMIUM REDESIGN
   Matches Q&A style, with FAQ-specific accents
   ═══════════════════════════════════════════════════════════════ */
[data-product-faq] {
  padding-block: 24px 16px !important;
}
[data-product-faq] .section-heading {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  margin-block-end: 20px !important;
  position: relative;
}
[data-product-faq] .section-title {
  font-size: clamp(22px, 3vw, 28px) !important;
  font-weight: 900 !important;
  margin: 0 !important;
  position: relative;
  padding-block-end: 12px;
}
[data-product-faq] .section-title::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--cart-orange, #FD572A) 0%, var(--cart-violet, #4E24B5) 100%);
  border-radius: 2px;
}
.product-faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-item {
  background: var(--cart-white, #fff) !important;
  border: 1.5px solid var(--color-border, #E5E5E5) !important;
  border-radius: 14px !important;
  overflow: hidden;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.faq-item:hover {
  border-color: rgba(253, 87, 42, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.faq-item[open] {
  border-color: var(--cart-orange, #FD572A) !important;
  box-shadow: 0 4px 16px rgba(253, 87, 42, 0.08);
}
.faq-question {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px !important;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
  color: var(--cart-dark, #201F1F);
  user-select: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::before {
  content: 'FAQ';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 22px;
  background: linear-gradient(135deg, var(--cart-orange, #FD572A) 0%, var(--cart-orange-dark, #E04015) 100%);
  color: #fff;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.faq-question > span {
  flex: 1;
  line-height: 1.4;
}
.faq-question svg {
  width: 22px;
  height: 22px;
  background: var(--cart-cloud, #EFEFEF);
  border-radius: 50%;
  padding: 4px;
  box-sizing: content-box;
  color: var(--cart-dark, #201F1F);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.faq-item[open] .faq-question svg {
  background: var(--cart-orange, #FD572A);
  color: #fff;
  transform: rotate(45deg);
}
.faq-answer {
  overflow: hidden;
  border-block-start: 1px dashed var(--color-border, #E5E5E5);
}
.faq-answer-inner {
  padding: 16px 20px !important;
  font-size: 14px;
  line-height: 1.7;
  color: var(--cart-dark, #201F1F);
  background: linear-gradient(180deg, rgba(253, 87, 42, 0.02) 0%, transparent 100%);
}
.faq-answer-inner p { margin: 0; }
.faq-answer-inner p + p { margin-block-start: 10px; }

@media (max-width: 767px) {
  .product-qa { padding: 16px 14px !important; }
  .product-qa-header { 
    flex-wrap: wrap;
    margin-block-end: 12px !important;
    padding-block-end: 10px !important;
  }
  .product-qa-title { font-size: 16px !important; }
  .product-qa-ask-btn { padding: 6px 14px !important; font-size: 12px !important; }
  .product-qa-question { padding: 12px 14px !important; font-size: 13px; }
  .product-qa-answer { padding: 12px 14px 12px 14px !important; }
  .faq-question { padding: 14px 16px !important; font-size: 14px; }
  .faq-answer-inner { padding: 14px 16px !important; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   PDP: FAQ + Q&A SIDE-BY-SIDE (desktop)
   Wraps adjacent FAQ and Q&A sections in a 2-column grid
   ═══════════════════════════════════════════════════════════════ */
.faq-qa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
  max-width: var(--page-width, 1400px);
  margin: 16px auto;
  padding-inline: 16px;
}

.faq-qa-grid > [id^="shopify-section-"] {
  display: flex;
  flex-direction: column;
}

/* On the grid, sections should fill their column */
.faq-qa-grid .product-faq-dynamic,
.faq-qa-grid .product-qa-section {
  margin: 0 !important;
  padding-inline: 0 !important;
  height: 100%;
}

.faq-qa-grid .product-faq-dynamic > .product-faq-wrapper,
.faq-qa-grid .product-qa-section > .product-qa {
  height: 100%;
}

/* Desktop: 2-column layout */
@media (min-width: 1024px) {
  .faq-qa-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Make sure the inner containers fill height on desktop */
@media (min-width: 1024px) {
  .faq-qa-grid .product-faq-dynamic {
    background: var(--cart-white, #fff);
    border: 1px solid var(--color-border, #E5E5E5);
    border-radius: 16px;
    padding: 20px 22px !important;
    position: relative;
    overflow: hidden;
  }
  .faq-qa-grid .product-faq-dynamic::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--cart-orange, #FD572A) 0%, var(--cart-violet, #4E24B5) 100%);
  }
  
  .faq-qa-grid .product-faq-header {
    text-align: start !important;
    align-items: flex-start !important;
    margin-block-end: 16px !important;
    padding-block-end: 14px !important;
    border-block-end: 1px dashed var(--color-border, #E5E5E5);
  }
  .faq-qa-grid .product-faq-title {
    font-size: 18px !important;
    text-align: start !important;
    padding-block-end: 0 !important;
  }
  .faq-qa-grid .product-faq-title::after {
    display: none !important;
  }
  .faq-qa-grid .product-faq-subtitle {
    display: none !important;
  }
  
  .faq-qa-grid .product-faq-wrapper {
    max-width: 100%;
  }
  
  .faq-qa-grid .faq-item {
    border-radius: 12px !important;
  }
  .faq-qa-grid .faq-question {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    gap: 10px;
  }
  .faq-qa-grid .faq-question::before {
    width: 32px;
    height: 18px;
    font-size: 9px;
  }
  .faq-qa-grid .faq-answer-inner {
    padding: 12px 14px !important;
    font-size: 13px;
  }
}

/* Mobile: stack vertically (default) */
@media (max-width: 1023px) {
  .faq-qa-grid {
    gap: 12px;
  }
}

/* ─── Header for the dynamic FAQ (default styling when NOT in grid) ─── */
.product-faq-dynamic .product-faq-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-block-end: 20px;
  text-align: center;
}
.product-faq-dynamic .product-faq-title {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  margin: 0;
  color: var(--cart-dark, #201F1F);
  position: relative;
  padding-block-end: 12px;
}
.product-faq-dynamic .product-faq-title::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--cart-orange, #FD572A) 0%, var(--cart-violet, #4E24B5) 100%);
  border-radius: 2px;
}
.product-faq-dynamic .product-faq-subtitle {
  font-size: 14px;
  color: var(--color-text-muted, #5F5E5A);
  margin: 0;
  max-width: 600px;
}

/* Style for richtext content inside FAQ answers */
.faq-answer-inner.rte p { margin: 0 0 8px 0; }
.faq-answer-inner.rte p:last-child { margin-bottom: 0; }
.faq-answer-inner.rte ul,
.faq-answer-inner.rte ol {
  margin: 8px 0;
  padding-inline-start: 20px;
}
.faq-answer-inner.rte li {
  margin-block-end: 4px;
  line-height: 1.55;
}
.faq-answer-inner.rte li:last-child {
  margin-block-end: 0;
}
.faq-answer-inner.rte strong {
  font-weight: 700;
  color: var(--cart-dark, #201F1F);
}

/* ════════════════════════════════════════════════════════════════════
   COLLECTION PAGE — REBUILD FROM SCRATCH (2026-05-19)
   
   Class prefixes:
   .pcg   = Product Collection Grid (page section)
   .pc    = Product Card (single product)
   
   Used by: main-collection-product-grid.liquid + pc-card.liquid
   ════════════════════════════════════════════════════════════════════ */

/* ━━━ Section wrapper ━━━ */
.pcg-section {
  padding-block: 24px 64px;
}

.pcg-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted, #5F5E5A);
  margin-block-end: 16px;
}
.pcg-breadcrumbs a {
  color: var(--color-text-muted, #5F5E5A);
  text-decoration: none;
}
.pcg-breadcrumbs a:hover {
  color: var(--cart-orange, #FD572A);
}

.pcg-banner {
  border-radius: 16px;
  overflow: hidden;
  margin-block-end: 20px;
  aspect-ratio: 4 / 1;
}
.pcg-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcg-header {
  margin-block-end: 20px;
}
.pcg-title {
  font-size: 28px;
  font-weight: 800;
  margin-block-end: 6px;
}
.pcg-description {
  font-size: 14px;
  color: var(--color-text-muted, #5F5E5A);
  line-height: 1.6;
  max-width: 800px;
  margin-block-end: 6px;
}
.pcg-count {
  font-size: 13px;
  color: var(--color-text-muted, #5F5E5A);
}

/* ━━━ Toolbar (tabs + sort + view toggle) — ALL ON ONE LINE ━━━ */
.pcg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  padding-block: 16px;
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  margin-block-end: 20px;
  min-width: 0;
}

/* Quick filters inside toolbar: flex grow + horizontal scroll if overflow */
.pcg-toolbar > .collection-quick-filters {
  margin-block-end: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

/* Toolbar right side: keep tight, no shrink */
.pcg-toolbar-right {
  flex-shrink: 0;
}

/* On mobile, allow wrap */
@media (max-width: 749px) {
  .pcg-toolbar {
    flex-wrap: wrap;
  }
  .pcg-toolbar > .collection-quick-filters {
    width: 100%;
  }
}
.pcg-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pcg-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #201F1F);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pcg-tab:hover {
  background: rgba(0, 0, 0, 0.04);
}
.pcg-tab--active {
  background: var(--cart-orange, #FD572A);
  color: #fff;
}
.pcg-tab-count {
  background: rgba(255, 255, 255, 0.25);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
}
.pcg-tab:not(.pcg-tab--active) .pcg-tab-count {
  background: rgba(253, 87, 42, 0.12);
  color: var(--cart-orange, #FD572A);
}

.pcg-toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pcg-view-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 3px;
}
.pcg-view-btn {
  background: transparent;
  border: 0;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted, #5F5E5A);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pcg-view-btn--active {
  background: #fff;
  color: var(--cart-orange, #FD572A);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pcg-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.pcg-sort label {
  color: var(--color-text-muted, #5F5E5A);
}
.pcg-sort-select {
  padding: 8px 28px 8px 12px;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  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='currentColor' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ━━━ Layout: sidebar + grid ━━━ */
.pcg-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 1024px) {
  .pcg-layout:not(.pcg-layout--no-sidebar) {
    grid-template-columns: 20% 1fr;
    gap: 24px;
  }
}
.pcg-layout--no-sidebar {
  grid-template-columns: 1fr;
}

/* ━━━ Sidebar (filters) ━━━ */
.pcg-sidebar {
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 16px;
  padding: 16px;
  align-self: start;
}
.pcg-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 8px;
}
.pcg-sidebar-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pcg-sidebar-title::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--cart-orange, #FD572A);
  border-radius: 2px;
}
.pcg-sidebar-close {
  width: 32px;
  height: 32px;
  border: 0;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text, #201F1F);
}
.pcg-sidebar-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.pcg-filter-group {
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  padding-block: 12px;
}
.pcg-filter-group:last-child {
  border-block-end: 0;
}
.pcg-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
}
.pcg-filter-summary::-webkit-details-marker {
  display: none;
}
.pcg-filter-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pcg-filter-chevron {
  transition: transform 0.2s;
  color: var(--cart-orange, #FD572A);
}
details[open] .pcg-filter-chevron {
  transform: rotate(180deg);
}
.pcg-filter-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block-start: 12px;
}
.pcg-filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  padding: 4px 0;
}
.pcg-filter-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--cart-orange, #FD572A);
}
.pcg-filter-item:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.pcg-filter-name {
  flex: 1;
  font-weight: 600;
}
.pcg-filter-count {
  color: var(--color-text-muted, #5F5E5A);
  font-size: 12px;
}

.pcg-price-inputs {
  display: flex;
  align-items: end;
  gap: 8px;
}
.pcg-price-input {
  flex: 1;
}
.pcg-price-input label {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted, #5F5E5A);
  text-transform: uppercase;
  margin-block-end: 4px;
}
.pcg-price-input input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.pcg-price-sep {
  font-weight: 700;
  padding-block-end: 9px;
}
.pcg-price-range {
  font-size: 12px;
  color: var(--color-text-muted, #5F5E5A);
  margin-block-start: 8px;
}
.pcg-price-range strong {
  color: var(--cart-orange, #FD572A);
}

/* ━━━ Grid (products) ━━━ */
.pcg-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(var(--pcg-cols-m, 2), minmax(0, 1fr));
}
@media (min-width: 640px) {
  .pcg-grid {
    grid-template-columns: repeat(var(--pcg-cols-t, 3), minmax(0, 1fr));
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .pcg-grid {
    grid-template-columns: repeat(var(--pcg-cols-d, 4), minmax(0, 1fr));
    gap: 20px;
  }
}

/* ━━━ LIST VIEW (override grid) ━━━ */
.pcg-grid[data-view="list"] {
  grid-template-columns: 1fr;
  gap: 12px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRODUCT CARD (.pc)
   Structure: media (image on top) → body (vendor → title → price → trust → social → delivery)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease-out, border-color 0.2s ease-out;
  position: relative;
}
.pc:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong, rgba(32, 31, 31, 0.20));
}

/* ─── Media (image area on TOP) ─── */
.pc__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.pc__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  transition: transform 0.4s ease-out;
}
.pc__img--placeholder {
  background: var(--cart-cloud, #f5f5f5);
}
.pc:hover .pc__img {
  transform: scale(1.05);
}

.pc__badge {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  z-index: 2;
}
.pc__badge--sale {
  background: var(--cart-lime, #D9FF03);
  color: #000;
}
.pc__badge--sold {
  background: #f5f5f5;
  color: #999;
  font-size: 10px;
}

.pc__wishlist {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text, #201F1F);
  z-index: 2;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pc__wishlist:hover {
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border-color: var(--cart-orange, #FD572A);
  transform: scale(1.05);
}
.pc__wishlist.is-active,
.pc__wishlist[aria-pressed="true"] {
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border-color: var(--cart-orange, #FD572A);
}
.pc__wishlist.is-active svg,
.pc__wishlist[aria-pressed="true"] svg {
  fill: currentColor;
}

/* ─── Body (content BELOW image) ─── */
.pc__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  flex: 1;
}
.pc__vendor {
  font-size: 11px;
  color: var(--cart-orange, #FD572A);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pc__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text, #201F1F);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.pc__price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-block-start: 4px;
  flex-wrap: wrap;
}
.pc__price-now {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text, #201F1F);
}
.pc__price-now--sale {
  color: var(--cart-orange, #FD572A);
}
.pc__price-was {
  font-size: 13px;
  text-decoration: line-through;
  color: var(--color-text-muted, #5F5E5A);
}
.pc__save {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #059669;
  font-weight: 700;
}
.pc__save strong {
  color: #059669;
  font-weight: 800;
}

.pc__trust {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  align-self: flex-start;
  margin-block-start: 4px;
}
.pc__trust--delivery {
  background: rgba(253, 87, 42, 0.12);
  color: var(--cart-orange, #FD572A);
}
.pc__trust--warranty {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.pc__trust--authentic {
  background: rgba(78, 36, 181, 0.12);
  color: var(--cart-violet, #4E24B5);
}
.pc__trust--dealer {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.pc__social {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--color-text-muted, #5F5E5A);
  flex-wrap: wrap;
  margin-block-start: 4px;
}
.pc__social-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.pc__social-item svg {
  color: #059669;
}
.pc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.pc__dot--purple {
  background: var(--cart-violet, #4E24B5);
  animation: pcPulse 1.5s ease-in-out infinite;
}
@keyframes pcPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.pc__delivery {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #5F5E5A);
  margin-block-start: 6px;
  align-self: stretch;
  justify-content: center;
}

/* ━━━ LIST VIEW for cards ━━━ */
.pcg-grid[data-view="list"] .pc {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  padding: 12px;
}
.pcg-grid[data-view="list"] .pc:hover {
  transform: none;
}
@media (min-width: 768px) {
  .pcg-grid[data-view="list"] .pc {
    grid-template-columns: 180px 1fr;
    gap: 18px;
    padding: 16px;
  }
}
@media (min-width: 1024px) {
  .pcg-grid[data-view="list"] .pc {
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 18px;
  }
}
.pcg-grid[data-view="list"] .pc__media {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--cart-cloud, #f5f5f5);
}
.pcg-grid[data-view="list"] .pc__body {
  padding: 0;
  justify-content: center;
}
.pcg-grid[data-view="list"] .pc__title {
  font-size: 16px;
}
@media (min-width: 1024px) {
  .pcg-grid[data-view="list"] .pc__title {
    font-size: 18px;
  }
}
.pcg-grid[data-view="list"] .pc__price-now {
  font-size: 19px;
}
@media (min-width: 1024px) {
  .pcg-grid[data-view="list"] .pc__price-now {
    font-size: 21px;
  }
}

/* ━━━ Pagination ━━━ */
.pcg-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-block-start: 32px;
  flex-wrap: wrap;
}
.pcg-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #201F1F);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pcg-page:hover {
  border-color: var(--cart-orange, #FD572A);
  color: var(--cart-orange, #FD572A);
}
.pcg-page--current {
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border-color: var(--cart-orange, #FD572A);
}

/* ━━━ Empty state ━━━ */
.pcg-empty {
  text-align: center;
  padding-block: 60px;
}
.pcg-empty h2 {
  font-size: 20px;
  margin-block-end: 8px;
}
.pcg-empty p {
  color: var(--color-text-muted, #5F5E5A);
}

/* ━━━ Mobile responsive (sidebar becomes drawer) ━━━ */
@media (max-width: 1023px) {
  .pcg-sidebar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    z-index: 100;
    border-radius: 0;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
    transition: transform 0.3s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-block-end: 40px;
  }
  [dir="rtl"] .pcg-sidebar {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: translateX(100%);
  }
  .pcg-sidebar--open {
    transform: translateX(0);
  }
  .pcg-sidebar--hidden {
    display: none;
  }
  .pcg-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .pcg-toolbar-right {
    justify-content: space-between;
  }
  .pcg-title {
    font-size: 22px;
  }
}

/* ━━━ Bottom sections spacing in collection page ━━━ */
.pcg-bottom-section {
  margin-block-start: 40px;
}
.pcg-bottom-section:first-of-type {
  margin-block-start: 60px;
  padding-block-start: 40px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
}

/* ━━━ Missing CSS classes — completeness ━━━ */
.pcg-products {
  min-width: 0;
}

.pcg-filters-form {
  display: flex;
  flex-direction: column;
}

.pcg-page--next,
.pcg-page--prev {
  font-weight: 700;
}

/* Sidebar close hidden on desktop */
@media (min-width: 1024px) {
  .pcg-sidebar-close {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CART AOV BOOSTERS — 2026-05-19
   Savings banner, social proof, sticky checkout, item urgency, promo strip
   ════════════════════════════════════════════════════════════════════ */

/* ─── Savings banner ─── */
.cart-savings-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-block-end: 16px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border: 1px solid #6EE7B7;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.cart-savings-banner-icon {
  width: 48px;
  height: 48px;
  background: #10B981;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-savings-banner-content {
  flex: 1;
}
.cart-savings-banner-label {
  font-size: 12px;
  color: #047857;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 2px;
}
.cart-savings-banner-amount {
  font-size: 22px;
  font-weight: 800;
  color: #047857;
}
.cart-savings-banner-sparkle {
  color: #F59E0B;
  animation: sparkleRotate 3s ease-in-out infinite;
}
@keyframes sparkleRotate {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
}

/* ─── Social proof banner ─── */
.cart-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-block-end: 16px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  border-radius: 999px;
  font-size: 13px;
  color: #92400E;
}
.cart-social-proof-dot {
  width: 8px;
  height: 8px;
  background: #10B981;
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.cart-social-proof-text strong {
  font-weight: 800;
}

/* ─── Cart item urgency badges ─── */
.cart-item-urgency {
  display: flex;
  gap: 6px;
  margin-block-start: 6px;
  flex-wrap: wrap;
}
.cart-item-urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.cart-item-urgency-badge--stock {
  background: #FEE2E2;
  color: #B91C1C;
}
.cart-item-urgency-badge--popular {
  background: #DBEAFE;
  color: #1E40AF;
}

/* ─── Promo codes strip ─── */
.promo-strip {
  margin-block-end: 16px;
  padding: 14px;
  background: #FAFAFA;
  border-radius: 12px;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
}
.promo-strip-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-orange, #FD572A);
  margin-block-end: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.promo-strip-items {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.promo-strip--compact .promo-strip-items {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.promo-strip--compact .promo-strip-items::-webkit-scrollbar {
  display: none;
}
.promo-strip--grid .promo-strip-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.promo-strip-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid;
  border-style: dashed;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: start;
  flex: 0 0 auto;
  min-width: 180px;
}
.promo-strip-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-style: solid;
}
.promo-strip-item.is-copied {
  transform: scale(0.98);
}
.promo-strip-item-content {
  width: 100%;
}
.promo-strip-item-label {
  font-size: 12px;
  font-weight: 700;
  margin-block-end: 4px;
}
.promo-strip-item-code {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.promo-strip-item-min {
  font-size: 11px;
  margin-block-start: 4px;
  opacity: 0.85;
}

/* ─── Sticky checkout (mobile) ─── */
.cart-sticky-checkout {
  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: #fff;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  z-index: 50;
  padding: 12px 16px;
  padding-block-end: max(12px, env(safe-area-inset-bottom));
}
.cart-sticky-checkout-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 600px;
  margin: 0 auto;
}
.cart-sticky-checkout-info {
  flex: 1;
}
.cart-sticky-checkout-label {
  font-size: 11px;
  color: var(--color-text-muted, #5F5E5A);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.cart-sticky-checkout-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
}
.cart-sticky-checkout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s;
}
.cart-sticky-checkout-btn:hover {
  transform: translateY(-1px);
}
.cart-sticky-checkout-btn:active {
  transform: translateY(0);
}

/* Hide sticky checkout on desktop */
@media (min-width: 1024px) {
  .cart-sticky-checkout {
    display: none;
  }
}

/* Add bottom padding to cart when sticky checkout is visible (mobile) */
@media (max-width: 1023px) {
  .cart-page-layout {
    padding-block-end: 90px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   404 PAGE — Recovery features
   ════════════════════════════════════════════════════════════════════ */
.page-404 {
  padding-block: 40px 80px;
}
.page-404-hero {
  text-align: center;
  margin-block-end: 48px;
}
.page-404-number {
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 900;
  background: linear-gradient(135deg, var(--cart-orange, #FD572A) 0%, var(--cart-violet, #4E24B5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  margin-block-end: 16px;
  letter-spacing: -0.05em;
}
.page-404-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  color: var(--color-text, #201F1F);
  margin-block-end: 12px;
}
.page-404-message {
  font-size: 16px;
  color: var(--color-text-muted, #5F5E5A);
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.page-404-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-404-section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text, #201F1F);
  margin-block-end: 16px;
  text-align: center;
}

.page-404-search {
  margin-block-end: 48px;
  max-width: 600px;
  margin-inline: auto;
}
.page-404-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  background: #fff;
  border: 2px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 999px;
  transition: border-color 0.2s;
}
.page-404-search-form:focus-within {
  border-color: var(--cart-orange, #FD572A);
}
.page-404-search-form svg {
  color: var(--color-text-muted, #5F5E5A);
  flex-shrink: 0;
}
.page-404-search-form input {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: 15px;
  outline: none;
  padding: 8px 0;
}
.page-404-search-form button {
  background: var(--cart-orange, #FD572A);
  color: #fff;
  border: 0;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}

.page-404-promo {
  margin-block-end: 48px;
}

.page-404-collections {
  margin-block-end: 48px;
}
.page-404-collections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.page-404-collection-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.page-404-collection-card:hover {
  transform: translateY(-3px);
  border-color: var(--cart-orange, #FD572A);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.page-404-collection-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-block-end: 12px;
  background: var(--cart-cloud, #f5f5f5);
}
.page-404-collection-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-404-collection-img--placeholder {
  background: linear-gradient(135deg, #f5f5f5, #e5e5e5);
}
.page-404-collection-name {
  font-size: 14px;
  font-weight: 700;
  margin-block-end: 4px;
}
.page-404-collection-count {
  font-size: 12px;
  color: var(--color-text-muted, #5F5E5A);
}

.page-404-products {
  margin-block-end: 32px;
}

/* ════════════════════════════════════════════════════════════════════
   ENHANCED CART & 404 DESIGN — More motivating, more conversion-focused
   ════════════════════════════════════════════════════════════════════ */

/* ─── CART: Make checkout button pulse subtly to attract attention ─── */
.cart-summary .btn-orange.btn-lg,
button[name="checkout"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FD572A 0%, #FF7847 100%);
  box-shadow: 0 4px 14px rgba(253, 87, 42, 0.35);
  animation: ctaPulse 2.5s ease-in-out infinite;
  font-size: 16px;
  padding: 14px 24px;
  letter-spacing: 0.02em;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(253, 87, 42, 0.35); }
  50% { box-shadow: 0 6px 20px rgba(253, 87, 42, 0.55); }
}
.cart-summary .btn-orange.btn-lg:hover,
button[name="checkout"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253, 87, 42, 0.5);
}

/* Make total price bigger and more prominent */
.cart-summary-row.total {
  font-size: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.06) 0%, rgba(78, 36, 181, 0.04) 100%);
  border-radius: 10px;
  margin-block: 10px;
}
.cart-summary-row.total .nums-tabular {
  font-size: 24px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
}

/* ─── CART: Recently viewed wrapper with celebration message ─── */
.cart-recently-viewed-wrap {
  margin-block-start: 40px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  position: relative;
}
.cart-recently-viewed-wrap::before {
  content: '👀';
  position: absolute;
  top: -16px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 12px;
  font-size: 22px;
}

/* ─── Stack savings + social proof in a nice row on desktop ─── */
@media (min-width: 768px) {
  .cart-savings-banner,
  .cart-social-proof {
    margin-block-end: 14px;
  }
  
  .cart-savings-banner + .cart-social-proof {
    margin-block-start: -10px;
  }
}

/* Make savings banner even more eye-catching */
.cart-savings-banner {
  position: relative;
  overflow: hidden;
}
.cart-savings-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: savingsShine 3s ease-in-out infinite;
}
@keyframes savingsShine {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}
.cart-savings-banner-content,
.cart-savings-banner-icon,
.cart-savings-banner-sparkle {
  position: relative;
  z-index: 1;
}

/* ─── 404: Animated 404 number ─── */
.page-404-number {
  animation: page404Float 4s ease-in-out infinite;
}
@keyframes page404Float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ─── 404: Better section title styling ─── */
.page-404-section-title {
  font-size: 22px;
  font-weight: 800;
  margin-block-end: 20px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.page-404-section-title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--cart-orange, #FD572A);
  border-radius: 2px;
}

.page-404 .page-404-promo,
.page-404 .page-404-collections,
.page-404 .page-404-products,
.page-404 .page-404-recently-viewed {
  text-align: start;
}
.page-404-search,
.page-404-hero {
  text-align: center;
}
.page-404-search .page-404-section-title {
  display: inline-flex;
}

/* ─── 404: Improve collection cards ─── */
.page-404-collection-card {
  position: relative;
  overflow: hidden;
}
.page-404-collection-card::after {
  content: '→';
  position: absolute;
  top: 50%;
  inset-inline-end: 16px;
  transform: translateY(-50%) translateX(-10px);
  opacity: 0;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  color: var(--cart-orange, #FD572A);
  font-size: 20px;
  font-weight: 700;
}
[dir="rtl"] .page-404-collection-card::after {
  content: '←';
}
.page-404-collection-card:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ─── 404: Recently viewed wrapper ─── */
.page-404-recently-viewed {
  margin-block-start: 48px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
}

/* ─── Recently viewed styles (works in both cart and 404) ─── */
.recently-viewed-section {
  margin-block: 24px;
}
.recently-viewed-track {
  display: grid;
  grid-template-columns: repeat(var(--rv-cols-m, 2), minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 640px) {
  .recently-viewed-track {
    grid-template-columns: repeat(var(--rv-cols-t, 3), minmax(0, 1fr));
    gap: 14px;
  }
}
@media (min-width: 1024px) {
  .recently-viewed-track {
    grid-template-columns: repeat(var(--rv-cols-d, 4), minmax(0, 1fr));
    gap: 16px;
  }
}
.recently-viewed-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-color 0.2s;
}
.recently-viewed-card:hover {
  transform: translateY(-3px);
  border-color: var(--cart-orange, #FD572A);
}
.recently-viewed-card.is-oos {
  opacity: 0.6;
}
.recently-viewed-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}
.recently-viewed-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
}
.recently-viewed-placeholder {
  width: 100%;
  height: 100%;
  background: var(--cart-cloud, #f5f5f5);
}
.recently-viewed-oos-badge {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
}
.recently-viewed-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.recently-viewed-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recently-viewed-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.recently-viewed-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
}
.recently-viewed-compare {
  font-size: 11px;
  text-decoration: line-through;
  color: var(--color-text-muted, #5F5E5A);
}

/* Section title for recently-viewed (matches our design system) */
.recently-viewed-section .section-heading {
  margin-block-end: 16px;
}
.recently-viewed-section .section-title {
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.recently-viewed-section .section-title::before {
  content: '';
  width: 4px;
  height: 18px;
  background: var(--cart-orange, #FD572A);
  border-radius: 2px;
}

/* ─── CART: Empty cart state with stronger CTA ─── */
.cart-empty {
  text-align: center;
  padding-block: 60px 80px;
}
.cart-empty-icon {
  width: 96px;
  height: 96px;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.1) 0%, rgba(78, 36, 181, 0.08) 100%);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 24px;
  color: var(--cart-orange, #FD572A);
}
.cart-empty-icon svg {
  width: 44px;
  height: 44px;
}

/* ─── Better visual hierarchy on cart summary ─── */
.cart-summary {
  position: sticky;
  top: 80px;
}
.cart-summary-title {
  font-size: 18px;
  font-weight: 800;
  margin-block-end: 16px;
  padding-block-end: 12px;
  border-block-end: 2px solid var(--cart-orange, #FD572A);
  display: inline-block;
}

/* Promo strip more visually appealing */
.promo-strip-item {
  background: linear-gradient(135deg, var(--bg-color, #FEF3C7) 0%, color-mix(in srgb, var(--bg-color, #FEF3C7) 85%, white) 100%);
}

/* Sticky checkout button - more visual punch */
.cart-sticky-checkout-btn {
  background: linear-gradient(135deg, #FD572A 0%, #FF7847 100%);
  box-shadow: 0 4px 14px rgba(253, 87, 42, 0.4);
  font-weight: 800;
  font-size: 16px;
  padding: 14px 28px;
}

/* Social proof — slight movement to attract eye */
.cart-social-proof {
  animation: socialFadeIn 0.5s ease-out;
}
@keyframes socialFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   404 PAGE — POPULAR BRANDS section (rotates per refresh)
   ════════════════════════════════════════════════════════════════════ */

.page-404-brands {
  margin-block-start: 48px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
}

.page-404-brands-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .page-404-brands-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.page-404-brand-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 16px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.page-404-brand-card:hover {
  transform: translateY(-3px);
  border-color: var(--cart-orange, #FD572A);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.page-404-brand-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cart-cloud, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-404-brand-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.page-404-brand-img--initial {
  background: linear-gradient(135deg, var(--cart-orange, #FD572A) 0%, var(--cart-violet, #4E24B5) 100%);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
}

.page-404-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #201F1F);
}

/* ─── Recently-viewed: add vendor display (orange uppercase) ─── */
.recently-viewed-vendor {
  font-size: 10px;
  color: var(--cart-orange, #FD572A);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   SEARCH PAGE — polished header + empty state
   ════════════════════════════════════════════════════════════════════ */
.pcg-section--search {
  padding-block: 24px 48px;
}

.pcg-search-header {
  margin-block-end: 24px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
}

.pcg-search-title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--color-text, #201F1F);
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.pcg-search-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  color: var(--color-text-muted, #6B6B6B);
}

.pcg-search-count {
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
  font-size: 16px;
}

.pcg-search-hint {
  margin: 4px 0 0;
  color: var(--color-text-muted, #6B6B6B);
  font-size: 14px;
}

/* Empty state */
.pcg-search-empty {
  text-align: center;
  padding: 60px 20px;
  max-width: 600px;
  margin: 0 auto;
}
.pcg-search-empty-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.08), rgba(78, 36, 181, 0.08));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-orange, #FD572A);
}
.pcg-search-empty-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--color-text, #201F1F);
}
.pcg-search-empty-msg {
  margin: 0 0 24px;
  color: var(--color-text-muted, #6B6B6B);
  font-size: 15px;
}
.pcg-search-suggestions {
  background: #fafafa;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 auto 24px;
  text-align: start;
  max-width: 460px;
}
.pcg-search-suggestions h3 {
  font-size: 13px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--cart-orange, #FD572A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pcg-search-suggestions ul {
  margin: 0;
  padding-inline-start: 20px;
  list-style: disc;
  color: var(--color-text, #201F1F);
  font-size: 14px;
  line-height: 1.8;
}

/* Limit filter group height — prevents giant sidebar (color/size with many options) */
.pcg-filter-items {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.2) transparent;
}
.pcg-filter-items::-webkit-scrollbar {
  width: 4px;
}
.pcg-filter-items::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 2px;
}

/* ── Active filter chips (removable) — collection + search ── */
.active-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block: 4px 18px;
}
.active-filter-chips-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted, #777);
}
.active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cart-cloud, #EFEFEF);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cart-dark, #201F1F);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.active-filter-chip:hover {
  background: #fff;
  border-color: var(--cart-orange, #FD572A);
  color: var(--cart-orange, #FD572A);
}
.active-filter-chip-x {
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  opacity: 0.7;
}
.active-filter-chip:hover .active-filter-chip-x { opacity: 1; }
.active-filter-chip--price { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .active-filter-chip--price { unicode-bidi: plaintext; }
.active-filter-clear-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-violet, #4E24B5);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-inline-start: 4px;
}
.active-filter-clear-all:hover { color: #E5283C; }

/* ── Price bucket quick pills (collection filter) ── */
.pcg-price-buckets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-end: 12px;
}
.pcg-price-bucket {
  padding: 6px 10px;
  border: 1px solid var(--color-border, rgba(32,31,31,0.14));
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--cart-dark, #201F1F);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pcg-price-bucket:hover {
  background: var(--cart-violet, #4E24B5);
  border-color: var(--cart-violet, #4E24B5);
  color: #fff;
}

/* ── Search: filter trigger button (mobile), actions, price range, backdrop ── */
.pcg-filter-trigger {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--cart-white);
  font-weight: 700;
  font-size: 13px;
  color: var(--cart-dark);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}
.pcg-filter-trigger:hover { background: var(--cart-cloud); border-color: var(--cart-violet); }
.pcg-filter-trigger svg { flex-shrink: 0; width: 16px; height: 16px; }

/* "Filters" pill inside the quick-filters row — visible accent, mobile-only
   (desktop shows the full sidebar so the trigger is unnecessary there).
   Height/box-model handled by the shared .quick-filter-pill mobile rule. */
.quick-filter-pill--filters {
  background: var(--cart-violet, #4E24B5);
  color: #fff;
  border-color: var(--cart-violet, #4E24B5);
  cursor: pointer;
  /* Reset <button> UA defaults so it matches the <a> pills pixel-for-pixel. */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
}
.quick-filter-pill--filters:hover {
  background: var(--cart-dark, #201F1F);
  border-color: var(--cart-dark, #201F1F);
}
.quick-filter-pill--filters svg { width: 14px; height: 14px; }
@media (min-width: 1024px) {
  .quick-filter-pill--filters { display: none; }
}

.pcg-filter-actions {
  display: none;
  gap: 10px;
  align-items: center;
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--color-border, rgba(32,31,31,0.1));
}
.pcg-filter-clear {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted, #777);
  text-decoration: none;
  padding: 8px 6px;
}
.pcg-filter-clear:hover { color: #E5283C; }
.pcg-filter-apply { flex: 1; }

.pcg-filter-price {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.pcg-filter-price-field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pcg-filter-price-field label {
  font-size: 11px;
  color: var(--color-text-muted, #777);
  font-weight: 600;
}
.pcg-filter-price-field input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border, rgba(32,31,31,0.15));
  border-radius: 10px;
  font: inherit;
  direction: ltr;
  text-align: start;
}
.pcg-filter-price-sep { padding-block-end: 9px; color: var(--color-text-muted, #999); }

.pcg-filters-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(32, 31, 31, 0.5);
  z-index: 99;
  opacity: 0;
  animation: pcgBackdropIn 0.25s forwards;
}
@keyframes pcgBackdropIn { to { opacity: 1; } }

/* Mobile: show filter trigger + actions, make sidebar a slide-in drawer */
@media (max-width: 1023px) {
  .pcg-filter-trigger { display: inline-flex; }
  .pcg-filter-actions { display: flex; }
  body.filters-open { overflow: hidden; }
}
@media (min-width: 1024px) {
  .pcg-filters-backdrop { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   CART PAGE V2 — World-class design (Amazon / Noon / Best Buy style)
   ════════════════════════════════════════════════════════════════════ */

.cart-page-v2 {
  padding-block: 16px 48px;
}

/* Breadcrumbs */
.cart-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 16px;
  font-size: 13px;
  color: var(--color-text-muted, #6B6B6B);
}
.cart-breadcrumbs a {
  color: var(--color-text-muted, #6B6B6B);
  text-decoration: none;
  transition: color 0.15s;
}
.cart-breadcrumbs a:hover {
  color: var(--cart-orange, #FD572A);
}
.cart-breadcrumbs span[aria-current] {
  color: var(--color-text, #201F1F);
  font-weight: 600;
}

/* Header */
.cart-header-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 20px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  flex-wrap: wrap;
}
.cart-title-v2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--color-text, #201F1F);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.cart-title-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-muted, #6B6B6B);
  letter-spacing: normal;
}
.cart-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cart-violet, #4E24B5);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s;
}
.cart-back-link:hover {
  color: var(--cart-orange, #FD572A);
}
[dir="rtl"] .cart-back-link svg {
  transform: scaleX(-1);
}

/* Free shipping wrap (top, full-width) */
.cart-shipping-progress-wrap {
  margin-block-end: 20px;
}

/* MAIN GRID — 2 columns on desktop, stacked on mobile */
.cart-grid-v2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .cart-grid-v2 {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 32px;
    align-items: start;
  }
}

/* Items column */
.cart-items-col {
  min-width: 0;
}
.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Summary column (sticky on desktop) */
.cart-summary-col {
  min-width: 0;
}
@media (min-width: 1024px) {
  .cart-summary-col {
    position: sticky;
    top: 90px;
  }
}

/* Summary card */
.cart-summary-v2 {
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cart-summary-heading {
  font-size: 16px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--color-text, #201F1F);
  padding-block-end: 12px;
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}

.cart-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text, #201F1F);
}
.cart-summary-row--discount {
  color: var(--color-success, #1A8F3C);
  font-weight: 600;
}
.cart-summary-row--muted {
  color: var(--color-text-muted, #6B6B6B);
  font-size: 13px;
}

/* Total row — bigger, bolder */
.cart-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
}
.cart-summary-total-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #201F1F);
}
.cart-summary-total-amount {
  font-size: 24px;
  font-weight: 900;
  color: var(--cart-orange, #FD572A);
  letter-spacing: -0.02em;
}

/* Cashback wrap */
.cart-cashback-wrap {
  margin-block-end: -6px;
}

/* Checkout button — BIG and prominent */
.cart-checkout-btn-v2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #D9FF03 0%, #B8E000 100%);
  color: var(--color-text, #201F1F);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out, opacity 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
  box-shadow: 0 4px 12px rgba(217, 255, 3, 0.35);
}
.cart-checkout-btn-v2:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(217, 255, 3, 0.45);
}
.cart-checkout-btn-v2:active {
  transform: translateY(0);
}
[dir="rtl"] .cart-checkout-btn-v2 svg {
  transform: scaleX(-1);
}

.cart-additional-checkout {
  margin-block-start: 8px;
}

/* Trust mini bar (icons row) */
.cart-trust-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  background: #fafafa;
  border-radius: 10px;
}
.cart-trust-mini-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  color: var(--color-text-muted, #6B6B6B);
}
.cart-trust-mini-item svg {
  color: var(--cart-violet, #4E24B5);
}
.cart-trust-mini-item span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

/* Promo / Notes collapsibles */
.cart-promo-toggle,
.cart-notes-toggle {
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
  padding-block-start: 14px;
}
.cart-promo-toggle-summary,
.cart-notes-toggle-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--cart-violet, #4E24B5);
  list-style: none;
  padding-block: 4px;
}
.cart-promo-toggle-summary::-webkit-details-marker,
.cart-notes-toggle-summary::-webkit-details-marker { display: none; }
.cart-promo-toggle-summary svg:first-child,
.cart-notes-toggle-summary svg:first-child {
  color: var(--cart-orange, #FD572A);
}
.cart-promo-toggle-summary span,
.cart-notes-toggle-summary span {
  flex: 1;
}
.cart-promo-toggle-chevron,
.cart-notes-toggle-chevron {
  transition: transform 0.2s;
}
.cart-promo-toggle[open] .cart-promo-toggle-chevron,
.cart-notes-toggle[open] .cart-notes-toggle-chevron {
  transform: rotate(180deg);
}
.cart-promo-toggle-body,
.cart-notes-toggle-body {
  padding-block-start: 10px;
}
.cart-promo-toggle-info {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted, #6B6B6B);
  line-height: 1.5;
}
.cart-notes-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.15));
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 70px;
  background: #fafafa;
}
.cart-notes-input:focus {
  outline: none;
  border-color: var(--cart-orange, #FD572A);
  background: #fff;
}

/* Recently viewed wrap */
.cart-recently-viewed-wrap {
  margin-block-start: 48px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}

/* Empty state */
.cart-empty-v2 {
  text-align: center;
  padding: 80px 20px 60px;
  max-width: 480px;
  margin: 0 auto;
}
.cart-empty-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.10), rgba(78, 36, 181, 0.10));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cart-orange, #FD572A);
}
.cart-empty-icon svg { width: 40px; height: 40px; }
.cart-empty-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--color-text, #201F1F);
}
.cart-empty-msg {
  color: var(--color-text-muted, #6B6B6B);
  margin: 0 0 28px;
  font-size: 15px;
}

/* ════════════════════════════════════════════════════════════════════
   CART DELIVERY PROMISE
   ════════════════════════════════════════════════════════════════════ */
.cart-delivery-promise {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #fff7f3 0%, #f4eeff 100%);
  border: 1px solid rgba(253, 87, 42, 0.20);
  border-radius: 12px;
}
.cart-delivery-promise-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(253, 87, 42, 0.12);
  color: var(--cart-orange, #FD572A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-delivery-promise-body {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.cart-delivery-promise-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text, #201F1F);
}
.cart-delivery-promise-sub {
  font-size: 12px;
  color: var(--color-text-muted, #6B6B6B);
  margin-block-start: 2px;
}
.cart-delivery-promise-time {
  color: var(--cart-orange, #FD572A);
  font-weight: 800;
}

/* ════════════════════════════════════════════════════════════════════
   RECENTLY VIEWED — CAROUSEL design
   ════════════════════════════════════════════════════════════════════ */

.rv-carousel {
  margin-block: 32px;
}

.rv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 16px;
}

.rv-title {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800;
  margin: 0;
  color: var(--color-text, #201F1F);
  letter-spacing: -0.01em;
}

.rv-nav {
  display: flex;
  gap: 6px;
}

.rv-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.15));
  background: #fff;
  color: var(--color-text, #201F1F);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.rv-nav-btn:hover {
  background: var(--cart-orange, #FD572A);
  border-color: var(--cart-orange, #FD572A);
  color: #fff;
}
.rv-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.rv-nav-btn:disabled:hover {
  background: #fff;
  border-color: var(--color-border, rgba(32, 31, 31, 0.15));
  color: var(--color-text, #201F1F);
}

[dir="rtl"] .rv-nav-btn svg {
  transform: scaleX(-1);
}

.rv-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -4px;
  padding: 4px;
}
.rv-viewport::-webkit-scrollbar {
  display: none;
}

.rv-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px * (var(--rv-cols-m, 2) - 1)) / var(--rv-cols-m, 2));
  gap: 12px;
}
@media (min-width: 640px) {
  .rv-track {
    grid-auto-columns: calc((100% - 14px * (var(--rv-cols-t, 3) - 1)) / var(--rv-cols-t, 3));
    gap: 14px;
  }
}
@media (min-width: 1024px) {
  .rv-track {
    grid-auto-columns: calc((100% - 16px * (var(--rv-cols-d, 4) - 1)) / var(--rv-cols-d, 4));
    gap: 16px;
  }
}

.rv-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
  position: relative;
}
.rv-card:hover {
  border-color: var(--cart-orange, #FD572A);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.rv-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--cart-cloud, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rv-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.rv-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.rv-card.is-oos .rv-image img {
  opacity: 0.55;
  filter: grayscale(50%);
}
.rv-oos-badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  background: rgba(32, 31, 31, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rv-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.rv-vendor {
  font-size: 10px;
  font-weight: 700;
  color: var(--cart-orange, #FD572A);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 2px;
}

.rv-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #201F1F);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-block-end: 6px;
  min-height: 2.7em;
}

.rv-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-block-start: auto;
}
.rv-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
}
.rv-compare {
  font-size: 11px;
  color: var(--color-text-muted, #6B6B6B);
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════════
   404 PAGE — World-class redesign
   ════════════════════════════════════════════════════════════════════ */

.page-404 {
  padding-block: 32px 64px;
}

/* HERO */
.page-404-hero {
  text-align: center;
  padding-block: 24px 32px;
  max-width: 640px;
  margin: 0 auto;
}

.page-404-number-wrap {
  position: relative;
  display: inline-block;
  margin-block-end: 16px;
}

.page-404-number {
  font-size: clamp(96px, 18vw, 180px);
  font-weight: 900;
  background: linear-gradient(135deg, #FD572A 0%, #4E24B5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.85;
  letter-spacing: -0.04em;
  animation: page404FloatY 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(253, 87, 42, 0.18));
}

@keyframes page404FloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.page-404-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--color-text, #201F1F);
  letter-spacing: -0.02em;
}

.page-404-message {
  font-size: 15px;
  color: var(--color-text-muted, #6B6B6B);
  margin: 0 0 28px;
  line-height: 1.6;
}

.page-404-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-404-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, opacity 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out;
  border: 2px solid transparent;
}
.page-404-btn--primary {
  background: linear-gradient(135deg, #FD572A 0%, #ff7752 100%);
  color: #fff;
  box-shadow: 0 6px 20px rgba(253, 87, 42, 0.30);
}
.page-404-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253, 87, 42, 0.40);
  color: #fff;
}
.page-404-btn--secondary {
  background: #fff;
  color: var(--cart-violet, #4E24B5);
  border-color: var(--cart-violet, #4E24B5);
}
.page-404-btn--secondary:hover {
  background: var(--cart-violet, #4E24B5);
  color: #fff;
  transform: translateY(-2px);
}

/* SEARCH BAR */
.page-404-search-wrap {
  max-width: 580px;
  margin: 0 auto 40px;
}

.page-404-search-form {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 2px solid var(--color-border, rgba(32, 31, 31, 0.12));
  border-radius: 999px;
  overflow: hidden;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.page-404-search-form:focus-within {
  border-color: var(--cart-orange, #FD572A);
  box-shadow: 0 4px 20px rgba(253, 87, 42, 0.15);
}
.page-404-search-icon {
  margin-inline-start: 18px;
  color: var(--color-text-muted, #6B6B6B);
  flex-shrink: 0;
}
.page-404-search-form input {
  flex: 1;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-family: inherit;
  color: var(--color-text, #201F1F);
  outline: none;
  min-width: 0;
}
.page-404-search-form input::placeholder {
  color: var(--color-text-muted, #6B6B6B);
}
.page-404-search-form button {
  padding: 13px 24px;
  margin-inline-end: 4px;
  border: 0;
  background: var(--cart-orange, #FD572A);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.page-404-search-form button:hover {
  background: #e64a1f;
}

/* SECTIONS */
.page-404-section {
  margin: 48px auto 0;
  max-width: 1100px;
}

.page-404-section-title {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 800;
  margin: 0 0 20px;
  text-align: center;
  color: var(--color-text, #201F1F);
  letter-spacing: -0.01em;
  position: relative;
}
.page-404-section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #FD572A 0%, #4E24B5 100%);
  margin: 8px auto 0;
  border-radius: 2px;
}

/* POPULAR COLLECTIONS — 4 cards */
.page-404-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) {
  .page-404-cards-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

.page-404-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 14px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.page-404-card:hover {
  transform: translateY(-4px);
  border-color: var(--cart-orange, #FD572A);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.page-404-card-img {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--cart-cloud, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-404-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.page-404-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FD572A 0%, #4E24B5 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: 800;
}

.page-404-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #201F1F);
}
.page-404-card-meta {
  font-size: 11px;
  color: var(--color-text-muted, #6B6B6B);
  font-weight: 500;
}

/* POPULAR BRANDS — 4 rotating */
.page-404-brands-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .page-404-brands-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}

.page-404-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.page-404-brand:hover {
  transform: translateY(-3px);
  border-color: var(--cart-violet, #4E24B5);
  box-shadow: 0 8px 24px rgba(78, 36, 181, 0.10);
}

.page-404-brand-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cart-cloud, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-404-brand-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.page-404-brand-initial {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FD572A 0%, #4E24B5 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
}

.page-404-brand-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #201F1F);
}

/* RECENTLY VIEWED WRAP */
.page-404-rv-wrap {
  margin-block-start: 48px;
}

/* ════════════════════════════════════════════════════════════════════
   CART PAGE — World-class CSS-only redesign 2026-05-20
   Targets EXISTING classes in main-cart.liquid (no Liquid changes)
   ════════════════════════════════════════════════════════════════════ */

/* Container padding refinement */
.template-cart .section-padding {
  padding-block: 24px 64px !important;
}

/* Title — bolder, modern */
.template-cart .section-title {
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  color: var(--color-text, #201F1F);
  margin-block-end: 24px !important;
  padding-block-end: 16px;
  border-block-end: 2px solid var(--color-border, rgba(32, 31, 31, 0.08));
}

/* Main 2-column layout — sticky summary */
.cart-page-layout {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 24px !important;
}
@media (min-width: 1024px) {
  .cart-page-layout {
    grid-template-columns: minmax(0, 1fr) 380px !important;
    gap: 32px !important;
    align-items: start;
  }
}

/* Items column wrapper */
.cart-table {
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Sticky summary on desktop */
@media (min-width: 1024px) {
  .cart-page-layout > aside {
    position: sticky;
    top: 90px;
  }
}

/* Summary card — clean, polished */
.cart-summary {
  background: #fff !important;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10)) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.cart-summary > h2 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--color-text, #201F1F);
  margin: 0 0 14px !important;
  padding-block-end: 12px;
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}

/* Summary rows — better hierarchy */
.cart-summary-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 6px !important;
  font-size: 14px;
  color: var(--color-text, #201F1F);
}

/* TOTAL row — big, bold, ORANGE */
.cart-summary-row.total {
  padding-block: 14px !important;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  border-block-end: 1px solid var(--color-border, rgba(32, 31, 31, 0.10));
  margin-block: 8px 12px;
}
.cart-summary-row.total span:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #201F1F);
}
.cart-summary-row.total span:last-child {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: var(--cart-orange, #FD572A) !important;
  letter-spacing: -0.02em;
}

/* Divider — subtle */
.cart-summary-divider {
  height: 1px;
  background: var(--color-border, rgba(32, 31, 31, 0.08));
  margin-block: 14px 12px;
}

/* CHECKOUT BUTTON — BIG, PROMINENT, glowing */
.cart-summary .btn-lime,
.btn-lime.btn--block {
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  border-radius: 45px !important;
  background: linear-gradient(135deg, #D9FF03 0%, #B8E000 100%) !important;
  box-shadow: 0 4px 14px rgba(217, 255, 3, 0.40) !important;
  transition: background-color 0.18s ease-out !important, color 0.18s ease-out !important, border-color 0.18s ease-out !important, opacity 0.18s ease-out !important, transform 0.18s ease-out !important, box-shadow 0.18s ease-out !important;
  color: var(--color-text, #201F1F) !important;
  border: 0 !important;
  margin-top: 15px;
}
.cart-summary .btn-lime:hover,
.btn-lime.btn--block:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 255, 3, 0.55) !important;
}

/* Notes — polished textarea */
.cart-notes {
  margin-block: 14px 12px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}
.cart-notes-label {
  display: block;
  font-size: 12px !important;
  font-weight: 700;
  color: var(--cart-violet, #4E24B5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 6px;
}
.cart-notes-input {
  width: 100%;
  padding: 10px 12px !important;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.15)) !important;
  border-radius: 8px !important;
  font-family: inherit;
  font-size: 13px !important;
  resize: vertical;
  min-height: 60px;
  background: #fafafa !important;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cart-notes-input:focus {
  outline: none !important;
  border-color: var(--cart-orange, #FD572A) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(253, 87, 42, 0.10);
}

/* Payment methods — compact trust strip */
.cart-payment-methods {
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}
.cart-payment-methods-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-text-muted, #6B6B6B);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 10px !important;
  text-align: center;
}
.cart-payment-methods-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}
.cart-payment-method {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 4px !important;
  padding: 8px 4px !important;
  background: #fafafa !important;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.08)) !important;
  border-radius: 8px !important;
  text-align: center;
}
.cart-payment-icon {
  width: 28px !important;
  height: 28px !important;
}
.cart-payment-label {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--color-text-muted, #6B6B6B);
}
.cart-payment-methods-note {
  font-size: 11px !important;
  color: var(--color-text-muted, #6B6B6B);
  margin-block-start: 8px !important;
  text-align: center;
}

/* Recently viewed wrapper on cart */
.cart-recently-viewed-wrap {
  margin-block-start: 48px;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}

/* ════════════════════════════════════════════════════════════════════
   404 PAGE — World-class CSS-only redesign
   ════════════════════════════════════════════════════════════════════ */

/* Hero — animated floating number */
.page-404-v2 .page-404-hero {
  padding-block: 48px 32px !important;
}

.page-404-v2 .page-404-number {
  font-size: clamp(96px, 18vw, 180px) !important;
  font-weight: 900 !important;
  line-height: 0.85 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 16px !important;
  animation: page404FloatY 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(253, 87, 42, 0.18));
}

@keyframes page404FloatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.page-404-v2 .page-404-hero h1 {
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin-bottom: 10px !important;
  color: var(--color-text, #201F1F);
}

.page-404-v2 .page-404-hero p {
  font-size: 15px !important;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 28px !important;
}

/* Hero buttons */
.page-404-v2 .page-404-hero .btn.btn-orange {
  background: linear-gradient(135deg, #FD572A 0%, #ff7752 100%) !important;
  box-shadow: 0 6px 20px rgba(253, 87, 42, 0.30);
  border-radius: 999px !important;
  padding: 13px 26px !important;
  font-weight: 700 !important;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, opacity 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.page-404-v2 .page-404-hero .btn.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253, 87, 42, 0.40);
}
.page-404-v2 .page-404-hero .btn.btn-secondary {
  background: #fff !important;
  color: var(--cart-violet, #4E24B5) !important;
  border: 2px solid var(--cart-violet, #4E24B5) !important;
  border-radius: 999px !important;
  padding: 11px 24px !important;
  font-weight: 700 !important;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out, opacity 0.18s ease-out, transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.page-404-v2 .page-404-hero .btn.btn-secondary:hover {
  background: var(--cart-violet, #4E24B5) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Search bar — large rounded */
.page-404-v2 .page-404-search {
  margin: 32px auto 40px !important;
  max-width: 580px !important;
}
.page-404-v2 .page-404-search-form {
  display: flex !important;
  align-items: center;
  gap: 0 !important;
  background: #fff;
  border: 2px solid var(--color-border, rgba(32, 31, 31, 0.12));
  border-radius: 999px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.page-404-v2 .page-404-search-form:focus-within {
  border-color: var(--cart-orange, #FD572A);
  box-shadow: 0 4px 20px rgba(253, 87, 42, 0.15);
}
.page-404-v2 .page-404-search-form input {
  flex: 1 !important;
  padding: 14px 20px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 15px !important;
  font-family: inherit;
  color: var(--color-text, #201F1F);
  outline: none !important;
  min-width: 0;
}
.page-404-v2 .page-404-search-form input::placeholder {
  color: var(--color-text-muted, #6B6B6B);
}
.page-404-v2 .page-404-search-form button {
  padding: 13px 24px !important;
  margin-inline-end: 4px !important;
  border: 0 !important;
  background: var(--cart-orange, #FD572A) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.page-404-v2 .page-404-search-form button:hover {
  background: #e64a1f !important;
}

/* Section titles with gradient underline */
.page-404-v2 .page-404-section-title {
  font-size: clamp(18px, 2.2vw, 22px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  margin: 0 0 24px !important;
  text-align: center;
  color: var(--color-text, #201F1F);
  position: relative;
}
.page-404-v2 .page-404-section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #FD572A 0%, #4E24B5 100%);
  margin: 10px auto 0;
  border-radius: 2px;
}

/* Collection cards — beautiful */
.page-404-v2 .page-404-collections-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 14px !important;
}
@media (min-width: 640px) {
  .page-404-v2 .page-404-collections-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }
}
.page-404-v2 .page-404-collection-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px !important;
  padding: 20px 14px !important;
  background: #fff !important;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.10)) !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  color: inherit !important;
  text-align: center;
  transition: background-color 0.2s ease-out !important, color 0.2s ease-out !important, border-color 0.2s ease-out !important, opacity 0.2s ease-out !important, transform 0.2s ease-out !important, box-shadow 0.2s ease-out !important;
}
.page-404-v2 .page-404-collection-card:hover {
  transform: translateY(-4px);
  border-color: var(--cart-orange, #FD572A) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.page-404-v2 .page-404-collection-img {
  width: 92px !important;
  height: 92px !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: var(--cart-cloud, #f5f5f5) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.page-404-v2 .page-404-collection-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  padding: 10px;
}
.page-404-v2 .page-404-collection-img--placeholder {
  background: linear-gradient(135deg, #FD572A 0%, #4E24B5 100%) !important;
}
.page-404-v2 .page-404-collection-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--color-text, #201F1F);
}
.page-404-v2 .page-404-collection-count {
  font-size: 11px !important;
  color: var(--color-text-muted, #6B6B6B);
  font-weight: 500;
}

/* Promo strip on 404 - tighten spacing */
.page-404-v2 .page-404-promo {
  margin: 40px auto !important;
}

/* Recently viewed wrap */
.page-404-v2 .page-404-recently-viewed {
  margin-block-start: 48px !important;
  padding-block-start: 32px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}

/* ════════════════════════════════════════════════════════════════════
   RECENTLY VIEWED — CSS-only carousel transformation
   Uses existing .recently-viewed-* classes
   ════════════════════════════════════════════════════════════════════ */

.recently-viewed-section {
  margin-block: 40px !important;
}

/* Section heading — match new style */
.recently-viewed-section .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 18px !important;
}
.recently-viewed-section .section-title {
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--color-text, #201F1F);
  margin: 0 !important;
}

/* CAROUSEL — horizontal scroll with snap */
.recently-viewed-track {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc(50% - 6px) !important;
  gap: 12px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--cart-orange, #FD572A) transparent;
  padding-block-end: 8px;
  scroll-padding-inline-start: 4px;
}
@media (min-width: 640px) {
  .recently-viewed-track {
    grid-auto-columns: calc(33.333% - 10px) !important;
    gap: 14px !important;
  }
}
@media (min-width: 1024px) {
  .recently-viewed-track {
    grid-auto-columns: calc(25% - 12px) !important;
    gap: 16px !important;
  }
}

/* Custom scrollbar */
.recently-viewed-track::-webkit-scrollbar {
  height: 6px;
}
.recently-viewed-track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 3px;
}
.recently-viewed-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #FD572A, #4E24B5);
  border-radius: 3px;
}

/* Card styling — polished */
.recently-viewed-card {
  scroll-snap-align: start;
  display: flex !important;
  flex-direction: column;
  background: #fff !important;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.08)) !important;
  border-radius: 12px !important;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
  position: relative;
}
.recently-viewed-card:hover {
  border-color: var(--cart-orange, #FD572A) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.recently-viewed-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--cart-cloud, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.recently-viewed-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.recently-viewed-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}
.recently-viewed-card.is-oos .recently-viewed-image img {
  opacity: 0.55;
  filter: grayscale(50%);
}
.recently-viewed-oos-badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  background: rgba(32, 31, 31, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recently-viewed-info {
  padding: 10px 12px 12px !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.recently-viewed-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-text, #201F1F);
  line-height: 1.35 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-block-end: 4px !important;
}
.recently-viewed-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-block-start: auto;
}
.recently-viewed-price {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--cart-orange, #FD572A) !important;
}
.recently-viewed-compare {
  font-size: 11px !important;
  color: var(--color-text-muted, #6B6B6B) !important;
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════════
   PICKED FOR YOU — product cards (native recommendations)
   ════════════════════════════════════════════════════════════════════ */
.picked-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
  height: 100%;
}
.picked-card:hover {
  border-color: var(--cart-orange, #FD572A);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.picked-card-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--cart-cloud, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.picked-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.picked-card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}
.picked-card.is-oos .picked-card-image img {
  opacity: 0.55;
  filter: grayscale(50%);
}
.picked-card-oos {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  background: rgba(32, 31, 31, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.picked-card-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.picked-card-vendor {
  font-size: 10px;
  font-weight: 700;
  color: var(--cart-orange, #FD572A);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 2px;
}
.picked-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #201F1F);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-block-end: 6px;
}
.picked-card-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-block-start: auto;
}
.picked-card-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
}
.picked-card-compare {
  font-size: 11px;
  color: var(--color-text-muted, #6B6B6B);
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════════
   RECENTLY VIEWED V2 — Minimal, conversion-optimized
   ════════════════════════════════════════════════════════════════════ */
.rv2 {
  margin-block: 40px;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Header */
.rv2-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-block-end: 18px;
  flex-wrap: wrap;
}
.rv2-heading-group {
  min-width: 0;
}
.rv2-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text, #201F1F);
  margin: 0;
  line-height: 1.2;
}
.rv2-subtitle {
  font-size: 13px;
  color: var(--color-text-muted, #6B6B6B);
  margin: 4px 0 0;
}

.rv2-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.rv2-clear {
  background: transparent;
  border: 0;
  color: var(--color-text-muted, #6B6B6B);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.rv2-clear:hover {
  color: var(--cart-orange, #FD572A);
}

.rv2-nav {
  display: flex;
  gap: 6px;
}
.rv2-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.15));
  background: #fff;
  color: var(--color-text, #201F1F);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
.rv2-arrow:hover {
  background: var(--cart-orange, #FD572A);
  border-color: var(--cart-orange, #FD572A);
  color: #fff;
}
.rv2-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.rv2-arrow:disabled:hover {
  background: #fff;
  border-color: var(--color-border, rgba(32, 31, 31, 0.15));
  color: var(--color-text, #201F1F);
}
[dir="rtl"] .rv2-arrow svg {
  transform: scaleX(-1);
}

/* Viewport + track (horizontal carousel) */
.rv2-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 -4px;
  padding: 4px;
}
.rv2-viewport::-webkit-scrollbar { display: none; }

.rv2-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 12px) / 2);
  gap: 12px;
}
@media (min-width: 640px) {
  .rv2-track {
    grid-auto-columns: calc((100% - 28px) / 3);
    gap: 14px;
  }
}
@media (min-width: 1024px) {
  .rv2-track {
    grid-auto-columns: calc((100% - 64px) / 5);
    gap: 16px;
  }
}

/* Card — minimal */
.rv2-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border, rgba(32, 31, 31, 0.07));
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
  position: relative;
}
.rv2-card:hover {
  border-color: var(--cart-orange, #FD572A);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.rv2-image {
  position: relative;
  aspect-ratio: 1;
  background: var(--cart-cloud, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rv2-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  transition: transform 0.3s ease-out;
}
.rv2-card:hover .rv2-image img {
  transform: scale(1.05);
}
.rv2-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}
.rv2-card.is-oos .rv2-image img {
  opacity: 0.5;
  filter: grayscale(60%);
}

/* Badge — single strongest motivator */
.rv2-badge {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  z-index: 2;
}
.rv2-badge--drop {
  background: var(--cart-lime, #D9FF03);
  color: #1a1a00;
  box-shadow: 0 2px 8px rgba(217, 255, 3, 0.4);
}
.rv2-badge--oos {
  background: rgba(32, 31, 31, 0.85);
  color: #fff;
}

.rv2-info {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.rv2-vendor {
  font-size: 10px;
  font-weight: 700;
  color: var(--cart-orange, #FD572A);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rv2-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #201F1F);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.rv2-prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin-block-start: 2px;
}
.rv2-price {
  font-size: 15px;
  font-weight: 800;
  color: var(--cart-orange, #FD572A);
}
.rv2-compare {
  font-size: 11px;
  color: var(--color-text-muted, #6B6B6B);
  text-decoration: line-through;
}

/* CTA hint — appears on hover (re-engagement nudge) */
.rv2-cta {
  margin-block-start: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cart-violet, #4E24B5);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.rv2-card:hover .rv2-cta {
  opacity: 1;
  transform: translateY(0);
}
/* On touch devices, always show CTA (no hover) */
@media (hover: none) {
  .rv2-cta {
    opacity: 1;
    transform: none;
  }
}

/* Product Q&A — subtitle + heading group */
.product-qa-heading-group {
  min-width: 0;
}
.product-qa-subtitle {
  font-size: 13px;
  color: var(--color-text-muted, #6B6B6B);
  margin: 4px 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   VENDOR INFO — Guarantees block (warranty, exchange, return)
   ════════════════════════════════════════════════════════════════════ */
.vendor-info-badge--verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(26, 143, 60, 0.10);
  color: var(--color-success, #1A8F3C);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
}
.vendor-info-badge--verified svg {
  width: 11px;
  height: 11px;
}

.vendor-info-guarantees {
  margin-block-start: 12px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--color-border, rgba(32, 31, 31, 0.08));
}
.vendor-info-guarantees-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-muted, #6B6B6B);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: 12px;
}
.vendor-info-guarantees-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vendor-guarantee-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.vendor-guarantee-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(253, 87, 42, 0.10), rgba(78, 36, 181, 0.10));
  color: var(--cart-orange, #FD572A);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vendor-guarantee-body {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}
.vendor-guarantee-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted, #6B6B6B);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-block-end: 2px;
}
.vendor-guarantee-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #201F1F);
}

/* ════════════════════════════════════════════════════════════════════
   PDP STICKY LAYOUT — gallery + sidebar sticky, middle info static
   (Requested: middle column does NOT scroll; sides follow scroll)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* LEFT: gallery follows scroll */
  .product-page .product-gallery {
    position: sticky;
    top: calc(var(--header-h, 70px) + 16px);
    align-self: start;
  }

  /* MIDDLE: info column is STATIC — no sticky, no inner scroll */
  .product-page .product-info {
    position: static;
    align-self: start;
    max-height: none;
    overflow: visible;
  }

  /* RIGHT: sidebar follows scroll (already sticky elsewhere — reinforce, no inner scroll) */
  .product-page .product-sidebar {
    position: sticky;
    top: calc(var(--header-h, 70px) + 16px);
    align-self: start;
    max-height: none;
    overflow: visible;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE GALLERY OVERLAY ACTIONS — wishlist + share on top of product image
   (Mobile only. Trailing edge: RTL→left, LTR→right via logical properties)
   ════════════════════════════════════════════════════════════════════ */
.gallery-mobile-actions {
  display: none; /* hidden on desktop */
}

@media (max-width: 1023px) {
  .gallery-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    inset-block-start: 12px;       /* top margin */
    inset-inline-end: 12px;        /* trailing edge: right in LTR, left in RTL */
    z-index: 5;
  }

  .gallery-mobile-btn {
    inline-size: 42px;
    block-size: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
    color: var(--cart-dark, #201F1F);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .gallery-mobile-btn svg {
    inline-size: 20px;
    block-size: 20px;
    display: block;
    pointer-events: none; /* clicks always register on the button, never the SVG path */
  }

  .gallery-mobile-btn:active {
    transform: scale(0.92);
  }

  /* Wishlist active state — filled red heart */
  .gallery-mobile-btn[aria-pressed="true"] {
    background: #fff;
    color: #E5283C;
  }
  .gallery-mobile-btn[aria-pressed="true"] svg {
    fill: currentColor;
  }
}

/* ════════════════════════════════════════════════════════════════════
   CART ICON — BULLETPROOF FINAL OVERRIDE (max specificity, loads last)
   Forces icon-always-visible + corner badge, beating any app/cached rule.
   ════════════════════════════════════════════════════════════════════ */
button.header-icon-btn--cart[data-cart-trigger] {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, var(--cart-violet, #4E24B5) 0%, #3a1a8a 100%) !important;
  overflow: visible !important;
  font-size: 0 !important; /* kill any stray text node that isn't the badge */
}
/* The cart SVG icon — ALWAYS visible, never hidden, never replaced */
button.header-icon-btn--cart[data-cart-trigger] > svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  color: #fff !important;
  stroke: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  fill: #fff !important;
}
/* The count — small RED circle pinned to the top-trailing corner */
button.header-icon-btn--cart[data-cart-trigger] > .badge-count {
  position: absolute !important;
  top: -6px !important;
  inset-inline-end: -6px !important;
  inset-inline-start: auto !important;
  width: auto !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  background: var(--cart-orange, #FD572A) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inset-block-end: auto !important;
  box-shadow: 0 2px 6px rgba(253, 87, 42, 0.45) !important;
  z-index: 3 !important;
}
/* Hide the badge ONLY when empty — icon still shows */
button.header-icon-btn--cart[data-cart-trigger] > .badge-count.hidden,
button.header-icon-btn--cart[data-cart-trigger][data-cart-count="0"] > .badge-count,
button.header-icon-btn--cart[data-cart-trigger] > .badge-count:empty {
  display: none !important;
}

/* FAQ — wired settings (padding, open state, help CTA) */
.faq-section { padding-block: var(--faq-pad-t, 48px) var(--faq-pad-b, 48px); }
.faq-item.is-open .faq-answer { max-height: 500px; }
.faq-item.is-open .faq-question { color: var(--cart-orange, #FD572A); }
.faq-help-cta { text-align: center; margin-top: 28px; }
.faq-help-cta p { margin-bottom: 12px; color: var(--color-text-secondary); }

/* Newsletter — wired settings (bg, text color, layout, eyebrow, privacy) */
.newsletter-section { background: var(--nl-bg, var(--cart-orange)); color: var(--nl-text, #fff); }
.newsletter-section--left { text-align: start; }
.newsletter-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.9; margin-bottom: 8px;
}
.newsletter-privacy { font-size: 12px; opacity: 0.8; margin-top: 12px; }

/* ====================================================================
   QUICK FILTER PILLS — DEFINITIVE HEIGHT UNIFICATION (final override)
   Placed last so it wins by source order. Forces EVERY pill (links,
   buttons, with/without icon or count badge) to one identical height
   on every breakpoint. Inner elements are size-locked so they can
   never stretch the pill.
   ==================================================================== */
.collection-quick-filters .quick-filter-pill {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding-block: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  align-items: center !important;
  display: inline-flex !important;
}
.collection-quick-filters .quick-filter-pill > * {
  flex-shrink: 0 !important;
  align-self: center !important;
}
.collection-quick-filters .quick-filter-pill svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}
.collection-quick-filters .quick-filter-pill .quick-filter-pill-label {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.collection-quick-filters .quick-filter-pill .quick-filter-pill-count {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-block: 3px !important;
}
@media (min-width: 1024px) {
  .collection-quick-filters .quick-filter-pill {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }
}

/* ====================================================================
   HEADER SEARCH — ANIMATED TYPEWRITER PLACEHOLDER
   Overlay over the empty input. JS types/erases merchant words.
   Hidden once the field has text (.has-value) or is focused.
   RTL/LTR aware via logical properties + unicode-bidi.
   ==================================================================== */
.header-search-words { display: none !important; }
.header-search-animated {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 46px;
  inset-inline-end: 46px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  font-size: 15px;
  font-weight: var(--cart-w-medium);
  color: var(--cart-gray-500);
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.15s;
}
.header-search-input.has-value ~ .header-search-animated,
.header-search-input:focus ~ .header-search-animated {
  opacity: 0;
}
.header-search-animated-prefix {
  flex-shrink: 0;
  color: var(--cart-gray-500);
}
.header-search-animated-word {
  color: var(--cart-dark);
  font-weight: var(--cart-w-bold, 700);
  unicode-bidi: plaintext;
}
.header-search-animated-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--cart-orange);
  margin-inline-start: 1px;
  animation: header-search-caret-blink 1s step-end infinite;
}
@keyframes header-search-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .header-search-animated-caret { animation: none; }
}

/* ====================================================================
   CART ICON — ABSOLUTE GUARANTEED VISIBILITY (mobile + desktop)
   Hardcoded white path on violet button. These rules ensure the SVG
   can NEVER disappear regardless of cascade/cache/order.
   ==================================================================== */
button.header-icon-btn--cart svg.header-icon-btn--cart-svg,
.header-icon-btn--cart .header-icon-btn--cart-svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  fill: #ffffff !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  position: static !important;
  transform: none !important;
  filter: none !important;
}
button.header-icon-btn--cart svg.header-icon-btn--cart-svg path,
.header-icon-btn--cart .header-icon-btn--cart-svg path {
  fill: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ====================================================================
   CART — COD reassurance banner (driven by enable_cod + cod_text_* settings)
   ==================================================================== */
.cart-cod-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-block-end: 12px;
  background: var(--cart-lime, #D9FF03);
  color: var(--cart-dark, #201F1F);
  border-radius: var(--cart-radius-input, 14px);
  font-weight: var(--cart-w-bold, 700);
  font-size: 14px;
  line-height: 1.4;
}
.cart-cod-banner-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.cart-cod-banner-icon svg { width: 22px; height: 22px; }

/* ====================================================================
   PRODUCT CARD — RTL/LTR overlap fix
   Prevents discount badges (.product-card-badges) from growing wide
   enough to collide with the wishlist/quick-view buttons on the
   opposite side. Works for both RTL (AR) and LTR (EN) layouts.
   Also adds safe z-index layering for all card action buttons.
   ==================================================================== */
/* Badges column: cap width so it never reaches the action buttons side */
.product-card-badges {
  max-width: calc(100% - 52px); /* 52px = wishlist btn width (34px) + gap (18px) */
  pointer-events: none; /* badges are display-only, no click needed */
}
.discount-tag {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Action buttons column (wishlist, quick-view, compare) — pinned to inline-end */
.product-card-wishlist,
.product-card-quick-view,
.compare-btn--card {
  inset-inline-end: 8px;
  inset-inline-start: auto !important; /* prevent any LTR/RTL mixup */
}

/* ====================================================================
   GPU COMPOSITING HINTS — Reduce non-composited animation warnings.
   Promotes frequently animated elements to their own layer.
   ==================================================================== */
.btn:hover, .btn:active,
.header-icon-btn:hover,
.product-card:hover .product-card-image,
.footer-social a:hover {
  will-change: transform;
}

/* ====================================================================
   ACCESSIBILITY — Minimum touch target 48x48px (WCAG 2.5.8)
   Fixes PageSpeed "Touch targets do not have sufficient size or spacing"
   ==================================================================== */
@media (max-width: 1023px) {
  /* Ensure all interactive elements meet 48x48px minimum */
  a, button, input[type="submit"], input[type="button"],
  select, [role="button"], [data-action] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Small icon buttons need padding to reach 48px tap area */
  .header-icon-btn,
  .product-card-wishlist,
  .product-card-quick-view,
  .compare-btn--card,
  .slider-arrow,
  .product-slider-dot,
  .back-to-top,
  .whatsapp-fab {
    min-width: 44px;
    min-height: 44px;
  }
  /* Footer social links */
  .footer-social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}