/* Extracted style block 1  */

  @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;
    background: var(--bg);
  }
  html {
    scroll-behavior: auto !important;
  }
  .product-detail-shell {
    scroll-behavior: auto !important;
  }

  #root {
    position: relative; z-index: 1;
    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);
    --accent-blue: #C08A2E; --accent-blue-soft: rgba(192,138,46,.14); --accent-blue-line: rgba(192,138,46,.42);
  }

  :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);
    --accent-blue: #d69d3a; --accent-blue-soft: rgba(214,157,58,.18); --accent-blue-line: rgba(214,157,58,.34);
  }
  

  .shop-pagination-glass button.glass-warm-action{color:var(--ink)!important;border:1px solid var(--glass-border)!important;background:var(--glass-bg-strong)!important;box-shadow:var(--glass-shadow)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
  .shop-pagination-glass button.glass-warm-action:hover:not(:disabled){background:var(--surface)!important;border-color:rgba(192,138,46,.5)!important}
  .shop-pagination-glass button.glass-warm-action.glass-warm-page-current{color:var(--bg)!important;background:var(--ink)!important;border-color:var(--ink)!important}
  .glass-warm-action:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(192,138,46,.55)!important;box-shadow:var(--glass-shadow),0 8px 22px rgba(34,29,22,.1)!important}.glass-warm-action:active:not(:disabled){transform:scale(.98)}.glass-warm-action:disabled{opacity:.4!important;cursor:not-allowed}
  .glass-warm-page-current{color:var(--bg)!important;border:1px solid var(--ink)!important;background:var(--ink)!important;box-shadow:var(--glass-shadow)!important}
  .follow-us-main .follow-us-glass-warm{background:var(--glass-bg-strong)!important;border:1px solid var(--glass-border)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;box-shadow:var(--glass-shadow)!important}
  .drawer-follow-us{background:var(--glass-bg-strong)!important;border:1px solid var(--glass-border)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;box-shadow:var(--glass-shadow)!important}
  .drawer-find-us{background:var(--glass-bg-strong)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;border-color:var(--glass-border)!important}
  .drawer-bottom-links{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch}.drawer-bottom-links>*{min-width:0}
  .drawer-find-us{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:56px;padding:12px 14px;border:1px solid var(--glass-border)!important;border-radius:16px;background:var(--glass-bg-strong)!important;color:var(--ink)!important;text-decoration:none;font-weight:700;font-size:13px;box-shadow:var(--glass-shadow)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important}.drawer-find-us .find-us-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:rgba(192,138,46,.16);color:var(--gold);flex:none}
  .dark-theme .shop-pagination-glass button.glass-warm-action,.dark-theme .drawer-find-us{color:var(--ink)!important;background:var(--glass-bg-strong)!important;border-color:var(--glass-border)!important;box-shadow:var(--glass-shadow)!important}.dark-theme .shop-pagination-glass button.glass-warm-page-current{background:var(--ink)!important;color:var(--bg)!important}.dark-theme .follow-us-main .follow-us-glass-warm,.dark-theme .drawer-follow-us{background:var(--glass-bg-strong)!important;border-color:var(--glass-border)!important;box-shadow:var(--glass-shadow)!important}
  .drawer-find-us{min-height:56px;justify-content:flex-start}
  .find-us-main{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px auto 0;width:fit-content;padding:16px 18px;border:1px solid var(--accent-blue-line);border-radius:18px;background:linear-gradient(135deg,var(--accent-blue-soft),transparent);color:var(--ink);text-decoration:none;transition:transform .25s cubic-bezier(0.34,1.56,0.64,1),border-color .18s ease,box-shadow .18s ease}
  .find-us-main:hover{transform:translateY(-2px) scale(1.06);border-color:var(--accent-blue);box-shadow:0 12px 28px rgba(192,138,46,.18)}
  .find-us-main .find-us-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--accent-blue-soft);color:var(--accent-blue);flex:none;transition:transform .25s cubic-bezier(0.34,1.56,0.64,1)}
  .find-us-main:hover .find-us-icon{transform:scale(1.12)}
  .find-us-main-copy{display:flex;flex-direction:column;gap:3px}.find-us-main-copy strong{font-size:14px}.find-us-main-copy span{font-size:12px;color:var(--ink-soft)}

  /* Soft ambient color movement stays visible on desktop and mobile. */
  body::before { content:''; position:fixed; inset:-18%; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 18% 28%,rgba(192,138,46,.13),transparent 36%),radial-gradient(ellipse at 82% 70%,rgba(43,110,78,.09),transparent 38%); background-size:140% 140%; animation:ambient-drift 26s ease-in-out infinite alternate; will-change:background-position; }
  .dark-theme body::before { background-image:radial-gradient(ellipse at 18% 28%,rgba(214,157,58,.12),transparent 36%),radial-gradient(ellipse at 82% 70%,rgba(43,110,78,.12),transparent 38%); }
  @keyframes ambient-drift { from { background-position:0% 0%; } to { background-position:100% 100%; } }
  @media (prefers-reduced-motion: reduce) { body::before { animation:none; } }

  /* Keep warm accents consistent inside the shared glass palette. */
  .shop-pagination-glass button.glass-warm-action,.glass-warm-action,.glass-warm-page-current{color:var(--ink)!important;border:1px solid var(--glass-border)!important;background:var(--glass-bg-strong)!important;box-shadow:var(--glass-shadow)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important}
  .shop-pagination-glass button.glass-warm-action:hover:not(:disabled),.glass-warm-action:hover:not(:disabled){background:var(--surface)!important;border-color:var(--accent-blue-line)!important;box-shadow:var(--glass-shadow),0 8px 22px rgba(34,29,22,.09)!important}
  .shop-pagination-glass button.glass-warm-action.glass-warm-page-current,.glass-warm-page-current{color:var(--bg)!important;background:var(--ink)!important;border-color:var(--ink)!important}
  .follow-us-main .follow-us-glass-warm,.drawer-follow-us{background:var(--glass-bg-strong)!important;border:1px solid var(--glass-border)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important;box-shadow:var(--glass-shadow)!important}
  .drawer-find-us{color:var(--ink)!important;background:var(--glass-bg-strong)!important;border-color:var(--glass-border)!important;box-shadow:var(--glass-shadow)!important;backdrop-filter:var(--glass-blur)!important;-webkit-backdrop-filter:var(--glass-blur)!important}
  .drawer-find-us .find-us-icon{background:var(--accent-blue-soft)!important;color:var(--accent-blue)!important}
  :root.dark-theme .shop-pagination-glass button.glass-warm-action,:root.dark-theme .glass-warm-action,:root.dark-theme .glass-warm-page-current{color:var(--ink)!important;background:var(--glass-bg-strong)!important;border-color:var(--glass-border)!important;box-shadow:var(--glass-shadow)!important}
  :root.dark-theme .shop-pagination-glass button.glass-warm-action.glass-warm-page-current,:root.dark-theme .glass-warm-page-current{color:var(--bg)!important;background:var(--ink)!important;border-color:var(--ink)!important}
  :root.dark-theme .follow-us-main .follow-us-glass-warm,:root.dark-theme .drawer-follow-us,:root.dark-theme .drawer-find-us{background:var(--glass-bg-strong)!important;border-color:var(--glass-border)!important;box-shadow:var(--glass-shadow)!important}
  :root.dark-theme .drawer-find-us{color:var(--ink)!important}
  .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;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
  @media (min-width: 768px) {
    .follow-us-main {
      padding-bottom: 110px !important;
    }
  }
  .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 — full viewer with zoom / pan / pinch / controls */
  .img-lightbox {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12,10,8,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: lightboxIn 0.22s ease both;
    touch-action: none;
    user-select: none;
  }
  .img-lightbox.closing { animation: lightboxOut 0.18s ease forwards; }
  @keyframes lightboxIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lightboxOut { from { opacity: 1; } to { opacity: 0; } }
  .img-lightbox-viewport {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; touch-action: none;
  }
  .img-lightbox-img {
    max-width: min(96vw, 1100px);
    max-height: 86dvh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    will-change: transform;
    cursor: grab;
    pointer-events: auto;
  }
  .img-lightbox-img.is-zoomed { cursor: grab; }
  .img-lightbox-img.is-dragging { cursor: grabbing !important; }
  .img-lightbox-toolbar {
    position: absolute;
    bottom: max(18px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(251,247,238,0.94);
    color: #221D16;
    box-shadow: 0 8px 28px rgba(0,0,0,0.28);
    z-index: 5;
  }
  .dark-theme .img-lightbox-toolbar {
    background: rgba(36,33,30,0.94);
    color: #F4EFE6;
  }
  .img-lightbox-toolbar button {
    width: 40px; height: 40px; border-radius: 999px;
    border: 0; background: transparent; color: inherit;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 18px; font-weight: 700;
    transition: background .12s ease, transform .12s ease;
  }
  .img-lightbox-toolbar button:hover { background: rgba(0,0,0,0.08); }
  .img-lightbox-toolbar button:active { transform: scale(0.92); }
  .img-lightbox-zoom-label {
    min-width: 48px; text-align: center;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .img-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 999px;
    border: 0; background: rgba(251,247,238,0.92); color: #221D16;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    z-index: 5;
  }
  .dark-theme .img-lightbox-nav { background: rgba(36,33,30,0.92); color: #F4EFE6; }
  .img-lightbox-nav.prev { left: max(10px, env(safe-area-inset-left)); }
  .img-lightbox-nav.next { right: max(10px, env(safe-area-inset-right)); }
  .img-lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
  .img-lightbox-close {
    position: absolute; top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 44px; height: 44px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(251,247,238,0.94); color: #221D16;
    border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.22);
    z-index: 6;
  }
  .dark-theme .img-lightbox-close { background: rgba(36,33,30,0.94); color: #F4EFE6; }
  .img-lightbox-close:active { transform: scale(0.94); }
  .img-lightbox-counter {
    position: absolute; top: max(16px, env(safe-area-inset-top));
    left: 50%; transform: translateX(-50%);
    padding: 6px 14px; border-radius: 999px;
    background: rgba(251,247,238,0.9); color: #221D16;
    font-size: 12px; font-weight: 700;
    z-index: 5;
  }
  .dark-theme .img-lightbox-counter { background: rgba(36,33,30,0.9); color: #F4EFE6; }
  .img-clickable { cursor: zoom-in !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 !important;
    cursor: zoom-in !important;
  }
  .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 carousel — 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%); }
  }
  /* PC: stretch the box edge-to-edge, trim its height a bit, and grow the card
     (widened rather than kept square, so it stays big without poking out of the
     shorter box). */
  @media (min-width: 1024px) {
    .hot-now { width: 100%; padding: 26px 32px 10px; }
    .hot-now-stage { height: 400px; }
    .hot-now-card { width: min(46%, 460px); aspect-ratio: 5 / 4; border-radius: 24px; }
  }
  @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;
    }
  }


  /* Persistent edge controls: fixed directly to the viewport. */
  .desktop-edge-toggles {
    position:fixed !important;
    top:50% !important;
    left:0 !important;
    right:0 !important;
    width:100vw !important;
    height:0 !important;
    transform:translateY(-50%) !important;
    z-index:1100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    pointer-events:none;
  }
  .desktop-edge-toggle {
    pointer-events:auto;
    flex:0 0 auto;
    width:58px;
    height:58px;
    border-radius:20px;
    border:1px solid var(--glass-border);
    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);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
    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:inherit;
    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; pointer-events:none; }
  .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);
    pointer-events:none;
  }
  .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); }
  @media (min-width: 768px) {
    .desktop-edge-toggles { padding-left:16px; padding-right:16px; }
    .shop-header-menu-btn, .shop-header .header-cart-btn { display:none !important; }
  }
  @media (max-width: 767px) {
    .desktop-edge-toggles {
      z-index:550 !important;
      padding-left:max(8px, env(safe-area-inset-left));
      padding-right:max(8px, env(safe-area-inset-right));
      top:50svh !important;
    }
    .desktop-edge-toggle {
      width:50px;
      height:50px;
      border-radius:17px;
      border:1.5px solid rgba(255,255,255,.78);
      background:var(--surface);
      box-shadow:0 7px 24px rgba(34,29,22,.20), 0 0 0 1px rgba(43,110,78,.12);
    }
    .desktop-edge-toggle .icon { width:21px; height:21px; }
    .desktop-edge-toggle-badge {
      top:-5px;
      right:-5px;
      min-width:20px;
      height:20px;
      font-size:9px;
    }
    .desktop-edge-toggle:hover { transform:none; }
    .desktop-edge-toggle:active { transform:scale(.92); }
    .desktop-edge-toggle.is-active {
      box-shadow:0 8px 24px rgba(43,110,78,.28), 0 0 0 2px rgba(43,110,78,.10);
    }
    .shop-header-menu-btn, .shop-header .header-cart-btn { display:none !important; }
  }
  @media (max-width: 380px) {
    .desktop-edge-toggles { padding-left:6px; padding-right:6px; }
    .desktop-edge-toggle { width:46px; height:46px; border-radius:15px; }
    .desktop-edge-toggle .icon { width:19px; height:19px; }
  }
  @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; }
  }
  @media (max-width: 767px) {
    .cart-overlay-layer { z-index:640 !important; }
    .cart-overlay-layer .cart-drawer-panel { z-index:641 !important; }
  }

  /* Side drawer: fixed viewport panel, no page drag */
  .drawer-root {
    position: fixed; inset: 0; z-index: 1250;
  }
  .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; }
  }

  /* Related products: 2 rows × 4 visible cards, with horizontal scrolling for more. */
  .related-products-grid {
    display:grid;
    grid-template-rows:repeat(2,minmax(0,1fr));
    grid-auto-flow:column;
    grid-auto-columns:calc((100% - 36px) / 4);
    gap:12px;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 10px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .related-products-grid .product-card { min-width:0; scroll-snap-align:start; }
  .related-products-grid .product-card-image { aspect-ratio:1/1; }
  .related-products-grid::-webkit-scrollbar { display:none; width:0; height:0; }
  @media(max-width:767px){
    .related-products-grid {
      grid-auto-columns:calc((100% - 30px) / 4);
      gap:10px;
      padding-bottom:9px;
    }
  }

  /* Product descriptions: fixed viewport within the product-details layout,
     with vertical scrolling instead of a Show more/Show less control. */
  .product-description-scroll {
    min-width:0;
    max-height:240px;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:8px;
    scrollbar-width:thin;
    scrollbar-color:var(--green) var(--line);
    -webkit-overflow-scrolling:touch;
  }
  .product-description-scroll::-webkit-scrollbar { width:6px; }
  .product-description-scroll::-webkit-scrollbar-track { background:var(--line); border-radius:999px; }
  .product-description-scroll::-webkit-scrollbar-thumb { background:var(--green); border-radius:999px; }
  @media(min-width:768px){
    /* The left column determines the row height (gallery + reviews). The right
       column stretches to that same height, and only the description area scrolls. */
    .pd-layout {
      align-items:stretch;
    }
    .pd-gallery-col,
    .pd-info-col {
      align-self:stretch;
      min-height:0;
    }
    .pd-info-col {
      display:flex;
      flex-direction:column;
    }
    .pd-info-description {
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .pd-info-description .product-description-scroll {
      flex:1 1 auto;
      min-height:0;
      max-height:none;
      height:auto;
    }
  }
  @media(max-width:767px){
    .product-description-scroll {
      max-height:240px;
    }
  }

  /* 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 {
    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)}

  /* === Warm theme match: neutralize blue glass to brown glass === */
  .shop-pagination-glass button.glass-warm-action,
  .glass-warm-action {
    color: var(--ink) !important;
    border: 1px solid var(--glass-border) !important;
    background: var(--glass-bg-strong) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
  }
  .shop-pagination-glass button.glass-warm-action:hover:not(:disabled),
  .glass-warm-action:hover:not(:disabled) {
    background: var(--surface) !important;
    border-color: rgba(192,138,46,.55) !important;
    box-shadow: var(--glass-shadow), 0 8px 22px rgba(34,29,22,.09) !important;
  }
  .shop-pagination-glass button.glass-warm-action.glass-warm-page-current,
  .glass-warm-page-current {
    color: var(--bg) !important;
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    box-shadow: var(--glass-shadow) !important;
  }
  .follow-us-main .follow-us-glass-warm,
  .drawer-follow-us {
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    box-shadow: var(--glass-shadow) !important;
  }
  .drawer-find-us {
    color: var(--ink) !important;
    background: var(--glass-bg-strong) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    box-shadow: var(--glass-shadow) !important;
  }
  .drawer-find-us .find-us-icon {
    background: rgba(192,138,46,.16) !important;
    color: var(--gold) !important;
  }
  .find-us-main {
    border-color: rgba(192,138,46,.35) !important;
    background: var(--glass-bg-strong) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    box-shadow: var(--glass-shadow) !important;
  }
  .find-us-main:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 12px 28px rgba(192,138,46,.14) !important;
  }
  .find-us-main .find-us-icon {
    background: rgba(192,138,46,.16) !important;
    color: var(--gold) !important;
  }
  .find-us-main-standalone {
    margin-top: 0 !important;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 18px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
  }


  /* HARD warm match — last word on pagination + follow box */
  .shop-pagination-glass button.glass-warm-action,
  button.glass-warm-action,
  .glass-warm-action {
    color: var(--ink) !important;
    border: 1px solid var(--glass-border) !important;
    background: var(--glass-bg-strong) !important;
    background-image: none !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
  }
  .shop-pagination-glass button.glass-warm-action:hover:not(:disabled),
  button.glass-warm-action:hover:not(:disabled),
  .glass-warm-action:hover:not(:disabled) {
    background: var(--surface) !important;
    background-image: none !important;
    border-color: var(--gold) !important;
  }
  .shop-pagination-glass button.glass-warm-action.glass-warm-page-current,
  button.glass-warm-action.glass-warm-page-current,
  .glass-warm-page-current {
    color: var(--bg) !important;
    background: var(--gold) !important;
    background-image: none !important;
    border-color: var(--gold) !important;
    box-shadow: 0 8px 20px rgba(192,138,46,.28) !important;
  }
  .follow-us-main .follow-us-glass-warm,
  .follow-us-glass-warm {
    background: var(--glass-bg-strong) !important;
    background-image: none !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
  }
  :root.dark-theme .shop-pagination-glass button.glass-warm-action,
  :root.dark-theme button.glass-warm-action,
  :root.dark-theme .glass-warm-action {
    color: var(--ink) !important;
    background: var(--glass-bg-strong) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
  }
  :root.dark-theme .shop-pagination-glass button.glass-warm-action.glass-warm-page-current,
  :root.dark-theme .glass-warm-page-current {
    color: #181614 !important;
    background: var(--gold) !important;
    background-image: none !important;
    border-color: var(--gold) !important;
  }
  :root.dark-theme .follow-us-glass-warm,
  :root.dark-theme .follow-us-main .follow-us-glass-warm {
    background: var(--glass-bg-strong) !important;
    background-image: none !important;
    border-color: var(--glass-border) !important;
  }




/* Extracted style block 2 id="pc-performance-optimizations" */

@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;
  }
}



/* Extracted style block 3 id="toolbar-redesign" */

/* 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; }
}



/* Extracted style block 4 id="toolbar-sticky-final-fix" */

/* 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; }
}



/* Extracted style block 5 id="toolbar-native-sticky-correction" */

/* 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; }
}



/* Extracted style block 6 id="modal-layer-final-fix" */

/* 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; }



/* Extracted style block 7 id="hot-categories-final-fix" */

/* 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;
}



/* Extracted style block 8 id="category-circle-visibility-final" */

/* 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;
}



/* Extracted style block 9 id="pc-scroll-performance-fix" */

/* 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 {
    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;
}



/* Extracted style block 10 id="mobile-overlay-final-fix" */

  /* 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;
    }
  }



/* Extracted style block 11 id="strict-modal-scroll-lock" */

  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[class~="max-w-[1800px]"] {
      width: 100% !important;
      max-width: none !important;
      padding-left: 88px !important;
      padding-right: 88px !important;
    }
    main[class~="max-w-[1800px]"] > 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;
  }



/* Extracted style block 12 id="floating-search-filter" */

/* Always-visible floating search + filter controls (mobile + desktop) */
.floating-sf {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), 0 10px 30px rgba(34,29,22,0.16);
  max-width: calc(100vw - 24px);
  pointer-events: auto;
}
.floating-sf.is-expanded {
  width: min(420px, calc(100vw - 24px));
  border-radius: 22px;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
}
.floating-sf-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.floating-sf-btn {
  flex: 0 0 auto;
  height: 42px;
  min-width: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .12s ease;
}
.floating-sf-btn:active { transform: scale(0.96); }
.floating-sf-btn.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.floating-sf-search {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 0 14px 0 38px;
  font-size: 13px;
  width: 100%;
}
.floating-sf-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: none;
}
.floating-sf.is-expanded .floating-sf-search-wrap { display: block; }
.floating-sf-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--ink-soft);
  pointer-events: none;
}
.floating-sf-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border: 0; background: transparent; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
@media (min-width: 768px) {
  .floating-sf {
    bottom: 22px;
    padding: 10px;
  }
  .floating-sf-btn { height: 44px; min-width: 44px; font-size: 13px; }
  .floating-sf-search { height: 44px; }
}
/* Hide floating bar when full-screen overlays own the screen */
body.modal-open .floating-sf,
body.cart-locked .floating-sf,
html.modal-open .floating-sf {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.product-detail-shell ~ * .floating-sf,
body:has(.product-detail-shell) .floating-sf,
body:has(.checkout-layer) .floating-sf,
body:has(.img-lightbox) .floating-sf,
body:has(.quick-add-layer) .floating-sf {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}



/* Extracted style block 13 id="related-description-final-fix" */

/* Product detail: the description area shares the exact height of the left gallery/reviews column. */
@media (min-width: 768px) {
  .pd-layout { align-items: stretch !important; }
  .pd-gallery-col { align-self: stretch !important; height: auto !important; min-height: 0 !important; }
  .pd-info-col {
    align-self: stretch !important; height: auto !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
  }
  .pd-info-description {
    flex: 1 1 0 !important; min-height: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
  }
  .pd-info-description .product-description-scroll {
    flex: 1 1 auto !important; min-height: 0 !important;
    max-height: none !important; height: auto !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--green) var(--line);
    padding-right: 8px;
  }
}
@media (max-width: 767px) {
  .pd-info-description .product-description-scroll {
    max-height: 240px !important; overflow-y: auto !important; overflow-x: hidden !important;
    overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  }
}
.product-description-scroll::-webkit-scrollbar { width: 6px; }
.product-description-scroll::-webkit-scrollbar-track { background: var(--line); border-radius: 999px; }
.product-description-scroll::-webkit-scrollbar-thumb { background: var(--green); border-radius: 999px; }

/* Related products: every active product in the current product's category.
   2 rows x 4 columns, no scrollbar. Scrolls with the mouse wheel / mouse drag one column
   at a time (see RelatedCarousel) and fades out at the edges, like Hot Now. */
@property --rel-fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --rel-fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }
.related-products-grid {
  --rel-fade-l: 0px; --rel-fade-r: 0px;
  display: grid !important;
  grid-template-rows: repeat(2, auto) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 48px) / 4) !important;
  column-gap: 16px !important;
  /* row gap is larger than the price-stamp overhang so a stamp never covers the card above it */
  row-gap: 28px !important;
  width: 100% !important; max-width: none !important; height: auto !important;
  box-sizing: border-box;
  padding: 26px 10px 18px !important;
  overflow-x: auto !important; overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 10px;
  scrollbar-width: none !important; -ms-overflow-style: none;
  cursor: grab;
  -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--rel-fade-l), #000 calc(100% - var(--rel-fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--rel-fade-l), #000 calc(100% - var(--rel-fade-r)), transparent 100%);
  transition: --rel-fade-l .25s ease, --rel-fade-r .25s ease;
}
.related-products-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
.related-products-grid.is-dragging { cursor: grabbing; scroll-snap-type: none !important; }
.related-products-grid.is-dragging .product-card { pointer-events: none; }
.related-products-grid img { -webkit-user-drag: none; user-drag: none; }
.related-products-grid .product-card {
  width: 100% !important; min-width: 0 !important; min-height: 0 !important;
  aspect-ratio: 1 / 1 !important; margin: 0 !important; scroll-snap-align: start;
}
/* Price stamp sits on the card's top corner but stays inside the grid gaps (16px across, 28px down). */
.related-products-grid .product-card > .stamp {
  top: -16px !important; right: -10px !important; left: auto !important; z-index: 25 !important;
}
[dir="rtl"] .related-products-grid .product-card > .stamp { left: -10px !important; right: auto !important; }
.related-products-grid .product-card-image { aspect-ratio: 1 / 1 !important; }
@media (max-width: 767px) {
  .related-products-grid {
    grid-auto-columns: calc((100% - 14px) / 2) !important;
    column-gap: 14px !important; row-gap: 26px !important; padding-top: 24px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .related-products-grid { transition: none; }
}



/* Extracted style block 14 id="soft-rating-stars-scroll" */

/* Soft rounded rating stars: same gold accent, but with curved joins and gentle surfaces. */
.rating-stars-display {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.rating-star-glyph {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.rating-star-glyph svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.rating-star-btn {
  width: 40px;
  height: 40px;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, filter .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.rating-star-btn:hover {
  transform: translateY(-1px) scale(1.06);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.10));
}
.rating-star-btn:active { transform: scale(.94); }
.rating-star-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.rating-star-btn .rating-star-glyph { width: 27px; height: 27px; }
.rating-star-btn[data-active="false"] .rating-star-glyph svg path { fill: transparent; }
.rating-star-btn[data-active="true"] .rating-star-glyph svg path { fill: currentColor; }
.rating-stars-display .rating-star-glyph svg path { fill: currentColor; }
@media (max-width: 767px) {
  .rating-star-btn { width: 38px; height: 38px; border-radius: 13px; }
  .rating-star-btn .rating-star-glyph { width: 25px; height: 25px; }
}



/* Extracted style block 15 id="pd-wide-desktop" */

/* Product page on desktop: use the screen width instead of a 1120px centred column, so the
   right-hand info column (description, price, buttons) gets the extra room and is bigger. */
@media (min-width: 768px) {
  .pd-info-col .pd-actions { max-width: 200px !important; gap: 10px !important; }
  .pd-info-col .pd-actions .add-btn { min-height: 48px; padding: 12px 20px !important; font-size: 14px !important; }
  .pd-info-col .pd-price { font-size: 2.2rem !important; line-height: 1.08; }
  .pd-info-col .pd-variant-btn { font-size: 15px; padding: 9px 18px; }
  .pd-info-col .pd-rate-stars { font-size: 32px !important; }
  .pd-info-col .qty-control { width: 36px !important; height: 36px !important; }
}
@media (min-width: 1100px) {
  .pd-layout {
    max-width: min(100%, 1680px) !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 56px !important;
    padding: 28px clamp(32px, 4vw, 72px) 56px !important;
  }
  .pd-gallery { max-height: min(78vh, 720px) !important; }
  .pd-info-col .pd-title { font-size: clamp(1.9rem, 1.2rem + 1vw, 2.4rem) !important; }
  .pd-info-col .pd-title-row { gap: 24px !important; }
  .pd-info-col .pd-actions {
    width: clamp(210px, 17vw, 260px) !important; max-width: clamp(210px, 17vw, 260px) !important; gap: 12px !important;
  }
  .pd-info-col .pd-actions .add-btn { min-height: 56px; padding: 14px 24px !important; font-size: 16px !important; }
  .pd-info-col .pd-price { font-size: clamp(2.1rem, 1.2rem + 1.6vw, 2.75rem) !important; }
  .pd-info-col .pd-variant-btn { font-size: 16px; padding: 10px 22px; }
  .pd-info-col .pd-rate-stars { font-size: 36px !important; }
  .pd-info-col .qty-control { width: 40px !important; height: 40px !important; }
}



/* Extracted style block 16 id="nothing-inspired-demo-skin" */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
 --bg:#f4f4f1!important;--surface:#fff!important;--ink:#111!important;--ink-soft:#666!important;
 --green:#e51b23!important;--green-dark:#b91018!important;--gold:#e51b23!important;--brick:#e51b23!important;--line:#deded9!important;
 --font-display:'Space Grotesk',sans-serif!important;--font-body:'Inter',sans-serif!important;--font-price:'Space Grotesk',sans-serif!important;
 --header-bg:rgba(255,255,255,.88)!important;--modal-header-bg:rgba(255,255,255,.94)!important;
 --glass-bg:rgba(255,255,255,.82)!important;--glass-bg-strong:rgba(255,255,255,.94)!important;
 --glass-border:rgba(20,20,20,.12)!important;--glass-blur:blur(18px) saturate(130%)!important;--glass-blur-soft:blur(12px) saturate(120%)!important;
 --glass-shadow:0 8px 28px rgba(0,0,0,.055),inset 0 1px 0 rgba(255,255,255,.85)!important;
 --accent-blue:#e51b23!important;--accent-blue-soft:rgba(229,27,35,.08)!important;--accent-blue-line:rgba(229,27,35,.28)!important;
}
:root.dark-theme{
 --bg:#101010!important;--surface:#191919!important;--ink:#f5f5f2!important;--ink-soft:#a3a3a0!important;--line:#303030!important;
 --green:#ff3038!important;--green-dark:#d71920!important;--gold:#ff3038!important;--brick:#ff3038!important;
 --header-bg:rgba(18,18,18,.88)!important;--modal-header-bg:rgba(25,25,25,.94)!important;
 --glass-bg:rgba(25,25,25,.82)!important;--glass-bg-strong:rgba(25,25,25,.94)!important;
 --glass-border:rgba(255,255,255,.13)!important;--glass-shadow:0 8px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)!important;
 --accent-blue:#ff3038!important;--accent-blue-soft:rgba(255,48,56,.12)!important;--accent-blue-line:rgba(255,48,56,.3)!important;
}
html,body{font-family:'Inter',sans-serif!important;background-color:var(--bg)!important;color:var(--ink)!important}
body{background-image:radial-gradient(circle,rgba(0,0,0,.075) 1px,transparent 1.25px)!important;background-size:15px 15px!important;background-attachment:fixed!important}
:root.dark-theme body{background-image:radial-gradient(circle,rgba(255,255,255,.10) 1px,transparent 1.25px)!important}
button,input,select,textarea{font-family:'Inter',sans-serif!important}
h1,h2,h3,h4,[class*="font-display"]{font-family:'Space Grotesk',sans-serif!important;letter-spacing:-.045em}
/* Keep the existing product grid and image sizing; restyle the surfaces only. */
[class*="product-card"],[class*="ProductCard"],[class*="product-tile"],.product-detail-shell{border-radius:20px!important}
[class*="product-card"],[class*="ProductCard"],[class*="product-tile"]{border:1px solid var(--line)!important;box-shadow:0 4px 18px rgba(0,0,0,.035)!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important}
@media(hover:hover){[class*="product-card"]:hover,[class*="ProductCard"]:hover,[class*="product-tile"]:hover{transform:translateY(-3px)!important;border-color:rgba(229,27,35,.32)!important;box-shadow:0 12px 28px rgba(0,0,0,.08)!important}}
button,[role="button"],input,select,textarea{border-radius:13px}
button{transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
button:active{transform:scale(.98)}
[class*="glass"],[class*="toolbar"],[class*="filter"],[class*="search"],[class*="drawer"],[class*="modal"]{--glass-border:rgba(20,20,20,.12)!important}
:root.dark-theme [class*="glass"],:root.dark-theme [class*="toolbar"],:root.dark-theme [class*="filter"],:root.dark-theme [class*="search"],:root.dark-theme [class*="drawer"],:root.dark-theme [class*="modal"]{--glass-border:rgba(255,255,255,.13)!important}
input,select,textarea{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none!important}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(229,27,35,.2)!important;border-color:#e51b23!important}
button[class*="primary"],button[class*="checkout"],button[class*="submit"],[class*="add-to-cart"]{background:#e51b23!important;color:#fff!important;border-color:#e51b23!important}
:root.dark-theme button[class*="primary"],:root.dark-theme button[class*="checkout"],:root.dark-theme button[class*="submit"],:root.dark-theme [class*="add-to-cart"]{background:#ff3038!important;color:#fff!important;border-color:#ff3038!important}
/* Signature Nothing-like red micro-accents and crisp dividers. */
::selection{background:#e51b23!important;color:white!important}
[class*="badge"],[class*="discount"],[class*="sale"]{border-radius:999px!important}
img{backface-visibility:hidden}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700;800;900&display=swap');
/* Refined Nothing-inspired demo: typography, icon geometry, and product surfaces */
:root{--font-display:'Space Grotesk',sans-serif!important;--font-body:'Inter',sans-serif!important;--font-price:'DM Mono',monospace!important;--red:#e51b23;--mono:'DM Mono',monospace}
:root.dark-theme{--bg:#0b0b0b!important;--surface:#151515!important;--ink:#f6f6f4!important;--ink-soft:#a2a2a0!important;--line:#2e2e2c!important}
html,body,button,input,select,textarea{font-family:'Inter',sans-serif!important;font-feature-settings:'ss01' on,'cv11' on}
h1,h2,h3,h4,.font-display,[class*='product-card-name'],[class*='section-title']{font-family:'Space Grotesk',sans-serif!important;letter-spacing:-.055em!important;font-weight:600!important}
/* Technical mono treatment for prices, labels, metadata and counters */
[class*='price'],[class*='badge'],[class*='counter'],[class*='sku'],[class*='rating'],.category-chip-label,.product-card-cat{font-family:'DM Mono',monospace!important;letter-spacing:-.025em}
.product-card-name{font-size:clamp(15px,1.1vw,19px)!important;line-height:1.15!important;letter-spacing:-.045em!important}
/* Uniform fine-line icon system; preserve original SVG geometry and click targets */
.icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;line-height:0!important}
.icon svg,.icon>svg,button svg,[role='button'] svg{stroke-linecap:round!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke}
.icon svg{overflow:visible!important;transition:transform .2s ease,opacity .2s ease}
button .icon svg{stroke-width:1.75!important}
button:hover .icon svg,[role='button']:hover .icon svg{transform:scale(1.07)}
/* Product cards: quiet graphite outline, editorial image well, stronger price hierarchy */
.product-card,.product-card-shell,.product-tile,.product-item,[class*='product-card']:not(.product-card-cat),[class*='product-tile']{border:1px solid var(--line)!important;border-radius:8px!important;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.025)!important;background:var(--surface)!important}
.product-card img,.product-tile img,[class*='product-card'] img{border-radius:0!important}
.product-card-name{margin-top:5px!important}
.product-card-price,.product-price,[class*='product-card-price']{font-family:'DM Mono',monospace!important;font-weight:500!important;letter-spacing:-.055em!important}
.product-card-order,.mini-cart-btn,.add-btn{border-radius:5px!important;box-shadow:none!important}
.product-card-order,.mini-cart-btn{border:1px solid currentColor!important}
.product-card-order:hover,.mini-cart-btn:hover{transform:translateY(-1px)!important}
/* Compact pill controls with deliberate technical borders */
button,input,select,textarea{border-radius:7px}
input,select,textarea{border-radius:7px!important}
button[class*='category'],button[class*='filter'],button[class*='sort'],.category-chip,.category-rail-nav{border-radius:7px!important}
[class*='modal'],[class*='drawer'],.product-detail-shell{border-radius:10px!important}
/* Distinct monochrome surfaces and restrained red active state */
[class*='active'],[aria-pressed='true'],[aria-selected='true']{--active-accent:var(--red)}
.category-rail-card .category-chip-icon{border-radius:8px!important;border:1px solid var(--line)!important;box-shadow:none!important}
.category-rail-card.is-center .category-chip-icon{border-color:var(--red)!important}
[class*='badge'],[class*='discount'],[class*='sale']{font-family:'DM Mono',monospace!important;font-size:.72em!important;letter-spacing:.01em!important;border-radius:4px!important}
/* Header and controls use clean planes instead of excessive glass */
header,[class*='header'],[class*='toolbar']{backdrop-filter:blur(16px) saturate(115%)!important;-webkit-backdrop-filter:blur(16px) saturate(115%)!important}
:root.dark-theme body{background-image:radial-gradient(circle,rgba(255,255,255,.075) .8px,transparent 1px)!important;background-size:18px 18px!important}
body{background-size:18px 18px!important}
@media(hover:hover){.product-card:hover,.product-card-shell:hover,.product-tile:hover,[class*='product-card']:hover{transform:translateY(-2px)!important;box-shadow:0 8px 22px rgba(0,0,0,.07)!important}}
@media(max-width:640px){.product-card-name{font-size:15px!important}.product-card,.product-tile,[class*='product-card']:not(.product-card-cat){border-radius:6px!important}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}



/* Extracted style block 17 id="final-requested-tweaks" */

/* Only the floating cart button remains */
.header-cart-btn { display: none !important; }

/* Modern scrollbars: custom-styled for Chromium / Safari / Edge */
@supports selector(::-webkit-scrollbar) {
  *, *::before, *::after {
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
  }
  ::-webkit-scrollbar { width: 12px !important; height: 12px !important; }
  ::-webkit-scrollbar-track { background: transparent !important; }
  ::-webkit-scrollbar-corner { background: transparent !important; }
  ::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--green) 38%, transparent) !important;
    border-radius: 999px !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
    min-height: 48px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--green) 66%, transparent) !important;
    background-clip: padding-box !important;
  }
  ::-webkit-scrollbar-thumb:active {
    background-color: var(--green) !important;
    background-clip: padding-box !important;
  }
}
/* Firefox and other standard-only browsers */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--green) 55%, transparent) transparent;
  }
}

/* Desktop: larger category rail */
@media (min-width: 768px) {
  .category-rail-stage { max-width: 780px; height: 156px; }
  .category-rail-card { width: 130px; height: 150px; gap: 12px; }
  .category-rail-card.is-left { transform: translateX(calc(-50% - 142px)); }
  .category-rail-card.is-right { transform: translateX(calc(-50% + 142px)); }
  .category-rail-card.is-left2 { transform: translateX(calc(-50% - 284px)); }
  .category-rail-card.is-right2 { transform: translateX(calc(-50% + 284px)); }
  .category-rail-card .category-chip-icon { width: 100px; height: 100px; }
  .category-rail-card .category-chip-icon .icon { width: 40px !important; height: 40px !important; }
  .category-rail-card .category-chip-label { font-size: 15px; max-width: 130px; }
  .category-rail-card.is-center .category-chip-label { font-size: 17px; }
  .category-rail-title { font-size: 14px; }
  .category-rail-nav { width: 46px; height: 46px; }
  .category-rail-nav .icon { width: 20px !important; height: 20px !important; }
}


/* NOTHING-STYLE DESIGN PASS 2026 — visual-only layer, preserving app structure and behavior */
:root{
  --nothing-red:#d71920;
  --nothing-ink:#101010;
  --nothing-paper:#f7f7f5;
  --nothing-line:rgba(15,15,15,.16);
  --nothing-dot:rgba(0,0,0,.13);
  --nothing-radius:3px;
}
:root.dark-theme{
  --nothing-ink:#f6f6f4;
  --nothing-paper:#090909;
  --nothing-line:rgba(255,255,255,.17);
  --nothing-dot:rgba(255,255,255,.14);
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  background-color:var(--bg)!important;
  background-image:radial-gradient(var(--nothing-dot) .75px,transparent .9px)!important;
  background-size:16px 16px!important;
  background-attachment:fixed!important;
}
/* Strong editorial typography and system-like micro-labels */
h1,h2,h3,h4,.font-display,.category-rail-heading,.hot-now-header{
  font-family:'Space Grotesk',sans-serif!important;
  letter-spacing:-.065em!important;
  font-weight:650!important;
}
[class*='uppercase'],.product-card-cat,.pd-header-hint,.category-rail-title,.footer-copyright{
  letter-spacing:.12em!important;
}
.price-heavy,.product-card-price,.product-card-old-price,.stamp-price,.hot-now-meta-price{
  font-family:'DM Mono',monospace!important;
  font-variant-numeric:tabular-nums;
}
/* Header becomes a precise floating hardware-like panel */
.shop-header-glass{
  background:color-mix(in srgb,var(--surface) 91%,transparent)!important;
  border-bottom:1px solid var(--nothing-line)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.18)!important;
  backdrop-filter:blur(22px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(125%)!important;
}
.shop-header-inner{max-width:1760px!important;padding-inline:clamp(14px,3vw,48px)!important}
.shop-header-glass button,.header-actions button,.shop-header-menu-btn{
  border:1px solid var(--nothing-line)!important;
  border-radius:3px!important;
  min-height:38px;
}
/* A crisp technical grid instead of soft, generic ecommerce surfaces */
.product-card,.product-card-shell,.product-tile,.product-item{
  position:relative!important;
  background:var(--surface)!important;
  border:1px solid var(--nothing-line)!important;
  border-radius:3px!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transition:transform .24s cubic-bezier(.2,.75,.25,1),border-color .2s,background-color .2s!important;
}
.product-card:before{
  content:'';position:absolute;z-index:2;top:0;left:0;width:22px;height:3px;
  background:var(--nothing-red);opacity:.9;pointer-events:none;
}
.product-card-image{background:color-mix(in srgb,var(--surface) 93%,var(--bg))!important;overflow:hidden!important}
.product-card-image img,.product-card img{transition:transform .45s cubic-bezier(.2,.7,.2,1)!important}
@media(hover:hover){
 .product-card:hover,.product-card-shell:hover,.product-tile:hover,.product-item:hover{
   transform:translateY(-4px)!important;border-color:var(--nothing-ink)!important;
   box-shadow:0 9px 0 rgba(0,0,0,.035)!important;
 }
 .product-card:hover .product-card-image img,.product-card:hover>img{transform:scale(1.035)!important}
}
.product-card-body{padding:clamp(11px,1.25vw,18px)!important;gap:8px!important}
.product-card-name{font-size:clamp(15px,1.15vw,20px)!important;line-height:1.12!important;font-weight:650!important}
.product-card-cat{font-size:10px!important;opacity:.7!important}
.product-card-price-row{align-items:baseline!important;gap:8px!important}
.product-card-price{font-size:clamp(15px,1.2vw,19px)!important;font-weight:500!important}
.product-card-old-price{font-size:11px!important;opacity:.55!important}
/* Controls: flat, tactile, geometric; red is an active-state signal */
button,input,select,textarea,[role='button']{border-radius:3px!important}
button{transition:background-color .18s,border-color .18s,color .18s,transform .18s!important}
button:active,[role='button']:active{transform:scale(.975)!important}
input,select,textarea{
 border:1px solid var(--nothing-line)!important;border-radius:3px!important;
 box-shadow:none!important;background:var(--surface)!important;
}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--nothing-red) 28%,transparent)!important;outline-offset:1px!important;border-color:var(--nothing-red)!important}
.category-chip,.category-rail-nav,.pd-variant-btn,.category-rail-card .category-chip-icon{
 border-radius:3px!important;box-shadow:none!important;
}
.category-rail-card .category-chip-icon{border:1px solid var(--nothing-line)!important;background:var(--surface)!important}
.category-rail-card.is-center .category-chip-icon{border:1px solid var(--nothing-red)!important;box-shadow:inset 0 -3px var(--nothing-red)!important}
.category-rail-card.is-center .category-chip-label{color:var(--nothing-red)!important}
.category-rail-nav{border:1px solid var(--nothing-line)!important;background:var(--surface)!important}
.add-btn,.product-card-order,.mini-cart-btn,.pd-order-btn{
 border-radius:3px!important;box-shadow:none!important;font-weight:650!important;
 letter-spacing:-.015em!important;
}
.add-btn,.product-card-order{min-height:40px!important}
.product-card-order,.mini-cart-btn{border:1px solid var(--nothing-ink)!important}
/* Red is reserved for purchase actions, active navigation and sale markers */
button[class*='primary'],button[class*='checkout'],button[class*='submit'],[class*='add-to-cart'],.pd-order-btn{
 background:var(--nothing-red)!important;color:#fff!important;border-color:var(--nothing-red)!important;
}
:root.dark-theme button[class*='primary'],:root.dark-theme button[class*='checkout'],:root.dark-theme button[class*='submit'],:root.dark-theme [class*='add-to-cart'],:root.dark-theme .pd-order-btn{background:#f12b32!important;border-color:#f12b32!important}
[class*='badge'],[class*='discount'],[class*='sale']{
 border-radius:2px!important;font-family:'DM Mono',monospace!important;
 letter-spacing:.04em!important;font-weight:500!important;
}
/* Product detail feels like a Nothing product spec sheet */
.product-detail-shell{background:var(--bg)!important;border-radius:0!important}
.product-detail-header{border-bottom:1px solid var(--nothing-line)!important;background:var(--surface)!important}
.pd-layout{align-items:start!important}
.pd-gallery{background:var(--surface)!important;border:1px solid var(--nothing-line)!important;border-radius:3px!important;overflow:hidden!important}
.pd-info-col .pd-title{letter-spacing:-.065em!important;line-height:.98!important}
.pd-info-col .pd-price{font-family:'DM Mono',monospace!important;letter-spacing:-.07em!important}
.pd-info-col .pd-actions .add-btn{border-radius:3px!important}
/* Cart and modal panels: hard separators, consistent surfaces */
.drawer,.cart-drawer-panel,[class*='modal'],[class*='drawer']{
 border-radius:0!important;border-color:var(--nothing-line)!important;
}
.cart-drawer-panel{background:var(--surface)!important;box-shadow:-18px 0 60px rgba(0,0,0,.13)!important}
/* Fine line icon treatment with a subtle interaction, not oversized emoji-like glyphs */
.icon{width:auto;vertical-align:middle}
.icon svg,button svg,[role='button'] svg{stroke-linecap:round!important;stroke-linejoin:round!important}
button .icon svg{stroke-width:1.7!important}
/* Footer as a dark hardware panel with a dotted detail */
footer,[class*='footer']{
 border-top:1px solid var(--nothing-line)!important;
}
.footer-copyright{font-family:'DM Mono',monospace!important;font-size:10px!important}
/* Responsive rhythm: compact on mobile, wide editorial spacing on desktop */
@media(min-width:1024px){
 .product-card-body{padding:18px!important}
 .shop-header-inner{min-height:76px!important}
 .category-rail{margin-block:clamp(24px,4vw,56px)!important}
}
@media(max-width:640px){
 body{background-size:13px 13px!important}
 .product-card-body{padding:10px!important}
 .product-card-name{font-size:15px!important}
 .product-card:before{width:16px;height:2px}
 .shop-header-inner{padding-inline:12px!important}
 .product-detail-header{padding-inline:14px!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* NOTHING / SEVEN-SEGMENT DISPLAY PASS — 2026-10-28 */
@import url('https://fonts.cdnfonts.com/css/digital-7');
@import url('https://fonts.cdnfonts.com/css/dseg7-classic');
:root{
  --digital-ink:#080808;
  --digital-paper:#f8f8f6;
  --digital-red:#e21b23;
  --digital-grid:rgba(0,0,0,.14);
}
:root.dark-theme{
  --digital-ink:#f4f4f1;
  --digital-paper:#080808;
  --digital-grid:rgba(255,255,255,.16);
}
/* Apply the old calculator display language across the entire storefront. */
html,body,body *,body *::before,body *::after{
  font-family:'DSEG7 Classic','Digital-7','Share Tech Mono',monospace!important;
  font-weight:700!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
body{color:var(--digital-ink)!important;background-image:radial-gradient(var(--digital-grid) .8px,transparent 1px)!important;background-size:15px 15px!important;animation:nothingDotsDrift 32s linear infinite!important}
:root:not(.dark-theme) body,:root:not(.dark-theme) body *{color:var(--digital-ink)}
:root:not(.dark-theme) .product-card-name,:root:not(.dark-theme) .product-card-cat,:root:not(.dark-theme) .product-card-price,:root:not(.dark-theme) .product-card-old-price,:root:not(.dark-theme) .pd-title,:root:not(.dark-theme) .pd-price{color:#050505!important}
/* Calculator-inspired prices: remove pill badges, use squared display plates. */
.product-card-price-row{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important}
.product-card-price,.product-price,.price-heavy,.pd-price,.hot-now-meta-price,.stamp-price{
  display:inline-flex!important;align-items:center!important;width:max-content!important;max-width:100%!important;
  padding:5px 8px!important;border:1px solid currentColor!important;border-radius:0!important;
  background:transparent!important;font-family:'DSEG7 Classic','Digital-7',monospace!important;
  font-size:clamp(14px,1.2vw,19px)!important;font-weight:700!important;letter-spacing:.025em!important;
  line-height:1.15!important;box-shadow:2px 2px 0 currentColor!important;
}
.product-card-old-price{font-family:'DSEG7 Classic','Digital-7',monospace!important;font-size:11px!important;text-decoration:line-through!important;opacity:.58!important;border:0!important;box-shadow:none!important;padding:0!important}
[class*='badge'],[class*='discount'],[class*='sale'],.mini-cart-badge,.hot-now-badge,.hot-now-badge-dot{
  border-radius:0!important;clip-path:none!important;font-family:'DSEG7 Classic','Digital-7',monospace!important;
  font-weight:700!important;letter-spacing:.02em!important;box-shadow:none!important;
}
/* Rectangular geometry everywhere, including elements that were originally pills. */
*,*::before,*::after{border-radius:0!important}
/* Keep icons as vector marks rather than forcing them into the display font. */
svg,svg *, .icon,.icon svg,.icon svg *,button svg,button svg *,[role='button'] svg,[role='button'] svg *,img.social-brand-img{
  font-family:inherit!important;stroke-linecap:square!important;stroke-linejoin:miter!important;
}
.icon svg,button svg,[role='button'] svg{stroke-width:1.8!important}
.social-brand-img{filter:grayscale(1) contrast(1.4)!important;opacity:.94!important}
:root.dark-theme .social-brand-img{filter:grayscale(1) brightness(0) invert(1)!important}
.main-social-links a,.drawer-social-links a,.product-social-links a,.drawer-follow-us a,.drawer-find-us,.header-cart-btn,.mini-cart-btn,.mini-cart-icon{
  border:1px solid var(--nothing-line)!important;border-radius:0!important;background:transparent!important;
}
.main-social-links a:hover,.drawer-social-links a:hover,.product-social-links a:hover,.drawer-follow-us a:hover,.drawer-find-us:hover{
  border-color:var(--digital-red)!important;transform:translateY(-2px)!important;
}
/* Recolor cart and location controls to match the monochrome hardware aesthetic. */
.header-cart-btn svg,.mini-cart-icon svg,.mini-cart-btn svg,[aria-label*='location' i] svg,[title*='location' i] svg,[class*='location'] svg,[class*='map'] svg{
  color:var(--digital-ink)!important;stroke:currentColor!important;stroke-width:1.8!important;
}
:root:not(.dark-theme) .header-cart-btn,:root:not(.dark-theme) .mini-cart-btn,:root:not(.dark-theme) .mini-cart-icon,:root:not(.dark-theme) [class*='location'],:root:not(.dark-theme) [class*='map']{color:#050505!important}
:root.dark-theme .header-cart-btn,:root.dark-theme .mini-cart-btn,:root.dark-theme .mini-cart-icon,:root.dark-theme [class*='location'],:root.dark-theme [class*='map']{color:#f5f5f2!important}
/* Moving 45-degree dot matrix in the main navigation, side menu and cart. */
@keyframes nothingDotsDrift{from{background-position:0 0}to{background-position:480px -480px}}
@keyframes nothingPanelDots{from{background-position:0 0}to{background-position:320px -320px}}
.shop-header-glass,.drawer-panel,.drawer-root,.cart-drawer-panel,.cart-panel,.cart-overlay-layer .cart-drawer-panel{
  position:relative!important;isolation:isolate!important;
  background-color:var(--surface)!important;
  background-image:radial-gradient(var(--digital-grid) .8px,transparent 1px)!important;
  background-size:15px 15px!important;
  animation:nothingPanelDots 28s linear infinite!important;
}
.drawer-panel::before,.cart-drawer-panel::before,.cart-panel::before{
  content:''!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;
  background-image:radial-gradient(var(--digital-grid) .8px,transparent 1px)!important;
  background-size:15px 15px!important;animation:nothingPanelDots 28s linear infinite!important;
}
.drawer-panel-body,.cart-drawer-panel>* ,.cart-panel>*{position:relative;z-index:1}
/* The cart count becomes a tiny rectangular hardware indicator. */
.mini-cart-badge{min-width:17px!important;min-height:17px!important;padding:1px 3px!important;border:1px solid var(--digital-red)!important;background:var(--digital-red)!important;color:#fff!important;font-size:10px!important;line-height:1!important}
/* Respect motion preferences while preserving the dotted texture. */
@media(prefers-reduced-motion:reduce){body,.shop-header-glass,.drawer-panel,.drawer-root,.cart-drawer-panel,.cart-panel,.cart-drawer-panel::before,.cart-panel::before{animation:none!important}}


/* ================================================================
   NOTHING-STYLE FINISH — product cards, Hot Now, cart placement, motion
   ================================================================ */
:root {
  --nothing-hot-red: #e51b23;
  --nothing-card-line: rgba(12,12,12,.16);
  --nothing-dot: rgba(0,0,0,.17);
}
:root.dark-theme {
  --nothing-card-line: rgba(255,255,255,.17);
  --nothing-dot: rgba(255,255,255,.17);
}

/* Reduce the empty band above the feature carousel. */
.hot-now {
  margin: 3px auto 10px !important;
  padding: 30px 10px 8px !important;
  border-radius: 3px !important;
  border-color: var(--nothing-card-line) !important;
}
.hot-now-header { top: 0 !important; transform: translate(-50%, -38%) !important; }
.hot-now-badge {
  min-height: 48px !important;
  padding: 12px 24px !important;
  gap: 12px !important;
  background: var(--nothing-hot-red) !important;
  color: #fff !important;
  border: 2px solid var(--digital-ink) !important;
  outline: 2px solid var(--nothing-hot-red) !important;
  outline-offset: 3px !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(15px, 1.35vw, 19px) !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  box-shadow: 4px 4px 0 var(--digital-ink), 0 0 22px rgba(229,27,35,.28) !important;
  animation: nothingHotBadgePulse 2.2s steps(2,end) infinite !important;
}
.hot-now-badge-dot {
  width: 10px !important; height: 10px !important; min-width: 10px !important;
  background: #fff !important; border: 1px solid #fff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.2) !important;
  animation: nothingHotDot 1.4s steps(2,end) infinite !important;
}
@keyframes nothingHotBadgePulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--digital-ink), 0 0 16px rgba(229,27,35,.18); }
  50% { box-shadow: 4px 4px 0 var(--digital-ink), 0 0 28px rgba(229,27,35,.48); }
}
@keyframes nothingHotDot { 0%,100% { opacity:1 } 50% { opacity:.32 } }
@media (max-width: 640px) {
  .hot-now { margin-top: 2px !important; padding-top: 27px !important; }
  .hot-now-badge { min-height: 42px !important; padding: 10px 17px !important; font-size: 14px !important; }
}

/* Product cards become structured product/spec tiles instead of full-image overlays. */
.product-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  aspect-ratio: auto !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--nothing-card-line) !important;
  border-radius: 3px !important;
  background: var(--surface) !important;
  color: var(--digital-ink) !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.08) !important;
  isolation: isolate !important;
}
:root.dark-theme .product-card { box-shadow: 2px 2px 0 rgba(255,255,255,.05) !important; }
.product-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: var(--nothing-hot-red) !important;
  z-index: 6 !important;
  pointer-events: none !important;
}
.product-card-image {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / .88 !important;
  flex: 0 0 auto !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background-color: color-mix(in srgb, var(--bg) 60%, var(--surface)) !important;
  background-image: radial-gradient(var(--nothing-dot) .75px, transparent .9px) !important;
  background-size: 13px 13px !important;
  border-bottom: 1px solid var(--nothing-card-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.product-card-image img {
  width: 100% !important; height: 100% !important;
  object-fit: contain !important;
  padding: 8% !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .25s ease !important;
}
@media (hover:hover) {
  .product-card:hover { transform: translateY(-3px) !important; border-color: var(--nothing-hot-red) !important; box-shadow: 4px 5px 0 rgba(0,0,0,.13) !important; }
  .product-card:hover .product-card-image img { transform: scale(1.045) !important; }
}
.product-card-body {
  position: relative !important;
  inset: auto !important;
  left: auto !important; right: auto !important; bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 14px 13px 11px !important;
  color: var(--digital-ink) !important;
  background: var(--surface) !important;
  border-radius: 0 !important;
  text-align: left !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
[dir="rtl"] .product-card-body { text-align: right !important; padding-inline: 13px !important; }
.product-card-body .product-card-cat {
  display: flex !important; align-items: center !important; gap: 6px !important;
  min-width: 0 !important; margin: 0 !important;
  color: var(--ink-soft) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 9px !important; line-height: 1.4 !important;
  font-weight: 700 !important; letter-spacing: .075em !important;
  text-shadow: none !important; opacity: 1 !important;
}
.product-card-body .product-card-cat .icon { color: var(--nothing-hot-red) !important; }
.product-card-body .product-card-name {
  margin: 0 !important;
  color: var(--digital-ink) !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(13px, 1.15vw, 17px) !important;
  line-height: 1.25 !important;
  letter-spacing: -.025em !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  overflow-wrap: anywhere !important;
  -webkit-line-clamp: 2 !important;
}
.product-card-price-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 7px 10px !important;
  min-width: 0 !important;
  margin: 3px 0 0 !important;
  padding-top: 10px !important;
  border-top: 1px dashed var(--nothing-card-line) !important;
}
.product-card-current-price {
  display: inline-block !important;
  min-width: 0 !important;
  color: var(--digital-ink) !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(17px, 1.65vw, 24px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  overflow-wrap: anywhere !important;
}
.product-card-old-price {
  display: inline-block !important;
  color: var(--ink-soft) !important;
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; box-shadow: none !important;
  background: transparent !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(10px, .8vw, 12px) !important;
  line-height: 1.2 !important;
  text-decoration: line-through !important;
  opacity: .7 !important;
}
/* A rectangular SALE / percentage corner marker, not a floating price sticker. */
.product-card-sale-tag {
  position: absolute !important;
  top: 11px !important;
  left: 11px !important;
  z-index: 12 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  min-width: 58px !important;
  padding: 7px 8px !important;
  border: 1px solid #111 !important;
  background: var(--nothing-hot-red) !important;
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: 13px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: .015em !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.9) !important;
  pointer-events: none !important;
}
[dir="rtl"] .product-card-sale-tag { left: auto !important; right: 11px !important; align-items: flex-end !important; }
.product-card-sale-kicker { font-family: 'DM Mono', monospace !important; font-size: 8px !important; line-height: 1 !important; letter-spacing: .12em !important; }
/* Replace the cart glyph with a large rectangular action strip and a hard-edged + / quantity marker. */
.product-card-order,
.mini-cart-btn {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: 46px !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin: 0 12px 12px !important;
  padding: 0 8px 0 12px !important;
  border: 1px solid var(--nothing-hot-red) !important;
  border-radius: 2px !important;
  background: var(--nothing-hot-red) !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 var(--digital-ink) !important;
  font-family: 'DM Mono',monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  line-height: 1.2 !important;
  text-align: left !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
.product-card-order-label { display: block !important; min-width: 0 !important; font-family: 'DM Mono',monospace !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; overflow-wrap: anywhere !important; }
.product-card-order-mark {
  display: grid !important; place-items: center !important;
  flex: 0 0 30px !important; width: 30px !important; height: 30px !important;
  margin-left: 10px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: rgba(0,0,0,.13) !important;
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: 20px !important; line-height: 1 !important; font-weight: 700 !important;
  letter-spacing: 0 !important;
}
[dir="rtl"] .product-card-order { text-align: right !important; }
.product-card-order:hover, .mini-cart-btn:hover { transform: translateY(-1px) !important; box-shadow: 4px 4px 0 var(--digital-ink) !important; }
.product-card-order:active, .mini-cart-btn:active { transform: translateY(1px) !important; box-shadow: 1px 1px 0 var(--digital-ink) !important; }
.product-card-remove {
  position: absolute !important; top: 9px !important; right: 9px !important; bottom: auto !important; left: auto !important;
  z-index: 13 !important; display: grid !important; place-items: center !important;
  width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important;
  border: 1px solid var(--nothing-card-line) !important; border-radius: 2px !important;
  background: var(--surface) !important; color: var(--nothing-hot-red) !important; box-shadow: 2px 2px 0 rgba(0,0,0,.45) !important;
}
[dir="rtl"] .product-card-remove { right: auto !important; left: 9px !important; }
.product-card-remove .icon svg { stroke-width: 2.1 !important; }
.product-card .mini-cart-icon, .product-card .mini-cart-badge { display: none !important; }
.product-card > .stamp { display: none !important; }
.related-products-grid .product-card { width: min(100%, 260px) !important; }
@media (max-width: 640px) {
  .product-card-body { padding: 11px 10px 9px !important; gap: 7px !important; }
  .product-card-body .product-card-name { font-size: 13px !important; }
  .product-card-current-price { font-size: clamp(15px, 4vw, 19px) !important; }
  .product-card-order, .mini-cart-btn { margin: 0 10px 10px !important; height: 42px !important; min-height: 42px !important; padding-inline: 8px !important; }
  .product-card-order-label { font-size: 9px !important; letter-spacing: .005em !important; }
  .product-card-order-mark { width: 26px !important; height: 26px !important; flex-basis: 26px !important; }
  .product-card-sale-tag { top: 8px !important; left: 8px !important; padding: 6px 7px !important; min-width: 51px !important; font-size: 11px !important; }
  [dir="rtl"] .product-card-sale-tag { left: auto !important; right: 8px !important; }
}

/* Fix the cart's physical anchor; a prior visual skin accidentally changed it to relative. */
.cart-overlay-layer {
  position: fixed !important; inset: 0 !important;
  z-index: 10000 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.cart-overlay-layer > .absolute.inset-0 {
  position: absolute !important; inset: 0 !important;
  background-color: rgba(8,8,8,.48) !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
  overflow: hidden !important;
}
.cart-overlay-layer > .absolute.inset-0::after,
.drawer-root > .absolute.inset-0::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 15px 15px !important;
  animation: nothingPanelDots 24s linear infinite !important;
  opacity: .62 !important;
}
.cart-overlay-layer .cart-drawer-panel {
  position: absolute !important;
  top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important;
  width: min(30rem, 92vw) !important;
  height: 100dvh !important; max-height: 100dvh !important;
  z-index: 10001 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-left: 1px solid var(--nothing-card-line) !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background-color: var(--surface) !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 15px 15px !important;
  animation: nothingPanelDots 24s linear infinite !important;
  box-shadow: -16px 0 44px rgba(0,0,0,.3) !important;
  isolation: isolate !important;
}
.cart-overlay-layer .cart-drawer-panel > * { position: relative; z-index: 1; }
.cart-overlay-layer .cart-drawer-panel::before {
  content: '' !important; position: absolute !important; inset: 0 !important; z-index: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(var(--digital-grid) .75px, transparent 1px) !important;
  background-size: 15px 15px !important;
  animation: nothingPanelDots 24s linear infinite !important;
  opacity: .5 !important;
}
@media (min-width: 768px) { .cart-overlay-layer .cart-drawer-panel { width: min(30rem, 42vw) !important; } }
@media (prefers-reduced-motion: reduce) {
  .cart-overlay-layer > .absolute.inset-0::after,
  .drawer-root > .absolute.inset-0::after,
  .cart-overlay-layer .cart-drawer-panel,
  .cart-overlay-layer .cart-drawer-panel::before,
  .hot-now-badge, .hot-now-badge-dot { animation: none !important; }
}


/* Restore viewport-positioned menu drawers after the shared dot-skin override. */
.drawer-root {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9998 !important;
  background: transparent !important;
  pointer-events: auto;
}
.drawer-panel {
  position: fixed !important;
  top: 0 !important; bottom: 0 !important;
  height: 100dvh !important; max-height: 100dvh !important;
  width: min(20rem, 86vw) !important;
  overflow: hidden !important;
  background-color: var(--surface) !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 15px 15px !important;
  animation: nothingPanelDots 24s linear infinite !important;
  z-index: 9999 !important;
}
.drawer-root > .absolute.inset-0 {
  position: absolute !important; inset: 0 !important;
  background-color: rgba(8,8,8,.46) !important;
  backdrop-filter: blur(12px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) !important;
}
.drawer-panel::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important; z-index: 0 !important;
  background-image: radial-gradient(var(--digital-grid) .75px, transparent 1px) !important;
  background-size: 15px 15px !important;
  animation: nothingPanelDots 24s linear infinite !important;
  pointer-events: none !important; opacity: .52 !important;
}
.drawer-panel > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-panel::before { animation: none !important; }
}

/* ================================================================
   NOTHING DIGITAL PRICING + FEATURE BADGES (2026-10)
   ================================================================ */
/* Keep the hero section title fully below the sticky site bar instead of
   letting its top half slip behind the header's stacking layer. */
.hot-now {
  position: relative !important;
  z-index: 1 !important;
  overflow: visible !important;
  margin: 8px auto 12px !important;
  padding: 70px 12px 10px !important;
}
.hot-now-header {
  top: 9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 45 !important;
  pointer-events: none !important;
}
.hot-now-badge,
.hot-now-auto-heading {
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  padding: 12px 24px !important;
  border: 2px solid var(--digital-ink) !important;
  border-radius: 2px !important;
  outline: 2px solid var(--nothing-hot-red) !important;
  outline-offset: 3px !important;
  background: var(--nothing-hot-red) !important;
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(15px, 1.35vw, 19px) !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  letter-spacing: .065em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 4px 4px 0 var(--digital-ink), 0 0 22px rgba(229,27,35,.28) !important;
  animation: nothingHotBadgePulse 2.2s steps(2,end) infinite !important;
}
.hot-now-auto-heading {
  position: absolute !important;
  top: 9px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 45 !important;
  width: max-content !important;
  max-width: min(92%, 700px) !important;
  margin: 0 !important;
  pointer-events: none !important;
}
.hot-now-badge-dot {
  flex: 0 0 10px !important;
  width: 10px !important;
  min-width: 10px !important;
  height: 10px !important;
  border: 1px solid #fff !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.2) !important;
  animation: nothingHotDot 1.4s steps(2,end) infinite !important;
}
.hot-now-stage { margin-top: 0 !important; overflow: visible !important; }
@media (max-width: 640px) {
  .hot-now { margin-top: 8px !important; padding: 64px 6px 8px !important; }
  .hot-now-header { top: 8px !important; transform: translateX(-50%) !important; }
  .hot-now-badge, .hot-now-auto-heading {
    min-height: 42px !important;
    max-width: min(92vw, 420px) !important;
    padding: 10px 15px !important;
    gap: 9px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }
  .hot-now-auto-heading { top: 8px !important; }
}

/* Real, visible cart icon. The old plus glyph used a segment-display font and
   could render as an empty square on some browsers. */
.product-card-order,
.mini-cart-btn {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 12px 12px auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid var(--digital-ink) !important;
  border-radius: 2px !important;
  background: var(--nothing-hot-red) !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 var(--digital-ink) !important;
  overflow: visible !important;
}
.product-card-order-icon {
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  pointer-events: none !important;
}
.product-card-order-icon svg {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.8 !important;
  overflow: visible !important;
}
.product-card-order-icon svg circle[fill="currentColor"] { fill: currentColor !important; }
.product-card-order:hover,
.mini-cart-btn:hover { transform: translateY(-2px) !important; box-shadow: 5px 5px 0 var(--digital-ink) !important; }
.product-card-order:active,
.mini-cart-btn:active { transform: translateY(1px) !important; box-shadow: 2px 2px 0 var(--digital-ink) !important; }
[dir="rtl"] .product-card-order,
[dir="rtl"] .mini-cart-btn { margin: 0 auto 12px 12px !important; }
@media (max-width: 640px) {
  .product-card-order,
  .mini-cart-btn { width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 52px !important; min-height: 52px !important; margin: 0 10px 10px auto !important; }
  .product-card-order-icon { width: 36px !important; height: 36px !important; }
  .product-card-order-icon svg { width: 34px !important; height: 34px !important; }
  [dir="rtl"] .product-card-order,
  [dir="rtl"] .mini-cart-btn { margin: 0 auto 10px 10px !important; }
}

/* Regular product cards: put a strong red digital price module at the upper
   right. Sale markers stay opposite it, so both remain readable. */
.product-card-body { position: static !important; }
.product-card-price-row {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 18 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 3px !important;
  width: max-content !important;
  max-width: min(64%, 190px) !important;
  margin: 0 !important;
  padding: 7px 9px 8px !important;
  border: 2px solid var(--digital-ink) !important;
  border-radius: 2px !important;
  border-top: 2px solid var(--digital-ink) !important;
  background: var(--nothing-hot-red) !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 var(--digital-ink) !important;
  text-align: right !important;
  pointer-events: none !important;
}
.product-card-price-label {
  display: block !important;
  color: rgba(255,255,255,.92) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}
.product-card-current-price {
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(15px, 1.5vw, 22px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
}
.product-card-old-price {
  color: rgba(255,255,255,.78) !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  text-decoration: line-through !important;
  white-space: nowrap !important;
}
.product-card-discount-chip {
  display: inline-block !important;
  padding: 3px 5px !important;
  border: 1px solid #fff !important;
  border-radius: 2px !important;
  background: var(--digital-ink) !important;
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}
.product-card-sale-tag {
  left: 10px !important;
  right: auto !important;
  top: 10px !important;
  min-width: 68px !important;
  padding: 8px 9px !important;
  border: 2px solid var(--digital-ink) !important;
  border-radius: 2px !important;
  font-size: 15px !important;
  line-height: 1.05 !important;
  box-shadow: 4px 4px 0 var(--digital-ink) !important;
}
[dir="rtl"] .product-card-sale-tag { left: 10px !important; right: auto !important; align-items: flex-start !important; }
@media (max-width: 640px) {
  .product-card-price-row { top: 8px !important; right: 8px !important; max-width: 64% !important; padding: 6px 7px !important; gap: 2px !important; }
  .product-card-current-price { font-size: clamp(13px, 3.4vw, 17px) !important; }
  .product-card-price-label { font-size: 7px !important; }
  .product-card-old-price { font-size: 9px !important; }
  .product-card-discount-chip { font-size: 10px !important; }
  .product-card-sale-tag { top: 8px !important; left: 8px !important; min-width: 54px !important; padding: 6px 7px !important; font-size: 12px !important; }
  [dir="rtl"] .product-card-sale-tag { left: 8px !important; right: auto !important; }
}

/* Hero carousel prices deliberately extend beyond the image-card outline.
   The carousel still clips neither the outside tags nor the 45-degree dot field. */
.hot-now-card { overflow: visible !important; }
.hot-now-card > img,
.hot-now-card > .hot-now-card-fallback {
  border-radius: inherit !important;
  overflow: hidden !important;
}
.hot-now-meta {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
  pointer-events: none !important;
}
.hot-now-meta-price { display: none !important; }
.hot-now-price-badge-stack {
  position: absolute !important;
  top: -18px !important;
  right: -18px !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: min(58%, 230px) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateY(5px) scale(.97) !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
.hot-now-card.is-active .hot-now-price-badge-stack {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}
.hot-now-price-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  max-width: 100% !important;
  padding: 9px 11px 10px !important;
  border: 2px solid var(--digital-ink) !important;
  border-radius: 2px !important;
  background: var(--nothing-hot-red) !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 var(--digital-ink) !important;
}
.hot-now-price-badge-label {
  display: block !important;
  font-family: 'DM Mono',monospace !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .11em !important;
  white-space: nowrap !important;
}
.hot-now-price-badge-current strong {
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(19px, 2vw, 30px) !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap !important;
}
.hot-now-discount-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  border: 2px solid var(--digital-ink) !important;
  border-radius: 2px !important;
  background: var(--digital-ink) !important;
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(15px, 1.4vw, 21px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  box-shadow: 4px 4px 0 var(--nothing-hot-red) !important;
  white-space: nowrap !important;
}
.hot-now-discount-badge span {
  color: #fff !important;
  font-family: 'DM Mono',monospace !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}
.hot-now-price-badge-old {
  padding: 5px 8px 6px !important;
  background: var(--surface) !important;
  color: var(--digital-ink) !important;
}
.hot-now-price-badge-old .hot-now-price-badge-label { color: var(--ink-soft) !important; }
.hot-now-price-badge-old s {
  color: var(--digital-ink) !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(11px, 1vw, 15px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}
@media (max-width: 640px) {
  .hot-now-price-badge-stack { top: -12px !important; right: -7px !important; gap: 4px !important; max-width: 61% !important; }
  .hot-now-price-badge { padding: 7px 8px !important; border-width: 1.5px !important; }
  .hot-now-price-badge-current strong { font-size: clamp(15px, 4.7vw, 21px) !important; }
  .hot-now-price-badge-label { font-size: 7px !important; }
  .hot-now-discount-badge { padding: 6px 7px !important; font-size: 14px !important; }
  .hot-now-discount-badge span { font-size: 8px !important; }
  .hot-now-price-badge-old { padding: 4px 6px !important; }
  .hot-now-price-badge-old s { font-size: 10px !important; }
}

/* Product-detail modal gets its own moving Nothing dot matrix without blocking
   the gallery, close button, variant controls, or scroll interaction. */
.product-detail-shell {
  position: fixed !important;
  background-color: var(--bg) !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 16px 16px !important;
  animation: nothingPanelDots 24s linear infinite !important;
  isolation: isolate !important;
}
.product-detail-shell::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 16px 16px !important;
  animation: nothingPanelDots 24s linear infinite !important;
  opacity: .42 !important;
}
.product-detail-shell > .product-detail-header { position: sticky !important; top: 0 !important; z-index: 10 !important; }
.product-detail-shell > .pd-layout { position: relative !important; z-index: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .hot-now-badge, .hot-now-auto-heading, .hot-now-badge-dot,
  .product-detail-shell, .product-detail-shell::before,
  .hot-now-price-badge-stack { animation: none !important; transition: none !important; }
}

/* ================================================================
   NOTHING PRODUCT DISPLAY — reference-card finish
   Glitch accents are brief and low-contrast; layouts and interactions stay intact.
   ================================================================ */
:root {
  --nd-red: #f32630;
  --nd-red-deep: #bf101a;
  --nd-display-bg: #171717;
  --nd-display-line: rgba(255,255,255,.24);
  --nd-ambient-dot: rgba(12,12,12,.075);
  --nd-ambient-dot-strong: rgba(12,12,12,.11);
}
:root.dark-theme {
  --nd-display-bg: #080808;
  --nd-display-line: rgba(255,255,255,.2);
  --nd-ambient-dot: rgba(255,255,255,.065);
  --nd-ambient-dot-strong: rgba(255,255,255,.1);
}

/* A softer animated dot field replaces the glass haze behind the hero modules.
   Dot scales differ; the layers drift slowly and pulse independently. */
.hot-now {
  isolation: isolate !important;
  background: color-mix(in srgb, var(--bg) 96%, var(--nothing-hot-red) 4%) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--nothing-hot-red) 18%) !important;
  box-shadow: none !important;
}
.hot-now::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .72 !important;
  background-image:
    radial-gradient(circle, var(--nd-ambient-dot-strong) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, var(--nd-ambient-dot) 0 2px, transparent 2.7px),
    radial-gradient(circle, var(--nd-ambient-dot-strong) 0 0.65px, transparent 1.25px),
    radial-gradient(circle, var(--nd-ambient-dot) 0 1.55px, transparent 2.4px);
  background-size: 27px 27px, 61px 61px, 83px 83px, 119px 119px !important;
  background-position: 0 0, 19px 11px, 28px 43px, 71px 17px !important;
  animation: ndAmbientDotDrift 24s linear infinite, ndAmbientDotPulse 6.8s steps(5, end) infinite alternate !important;
}
.hot-now::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .26 !important;
  background-image:
    radial-gradient(circle, var(--nd-ambient-dot-strong) 0 3px, transparent 3.7px),
    radial-gradient(circle, var(--nd-ambient-dot) 0 2.5px, transparent 3.3px);
  background-size: 151px 151px, 193px 193px !important;
  background-position: 41px 9px, 104px 64px !important;
  animation: ndAmbientLargeDots 15s steps(6, end) infinite alternate !important;
}
.hot-now > .hot-now-header,
.hot-now > .hot-now-auto-heading { z-index: 45 !important; }
.hot-now > .hot-now-stage,
.hot-now > .hot-now-dots { position: relative !important; z-index: 2 !important; }
@keyframes ndAmbientDotDrift {
  0% { background-position: 0 0, 19px 11px, 28px 43px, 71px 17px; }
  100% { background-position: 54px -54px, -42px -50px, 91px -39px, 15px -102px; }
}
@keyframes ndAmbientDotPulse {
  0%, 100% { opacity: .36; }
  38% { opacity: .76; }
  67% { opacity: .48; }
}
@keyframes ndAmbientLargeDots {
  0% { opacity: .12; background-position: 41px 9px, 104px 64px; }
  42% { opacity: .34; background-position: 56px -13px, 81px 40px; }
  73% { opacity: .2; background-position: 28px 22px, 117px 79px; }
  100% { opacity: .4; background-position: 69px -36px, 64px 21px; }
}

/* Hero items receive the same crisp red outline as the active feature system.
   The glitch overlay runs only on selection/transition, not as harsh constant flicker. */
.hot-now-card {
  border: 2px solid var(--nd-red) !important;
  border-radius: 2px !important;
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--digital-ink) 84%, var(--nd-red) 16%) !important;
  transition: transform .38s steps(6, end), opacity .22s steps(3, end), border-color .12s steps(2, end) !important;
  isolation: isolate !important;
}
.hot-now-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 28 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(transparent 0 18%, rgba(243,38,48,.2) 18% 19%, transparent 19% 53%, rgba(255,255,255,.12) 53% 54%, transparent 54%),
    repeating-linear-gradient(0deg, transparent 0 13px, rgba(243,38,48,.12) 13px 14px, transparent 14px 27px);
  mix-blend-mode: screen !important;
}
.hot-now-card.is-active::after { animation: ndHeroGlitchEnter .32s steps(2, end) 1 both !important; }
@keyframes ndHeroGlitchEnter {
  0% { opacity: 0; clip-path: inset(0 0 85% 0); }
  25% { opacity: .66; clip-path: inset(21% 0 62% 0); }
  49% { opacity: .34; clip-path: inset(57% 0 29% 0); }
  72% { opacity: .58; clip-path: inset(78% 0 9% 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
.hot-now-card.is-active { outline: 1px solid color-mix(in srgb, var(--nd-red) 62%, transparent) !important; outline-offset: 2px !important; }
.hot-now-price-badge,
.hot-now-discount-badge {
  border-radius: 0 !important;
  background-color: var(--nd-red) !important;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px) !important;
  box-shadow: 4px 4px 0 var(--digital-ink), 1px 0 0 rgba(243,38,48,.65) !important;
}
.hot-now-discount-badge { background: var(--digital-ink) !important; box-shadow: 4px 4px 0 var(--nd-red) !important; }

/* Product-card anatomy: image display up top, dark spec/footer row below,
   and the cart control alongside the category/name badges like the reference. */
.product-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 68px !important;
  grid-template-rows: auto 88px !important;
  align-content: start !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--line) 78%, var(--nd-red) 22%) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,.1) !important;
  transition: border-color .12s steps(2,end), box-shadow .12s steps(2,end) !important;
}
.product-card::before {
  height: 2px !important;
  background: var(--nd-red) !important;
  z-index: 30 !important;
}
.product-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 24 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background-image:
    linear-gradient(transparent 0 24%, rgba(243,38,48,.14) 24% 25%, transparent 25% 62%, rgba(255,255,255,.12) 62% 63%, transparent 63%),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(243,38,48,.08) 17px 18px, transparent 18px 33px);
  mix-blend-mode: screen !important;
}
.product-card-image {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  aspect-ratio: 1 / .92 !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background-color: color-mix(in srgb, var(--bg) 94%, var(--nd-red) 6%) !important;
  background-image:
    radial-gradient(var(--nd-ambient-dot) .75px, transparent 1px),
    linear-gradient(135deg, transparent 0 60%, color-mix(in srgb, var(--bg) 94%, var(--nd-red) 6%) 60% 100%) !important;
  background-size: 16px 16px, 100% 100% !important;
}
.product-card-image img {
  object-fit: contain !important;
  padding: 7% !important;
  transition: filter .12s steps(2,end), transform .2s ease-out !important;
}
.product-card-body {
  grid-column: 1 !important;
  grid-row: 2 !important;
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 88px !important;
  padding: 8px 5px 8px 10px !important;
  background: var(--nd-display-bg) !important;
  color: #f8f8f8 !important;
  text-align: left !important;
  overflow: hidden !important;
}
.product-card-body .product-card-cat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  max-width: 100% !important;
  padding: 3px 6px !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-left: 2px solid var(--nd-red) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(255,255,255,.7) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 8px !important;
  line-height: 1.15 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
.product-card-body .product-card-cat .icon { color: #ff545b !important; flex: 0 0 auto !important; }
.product-card-body .product-card-name {
  display: inline-block !important;
  max-width: 100% !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 0 !important;
  background: rgba(255,255,255,.055) !important;
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(11px, 1vw, 14px) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: .7px 0 rgba(243,38,48,.42) !important;
}
[dir="rtl"] .product-card-body {
  grid-column: 1 !important;
  text-align: right !important;
  align-items: flex-start !important;
  padding: 8px 10px 8px 5px !important;
}
.product-card-price-row {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 32 !important;
  width: max-content !important;
  max-width: min(66%, 205px) !important;
  margin: 0 !important;
  padding: 8px 9px 9px !important;
  gap: 3px !important;
  border: 2px solid #111 !important;
  border-radius: 0 !important;
  background: var(--nd-red) !important;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 4px) !important;
  color: #fff !important;
  box-shadow: 4px 4px 0 #111, 0 0 0 1px rgba(243,38,48,.5) !important;
  overflow: visible !important;
}
.product-card-price-row::before,
.product-card-price-row::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
}
.product-card-price-row::before {
  border: 1px solid rgba(255,255,255,.22) !important;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(0,0,0,.08) 7px 8px) !important;
  animation: ndPriceScan 2.8s steps(2,end) infinite !important;
}
.product-card-price-row::after {
  inset: 18% -3px auto !important;
  height: 2px !important;
  background: rgba(255,255,255,.45) !important;
  opacity: 0 !important;
  animation: ndPriceGlitch 4.2s steps(1,end) infinite !important;
}
.product-card-price-row > * { position: relative !important; z-index: 2 !important; }
.product-card-price-label {
  color: rgba(255,255,255,.9) !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}
.product-card-current-price {
  color: #fff !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(16px, 1.65vw, 23px) !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  text-shadow: .7px 0 rgba(255,255,255,.25) !important;
  white-space: nowrap !important;
}
.product-card-old-price {
  color: rgba(255,255,255,.74) !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
.product-card-discount-chip {
  border: 1px solid rgba(255,255,255,.75) !important;
  border-radius: 0 !important;
  background: #101010 !important;
  color: #fff !important;
  padding: 3px 5px !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,.55) !important;
}
.product-card-sale-tag {
  top: 10px !important;
  left: 10px !important;
  z-index: 33 !important;
  min-width: 62px !important;
  padding: 7px 8px !important;
  border: 2px solid #111 !important;
  border-radius: 0 !important;
  outline: 1px solid var(--nd-red) !important;
  outline-offset: 2px !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 var(--nd-red) !important;
  animation: ndTagGlitchIdle 5.8s steps(1,end) infinite !important;
}
.product-card-sale-kicker { color: #ff7379 !important; }

/* Cart icon sits in its own square on the right; title/category badges are beside it. */
.product-card-order,
.mini-cart-btn {
  position: relative !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  display: grid !important;
  place-items: center !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 9px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,.19) !important;
  border-radius: 0 !important;
  background: var(--nd-display-bg) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-align: center !important;
  z-index: 28 !important;
}
.product-card-order::before,
.mini-cart-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  pointer-events: none !important;
}
.product-card-order-icon {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  color: #fff !important;
  background: #202020 !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 0 !important;
  filter: drop-shadow(2px 2px 0 rgba(243,38,48,.5)) !important;
}
.product-card-order-icon svg,
.product-card-order-icon svg * {
  width: 34px !important;
  height: 34px !important;
  stroke: #fff !important;
  fill: none !important;
  stroke-width: 2.4 !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
}
.product-card-order-label { display: none !important; }
.product-card-remove { z-index: 35 !important; }

@media (hover:hover) {
  .product-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--nd-red) !important;
    box-shadow: 4px 4px 0 rgba(0,0,0,.14), 1px 0 0 rgba(243,38,48,.45) !important;
  }
  .product-card:hover::after { animation: ndCardGlitchHover .38s steps(2,end) 1 both !important; }
  .product-card:hover .product-card-image img { transform: scale(1.025) !important; filter: contrast(1.035) saturate(1.02) !important; }
  .product-card:hover .product-card-name { border-color: rgba(243,38,48,.65) !important; }
  .product-card-order:hover .product-card-order-icon,
  .mini-cart-btn:hover .product-card-order-icon { border-color: var(--nd-red) !important; filter: drop-shadow(3px 2px 0 rgba(243,38,48,.75)) !important; }
}
@keyframes ndCardGlitchHover {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  28% { opacity: .7; clip-path: inset(22% 0 65% 0); }
  52% { opacity: .35; clip-path: inset(61% 0 25% 0); }
  76% { opacity: .58; clip-path: inset(82% 0 8% 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes ndPriceScan {
  0%, 85%, 100% { opacity: .4; }
  87% { opacity: .85; }
  89% { opacity: .28; }
  92% { opacity: .64; }
}
@keyframes ndPriceGlitch {
  0%, 91%, 100% { opacity: 0; transform: translateX(0); }
  92% { opacity: .85; transform: translateX(2px); }
  93% { opacity: .3; transform: translateX(-2px); }
  94% { opacity: .65; transform: translateX(1px); }
  95% { opacity: 0; transform: translateX(0); }
}
@keyframes ndTagGlitchIdle {
  0%, 95%, 100% { transform: translateX(0); filter: none; }
  96% { transform: translateX(1px); filter: drop-shadow(-1px 0 rgba(243,38,48,.65)); }
  97% { transform: translateX(-1px); filter: none; }
}

/* Categories use short stepped/glitch transitions rather than long smooth drifting. */
.category-rail-card { transition: transform .28s steps(5,end), opacity .15s steps(3,end) !important; }
.category-rail-card .category-chip-icon {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--nothing-hot-red) 20%, transparent) !important;
  transition: background-color .12s steps(2,end), border-color .12s steps(2,end), color .12s steps(2,end) !important;
}
.category-rail-card .category-chip-icon::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(243,38,48,.2) 9px 10px, transparent 10px 20px) !important;
}
.category-rail-card.is-center .category-chip-icon::after { animation: ndCategoryGlitchIn .28s steps(2,end) 1 both !important; }
.category-rail-card.is-center .category-chip-icon { border-color: var(--nd-red) !important; }
.category-rail-card.is-center .category-chip-label { color: var(--nd-red) !important; }
@keyframes ndCategoryGlitchIn {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  35% { opacity: .7; clip-path: inset(25% 0 55% 0); }
  70% { opacity: .35; clip-path: inset(70% 0 18% 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@media (max-width: 640px) {
  .product-card { grid-template-columns: minmax(0,1fr) 58px !important; grid-template-rows: auto 82px !important; }
  .product-card-body { min-height: 82px !important; padding: 7px 4px 7px 7px !important; gap: 4px !important; }
  .product-card-body .product-card-cat { max-width: 100% !important; font-size: 7px !important; padding: 3px 4px !important; letter-spacing: .04em !important; }
  .product-card-body .product-card-name { max-width: 100% !important; font-size: 10px !important; padding: 4px !important; }
  .product-card-order,.mini-cart-btn { width: 58px !important; min-width: 58px !important; max-width: 58px !important; }
  .product-card-order-icon { width: 35px !important; height: 35px !important; }
  .product-card-order-icon svg,.product-card-order-icon svg * { width: 29px !important; height: 29px !important; }
  .product-card-price-row { top: 8px !important; right: 8px !important; max-width: 68% !important; padding: 6px 7px !important; }
  .product-card-current-price { font-size: clamp(12px, 3.4vw, 17px) !important; }
  .product-card-price-label { font-size: 7px !important; }
  .product-card-sale-tag { top: 8px !important; left: 8px !important; min-width: 49px !important; padding: 6px !important; font-size: 11px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hot-now::before, .hot-now::after,
  .hot-now-card.is-active::after,
  .product-card-price-row::before, .product-card-price-row::after,
  .product-card-sale-tag, .category-rail-card.is-center .category-chip-icon::after,
  .product-card:hover::after { animation: none !important; }
  .hot-now-card, .category-rail-card, .product-card, .product-card-image img { transition: none !important; }
}

/* v5 corrective pass: lock price plates to the card's upper-right corner,
   remove layered/random badge outlines, and make hero dots blink in and out. */
.product-card { position: relative !important; overflow: visible !important; }
.product-card-image { position: relative !important; }
.product-card-price-row {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 10px !important;
  z-index: 60 !important;
  border: 1px solid #111 !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #111 !important;
  transform: none !important;
}
[dir="rtl"] .product-card-price-row {
  right: 10px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: 10px !important;
  text-align: right !important;
}
.product-card-price-row::before {
  inset: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(0,0,0,.08) 8px 9px) !important;
}
.product-card-price-row::after { display: none !important; }
.product-card-sale-tag {
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  outline: none !important;
  border: 1px solid #111 !important;
  box-shadow: 3px 3px 0 #111 !important;
  animation: ndTagBlinkGlitch 5.6s steps(1,end) infinite !important;
}
[dir="rtl"] .product-card-sale-tag { left: 10px !important; right: auto !important; }
.product-card-body .product-card-cat,
.product-card-body .product-card-name,
.product-card-order,
.product-card-order-icon {
  outline: none !important;
  border-radius: 0 !important;
}
.product-card-body .product-card-cat { box-shadow: none !important; }
.product-card-body .product-card-name { box-shadow: none !important; }
.product-card-order::before,
.mini-cart-btn::before { border: 1px solid rgba(255,255,255,.12) !important; outline: none !important; }

/* Dots now blink in discrete, irregular-looking bursts instead of only fading slowly. */
.hot-now::before {
  animation: ndDotGlance 7.4s steps(1,end) infinite, ndDotDrift45 31s linear infinite !important;
  opacity: .6 !important;
}
.hot-now::after {
  animation: ndLargeDotGlance 9.2s steps(1,end) infinite, ndLargeDotDrift45 23s linear infinite !important;
  opacity: .3 !important;
}
@keyframes ndDotGlance {
  0%, 7%, 9%, 11%, 37%, 39%, 41%, 72%, 74%, 100% { opacity: .05; }
  8%, 10%, 38%, 40%, 73% { opacity: .76; }
  52%, 54%, 56% { opacity: .28; }
  53%, 55% { opacity: .68; }
}
@keyframes ndLargeDotGlance {
  0%, 18%, 20%, 22%, 48%, 50%, 82%, 84%, 100% { opacity: .035; }
  19%, 21%, 49%, 83% { opacity: .36; }
  64%, 66% { opacity: .12; }
  65% { opacity: .42; }
}
@keyframes ndDotDrift45 {
  from { background-position: 0 0, 19px 11px, 28px 43px, 71px 17px; }
  to { background-position: -92px -92px, 111px -81px, -64px -49px, 163px -75px; }
}
@keyframes ndLargeDotDrift45 {
  from { background-position: 41px 9px, 104px 64px; }
  to { background-position: -97px -129px, 242px -74px; }
}

/* The hero carousel uses short horizontal slices and stepped transitions on
   entry, rather than a soft slide/fade as the dominant effect. */
.hot-now-card {
  transition: transform .28s steps(2,end), opacity .12s steps(2,end), border-color .08s steps(2,end) !important;
}
.hot-now-card.is-active::after { animation: ndHeroGlitchSnap .38s steps(1,end) 1 both !important; }
.hot-now-card.is-prev::after,
.hot-now-card.is-next::after { animation: ndHeroGlitchSide .22s steps(1,end) 1 both !important; }
@keyframes ndHeroGlitchSnap {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(0); }
  12% { opacity: .8; clip-path: inset(12% 0 76% 0); transform: translateX(-3px); }
  24% { opacity: .25; clip-path: inset(42% 0 45% 0); transform: translateX(3px); }
  37% { opacity: .72; clip-path: inset(68% 0 20% 0); transform: translateX(-2px); }
  51% { opacity: .22; clip-path: inset(23% 0 66% 0); transform: translateX(2px); }
  68% { opacity: .52; clip-path: inset(84% 0 6% 0); transform: translateX(0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translateX(0); }
}
@keyframes ndHeroGlitchSide {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); }
  35% { opacity: .5; clip-path: inset(35% 0 52% 0); }
  70% { opacity: .18; clip-path: inset(76% 0 10% 0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes ndTagBlinkGlitch {
  0%, 92%, 100% { transform: translate(0,0); filter: none; }
  93% { transform: translate(-2px,0); filter: drop-shadow(2px 0 var(--nd-red)); }
  94% { transform: translate(2px,0); filter: none; }
  95% { transform: translate(0,0); filter: drop-shadow(-1px 0 var(--nd-red)); }
}
@media (max-width: 640px) {
  .product-card-price-row { top: 8px !important; right: 8px !important; left: auto !important; inset-inline-end: 8px !important; }
  [dir="rtl"] .product-card-price-row { right: 8px !important; left: auto !important; }
  .product-card-sale-tag { top: 8px !important; left: 8px !important; right: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hot-now::before, .hot-now::after, .hot-now-card.is-active::after,
  .hot-now-card.is-prev::after, .hot-now-card.is-next::after,
  .product-card-sale-tag { animation: none !important; }
}


/* v6: price plates are children of the product image, explicitly pinned over its top-right corner. */
.product-card-image { position: relative !important; isolation: isolate !important; overflow: visible !important; }
.product-card-image > .product-card-price-row {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  inset: 10px 10px auto auto !important;
  z-index: 80 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: max-content !important;
  max-width: min(72%, 220px) !important;
  margin: 0 !important;
  padding: 7px 9px 8px !important;
  gap: 3px !important;
  border: 1px solid #101010 !important;
  outline: none !important;
  border-radius: 0 !important;
  background: #ef2936 !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 #101010 !important;
  transform: none !important;
}
.product-card-image > .product-card-price-row::before,
.product-card-image > .product-card-price-row::after { pointer-events: none !important; outline: none !important; }
.product-card-image > .product-card-price-row::before { inset: 0 !important; border: 0 !important; background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(0,0,0,.09) 7px 8px) !important; }
.product-card-image > .product-card-price-row::after { display: none !important; }
.product-card-image > .product-card-price-row .product-card-current-price { font-size: clamp(16px, 1.65vw, 23px) !important; line-height: 1.05 !important; }
.product-card-image > .product-card-price-row .product-card-price-label { font-size: 8px !important; }
.product-card-image > .product-card-price-row .product-card-old-price { font-size: 10px !important; }
[dir="rtl"] .product-card-image > .product-card-price-row { right: 10px !important; left: auto !important; inset: 10px 10px auto auto !important; align-items: flex-end !important; }
@media (max-width: 640px) {
  .product-card-image > .product-card-price-row { top: 7px !important; right: 7px !important; inset: 7px 7px auto auto !important; padding: 6px 7px !important; max-width: 75% !important; }
  .product-card-image > .product-card-price-row .product-card-current-price { font-size: clamp(13px, 3.7vw, 18px) !important; }
}

/* v7 refinement: unified white digital price plates, stronger card labels,
   and a cleaner cart glyph with no stray grey frames. */
.product-card-image > .product-card-price-row {
  box-sizing: border-box !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  min-height: 50px !important;
  padding: 3px 4px !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 4px !important;
  background: #fff !important;
  background-image: none !important;
  color: #080808 !important;
  border: 2px solid var(--nd-red, #f32630) !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: 4px 4px 0 var(--nd-red, #f32630) !important;
}
.product-card-image > .product-card-price-row::before,
.product-card-image > .product-card-price-row::after { display: none !important; content: none !important; }
.product-card-image > .product-card-price-row .product-card-price-label {
  display: block !important;
  color: #161616 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.product-card-image > .product-card-price-row .product-card-current-price {
  display: block !important;
  color: #050505 !important;
  font-family: 'DSEG7 Classic','Digital-7',monospace !important;
  font-size: clamp(16px, 1.5vw, 21px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.product-card-image > .product-card-price-row .product-card-old-price {
  color: #555 !important;
  font-size: 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-decoration: line-through !important;
}
.product-card-image > .product-card-price-row .product-card-discount-chip {
  align-self: flex-start !important;
  color: #fff !important;
  background: var(--nd-red, #f32630) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
}
/* Keep text and icons black in light mode. */
:root:not(.dark-theme) .product-card-image > .product-card-price-row,
:root:not(.dark-theme) .product-card-image > .product-card-price-row .product-card-current-price,
:root:not(.dark-theme) .product-card-image > .product-card-price-row .product-card-price-label { color: #050505 !important; }
:root:not(.dark-theme) .product-card-order,
:root:not(.dark-theme) .mini-cart-btn,
:root:not(.dark-theme) .product-card-order-icon { color: #050505 !important; }
:root:not(.dark-theme) .product-card-order-icon svg,
:root:not(.dark-theme) .product-card-order-icon svg * { stroke: #050505 !important; }
/* Larger category/name labels with no pill styling. */
.product-card-body .product-card-cat {
  width: fit-content !important;
  max-width: 100% !important;
  font-size: clamp(9px, .82vw, 11px) !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .055em !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-left: 2px solid var(--nd-red, #f32630) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.product-card-body .product-card-name {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  padding: 3px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: clamp(13px, 1.12vw, 16px) !important;
  line-height: 1.22 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}
/* Remove grey borders around the name/category/icon in dark mode. */
:root.dark-theme .product-card-body .product-card-cat,
:root.dark-theme .product-card-body .product-card-name,
:root.dark-theme .product-card-order,
:root.dark-theme .mini-cart-btn,
:root.dark-theme .product-card-order-icon,
:root.dark-theme .product-card-order::before,
:root.dark-theme .mini-cart-btn::before {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}
:root.dark-theme .product-card-order,
:root.dark-theme .mini-cart-btn { border-left: 0 !important; background: transparent !important; }
:root.dark-theme .product-card-order-icon {
  background: transparent !important;
  border: 0 !important;
  color: #f7f7f7 !important;
  filter: drop-shadow(3px 2px 0 rgba(243,38,48,.9)) !important;
}
:root.dark-theme .product-card-order-icon svg,
:root.dark-theme .product-card-order-icon svg * { stroke: #f7f7f7 !important; }
/* Cart action: remove the nested square and use a bold technical cart glyph. */
.product-card-order::before,
.mini-cart-btn::before { display: none !important; content: none !important; }
.product-card-order-icon {
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #050505 !important;
  filter: drop-shadow(3px 3px 0 rgba(243,38,48,.8)) !important;
  transition: transform .12s steps(2,end), filter .12s steps(2,end) !important;
}
.product-card-order-icon svg,
.product-card-order-icon svg * {
  width: 43px !important;
  height: 43px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.8 !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
}
.product-card-order:hover .product-card-order-icon,
.mini-cart-btn:hover .product-card-order-icon { transform: translate(-1px,-1px) !important; filter: drop-shadow(4px 4px 0 var(--nd-red, #f32630)) !important; }
@media (max-width: 640px) {
  .product-card-image > .product-card-price-row { width: 132px !important; min-width: 132px !important; max-width: 132px !important; min-height: 44px !important; padding: 2px 4px !important; }
  .product-card-image > .product-card-price-row .product-card-current-price { font-size: clamp(14px, 4vw, 18px) !important; }
  .product-card-body .product-card-cat { font-size: 9px !important; }
  .product-card-body .product-card-name { font-size: 12px !important; }
  .product-card-order-icon { width: 42px !important; height: 42px !important; }
  .product-card-order-icon svg,.product-card-order-icon svg * { width: 39px !important; height: 39px !important; }
}


/* v9 refinements: larger price type without changing badge dimensions. */
.product-card-image > .product-card-price-row {
  width: 150px !important; min-width: 150px !important; max-width: 150px !important;
  height: 50px !important; min-height: 50px !important; max-height: 50px !important;
  box-sizing: border-box !important; padding: 2px 4px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important; gap: 3px !important;
}
.product-card-image > .product-card-price-row .product-card-current-price,
.product-card-image > .product-card-price-row .product-card-current-price strong {
  font-size: clamp(19px, 1.65vw, 23px) !important; line-height: 1 !important;
  font-weight: 900 !important; letter-spacing: -.045em !important;
  white-space: nowrap !important;
}
.product-card-body .product-card-name {
  font-size: clamp(15px, 1.28vw, 18px) !important;
  line-height: 1.2 !important; font-weight: 900 !important;
}
/* Pixel-grid cart: sharp corners, orthogonal strokes, square wheel pixels. */
.product-card-order-icon {
  width: 48px !important; height: 48px !important;
  image-rendering: pixelated !important; shape-rendering: crispEdges !important;
  filter: drop-shadow(3px 3px 0 rgba(243,38,48,.85)) !important;
}
.product-card-order-icon svg {
  width: 46px !important; height: 46px !important;
  shape-rendering: crispEdges !important; image-rendering: pixelated !important;
}
.product-card-order-icon svg path {
  stroke-width: 2.7 !important; stroke-linecap: butt !important; stroke-linejoin: miter !important;
  vector-effect: non-scaling-stroke !important;
}
.product-card-order-icon svg .cart-wheel rect { shape-rendering: crispEdges !important; }
@media (max-width: 640px) {
  .product-card-image > .product-card-price-row { width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; padding: 2px 3px !important; }
  .product-card-image > .product-card-price-row .product-card-current-price,
  .product-card-image > .product-card-price-row .product-card-current-price strong { font-size: clamp(17px, 4.8vw, 20px) !important; }
  .product-card-body .product-card-name { font-size: 14px !important; }
  .product-card-order-icon { width: 44px !important; height: 44px !important; }
  .product-card-order-icon svg { width: 42px !important; height: 42px !important; }
}


/* v10: red hover outlines, sharper pixel icons, and stronger drawer panels. */
@media (hover:hover) {
  .product-card:hover .product-card-body .product-card-name,
  .product-card:focus-within .product-card-body .product-card-name {
    outline: 2px solid var(--nd-red, #f32630) !important;
    outline-offset: 1px !important;
    border-color: var(--nd-red, #f32630) !important;
    box-shadow: 3px 3px 0 rgba(243,38,48,.28) !important;
    transition: outline-color .12s steps(2,end), box-shadow .12s steps(2,end) !important;
  }
}

/* The slide-out menu and cart are slightly wider and use a visible red frame. */
.drawer-root .drawer-panel {
  width: min(25rem, 88vw) !important;
  border: 2px solid var(--nd-red, #f32630) !important;
  box-shadow: 7px 0 0 rgba(243,38,48,.24), 0 0 24px rgba(243,38,48,.16) !important;
}
.cart-overlay-layer .cart-drawer-panel {
  width: min(33rem, 94vw) !important;
  border: 2px solid var(--nd-red, #f32630) !important;
  box-shadow: -7px 0 0 rgba(243,38,48,.24), 0 0 26px rgba(243,38,48,.18) !important;
}
@media (min-width: 768px) {
  .drawer-root .drawer-panel { width: min(27rem, 38vw) !important; }
  .cart-overlay-layer .cart-drawer-panel { width: min(34rem, 46vw) !important; }
}

/* Pixel-grid treatment for the site's inline interface icons without affecting product photos. */
.icon > svg,
.find-us-icon > svg,
.category-chip-icon svg,
.floating-sf-search-icon svg {
  shape-rendering: crispEdges !important;
  image-rendering: pixelated !important;
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
}
.icon > svg path,
.icon > svg line,
.icon > svg polyline,
.icon > svg polygon,
.icon > svg rect,
.icon > svg circle,
.find-us-icon > svg path,
.find-us-icon > svg line,
.find-us-icon > svg polyline,
.find-us-icon > svg rect,
.find-us-icon > svg circle {
  stroke-linecap: butt !important;
  stroke-linejoin: miter !important;
}
.desktop-edge-toggle .icon {
  width: 28px !important; height: 28px !important;
  color: var(--ink) !important;
  filter: drop-shadow(2px 0 0 rgba(243,38,48,.95)) drop-shadow(-1px 1px 0 rgba(243,38,48,.55)) !important;
}
.desktop-edge-toggle .icon svg {
  width: 27px !important; height: 27px !important;
  shape-rendering: crispEdges !important; image-rendering: pixelated !important;
}
.desktop-edge-toggle:hover .icon { animation: ndIconGlitch .22s steps(2,end) infinite; }
@keyframes ndIconGlitch {
  0% { filter: drop-shadow(2px 0 0 #f32630) drop-shadow(-1px 1px 0 rgba(243,38,48,.6)); transform: translate(0,0); }
  50% { filter: drop-shadow(-2px 1px 0 #f32630) drop-shadow(2px -1px 0 rgba(243,38,48,.7)); transform: translate(1px,-1px); }
  100% { filter: drop-shadow(2px 0 0 #f32630) drop-shadow(-1px 1px 0 rgba(243,38,48,.6)); transform: translate(0,0); }
}

/* Cart contents now follow the homepage card language: square corners, red borders,
   image-forward layout, and crisp price/type hierarchy. */
.cart-item-mobile,
.cart-item-desktop {
  border: 1px solid var(--nd-red, #f32630) !important;
  border-radius: 0 !important;
  padding: 10px !important;
  background: var(--surface) !important;
  box-shadow: 3px 3px 0 rgba(243,38,48,.12) !important;
}
.cart-item-mobile .w-14.h-14,
.cart-item-desktop .cart-item-image {
  border-radius: 0 !important;
  border: 1px solid var(--nd-red, #f32630) !important;
}
.cart-item-mobile .font-semibold,
.cart-item-desktop .font-semibold { font-weight: 900 !important; }
.cart-item-desktop .price-heavy { font-size: 18px !important; font-weight: 900 !important; }
.cart-item-mobile .qty-control,
.cart-item-desktop .qty-control { border-radius: 0 !important; }


/* HERO DOT FIELD — layered pixel blink + restrained red scan wave */
.hot-now {
  position: relative !important;
  overflow: hidden !important;
}
.hot-now::before {
  background-image:
    radial-gradient(circle, var(--nd-ambient-dot-strong) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, var(--nd-ambient-dot) 0 2px, transparent 2.7px),
    radial-gradient(circle, var(--nd-ambient-dot-strong) 0 .65px, transparent 1.25px),
    radial-gradient(circle, var(--nd-ambient-dot) 0 1.55px, transparent 2.4px),
    radial-gradient(circle, rgba(243,38,48,.8) 0 1.15px, transparent 2px) !important;
  background-size: 27px 27px, 61px 61px, 83px 83px, 119px 119px, 97px 97px !important;
  background-position: 0 0, 19px 11px, 28px 43px, 71px 17px, 13px 37px !important;
  animation:
    ndHeroPixelDrift 28s linear infinite,
    ndHeroPixelBlink 5.4s steps(1, end) infinite !important;
}
.hot-now::after {
  background-image:
    radial-gradient(circle, var(--nd-ambient-dot-strong) 0 3px, transparent 3.7px),
    radial-gradient(circle, var(--nd-ambient-dot) 0 2.5px, transparent 3.3px),
    linear-gradient(112deg, transparent 0%, transparent 42%, rgba(243,38,48,0) 46%, rgba(243,38,48,.12) 49%, rgba(243,38,48,.32) 50%, rgba(243,38,48,.08) 51%, transparent 55%, transparent 100%) !important;
  background-size: 151px 151px, 193px 193px, 240% 240% !important;
  background-position: 41px 9px, 104px 64px, -130% -30% !important;
  animation: ndHeroRedWave 12s linear infinite !important;
}
@keyframes ndHeroPixelDrift {
  0% { background-position: 0 0, 19px 11px, 28px 43px, 71px 17px, 13px 37px; }
  100% { background-position: 54px -54px, -42px -50px, 91px -39px, 15px -102px, -84px 121px; }
}
@keyframes ndHeroPixelBlink {
  0%, 17%, 33%, 51%, 72%, 100% { opacity: .44; }
  18%, 19%, 53%, 54%, 74% { opacity: .82; }
  20%, 55%, 75% { opacity: .28; }
}
@keyframes ndHeroRedWave {
  0% { opacity: .13; background-position: 41px 9px, 104px 64px, -130% -30%; }
  25% { opacity: .22; background-position: 56px -13px, 81px 40px, -40% -10%; }
  50% { opacity: .28; background-position: 28px 22px, 117px 79px, 50% 20%; }
  75% { opacity: .19; background-position: 69px -36px, 64px 21px, 140% 55%; }
  100% { opacity: .13; background-position: 41px 9px, 104px 64px, 240% 90%; }
}
@media (prefers-reduced-motion: reduce) {
  .hot-now::before, .hot-now::after {
    animation: none !important;
  }
}

/* v12 corrective pass: make hero dot animation visibly animate rather than merely drift. */
.hot-now { isolation:isolate !important; position:relative !important; }
.hot-now::before {
  z-index:0 !important;
  opacity:.95 !important;
  background-image:
    radial-gradient(circle, rgba(243,38,48,.96) 0 1.4px, transparent 2.5px),
    radial-gradient(circle, var(--nd-ambient-dot-strong) 0 1.25px, transparent 2px),
    radial-gradient(circle, var(--nd-ambient-dot) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(243,38,48,.58) 0 1px, transparent 2.4px) !important;
  background-size: 89px 89px, 23px 23px, 47px 47px, 131px 131px !important;
  background-position: 0 0, 11px 7px, 24px 19px, 61px 37px !important;
  animation: ndHeroDotsActuallyMove 7s steps(1,end) infinite, ndHeroDotsTravel 19s linear infinite !important;
  will-change:background-position,opacity;
}
.hot-now::after {
  z-index:0 !important;
  opacity:.8 !important;
  background-image: linear-gradient(180deg, transparent 0%, rgba(243,38,48,0) 35%, rgba(243,38,48,.28) 49%, rgba(243,38,48,.06) 53%, transparent 64%) !important;
  background-size:100% 230% !important;
  background-position:0 -130% !important;
  animation:ndHeroScanPass 6.5s linear infinite !important;
  will-change:background-position;
}
.hot-now > * { position:relative; z-index:2; }
@keyframes ndHeroDotsActuallyMove {
  0%, 13%, 42%, 77%, 100% { opacity:.48; filter:brightness(.9); }
  14%, 16%, 43%, 46%, 78%, 81% { opacity:1; filter:brightness(1.8); }
  15%, 44%, 79% { opacity:.25; filter:brightness(1.1); }
}
@keyframes ndHeroDotsTravel {
  0% { background-position:0 0, 11px 7px, 24px 19px, 61px 37px; }
  100% { background-position:89px -89px, -58px 69px, 71px -47px, -70px 94px; }
}
@keyframes ndHeroScanPass {
  0% { background-position:0 -130%; opacity:0; }
  12% { opacity:.55; }
  65% { opacity:.3; }
  100% { background-position:0 130%; opacity:0; }
}

/* Mobile: compact product-card controls and type without changing desktop sizing. */
@media (max-width:767px) {
  .shop-header-menu-btn { display:none !important; }
  .product-card { grid-template-columns:minmax(0,1fr) 36px !important; grid-template-rows:auto 66px !important; }
  .product-card-body { min-height:66px !important; padding:5px 4px 5px 6px !important; gap:3px !important; }
  .product-card-body .product-card-name { font-size:9px !important; line-height:1.15 !important; padding:2px 3px !important; }
  .product-card-order,.mini-cart-btn { width:36px !important; min-width:36px !important; max-width:36px !important; height:34px !important; }
  .product-card-order-icon { width:25px !important; height:25px !important; }
  .product-card-order-icon svg,.product-card-order-icon svg * { width:22px !important; height:22px !important; }
  .product-card-price-row { top:6px !important; right:6px !important; max-width:62% !important; padding:4px 5px !important; box-shadow:2px 2px 0 #111 !important; }
  [dir="rtl"] .product-card-price-row { right:6px !important; }
  .product-card-current-price { font-size:clamp(10px, 3vw, 14px) !important; line-height:1.05 !important; }
  .product-card-price-label { font-size:6px !important; }
  .product-card-sale-tag { top:6px !important; left:6px !important; min-width:0 !important; padding:4px !important; font-size:9px !important; }
  [dir="rtl"] .product-card-sale-tag { left:6px !important; }
  .cart-item-mobile { align-items:flex-start !important; }
  .cart-item-image-mobile { width:56px !important; height:56px !important; object-fit:cover !important; border-radius:0 !important; border:1px solid var(--nd-red,#f32630) !important; background:var(--bg) !important; }
  .cart-item-mobile .font-semibold { font-size:12px !important; line-height:1.2 !important; }
  .cart-item-mobile .qty-control { border-radius:0 !important; }
  .cart-item-mobile .qty-control { width:25px !important; height:25px !important; }
  /* Related cards reuse the same product-card visual grammar and mobile proportions. */
  .related-products-grid .product-card { aspect-ratio:1/1 !important; grid-template-columns:minmax(0,1fr) 36px !important; grid-template-rows:auto 66px !important; }
  .related-products-grid .product-card-body { min-height:66px !important; }
  .related-products-grid .product-card-price-row { top:6px !important; right:6px !important; padding:4px 5px !important; }
  .related-products-grid .product-card-body .product-card-name { font-size:9px !important; }
  .desktop-edge-toggle .icon svg { width:20px !important; height:20px !important; }
  /* Prevent add-to-cart updates from causing animated card repaint flicker on touch devices. */
  .product-card, .product-card-image, .product-card-image img { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
  .product-card:hover::after, .product-card-price-row::before { animation:none !important; }
  .quick-add-modal,.checkout-glass,.confirm-glass { border-radius:0 !important; }
  .quick-add-modal .rounded-full,.quick-add-modal .rounded-xl,.quick-add-modal .rounded-lg,
  .checkout-glass .rounded-full,.checkout-glass .rounded-xl,.checkout-glass .rounded-lg { border-radius:0 !important; }
  .quick-add-modal { padding:16px !important; width:100% !important; max-width:430px !important; }
  .quick-add-modal .flex.items-start.justify-between { align-items:center !important; gap:10px !important; }
  .quick-add-modal .grid.grid-cols-2 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:8px !important; }
  .quick-add-modal .grid.grid-cols-2 > button { min-width:0 !important; min-height:44px !important; padding:10px 8px !important; border-radius:0 !important; font-size:12px !important; line-height:1.2 !important; }
  .quick-add-modal button { border-radius:0 !important; }
  .checkout-glass { border-radius:0 !important; padding:16px !important; }
  .checkout-glass img { border-radius:0 !important; border:1px solid var(--nd-red,#f32630) !important; }
}

/* Related product cards keep the same frame, price plate, name plate and cart control as home cards. */
.related-products-grid .product-card { border-radius:0 !important; overflow:visible !important; }
.related-products-grid .product-card-image,
.related-products-grid .product-card-image img { border-radius:0 !important; }
.related-products-grid .product-card-price-row { border-radius:0 !important; }
.related-products-grid .product-card-body .product-card-name { border-radius:0 !important; }

@media (prefers-reduced-motion: reduce) {
  .hot-now::before,.hot-now::after { animation:none !important; }
}


/* v13: mobile-card sizing, related-card parity, toolbar cleanup and cart paint stability. */
/* Keep the edge-mounted left menu control, but never show a duplicate hamburger in the top bar. */
header.shop-header-glass .shop-header-menu-btn,
header.shop-header-glass .header-menu-btn,
header.shop-header-glass .hamburger-btn,
header.shop-header-glass .hamburger,
header.shop-header-glass button[aria-label*="menu" i],
header.shop-header-glass button[title*="menu" i] {
  display: none !important;
}

/* Related products should be the same full-size card component as the storefront grid. */
.related-products-grid {
  display: grid !important;
  grid-template-rows: minmax(0, auto) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: calc((100% - 48px) / 4) !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  height: auto !important;
  padding: 2px 2px 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
}
.related-products-grid > .product-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  align-self: start !important;
  margin: 0 !important;
  scroll-snap-align: start !important;
}
.related-products-grid .product-card-image {
  aspect-ratio: 1 / .92 !important;
  height: auto !important;
  min-height: 0 !important;
}
.related-products-grid .product-card-body {
  grid-template-columns: none !important;
  grid-row: 2 !important;
}

@media (max-width: 767px) {
  /* Narrow price plate so it leaves most of the product photo visible. */
  .product-card-image > .product-card-price-row {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    top: 5px !important;
    right: 5px !important;
    left: auto !important;
    padding: 2px 3px !important;
    gap: 1px !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    justify-content: center !important;
    border-width: 1px !important;
    box-shadow: 2px 2px 0 #111 !important;
    overflow: hidden !important;
  }
  [dir="rtl"] .product-card-image > .product-card-price-row { right: 5px !important; left: auto !important; }
  .product-card-image > .product-card-price-row .product-card-price-label {
    font-size: 5px !important;
    line-height: 1 !important;
    margin: 0 !important;
  }
  .product-card-image > .product-card-price-row .product-card-current-price,
  .product-card-image > .product-card-price-row .product-card-current-price strong {
    font-size: clamp(10px, 3.2vw, 12px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }
  .product-card-image > .product-card-price-row .product-card-old-price,
  .product-card-image > .product-card-price-row .product-card-discount-chip {
    font-size: 6px !important;
    line-height: 1 !important;
    padding: 0 2px !important;
    border-width: 0 !important;
  }

  /* Tighter footer so the category and name feel like one compact information block. */
  .product-card-body,
  .related-products-grid .product-card-body {
    min-height: 66px !important;
    padding: 3px 3px 3px 4px !important;
    gap: 1px !important;
    row-gap: 1px !important;
    justify-content: center !important;
  }
  .product-card-body .product-card-cat {
    max-width: 100% !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 1px 3px !important;
    border-width: 1px !important;
    border-left-width: 1px !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    letter-spacing: .025em !important;
  }
  .product-card-body .product-card-cat .icon,
  .product-card-body .product-card-cat .icon svg {
    width: 9px !important;
    height: 9px !important;
    flex: 0 0 9px !important;
  }
  .product-card-body .product-card-name {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 3px !important;
    border-width: 1px !important;
    outline-width: 1px !important;
    font-size: 9px !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
  }
  .product-card::before { height: 1px !important; }
  .product-card::after { opacity: 0 !important; animation: none !important; }

  /* Same number of columns, image proportion, footer height and controls in related cards. */
  .related-products-grid {
    grid-template-rows: minmax(0, auto) !important;
    grid-auto-columns: calc((100% - 12px) / 2) !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
    padding: 2px 1px 10px !important;
  }
  .related-products-grid > .product-card {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    grid-template-rows: auto 66px !important;
  }
  .related-products-grid .product-card-image { aspect-ratio: 1 / .92 !important; }
  .related-products-grid .product-card-body { min-height: 66px !important; }

  /* The fixed cart overlay was repainting several moving dot layers during opening.
     Use one stable composited panel on touch screens to eliminate the flash. */
  .cart-overlay-layer {
    transition: opacity .18s ease-out !important;
    contain: layout paint style !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .cart-overlay-layer > .absolute.inset-0 {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 8, 8, .52) !important;
  }
  .cart-overlay-layer > .absolute.inset-0::after,
  .drawer-root > .absolute.inset-0::after {
    animation: none !important;
    background-image: none !important;
    opacity: 0 !important;
  }
  .cart-overlay-layer .cart-drawer-panel {
    animation: none !important;
    background-image: none !important;
    background-color: var(--surface) !important;
    transition: transform .18s ease-out, visibility 0s linear 0s !important;
    will-change: transform !important;
    transform: translate3d(100%, 0, 0);
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  .cart-overlay-layer .cart-drawer-panel::before {
    animation: none !important;
    background-image: none !important;
    display: none !important;
  }
  .cart-overlay-layer .cart-drawer-panel > * { backface-visibility: hidden; }

  /* Center the hero label/title on narrow screens without moving the floating controls. */
  .hot-now-header,
  .hot-now-auto-heading {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .hot-now-header { width: max-content !important; max-width: 94% !important; }
  .hot-now-auto-heading { width: max-content !important; max-width: 94% !important; }
}

/* Reduced-motion preference remains respected by the hero and UI. */
@media (prefers-reduced-motion: reduce) {
  .cart-overlay-layer,
  .cart-overlay-layer .cart-drawer-panel,
  .cart-overlay-layer .cart-drawer-panel::before,
  .cart-overlay-layer > .absolute.inset-0::after { transition: none !important; animation: none !important; }
}


/* v14 — desktop Hot Now alignment, mobile cart dot field, Arabic typography,
   and a red-only animated hero matrix. */
@media (min-width: 768px) {
  .hot-now-header,
  .hot-now-auto-heading {
    position: absolute !important;
    top: 9px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: min(92%, 760px) !important;
    margin: 0 !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .hot-now { padding-top: 70px !important; }
}

/* Keep only red pixels in the hero background; no grey/black dot layers or scan haze. */
.hot-now {
  background-image: none !important;
  isolation: isolate !important;
}
.hot-now::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .8 !important;
  background-color: transparent !important;
  background-image:
    radial-gradient(circle, rgba(243,38,48,.96) 0 1.35px, transparent 2px),
    radial-gradient(circle, rgba(243,38,48,.62) 0 .9px, transparent 1.8px) !important;
  background-size: 29px 29px, 73px 73px !important;
  background-position: 0 0, 17px 31px !important;
  transform: translate3d(0,0,0) !important;
  animation: ndRedOnlyDotTravel 18s ease-in-out infinite alternate, ndRedOnlyDotBlink 4.8s steps(1,end) infinite !important;
  will-change: transform, filter !important;
}
.hot-now::after {
  content: none !important;
  display: none !important;
  background-image: none !important;
  animation: none !important;
}
.hot-now > * { position: relative; z-index: 2; }
@keyframes ndRedOnlyDotTravel {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-13px,9px,0); }
  100% { transform: translate3d(13px,-12px,0); }
}
@keyframes ndRedOnlyDotBlink {
  0%, 23%, 49%, 75%, 100% { filter: brightness(.82); }
  24%, 26%, 76%, 79% { filter: brightness(1.65); }
  27%, 77% { filter: brightness(.55); }
}

/* Mobile cart: restore an animated dotted matrix on the drawer itself while
   keeping movement on a lightweight pseudo-layer to avoid flashing during open. */
@media (max-width: 767px) {
  .cart-overlay-layer .cart-drawer-panel {
    position: absolute !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background-color: var(--surface) !important;
    background-image: none !important;
  }
  .cart-overlay-layer .cart-drawer-panel::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: -24px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: .26 !important;
    background-image:
      radial-gradient(circle, rgba(243,38,48,.66) 0 .85px, transparent 1.55px),
      radial-gradient(circle, var(--digital-grid) .7px, transparent 1.15px) !important;
    background-size: 17px 17px, 23px 23px !important;
    background-position: 0 0, 8px 11px !important;
    animation: ndCartDotsCompositor 22s linear infinite !important;
    will-change: transform, opacity !important;
    transform: translate3d(0,0,0) !important;
  }
  .cart-overlay-layer .cart-drawer-panel > * {
    position: relative !important;
    z-index: 1 !important;
  }
}
@keyframes ndCartDotsCompositor {
  0% { transform: translate3d(0,0,0); opacity: .19; }
  35% { opacity: .28; }
  50% { transform: translate3d(-18px,18px,0); opacity: .24; }
  85% { opacity: .31; }
  100% { transform: translate3d(-36px,36px,0); opacity: .19; }
}

/* Arabic interface typography: Cairo for legible, geometric Arabic; prices keep
   their digital-number face. Explicit scale steps keep each area readable. */
.arabic-ui {
  font-family: 'Cairo', sans-serif !important;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0 !important;
  font-synthesis: none;
}
.arabic-ui h1,
.arabic-ui h2,
.arabic-ui h3,
.arabic-ui h4,
.arabic-ui .font-display,
.arabic-ui .section-title,
.arabic-ui .category-rail-heading,
.arabic-ui .hot-now-header,
.arabic-ui .hot-now-auto-heading {
  font-family: 'Cairo', sans-serif !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
}
.arabic-ui .shop-header-inner { font-size: 13px !important; }
.arabic-ui .hot-now-badge,
.arabic-ui .hot-now-auto-heading { font-family: 'Cairo', sans-serif !important; font-size: 15px !important; letter-spacing: 0 !important; }
.arabic-ui .category-rail-title,
.arabic-ui .product-card-body .product-card-cat,
.arabic-ui .product-card-sale-kicker { font-family: 'Cairo', sans-serif !important; font-size: 10px !important; letter-spacing: 0 !important; line-height: 1.35 !important; }
.arabic-ui .product-card-body .product-card-name { font-family: 'Cairo', sans-serif !important; font-size: 13px !important; line-height: 1.35 !important; letter-spacing: 0 !important; font-weight: 800 !important; }
.arabic-ui .product-card-price-row,
.arabic-ui .hot-now-price-badge-current strong,
.arabic-ui .hot-now-price-badge-old s,
.arabic-ui .hot-now-discount-badge { font-family: 'DSEG7 Classic','Digital-7',monospace !important; }
.arabic-ui .product-card-price-label,
.arabic-ui .hot-now-price-badge-label,
.arabic-ui .hot-now-discount-badge span { font-family: 'Cairo', sans-serif !important; letter-spacing: 0 !important; }
.arabic-ui .cart-drawer-panel h2,
.arabic-ui .product-detail-shell h2 { font-family: 'Cairo', sans-serif !important; font-size: 21px !important; line-height: 1.35 !important; }
.arabic-ui .cart-item-mobile .font-semibold,
.arabic-ui .cart-item-desktop .font-semibold { font-family: 'Cairo', sans-serif !important; font-size: 14px !important; line-height: 1.45 !important; }
.arabic-ui .cart-item-mobile p,
.arabic-ui .cart-item-desktop p { letter-spacing: 0 !important; }
.arabic-ui button,
.arabic-ui input,
.arabic-ui select,
.arabic-ui textarea,
.arabic-ui label { font-family: 'Cairo', sans-serif !important; letter-spacing: 0 !important; }
.arabic-ui input,
.arabic-ui select,
.arabic-ui textarea { font-size: 14px !important; line-height: 1.5 !important; }
.arabic-ui .checkout-glass label,
.arabic-ui .confirm-glass label { font-size: 12px !important; line-height: 1.45 !important; }
.arabic-ui .checkout-glass button,
.arabic-ui .confirm-glass button,
.arabic-ui .quick-add-modal button { font-size: 13px !important; line-height: 1.45 !important; }
.arabic-ui .product-detail-shell p,
.arabic-ui .product-detail-shell li { font-size: 14px; line-height: 1.7; }
@media (max-width: 767px) {
  .arabic-ui { font-size: 13px !important; line-height: 1.55 !important; }
  .arabic-ui .hot-now-badge,
  .arabic-ui .hot-now-auto-heading { font-size: 13px !important; }
  .arabic-ui .product-card-body .product-card-name { font-size: 11px !important; line-height: 1.3 !important; }
  .arabic-ui .product-card-body .product-card-cat { font-size: 8px !important; line-height: 1.3 !important; }
  .arabic-ui .cart-item-mobile .font-semibold { font-size: 13px !important; }
  .arabic-ui .cart-drawer-panel h2 { font-size: 19px !important; }
  .arabic-ui .checkout-glass button,
  .arabic-ui .confirm-glass button,
  .arabic-ui .quick-add-modal button { font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hot-now::before,
  .cart-overlay-layer .cart-drawer-panel::before { animation: none !important; }
}

/* v15 — bolder mobile prices, hard-cut glitch transitions, monochrome cart dots,
   and square glitch-framed filter/category popups. */
@media (max-width: 767px) {
  /* Keep the compact badge footprint, but make the price numerals match desktop's
     DSEG/digital face and read more clearly on narrow screens. */
  .product-card-image > .product-card-price-row .product-card-current-price,
  .product-card-image > .product-card-price-row .product-card-current-price strong {
    font-family: 'DSEG7 Classic','Digital-7',monospace !important;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    -webkit-text-stroke: .25px currentColor !important;
    text-shadow: .55px 0 currentColor !important;
  }
  .product-card-image > .product-card-price-row .product-card-price-label {
    font-family: 'DM Mono',monospace !important;
    font-size: 5px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
  }
}

/* Do not fade carousel cards. Position changes happen in hard steps, then a strong
   multi-slice glitch is drawn over the incoming hero image. */
.hot-now-card {
  transition: transform .18s steps(2,end), opacity 0s linear, box-shadow 0s linear !important;
  will-change: transform !important;
}
.hot-now-card > img,
.hot-now-card > .hot-now-card-fallback {
  transition: none !important;
}
.hot-now-card::after {
  z-index: 38 !important;
  opacity: 1 !important;
  filter: opacity(0);
  background:
    repeating-linear-gradient(0deg,
      transparent 0 7px,
      rgba(243,38,48,.72) 7px 9px,
      transparent 9px 14px),
    linear-gradient(90deg,
      transparent 0 12%, rgba(243,38,48,.42) 12% 27%, transparent 27% 54%,
      rgba(255,255,255,.25) 54% 65%, transparent 65% 82%, rgba(243,38,48,.35) 82% 89%, transparent 89%) !important;
  mix-blend-mode: screen !important;
}
.hot-now-card.is-active::after {
  animation: ndHeroHardGlitchV15 .46s steps(1,end) 1 both !important;
}
.hot-now-card.is-prev::after,
.hot-now-card.is-next::after {
  animation: ndHeroSideGlitchV15 .24s steps(1,end) 1 both !important;
}
.hot-now-card.is-active > img {
  animation: ndHeroImageGlitchV15 .42s steps(1,end) 1 both !important;
}
@keyframes ndHeroHardGlitchV15 {
  0% { filter: opacity(0); clip-path: inset(0 0 92% 0); transform: translateX(0); }
  8% { filter: opacity(1); clip-path: inset(7% 0 76% 0); transform: translateX(-5px); }
  17% { filter: opacity(.75); clip-path: inset(30% 0 55% 0); transform: translateX(4px); }
  26% { filter: opacity(.95); clip-path: inset(47% 0 39% 0); transform: translateX(-3px); }
  35% { filter: opacity(.62); clip-path: inset(17% 0 72% 0); transform: translateX(6px); }
  46% { filter: opacity(.92); clip-path: inset(66% 0 20% 0); transform: translateX(-4px); }
  57% { filter: opacity(.7); clip-path: inset(81% 0 7% 0); transform: translateX(3px); }
  68% { filter: opacity(.9); clip-path: inset(37% 0 48% 0); transform: translateX(-2px); }
  82% { filter: opacity(.45); clip-path: inset(0 0 0 0); transform: translateX(1px); }
  100% { filter: opacity(0); clip-path: inset(0 0 0 0); transform: translateX(0); }
}
@keyframes ndHeroSideGlitchV15 {
  0% { filter: opacity(0); clip-path: inset(0 0 100% 0); }
  25% { filter: opacity(.8); clip-path: inset(28% 0 58% 0); }
  50% { filter: opacity(.5); clip-path: inset(58% 0 25% 0); }
  75% { filter: opacity(.8); clip-path: inset(80% 0 8% 0); }
  100% { filter: opacity(0); clip-path: inset(0 0 0 0); }
}
@keyframes ndHeroImageGlitchV15 {
  0%, 100% { transform: translateX(0) skewX(0); filter: none; }
  12% { transform: translateX(-4px) skewX(-1.2deg); filter: contrast(1.55) saturate(1.5); }
  23% { transform: translateX(3px) skewX(1deg); filter: contrast(1.25) hue-rotate(-7deg); }
  37% { transform: translateX(-2px) skewX(0); filter: contrast(1.6) saturate(1.65); }
  49% { transform: translateX(4px) skewX(.8deg); filter: contrast(1.2); }
  63% { transform: translateX(-1px) skewX(-.5deg); filter: contrast(1.4) hue-rotate(5deg); }
  78% { transform: translateX(1px); filter: contrast(1.1); }
}

/* Category carousel below the hero uses the same stepped, no-fade glitch language. */
.category-rail-card {
  transition: transform .18s steps(2,end), opacity 0s linear !important;
}
.category-rail-card::after {
  content: '' !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 15 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  filter: opacity(0);
  border: 1px solid var(--nd-red,#f32630) !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(243,38,48,.56) 6px 8px, transparent 8px 13px),
    linear-gradient(90deg, transparent 0 16%, rgba(243,38,48,.2) 16% 36%, transparent 36% 66%, rgba(255,255,255,.15) 66% 76%, transparent 76%) !important;
  mix-blend-mode: screen !important;
}
.category-rail-card.is-center::after {
  animation: ndCategoryHardGlitchV15 .4s steps(1,end) 1 both !important;
}
.category-rail-card .category-chip-icon {
  transition: none !important;
  box-shadow: 2px 2px 0 var(--nd-red,#f32630), -1px 0 0 rgba(243,38,48,.35) !important;
}
@keyframes ndCategoryHardGlitchV15 {
  0% { filter: opacity(0); clip-path: inset(0 0 100% 0); transform: translateX(0); }
  18% { filter: opacity(.95); clip-path: inset(12% 0 72% 0); transform: translateX(-3px); }
  36% { filter: opacity(.55); clip-path: inset(35% 0 49% 0); transform: translateX(2px); }
  55% { filter: opacity(.9); clip-path: inset(58% 0 26% 0); transform: translateX(-2px); }
  76% { filter: opacity(.65); clip-path: inset(78% 0 7% 0); transform: translateX(2px); }
  100% { filter: opacity(0); clip-path: inset(0 0 0 0); transform: translateX(0); }
}

/* Cart uses the exact monochrome animated pixel matrix from the side menu — no red layer. */
.cart-overlay-layer .cart-drawer-panel {
  background-color: var(--surface) !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 15px 15px !important;
  animation: nothingPanelDots 28s linear infinite !important;
}
.cart-overlay-layer .cart-drawer-panel::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
  animation: none !important;
}

/* Filter/category popups from the floating navigation: square geometry and a
   periodically displaced red frame, with square controls inside. */
.shop-toolbar-popup {
  position: fixed !important;
  border-radius: 0 !important;
  border: 1px solid var(--nd-red,#f32630) !important;
  outline: 1px solid var(--nd-red,#f32630) !important;
  outline-offset: 3px !important;
  box-shadow: 4px 4px 0 var(--nd-red,#f32630), 8px 8px 0 rgba(243,38,48,.18) !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
}
.shop-toolbar-popup::before {
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 20 !important;
  pointer-events: none !important;
  border: 1px solid rgba(243,38,48,.92) !important;
  box-shadow: 2px 0 0 rgba(243,38,48,.75), -2px 0 0 rgba(243,38,48,.38) !important;
  animation: ndToolbarOutlineGlitchV15 3.1s steps(1,end) infinite !important;
}
.shop-toolbar-popup,
.shop-toolbar-popup * {
  border-radius: 0 !important;
}
.shop-toolbar-popup button {
  transition: color .08s steps(1,end), border-color .08s steps(1,end), box-shadow .08s steps(1,end) !important;
}
.shop-toolbar-popup button:hover,
.shop-toolbar-popup button:focus-visible {
  color: var(--nd-red,#f32630) !important;
  outline: 1px solid var(--nd-red,#f32630) !important;
  outline-offset: -2px !important;
  box-shadow: inset 3px 0 0 var(--nd-red,#f32630), 2px 2px 0 rgba(243,38,48,.4) !important;
}
@keyframes ndToolbarOutlineGlitchV15 {
  0%, 82%, 100% { transform: translate(0,0); clip-path: inset(0 0 0 0); opacity: .9; }
  84% { transform: translate(3px,-1px); clip-path: inset(0 0 66% 0); opacity: 1; }
  86% { transform: translate(-2px,1px); clip-path: inset(30% 0 35% 0); opacity: .8; }
  88% { transform: translate(2px,0); clip-path: inset(75% 0 0 0); opacity: 1; }
  90% { transform: translate(0,0); clip-path: inset(0 0 0 0); opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  .hot-now-card,
  .hot-now-card.is-active::after,
  .hot-now-card.is-prev::after,
  .hot-now-card.is-next::after,
  .hot-now-card.is-active > img,
  .category-rail-card,
  .category-rail-card.is-center::after,
  .shop-toolbar-popup::before,
  .cart-overlay-layer .cart-drawer-panel {
    animation: none !important;
    transition: none !important;
  }
}

/* v16 performance + overlay polish:
   keep the page texture static (avoids repainting the entire document), while
   moving each drawer's dot field as a single composited layer. */
body {
  animation: none !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
}
.shop-header-glass {
  animation: none !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 15px 15px !important;
}
.drawer-root {
  background-image: none !important;
  animation: none !important;
}
.drawer-panel,
.cart-overlay-layer .cart-drawer-panel,
.cart-panel {
  background-color: var(--surface) !important;
  background-image: none !important;
  animation: none !important;
  isolation: isolate !important;
}
.drawer-panel::before,
.cart-overlay-layer .cart-drawer-panel::before,
.cart-panel::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -48px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 15px 15px !important;
  background-position: 0 0 !important;
  opacity: .86 !important;
  transform: translate3d(0,0,0) !important;
  transform-origin: center !important;
  animation: ndPanelDotsGPUv16 30s linear infinite !important;
  will-change: transform !important;
}
.drawer-panel > *,
.cart-overlay-layer .cart-drawer-panel > *,
.cart-panel > * {
  position: relative;
  z-index: 1;
}
@keyframes ndPanelDotsGPUv16 {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-24px,24px,0); }
  100% { transform: translate3d(-48px,48px,0); }
}

/* Use the same monochrome animated matrix in the cart and left menu. */
.cart-overlay-layer .cart-drawer-panel::before {
  background-image: radial-gradient(var(--digital-grid) .8px, transparent 1px) !important;
  background-size: 15px 15px !important;
  opacity: .86 !important;
  animation: ndPanelDotsGPUv16 30s linear infinite !important;
}

/* Product names gain one point while keeping each card's layout unchanged. */
.product-card-body .product-card-name {
  font-size: clamp(14px, calc(1.12vw + 1px), 17px) !important;
}
@media (max-width: 767px) {
  .product-card-body .product-card-name,
  .related-products-grid .product-card-body .product-card-name {
    font-size: 10px !important;
  }
  .arabic-ui .product-card-body .product-card-name,
  .arabic-ui .related-products-grid .product-card-body .product-card-name {
    font-size: 12px !important;
  }
}
.arabic-ui .product-card-body .product-card-name {
  font-size: 14px !important;
}
@media (max-width: 767px) {
  .arabic-ui .product-card-body .product-card-name,
  .arabic-ui .related-products-grid .product-card-body .product-card-name {
    font-size: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-panel::before,
  .cart-overlay-layer .cart-drawer-panel::before,
  .cart-panel::before {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
}
.drawer-panel,
.cart-overlay-layer .cart-drawer-panel,
.cart-panel { overflow: hidden !important; }

/* Keep both edge controls available above an open drawer so switching directly
   from menu to cart (or cart to menu) always works with one tap. */
.desktop-edge-toggles { z-index: 10020 !important; }
.desktop-edge-toggle { position: relative !important; pointer-events: auto !important; }


/* v17 — glitch-framed floating navigation, four-second category carousel,
   and intermittent title glitches. Effects are restricted to small UI layers. */
.floating-sf {
  isolation: isolate !important;
  border-color: rgba(243,38,48,.72) !important;
}
.floating-sf::before {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  border: 1px solid var(--nd-red,#f32630) !important;
  border-radius: inherit !important;
  box-shadow: 2px 0 0 rgba(243,38,48,.72), -1px 0 0 rgba(243,38,48,.32) !important;
  opacity: .86;
  transform: translate3d(0,0,0);
  animation: ndFloatingNavGlitchV17 3.8s steps(1,end) infinite !important;
}
@keyframes ndFloatingNavGlitchV17 {
  0%, 82%, 100% { transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); opacity: .86; }
  84% { transform: translate3d(3px,-1px,0); clip-path: inset(0 0 67% 0); opacity: 1; }
  86% { transform: translate3d(-2px,1px,0); clip-path: inset(28% 0 39% 0); opacity: .72; }
  88% { transform: translate3d(2px,0,0); clip-path: inset(74% 0 0 0); opacity: 1; }
  90% { transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); opacity: .9; }
}

/* Keep category identities mounted as they move between carousel positions.
   Stepped transforms make each four-second advance feel like a controlled glitch. */
.category-rail-card {
  transition: transform .42s steps(5,end), opacity 0s linear !important;
}
.category-rail-card.is-center::after {
  animation: ndCategoryHardGlitchV17 .46s steps(1,end) 1 both !important;
}
@keyframes ndCategoryHardGlitchV17 {
  0% { filter: opacity(0); clip-path: inset(0 0 100% 0); transform: translate3d(0,0,0); }
  12% { filter: opacity(1); clip-path: inset(8% 0 77% 0); transform: translate3d(-4px,0,0); }
  24% { filter: opacity(.6); clip-path: inset(27% 0 55% 0); transform: translate3d(3px,0,0); }
  38% { filter: opacity(.95); clip-path: inset(46% 0 37% 0); transform: translate3d(-3px,0,0); }
  51% { filter: opacity(.7); clip-path: inset(65% 0 18% 0); transform: translate3d(4px,0,0); }
  66% { filter: opacity(.9); clip-path: inset(82% 0 5% 0); transform: translate3d(-2px,0,0); }
  81% { filter: opacity(.4); clip-path: inset(0 0 0 0); transform: translate3d(1px,0,0); }
  100% { filter: opacity(0); clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
}

/* Hero title badges receive short red/white scan bursts rather than constant shaking. */
.hot-now-badge,
.hot-now-auto-heading,
.hot-now-type-title {
  position: relative !important;
  isolation: isolate !important;
  animation: ndHeroTitleFlickerV17 4.6s steps(1,end) infinite !important;
}
.hot-now-badge {
  animation: badgeGlow 2.4s ease-in-out infinite, ndHeroTitleFlickerV17 4.6s steps(1,end) infinite !important;
}
.hot-now-badge::after,
.hot-now-auto-heading::after,
.hot-now-type-title::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: -2px !important;
  z-index: 4 !important;
  pointer-events: none !important;
  border: 1px solid rgba(243,38,48,.95) !important;
  border-radius: inherit !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(243,38,48,.75) 5px 7px, transparent 7px 12px),
    linear-gradient(90deg, transparent 0 16%, rgba(255,255,255,.78) 16% 22%, transparent 22% 54%, rgba(243,38,48,.62) 54% 64%, transparent 64% 100%) !important;
  mix-blend-mode: screen !important;
  opacity: 0 !important;
  transform: translate3d(0,0,0);
  animation: ndHeroTitleBandV17 4.6s steps(1,end) infinite !important;
}
@keyframes ndHeroTitleFlickerV17 {
  0%, 85%, 91%, 100% { filter: none; text-shadow: none; }
  86% { filter: contrast(1.28); text-shadow: -2px 0 rgba(243,38,48,.98), 2px 0 rgba(255,255,255,.6); }
  87% { filter: contrast(1.45); text-shadow: 2px 0 rgba(243,38,48,.98), -1px 0 rgba(0,0,0,.72); }
  88% { filter: contrast(1.12); text-shadow: -1px 0 rgba(255,255,255,.8), 2px 0 rgba(243,38,48,.85); }
  89% { filter: none; text-shadow: 1px 0 rgba(243,38,48,.42); }
}
@keyframes ndHeroTitleBandV17 {
  0%, 85%, 91%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
  86% { opacity: .95; clip-path: inset(7% 0 76% 0); transform: translate3d(-3px,0,0); }
  87% { opacity: .72; clip-path: inset(35% 0 42% 0); transform: translate3d(3px,0,0); }
  88% { opacity: 1; clip-path: inset(70% 0 9% 0); transform: translate3d(-2px,0,0); }
  89% { opacity: .45; clip-path: inset(0 0 0 0); transform: translate3d(1px,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-sf::before,
  .category-rail-card,
  .category-rail-card.is-center::after,
  .hot-now-badge,
  .hot-now-auto-heading,
  .hot-now-type-title,
  .hot-now-badge::after,
  .hot-now-auto-heading::after,
  .hot-now-type-title::after {
    animation: none !important;
    transition: none !important;
  }
}

/* v18 — compact mobile hero frame, half-overhanging title, desktop nav outline,
   and a clearer glitch transition for the four-second category auto-advance. */
@media (max-width: 767px) {
  /* The stage remains card-sized; only the outer frame is tightened. */
  .hot-now {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 26px auto 18px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 2px !important;
  }
  .hot-now-stage {
    box-sizing: border-box !important;
    width: 100% !important;
    height: calc(min(80vw, 340px) + 40px) !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  .hot-now-card {
    width: min(88%, 340px) !important;
    aspect-ratio: 1 / 1 !important;
    top: 50% !important;
  }
  /* Center the title over the frame's upper border: one half above, one half inside. */
  .hot-now-header,
  .hot-now-auto-heading {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    z-index: 60 !important;
  }
  .hot-now-header { width: max-content !important; max-width: 94% !important; }
  .hot-now-auto-heading {
    width: max-content !important;
    max-width: min(94%, 420px) !important;
    white-space: normal !important;
  }
  /* Keep slide indicators in the 20px bottom margin instead of adding height. */
  .hot-now-dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 5px !important;
    z-index: 48 !important;
    justify-content: center !important;
    padding: 0 8px !important;
    gap: 6px !important;
  }
  .hot-now-dot { width: 6px !important; height: 6px !important; }
  .hot-now-dot.is-active { width: 17px !important; }
}

/* Explicit desktop navigation outline: the red frame remains visible at PC sizes
   and glitches in short, sharp bursts without affecting button hit targets. */
.floating-sf {
  isolation: isolate !important;
  border: 1px solid rgba(243,38,48,.92) !important;
}
.floating-sf::before {
  content: '' !important;
  position: absolute !important;
  inset: -3px !important;
  z-index: 8 !important;
  pointer-events: none !important;
  border: 1px solid var(--nd-red,#f32630) !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: 2px 0 0 rgba(243,38,48,.8), -2px 0 0 rgba(243,38,48,.35), 0 0 10px rgba(243,38,48,.14) !important;
  animation: ndFloatingNavGlitchV18 3.7s steps(1,end) infinite !important;
}
@media (min-width: 768px) {
  .floating-sf {
    box-shadow: var(--glass-shadow), 0 10px 30px rgba(34,29,22,.16), 0 0 0 1px rgba(243,38,48,.32), 0 0 18px rgba(243,38,48,.12) !important;
  }
  .floating-sf::before { inset: -4px !important; }
}
@keyframes ndFloatingNavGlitchV18 {
  0%, 80%, 100% { transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); opacity: .92; }
  82% { transform: translate3d(3px,0,0); clip-path: inset(0 0 70% 0); opacity: 1; }
  84% { transform: translate3d(-2px,1px,0); clip-path: inset(30% 0 36% 0); opacity: .72; }
  86% { transform: translate3d(2px,-1px,0); clip-path: inset(76% 0 0 0); opacity: 1; }
  88% { transform: translate3d(0,0,0); clip-path: inset(0 0 0 0); opacity: .88; }
}

/* Make the existing desktop hero title glitch timing explicitly visible on PC too. */
.hot-now-header .hot-now-badge,
.hot-now-auto-heading,
.hot-now-type-title {
  animation: ndHeroTitleFlickerV18 4.1s steps(1,end) infinite !important;
}
.hot-now-header .hot-now-badge {
  animation: badgeGlow 2.4s ease-in-out infinite, ndHeroTitleFlickerV18 4.1s steps(1,end) infinite !important;
}
.hot-now-header .hot-now-badge::after,
.hot-now-auto-heading::after,
.hot-now-type-title::after {
  animation: ndHeroTitleScanV18 4.1s steps(1,end) infinite !important;
}
@keyframes ndHeroTitleFlickerV18 {
  0%, 72%, 80%, 100% { filter: none; text-shadow: none; }
  73% { filter: contrast(1.55); text-shadow: -3px 0 rgba(243,38,48,1), 2px 0 rgba(255,255,255,.8); }
  74% { filter: contrast(1.85); text-shadow: 3px 0 rgba(243,38,48,1), -2px 0 rgba(0,0,0,.8); }
  75% { filter: contrast(1.3); text-shadow: -1px 0 rgba(255,255,255,.95), 3px 0 rgba(243,38,48,.95); }
  76% { filter: none; text-shadow: 1px 0 rgba(243,38,48,.55); }
}
@keyframes ndHeroTitleScanV18 {
  0%, 72%, 80%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
  73% { opacity: 1; clip-path: inset(5% 0 78% 0); transform: translate3d(-4px,0,0); }
  74% { opacity: .82; clip-path: inset(32% 0 42% 0); transform: translate3d(3px,0,0); }
  75% { opacity: 1; clip-path: inset(69% 0 8% 0); transform: translate3d(-2px,0,0); }
  76% { opacity: .25; clip-path: inset(0 0 0 0); transform: translate3d(1px,0,0); }
}

/* Category rail auto-advances every 4 seconds in app.js; animate the position
   swap with a visible stepped burst rather than a soft/fading carousel. */
.category-rail-card {
  transition: transform .48s steps(7,end), opacity 0s linear !important;
  will-change: transform !important;
}
.category-rail-card::after {
  inset: -3px !important;
  border-color: rgba(243,38,48,.98) !important;
  box-shadow: 2px 0 0 rgba(243,38,48,.8), -2px 0 0 rgba(243,38,48,.35) !important;
}
.category-rail-card.is-center::after {
  animation: ndCategoryRailGlitchV18 .54s steps(1,end) 1 both !important;
}
@keyframes ndCategoryRailGlitchV18 {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translate3d(0,0,0); }
  10% { opacity: 1; clip-path: inset(0 0 77% 0); transform: translate3d(-5px,0,0); }
  20% { opacity: .3; clip-path: inset(18% 0 61% 0); transform: translate3d(4px,0,0); }
  32% { opacity: .96; clip-path: inset(35% 0 43% 0); transform: translate3d(-3px,0,0); }
  44% { opacity: .48; clip-path: inset(50% 0 29% 0); transform: translate3d(3px,0,0); }
  58% { opacity: 1; clip-path: inset(66% 0 15% 0); transform: translate3d(-4px,0,0); }
  72% { opacity: .55; clip-path: inset(82% 0 3% 0); transform: translate3d(2px,0,0); }
  86% { opacity: .85; clip-path: inset(0 0 0 0); transform: translate3d(-1px,0,0); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .floating-sf::before,
  .hot-now-header .hot-now-badge,
  .hot-now-auto-heading,
  .hot-now-type-title,
  .hot-now-header .hot-now-badge::after,
  .hot-now-auto-heading::after,
  .hot-now-type-title::after,
  .category-rail-card,
  .category-rail-card::after,
  .category-rail-card.is-center::after {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}


/* v19 — narrower desktop hero frame, real horizontal product auto-scroll,
   stepped glitch motion, and sale-price badge glitch accents. */
@media (min-width: 768px) {
  /* Bring each background edge inward by 4cm while preserving card dimensions. */
  .hot-now {
    box-sizing: border-box !important;
    width: calc(100% - 8cm) !important;
    max-width: none !important;
    margin-inline: auto !important;
    padding: 6px 10px 2px !important;
    border-radius: 2px !important;
  }
  /* Stage/card dimensions remain as before; only the surrounding frame shrinks. */
  .hot-now-stage {
    height: 400px !important;
    min-height: 400px !important;
    margin-top: 0 !important;
  }
  .hot-now-card {
    width: min(92%, 380px) !important;
    aspect-ratio: 1 / 1 !important;
  }
  /* Match mobile title placement: half the title above, half inside the top edge. */
  .hot-now-header,
  .hot-now-auto-heading,
  .hot-now-type-title {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 60 !important;
  }
}

/* Sale price plates receive intermittent red glitch bursts, without constantly
   shaking the card or changing the badge's dimensions/position. */
.product-card:has(.product-card-sale-tag) .product-card-price-row {
  animation: ndSalePricePlateGlitchV19 4.2s steps(1,end) infinite !important;
  transform-origin: center !important;
}
.product-card:has(.product-card-sale-tag) .product-card-price-row::before {
  animation: ndSalePriceLinesGlitchV19 4.2s steps(1,end) infinite !important;
}
@keyframes ndSalePricePlateGlitchV19 {
  0%, 78%, 100% { filter: none; clip-path: inset(0 0 0 0); }
  79% { filter: contrast(1.65) drop-shadow(2px 0 rgba(243,38,48,.95)); clip-path: inset(0 0 0 0); }
  80% { filter: contrast(1.9) drop-shadow(-2px 0 rgba(243,38,48,.8)); clip-path: polygon(0 0,100% 0,100% 30%,0 30%,0 42%,100% 42%,100% 70%,0 70%,0 100%,100% 100%); }
  81% { filter: contrast(1.3) drop-shadow(2px 0 rgba(255,255,255,.8)); clip-path: inset(0 0 0 0); }
  82% { filter: none; clip-path: inset(0 0 0 0); }
}
@keyframes ndSalePriceLinesGlitchV19 {
  0%, 78%, 100% { opacity: .15; transform: translateX(0); }
  79% { opacity: .95; transform: translateX(2px); clip-path: inset(0 0 66% 0); }
  80% { opacity: .85; transform: translateX(-2px); clip-path: inset(36% 0 30% 0); }
  81% { opacity: .6; transform: translateX(1px); clip-path: inset(72% 0 0 0); }
  82% { opacity: .15; transform: translateX(0); clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .product-card:has(.product-card-sale-tag) .product-card-price-row,
  .product-card:has(.product-card-sale-tag) .product-card-price-row::before {
    animation: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}


/* v20 — desktop hero title is deliberately half-overhanging, but stays fully
   visible below the site header; the category rail advances automatically in RTL/LTR. */
@media (min-width: 768px) {
  .hot-now {
    /* Reserve enough headroom above the frame for the title's upper half. */
    margin-top: 42px !important;
    position: relative !important;
    z-index: 70 !important;
    overflow: visible !important;
  }
  .hot-now-header,
  .hot-now-auto-heading,
  .hot-now-type-title {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  .hot-now-header .hot-now-badge,
  .hot-now-auto-heading {
    position: relative !important;
    clip-path: none !important;
    max-height: none !important;
  }
}

/* v21 — main catalog is a static grid; only the category rail below the hero
   auto-advances every four seconds using the existing glitch transition. */
.main-product-grid {
  display: grid !important;
  flex-wrap: initial !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
  overscroll-behavior: auto !important;
  padding: 0 !important;
  isolation: auto !important;
  gap: 16px !important;
}
@media (min-width: 768px) {
  .main-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .main-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}


/* v22 — make the product catalog unmistakably static and page-bound: 8 desktop,
   16 mobile. The four-second glitch animation belongs only to the category rail. */
.main-product-grid,
.main-product-grid > .product-card {
  animation: none !important;
  scroll-snap-align: unset !important;
  scroll-snap-stop: normal !important;
  scroll-behavior: auto !important;
  translate: none !important;
}
.main-product-grid {
  display: grid !important;
  grid-auto-flow: row !important;
  overflow: visible !important;
  transform: none !important;
}
@media (min-width: 768px) {
  .main-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  .main-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Distinct whole-rail glitch burst when the category carousel advances. */
.category-rail { position: relative !important; isolation: isolate !important; }
.category-rail.is-glitching::before {
  content: '' !important;
  position: absolute !important;
  inset: -4px 0 !important;
  z-index: 30 !important;
  pointer-events: none !important;
  border: 1px solid rgba(243,38,48,.96) !important;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(243,38,48,.22) 8px 10px, transparent 10px 17px),
    linear-gradient(90deg, transparent 0 15%, rgba(243,38,48,.20) 24%, transparent 38% 60%, rgba(255,255,255,.18) 72%, transparent 82%) !important;
  box-shadow: 3px 0 0 rgba(243,38,48,.45), -2px 0 0 rgba(243,38,48,.28) !important;
  animation: ndCategoryRailFrameBurstV22 .62s steps(1,end) 1 both !important;
}
.category-rail.is-glitching .category-rail-card {
  animation: ndCategoryCardSliceV22 .42s steps(1,end) 1 both !important;
}
.category-rail.is-glitching .category-rail-card .category-chip-label {
  text-shadow: -1px 0 rgba(243,38,48,.95), 1px 0 rgba(255,255,255,.6) !important;
}
@keyframes ndCategoryRailFrameBurstV22 {
  0% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(0); }
  10% { opacity: .95; clip-path: inset(0 0 76% 0); transform: translateX(-4px); }
  22% { opacity: .28; clip-path: inset(17% 0 60% 0); transform: translateX(3px); }
  34% { opacity: .92; clip-path: inset(34% 0 43% 0); transform: translateX(-2px); }
  48% { opacity: .4; clip-path: inset(49% 0 28% 0); transform: translateX(3px); }
  62% { opacity: .9; clip-path: inset(64% 0 13% 0); transform: translateX(-3px); }
  78% { opacity: .55; clip-path: inset(80% 0 2% 0); transform: translateX(1px); }
  100% { opacity: 0; clip-path: inset(0); transform: translateX(0); }
}
@keyframes ndCategoryCardSliceV22 {
  0%, 100% { filter: none; clip-path: inset(0); }
  18% { filter: contrast(1.45) drop-shadow(2px 0 rgba(243,38,48,.9)); clip-path: inset(0 0 72% 0); }
  38% { filter: contrast(1.2) drop-shadow(-2px 0 rgba(255,255,255,.6)); clip-path: inset(27% 0 45% 0); }
  58% { filter: contrast(1.4) drop-shadow(2px 0 rgba(243,38,48,.75)); clip-path: inset(61% 0 13% 0); }
  78% { filter: none; clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  .category-rail.is-glitching::before,
  .category-rail.is-glitching .category-rail-card {
    animation: none !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}