:root{
    --paper:#EAE6DC;
    --card:#F6F3EC;
    --ink:#201D1A;
    --ink-soft:#685F53;
    --gold:#C9A227;
    --teal:#24413D;
    --brick:#8B4A3B;
    --line: rgba(32,29,26,0.14);
    --line-strong: rgba(32,29,26,0.28);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{
    /* Reserve space for the vertical scrollbar on every page, whether or not
       it's actually needed, so switching between a short admin page (no
       scrollbar) and a long one (has a scrollbar) doesn't shift the whole
       layout a few pixels sideways. */
    scrollbar-gutter:stable;
    /* Belt-and-suspenders: nothing on the page is meant to scroll
       sideways — only up/down. Without this, any element that ends up
       even a pixel wider than the viewport (easy to hit on mobile) makes
       the *entire page* draggable left/right. Elements that intentionally
       scroll horizontally (e.g. .category-row) set their own overflow-x
       and are unaffected by this. */
    overflow-x:hidden;
  }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }
  .promo-banner-inner{
    max-width:1200px; margin:0 auto; padding:10px 44px 10px 16px;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
  }
  .promo-banner-text{
    font-weight:600;
    line-height:1.4;
  }
  .promo-banner-text.promo-blink{
    animation: promo-blink 1.4s ease-in-out infinite;
  }
  @keyframes promo-blink{
    0%, 100%{ opacity:1; }
    50%{ opacity:.35; }
  }
  @media (prefers-reduced-motion: reduce){
    .promo-banner-text{ animation:none; }
  }
  .promo-banner-close{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:transparent; border:none; cursor:pointer;
    font-size:20px; line-height:1; padding:4px 6px;
    opacity:.8;
  }
  .promo-banner-close:hover{ opacity:1; }

  .mono{font-family:'IBM Plex Mono',monospace;}
  .display{font-family:'Fraunces',serif;}
  a{ color:inherit; }

  .texture{
    background-image:
      linear-gradient(rgba(32,29,26,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(32,29,26,0.035) 1px, transparent 1px);
    background-size: 26px 26px;
  }

  .btn{
    font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
    border:none; cursor:pointer; border-radius:3px; text-decoration:none;
    padding:12px 20px; transition:transform .15s ease, box-shadow .15s ease;
    display:inline-flex; align-items:center; gap:8px;
  }
  .btn-sm{ padding:8px 14px; font-size:12.5px; }
  .btn-primary{ background:var(--ink); color:var(--paper); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(32,29,26,0.25); }
  .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
  .btn-ghost:hover{ background:rgba(32,29,26,0.05); }
  .btn-danger{ background:transparent; color:var(--brick); border:1px solid rgba(139,74,59,0.4); }
  .btn-danger:hover{ background:rgba(139,74,59,0.08); }
  .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2px solid var(--gold); outline-offset:2px;
  }
  .btn:disabled{ opacity:.6; cursor:default; }

  header{
    padding: 30px 6vw 20px;
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1400px; margin:0 auto;
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:20px; flex-wrap:wrap;
  }
  .header-account{ text-align:right; }
  .header-account p{ margin:0 0 8px; }
  @media (max-width:640px){
    .header-account{ text-align:left; }
  }
  header p{margin:8px 0 0; color:var(--ink-soft); font-size:14px; max-width:480px;}

  main{ padding: 30px 6vw 40px; max-width:1400px; margin:0 auto; }

  .grid{
    display:grid; gap:22px; align-items:start;
    grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
  }
  .card{
    background:var(--card); border:1px solid var(--line); border-radius:4px;
    overflow:hidden; display:flex; flex-direction:column;
    transition:box-shadow .18s ease, transform .18s ease;
  }
  .card:hover{ box-shadow:0 10px 26px rgba(32,29,26,0.14); transform:translateY(-2px); }
  .card .shot{
    aspect-ratio:1/1; width:100%; overflow:hidden; flex:none; background:#fff;
    display:flex; align-items:center; justify-content:center; position:relative;
    border-bottom:1px solid var(--line);
  }
  .card .shot img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s ease; }
  .card:hover .shot img{ transform:scale(1.045); }
  .shot .cycle-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; display:block; }
  .shot .cycle-img.active{ opacity:1; z-index:1; }
  .card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .card .name{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; line-height:1.2; max-height:2.4em; overflow:hidden; }
  .card .price{ font-family:'IBM Plex Mono',monospace; color:var(--brick); font-size:14px; font-weight:500; }
  .card .desc{ font-size:13px; color:var(--ink-soft); line-height:1.45; flex:1;
    max-height:5.8em; overflow:hidden; }
  .card .row{ display:flex; gap:8px; margin-top:8px; }
  .card .row > a, .card .row > form{ flex:1; }
  .card .row a, .card .row button{ width:100%; padding:8px 10px; font-size:12.5px; justify-content:center; }
  .meta-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:2px 0; }
  .cat-chip-mini{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; background:var(--paper);
    border:1px solid var(--line-strong); border-radius:12px; padding:0 8px; height:18px; line-height:16px;
    box-sizing:border-box; display:inline-flex; align-items:center; color:var(--ink-soft); }
  .popular-badge-mini{
    font-size:10.5px; border-radius:50%; width:20px; height:20px; flex:none;
    display:inline-flex; align-items:center; justify-content:center; line-height:1;
    background:var(--gold); color:var(--ink);
  }
  .video-badge-mini{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:20px; height:20px; font-size:10.5px;
    border-radius:50%; background:var(--teal); color:#fff;
  }
  .video-badge-mini svg{ width:55%; height:55%; display:block; }

  .cat-label-row{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
  .cat-label-row .cat-label{ margin-bottom:0; line-height:1.2; }
  /* Higher specificity than ".store-card .cat-label" (which sets
     margin-bottom:4px for the standalone case) so this reset reliably
     wins regardless of source order — previously the 4px margin was
     silently leaking through and throwing off the icon's vertical
     centering next to the label text by a couple of pixels. */
  .store-card .cat-label-row .cat-label{ margin-bottom:0; }

  .empty{
    grid-column:1/-1; border:1px dashed var(--line-strong); border-radius:6px;
    padding:70px 20px; text-align:center; color:var(--ink-soft);
  }
  .empty .display{ color:var(--ink); font-size:22px; margin-bottom:8px; }

  .switch-link{
    font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.04em;
    color:var(--ink-soft); text-decoration:none; border:1px solid var(--line-strong);
    border-radius:20px; padding:7px 14px; display:inline-flex; align-items:center; gap:6px;
    background:var(--card); cursor:pointer; white-space:nowrap;
  }
  .switch-link:hover{ color:var(--ink); border-color:var(--ink-soft); }

  .detail-topbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:20px; }

  /* Slides fully out of view on scroll-down, back in on scroll-up — see the
     scroll listener in storefront_header.php. transform-only (no height/
     layout change), so it can't trigger scroll-anchoring jitter the way
     changing the header's own height on scroll used to. */
  .sticky-header{ position:sticky; top:0; z-index:40; transition:transform .25s ease; }
  .sticky-header.nav-hidden{ transform:translateY(-100%); }
  .navbar{ background:var(--ink); border-bottom:1px solid rgba(255,255,255,0.1); }
  .navbar-inner{
    max-width:1400px; margin:0 auto; padding:16px 6vw;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  }
  .navbar-inner > .brand-link{ grid-column:1; justify-self:start; min-width:0; }
  .navbar-inner > .navbar-search{ grid-column:2; justify-self:center; }
  .navbar-inner > .navbar-links{ grid-column:3; justify-self:end; }

  .navbar-links{ display:flex; align-items:center; gap:24px; }
  .navbar-links a{
    font-family:'IBM Plex Mono',monospace; font-size:16px; letter-spacing:.05em; text-transform:uppercase;
    color:rgba(234,230,220,0.7); text-decoration:none; white-space:nowrap; transition:color .15s ease;
  }
  .navbar-links a:hover, .navbar-links a.active{ color:var(--gold); }

  /* Hamburger toggle for the mobile nav dropdown (see .nav-open below) —
     inert on tablet/desktop, where the links already sit inline. */
  .nav-toggle{
    display:none; border:none; background:transparent; color:var(--paper);
    width:38px; height:38px; padding:0; align-items:center; justify-content:center;
    cursor:pointer; flex:none;
  }
  .nav-toggle .icon-close{ display:none; }

  /* Same icon-button treatment as .nav-toggle, mirrored on the other side of
     the logo so the header stays visually balanced when the logo centers
     on mobile (see the <=760px block below). */
  .search-toggle{
    display:none; border:none; background:transparent; color:var(--paper);
    width:38px; height:38px; padding:0; align-items:center; justify-content:center;
    cursor:pointer; flex:none;
  }
  .search-toggle .icon-close{ display:none; }

  /* Tablet: keeps the same single-row arrangement as desktop (logo / search
     / links, left to right via the grid above) — just tightened (smaller
     search box, smaller nav-link text/gaps) so all three actually fit on
     one line at tablet width instead of wrapping. */
  @media (min-width:761px) and (max-width:1024px){
    .navbar-inner{ padding:14px 4vw; gap:10px; }
    /* #navSearchForm / #navSearchInput (IDs), not .navbar-search /
       .search-wrap input (classes) — the base .search-wrap rule further
       down the file has equal class specificity and, being later in
       source order, was silently winning the cascade and overriding
       these back to their unscoped values. IDs always outrank classes
       regardless of order, so this can't happen again. */
    #navSearchForm{ max-width:150px; }
    #navSearchInput{ padding:5px 12px 5px 32px; font-size:13px; }
    #navSearchForm svg{ left:10px; width:14px; height:14px; }
    .navbar-links{ gap:12px; }
    .navbar-links a{ font-size:16px; }
  }

  /* Phones: row 1 is a fixed 38px / 1fr / 38px grid — hamburger left,
     logo centered in the middle track, search icon right. A grid (not
     flex-with-order) matters specifically because .search-toggle only
     renders when $showStoreControls is true (storefront_header.php) —
     it's absent on pages like /faq and /what-is-3d-printing. With flex,
     losing that right-hand item let .brand-link's flex:1 box expand to
     fill the leftover space and re-center the logo within a now-lopsided
     box, visibly shifting it off dead-center on those pages. A grid's
     explicit column tracks stay reserved even when a track's item is
     simply missing, so the middle (logo) column stays put either way.
     The search bar and nav links each drop into their own full-width row
     only once their icon is tapped (mutually exclusive — see the JS in
     storefront_header.php), so nothing permanent competes with the logo
     for row 1. The header still hides as one whole unit on scroll-down
     (see .nav-hidden above); opening either row just makes that unit
     taller for as long as it's open.
     Search input font-size is pinned to 16px here (not the 13px used on
     tablet/desktop) because iOS Safari auto-zooms the whole page on focus
     for any input under 16px — that was the "page gets stuck zoomed in"
     bug when tapping the search box. */
  @media (max-width:760px){
    .navbar-inner{
      display:grid; grid-template-columns:38px 1fr 38px; align-items:center;
      row-gap:10px; position:relative;
    }
    /* justify-self:stretch on all three explicitly, since the base
       (desktop) rules for .brand-link and .navbar-links each set their
       own justify-self (start / end) at equal-or-higher specificity than
       a same-viewport override that leaves the property untouched simply
       inherits the base value instead of resetting it — that's what was
       shrink-wrapping the logo to the left edge of its column and, worse,
       pinning the mobile nav dropdown to a 38px-wide sliver at the far
       right instead of spanning the row. */
    .nav-toggle{ grid-column:1; grid-row:1; justify-self:stretch; display:flex; }
    .navbar-inner > .brand-link{ grid-column:2; grid-row:1; justify-self:stretch; display:flex; justify-content:center; min-width:0; }
    .search-toggle{ grid-column:3; grid-row:1; justify-self:stretch; display:flex; }

    /* True centered modal dialog, not a dropdown anchored under the header
       — fixed + top/left:50% + transform is independent of header height,
       scroll position, or --nav-h entirely, so it can't inherit any of the
       header's own positioning quirks.
       Targeted by #navSearchForm / #navSearchInput (IDs), not
       .navbar-search / .search-wrap input (classes): the base .search-wrap
       rule further down the file (width:100%, max-width:420px,
       position:relative) has equal specificity to a bare class selector
       here and, being later in source order, was silently winning the
       cascade — that's why the popup kept rendering as the old small
       in-flow box instead of this fixed, centered, solid-white card, and
       why the 16px input font-size (the iOS zoom-on-focus fix) wasn't
       actually taking effect either. IDs always outrank classes regardless
       of source order, so this can't get silently clobbered again. */
    /* top:20% (was 50%) moves the dialog up from dead-center — roughly a
       30% shift toward the top of the screen, which also keeps it clear
       of the on-screen keyboard better than a true vertical center did. */
    #navSearchForm{
      display:none; position:fixed; top:20%; left:50%;
      transform:translate(-50%, -50%);
      width:calc(100% - 56px); max-width:400px; margin:0; max-height:none;
      background:#fff; border-radius:18px; padding:18px 20px;
      box-shadow:0 24px 60px rgba(0,0,0,0.4); z-index:60;
      align-items:center; gap:10px;
    }
    .navbar-inner.search-open #navSearchForm{ display:flex; }
    .navbar-inner.search-open .search-toggle .icon-search{ display:none; }
    .navbar-inner.search-open .search-toggle .icon-close{ display:block; }
    .navbar-inner > .navbar-links{
      grid-column:1 / -1; grid-row:2; justify-self:stretch; display:none;
      flex-direction:column; align-items:stretch;
      gap:0; background:var(--ink); border-top:1px solid rgba(255,255,255,0.1);
      margin:10px -6vw 0; padding:6px 6vw 10px;
    }
    .navbar-inner.nav-open .navbar-links{ display:flex; }
    .navbar-inner.nav-open .nav-toggle .icon-menu{ display:none; }
    .navbar-inner.nav-open .nav-toggle .icon-close{ display:block; }
    .navbar-links a{ padding:12px 0; font-size:14px; border-bottom:1px solid rgba(255,255,255,0.08); }
    .navbar-links a:last-child{ border-bottom:none; }
    /* No left-side search icon and no clear (x) button here — the popup
       always opens with an empty input already (see the searchToggle
       click handler in storefront_header.php), and the tiny x button's
       tap target was unreliable on mobile (taps were landing on the
       backdrop behind it and closing the whole popup instead), so it's
       simpler to just drop it. Left on desktop/tablet's inline search,
       where it isn't cramped into a small popup card. */
    #navSearchForm svg{ display:none; }
    #navSearchInput{ padding:10px 14px; font-size:16px; border-radius:10px; flex:1; min-width:0; }
    #navSearchForm .search-clear{ display:none; }
  }

  /* Dimmed scrim behind the mobile search popup — lives outside the
     <=760px block since .search-open can only ever be toggled by
     .search-toggle, which is itself hidden above 760px, but it's a plain
     fixed overlay either way so scoping it further adds nothing. Tapping
     it closes the popup (see storefront_header.php). */
  .search-backdrop{ display:none; position:fixed; inset:0; background:rgba(20,17,14,0.55); z-index:55; }
  .search-backdrop.visible{ display:block; }
  .brand-group{ display:flex; align-items:center; gap:10px; min-width:0; }
  .nav-logo{ height:68px; width:auto; max-width:240px; object-fit:contain; flex:none; }
  .navbar .brand{ font-family:'Fraunces',serif; font-weight:600; font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--paper); }

  .logo-uploader{ display:flex; align-items:center; gap:12px; margin:10px 0 6px; }
  .logo-preview{ width:56px; height:56px; border:1px dashed var(--line-strong); border-radius:6px; display:flex;
    align-items:center; justify-content:center; background:#fff; overflow:hidden; flex:none; }
  .logo-preview img{ width:100%; height:100%; object-fit:contain; }
  .logo-preview span{ font-size:9.5px; color:var(--ink-soft); text-align:center; padding:0 4px; }
  .logo-actions{ display:flex; gap:8px; flex-wrap:wrap; }

  /* hero carousel */
  /* Fills exactly the rest of the first screen below the sticky nav (whose
     real height is measured by JS into --nav-h — see storefront_header.php),
     so categories/popular picks/shelf items only appear once the visitor
     scrolls down. 100dvh (where supported) accounts for mobile browsers'
     collapsing address bar better than plain 100vh. */
  .hero{
    position:relative; overflow:hidden; background:#fff;
    height:calc(100vh - var(--nav-h, 96px));
    height:calc(100dvh - var(--nav-h, 96px));
    min-height:460px;
  }
  .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; pointer-events:none; background:#fff; }
  .hero-slide.active{ opacity:1; pointer-events:auto; }
  .hero-slide-bg{ display:none; }
  .hero-slide-fg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scale(1); }
  .hero-slide.active .hero-slide-fg{ animation: kenburns-fg 6500ms ease-out forwards; }
  @keyframes kenburns-fg{ from{ transform:scale(1); } to{ transform:scale(1.15); } }
  .hero-slide-inner{ position:relative; height:100%; display:flex; flex-direction:column; justify-content:center;
    box-sizing:content-box; padding:0 4vw 0 max(120px, 9vw); max-width:352px; color:var(--ink); }
  .hero-text-badge{ display:inline-block; max-width:100%; }
  .hero-slide-inner .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:15.5px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--gold); margin-bottom:0; display:flex; align-items:center; gap:8px;
    text-shadow:0 1px 6px rgba(255,255,255,0.65), 0 1px 4px rgba(0,0,0,0.2); }
  .hero-slide-inner .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
  .hero-slide-inner h1{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(28px,4.4vw,48px);
    margin:0; letter-spacing:-0.01em; line-height:1.22; white-space:nowrap;
    text-shadow:0 2px 20px rgba(255,255,255,0.7), 0 2px 5px rgba(0,0,0,0.2); }
  .hero-slide-inner p{ font-size:15.5px; color:var(--ink-soft); max-width:352px; margin:24px 0 24px; line-height:1.55;
    height:72px; overflow:hidden; flex:none;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
    text-shadow:0 1px 3px rgba(0,0,0,0.12); }
  .hero-cta{
    background:rgba(255,255,255,0.35); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    border:1px solid var(--ink-soft); color:var(--ink-soft); justify-content:center;
  }
  .hero-cta:hover{ background:rgba(255,255,255,0.5); }
  .hero-placeholder{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
    text-align:center; color:#fff; background:linear-gradient(135deg, var(--teal), var(--ink)); padding:0 8vw; }
  .hero-placeholder h1{ font-family:'Fraunces',serif; font-size:clamp(26px,4vw,40px); margin:0 0 10px; }
  .hero-placeholder p{ color:rgba(255,255,255,0.75); font-size:14.5px; max-width:420px; }
  .hero-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(255,255,255,0.85);
    border:1px solid var(--line-strong); color:var(--ink); width:42px; height:42px; border-radius:50%; cursor:pointer;
    font-size:18px; backdrop-filter:blur(4px); align-items:center; justify-content:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.12); display:none; }
  .hero-arrow:hover{ background:#fff; }
  .hero-arrow.prev{ left: 120px; }
  .hero-arrow.next{ right: 120px; }
  .hero-dots{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:8px; }
  .hero-dot{ width:8px; height:8px; border-radius:50%; background:rgba(32,29,26,0.25); border:none; cursor:pointer; padding:0; }

  @media (max-width:640px), (min-width:641px) and (max-width:1280px) and (orientation:portrait){
    /* A full-width "glass" panel across the bottom quarter of the hero,
       with the eyebrow/title/button all centered inside it — shared by
       phones and tablets in portrait alike. No prev/next arrows here;
       the dots already handle navigation. */
    .hero-arrow{ display:none; }
    .hero-dots{ bottom:22px; }
    .hero-slide-inner{
      position:absolute; inset:auto 0 50px 0; height:25%; max-width:none;
      box-sizing:border-box; display:flex; flex-direction:column;
      align-items:center; justify-content:center; text-align:center; gap:10px;
      padding:16px 24px; transform:none;
      background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    }
    .hero-slide-inner .eyebrow{ margin-bottom:0; justify-content:center; }
    .hero-slide-inner h1{ white-space:normal; }
    .hero-text-badge{ background:none; box-shadow:none; padding:0; }
    .hero-slide-inner p{ display:none; }
  }
  .hero-dot.active{ background:var(--gold); width:22px; border-radius:5px; transition:all .3s ease; }

  /* Tablet landscape (e.g. iPad sideways): both the prev/next arrows and
     the text block currently sit at the same fixed 120px inset from each
     edge — fine on a wide desktop screen, but on a tablet's narrower
     landscape width that reads as crowding in toward the middle of the
     hero image. Shifting both by the same amount moves them out toward
     the edges without changing the gap between the arrow and the text
     next to it, which was already right. */
  @media (min-width:641px) and (max-width:1180px) and (orientation:landscape){
    .hero-arrow{ display:none; }
    .hero-slide-inner{ padding-left:60px; }
    .hero-slide-inner h1{ font-size:clamp(24px, 4.4vw, 44px); white-space:nowrap; }
    .hero-slide-inner .eyebrow{ font-size:13.5px; }
    .hero-cta{ font-size:12px; width:70%; margin-top:15px; }
    .hero-slide-inner p{ display:none; }
  }

  .search-band{ background:var(--card); border-bottom:1px solid var(--line); }
  .search-band-inner{ max-width:1400px; margin:0 auto; padding:18px 6vw; }
  .search-wrap{ width:100%; max-width:420px; position:relative; }
  .search-wrap input{
    width:100%; font-family:'Inter',sans-serif; font-size:14px; padding:6px 32px 6px 38px;
    border:1px solid var(--line-strong); border-radius:30px; background:#fff; color:var(--ink);
  }
  .search-wrap svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none; }
  /* Always in the DOM (see storefront_header.php) — shown only once the
     input actually has a value, via :not(:placeholder-shown) on its sibling
     input rather than a JS 'input' listener. Updates live as you type,
     paste, or clear it, and also covers the case of loading the page with
     an existing ?q= value already filled in. */
  .search-clear{
    position:absolute; right:6px; top:50%; transform:translateY(-50%); width:22px; height:22px;
    border-radius:50%; border:none; background:transparent; color:var(--ink-soft); font-size:16px;
    line-height:1; cursor:pointer; display:none; align-items:center; justify-content:center;
    transition:background .15s ease, color .15s ease;
  }
  .search-wrap input:not(:placeholder-shown) ~ .search-clear{ display:flex; }
  .search-clear:hover{ background:var(--card); color:var(--ink); }

  /* category chips */
  .category-row-wrap{
    position:relative; border-bottom:1px solid var(--line); background:var(--paper);
    display:flex; align-items:center; justify-content:center;
  }
  .category-row{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
    padding:14px 6vw; max-width:1400px; margin:0 auto; width:100%;
  }
  .cat-chip{
    flex:none; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
    padding:7px 16px; border-radius:20px; border:1px solid var(--line-strong);
    background:#fff; cursor:pointer; color:var(--ink-soft); white-space:nowrap;
    text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
    transition:all .18s cubic-bezier(.16,1,.3,1); box-shadow:0 1px 2px rgba(0,0,0,0.03);
  }
  .cat-chip:hover{
    border-color:var(--ink); color:var(--ink); transform:translateY(-1px);
    box-shadow:0 3px 8px rgba(0,0,0,0.06);
  }
  .cat-chip.active{
    background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600;
    box-shadow:0 3px 10px rgba(36,65,61,0.25); transform:translateY(-1px);
  }
  .cat-nav-btn{ display:none; }

  /* Mobile / Small Screens (<= 680px): Single scrollable row with side navigation arrows */
  @media(max-width:680px){
    .category-row-wrap::before,
    .category-row-wrap::after{
      content:''; position:absolute; top:0; bottom:0; width:24px; pointer-events:none; z-index:2;
    }
    .category-row-wrap::before{
      left:34px; background:linear-gradient(to right, var(--paper), rgba(255,255,255,0));
    }
    .category-row-wrap::after{
      right:34px; background:linear-gradient(to left, var(--paper), rgba(255,255,255,0));
    }
    .category-row{
      justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; padding:12px 10px;
      scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; -ms-overflow-style:none;
    }
    .category-row::-webkit-scrollbar{ display:none; }
    .cat-nav-btn{
      display:inline-flex; align-items:center; justify-content:center;
      width:30px; height:30px; border-radius:50%; border:1px solid var(--line-strong);
      background:#fff; color:var(--ink); font-size:16px; font-weight:600; line-height:1;
      cursor:pointer; flex-shrink:0; z-index:3; margin:0 4px;
      box-shadow:0 2px 6px rgba(0,0,0,0.08); transition:all .15s ease; user-select:none;
    }
    .cat-nav-btn:hover{ background:var(--teal); color:#fff; border-color:var(--teal); }
  }

  /* popular row */
  .popular-section{ border-bottom:1px solid var(--line); background:var(--card); }
  .popular-inner{ max-width:1400px; margin:0 auto; padding:36px 6vw; }
  .section-eyebrow{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--gold-text,var(--gold)); display:block; margin-bottom:4px; }
  .section-head h2{ font-family:'Fraunces',serif; font-size:24px; margin:0 0 16px; font-weight:600; }

  /* Popular picks: auto-rotating carousel — no manual horizontal scroll on
     any screen size. JS (popular-carousel.js) groups the cards into pages
     sized to the current column count and cross-fades/slides between them
     on a timer; .popular-viewport clips everything to one page at a time. */
  .popular-carousel{ position:relative; }
  /* Buffer room so a hovered card's shadow (site-wide default: 0 14px 30px)
     isn't sliced off top/bottom by this viewport's overflow:hidden, which
     is otherwise needed to hide the carousel's other pages. Vertical only
     — horizontal padding here would widen the clipping box itself (the
     negative margin only repositions it, doesn't shrink it back down),
     leaking a sliver of the next page's card on the right. */
  .popular-viewport{ overflow:hidden; padding:20px 0 48px; margin:-20px 0 -48px; }
  .popular-track{ display:flex; transition:transform .5s ease; }
  .popular-page{
    flex:0 0 100%; min-width:0; box-sizing:border-box; display:grid;
    grid-template-columns:repeat(4, 1fr); gap:32px; align-items:start;
    padding:0 30px;
  }
  @media (max-width:1080px){ .popular-page{ grid-template-columns:repeat(3, 1fr); } }
  @media (max-width:760px){ .popular-page{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:480px){ .popular-page{ grid-template-columns:repeat(1, 1fr); } }
  .popular-dots{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
  .popular-dot{
    width:8px; height:8px; border-radius:50%; background:rgba(32,29,26,0.25);
    border:none; cursor:pointer; padding:0;
  }
  .popular-dot.active{ background:var(--gold); width:10px; height:10px; transition:all .25s ease; }

  /* Category chips link to "?category=X#catalog" — a real anchor jump, not
     JS. Without scroll-margin-top, the browser scrolls #catalog flush to
     y:0, but the sticky header (position:sticky, see .sticky-header) then
     renders on top of it anyway, covering the piece-count bar and the top
     row of cards. On mobile the header eats a big enough share of a short
     viewport that this can hide the entire first row, reading as "no
     products" until you scroll up to notice they're just tucked under the
     header. --nav-h is the same live header-height variable already used
     to size the hero, kept in sync by JS in storefront_header.php. */
  .store-main{ padding: 40px 6vw 100px; max-width:1400px; width:100%; margin:0 auto; scroll-margin-top:var(--nav-h, 80px); }
  /* Brief fade while assets/js/category-filter.js is fetching a new
     category/search/sort — without this the swap from one grid straight
     to the next can read as a flicker rather than a transition. */
  #storeResults{ transition:opacity .15s ease; }
  #storeResults[aria-busy="true"]{ opacity:.5; }
  .catalog-controls{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
  .store-count{
    font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.08em;
  }
  .sort-select{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:9px 12px; border:1px solid var(--line-strong);
    border-radius:3px; background:#fff; color:var(--ink); }
  .store-grid{
    display:grid; gap:24px; align-items:start;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width:1080px){ .store-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width:760px){ .store-grid{ grid-template-columns: repeat(2, 1fr); } }
  /* Smaller, denser tiles on phones — 2 columns instead of the full-width
     single column above, with the card's own padding/text scaled down to
     match so nothing feels cramped at half the width. */
  @media (max-width:480px){
    .store-grid{ grid-template-columns: repeat(2, 1fr); gap:12px; }
    .store-card .body{ padding:9px 10px 11px; }
    .store-card .cat-label{ font-size:9px; margin-bottom:2px; }
    .store-card .name{ font-size:13px; margin-bottom:2px; }
    .store-card .price{ font-size:12px; margin-bottom:0; }
    .store-card .desc{ display:none; }
    .card-quick-add{ width:26px; height:26px; font-size:15px; top:6px; right:6px; }
  }
  .store-card{
    background:var(--card); border:1px solid var(--line); border-radius:4px;
    overflow:hidden; cursor:pointer; display:flex; flex-direction:column; position:relative;
    transition:box-shadow .2s ease, transform .2s ease;
  }
  .store-card:hover{ box-shadow:0 14px 30px rgba(32,29,26,0.16); transform:translateY(-3px); }
  .store-card .shot{ aspect-ratio:1/1; width:100%; overflow:hidden; border-bottom:1px solid var(--line); background:#fff; position:relative; }
  .store-card .shot img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s ease; }
  .store-card:hover .shot img{ transform:scale(1.045); }
  .store-card .ribbon, .detail-panel .shot .ribbon, .card .shot .ribbon{ position:absolute; top:10px; left:-1px; background:var(--gold); color:var(--ink);
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
    padding:4px 10px 4px 12px; border-radius:0 3px 3px 0; z-index:2; }
  .detail-panel .shot .ribbon{ top:16px; font-size:11px; }
  .card-quick-add{
    position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
    background:var(--ink); color:var(--paper); border:none; cursor:pointer; font-size:18px; line-height:1;
    display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(32,29,26,0.25);
    transition:transform .15s ease, background .15s ease;
  }
  .card-quick-add:hover{ transform:scale(1.08); }
  .card-quick-add.added{ background:var(--teal); }
  .store-card .body{ padding:14px 16px 16px; }
  .store-card .cat-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--teal); margin-bottom:4px; }
  .store-card .name{ font-family:'Fraunces',serif; font-weight:600; font-size:16.5px; line-height:1.25; margin-bottom:4px; max-height:2.5em; overflow:hidden; }
  .store-card .price{ font-family:'IBM Plex Mono',monospace; color:var(--brick); font-size:13.5px; margin-bottom:8px; }
  .store-card .desc{
    font-size:13px; color:var(--ink-soft); line-height:1.45;
    max-height:5.8em; overflow:hidden;
  }

  .store-empty{
    text-align:center; padding:90px 20px; color:var(--ink-soft); border:1px dashed var(--line-strong); border-radius:6px;
    grid-column:1/-1;
  }
  .store-empty .display{ color:var(--ink); font-size:22px; margin-bottom:8px; }

  .site-footer{ border-top:1px solid var(--line-strong); background:var(--ink); color:var(--paper); margin-top:auto; }
  .footer-inner{
    max-width:1400px; margin:0 auto; padding:28px 6vw; display:flex; justify-content:space-between;
    align-items:flex-start; flex-wrap:wrap; gap:24px;
  }
  .footer-brand-group{ display:flex; flex-direction:column; gap:6px; }
  .footer-brand{ font-family:'Fraunces',serif; font-weight:600; font-size:16px; font-variant:small-caps; letter-spacing:.03em; }
  .footer-tag{ font-size:12.5px; color:rgba(234,230,220,0.65); }
  .footer-tag + .footer-contact{ margin-top:6px; }
  .footer-contact{ color:rgba(234,230,220,0.7); font-size:12.5px; text-decoration:none; }
  .footer-contact:hover{ color:var(--gold); }
  .footer-social{ display:flex; gap:10px; margin-top:6px; }
  .footer-social a{
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(234,230,220,0.08); color:rgba(234,230,220,0.75);
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .footer-social a:hover{ background:var(--gold); color:var(--ink); transform:translateY(-2px); }
  .footer-social svg{ width:16px; height:16px; display:block; }
  .footer-links-col{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; text-align:right; }
  .footer-links-col a{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
    color:rgba(234,230,220,0.7); text-decoration:none; transition:color .15s ease;
  }
  .footer-links-col a:hover{ color:var(--gold); }

  @media (max-width:560px){
    .footer-inner{ flex-direction:column; align-items:center; text-align:center; gap:20px; }
    .footer-brand-group{ align-items:center; }
    .footer-links-col{ align-items:center; text-align:center; }
  }

  /* product detail overlay */
  .detail-overlay{
    position:fixed; inset:0; background:rgba(32,29,26,0.6); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:60; padding:4vw;
  }
  .detail-overlay.open{ display:flex; }
  .detail-panel{
    background:var(--paper); width:min(920px,100%); max-height:90vh; overflow-y:auto;
    border-radius:6px; border:1px solid var(--line-strong); box-shadow:0 30px 70px rgba(0,0,0,0.4);
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
    scroll-margin-top:100px; /* clearance below the sticky nav when auto-scrolled into view on mobile */
  }
  @media (max-width:680px){
    /* Mobile stacks the columns, so the panel must be free to grow with
       its (naturally flowing) content rather than a fixed height. */
    .detail-panel{ grid-template-columns:minmax(0,1fr); max-height:none; overflow-y:visible; }
  }
  @media (min-width:681px){
    /* Desktop: the panel gets a real, fixed height, and both the photo
       and the description stretch to fill it exactly (see .gallery-col
       .shot and .detail-info .desc below) — so they always match, and
       resizing the window/changing this value moves both together. */
    .detail-panel{ height:64vh; max-height:64vh; overflow:hidden; }
  }
  @media (max-width:680px){
    /* On mobile the taller 4:5 desktop ratio pushes the title/price well
       below the fold. A shorter, wider box keeps "down to the price"
       visible without scrolling on a typical phone screen. The max-height
       is a hard cap on top of the aspect-ratio, so every product's photo
       box comes out the same height regardless of that photo's own
       dimensions or how wide the phone screen is. */
    .gallery-col .shot{ width:100%; aspect-ratio:4/3; max-height:60vh; min-height:0; }
  }
  .detail-panel .shot{ background:#fff; min-width:0; min-height:360px; position:relative;
    box-shadow:0 4px 20px rgba(32,29,26,0.12); }
  .detail-panel .shot img{ width:100%; height:100%; object-fit:contain; display:block; min-width:0; }
  .detail-info{ padding:30px 32px; display:flex; flex-direction:column; position:relative; min-width:0; min-height:0; }
  .detail-cat{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-bottom:8px; }
  .detail-info .name{ font-family:'Fraunces',serif; font-weight:600; font-size:26px; margin:0 0 8px; padding-right:30px; }
  .detail-info .price{ font-family:'IBM Plex Mono',monospace; color:var(--brick); font-size:17px; margin-bottom:18px; }
  .detail-info .desc{ font-size:14.5px; line-height:1.3; color:var(--ink-soft); }
  @media (min-width:681px){
    /* On desktop, the description fills the remaining height of the panel
       (whose overall height is driven by the photo column) and scrolls
       internally only if it doesn't fit — rather than growing the whole
       panel taller than the viewport, which pushed the footer out of easy
       reach. Mobile intentionally skips this — it just flows naturally. */
    .detail-info .desc{
      flex:1; min-height:0; overflow-y:auto; padding-right:10px; scrollbar-width:thin;
    }
    .detail-info .desc::-webkit-scrollbar{ width:7px; }
    .detail-info .desc::-webkit-scrollbar-track{ background:transparent; }
    .detail-info .desc::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
  }
  .detail-info .desc p{ margin:0; }
  .detail-info .desc ol, .detail-info .desc ul{ margin:0; padding-left:1.3em; }
  .detail-info .desc li{ margin:0; }
  .detail-close{ position:absolute; top:0; right:0; background:none; border:none; font-size:20px; color:var(--ink-soft); cursor:pointer; }
  .detail-close:hover{ color:var(--ink); }
  .detail-nav{ display:flex; gap:10px; margin-top:auto; padding-top:24px; }
  .detail-nav button{
    flex:1; padding:10px; font-size:13px; border:1px solid var(--line-strong); background:transparent;
    border-radius:3px; cursor:pointer; color:var(--ink-soft); font-family:'Inter',sans-serif;
  }
  .detail-nav button:hover{ color:var(--ink); border-color:var(--ink-soft); }

  /* product detail gallery (photos + video merged into one carousel) */
  .gallery-col{ display:flex; flex-direction:column; min-width:0; min-height:0; }
  @media (min-width:681px){
    /* Desktop: fills whatever height .detail-panel ends up being (see the
       min-width:681px rule on .detail-panel above), the same way
       .detail-info .desc does — so the photo and description always
       match, driven by one shared source of truth instead of two
       independently-guessed numbers. */
    .gallery-col .shot{ width:100%; flex:1; min-height:0; }
  }
  .gallery-slide{ position:absolute; inset:0; opacity:0; transition:opacity .25s ease; pointer-events:none; }
  .gallery-slide.active{ opacity:1; pointer-events:auto; z-index:1; }

  /* Tablet portrait (e.g. iPad in its upright orientation): the desktop
     two-column layout above technically still fits width-wise, but with a
     tall, narrow available width it squeezes the photo into an oddly tall,
     skinny box. Rather than add a third width-only breakpoint, this keys
     off actual portrait orientation directly — matching phones' stacked
     layout instead once a screen is both this narrow AND taller than it is
     wide, regardless of the exact device. Landscape tablets/laptops at the
     same width are unaffected and keep the desktop treatment above. */
  @media (max-width:1280px) and (orientation:portrait){
    .detail-panel{ grid-template-columns:minmax(0,1fr); height:auto; max-height:none; overflow-y:visible; }
    .gallery-col .shot{ width:100%; aspect-ratio:4/3; max-height:60vh; min-height:0; flex:none; }
    .detail-info .desc{ flex:none; min-height:auto; overflow-y:visible; padding-right:0; }
  }
  .gallery-slide video{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }
  .gallery-arrow{
    position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.92);
    border:1px solid var(--line-strong); color:var(--ink); font-size:19px; line-height:1;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 2px 10px rgba(32,29,26,0.18); transition:background .15s ease;
  }
  .gallery-arrow:hover{ background:#fff; }
  .gallery-arrow.prev{ left:12px; }
  .gallery-arrow.next{ right:12px; }
  .gallery-thumbs{
    display:flex; gap:8px; padding:12px; flex-wrap:wrap; background:#fff; flex:none;
    border:1px solid var(--line); border-top:none;
  }
  .gallery-thumb{
    width:60px; height:60px; padding:0; border-radius:4px; overflow:hidden; flex:none;
    border:2px solid transparent; cursor:pointer; background:#fff; position:relative;
  }
  .gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .gallery-thumb.active{ border-color:var(--ink); }
  .gallery-thumb .play-badge{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    background:rgba(32,29,26,0.4); color:#fff; font-size:15px;
  }
  @media (max-width:640px){
    .gallery-thumb{ width:48px; height:48px; }
    .gallery-arrow{ width:32px; height:32px; font-size:16px; }
  }

  /* lock / password overlay */
  .lock-panel{ background:var(--paper); width:min(360px,100%); border-radius:6px; border:1px solid var(--line-strong);
    padding:34px 28px; text-align:center; position:relative; box-shadow:0 30px 70px rgba(0,0,0,0.4); }
  .lock-icon{ font-size:26px; margin-bottom:10px; }
  .lock-panel h2{ font-family:'Fraunces',serif; font-size:20px; margin:0 0 6px; }
  .lock-sub{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }
  .lock-panel input{ width:100%; margin-bottom:10px; padding:10px 12px; border:1px solid var(--line-strong);
    border-radius:3px; font-family:'Inter',sans-serif; font-size:14px; }
  .lock-error{ color:var(--brick); font-size:12.5px; margin:-2px 0 10px; text-align:left; }
  .lock-note{ font-size:11px; color:var(--ink-soft); margin-top:14px; line-height:1.4; }

  /* editable shop settings (admin) */
  .shop-settings{ display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
  .shop-settings input{
    font-family:'Fraunces',serif; font-weight:600; font-size:15px; border:1px solid transparent;
    background:transparent; padding:2px 4px; border-radius:3px; color:var(--ink); max-width:280px;
  }
  .shop-settings input:hover, .shop-settings input:focus{ border-color:var(--line-strong); background:#fff; }
  .shop-settings input.tagline-input{ font-family:'Inter',sans-serif; font-weight:400; font-size:12.5px; color:var(--ink-soft); max-width:340px; }

  /* admin storefront-setup sections */
  .admin-section{ max-width:1400px; margin:0 auto; padding:26px 6vw; border-bottom:1px solid var(--line); }
  .admin-section.admin-page{ border-bottom:none; }
  .admin-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:10px; flex-wrap:wrap; min-height:32px; }
  .admin-section-head h3{ font-family:'Fraunces',serif; font-size:17px; margin:0; font-weight:600; }
  .admin-hint{ font-size:12px; color:var(--ink-soft); margin:8px 0 16px; }
  .admin-hint:last-child{ margin-bottom:0; }
  .category-editor{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .category-chip-edit{ display:inline-flex; align-items:center; gap:6px; background:var(--card);
    border:1px solid var(--line-strong); border-radius:20px; padding:6px 8px 6px 14px; font-size:12.5px; }
  .category-chip-edit button{ background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:14px; line-height:1; padding:2px; }
  .category-chip-edit button:hover{ color:var(--brick); }
  .category-add-row{ display:flex; gap:8px; max-width:360px; }
  .category-add-row input{ flex:1; padding:9px 12px; border:1px solid var(--line-strong); border-radius:3px; font-size:13px; font-family:'Inter',sans-serif; }

  .hero-slide-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:6px; }
  .hero-slide-item{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
    border-radius:4px; padding:8px 12px; }
  .hero-slide-item img{ width:64px; height:40px; object-fit:cover; border-radius:3px; flex:none; }
  .hsi-title{ flex:1; font-size:13.5px; font-weight:500; }
  .hsi-actions{ display:flex; gap:6px; }
  .hsi-actions button{ font-size:11.5px; padding:5px 9px; border-radius:3px; border:1px solid var(--line-strong);
    background:#fff; cursor:pointer; color:var(--ink-soft); }
  .hsi-actions button:hover{ color:var(--ink); }

  /* overlay + panel */
  .overlay{
    position:fixed; inset:0; background:rgba(32,29,26,0.55); backdrop-filter:blur(2px);
    display:none; align-items:flex-start; justify-content:center; z-index:50; padding:4vw;
    overflow-y:auto;
  }
  .overlay.open{ display:flex; }
  .panel{
    background:var(--paper); width:min(880px,100%); border-radius:6px;
    border:1px solid var(--line-strong); margin:20px 0 40px;
    box-shadow:0 30px 70px rgba(0,0,0,0.35);
  }
  .panel-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 26px; border-bottom:1px solid var(--line);
  }
  .panel-head h2{ font-family:'Fraunces',serif; font-size:22px; margin:0; font-weight:600; }
  .icon-btn{ background:none; border:none; cursor:pointer; font-size:20px; color:var(--ink-soft); line-height:1; padding:4px;}
  .icon-btn:hover{ color:var(--ink); }

  .panel-body{ padding:24px 26px 30px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; }
  @media (max-width:680px){ .panel-body{ grid-template-columns:minmax(0,1fr); } }

  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:12px; letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:6px; font-family:'IBM Plex Mono',monospace; }
  .field input[type=text], .field input[type=number], .field input[type=password], .field input[type=email], .field input[type=url], .field textarea, .field select{
    width:100%; font-family:'Inter',sans-serif; font-size:14px; padding:10px 12px;
    border:1px solid var(--line-strong); border-radius:3px; background:#fff; color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:90px; }
  .field-checkbox{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
  .field-checkbox input{ width:auto; }
  .field-checkbox label{ margin:0; text-transform:none; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink); }
  .price-row{ display:flex; gap:8px; }
  .price-row select{ width:64px; flex:none; }
  .price-currency-fixed{
    width:64px; flex:none; display:flex; align-items:center; justify-content:center;
    font-family:'Inter',sans-serif; font-size:14px; padding:10px 12px;
    border:1px solid var(--line-strong); border-radius:3px; background:var(--paper); color:var(--ink);
  }

  .dropzone{
    border:1.5px dashed var(--line-strong); border-radius:5px; aspect-ratio:1/1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; cursor:pointer; color:var(--ink-soft); text-align:center; padding:16px;
    position:relative; overflow:hidden;
  }
  .dropzone.wide{ aspect-ratio:16/9; }
  .dropzone.texture:hover{ border-color:var(--gold); color:var(--ink); }
  .dropzone svg{ opacity:.55; }
  .dropzone span.hint{ font-size:12.5px; max-width:200px; }

  .compare{
    position:relative; aspect-ratio:1/1; border-radius:5px; overflow:hidden;
    border:1px solid var(--line-strong); background:#fff;
  }
  .compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; }
  .compare .after-wrap{ position:absolute; inset:0; overflow:hidden; }
  .compare-range{
    position:absolute; inset:0; width:100%; height:100%; margin:0; appearance:none; background:transparent; cursor:ew-resize; z-index:5;
  }
  .compare-range::-webkit-slider-thumb{
    appearance:none; width:36px; height:36px; border-radius:50%; margin-top:0;
    background:var(--paper) center/16px no-repeat; border:2px solid var(--ink);
    box-shadow:0 2px 6px rgba(0,0,0,0.3); cursor:ew-resize;
  }
  .compare-range{ top:50%; transform:translateY(-50%); height:0; }
  .compare-range::-webkit-slider-runnable-track{ background:transparent; }
  .divider-line{ position:absolute; top:0; bottom:0; width:2px; background:var(--gold); z-index:4; box-shadow:0 0 0 1px rgba(0,0,0,0.15);}
  .tag{
    position:absolute; top:8px; font-family:'IBM Plex Mono',monospace; font-size:10px;
    letter-spacing:.08em; text-transform:uppercase; background:rgba(32,29,26,0.75); color:#fff;
    padding:4px 8px; border-radius:2px; z-index:6;
  }
  .tag.left{ left:8px; } .tag.right{ right:8px; }

  .strength-row{ display:flex; gap:8px; margin-top:14px; }
  .strength-row button{
    flex:1; padding:8px 6px; font-size:12px; border:1px solid var(--line-strong); background:#fff;
    border-radius:3px; cursor:pointer; color:var(--ink-soft);
  }
  .strength-row button.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

  .panel-foot{ display:flex; justify-content:flex-end; gap:10px; padding:18px 26px; border-top:1px solid var(--line); }

  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--ink); color:var(--paper); padding:11px 20px; border-radius:4px; font-size:13.5px;
    opacity:0; pointer-events:none; transition:all .25s ease; z-index:100; font-family:'Inter',sans-serif;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

  .confirm-pop{
    position:absolute; z-index:20; background:var(--ink); color:var(--paper); padding:12px 14px; border-radius:4px;
    font-size:12.5px; box-shadow:0 10px 24px rgba(0,0,0,0.3); width:200px;
  }
  .confirm-pop .row{ display:flex; gap:8px; margin-top:10px; }
  .confirm-pop button{ flex:1; font-size:11.5px; padding:6px 8px; border-radius:3px; border:none; cursor:pointer; }
  .confirm-pop .yes{ background:var(--brick); color:#fff; }
  .confirm-pop .no{ background:rgba(255,255,255,0.15); color:#fff; }

  .loading-note{ font-size:13px; color:var(--ink-soft); padding:40px 0; text-align:center; grid-column:1/-1; }
  .hidden{ display:none !important; }

  /* ============ Order Now modal (product detail page) ============ */
  .order-now-btn{ width:100%; justify-content:center; margin:22px 0 0; }
  .add-to-cart-block{ margin-top:22px; }

  .order-modal{
    position:fixed; inset:0; background:rgba(32,29,26,0.6); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:80; padding:4vw;
  }
  .order-modal.open{ display:flex; }
  .order-modal-panel{
    position:relative; background:var(--paper); width:min(440px,100%); max-height:90vh; overflow-y:auto;
    border-radius:6px; border:1px solid var(--line-strong); box-shadow:0 30px 70px rgba(0,0,0,0.4);
    padding:26px 24px;
  }
  .order-modal-close{
    position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:none;
    background:transparent; color:var(--ink-soft); font-size:20px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease;
  }
  .order-modal-close:hover{ background:var(--card); color:var(--ink); }
  .order-modal-panel h2{ font-family:'Fraunces',serif; font-weight:600; font-size:21px; margin:0 0 6px; }
  .order-modal-product{ font-size:13.5px; color:var(--ink-soft); margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line); }
  .order-modal-product strong{ color:var(--ink); }
  .order-modal-error{ font-size:13px; color:var(--brick); margin:0 0 14px; }
  .order-field{ margin-bottom:16px; }
  .order-field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); }
  .order-field input,
  .order-field textarea{
    width:100%; padding:11px 13px; border-radius:4px; border:1px solid var(--line-strong);
    background:#fff; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink);
  }
  .order-field textarea{ resize:vertical; min-height:78px; }
  .order-field input:focus,
  .order-field textarea:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(36,65,61,0.12); }
  .order-field.order-color-field{ border:0; padding:0; min-width:0; margin-bottom:18px; }
  .quantity-option-row{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
  .quantity-option-row .order-field-qty{ flex:none; width:60px; min-width:0; }
  .quantity-option-row .order-field-qty input{ width:100%; }
  .quantity-option-row .order-option-field,
  .quantity-option-row .order-color-field{ flex:1; min-width:180px; }
  .order-color-legend{ font-size:13px; font-weight:600; margin:0 0 10px; padding:0; color:var(--ink); }
  .selected-color-name{ font-weight:500; color:var(--teal); margin-left:4px; }
  .order-optional{ font-weight:400; color:var(--ink-soft); }
  /* Per-option colors, nested inside the option box itself instead of a
     separate fieldset below it — appears once an option is picked. */
  .option-inline-color{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
  .option-inline-color[hidden]{ display:none; }

  /* Tighter version of the same fields, scoped to the product-detail Quantity
     / Options / Color block only — the cart drawer and quote modal reuse the
     same .order-field/.order-color-legend classes and keep their own roomier
     spacing. */
  .add-to-cart-block{ margin-top:8px; }
  .add-to-cart-block .order-field{ margin-bottom:4px; }
  .add-to-cart-block .order-field label{ margin-bottom:2px; }
  .add-to-cart-block .order-field-qty input{ padding:6px 8px; }
  .add-to-cart-block .quantity-option-row{ gap:10px; }
  .add-to-cart-block .order-field.order-color-field{ margin-bottom:4px; }
  .add-to-cart-block .order-color-legend{ margin:0 0 4px; }
  .add-to-cart-block .option-pills{ gap:4px; padding:0; }
  .add-to-cart-block .option-pill{ padding:5px 10px; font-size:12.5px; }
  .add-to-cart-block .color-swatches{ gap:6px; padding:0; }
  .add-to-cart-block .color-swatch-box{ width:24px; height:24px; }
  .add-to-cart-block .order-now-btn{ margin-top:2px; }

  .color-swatches{ display:flex; flex-wrap:wrap; gap:12px; padding:4px 2px 8px; }
  .color-swatch{ position:relative; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0; border:0; background:transparent; outline:none; }
  .color-swatch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:2; }
  .color-swatch-box{
    width:32px; height:32px; border-radius:50%; background:var(--swatch-color);
    border:2px solid #fff; box-shadow:0 0 0 1px var(--line-strong), 0 2px 4px rgba(0,0,0,0.06);
    transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1);
    display:block;
  }
  .color-swatch:hover .color-swatch-box{
    transform:scale(1.15); box-shadow:0 0 0 2px var(--teal), 0 4px 10px rgba(0,0,0,0.15);
  }
  .color-swatch:has(input:checked) .color-swatch-box{
    transform:scale(1.15); box-shadow:0 0 0 3px var(--teal), 0 4px 12px rgba(36,65,61,0.3);
  }
  .color-swatch:has(input:focus-visible) .color-swatch-box{
    outline:2px solid var(--teal); outline-offset:3px;
  }
  .option-pills{ display:flex; flex-wrap:wrap; gap:10px; padding:2px 0 8px; }
  .option-pill{
    position:relative; display:inline-flex; align-items:center; cursor:pointer;
    padding:8px 16px; border-radius:20px; border:1px solid var(--line-strong);
    background:#fff; font-size:13px; font-weight:500; color:var(--ink-soft);
    transition:all .18s cubic-bezier(.16,1,.3,1);
  }
  .option-pill input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; left:0; top:0; cursor:pointer; }
  .option-pill:hover{ border-color:var(--ink); color:var(--ink); }
  .option-pill:has(input:checked){
    background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600;
    box-shadow:0 3px 10px rgba(36,65,61,0.25);
  }
  .option-pill:has(input:focus-visible){ outline:2px solid var(--teal); outline-offset:2px; }
  .option-pill.out-of-stock{ opacity:.5; cursor:not-allowed; text-decoration:line-through; }
  .option-pill-tooltip{
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
    padding:4px 10px; font-size:12px; font-weight:500; line-height:1.2; white-space:nowrap;
    color:#fff; background:#1e2429; border-radius:5px; opacity:0; visibility:hidden;
    pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:20; box-shadow:0 4px 14px rgba(0,0,0,0.22);
  }
  .option-pill-tooltip::after{
    content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    border-width:5px 5px 0 5px; border-style:solid; border-color:#1e2429 transparent transparent transparent;
  }
  /* Keyboard focus opens the tooltip, but a mouse click must not: clicking
     focuses the radio inside the label, and that focus outlives the pointer,
     so the label used to stay on screen after the cursor had moved away.
     :focus-visible — the idiom already used for the swatch ring above —
     matches keyboard focus only, so a click no longer pins the label open. */
  .option-pill:hover .option-pill-tooltip,
  .option-pill:has(input:focus-visible) .option-pill-tooltip{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }

  .order-modal-submit{ width:100%; justify-content:center; margin-top:4px; }
  .order-modal-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

  .order-modal-success{ text-align:center; padding:8px 0 4px; }
  .order-modal-success .icon{
    width:40px; height:40px; border-radius:50%; background:var(--teal); color:#fff;
    display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:18px;
  }
  .order-modal-success h2{ margin-bottom:6px; }
  .order-modal-success p{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 14px; }

  /* Compact by design so the whole GCash payment step fits one screen with
     no internal scrolling — the QR here is only ever downloaded and scanned
     from within the GCash app (see the copy above it), never scanned live
     off this screen, so it doesn't need to be large. */
  .gcash-pay-box{
    background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px;
    margin:0 0 14px;
  }
  .order-modal-success .gcash-pay-amount{ font-size:14px; font-weight:600; color:var(--ink); margin:10px 0 14px; }
  .gcash-pay-amount .mono{ display:inline-block; font-size:1.5em; font-weight:700; line-height:1; vertical-align:bottom; }
  .gcash-qr-img{
    width:min(130px,50%); aspect-ratio:1/1; object-fit:contain; border-radius:6px;
    border:1px solid var(--line-strong); background:#fff; cursor:pointer; transition:opacity .15s ease;
  }
  .gcash-qr-img:hover{ opacity:.85; }
  .gcash-pay-box .inline-note{ margin:8px 0 0; }
  .order-modal-success .gcash-pay-warning{
    margin:8px 0 0; padding:8px 10px; border-radius:6px; text-align:left;
    background:rgba(201,162,39,0.15); color:#8a6d1a; border:1px solid rgba(201,162,39,0.4);
    font-size:12px; line-height:1.4;
  }
  .gcash-proof-upload{ margin:10px 0 0; text-align:center; }
  .gcash-proof-caption{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink); }
  .gcash-file-input{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .gcash-file-btn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
  .gcash-file-input:focus-visible + .gcash-file-btn{ outline:2px solid var(--teal); outline-offset:2px; }
  .gcash-file-name{
    margin-top:6px; font-size:12.5px; color:var(--ink-soft); word-break:break-all;
  }

  .order-modal-success .wizard-step-label{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-soft); margin:0 0 6px; text-align:center;
  }
  .order-modal-success .gcash-method-label{
    font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--ink); margin:0 0 2px;
  }
  /* Only rendered when both a QR and an Express Send number are configured
     — shows one payment method at a time instead of stacking both, so the
     box stays short enough to fit on a phone screen without scrolling. */
  .gcash-tabs{ display:flex; gap:6px; margin:0 0 12px; }
  .gcash-tab{
    flex:1; padding:7px 8px; border:1px solid var(--line-strong); border-radius:6px;
    background:#fff; color:var(--ink-soft); font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    font-weight:600; letter-spacing:.02em; text-transform:uppercase; cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .gcash-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
  .gcash-method-block{ text-align:left; }
  .gcash-qr-wrap{ text-align:center; }
  .gcash-manual-pay{ text-align:left; }
  .gcash-copy-btn{
    border:1px solid var(--line-strong); background:transparent; color:var(--ink); border-radius:4px;
    padding:3px 10px; font-size:11.5px; cursor:pointer; font-family:'IBM Plex Mono',monospace; flex:none;
  }
  .gcash-copy-btn:hover{ background:var(--card); }
  .gcash-number-block{ text-align:center; padding:6px 0 2px; border-top:1px solid var(--line); }
  .gcash-number-label{ display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:4px; }
  .gcash-number-value{ display:inline-flex; align-items:center; gap:8px; }
  .gcash-step2-actions{ display:flex; gap:10px; }
  .gcash-step2-actions .btn-ghost{ flex:none; }
  .gcash-step2-actions .btn-primary{ flex:1; }
  .gcash-cancel-btn{
    display:block; margin:6px auto 0; background:transparent; border:none;
    color:var(--ink-soft); font-size:13px; text-decoration:underline; padding:4px; cursor:pointer;
  }
  .gcash-cancel-btn:hover{ color:var(--brick); }

  @media (max-width:420px){
    .order-modal-panel{ padding:24px 16px; }
    .gcash-pay-box{ padding:14px 12px; }
  }

  /* ============ Cart (floating button + drawer, reuses .order-modal shell) ============ */
  .cart-fab{
    position:fixed; right:20px; bottom:20px; z-index:70; width:56px; height:56px; border-radius:50%;
    background:var(--teal); color:#fff; border:none; cursor:pointer; font-size:22px;
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(32,29,26,0.3);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .cart-fab:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(32,29,26,0.36); }
  .cart-badge{
    position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
    background:var(--gold); color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
    display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);
  }
  .cart-drawer-panel{ width:min(440px,100%); }
  .cart-empty-state, .cart-loading{ text-align:center; color:var(--ink-soft); font-size:14px; padding:30px 10px; line-height:1.6; }

  /* ============ Mobile/tablet "back to home" shortcut (same pattern as the cart FAB) ============ */
  /* Stacked directly above the cart FAB, same corner (right:20px) — cart
     sits at bottom:20px and is 56px tall, so 20 + 56 + 12px gap = 88px. */
  .home-fab{
    position:fixed; right:20px; bottom:88px; z-index:70; width:56px; height:56px; border-radius:50%;
    background:var(--ink); color:var(--paper); border:none; cursor:pointer; font-size:20px;
    display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(32,29,26,0.3);
    transition:transform .15s ease, box-shadow .15s ease; text-decoration:none;
  }
  .home-fab:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(32,29,26,0.36); }
  @media (min-width:1025px){
    .home-fab{ display:none; }
  }

  /* Step 1 (cart items + total): a fixed-height box so the drawer doesn't
     grow/shrink with however many lines are in the cart — only the items
     list scrolls internally once it overflows; the total/buttons footer
     stays put below it, always visible without scrolling to find it. */
  .cart-step-list{ display:flex; flex-direction:column; height:min(66vh,560px); }
  .cart-lines-scroll{ flex:1; min-height:0; overflow-y:auto; padding-right:6px; scrollbar-width:thin; }
  .cart-lines-scroll::-webkit-scrollbar{ width:7px; }
  .cart-lines-scroll::-webkit-scrollbar-track{ background:transparent; }
  .cart-lines-scroll::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
  .cart-list-footer{ flex:none; padding-top:2px; }
  .cart-lines-scroll .cart-lines{ margin-bottom:0; }
  .cart-checkout-summary{
    display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft);
    margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line);
  }
  .cart-checkout-summary strong{ color:var(--ink); }
  .cart-form-actions{ display:flex; gap:10px; margin-top:4px; }
  .cart-form-actions .btn-ghost{ flex:none; }
  .cart-form-actions .order-modal-submit{ flex:1; margin:0; }

  .cart-lines{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }
  .cart-line{ display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .cart-line:last-child{ border-bottom:none; padding-bottom:0; }
  .cart-line-img{ width:56px; height:56px; object-fit:cover; border-radius:5px; border:1px solid var(--line); flex:none; background:#fff; }
  /* Row order: thumbnail — name & color — price — quantity — remove. */
  .cart-line-info{ flex:1; min-width:0; }
  .cart-line-name{ font-weight:600; font-size:14px; margin-bottom:2px; }
  .cart-line-color{ display:block; font-size:12px; color:var(--ink-soft); }
  /* Fixed min-width (not just flex:none) so 1-, 2-, and 3-digit prices all
     reserve the same space — otherwise the flexible name/color column next
     to it absorbs the difference and the quantity stepper visibly shifts
     left/right as the price's digit count changes. */
  .cart-line-price{ flex:none; min-width:66px; text-align:right; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
  .cart-qty-stepper{ flex:none; display:inline-flex; align-items:center; gap:10px; border:1px solid var(--line-strong); border-radius:20px; padding:2px 4px; }
  .cart-qty-btn{
    width:22px; height:22px; border-radius:50%; border:none; background:transparent; cursor:pointer;
    font-size:15px; line-height:1; color:var(--ink); display:flex; align-items:center; justify-content:center;
  }
  .cart-qty-btn:hover{ background:var(--card); }
  .cart-qty-btn:disabled{ opacity:.35; cursor:not-allowed; }
  .cart-qty-btn:disabled:hover{ background:transparent; }
  .cart-qty-value{ font-family:'IBM Plex Mono',monospace; font-size:13px; min-width:14px; text-align:center; }
  .cart-line-remove{
    flex:none; width:24px; height:24px; border-radius:50%; border:none; background:transparent;
    color:var(--ink-soft); font-size:18px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .cart-line-remove:hover{ background:var(--card); color:var(--brick); }
  .cart-total-row{
    display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:16px;
    padding:10px 0; border-top:1px solid var(--line-strong); margin-bottom:8px;
  }
  .cart-footer-tools{ display:flex; justify-content:flex-start; min-height:24px; align-items:center; }
  .cart-clear-link{
    flex:none; border:none; background:transparent; color:var(--brick); font-size:12px;
    cursor:pointer; padding:0; text-decoration:underline;
  }
  .cart-footer-actions{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; margin-top:8px;
  }
  .cart-footer-actions .order-modal-submit,
  .cart-footer-actions .cart-continue-shopping{
    flex:none; width:190px; min-width:0; margin:0; justify-content:center;
    padding:9px 16px; font-size:12.5px;
  }
  .storefront #cartCheckoutBtn:hover{ transform:none; }

  /* Denser layout on phones so a typical cart (a few items + the checkout
     form below them) fits in the popup without needing to scroll inside
     it — same compacting idea as the GCash payment step above. */
  @media (max-width:480px){
    .cart-drawer-panel h2{ font-size:18px; margin-bottom:2px; }
    .cart-step-list{ height:min(64vh,480px); }
    .cart-lines{ margin-bottom:10px; }
    .cart-total-row{ padding:8px 0; margin-bottom:6px; font-size:14.5px; }
    /* The row's fixed-width pieces (thumbnail, stepper, price, remove) eat
       almost the whole available width on a narrow phone otherwise, leaving
       barely any room for the name/color column next to them. */
    .cart-line{ gap:8px; padding-bottom:10px; }
    .cart-line-img{ width:44px; height:44px; }
    .cart-line-name{ font-size:12.5px; margin-bottom:1px; }
    .cart-line-color{ font-size:10.5px; }
    .cart-line-price{ min-width:52px; font-size:12px; }
    .cart-qty-stepper{ gap:6px; padding:1px 3px; }
    .cart-qty-btn{ width:18px; height:18px; font-size:13px; }
    .cart-qty-value{ font-size:11.5px; min-width:10px; }
    .cart-line-remove{ width:20px; height:20px; font-size:15px; }
    .cart-drawer-panel .order-field{ margin-bottom:10px; }
    .cart-drawer-panel .order-field label{ margin-bottom:4px; font-size:12.5px; }
    .cart-drawer-panel .order-field input,
    .cart-drawer-panel .order-field textarea{ padding:8px 11px; font-size:13.5px; }
    .cart-drawer-panel .order-field textarea{ min-height:52px; }
  }

  /* In-app replacement for window.confirm() — sits above the cart/payment
     overlay (higher z-index) so it visibly appears in front of it. */
  .confirm-overlay{
    position:fixed; inset:0; background:rgba(32,29,26,0.55); backdrop-filter:blur(1px);
    display:none; align-items:center; justify-content:center; z-index:90; padding:4vw;
  }
  .confirm-overlay.open{ display:flex; }
  .confirm-panel{
    background:var(--paper); width:min(340px,100%); border-radius:8px;
    border:1px solid var(--line-strong); box-shadow:0 20px 50px rgba(0,0,0,0.35); padding:22px 20px;
  }
  .confirm-message{ font-size:14.5px; color:var(--ink); line-height:1.5; margin:0 0 18px; text-align:center; }
  .confirm-actions{ display:flex; gap:10px; }
  .confirm-actions .btn{ flex:1; justify-content:center; }


  /* ================= CONTENT PAGES (What is 3D Printing / FAQ) ================= */
  .page-hero{ background:linear-gradient(135deg, var(--teal), var(--ink)); color:#fff; padding:64px 6vw 54px; }
  .page-hero-inner{ max-width:820px; margin:0 auto; text-align:center; }
  .page-hero .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--gold); display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:16px;
  }
  .page-hero .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
  .page-hero h1{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(30px,4.2vw,46px); margin:0 0 14px; line-height:1.18; }
  .page-hero p{ font-size:15.5px; color:rgba(255,255,255,0.78); line-height:1.65; margin:0 auto; max-width:620px; }

  .content-main{ padding:56px 6vw 90px; max-width:1400px; width:100%; margin:0 auto; }
  .content-main-narrow{ max-width:1040px; }
  .content-section{ margin-bottom:54px; }
  .content-section:last-child{ margin-bottom:0; }
  .content-section .section-eyebrow{ display:block; margin-bottom:8px; }
  .content-section h2{ font-family:'Fraunces',serif; font-size:25px; font-weight:600; margin:0 0 14px; letter-spacing:-0.01em; }
  .content-section h3{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; margin:0 0 8px; }
  .content-section > p{ font-size:15px; line-height:1.75; color:var(--ink-soft); margin:0 0 14px; max-width:760px; }
  .content-section > p:last-child{ margin-bottom:0; }

  .step-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:22px; }
  @media (max-width:900px){ .step-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .step-grid{ grid-template-columns:1fr; } }
  .step-card{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:22px 20px; }
  .step-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold); letter-spacing:.08em; margin-bottom:12px; display:block; }
  .step-card h3{ margin:0 0 8px; }
  .step-card p{ margin:0; font-size:13.5px; line-height:1.6; }

  .tech-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:22px; }
  @media (max-width:900px){ .tech-grid{ grid-template-columns:1fr; } }
  .tech-card{ background:var(--card); border:1px solid var(--line); border-radius:6px; padding:22px 20px; }
  .tech-card .tech-icon{
    width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff;
    display:flex; align-items:center; justify-content:center; margin-bottom:14px; flex:none;
  }
  .tech-card .tech-icon svg{ width:18px; height:18px; }
  .tech-card h3{ margin:0 0 6px; }
  .tech-card p{ font-size:13.5px; margin:0; }

  .chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .info-chip{
    font-family:'IBM Plex Mono',monospace; font-size:12.5px; padding:8px 16px; border-radius:20px;
    border:1px solid var(--line-strong); background:#fff; color:var(--ink-soft); text-decoration:none;
    transition:all .15s ease; display:inline-flex; align-items:center;
  }
  a.info-chip:hover{ color:var(--ink); border-color:var(--ink-soft); }

  .benefit-list{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px 24px; }
  @media (max-width:900px){ .benefit-list{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:600px){ .benefit-list{ grid-template-columns:1fr; } }
  .benefit-list li{ display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink-soft); line-height:1.55; }
  .benefit-list li .check{
    flex:none; width:22px; height:22px; border-radius:50%; background:var(--gold); color:var(--ink);
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .benefit-list li .check svg{ width:12px; height:12px; }
  .benefit-list li strong{ color:var(--ink); }

  .content-cta{ text-align:center; margin-top:58px; padding-top:40px; border-top:1px solid var(--line); }
  .content-cta p{ margin:0 0 18px; color:var(--ink-soft); font-size:15px; }
  .content-cta .cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

  /* FAQ accordion */
  .faq-category{
    font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--gold); margin:40px 0 12px;
  }
  .faq-category:first-child{ margin-top:0; }
  .faq-list{ display:flex; flex-direction:column; gap:10px; width:100%; }
  .faq-item{
    background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden;
    width:100%; box-sizing:border-box; flex:none;
  }
  .faq-item summary{
    cursor:pointer; list-style:none; padding:18px 20px; font-family:'Inter',sans-serif; font-weight:600;
    font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--ink);
    width:100%; box-sizing:border-box;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+'; font-family:'IBM Plex Mono',monospace; font-size:19px; color:var(--ink-soft); flex:none; line-height:1;
  }
  .faq-item[open] summary::after{ content:'\2212'; }
  .faq-item[open] summary{ border-bottom:1px solid var(--line); }
  .faq-item .faq-answer{ padding:16px 20px 20px; font-size:14px; color:var(--ink-soft); line-height:1.7; margin:0; width:100%; box-sizing:border-box; }

  .more-resources{ margin-top:54px; padding:28px 26px; border:1px dashed var(--line-strong); border-radius:6px; text-align:center; }
  .more-resources p{ margin:0 0 16px; color:var(--ink-soft); font-size:14.5px; }
  .more-resources .chip-row{ justify-content:center; margin-top:0; }

  .notice-box{
    display:flex; align-items:flex-start; gap:12px; background:rgba(201,162,39,0.1); border:1px solid var(--gold);
    border-radius:6px; padding:16px 20px; margin:18px 0 20px; max-width:760px;
  }
  .notice-box svg{ flex:none; width:20px; height:20px; color:var(--gold); margin-top:1px; }
  .notice-box p{ margin:0; font-size:14px; color:var(--ink); line-height:1.6; }
  .notice-box p strong{ color:var(--ink); }

  .info-chip.active{ border-color:var(--gold); background:rgba(201,162,39,0.14); color:var(--ink); font-weight:600; }

  .tech-card.active{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset; }
  .mini-badge{
    display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em;
    text-transform:uppercase; background:var(--gold); color:var(--ink); padding:3px 9px; border-radius:10px; margin-bottom:12px;
  }

  @media (max-width:640px){
    .page-hero{ padding:48px 6vw 40px; }
    .content-main{ padding:40px 6vw 64px; }
    .content-section{ margin-bottom:42px; }
  }
.color-swatch.out-of-stock{cursor:not-allowed;position:relative}
.color-swatch.out-of-stock .color-swatch-box{opacity:.38}
.color-swatch.out-of-stock .color-swatch-box::after{content:"";position:absolute;width:135%;height:2px;background:#7d2525;transform:rotate(-45deg);left:-18%;top:48%}

/* ========================================================================
   APPLE STORE–INSPIRED STOREFRONT
   Scoped to .storefront so the catalog redesign never leaks into admin.
   ======================================================================== */
.storefront{
  --paper:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --gold:#bf4800;
  --gold-text:#bf4800;
  --teal:#0071e3;
  --brick:#1d1d1f;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.16);
  background:#f5f5f7;
  color:#1d1d1f;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  letter-spacing:-.01em;
}
.storefront .display,
.storefront .card .name,
.storefront .store-card .name,
.storefront .detail-info .name,
.storefront .section-head h2,
.storefront .page-hero h1,
.storefront .content-section h2,
.storefront .content-section h3,
.storefront .order-modal-panel h2{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
}
.storefront .mono,
.storefront .cat-chip,
.storefront .store-count,
.storefront .sort-select,
.storefront .store-card .cat-label,
.storefront .detail-cat,
.storefront .section-eyebrow,
.storefront .btn{ border-radius:980px; font-family:inherit; letter-spacing:0; }
.storefront .btn-primary{ background:#0071e3; color:#fff; }
.storefront .btn-primary:hover{ background:#0077ed; box-shadow:none; }
.storefront .btn-ghost{ background:transparent; border-color:#86868b; }
.storefront .btn:focus-visible,
.storefront input:focus-visible,
.storefront textarea:focus-visible,
.storefront select:focus-visible{ outline:3px solid rgba(0,125,250,.55); outline-offset:2px; }

/* Categories and sections */
.storefront .category-row-wrap{ border:0; background:transparent; }
.storefront .category-row{
  max-width:1280px; margin:0; padding:18px 8px; gap:10px;
  flex:none; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto;
  scroll-behavior:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.storefront .category-row::-webkit-scrollbar{ display:none; }
.storefront .cat-nav-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:0;
  background:#fff; color:#1d1d1f; font-size:18px; font-weight:500; line-height:1;
  cursor:pointer; flex:none; z-index:3; margin:0 5px;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  transition:background-color .18s ease, color .18s ease, opacity .18s ease;
}
.storefront .cat-nav-btn:hover:not(:disabled){ background:#1d1d1f; color:#fff; }
.storefront .cat-nav-btn:disabled{ opacity:.28; cursor:default; }
.storefront .cat-nav-btn.is-unneeded{ display:none; }
.storefront .cat-chip{
  min-height:40px; padding:9px 16px 9px 18px; border:1px solid #1d1d1f;
  border-radius:980px; background:transparent; color:#1d1d1f; font-size:13px;
  font-weight:500; letter-spacing:0; box-shadow:none; gap:8px;
  transition:background-color .25s ease, color .25s ease, transform .25s ease,
    box-shadow .25s ease, border-color .25s ease;
}
.storefront .cat-chip::after{ content:none; }
.storefront .cat-chip:hover{
  border-color:#1d1d1f; background:#1d1d1f; color:#fff;
  transform:none; box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.storefront .cat-chip:active{ transform:none; box-shadow:none; }
.storefront .cat-chip.active{
  background:#1d1d1f; border-color:#1d1d1f; color:#fff;
  box-shadow:none; transform:none;
}
.storefront .popular-section{ border:0; background:transparent; }
.storefront .popular-inner{ max-width:1280px; padding:54px 40px 24px; }
.storefront .section-eyebrow{
  color:#bf4800; font-size:12px; font-weight:700; letter-spacing:.02em;
  text-transform:none; margin-bottom:7px;
}
.storefront .section-head h2{
  color:#1d1d1f; font-size:clamp(28px,3vw,36px); font-weight:650;
  letter-spacing:-.035em; margin-bottom:20px;
}
.storefront .popular-page{ gap:20px; padding:0 4px; }
.storefront .popular-dot{ background:#d2d2d7; }
.storefront .popular-dot.active{ background:#1d1d1f; }

/* Catalog and cards */
.storefront .store-main{ max-width:1280px; padding:54px 40px 110px; }
.storefront .catalog-controls{ margin-bottom:24px; }
.storefront .store-count{
  color:#6e6e73; font-size:15px; font-weight:600; letter-spacing:-.01em;
  text-transform:none;
}
.storefront .sort-select{
  min-height:38px; padding:9px 34px 9px 14px; border:0; border-radius:12px;
  background:#fff; color:#1d1d1f; font-size:13px; font-family:inherit;
}
.storefront .store-grid{ gap:20px; }
.storefront .store-card{
  background:#fff; border:0; border-radius:24px; min-width:0;
  box-shadow:0 2px 12px rgba(0,0,0,.035);
  transform-origin:center;
  transition:box-shadow .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1);
}
.storefront .store-card:hover{ box-shadow:0 12px 32px rgba(0,0,0,.10); transform:scale(1.018); }
.storefront .store-card .shot{
  aspect-ratio:1/1; border:0; background:#fff; margin:0; padding:16px 16px 0;
}
.storefront .store-card .shot img{ border-radius:16px; }
.storefront .store-card:hover .shot img{ transform:none; }
.storefront .store-card .body{ padding:18px 20px 22px; }
.storefront .store-card .cat-label{
  color:#bf4800; font-size:11px; font-weight:650; letter-spacing:0; text-transform:none;
}
.storefront .store-card .name{
  color:#1d1d1f; font-size:17px; line-height:1.24; font-weight:650;
  letter-spacing:-.02em; margin:2px 0 8px;
}
.storefront .store-card .price{
  color:#1d1d1f; font-family:inherit; font-size:14px; font-weight:400; margin:0;
}
.storefront .store-card .ribbon,
.storefront .detail-panel .shot .ribbon,
.storefront .card .shot .ribbon{
  top:16px; left:16px; padding:5px 10px; border-radius:980px; background:#f5f5f7;
  color:#bf4800; font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.02em;
}
.storefront .card-quick-add{
  top:16px; right:16px; width:34px; height:34px; background:#f5f5f7; color:#1d1d1f;
  box-shadow:none; font-weight:400;
}
.storefront .card-quick-add:hover{ background:#e8e8ed; }
.storefront .card-quick-add.added{ background:#0071e3; color:#fff; }
.storefront .store-empty,
.storefront .empty{ background:#fff; border:0; border-radius:24px; }

/* Product details, dialogs and cart */
.storefront .detail-topbar{ margin-bottom:18px; }
.storefront .switch-link{
  border:0; border-radius:980px; background:#fff; color:#0066cc;
  font-family:inherit; font-size:13px; letter-spacing:0;
}
.storefront .detail-page .detail-panel{
  background:#fff; border:0; border-radius:28px !important;
  box-shadow:0 4px 24px rgba(0,0,0,.06) !important; overflow:hidden;
}
.storefront .detail-panel .shot{ background:#fff; box-shadow:none; }
.storefront .detail-info{ padding:42px; }
.storefront .detail-cat{ color:#bf4800; font-size:12px; font-weight:650; letter-spacing:0; text-transform:none; }
.storefront .detail-info .name{ font-size:clamp(30px,3.4vw,44px); font-weight:650; letter-spacing:-.04em; }
.storefront .detail-info .price{ color:#1d1d1f; font-family:inherit; font-size:18px; }
.storefront .detail-info .desc{ color:#6e6e73; font-size:15px; line-height:1.5; }
.storefront .gallery-thumbs{ border-color:#e8e8ed; }
.storefront .gallery-thumb{ border-radius:10px; }
.storefront .order-modal{ background:rgba(0,0,0,.38); backdrop-filter:blur(12px); }
.storefront .order-modal-panel,
.storefront .confirm-panel{
  background:#fff; border:0; border-radius:24px; box-shadow:0 24px 70px rgba(0,0,0,.20);
}
.storefront .order-field input,
.storefront .order-field textarea{ border-color:#d2d2d7; border-radius:12px; font-family:inherit; }
.storefront .option-pill{ border-color:#d2d2d7; background:#fff; }
.storefront .option-pill:has(input:checked){ background:#0071e3; border-color:#0071e3; box-shadow:none; }
.storefront .cart-fab{ background:#0071e3; box-shadow:0 8px 24px rgba(0,113,227,.28); }
.storefront .home-fab{ background:#fff; color:#1d1d1f; box-shadow:0 6px 22px rgba(0,0,0,.12); }
.storefront .cart-badge{ background:#1d1d1f; color:#fff; border-color:#f5f5f7; }

/* Informational pages and footer */
.storefront .page-hero{ background:#000; padding:80px 6vw 70px; }
.storefront .page-hero .eyebrow{ color:#f5f5f7; }
.storefront .content-main{ max-width:1200px; }
/* Both content pages (/what-is-3d-printing, /faq) ask for the narrower
   reading column with class="content-main content-main-narrow", but the
   plain .content-main-narrow rule further up (max-width:1040px) is a
   single class and so loses to the .storefront .content-main override
   right above this one on specificity — meaning the narrow width silently
   never applied and both pages rendered at the full 1200px. Restating it
   scoped to .storefront puts it at equal specificity with that override
   and, being later in the file, it now wins.
   1040px keeps the FAQ rows and the step/tech/benefit card grids from
   stretching into an uncomfortably long measure on a wide desktop, while
   staying roomy enough for the 4/3/3-column grids inside them to hold
   their layout. Lower this number to tighten the column further; ~900px
   is about as narrow as the 4-column step grid comfortably goes. */
.storefront .content-main-narrow{ max-width:1040px; }
.storefront .step-card,
.storefront .tech-card,
.storefront .faq-item{ background:#fff; border:0; border-radius:20px; }
.storefront .step-card,
.storefront .tech-card{ padding:26px 24px; }
.storefront .more-resources{ background:#fff; border:0; border-radius:24px; }
/* Keep the original header/footer layouts and original full-color logo,
   while using Apple's light neutral palette around them. */
.storefront .sticky-header{
  background:rgba(246,246,248,.68);
  border-bottom:1px solid rgba(255,255,255,.62);
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 10px 30px rgba(0,0,0,.06);
  backdrop-filter:saturate(210%) blur(26px);
  -webkit-backdrop-filter:saturate(210%) blur(26px);
}
.storefront .navbar{
  --paper:#1d1d1f;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --gold:#0066cc;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.18);
  background:transparent;
  border-bottom:0;
}
.storefront .nav-logo{ filter:none; opacity:1; }
.storefront .navbar .brand{ color:#1d1d1f; }
.storefront .navbar-links a{ color:#424245; }
.storefront .navbar-links a:hover,
.storefront .navbar-links a.active{ color:#0066cc; }
.storefront .nav-toggle,
.storefront .search-toggle{ color:#1d1d1f; }
.storefront .navbar-search input{
  background:#fff; color:#1d1d1f; border-color:rgba(0,0,0,.16);
}
.storefront .navbar-search svg,
.storefront .navbar-search .search-clear{ color:#6e6e73; }

.storefront .site-footer{
  --paper:#1d1d1f;
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --gold:#0066cc;
  --line:rgba(0,0,0,.08);
  --line-strong:rgba(0,0,0,.16);
  background:#e8e8ed;
  color:#1d1d1f;
  border-top:1px solid rgba(0,0,0,.08);
}
.storefront .footer-tag,
.storefront .footer-contact,
.storefront .footer-links-col a{ color:#6e6e73; }
.storefront .footer-contact:hover,
.storefront .footer-links-col a:hover{ color:#0066cc; }
.storefront .footer-social a{ background:#d2d2d7; color:#1d1d1f; }
.storefront .footer-social a:hover{ background:#1d1d1f; color:#fff; }
.storefront .hero{
  --paper:#EAE6DC;
  --card:#F6F3EC;
  --ink:#201D1A;
  --ink-soft:#685F53;
  --gold:#C9A227;
  --teal:#24413D;
  --brick:#8B4A3B;
  --line:rgba(32,29,26,.14);
  --line-strong:rgba(32,29,26,.28);
}
.storefront .hero .hero-cta{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:980px; padding:12px 21px; font-family:'Inter',sans-serif;
  background:linear-gradient(180deg,rgba(24,148,255,.56),rgba(0,101,235,.42));
  color:#fff; border:1px solid rgba(255,255,255,.46);
  text-shadow:0 1px 3px rgba(0,48,105,.45);
  backdrop-filter:saturate(185%) blur(10px); -webkit-backdrop-filter:saturate(185%) blur(10px);
  box-shadow:
    inset 0 -1px 1px rgba(0,64,145,.30),
    0 8px 24px rgba(0,113,227,.24);
  transition:background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.storefront .hero .hero-cta::before{
  content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(circle at 0 0,rgba(255,255,255,.58),rgba(255,255,255,.14) 16%,transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(255,255,255,.20),transparent 28%);
}
.storefront .hero .hero-cta::after{
  content:""; position:absolute; inset:2px; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.storefront .hero .hero-cta:hover{
  background:linear-gradient(180deg,rgba(48,164,255,.70),rgba(0,119,245,.56));
  transform:none;
  box-shadow:
    inset 0 -1px 1px rgba(0,64,145,.30),
    0 10px 28px rgba(0,113,227,.32);
}
.storefront .hero .hero-cta:active{
  transform:translateY(0) scale(.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 14px rgba(0,113,227,.22);
}

/* Tablet: retain roomy cards while reducing the feature card footprint. */
@media (min-width:681px) and (max-width:1080px){
  .storefront .category-row,
  .storefront .popular-inner,
  .storefront .store-main{ padding-left:32px; padding-right:32px; }
  .storefront .store-card{ border-radius:22px; }
  .storefront .detail-info{ padding:32px; }
}

/* Phones */
@media (max-width:680px){
  .storefront .category-row-wrap{
    width:100%;
    min-width:0;
    overflow:hidden;
  }
  .storefront .navbar-inner > .navbar-links{
    background:rgba(245,245,247,.98); border-top-color:rgba(0,0,0,.08);
  }
  .storefront .navbar-links a{ border-bottom-color:rgba(0,0,0,.08); }
  .storefront .category-row-wrap::before{ background:linear-gradient(to right,#f5f5f7,rgba(245,245,247,0)); }
  .storefront .category-row-wrap::after{ background:linear-gradient(to left,#f5f5f7,rgba(245,245,247,0)); }
  .storefront .category-row{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    max-width:none;
    padding:12px 4px;
    gap:8px;
  }
  .storefront .cat-chip{ min-height:36px; padding:8px 15px; font-size:12px; }
  .storefront .cat-nav-btn{ border:0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); }

  .storefront .popular-inner{ padding:42px 16px 16px; }
  .storefront .popular-page{ padding:0 2px; gap:12px; }
  .storefront #similarTrack .popular-page{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .storefront .similar-products-carousel{
    touch-action:pan-y;
    -webkit-user-select:none;
    user-select:none;
  }
  .storefront .section-head h2{ font-size:28px; }
  .storefront .store-main{ padding:42px 12px 88px; }
  .storefront .catalog-controls{ padding:0 4px; }
  .storefront .store-grid{ gap:12px; }
  .storefront .store-card{ border-radius:18px; }
  .storefront .store-card .shot{ padding:8px 8px 0; }
  .storefront .store-card .shot img{ border-radius:12px; }
  .storefront .store-card .body{ padding:12px 12px 15px; }
  .storefront .store-card .cat-label{ font-size:9.5px; }
  .storefront .store-card .name{ font-size:14px; line-height:1.22; margin:2px 0 6px; }
  .storefront .store-card .price{ font-size:12px; }
  .storefront .store-card .ribbon{ top:9px; left:9px; font-size:8.5px; padding:4px 7px; }
  .storefront .card-quick-add{ top:9px; right:9px; width:30px; height:30px; }

  .storefront .detail-page{ padding:24px 12px 72px; }
  .storefront .detail-page .detail-panel{ border-radius:22px !important; }
  .storefront .detail-info{ padding:26px 20px 30px; }
  .storefront .detail-info .name{ font-size:30px; }
  .storefront .order-modal{ padding:12px; }
  .storefront .order-modal-panel{ border-radius:22px; }
  .storefront .page-hero{ padding:56px 20px 48px; }
  .storefront .content-main{ padding:42px 16px 70px; }
  .storefront .footer-inner{ padding:30px 20px; }
}

/* Very narrow phones keep two useful product columns without overflow. */
@media (max-width:380px){
  .storefront .store-grid{ gap:9px; }
  .storefront .store-card .body{ padding:10px 9px 13px; }
  .storefront .store-card .name{ font-size:13px; }
  .storefront .card-quick-add{ width:28px; height:28px; }
}

@media (prefers-reduced-motion:reduce){
  .storefront .store-card,
  .storefront .store-card .shot img{ transition:none; }
}

/* ========================================================================
   PRODUCT PAGE — marketplace-style purchase layout
   Gallery and buying controls share the top card; long-form information
   gets its own full-width card below, so neither column controls the other.
   ======================================================================== */
.storefront .detail-page{
  max-width:1280px;
  padding-top:32px;
  padding-bottom:20px;
}
.storefront .detail-page ~ .popular-section .popular-inner{
  padding-top:20px;
}
.storefront .detail-page .detail-topbar{
  margin-bottom:16px;
}
.storefront .detail-page .detail-topbar .switch-link,
.storefront .detail-page .detail-topbar .cat-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  min-height:40px;
  padding:0 16px;
  font-size:13px;
  line-height:1;
}
.storefront .detail-page .detail-panel{
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  align-items:start;
  height:auto !important;
  max-height:none !important;
  overflow:hidden;
}
.storefront .detail-page .gallery-col{
  padding:28px;
  background:#fafafa;
  align-self:stretch;
}
.storefront .detail-page .gallery-col .shot{
  width:100%;
  aspect-ratio:1 / 1;
  min-height:0;
  max-height:none;
  flex:none;
  border-radius:18px;
  overflow:hidden;
}
.storefront .detail-page .gallery-thumbs{
  flex-wrap:nowrap;
  gap:10px;
  padding:14px 0 0;
  border:0;
  background:transparent;
  overflow-x:auto;
  scrollbar-width:thin;
}
.storefront .detail-page .gallery-thumb{
  width:64px;
  height:64px;
  border-color:#e1e1e5;
  opacity:.7;
  transition:border-color .18s ease, opacity .18s ease;
}
.storefront .detail-page .gallery-thumb:hover,
.storefront .detail-page .gallery-thumb.active{
  border-color:#0071e3;
  opacity:1;
}
.storefront .detail-page .detail-info{
  align-self:stretch;
  padding:44px 46px;
  border-left:1px solid #ededf0;
}
.storefront .detail-page .detail-info .name{
  padding-right:0;
  margin-bottom:14px;
  line-height:1.08;
}
.storefront .detail-page .product-dimensions{
  margin:-4px 0 14px;
}
.storefront .detail-page .detail-info .price{
  margin:0 0 22px;
  padding:18px 20px;
  border-radius:14px;
  background:#f5f5f7;
  color:#bf4800;
  font-size:28px;
  font-weight:650;
}
.storefront .detail-page .add-to-cart-block{
  margin-top:10px;
  position:relative;
  padding-top:26px;
}
.storefront .detail-page .add-to-cart-block > .order-modal-error{
  position:absolute;
  top:0;
  right:0;
  left:0;
  margin:0;
  line-height:1.35;
}
.storefront .detail-page .quantity-option-row{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.storefront .detail-page .quantity-option-row .order-option-field,
.storefront .detail-page .quantity-option-row .order-color-field{
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
}
.storefront .detail-page .quantity-option-row .order-field-qty{
  width:136px;
  margin:0;
}
.storefront .detail-page .quantity-stepper{
  display:grid;
  grid-template-columns:40px 54px 40px;
  height:42px;
  overflow:hidden;
  border:1px solid #d2d2d7;
  border-radius:10px;
  background:#fff;
}
.storefront .detail-page .quantity-step{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:#fff;
  color:#1d1d1f;
  font:500 19px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease;
}
.storefront .detail-page .quantity-step:first-child{
  border-right:1px solid #d2d2d7;
}
.storefront .detail-page .quantity-step:last-child{
  border-left:1px solid #d2d2d7;
}
.storefront .detail-page .quantity-step:hover:not(:disabled){
  background:#f5f5f7;
  color:#0071e3;
}
.storefront .detail-page .quantity-step:disabled{
  color:#c7c7cc;
  cursor:not-allowed;
}
.storefront .detail-page .add-to-cart-block .order-field-qty input{
  width:54px;
  min-height:40px;
  padding:0 4px;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:center;
  appearance:textfield;
  -moz-appearance:textfield;
}
.storefront .detail-page .add-to-cart-block .order-field-qty input::-webkit-inner-spin-button,
.storefront .detail-page .add-to-cart-block .order-field-qty input::-webkit-outer-spin-button{
  margin:0;
  -webkit-appearance:none;
}
.storefront .detail-page .add-to-cart-block .order-color-legend,
.storefront .detail-page .add-to-cart-block .order-field label{
  margin-bottom:9px;
  color:#6e6e73;
  font-size:13px;
  font-weight:600;
}
.storefront .detail-page .add-to-cart-block .option-pills{
  gap:8px;
  padding:0;
}
.storefront .detail-page .add-to-cart-block .option-pill{
  min-height:42px;
  padding:0 16px;
  border-radius:10px;
  font-size:12.5px;
  line-height:1.2;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#1d1d1f;
}
.storefront .detail-page .add-to-cart-block .option-pill > span:first-of-type{
  display:flex;
  align-items:center;
  min-height:40px;
}
.storefront .detail-page .add-to-cart-block .option-pill:hover{
  border-color:#86868b;
  background:#fff;
  color:#1d1d1f;
}
.storefront .detail-page .add-to-cart-block .option-pill:has(input:checked){
  border-color:#0071e3;
  background:#fff;
  color:#1d1d1f;
  font-weight:600;
  box-shadow:0 0 0 1px #0071e3;
}
.storefront .detail-page .add-to-cart-block .color-swatches{
  gap:6px;
  padding:0;
}
.storefront .detail-page .add-to-cart-block .color-swatch-box{
  width:34px;
  height:34px;
}
.storefront .detail-page .option-inline-color{
  margin-top:10px;
  padding-top:10px;
}
.storefront .detail-page .order-now-btn{
  min-height:52px;
  margin-top:24px;
  border-radius:12px;
  font-size:16px;
}
.storefront .detail-page #addToCartBtn:hover{
  transform:none;
}
.storefront .detail-page .product-description{
  margin-top:24px;
  padding:34px 40px 40px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,.045);
}
.storefront .detail-page .product-description h2{
  margin:0 0 20px;
  padding-bottom:16px;
  border-bottom:1px solid #e8e8ed;
  color:#1d1d1f;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  font-size:24px;
  font-weight:650;
  letter-spacing:-.025em;
}
.storefront .detail-page .product-description .desc{
  max-width:900px;
  color:#515154;
  font-size:15px;
  line-height:1.7;
}
.storefront .detail-page .product-description .desc p{
  margin:0 0 14px;
}
.storefront .detail-page .product-description .desc p:last-child{
  margin-bottom:0;
}
.storefront .detail-page .product-description .desc ul,
.storefront .detail-page .product-description .desc ol{
  margin:0 0 14px;
  padding-left:1.4em;
}

@media (max-width:900px){
  .storefront .detail-page .detail-panel{
    grid-template-columns:minmax(0,1fr);
  }
  .storefront .detail-page .detail-info{
    border-top:1px solid #ededf0;
    border-left:0;
  }
  .storefront .detail-page .gallery-col .shot{
    aspect-ratio:4 / 3;
  }
}

/* Cart title spacing is kept after the responsive cart rules so the product
   list never sits tight against the heading on either desktop or mobile. */
.storefront .cart-drawer-panel > h2{
  margin-bottom:22px;
}
@media (max-width:480px){
  .storefront .cart-drawer-panel > h2{
    margin-bottom:16px;
  }
}

@media (max-width:680px){
  .storefront .detail-page{
    padding-top:20px;
    padding-bottom:12px;
  }
  .storefront .detail-page ~ .popular-section .popular-inner{
    padding-top:16px;
  }
  .storefront .detail-page .detail-topbar{
    padding:0 4px;
  }
  .storefront .detail-page .detail-topbar .switch-link,
  .storefront .detail-page .detail-topbar .cat-chip{
    height:36px;
    min-height:36px;
    padding:0 14px;
    font-size:12px;
  }
  .storefront .detail-page .gallery-col{
    padding:12px;
  }
  .storefront .detail-page .gallery-col .shot{
    aspect-ratio:1 / 1;
    border-radius:14px;
  }
  .storefront .detail-page .gallery-thumbs{
    padding-top:10px;
  }
  .storefront .detail-page .gallery-thumb{
    width:54px;
    height:54px;
  }
  .storefront .detail-page .detail-info{
    padding:28px 20px 30px;
  }
  .storefront .detail-page .detail-info .name{
    font-size:28px;
  }
  .storefront .detail-page .detail-info .price{
    padding:14px 16px;
    font-size:24px;
  }
  .storefront .detail-page .product-description{
    margin-top:16px;
    padding:26px 20px 30px;
    border-radius:22px;
  }
  .storefront .detail-page .product-description h2{
    font-size:21px;
  }
}