/* Extracted from index.html. Kept in original order so the existing design and overrides behave the same. */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Fraunces:ital,wght@0,600;0,700;0,900;1,600&family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&family=Cairo:wght@400;600;700;800&display=swap');
  
  *, *::before, *::after { 
    box-sizing: border-box; 
  }
  
  html, body { 
    margin: 0; 
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  html {
    scroll-behavior: auto !important;
  }
  .product-detail-shell {
    scroll-behavior: auto !important;
  }

  #root {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  :root {
    --bg: #EFE6D3; --surface: #FBF7EE; --ink: #221D16; --ink-soft: #6B6152;
    --green: #2B6E4E; --green-dark: #1E4F38; --gold: #C08A2E; --brick: #A6412E; --line: #DCD0B4;
    --font-display: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; --font-price: 'Fraunces', serif;
    --header-bg: rgba(251,247,238,0.55);
    --modal-header-bg: rgba(251,247,238,0.62);
    --glass-bg: rgba(251,247,238,0.58);
    --glass-bg-strong: rgba(251,247,238,0.72);
    --glass-border: rgba(220,208,180,0.45);
    --glass-blur: blur(22px) saturate(160%);
    --glass-blur-soft: blur(14px) saturate(140%);
    --glass-shadow: 0 12px 40px rgba(34,29,22,0.12), inset 0 1px 0 rgba(255,255,255,0.45);
  }

  :root.dark-theme {
    --bg: #181614; --surface: #24211e; --ink: #F4EFE6; --ink-soft: #A39C93;
    --green: #378c64; --green-dark: #2B6E4E; --gold: #d69d3a; --brick: #c2523d; --line: #3a3530;
    --header-bg: rgba(28,25,22,0.55);
    --modal-header-bg: rgba(36,33,30,0.62);
    --glass-bg: rgba(36,33,30,0.58);
    --glass-bg-strong: rgba(36,33,30,0.72);
    --glass-border: rgba(58,53,48,0.55);
    --glass-blur: blur(22px) saturate(160%);
    --glass-blur-soft: blur(14px) saturate(140%);
    --glass-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  
  .font-display { font-family: var(--font-display); }
  .maintenance-page {
    min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;
    padding: 28px 20px;
    background: radial-gradient(circle at 15% 15%, rgba(192,138,46,.13), transparent 30%), radial-gradient(circle at 85% 85%, rgba(43,110,78,.12), transparent 32%), var(--bg);
    color: var(--ink); font-family: 'Montserrat', sans-serif;
  }
  .maintenance-card { width: min(620px, 100%); padding: clamp(28px, 6vw, 54px); text-align: center;
    border: 1px solid var(--glass-border); border-radius: 28px; background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow); }
  .maintenance-icon { width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 22px; display:flex; align-items:center; justify-content:center;
    background: var(--green); color: var(--surface); box-shadow: 0 12px 28px rgba(43,110,78,.20); }
  .maintenance-brand { font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; }
  .maintenance-title { margin:0; font-size:clamp(28px,6vw,46px); line-height:1.05; font-weight:900; letter-spacing:-.035em; }
  .maintenance-text { margin:16px auto 0; max-width:500px; color:var(--ink-soft); font-size:15px; line-height:1.65; }
  
  @keyframes marquee { 
    from { transform: translateX(0); } 
    to { transform: translateX(-50%); } 
  }
  
  .marquee-track { animation: marquee 22s linear infinite; }
  .marquee-track:hover { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
  
  /* Product cards: square photography + layered gold price stamp + floating order button */
  .stamp {
    --stamp-size: 70px;
    width: var(--stamp-size);
    height: var(--stamp-size);
    top: -18px !important;
    z-index: 20;
    transform: rotate(-7deg);
    transition: transform 0.25s ease;
    overflow: visible;
    background: transparent !important;
    color: #fff !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 10px rgba(34,29,22,0.28));
  }
  .stamp::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #FF9F1A;
    clip-path: polygon(50.00% 0.00%, 58.00% 9.79%, 69.13% 3.81%, 72.78% 15.91%, 85.36% 14.64%, 84.09% 27.22%, 96.19% 30.87%, 90.21% 42.00%, 100.00% 50.00%, 90.21% 58.00%, 96.19% 69.13%, 84.09% 72.78%, 85.36% 85.36%, 72.78% 84.09%, 69.13% 96.19%, 58.00% 90.21%, 50.00% 100.00%, 42.00% 90.21%, 30.87% 96.19%, 27.22% 84.09%, 14.64% 85.36%, 15.91% 72.78%, 3.81% 69.13%, 9.79% 58.00%, 0.00% 50.00%, 9.79% 42.00%, 3.81% 30.87%, 15.91% 27.22%, 14.64% 14.64%, 27.22% 15.91%, 30.87% 3.81%, 42.00% 9.79%);
  }
  .stamp.is-sale::before { background: #C0392B; }
  .stamp-price {
    font-family: 'Archivo Black', sans-serif !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 0.85 !important;
    letter-spacing: -0.04em;
    color: #fff !important;
    transform: scaleY(1.35);
    -webkit-text-stroke: 1.8px #0a0a0a;
    paint-order: stroke fill;
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }
  .stamp-currency {
    font-family: 'Archivo Black', sans-serif !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    letter-spacing: 0.05em;
    margin-top: 2px;
    color: #fff !important;
    transform: scaleY(1.2);
    -webkit-text-stroke: 1.2px #0a0a0a;
    paint-order: stroke fill;
    position: relative;
    z-index: 1;
  }
  .rating-undo-btn {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--ink-soft);
    box-shadow: 0 4px 12px rgba(0,0,0,.10);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, color .16s ease;
  }
  .rating-undo-btn:hover {
    transform: rotate(-12deg) scale(1.06);
    color: var(--ink);
    background: var(--surface);
  }
  .rating-undo-btn:active { transform: scale(.92); }
  .drawer-social-links { margin-top: 0 !important; }
  .drawer-follow-us .drawer-social-links > div:first-child { text-align: inherit !important; }
  .main-social-links, .product-social-links { margin-top: 0 !important; }
  .follow-us-main { scroll-margin-top: 80px; }
  .product-card:hover .stamp { transform: rotate(-3deg) scale(1.05); }
  .product-card {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    overflow: visible !important;
    margin-bottom: 14px;
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur-soft) !important;
    -webkit-backdrop-filter: var(--glass-blur-soft) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow);
    isolation: isolate;
  }
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -10px rgba(34,29,22,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
    border-color: rgba(192,138,46,0.45) !important;
  }
  .dark-theme .product-card:hover {
    box-shadow: 0 16px 36px -10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  }
  .product-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(239,230,211,0.55) !important;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
  }
  .dark-theme .product-card-image {
    background: rgba(24,22,20,0.55) !important;
  }
  .product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .product-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 28px 46px 12px 12px !important;
    background: linear-gradient(to top, rgba(8,6,5,0.78) 0%, rgba(8,6,5,0.22) 75%, transparent 100%);
    border-radius: 0 0 16px 16px;
    color: #fff;
    pointer-events: none;
    text-align: left;
  }
  [dir="rtl"] .product-card-body {
    text-align: right;
    padding: 28px 12px 12px 46px !important;
  }
  .dark-theme .product-card-body {
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 75%, transparent 100%);
  }
  /* Match product-detail order: category → name → price row */
  .product-card-body .product-card-cat {
    color: rgba(255,255,255,0.8) !important;
    font-size: 9px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 4px 0 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  }
  .product-card-body .product-card-name {
    color: #fff !important;
    font-family: var(--font-display), 'Montserrat', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.02em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 5px rgba(0,0,0,0.45);
    -webkit-text-stroke: 0;
  }
  .product-card-body .product-card-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
  }
  .product-card-body .product-card-old-price,
  .product-card-old-price {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    max-width: none !important;
    z-index: auto;
    color: rgba(255,255,255,0.75) !important;
    font-family: var(--font-display), 'Montserrat', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.2;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: rgba(255,255,255,0.85);
    margin: 0 !important;
    letter-spacing: 0;
    -webkit-text-stroke: 0 !important;
    paint-order: normal;
    text-shadow: 0 1px 3px rgba(0,0,0,0.35);
    pointer-events: none;
    white-space: nowrap;
    text-align: inherit;
  }
  @media (min-width: 768px) {
    .product-card-body {
      padding: 32px 50px 14px 14px !important;
    }
    [dir="rtl"] .product-card-body {
      padding: 32px 14px 14px 50px !important;
    }
    .product-card-body .product-card-name {
      font-size: 1.1rem !important;
    }
    .product-card-body .product-card-cat {
      font-size: 10px !important;
    }
    .product-card-body .product-card-old-price,
    .product-card-old-price {
      font-size: 0.88rem !important;
    }
  }
  /* Cart: plain icon (no circular background), anchored bottom-right of the card,
     clear of the name/category/price stack which lives bottom-left. */
  .product-card-order {
    position: absolute !important;
    left: auto !important;
    right: 10px !important;
    bottom: 10px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    z-index: 22;
    transition: transform .18s ease, opacity .18s ease;
  }
  [dir="rtl"] .product-card-order {
    right: auto !important;
    left: 10px !important;
  }
  .product-card-order:hover { transform: translateY(-1px) scale(1.05); }
  .product-card-order:active { transform: scale(.94); }
  .product-card-remove {
    position: absolute !important;
    right: 50px !important;
    bottom: 10px !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(180,55,43,.82) !important;
    z-index: 23 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: transform .15s ease, filter .15s ease;
  }
  .product-card-remove:hover { transform: scale(1.06); filter: brightness(1.08); }
  .product-card-remove:active { transform: scale(.92); }

  /* Cart: sits fully inside the card's bottom-right corner, transparent bg */
  .mini-cart-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    overflow: visible;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
  }
  .mini-cart-btn:hover { transform: translateY(-1px) scale(1.05); }
  .mini-cart-btn:active { transform: scale(.94); }
  .mini-cart-icon {
    position: relative;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55)) drop-shadow(0 0 5px rgba(0,0,0,0.35));
  }
  .mini-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    border: 2px solid var(--surface);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 2;
  }
  [dir="rtl"] .mini-cart-btn { right: auto !important; left: 10px !important; }
  [dir="rtl"] .mini-cart-badge { right: auto; left: -6px; }
  .cart-wheel { transform-box: fill-box; transform-origin: center; }
  .mini-cart-icon.spin .cart-wheel { animation: cartWheelSpin .26s cubic-bezier(.22,1,.36,1); }
  @keyframes cartWheelSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mini-cart-icon.spin .cart-wheel { animation: none !important; }
  }

  .drawer { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.22s ease; z-index: 101; }
  .add-btn { transition: transform 0.1s ease, background 0.1s ease; }
  .add-btn:active { transform: scale(0.94); }
  
  .fade-in { animation: fadeIn 0.12s ease-out both; }
  @keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }
  
  input:focus, textarea:focus, select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(43,110,78,0.15); }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
  
  .icon { display: inline-flex; align-items: center; justify-content: center; }
  .icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  
  .range-wrap { position: relative; height: 32px; margin: 8px 0 4px; width: 100%; }
  .range-track { position: absolute; top: 50%; left: 0; right: 0; height: 5px; background: var(--line); border-radius: 3px; transform: translateY(-50%); }
  .range-fill { position: absolute; top: 50%; height: 5px; background: var(--green); border-radius: 3px; transform: translateY(-50%); pointer-events: none; }
  .range-input { position: absolute; top: 0; left: 0; width: 100%; height: 32px; margin: 0; pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; }
  .range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
  .range-input::-moz-range-thumb { pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--green); border: 2px solid var(--surface); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
  .range-input::-webkit-slider-runnable-track { background: transparent; }
  .range-input::-moz-range-track { background: transparent; }

  /* Responsive template safeguards */
  .product-description-table { width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border:1px solid var(--line); }
  .product-description-table th,.product-description-table td { padding:10px 12px; border:1px solid var(--line); text-align:left; vertical-align:top; }
  .product-description-table th { width:38%; background:var(--bg); font-weight:700; }
  [dir="rtl"] .product-description-table th,[dir="rtl"] .product-description-table td { text-align:right; }
  .shop-header-inner { min-width: 0; }
  .shop-brand { min-width: 0; flex: 1 1 auto; white-space: nowrap; font-size: clamp(1rem, 2.8vw, 1.5rem); letter-spacing: -0.02em; }
  .header-actions { min-width: 0; flex-shrink: 0; display: flex; align-items: center; }
  .qty-control { color: var(--ink) !important; -webkit-tap-highlight-color: transparent; }
  .qty-control svg { color: var(--ink) !important; stroke: currentColor !important; }
  .header-lang-btn { border-radius: 999px !important; }
  .quick-add-layer { z-index: 620 !important; }
  .quick-add-confirm-layer { z-index: 630 !important; }
  .variant-line { border: 1px solid var(--line); background: var(--bg); border-radius: 14px; padding: 10px; }
  .variant-qty-btn { color: var(--ink) !important; background: var(--surface) !important; border: 1px solid var(--line) !important; }
  .variant-qty-btn svg { color: var(--ink) !important; stroke: currentColor !important; }
  .quick-add-modal { max-height: calc(100dvh - 24px); }
  @media (max-width: 640px) {
    .shop-header-inner { padding-left: 10px !important; padding-right: 10px !important; }
    .shop-brand { max-width: none; font-size: clamp(0.92rem, 5vw, 1.2rem) !important; }
    .shop-header-inner { gap: 6px !important; }
    .shop-brand { letter-spacing: -0.035em; }
    .header-actions { gap: 5px !important; }
    .header-lang-btn { min-width: 68px; padding-left: 10px !important; padding-right: 10px !important; }
    .header-cart-btn { min-width: 94px !important; padding-left: 10px !important; padding-right: 10px !important; }
    .quick-add-modal { max-height: calc(100dvh - 20px); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  }
  @media (min-width: 641px) {
    .header-lang-btn { min-width: 78px; justify-content: center; }
    .header-cart-btn { min-width: 118px !important; justify-content: center; }
  }

  /* Floating sticky filter toolbar (sits under main header) */
  .shop-toolbar {
    position: relative;
    z-index: 40;
    background: transparent;
    border-bottom: 0;
    transition: box-shadow .28s ease, background .28s ease;
  }
  .shop-toolbar { position: relative; z-index: 90; background: transparent; border-bottom: 0; }
  .shop-toolbar.is-floating {
    position: sticky;
    top: var(--shop-header-h, 58px);
    width: 100%;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    transform: none !important;
    animation: none !important;
    isolation: isolate;
    z-index: 90;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Real viewport-level blur layer. It is a sibling of the toolbar rather than
     a child/ancestor, so mobile browsers cannot turn it into a containing block
     for the fixed category/filter popups. */
  .shop-toolbar-blur-layer {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--toolbar-height, 118px);
    z-index: 85;
    pointer-events: none;
    background: rgba(251,247,238,0.22);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  .dark-theme .shop-toolbar-blur-layer { background: rgba(28,25,22,0.24); }
  .shop-toolbar.is-floating .shop-toolbar-inner { position: relative; z-index: 1; }
  .dark-theme .shop-toolbar.is-floating {
    background: rgba(28,25,22,0.16);
  }
  .shop-toolbar-inner {
    transition: none !important;
    transform: none !important;
    transform-origin: top center;
    background: transparent;
  }
  .shop-toolbar-controls {
    justify-content: center !important;
  }
  .shop-toolbar-search {
    transition: none !important;
    transform: none !important;
    transform-origin: center top;
  }
  .shop-toolbar.is-floating.is-scrolled .shop-toolbar-search,
  .shop-toolbar.is-floating.is-scrolled .shop-toolbar-search input,
  .shop-toolbar.is-floating.is-scrolled .shop-toolbar-controls button {
    transform: none !important;
    margin-bottom: 0;
    box-shadow: none;
  }
  /* Stable toolbar popups: no animation, no stale off-screen state, and always below
     the cart/drawer overlays while remaining above the page/header. */
  .shop-toolbar-popup {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    inset-inline-start: 50% !important;
    inset-inline-end: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: min(calc(100vw - 32px), 420px) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: min(calc(100svh - 32px), 680px) !important;
    overflow-y: auto !important;
    transform: translate(-50%, -50%) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 90 !important;
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 20px !important;
    transition: none !important;
    animation: none !important;
  }
  .shop-toolbar-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
    background: rgba(34,29,22,0.22);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  @media (max-width: 640px) {
    .shop-toolbar-popup {
      width: min(calc(100vw - 24px), 420px) !important;
      max-width: calc(100vw - 24px) !important;
      max-height: calc(100svh - 24px) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .shop-toolbar, .shop-toolbar-inner, .shop-toolbar-search,
    .shop-toolbar.is-floating.is-scrolled .shop-toolbar-controls button {
      transition: none !important;
      animation: none !important;
    }
  }

  /* Mobile performance: avoid per-card GPU blur/animation on low-power devices. */
  @media (max-width: 767px) {
    .product-card {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: var(--surface) !important;
      transition: none !important;
    }
    .product-card:hover { transform: none !important; box-shadow: var(--glass-shadow); }
    .product-card-image {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .product-card.fade-in { animation: none !important; }
  }
  .shop-toolbar-spacer { display: none; }
  .shop-toolbar-spacer.active { display: block; background: transparent; }

  /* Image lightbox */
  .img-lightbox {
    position: fixed; inset: 0; z-index: 800;
    display: flex; align-items: center; justify-content: center;
    background: rgba(20,16,12,0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: lightboxIn 0.28s cubic-bezier(0.22,1,0.36,1) both;
    touch-action: none;
  }
  .img-lightbox.closing { animation: lightboxOut 0.22s ease forwards; }
  @keyframes lightboxIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes lightboxOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  .img-lightbox-viewport {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    overflow: hidden; touch-action: none;
  }
  .img-lightbox-img {
    max-width: min(94vw, 960px);
    max-height: 88dvh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.45);
    animation: lightboxImgIn 0.22s cubic-bezier(0.22,1,0.36,1) both;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    will-change: transform;
    cursor: grab;
  }
  .img-lightbox-img.is-zoomed { cursor: grab; }
  .img-lightbox-img.is-dragging { cursor: grabbing; animation: none !important; }
  .img-lightbox-viewport { cursor: default; }
  @keyframes lightboxImgIn {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  .img-lightbox-close {
    position: absolute; top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 42px; height: 42px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(251,247,238,0.92); color: #221D16;
    border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: transform 0.15s ease;
  }
  .img-lightbox-close:active { transform: scale(0.94); }
  .img-clickable { cursor: default; }
  .img-clickable:active { cursor: grab; }
  .img-clickable.is-pressing { cursor: grab !important; }
  .pd-gallery img, .pd-gallery .img-clickable {
    -webkit-user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    pointer-events: auto;
  }
  .pd-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    z-index: 40 !important;
    pointer-events: auto !important;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
  }
  .pd-gallery-nav.prev { left: 8px; }
  .pd-gallery-nav.next { right: 8px; }
  .pd-gallery-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 40; pointer-events: auto; }

  @media (min-width: 768px) {
    .pd-gallery { position: relative; }
    .pd-gallery-col { position: relative !important; top: auto !important; align-self: start; }
  }

  /* Hot Now showcase — narrower shell, title partly outside, larger cards */
  .hot-now {
    position: relative;
    overflow: visible;
    width: min(100%, 720px);
    margin: 22px auto 10px;
    padding: 28px 10px 8px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background:
      radial-gradient(ellipse 80% 55% at 50% 0%, rgba(192,138,46,.12), transparent 55%),
      linear-gradient(165deg, var(--surface), var(--bg) 48%, var(--surface));
    box-shadow: 0 16px 40px rgba(34,29,22,.10), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .dark-theme .hot-now {
    background:
      radial-gradient(ellipse 80% 55% at 50% 0%, rgba(214,157,58,.14), transparent 55%),
      linear-gradient(165deg, var(--surface), var(--bg) 50%, var(--surface));
    box-shadow: 0 16px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  }
  .hot-now::before {
    content: '';
    position: absolute;
    inset: -30% -12%;
    background: conic-gradient(from 180deg, transparent, rgba(192,138,46,.05), transparent, rgba(166,65,46,.04), transparent);
    animation: hotAura 16s linear infinite;
    pointer-events: none;
    z-index: 0;
  }
  @keyframes hotAura { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

  /* Section title sits on the top edge, half outside the rectangle */
  .hot-now-header {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -55%);
    z-index: 25;
    pointer-events: none;
  }
  .hot-now-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--brick);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 0 4px rgba(166,65,46,.15), 0 10px 24px rgba(166,65,46,.32);
    animation: badgeGlow 2.4s ease-in-out infinite;
  }
  @keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(166,65,46,.15), 0 10px 24px rgba(166,65,46,.32); }
    50% { box-shadow: 0 0 0 7px rgba(166,65,46,.09), 0 12px 28px rgba(166,65,46,.42); }
  }
  .hot-now-badge-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    animation: hotPulse 1.4s ease-in-out infinite;
  }
  @keyframes hotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.7); }
  }

  .hot-now-type-title,
  .hot-now-auto-heading {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -52%);
    z-index: 25;
    width: max-content;
    max-width: min(92%, 520px);
    margin: 0;
    padding: 6px 18px 8px;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 3.2vw, 1.85rem);
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -.035em;
    text-align: center;
    text-wrap: balance;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(34,29,22,.12);
    pointer-events: none;
  }
  .hot-now-type-title::after,
  .hot-now-auto-heading::after {
    display: none;
  }

  .hot-now-stage {
    position: relative;
    z-index: 1;
    height: 400px;
    min-height: 0;
    margin: 6px 0 0;
    perspective: 1400px;
    overflow: visible;
    border-radius: 18px;
  }
  .hot-now-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(92%, 380px);
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(220,208,180,.55);
    background: var(--bg);
    box-shadow: 0 22px 50px rgba(34,29,22,.2);
    transform: translate(-50%, -50%) scale(.68) translateX(118%);
    opacity: 0;
    transition: transform .65s cubic-bezier(.22,1,.36,1), opacity .4s ease, box-shadow .4s ease;
    cursor: pointer;
    will-change: transform, opacity;
  }
  .hot-now-card.is-active {
    transform: translate(-50%, -50%) scale(1) translateX(0);
    opacity: 1;
    z-index: 5;
    box-shadow: 0 0 0 2px rgba(192,138,46,.4), 0 0 36px rgba(192,138,46,.24), 0 28px 60px rgba(34,29,22,.28);
  }
  .hot-now-card.is-prev { transform: translate(-50%, -50%) scale(.78) translateX(-108%); opacity: .4; z-index: 2; }
  .hot-now-card.is-next { transform: translate(-50%, -50%) scale(.78) translateX(108%); opacity: .4; z-index: 2; }
  .hot-now-card.is-exit-left { transform: translate(-50%, -50%) scale(.68) translateX(-150%); opacity: 0; z-index: 1; }
  .hot-now-card.is-exit-right { transform: translate(-50%, -50%) scale(.68) translateX(150%); opacity: 0; z-index: 1; }
  .hot-now-card.is-far-left,
  .hot-now-card.is-far-right { transform: translate(-50%, -50%) scale(.62) translateX(190%); opacity: 0; z-index: 0; pointer-events: none; }
  .hot-now-card.is-far-left { transform: translate(-50%, -50%) scale(.62) translateX(-190%); }
  .hot-now-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hot-now-card-fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--green-dark); background: var(--bg);
  }
  .hot-now-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 48px 14px 14px;
    background: linear-gradient(to top, rgba(16,12,8,.92), rgba(16,12,8,.42) 55%, transparent);
    color: #FBF7EE;
  }
  .hot-now-meta-name {
    font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1.2;
    margin: 0 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hot-now-meta-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-family: var(--font-price); }
  .hot-now-meta-price strong { font-size: 1.28rem; font-weight: 900; color: #F6D27A; transform: scaleY(1.12); display: inline-block; }
  .hot-now-meta-price s { font-size: .9rem; opacity: .7; }
  .hot-now-dots {
    position: relative; z-index: 2; display: flex; justify-content: center; gap: 7px;
    padding: 10px 16px 14px; overflow-x: auto; scrollbar-width: none;
  }
  .hot-now-dots::-webkit-scrollbar { display: none; }
  .hot-now-dot {
    flex: 0 0 auto; width: 7px; height: 7px; border: 0; border-radius: 999px; padding: 0;
    cursor: pointer; background: var(--line); transition: width .2s ease, background .2s ease;
  }
  .hot-now-dot.is-active { width: 22px; background: var(--green); }
  .hot-now-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(34,29,22,.14); z-index: 30; cursor: pointer;
  }
  .hot-now-nav:active { transform: translateY(-50%) scale(.94); }
  .hot-now-nav.prev { left: 6px; }
  .hot-now-nav.next { right: 6px; }

  @media (min-width: 768px) {
    .hot-now { width: min(100%, 780px); padding: 30px 14px 10px; }
    .hot-now-stage { height: 440px; }
    .hot-now-card { width: min(58%, 420px); border-radius: 22px; }
    .hot-now-card.is-prev { transform: translate(-50%, -50%) scale(.76) translateX(-105%); }
    .hot-now-card.is-next { transform: translate(-50%, -50%) scale(.76) translateX(105%); }
  }
  @media (max-width: 640px) {
    .hot-now { width: min(100%, 100%); margin-top: 20px; padding: 26px 6px 6px; border-radius: 18px; }
    .hot-now-header { transform: translate(-50%, -52%); }
    .hot-now-badge { padding: 8px 15px; font-size: 11px; }
    .hot-now-type-title,
    .hot-now-auto-heading {
      max-width: min(94%, 340px);
      padding: 5px 14px 7px;
      font-size: clamp(1rem, 5vw, 1.25rem);
      transform: translate(-50%, -50%);
    }
    .hot-now-stage { height: min(92vw, 380px); min-height: 300px; }
    .hot-now-card { width: min(88%, 340px); border-radius: 18px; }
    .hot-now-nav { width: 34px; height: 34px; }
    .hot-now-nav.prev { left: 4px; }
    .hot-now-nav.next { right: 4px; }
    .hot-now-meta { padding: 40px 12px 11px; }
    .hot-now-meta-name { font-size: 1.05rem; }
    .hot-now-meta-price strong { font-size: 1.15rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hot-now-card, .hot-now-badge, .hot-now-badge-dot, .hot-now::before {
      animation: none !important; transition: none !important;
    }
  }

  /* Showcase banner — admin-configured image/title/description block that
     can appear above (or instead of) the Hot Now carousel. */
  .showcase-block {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: var(--surface);
    min-height: min(62vw, 400px);
    display: flex;
    margin-bottom: 18px;
    box-shadow: 0 20px 60px rgba(34,29,22,0.12);
  }
  .showcase-block-img {
    position: absolute; inset: -18%;
    width: 136%; height: 136%;
    background-size: cover; background-repeat: no-repeat;
    background-position: center; transform-origin: center; display: block;
  }
  .showcase-block-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,8,6,0.6) 0%, rgba(10,8,6,0.15) 55%, rgba(10,8,6,0.05) 100%);
  }
  .showcase-block-content {
    position: relative; z-index: 2; flex: 1; min-height: 100%; display: block;
  }
  .showcase-block-title {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-weight: 800;
    line-height: 1.12;
    text-shadow: 0 2px 18px rgba(0,0,0,0.25);
  }
  .showcase-block-desc {
    margin: 0;
    line-height: 1.5;
    max-width: 620px;
    text-shadow: 0 1px 10px rgba(0,0,0,0.2);
  }
  @media (max-width: 640px) {
    .showcase-block { min-height: min(80vw, 340px); border-radius: 22px; }
  }


  /* Desktop edge controls: persistent menu/cart toggles, centered on each side. */
  .desktop-edge-toggles { display:none; }
  @media (min-width: 768px) {
    .desktop-edge-toggles {
      display:flex;
      position:fixed;
      inset:0;
      z-index:1200;
      pointer-events:none;
      align-items:center;
      justify-content:space-between;
      padding:0 16px;
    }
    .desktop-edge-toggle {
      pointer-events:auto;
      width:58px;
      height:58px;
      border:1px solid var(--glass-border);
      border-radius:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      color:var(--ink);
      background:var(--glass-bg-strong);
      backdrop-filter:var(--glass-blur);
      -webkit-backdrop-filter:var(--glass-blur);
      box-shadow:var(--glass-shadow), 0 8px 26px rgba(34,29,22,.14);
      transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
      isolation:isolate;
    }
    .desktop-edge-toggle::before {
      content:"";
      position:absolute;
      inset:1px;
      border-radius:19px;
      background:linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%);
      pointer-events:none;
      z-index:-1;
    }
    .desktop-edge-toggle:hover {
      transform:scale(1.06);
      box-shadow:var(--glass-shadow), 0 12px 34px rgba(34,29,22,.18);
      border-color:rgba(255,255,255,.5);
    }
    .desktop-edge-toggle:active { transform:scale(.94); }
    .desktop-edge-toggle.is-active {
      background:var(--green);
      color:var(--surface);
      border-color:rgba(255,255,255,.3);
      box-shadow:var(--glass-shadow), 0 10px 30px rgba(43,110,78,.24);
    }
    .desktop-edge-toggle .icon { width:23px; height:23px; }
    .desktop-edge-toggle-badge {
      position:absolute;
      top:-7px;
      right:-7px;
      min-width:21px;
      height:21px;
      padding:0 5px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:10px;
      line-height:1;
      font-weight:900;
      color:#fff;
      background:var(--brick);
      border:2px solid var(--surface);
      box-shadow:0 4px 12px rgba(0,0,0,.22);
    }
    .dark-theme .desktop-edge-toggle { box-shadow:var(--glass-shadow), 0 8px 26px rgba(0,0,0,.24); }
    .dark-theme .desktop-edge-toggle::before { background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,0) 55%); }
    .dark-theme .desktop-edge-toggle-badge { border-color:var(--bg); }
    .shop-header-menu-btn, .shop-header .header-cart-btn { display:none !important; }
  }
  @media (max-width: 767px) {
    .desktop-edge-toggles { display:none !important; }
  }
  @media (min-width: 768px) {
    /* Desktop drawers must remain usable above the product detail sheet. */
    .drawer-root { z-index: 1250 !important; }
    .drawer-panel { z-index: 1251 !important; }
    .cart-overlay-layer { z-index: 1260 !important; }
    .cart-drawer-panel { z-index: 1261 !important; }
  }

  /* Side drawer: fixed viewport panel, no page drag */
  .drawer-root {
    position: fixed; inset: 0; z-index: 100;
  }
  .drawer-panel {
    position: fixed;
    top: 0; bottom: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: min(20rem, 86vw);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease;
    z-index: 101;
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border);
  }
  .dark-theme .drawer-panel {
    background: var(--glass-bg-strong) !important;
    border-right-color: var(--glass-border);
  }
  .drawer-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Cart drawer glass */
  .cart-drawer-panel {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
  .dark-theme .cart-drawer-panel {
    background: var(--glass-bg-strong) !important;
    border-left-color: var(--glass-border);
  }

  /* Desktop cart item layout */
  .cart-item-desktop { display:none; }
  @media (min-width: 768px) {
    .cart-drawer-panel { width: min(30rem, 42vw) !important; }
    .cart-item-mobile { display:none !important; }
    .cart-item-desktop { display:grid; grid-template-columns:108px minmax(0,1fr); grid-template-rows:auto auto; column-gap:14px; row-gap:8px; align-items:start; }
    .cart-item-image { grid-column:1; grid-row:1; width:108px; height:108px; aspect-ratio:1/1; object-fit:cover; border-radius:14px; display:block; background:var(--bg); }
    .cart-item-desktop > .min-w-0 { grid-column:2; grid-row:1; min-width:0; }
    .cart-item-description { grid-column:1; grid-row:2; margin-top:0; font-size:11px; line-height:1.45; color:var(--ink-soft); max-height:52px; overflow:hidden; }
    .cart-item-description table { width:100%; font-size:11px; border-collapse:collapse; }
    .cart-item-description img { max-width:100%; height:auto; border-radius:8px; }
  }

  /* Related products use the exact same product-card design as the main shop grid */
  .related-products-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
  .related-products-grid .product-card { min-width:0; }
  .related-products-grid .product-card-image { aspect-ratio:1/1; }
  @media(max-width:767px){ .related-products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }

  /* Product detail shell — fully opaque */
  .product-detail-shell {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overscroll-behavior: contain;
  }
  /* Use the small viewport on mobile so browser chrome keeps its reserved space. */
  @media (max-width: 767px) {
    .product-detail-shell {
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: none !important;
    }
  }
  .dark-theme .product-detail-shell {
    background: var(--bg) !important;
  }
  .product-detail-header {
    background: var(--bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Desktop product detail: image left, details right, description below */
  .pd-layout { display: block; }
  .pd-gallery-col { width: 100%; }
  .pd-info-col { width: 100%; }
  .pd-below { width: 100%; }
  .pd-gallery {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--bg);
    color: var(--green-dark);
  }
  @media (min-width: 768px) {
    .pd-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      grid-template-rows: auto auto;
      column-gap: 28px;
      row-gap: 8px;
      max-width: 1120px;
      margin: 0 auto;
      padding: 20px 28px 36px;
      align-items: start;
    }
    .pd-gallery-col { grid-column: 1; grid-row: 1; position: relative !important; top: auto; align-self: start; height: max-content; }
    .pd-info-col { grid-column: 2; grid-row: 1; padding-top: 4px; min-width: 0; }
    .pd-below {
      grid-column: 1 / -1; grid-row: 2; max-width: none;
      padding: 8px 0 0; border-top: 1px solid var(--line); margin-top: 12px;
    }
    .pd-gallery {
      aspect-ratio: 1 / 1; max-height: min(72vh, 560px);
      border-radius: 20px; border: 1px solid var(--line);
    }
    .pd-thumbs { padding-left: 0 !important; padding-right: 0 !important; margin-top: 10px; }
    .pd-info-col .pd-title { font-size: 1.75rem !important; line-height: 1.2; }
    .pd-title-row { align-items: flex-start; }
    .pd-title-meta { display: flex; flex-direction: column; gap: 6px; }
    .pd-title-meta .pd-price { margin-top: 2px; }
    .pd-info-description { min-height: 0; }
    .pd-actions {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      width: auto;
      max-width: 168px;
    }
    .pd-info-col .pd-price { font-size: 1.85rem !important; }
    .pd-header-hint { display: none !important; }
  }

  /* Product action buttons — shared design */
  .pd-actions .add-btn {
    min-width: 0 !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 16px rgba(43,110,78,0.22);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
  }
  .pd-actions .add-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 22px rgba(43,110,78,0.32);
    filter: brightness(1.05);
  }
  .pd-actions .add-btn:active { transform: scale(0.96); }
  .pd-actions .add-btn.pd-order-btn {
    box-shadow: 0 6px 16px rgba(34,29,22,0.18);
  }
  .pd-actions .add-btn.pd-order-btn:hover {
    box-shadow: 0 10px 22px rgba(34,29,22,0.28);
  }
  .pd-gallery-comments { max-width: 100%; }
  .pd-desktop-comments { display: none; }
  @media (max-width: 767px) {
    .pd-desktop-comments { display: none !important; }
    .pd-mobile-comments { display: block !important; }
    .pd-title-row {
      flex-direction: column !important;
      gap: 12px !important;
    }
    .pd-title-meta { width: 100%; }

    /* Mobile: keep Add to cart + Order now on the same row. */
    .pd-actions {
      display: grid !important;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) !important;
      flex-direction: row !important;
      align-items: stretch !important;
      width: 100% !important;
      max-width: none !important;
      gap: 8px !important;
      margin-top: 2px;
    }
    .pd-actions .add-btn {
      display: flex !important;
      flex: none !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      padding: 11px 10px !important;
      font-size: 13px !important;
      white-space: nowrap !important;
    }
    .pd-actions .pd-order-btn {
      width: 100% !important;
    }
  }

  @media (min-width: 1100px) {
    .pd-layout {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      column-gap: 40px; padding: 24px 32px 48px;
    }
    .pd-gallery { max-height: min(76vh, 620px); }
  }
  [dir="rtl"] .pd-layout { direction: rtl; }

  /* Shared glass surfaces */
  .glass-panel {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
  .glass-chip {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: var(--glass-blur-soft);
    border: 1px solid var(--glass-border);
  }
  .shop-header-glass {
    background: var(--header-bg) !important;
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
  }
  .shop-toolbar-blur-layer {
    background: rgba(251,247,238,0.35) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  }
  .dark-theme .shop-toolbar-blur-layer {
    background: rgba(28,25,22,0.38) !important;
  }
  .quick-add-modal, .checkout-glass, .confirm-glass {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
  .category-chip-icon {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
  .hot-now, .showcase-block {
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
  }
  footer {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: var(--glass-blur-soft);
  }
  body.menu-locked {
    overflow: hidden !important;
    touch-action: none;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }


  /* Automatic top modules reuse the carousel, but Hot Now keeps its own badge-only identity. */
  /* auto-heading position controlled in main .hot-now block */
  .hot-now-auto-heading{/* kept by main rules */}


  .hot-now.auto-top-module .hot-now-type-title{margin-top:0}

  /* Infinite Hot Now-style category carousel */
  .category-rail { width:min(calc(100% - 24px),1152px); margin:18px auto 10px; padding:12px 0 8px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .category-rail-heading { display:flex; align-items:baseline; justify-content:center; padding:0 4px 8px; }
  .category-rail-title { font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
  .category-rail-stage { position:relative; width:100%; max-width:430px; height:92px; margin:0 auto; overflow:hidden; }
  .category-rail-track { position:relative; width:100%; height:100%; touch-action:pan-y; cursor:grab; }
  .category-rail-track:active { cursor:grabbing; }
  .category-rail-stage { overscroll-behavior: contain; }
  .category-rail-card { position:absolute; top:0; left:50%; width:68px; height:82px; display:flex; flex-direction:column; align-items:center; gap:7px; background:transparent; border:0; padding:0; cursor:pointer; transform:translateX(-50%); opacity:0; transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .32s ease; will-change:transform,opacity; }
  .category-rail-card.is-center { transform:translateX(-50%) scale(1); opacity:1; z-index:4; }
  .category-rail-card.is-left { transform:translateX(calc(-50% - 78px)); opacity:.72; z-index:3; }
  .category-rail-card.is-left2 { transform:translateX(calc(-50% - 156px)); opacity:0; z-index:2; }
  .category-rail-card.is-right { transform:translateX(calc(-50% + 78px)); opacity:.72; z-index:3; }
  .category-rail-card.is-right2 { transform:translateX(calc(-50% + 156px)); opacity:0; z-index:2; }
  .category-rail-card .category-chip-icon { width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1.5px solid var(--line); color:var(--ink-soft); box-shadow:0 3px 10px rgba(34,29,22,.08); transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease; }
  .category-rail-card.is-center .category-chip-icon { background:var(--green); border-color:var(--green); color:#FBF7EE; box-shadow:0 8px 18px rgba(43,110,78,.25); transform:scale(1.05); }
  .category-rail-card .category-chip-label { font-size:11px; font-weight:600; color:var(--ink-soft); white-space:nowrap; max-width:68px; overflow:hidden; text-overflow:ellipsis; }
  .category-rail-card.is-center .category-chip-label { color:var(--ink); font-weight:800; }
  .category-rail-nav { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(34,29,22,.14); z-index:8; cursor:pointer; transition:transform .15s ease; }
  .category-rail-nav:active { transform:translateY(-50%) scale(.94); }
  .category-rail-nav.prev { left:0; }
  .category-rail-nav.next { right:0; }
  @media (min-width:768px){ .category-rail-stage{max-width:430px;height:92px;} .category-rail-card{width:72px;} }
.dark-theme .social-brand-img{filter:invert(1)}



@media (min-width: 768px) {
  .product-card, .product-card * {
    contain: layout style;
  }
  .product-card {
    will-change: auto !important;
    transform: translateZ(0);
  }
  .product-card-image, .product-card img {
    backface-visibility: hidden;
    transform: translateZ(0);
  }
  .product-card.fade-in { animation: none !important; }
  .product-card:hover { transform: translateZ(0) !important; }
  .product-card, .product-card:hover {
    transition: box-shadow .14s ease, border-color .14s ease !important;
  }
  .hot-now-track, .categories-track, .product-grid {
    contain: layout paint;
  }
}



/* Stable three-button toolbar: Search / Filter / Categories */
.shop-toolbar {
  position:relative !important;
  z-index:70 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}
.shop-toolbar.is-floating {
  position:fixed !important;
  top:var(--shop-header-h,58px) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  margin:0 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  box-shadow:none !important;
  background:transparent !important;
  isolation:isolate;
  z-index:70 !important;
}
.shop-toolbar-inner {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  max-width:72rem !important;
  margin-inline:auto !important;
  padding:8px 12px !important;
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  box-shadow:0 8px 24px rgba(34,29,22,.08) !important;
}
.shop-toolbar-search {
  display:block !important;
  grid-column:auto !important;
  grid-row:auto !important;
  width:100% !important;
  margin:0 !important;
  min-width:0 !important;
}
.shop-toolbar-search input {
  width:100% !important;
  height:42px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
.shop-toolbar-controls {
  display:contents !important;
}
.shop-toolbar-controls > div {
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  position:static !important;
}
.shop-toolbar-controls > div > button {
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
  margin:0 !important;
  padding:0 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  transition:none !important;
  animation:none !important;
}
.shop-toolbar-blur-layer {
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:calc(var(--shop-header-h,58px) + 62px) !important;
  z-index:65 !important;
  pointer-events:none !important;
  background:rgba(251,247,238,.92) !important;
  backdrop-filter:blur(10px) saturate(110%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(110%) !important;
}
.dark-theme .shop-toolbar-blur-layer {
  background:rgba(28,25,22,.94) !important;
}
.shop-toolbar-spacer { display:none !important; }
.shop-toolbar-spacer.active {
  display:block !important;
  background:transparent !important;
  height:calc(var(--toolbar-height,58px) + 16px) !important;
}
/* Popups: no animation; fixed to the viewport and above the toolbar only. */
.shop-toolbar-popup {
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  width:min(calc(100vw - 28px),420px) !important;
  max-width:calc(100vw - 28px) !important;
  max-height:min(calc(100svh - 32px),680px) !important;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
  opacity:1 !important;
  pointer-events:auto !important;
  overflow-y:auto !important;
  z-index:150 !important;
  transition:none !important;
  animation:none !important;
}
.shop-toolbar-overlay {
  position:fixed !important;
  inset:0 !important;
  z-index:140 !important;
  background:rgba(34,29,22,.22) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
/* Drawers must always beat the toolbar/popup stacking layers. */
.cart-overlay-layer { z-index:300 !important; }
.cart-drawer-panel { z-index:301 !important; overscroll-behavior:contain !important; }
html.cart-locked, body.cart-locked {
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
body.cart-locked {
  position:fixed !important;
  width:100% !important;
  left:0 !important;
  right:0 !important;
}
@media(max-width:640px){
  .shop-toolbar-inner { gap:6px !important; padding:7px 8px !important; border-radius:14px !important; }
  .shop-toolbar-search input,
  .shop-toolbar-controls > div > button { height:40px !important; font-size:11px !important; }
  .shop-toolbar-controls > div > button { padding:0 7px !important; }
}



/* Keep the toolbar in document flow when returning upward. Sticky gives it a
   true anchor: it can float while scrolling down, but can never travel above
   its original position when scrolling back up. */
.shop-toolbar.is-floating {
  position: sticky !important;
  top: var(--shop-header-h, 58px) !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  animation: none !important;
  z-index: 70 !important;
}
/* The toolbar's background layer follows the same header offset instead of
   covering the browser/header area. */
.shop-toolbar-blur-layer {
  top: var(--shop-header-h, 58px) !important;
  height: 70px !important;
}
@media (max-width:640px){
  .shop-toolbar.is-floating { top: var(--shop-header-h, 58px) !important; }
  .shop-toolbar-blur-layer { top: var(--shop-header-h, 58px) !important; height: 62px !important; }
}



/* Native sticky only: the toolbar remains exactly in its original document slot
   when scrolling back up and cannot float above that slot. */
.shop-toolbar {
  position: sticky !important;
  top: var(--shop-header-h, 58px) !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  z-index: 90 !important;
  isolation: isolate;
}
.shop-toolbar.is-floating {
  position: sticky !important;
  top: var(--shop-header-h, 58px) !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
}
.shop-toolbar-blur-layer, .shop-toolbar-spacer {
  display: none !important;
}
@media (max-width: 767px) {
  .shop-toolbar { top: var(--shop-header-h, 58px) !important; }
}



/* Product/detail and other full-screen overlays must always sit above the sticky toolbar. */
.product-detail-shell { z-index: 500 !important; }
.quick-add-layer, .quick-add-confirm-layer { z-index: 620 !important; }
.cart-overlay-layer { z-index: 640 !important; }
.checkout-layer { z-index: 660 !important; }
.checkout-glass { z-index: 2; }
/* Toolbar remains below every full-screen modal/side panel. */
.shop-toolbar, .shop-toolbar.is-floating { z-index: 40 !important; }
.shop-toolbar-blur-layer { z-index: 35 !important; }
.shop-toolbar-overlay { z-index: 45 !important; }
.shop-toolbar-popup { z-index: 46 !important; }



/* HOT NOW — use the same large/card-quality image treatment, never tiny thumbnails */
.hot-now .product-card-image,
.hot-now .product-card-image img,
.hot-now img{
  image-rendering:auto !important;
}
.hot-now .product-card-image img{
  object-fit:cover !important;
}

/* CATEGORY RAIL — keep circles completely below the floating toolbar/header */
.categories-rail,
.category-rail,
.categories-scroll,
.category-scroll{
  position:relative !important;
  z-index:5 !important;
  overflow:visible !important;
}
.categories-rail > *,
.category-rail > *,
.categories-scroll > *,
.category-scroll > *{
  position:relative;
  z-index:1;
}
/* Give the rail breathing room so the circles cannot be visually clipped from above */
.categories-rail,
.category-rail{
  padding-top:6px !important;
  padding-bottom:8px !important;
}

/* Soft edge fade while horizontally moving/scrolling */
.categories-rail::before,
.categories-rail::after,
.category-rail::before,
.category-rail::after,
.categories-scroll::before,
.categories-scroll::after,
.category-scroll::before,
.category-scroll::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:28px;
  z-index:8;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease;
}
.categories-rail::before,
.category-rail::before,
.categories-scroll::before,
.category-scroll::before{
  left:0;
  background:linear-gradient(to right,var(--bg),transparent);
}
.categories-rail::after,
.category-rail::after,
.categories-scroll::after,
.category-scroll::after{
  right:0;
  background:linear-gradient(to left,var(--bg),transparent);
}
.categories-rail[data-scroll-left="true"]::before,
.category-rail[data-scroll-left="true"]::before,
.categories-scroll[data-scroll-left="true"]::before,
.category-scroll[data-scroll-left="true"]::before,
.categories-rail[data-scroll-right="true"]::after,
.category-rail[data-scroll-right="true"]::after,
.categories-scroll[data-scroll-right="true"]::after,
.category-scroll[data-scroll-right="true"]::after{
  opacity:1;
}

/* Never let the floating Search/Filter/Categories layer cover category circles */
.shop-toolbar{
  z-index:40 !important;
}
.categories-section,
.categories-wrap{
  position:relative;
  z-index:6 !important;
}



/* Never clip the enlarged center category circle at the top edge. */
.category-rail-stage{
  overflow:visible !important;
  padding-top:4px !important;
  box-sizing:border-box !important;
}
.category-rail-track{
  overflow:visible !important;
}
.category-rail-card{
  top:4px !important;
}
.category-rail-card .category-chip-icon{
  transform-origin:center center !important;
}
/* Keep the navigation arrows constrained to the rail rather than clipping the cards. */
.category-rail-stage .category-rail-nav{
  z-index:12 !important;
}
/* Edge fades must stay at the sides and never cover the center category. */
.category-rail::before,
.category-rail::after{
  z-index:0 !important;
}
.category-rail-stage::before,
.category-rail-stage::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:34px;
  z-index:9;
  pointer-events:none;
  opacity:0;
  transition:opacity .16s ease;
}
.category-rail-stage::before{
  left:0;
  background:linear-gradient(to right,var(--bg),transparent);
}
.category-rail-stage::after{
  right:0;
  background:linear-gradient(to left,var(--bg),transparent);
}
<style id="category-icons-light-final">
/* Category icons: never render as white glyphs in light mode. */
.category-rail-card .category-chip-icon .icon,
.category-rail-card .category-chip-icon svg {
  color: var(--ink) !important;
  stroke: currentColor !important;
  fill: none !important;
}
:root:not(.dark-theme) .category-rail-card.is-center .category-chip-icon {
  color: var(--ink) !important;
}
:root.dark-theme .category-rail-card .category-chip-icon {
  color: var(--ink) !important;
}
:root:not(.dark-theme) .category-rail-card .category-chip-icon svg,
:root:not(.dark-theme) .category-rail-card .category-chip-icon svg * {
  stroke: var(--ink) !important;
  fill: none !important;
}



/* Desktop: prioritise smooth native wheel scrolling over glass effects. */
@media (min-width: 768px) {
  html, body {
    scroll-behavior: auto !important;
  }
  .product-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surface) !important;
    transition: none !important;
    will-change: auto !important;
    transform: none !important;
  }
  .product-card:hover {
    transform: none !important;
    box-shadow: 0 8px 20px rgba(34,29,22,0.12) !important;
  }
  .product-card-image {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .product-card.fade-in,
  .fade-in.product-card {
    animation: none !important;
  }
  .shop-toolbar-blur-layer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
  }
  .shop-header-glass {
    backdrop-filter: blur(8px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  }
  .hot-now, .showcase-block {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hot-now::before {
    animation: none !important;
  }
  .hot-now-card {
    transition: transform 0.28s cubic-bezier(.22,1,.36,1), opacity 0.2s ease !important;
  }
  footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .category-rail-card {
    will-change: auto !important;
    transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .18s ease !important;
  }
}
/* Fast modal appear */
.quick-add-modal.fade-in,
.confirm-glass.fade-in,
.checkout-glass.fade-in {
  animation: fadeIn 0.1s ease-out both !important;
}



  /* Keep mobile product detail as an absolute overlay anchored at the current document
     scroll position. This avoids turning the page into a fullscreen/fixed browsing
     context that can collapse Android browser chrome. */
  @media (max-width: 767px) {
    .product-detail-shell {
      /* Product details must own the touch scroll.  The previous absolute/document
         overlay allowed swipes to escape into the shop underneath. */
      position: fixed !important;
      inset: 0 !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      overscroll-behavior: contain !important;
      -webkit-overflow-scrolling: touch !important;
      touch-action: pan-y !important;
      isolation: isolate !important;
    }

    /* Do not pin the detail header to the inner sheet on mobile. Let the browser
       manage its own toolbar normally while the customer scrolls the product. */
    .product-detail-shell .product-detail-header {
      position: relative !important;
      top: auto !important;
      z-index: 10 !important;
    }

    /* Keep the first product-detail header below the device safe area without
       consuming/painting over browser chrome. */
    .product-detail-shell .product-detail-header {
      padding-top: max(1rem, env(safe-area-inset-top)) !important;
    }

    /* Compact action buttons inside the quick-add/options modal. */
    .quick-add-modal .grid.grid-cols-2 {
      gap: 8px !important;
    }
    .quick-add-modal .grid.grid-cols-2 > button {
      min-width: 0 !important;
      width: 100% !important;
      padding: 9px 8px !important;
      min-height: 44px !important;
      border-radius: 999px !important;
      font-size: 12px !important;
      line-height: 1.2 !important;
      white-space: nowrap !important;
    }

    /* Keep the product-page buttons compact too. */
    .pd-actions {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
      gap: 8px !important;
    }
    .pd-actions .add-btn {
      min-height: 44px !important;
      padding: 9px 8px !important;
      font-size: 12px !important;
    }

    /* Do not reserve a blank description block when the product has no description. */
    .pd-info-description:empty {
      display: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
    }

    /* On desktop the review/comments section belongs under the image column,
       leaving the description on the right independent of comment height. */
    .pd-below {
      min-width: 0;
    }
  }

  @media (min-width: 768px) {
    .pd-desktop-comments {
      display: block !important;
      margin-top: 10px !important;
      padding-top: 10px !important;
    }
    .pd-mobile-comments { display: none !important; }
    .pd-below {
      grid-column: 1 / -1 !important;
      grid-row: 2 !important;
      width: 100% !important;
      max-width: none !important;
    }
  }



  html.modal-open, body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
    overscroll-behavior: none !important;
    touch-action: none !important;
  }

  /* The overlay itself must consume the gesture; only its actual content
     area is allowed to scroll. */
  .checkout-layer,
  .quick-add-layer,
  .quick-add-confirm-layer,
  .cart-overlay-layer,
  .product-detail-shell {
    overscroll-behavior: contain !important;
  }

  .checkout-layer,
  .quick-add-layer,
  .quick-add-confirm-layer,
  .cart-overlay-layer {
    touch-action: none !important;
  }

  .checkout-glass,
  .quick-add-modal,
  .quick-add-confirm-modal,
  .cart-panel {
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Final layout tuning: four product columns on desktop with clear room for the two edge menus. */
  @media (min-width: 768px) {
    main.max-w-6xl {
      width: 100% !important;
      max-width: none !important;
      padding-left: 88px !important;
      padding-right: 88px !important;
    }
    main.max-w-6xl > div.grid.grid-cols-2 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 16px !important;
    }
  }

  /* Keep the Hot Now decorative aura strictly inside its rounded box.
     The title can still sit outside because only the pseudo-element is clipped. */
  .hot-now::before {
    inset: 0 !important;
    border-radius: inherit !important;
    overflow: hidden !important;
  }