/* Pixel Wholesale & Liquidation demo: the stylesheet every page shares.
   The first part is the home page's own CSS, moved out of index.html unchanged.
   The rest (cart, checkout, product page, shop page) was added on 16 Oct 2026. */
/* the three fonts, served from this site (fonts/, Google Fonts files, latin and latin-ext): no stylesheet from
   fonts.googleapis.com holding up the first paint, no second connection to fonts.gstatic.com. Not preloaded: on a
   slow phone link 100 KB of fonts at the start held the first paint back by most of a second (22 Oct, measured). */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/bricolage-grotesque-v9-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700 800;font-display:swap;src:url(fonts/bricolage-grotesque-v9-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-v12-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-v12-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-v20-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-v20-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  /* his logo: navy ground, yellow band, pink + light blue + blue boxes, white type */
  --navy:#0C1E33;--navy-2:#12304F;--navy-3:#1B3A5C;--navy-4:#244B74;
  --yel:#F2C13E;--yel-hot:#FFD35A;
  --pink:#E8398A;--pink-soft:#F4A3C5;--sky:#7EC8F0;--blue:#2A75B8;
  --paper:#F5F7FA;--paper-2:#E9EEF4;
  --td:#F2F5F9;--md:#A9B8C8;--tl:#13273D;--ml:#4F6076;
  --line-d:rgba(242,245,249,.12);--line-l:#D5DDE7;
  --new:#2AA876;--open:#F2C13E;--used:#7EC8F0;--refurb:#F4A3C5;
  --ebay-r:#E53238;--ebay-b:#0064D2;--ebay-y:#F5AF02;--ebay-g:#86B817;--fb-blue:#1877F2;
  --ease:cubic-bezier(.4,0,.2,1);
  --pad:clamp(58px,9vw,104px);
  --nav-h:58px;
  /* one scale for corners and shadows, one name per font */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --sh-sm:0 6px 16px -8px rgba(19,39,61,.18);--sh-md:0 18px 40px -18px rgba(19,39,61,.35);--sh-lg:0 30px 80px -30px rgba(0,0,0,.6);
  --fd:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --fb:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,monospace;
  --px:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 .5h48M.5 0v48' stroke='%23fff' stroke-opacity='.045' fill='none'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--navy);color:var(--td);line-height:1.6;overflow-x:hidden;padding-bottom:86px;-webkit-font-smoothing:antialiased}
@media(min-width:960px){body{padding-bottom:0}}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fill{fill:currentColor;stroke:none}
section[id]{scroll-margin-top:70px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* type */
.h2{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,5.2vw,3.25rem);line-height:1;letter-spacing:-.03em}
.h2 em{font-style:normal;color:var(--yel)}
:is(.light,.light2,.swrap,.pwrap,.rel) .h2 em{color:var(--blue)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 11px/1.2 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:14px}
.eyebrow::before{content:'';width:26px;height:8px;flex:none;background:linear-gradient(90deg,var(--pink) 0 33%,var(--pink-soft) 0 66%,var(--sky) 0)}
:is(.light,.light2,.swrap,.pwrap,.rel) .eyebrow{color:#1F5F99}   /* 5.7:1 on the light grey; --blue is 4.2:1, too light for 11px text */
.lede{color:var(--md);font-size:clamp(.98rem,2.2vw,1.08rem);max-width:60ch;margin-top:14px}
.lede b{color:#fff}
:is(.light,.light2,.swrap,.pwrap,.rel) .lede{color:var(--ml)}
:is(.light,.light2,.swrap,.pwrap,.rel) .lede b{color:var(--tl)}
.sec{padding:var(--pad) 0;position:relative;overflow:hidden}
.sec-head{margin-bottom:clamp(28px,5vw,46px)}
.light{background:var(--paper);color:var(--tl)}
.light2{background:var(--paper-2);color:var(--tl)}
.dark2{background:var(--navy-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 15px/1.2 var(--fb);padding:15px 24px;min-height:50px;border-radius:var(--r-md);text-decoration:none;border:0;cursor:pointer;transition:transform .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);text-align:center;-webkit-tap-highlight-color:transparent}
.btn .ic{width:18px;height:18px}
.btn-fire{background:var(--yel);color:#1A2433;box-shadow:0 14px 30px -14px rgba(242,193,62,.7)}
.btn-fire:hover{background:var(--yel-hot);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--sky);color:var(--sky)}
.btn-ink{background:var(--navy-3);color:#fff}
.btn-ink:hover{background:var(--navy-4);transform:translateY(-2px)}
.btn-ghost-l{background:#fff;color:var(--tl);border:1.5px solid var(--line-l)}
.btn-ghost-l:hover{border-color:var(--blue);color:var(--blue)}
.btn-sm{padding:11px 16px;min-height:44px;font-size:14px}
.btn:active{transform:scale(.97)}

/* nav */
.hn{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0 0}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;min-width:0}
.brand-mark{width:46px;height:46px;flex:none;border-radius:var(--r-md);background:var(--navy-3);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 20px rgba(0,0,0,.4)}
.brand-mark img{width:38px;height:auto}
.brand-name{font:800 19px/1 var(--fd);letter-spacing:.02em;white-space:nowrap}
.brand-name small{display:flex;align-items:center;gap:6px;font:600 9px/1.2 var(--fm);letter-spacing:.15em;text-transform:uppercase;color:var(--yel);margin-top:5px}
.brand-name small i{display:inline-flex;gap:2px}
.brand-name small i b{width:6px;height:6px;display:block}
/* PIXEL WHOLESALE on the first line, & LIQUIDATION under it: half as wide as the one long line */
.bn-w{font:600 9.5px/1 var(--fm);letter-spacing:.15em;text-transform:uppercase;color:var(--yel);vertical-align:3px;margin-left:3px}
.mnav .bn-w{display:none}
.co-h .bn-w{color:var(--blue)}
.hn-links{display:none;gap:22px}
.hn-links a{color:#D3DAE1;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hn-links a:hover{color:var(--yel)}
.hn-act{display:flex;gap:8px;align-items:center}
.hn-tel{display:none;white-space:nowrap}
.icon-btn{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;text-decoration:none}
.icon-btn .ic{width:19px;height:19px}
@media(min-width:1060px){.hn-links{display:flex}.hn-tel{display:inline-flex}.hn-act .icon-btn{display:none}}
@media(max-width:400px){.brand-name{font-size:16.5px}.brand-name small,.bn-w{letter-spacing:.1em;font-size:8px}}

/* sticky nav */
.mnav{position:fixed;top:0;left:0;right:0;z-index:70;transform:translateY(-110%);transition:transform .35s var(--ease);background:rgba(12,30,51,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d)}
.mnav.on{transform:none}
.mnav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--pink) 0 33%,var(--yel) 0 66%,var(--sky) 0);opacity:.9}
.mnav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:9px;padding-bottom:9px}
.mnav .brand-mark{width:36px;height:36px}.mnav .brand-mark img{width:30px}
.mnav .brand-name{font-size:16px}.mnav .brand-name small{display:none}
.mnav-links{display:none;gap:20px}
.mnav-links a{color:#D3DAE1;text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mnav-links a:hover{color:var(--yel)}
.mnav .hn-tel{display:none}
@media(min-width:1060px){.mnav-links{display:flex}.mnav .hn-tel{display:inline-flex}.mnav .icon-btn{display:none}}

/* menu */
.menu{position:fixed;inset:0;z-index:100;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.menu.open{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
.menu-bg{position:absolute;inset:0;background:rgba(6,14,24,.78);backdrop-filter:blur(4px)}
.menu-panel{position:relative;margin:calc(14px + env(safe-area-inset-top)) 14px 0;max-width:420px;margin-left:auto;margin-right:auto;background:linear-gradient(165deg,var(--navy-2),var(--navy));border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);padding:16px 18px 20px;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.menu-head{display:flex;justify-content:space-between;align-items:center}
.menu ul{list-style:none;margin-top:8px}
.menu li a{display:flex;align-items:center;min-height:52px;color:var(--td);text-decoration:none;font:700 19px/1 var(--fd);border-bottom:1px solid var(--line-d)}
.menu li:last-child a{border-bottom:0}
.menu .btn{width:100%;margin-top:14px}

/* ===== hero: the scan stage ===== */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:var(--td);min-height:min(94vh,900px)}
.hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 55% at 72% 42%,rgba(42,117,184,.42),transparent 70%),
  radial-gradient(40% 40% at 20% 85%,rgba(232,57,138,.16),transparent 70%),
  linear-gradient(180deg,#0E2440 0%,var(--navy) 60%,#0A192B 100%)}
.hero-bg::before{content:'';position:absolute;inset:0;background:var(--px);mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000 30%,transparent 100%)}
.hero-in{position:relative;display:grid;gap:22px;padding:clamp(22px,5vh,56px) 0 clamp(30px,6vh,60px)}
@media(min-width:1000px){.hero-in{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:28px 48px;align-items:start;min-height:min(80vh,760px)}
  .hero-copy{grid-column:1;grid-row:1/3;align-self:center}
  .stage{grid-column:2;grid-row:1}
  .ctl{grid-column:2;grid-row:2}}
@media(max-width:999px){.hero-in{grid-template-columns:1fr;gap:18px}
  .hero-copy{display:contents}
  .hero-copy .th-loc{order:1;justify-self:start;margin:0}
  .hero-copy h1{order:2}
  .stage{order:3}
  .ctl{order:4}
  .hero-copy .cta-row{order:5;margin-top:0}
  .hero-in .hero-copy .lede{order:6;margin-top:0}
  .hero-copy .chips{order:7;margin-top:0}}
@media(max-width:480px){.hero-copy .th-loc{font-size:.6rem;letter-spacing:0;padding:8px 12px;gap:7px}}
.th-loc{display:inline-flex;align-items:center;gap:9px;font:600 .68rem/1.3 var(--fm);letter-spacing:.13em;text-transform:uppercase;color:#DCE6F0;border:1px solid rgba(255,255,255,.2);background:rgba(12,30,51,.6);border-radius:var(--r-pill);padding:9px 14px;margin-bottom:16px}
.th-loc::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--yel);box-shadow:0 0 0 4px rgba(242,193,62,.22);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(242,193,62,0)}}
.hero-copy h1{font-family:var(--fd);font-weight:800;letter-spacing:-.035em;line-height:.98;max-width:14ch;font-size:clamp(2.35rem,5.4vw,4.3rem);text-shadow:0 10px 50px rgba(0,0,0,.5)}
.hero-copy h1 em{font-style:normal;background:linear-gradient(90deg,var(--pink),var(--yel) 50%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy .lede{color:#DCE2E8;font-size:clamp(1rem,1.6vw,1.1rem);margin-top:16px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#E3EAF2;border:1px solid rgba(255,255,255,.2);background:rgba(12,30,51,.5);border-radius:var(--r-pill);padding:7px 12px}
.chip .ic{width:15px;height:15px;color:var(--yel)}
.chip .ebay{font-size:13px}
a.chip{text-decoration:none;transition:border-color .2s,color .2s}
a.chip:hover{border-color:var(--yel);color:#fff}
/* search in both navs (desktop) */
.hn-search{display:none;align-items:center;gap:8px;flex:0 1 200px;min-width:0;padding:9px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#A9B8C8}
.hn-search .ic{width:16px;height:16px}
.hn-search input{background:transparent;border:0;color:#fff;font:600 13px/1 var(--fb);outline:0;width:100%;min-width:0}
.hn-search input::placeholder{color:#A9B8C8}
.hn-search input::-webkit-search-cancel-button{display:none}
.hn-search:focus-within{border-color:var(--sky)}
@media(min-width:1060px){.hn-search{display:flex}}
@media(min-width:1060px) and (max-width:1300px){.hn-links{gap:14px}.hn-search{flex-basis:160px}.hn-links a{font-size:12.5px}}

/* the stage */
.stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#FBFCFD,#E6ECF3);box-shadow:var(--sh-lg),0 0 0 1px rgba(255,255,255,.12);aspect-ratio:5/4;isolation:isolate}
@media(max-width:999px){.stage{aspect-ratio:4/3.3}}
@media(max-width:480px){.stage{aspect-ratio:1/1.02}}
.stage::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(70% 60% at 50% 45%,rgba(255,255,255,.9),transparent 75%),repeating-linear-gradient(90deg,transparent 0 46px,rgba(19,39,61,.035) 46px 47px);pointer-events:none}
/* the multiply blend sits on the photo box, not on the photo: the box has a z-index, which makes it its own group,
   so a blend on the photo alone stops at the box and the white behind the product shows */
.st-img{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:10% 12% 18%;mix-blend-mode:multiply}
.st-img img{position:absolute;max-width:82%;max-height:72%;width:auto;height:auto;object-fit:contain;opacity:0;transform:scale(.92) translateY(10px);transition:opacity .55s var(--ease),transform .7s cubic-bezier(.2,.8,.2,1)}
.st-img img.on{opacity:1;transform:none}
.st-img img.cut{filter:drop-shadow(0 18px 18px rgba(19,39,61,.26))}
/* the whole stage opens the item it shows */
.st-link{position:absolute;inset:0;z-index:5;border-radius:inherit}
.st-link:focus-visible{outline:3px solid var(--yel);outline-offset:-3px}
.st-img img.out{opacity:0;transform:scale(1.04) translateY(-8px)}
.st-top{position:absolute;left:16px;top:16px;z-index:4;display:flex;gap:8px;align-items:center}
.st-k{display:inline-flex;align-items:center;gap:8px;font:600 10px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(12,30,51,.82);backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:8px 12px}
.st-k i{width:7px;height:7px;border-radius:50%;background:var(--yel);font-style:normal;animation:pulse 1.6s ease-in-out infinite}
.st-cat{font:700 12px/1 var(--fb);color:var(--tl);background:#fff;border-radius:var(--r-pill);padding:8px 12px;box-shadow:var(--sh-sm)}
.st-beam{position:absolute;left:0;right:0;top:-10%;height:7%;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,rgba(242,193,62,.0) 30%,rgba(242,193,62,.55) 50%,rgba(255,80,80,.9) 52%,rgba(242,193,62,.55) 54%,transparent)}
.stage.scan .st-beam{animation:beam 1.05s cubic-bezier(.4,0,.2,1) both}
@keyframes beam{0%{top:-10%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:104%;opacity:0}}
/* the brand's pixels: three squares pop up and float off as each scan lands */
.st-sq{position:absolute;z-index:4;width:12px;height:12px;opacity:0;pointer-events:none}
.stage.scan .st-sq{animation:sq .9s .55s cubic-bezier(.2,.9,.3,1) both}
.st-sq.a{left:20%;top:16%;background:var(--pink)}
.st-sq.b{left:71%;top:12%;background:var(--yel)}
.st-sq.c{left:80%;top:30%;background:var(--sky)}
.stage.scan .st-sq.b{animation-delay:.62s}.stage.scan .st-sq.c{animation-delay:.7s}
@keyframes sq{0%{opacity:0;transform:translateY(10px) scale(.4)}30%{opacity:1;transform:translateY(-6px) scale(1.1)}100%{opacity:0;transform:translateY(-22px) scale(.8)}}
.st-tag{position:absolute;right:14px;bottom:14px;z-index:4;background:#fff;color:var(--tl);border-radius:var(--r-md);padding:12px 14px 12px 14px;min-width:168px;box-shadow:0 18px 40px -14px rgba(19,39,61,.5),0 0 0 1px rgba(19,39,61,.08);transform:translateY(12px) scale(.94);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.4),opacity .3s}
.st-tag.on{transform:none;opacity:1}
.st-tag .pr{font:800 32px/1 var(--fd);letter-spacing:-.03em;color:var(--tl)}
.st-tag .pr small{font:600 12px/1 var(--fm);letter-spacing:.08em;color:var(--ml);margin-left:4px}
.st-tag .nm{font-size:12.5px;line-height:1.3;color:var(--ml);margin-top:6px;max-width:200px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-tag .bc{display:flex;align-items:flex-end;gap:10px;margin-top:9px}
.st-tag .bc svg{height:18px;width:92px}
.st-tag .bc span{font:600 9.5px/1 var(--fm);letter-spacing:.1em;color:var(--ml)}
.cond{display:inline-flex;align-items:center;gap:6px;font:600 10px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px 6px 8px;border-radius:var(--r-pill);background:#fff;color:var(--tl);border:1px solid var(--line-l)}
.cond::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--new)}
.cond[data-c="open"]::before{background:var(--open)}
.cond[data-c="used"]::before{background:var(--used)}
.cond[data-c="refurb"]::before{background:var(--refurb)}
.st-tag .cond{position:absolute;left:14px;top:-16px}
.st-pal{position:absolute;left:16px;bottom:14px;z-index:4;width:64px;opacity:.9;filter:drop-shadow(0 6px 10px rgba(19,39,61,.25))}
/* phones: the product sits high in the tile and the tag stays small, so the two never overlap */
@media(max-width:480px){
  .st-img{display:block;padding:0}
  .st-img img{position:absolute;left:10%;right:10%;top:14.5%;margin:0 auto;width:auto;max-width:80%;max-height:54%;object-fit:contain}
  .st-tag{min-width:150px;max-width:62%;padding:10px 12px 10px;right:10px;bottom:10px}
  .st-tag .pr{font-size:22px}
  .st-tag .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:11.5px;margin-top:4px}
  .st-tag .bc{margin-top:7px}
  .st-tag .bc svg{height:14px;width:70px}
  .st-pal{width:46px;left:12px;bottom:10px}
}
@media(max-width:400px){.st-tag .bc{display:none}}

/* the control card */
.ctl{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-lg);background:rgba(10,24,40,.7);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--sh-lg);overflow:hidden}
.sig-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.sig-head b{font:600 .7rem/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:#DCE6F0}
.sig-head span{font:600 .66rem/1.3 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--yel);text-align:right}
.pk{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:14px 16px 0}
.pk button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;padding:8px 4px;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#C9D3DE;font:700 11.5px/1.1 var(--fb);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.pk button .ic{width:19px;height:19px;color:var(--sky);transition:color .2s}
.pk button:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.pk button[aria-pressed="true"]{background:var(--yel);border-color:var(--yel);color:#1A2433}
/* Coming soon shelves in the picker: links to their shop page, the same size as the buttons */
.pk .pk-soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;padding:8px 4px;border-radius:var(--r-md);border:1px dashed rgba(255,255,255,.28);background:transparent;color:#C9D3DE;font:700 11.5px/1.1 var(--fb);text-align:center;text-decoration:none;transition:border-color .2s,transform .2s}
.pk .pk-soon .ic{width:19px;height:19px;color:var(--pink-soft)}
.pk .pk-soon small{font:600 9px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--yel)}
.pk .pk-soon:hover{border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.pk button[aria-pressed="true"] .ic{color:#1A2433}
@media(max-width:380px){.pk{grid-template-columns:repeat(4,1fr);gap:5px}.pk button{font-size:10.5px;min-height:54px}}
.pk-read{margin:12px 16px 0;font-size:13.5px;line-height:1.5;color:#D6DDE4;min-height:3.1em}
.pk-read b{color:#fff}
.pk-read .ebay{font-size:13px;margin-left:2px}
.pk-go{display:flex;gap:8px;margin:12px 16px 14px}
.pk-go .btn{flex:1;width:100%}
.pk-read a{color:var(--sky);font-weight:700;text-decoration:none}
.pk-read a:hover{color:#fff}
.pk-go a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 10px;border-radius:var(--r-md);font-weight:800;font-size:14px;text-decoration:none;min-height:48px}
.pk-go .o{background:var(--yel);color:#1A2433;flex:1.5}
.pk-go .o:hover{background:var(--yel-hot)}
.pk-go .e{border:1px solid rgba(255,255,255,.22);color:#fff}
.pk-go .e:hover{border-color:var(--sky);color:var(--sky)}
.pk-go .ic{width:16px;height:16px}

/* eBay wordmark drawn in type */
.ebay{display:inline-flex;align-items:baseline;font:700 1em/1 Arial,Helvetica,sans-serif;letter-spacing:-.06em;font-style:normal}
/* the four letters are <b>, so every ".x b" rule on the page (the 40px score, the white reviewer name) would restyle them: pin them */
.ebay b{font:700 1em/1 Arial,Helvetica,sans-serif!important;letter-spacing:-.06em!important;display:inline!important}
.ebay b:nth-child(1){color:var(--ebay-r)!important}.ebay b:nth-child(2){color:var(--ebay-b)!important}.ebay b:nth-child(3){color:var(--ebay-y)!important}.ebay b:nth-child(4){color:var(--ebay-g)!important}

/* ===== proof strip ===== */
.proof{background:var(--navy-2);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.proof .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
@media(min-width:760px){.proof .wrap{grid-template-columns:repeat(4,1fr)}}
.pf{padding:22px 18px;border-right:1px solid var(--line-d);display:flex;flex-direction:column;gap:4px}
.pf:nth-child(2n){border-right:0}
@media(min-width:760px){.pf:nth-child(2n){border-right:1px solid var(--line-d)}.pf:last-child{border-right:0}}
.pf b{font:800 clamp(1.5rem,3vw,2rem)/1 var(--fd);letter-spacing:-.03em;color:#fff;display:flex;align-items:center;gap:8px}
.pf b .ebay{font-size:.7em}
.pf span{font-size:12.5px;color:var(--md)}
.pf a{color:var(--sky);text-decoration:none;font-weight:700}

/* ===== categories ===== */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:620px){.cats{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1000px){.cats{grid-template-columns:repeat(9,1fr)}}
.cat{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 8px 14px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line-l);color:var(--tl);text-decoration:none;font:700 13px/1.2 var(--fb);text-align:center;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:rgba(42,117,184,.5)}
.cat .ico{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--navy-3);color:#fff}
.cat .ico .ic{width:24px;height:24px}
.cat:nth-child(3n+1) .ico{background:var(--navy-3)}.cat:nth-child(3n+2) .ico{background:var(--blue)}.cat:nth-child(3n+3) .ico{background:var(--pink)}
.cat[aria-pressed="true"]{border-color:var(--yel);box-shadow:0 0 0 3px rgba(242,193,62,.35)}
.cat small{display:block;font:600 10px/1 var(--fm);letter-spacing:.08em;color:var(--ml);margin-top:-3px}

/* ===== product grid ===== */
.finds-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 18px}
.filters button{min-height:44px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line-l);background:#fff;color:var(--tl);font:700 13px/1 var(--fb);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.filters button[aria-pressed="true"]{background:var(--navy-3);color:#fff;border-color:var(--navy-3)}
.filters button .n{margin-left:6px;font:600 11px/1 var(--fm);color:var(--ml)}
.filters button[aria-pressed="true"] .n{color:rgba(255,255,255,.75)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:1040px){.grid{grid-template-columns:repeat(4,1fr)}}
.pc{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-l);border-radius:var(--r-md);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.pc:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:rgba(42,117,184,.45)}
.pc.hide{display:none}
.pc-ph{display:block;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(160deg,#FBFCFD,#EDF1F6);position:relative}
/* the photo sits in a fixed inset box, so tall and wide photos are never clipped by the tile */
.pc-ph img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain;transition:transform .6s var(--ease);mix-blend-mode:multiply}
/* a real photo (not a white studio shot) fills the tile edge to edge */
.pc-ph.photo{background:#E9EEF4}
.pc-ph.photo img{inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.pc:hover .pc-ph img{transform:scale(1.04)}
.pc-ph .cond{position:absolute;left:10px;top:10px;z-index:1;box-shadow:0 2px 8px -2px rgba(19,39,61,.25)}
.pc-body{padding:12px 13px 13px;display:flex;flex-direction:column;gap:6px;flex:1}
.pc h3{font:600 13.5px/1.3 var(--fb);color:var(--tl);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.pc .pr{font:800 20px/1 var(--fd);letter-spacing:-.02em;color:var(--tl);margin-top:2px}
.pc .cat-l{font:600 10px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--ml)}
.show-all{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px}
.show-all .btn[hidden]{display:none}
.show-all[hidden]{display:none}
.empty-card[hidden]{display:none}
.empty-card{margin-top:4px;padding:20px 22px;border-radius:var(--r-md);background:#fff;border:1.5px dashed rgba(42,117,184,.45);display:grid;gap:8px;justify-items:start}
.empty-card b{font:800 1.15rem/1.2 var(--fd);letter-spacing:-.02em;color:var(--tl)}
.empty-card span{color:var(--ml);font-size:13.5px}
.empty-card .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.finds-count{margin-top:8px;color:var(--ml);font-size:13.5px}
.seg label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(42,117,184,.35)}
.pc-act{margin-top:auto;padding-top:8px}
.pc-act .btn{width:100%;min-height:46px;padding:10px 12px;font-size:14px;border-radius:var(--r-md);box-shadow:none}
.pc-act .btn .ic{width:16px;height:16px}
.more-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:22px;padding:18px 20px;border-radius:var(--r-md);background:#fff;border:1.5px dashed rgba(42,117,184,.45)}
.more-row b{font:800 1.15rem/1.2 var(--fd);letter-spacing:-.02em;color:var(--tl)}
.more-row span{color:var(--ml);font-size:13.5px}
.more-row .links{display:flex;flex-wrap:wrap;gap:8px}

/* ===== compact CTA row after sections ===== */
.cta-band{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:clamp(28px,5vw,44px);padding:14px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid var(--line-d)}
:is(.light,.light2,.swrap,.pwrap) .cta-band{background:#fff;border-color:var(--line-l)}
.cta-band > span{font-size:13.5px;color:var(--md);margin-right:4px}
:is(.light,.light2,.swrap,.pwrap) .cta-band > span{color:var(--ml)}

/* ===== how it works ===== */
.steps{display:grid;gap:14px}
@media(min-width:800px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;padding:22px 22px 24px;border-radius:var(--r-lg);background:var(--navy-2);border:1px solid var(--line-d)}
.step i{position:absolute;right:16px;top:14px;font:800 44px/1 var(--fd);letter-spacing:-.04em;color:rgba(255,255,255,.07);font-style:normal}
.step .ico{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--yel);color:#1A2433;margin-bottom:14px}
.step .ico .ic{width:23px;height:23px}
.step h3{font:800 1.25rem/1.1 var(--fd);letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.step p{color:var(--md);font-size:14px}
.step p b{color:#fff}
.step .sub{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.step .sub span{font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid var(--line-d);color:#D6DDE4}

/* ===== pallets ===== */
.pal-grid{display:grid;gap:22px;align-items:center}
@media(min-width:900px){.pal-grid{grid-template-columns:1.1fr .9fr}}
.pal-art{position:relative;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#133356,#0C1E33);border:1px solid var(--line-d);aspect-ratio:4/3;display:grid;place-items:center;isolation:isolate}
.pal-art::before{content:'';position:absolute;inset:0;background:var(--px);z-index:-1}
.pal-art svg{width:72%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.pal-art .lbl{position:absolute;left:16px;bottom:14px;font:600 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:#DCE6F0;background:rgba(12,30,51,.8);padding:8px 12px;border-radius:var(--r-pill)}
.pal-list{list-style:none;display:grid;gap:10px;margin-top:18px}
.pal-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#D6DDE4}
.pal-list li .ic{width:20px;height:20px;color:var(--yel);margin-top:2px}

/* ===== where to find us ===== */
.where{display:grid;gap:14px}
@media(min-width:760px){.where{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.where{grid-template-columns:repeat(4,1fr)}}
.wh{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line-l);color:var(--tl);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.wh:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.wh .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wh .mark{height:30px;display:flex;align-items:center;font-size:26px}
.wh .mark .fbm{width:30px;height:30px;color:var(--fb-blue)}
.wh b{font:800 1.15rem/1.15 var(--fd);letter-spacing:-.02em}
.wh .st{display:flex;flex-wrap:wrap;gap:6px}
.wh .st span{font:700 11.5px/1 var(--fb);padding:6px 9px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line-l);color:#3F4A55}
.wh p{font-size:13.5px;color:var(--ml)}
.wh .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:800;font-size:13.5px}
.wh .go .ic{width:15px;height:15px}

/* ===== review wall (eBay feedback) ===== */
.rv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,40px)}
.rv-score{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r-lg);background:var(--navy-2);border:1px solid rgba(255,255,255,.16)}
.rv-score .eb{width:44px;height:44px;border-radius:var(--r-md);background:#fff;display:grid;place-items:center;font-size:19px}
.rv-score b{font:800 40px/1 var(--fd);letter-spacing:-.03em;color:#fff}
.rv-score small{display:block;color:var(--md);font-size:13.5px;font-weight:600;margin-top:4px}
.rv-score small a{color:var(--sky);text-decoration:none}
.rvgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.rvgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.rvgrid{grid-template-columns:repeat(3,1fr)}}
.rv{margin:0;padding:24px;border-radius:var(--r-lg);background:var(--navy-2);border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:14px}
.rv blockquote{font:600 17px/1.45 var(--fb);color:#fff}
.rv blockquote::before{content:'\201C'}
.rv blockquote::after{content:'\201D'}
.rv .who{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--md)}
.rv .who b{color:#fff;font-weight:700}
.rv .who .eb{width:24px;height:24px;border-radius:var(--r-sm);background:#fff;display:grid;place-items:center;font-size:11px;flex:none}
.rv.wide{background:linear-gradient(135deg,rgba(242,193,62,.12),rgba(242,193,62,.02)),var(--navy-2);border-color:rgba(242,193,62,.3)}
@media(min-width:1100px){.rv.wide{grid-column:span 2}.rv.wide blockquote{font-size:21px}}
.rv.more{justify-content:center;align-items:flex-start;text-decoration:none;border-style:dashed;border-color:rgba(255,255,255,.22);background:transparent;transition:background .2s,border-color .2s}
.rv.more:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.4)}
.rv.more b{font:800 22px/1.1 var(--fd);letter-spacing:-.02em;color:#fff}
.rv.more span{display:inline-flex;align-items:center;gap:8px;color:var(--yel);font-weight:700;font-size:14px}
.rv.more span .ic{width:15px;height:15px}
.rv-note{margin-top:16px;font-size:12.5px;color:var(--md)}

/* ===== order form ===== */
.q-grid{display:grid;gap:clamp(24px,4vw,40px)}
@media(min-width:900px){.q-grid{grid-template-columns:.9fr 1.1fr;align-items:start}}
.q-list{list-style:none;display:grid;gap:14px;margin-top:22px}
.q-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--tl)}
.q-list li .ic{width:22px;height:22px;color:var(--blue);margin-top:1px}
.q-list a{color:var(--tl);font-weight:700;text-decoration:none}
.q-list span{color:var(--ml);font-size:13px}
.card{background:#fff;border:1px solid var(--line-l);border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);box-shadow:0 30px 60px -36px rgba(19,39,61,.5)}
.card h3{font:800 1.45rem/1.1 var(--fd);letter-spacing:-.02em;color:var(--tl)}
.card>form>p{color:var(--ml);font-size:14px;margin:6px 0 16px}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.f2{display:grid;gap:12px}
@media(min-width:560px){.f2{grid-template-columns:1fr 1fr}}
.f label{font-size:13px;font-weight:700;color:var(--tl)}
.f label i{font-style:normal;font-weight:500;color:var(--ml)}
.f input,.f textarea,.f select{font:500 16px/1.3 var(--fb);padding:13px 14px;min-height:48px;border-radius:var(--r-md);border:1.5px solid var(--line-l);background:#FBFCFD;color:var(--tl);width:100%;transition:border-color .2s,box-shadow .2s}
.f textarea{min-height:92px;resize:vertical}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,117,184,.18)}
.f input[aria-invalid="true"]{border-color:var(--pink)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{display:flex;align-items:center;gap:9px;min-height:48px;padding:10px 12px;border-radius:var(--r-md);border:1.5px solid var(--line-l);background:#FBFCFD;cursor:pointer;font-size:14px;font-weight:700;color:var(--tl)}
.seg label .ic{width:18px;height:18px;color:var(--blue)}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label:has(input:checked){border-color:var(--navy-3);background:var(--navy-3);color:#fff}
.seg label:has(input:checked) .ic{color:var(--yel)}
.err{color:#B4123F;font-size:13.5px;font-weight:600;min-height:1.2em;margin:-4px 0 10px}
.card .btn{width:100%}
.fine{font-size:12.5px;color:var(--ml);margin-top:12px;text-align:center}
.done{display:grid;gap:16px}
.done-head{display:flex;gap:14px;align-items:center}
.tick{width:48px;height:48px;border-radius:50%;background:var(--new);color:#fff;display:grid;place-items:center;flex:none}
.tick .ic{width:24px;height:24px;stroke-width:2.5}
.done h3{font-size:1.4rem}
.done p{color:var(--ml);font-size:14px}
.gets{background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-md);padding:16px}
.gets-k{font:600 11px/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.sms{background:#fff;border-radius:var(--r-lg);padding:12px 14px 14px;box-shadow:0 10px 30px -16px rgba(19,39,61,.35);border:1px solid var(--line-l);max-width:360px}
.sms-top{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--tl)}
.sms-av{width:30px;height:30px;border-radius:50%;background:var(--navy-3);color:#fff;display:grid;place-items:center;font:800 12px/1 var(--fd)}
.sms-time{font-size:11px;color:var(--ml);text-align:center;margin:10px 0 8px}
.sms-bub{background:#E9EEF4;color:var(--tl);border-radius:18px 18px 18px 5px;padding:12px 14px;font-size:14.5px;line-height:1.45;white-space:pre-line;max-width:95%}
.gets-note{font-size:12.5px;color:var(--ml)}
.again{align-self:flex-start;background:none;border:0;color:var(--blue);font:700 14px/1 var(--fb);cursor:pointer;padding:8px 0;text-decoration:underline}

/* ===== footer ===== */
footer{background:#07121F;border-top:1px solid var(--line-d);padding:clamp(40px,6vw,64px) 0 32px;color:#B7C3D0}
.ft{display:grid;gap:28px}
@media(min-width:820px){.ft{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.ft h3{font:600 11px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--yel);margin-bottom:14px}
.ft ul{list-style:none;display:grid;gap:9px}
.ft a{text-decoration:none;color:#D5DEE7;font-size:14px;display:inline-block;padding:4px 0}
.ft a:hover{color:var(--sky)}
.ft .ft-hrs{color:#A9B8C8;font-size:13px;line-height:1.5;padding:2px 0 4px}   /* the store hours under Pickup (store.js HOURS) */
.ft p{font-size:14px;max-width:38ch}
.ft .brand{display:inline-flex;margin-bottom:14px}
.ft-bot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line-d);display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;font-size:12.5px;color:#7F8EA0}
.ft-bot a{color:#A9B8C8;text-decoration:none;font-weight:600}

/* ===== sticky call bar ===== */
.cb{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(12,30,51,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-d)}
@media(min-width:960px){.cb{display:none}}
.cb a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;border-radius:var(--r-md);font:800 14px/1 var(--fb);text-decoration:none;color:#fff;border:1.5px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06)}
.cb a.o{background:var(--yel);color:#1A2433;border-color:var(--yel)}
.cb .ic{width:17px;height:17px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   Shared pieces for the shop and product pages, and the cart everywhere.
   Everything above this line is the home page's own stylesheet, moved
   out of index.html unchanged. Everything below is new.
   ===================================================================== */

/* cards: the photo and the title are links, the first action is the cart */
.pc-ph{text-decoration:none;color:inherit}
.pc h3 a{color:inherit;text-decoration:none}
.pc h3 a:hover{color:var(--blue)}
.pc{container-type:inline-size}
@container (max-width:230px){.pc-act .btn{font-size:13px;padding:10px 8px}}

/* the cart button in every nav, with its pink count */
.cart-btn{position:relative}
.cart-btn .n{position:absolute;right:-6px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--pink);color:#fff;font:600 10.5px/19px var(--fm);text-align:center}
.cart-btn .n[hidden]{display:none}
@media(min-width:1060px){.hn-act .icon-btn.cart-btn,.mnav .icon-btn.cart-btn{display:grid}}
.cb a.cart-btn .n{right:auto;left:calc(50% + 14px);top:4px}

/* a page header for pages without the hero (shop, product) */
.pagehead{background:var(--navy);color:var(--td);padding-bottom:16px;position:relative;isolation:isolate}
.pagehead::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0E2440,var(--navy))}
.pagehead .hn{padding-top:14px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 11px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ml);padding:16px 0 0}
.crumb a{color:var(--ml);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb b{color:var(--blue);font-weight:600;max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumb .ic{width:12px;height:12px;color:var(--line-l)}

/* ===== cart drawer ===== */
.cart-shade{position:fixed;inset:0;z-index:110;background:rgba(6,14,24,.55);backdrop-filter:blur(2px)}
.cart-shade[hidden]{display:none}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:120;width:min(400px,100vw);background:#fff;color:var(--tl);display:flex;flex-direction:column;box-shadow:-30px 0 60px rgba(6,14,24,.35);transform:translateX(104%);visibility:hidden;transition:transform .38s var(--ease),visibility 0s linear .38s}
.cart-drawer.on{transform:none;visibility:visible;transition:transform .38s var(--ease)}   /* closed = out of reach of Tab and screen readers too, as the menu is (bug hunt 22 Oct) */
.cart-drawer .h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line-l);font:800 18px/1 var(--fd);letter-spacing:-.02em}
.cart-drawer .h .cnt{color:var(--ml);font-weight:600;font-size:15px}
.cart-drawer .x{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--line-l);background:#fff;color:var(--ml);display:grid;place-items:center;cursor:pointer}
.cart-drawer .x .ic{width:18px;height:18px}
.cart-drawer .items{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.cart-drawer .it{display:grid;grid-template-columns:72px 1fr auto;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line-l);align-items:start}
.cart-drawer .th{width:72px;height:72px;border-radius:var(--r-md);background:linear-gradient(160deg,#FBFCFD,#EDF1F6);border:1px solid var(--line-l);display:grid;place-items:center;padding:6px;overflow:hidden}
.cart-drawer .th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cart-drawer .d{min-width:0}
.cart-drawer .t{display:block;font-size:13.5px;font-weight:700;color:var(--tl);text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-drawer small{display:block;color:var(--ml);font-size:11.5px;margin-top:3px}
.cart-drawer .q{display:inline-flex;align-items:center;gap:0;margin-top:8px;border:1.5px solid var(--line-l);border-radius:var(--r-sm);overflow:hidden}
.cart-drawer .q button{width:40px;height:44px;border:0;background:#fff;color:var(--ml);display:grid;place-items:center;cursor:pointer}
.cart-drawer .q button .ic{width:14px;height:14px}
.cart-drawer .q b{width:30px;text-align:center;font:700 14px/1 var(--fb)}
.cart-drawer .q .rm{border-left:1.5px solid var(--line-l);color:var(--pink)}
.cart-drawer .p{font:800 15px/1 var(--fd);white-space:nowrap;padding-top:2px}
.cart-drawer .empty{display:grid;gap:8px;justify-items:start;padding:28px 18px}
.cart-drawer .empty b{font:800 1.2rem/1.2 var(--fd);letter-spacing:-.02em}
.cart-drawer .empty span{color:var(--ml);font-size:13.5px}
.cart-drawer .f{padding:14px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line-l);display:grid;gap:9px;background:#fff}
.cart-drawer .tot{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--ml)}
.cart-drawer .tot b{font:800 22px/1 var(--fd);color:var(--tl)}
.cart-drawer .f .btn{width:100%}
.cart-drawer .f .btn[disabled]{opacity:.5;pointer-events:none}
.cart-drawer .note{font-size:11.5px;color:var(--ml);line-height:1.45}
body.cart-on{overflow:hidden}

/* ===== checkout screen (concept) ===== */
.co{position:fixed;inset:0;z-index:100;overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;color:var(--tl)}
.co[hidden]{display:none}
body.co-on{overflow:hidden}
body.co-on .cb,body.co-on .swc-badge,body.co-on .mnav,body.co-on .toast,body.co-on .buybar{display:none}
.co-h{border-bottom:1px solid var(--line-l);background:#fff;position:sticky;top:0;z-index:2}
.co-h .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px;max-width:1100px}
.co-h .brand{color:var(--tl)}
.co-h .brand-mark{box-shadow:none}
.co-h .brand-name small{color:var(--blue)}
.co-back{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--ml);font:700 13px/1 var(--fb);cursor:pointer;padding:8px 0}
.co-back .ic{width:17px;height:17px}
.co-lock{display:inline-flex;align-items:center;gap:6px;font:600 10.5px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#A51E62}
.co-lock .ic{width:14px;height:14px}
.co-grid{display:grid;grid-template-columns:1fr;max-width:1100px;margin:0 auto}
@media(min-width:900px){.co-grid{grid-template-columns:1.15fr .85fr;min-height:calc(100vh - 70px)}}
.co-l{padding:22px 20px 60px}
@media(min-width:900px){.co-l{padding:28px 36px 60px 20px}}
.co-r{background:var(--paper);border-bottom:1px solid var(--line-l);padding:18px 20px}
@media(min-width:900px){.co-r{border-bottom:0;border-left:1px solid var(--line-l);padding:28px 20px 40px 32px}}
@media(max-width:899px){.co-r{order:-1}}
.co h2{font:800 19px/1.2 var(--fd);letter-spacing:-.02em;margin:0 0 12px}
.co-note{font-size:12.5px;color:var(--ml);margin:-6px 0 10px}
.xp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.xp div{height:46px;border-radius:var(--r-sm);display:grid;place-items:center;font:800 15px/1 var(--fb);color:#fff}
.xp .shop{background:#5A31F4;grid-auto-flow:column;gap:3px}.xp .shop span{font-weight:500}
.xp .ppl{background:#FFC439;color:#003087;font-style:italic;grid-auto-flow:column}.xp .ppl span:last-child{color:#009cde}
.xp .gp{background:#000}
.or{display:flex;align-items:center;gap:12px;color:var(--ml);font-size:12px;margin-bottom:16px}
.or::before,.or::after{content:'';flex:1;height:1px;background:var(--line-l)}
.fld{display:grid;gap:10px;margin-bottom:22px}
.fld .r{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fld[hidden]{display:none}
.in{position:relative;display:block;height:52px;border:1px solid #C9D3DF;border-radius:var(--r-sm);background:#fff}
.in span{position:absolute;left:13px;top:7px;font-size:10.5px;color:var(--ml);pointer-events:none}
.in input{width:100%;height:100%;border:0;background:transparent;padding:18px 13px 0;font:500 14px/1 var(--fb);color:var(--tl);outline:0;border-radius:var(--r-sm)}
.in:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,117,184,.18)}
.opt{border:1px solid #C9D3DF;border-radius:var(--r-sm);overflow:hidden;margin-bottom:22px;display:grid}
.opt button{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:13px 14px;font:500 14px/1.3 var(--fb);border:0;border-top:1px solid #C9D3DF;background:#fff;color:var(--tl);text-align:left;cursor:pointer}
.opt button:first-child{border-top:0}
.opt button.on{background:#FFF8E1}
.opt i{width:18px;height:18px;border-radius:50%;border:2px solid #9AA5AF;display:block;box-sizing:border-box}
.opt button.on i{border:6px solid var(--navy);background:#fff}
.opt b{display:block;font-weight:700}.opt small{display:block;color:var(--ml);font-size:12px}
.opt .amt{font-weight:700;white-space:nowrap}
#co-ship[hidden]{display:none}
#co-pick{margin-bottom:8px}
#co-pick[hidden]{display:none}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.slots button{min-height:44px;padding:8px 12px;border-radius:var(--r-sm);border:1px solid #C9D3DF;background:#fff;color:var(--tl);font:700 13px/1.1 var(--fb);cursor:pointer;display:grid;gap:3px;text-align:center}
.slots button small{font-weight:600;font-size:11px;color:var(--ml)}
.slots button.on{background:#FFF8E1;border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.pay{border:1px solid #C9D3DF;border-radius:var(--r-sm);overflow:hidden;margin-bottom:18px}
.pay .ph{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;font-size:14px;font-weight:700;background:#FFF8E1}
.pay .cards{display:flex;gap:4px}
.pay .cards i{width:30px;height:20px;border-radius:3px;background:#E9EEF4;display:block;border:1px solid #C9D3DF}
.pay .pb{padding:14px;background:var(--paper);display:grid;gap:10px}
.pay .pb .r{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paynow{width:100%;min-height:56px;border-radius:var(--r-md);border:0;background:var(--yel);color:#1A2433;font:800 16px/1 var(--fb);cursor:pointer}
.paynow:hover{background:var(--yel-hot)}
.secure{font-size:12px;color:var(--ml);margin-top:12px;display:flex;align-items:flex-start;gap:7px;line-height:1.45}
.secure .ic{width:14px;height:14px;flex:none;margin-top:2px}
.sum .it{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;margin-bottom:14px}
.sum .th{width:64px;height:64px;border-radius:var(--r-sm);background:#fff;border:1px solid var(--line-l);display:grid;place-items:center;padding:6px;position:relative}
.sum .th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sum .th .n{position:absolute;right:-7px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--ml);color:#fff;font:600 11px/20px var(--fm);text-align:center}
.sum .it b{display:block;font-size:13.5px;line-height:1.3}
.sum .it small{display:block;color:var(--ml);font-size:12px}
.sum .it .p{font-weight:700;font-size:14px;white-space:nowrap}
.disc{display:grid;grid-template-columns:1fr auto;gap:8px;margin:6px 0 14px}
.disc .in{height:46px}
.disc .ap{height:46px;padding:0 14px;border-radius:var(--r-sm);background:#E9EEF4;color:var(--ml);display:grid;place-items:center;font-weight:700;font-size:14px}
.lines div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;padding:5px 0}
.lines div.t{border-top:1px solid var(--line-l);margin-top:8px;padding-top:12px;font-size:15px}
.lines div.t b{font:800 22px/1 var(--fd)}
.lines div.t b small{font:600 12px/1 var(--fb);color:var(--ml);margin-right:4px}
.lines small{color:var(--ml);font-size:11.5px}
.ex{display:inline-block;font:600 10px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;padding:4px 6px;border-radius:var(--r-sm);background:rgba(232,57,138,.12);color:#A51E62;vertical-align:middle}
.co-f{max-width:1100px;margin:0 auto;padding:14px 20px 40px;border-top:1px solid var(--line-l);font-size:11.5px;color:var(--ml);display:flex;gap:16px;flex-wrap:wrap}
/* the confirmation state of the checkout */
.co-ok{display:none}
.co.done .co-ok{display:block}
.co.done .co-grid,.co.done .co-f{display:none}
.co-ok-in{max-width:760px;margin:0 auto;padding:36px 20px 70px}
.co-ok .tick{margin-bottom:14px}
.co-ok-k{display:block;font:600 11px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.co-ok h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:6px;outline:0}
.co-ok-no{color:var(--ml);font-size:14px}
.co-ok-grid{display:grid;gap:14px;margin-top:22px}
@media(min-width:760px){.co-ok-grid{grid-template-columns:1fr 1fr;align-items:start}}
.co-ok-box{border:1px solid var(--line-l);border-radius:var(--r-md);padding:16px;background:var(--paper)}
.co-ok-box h3{font:800 15px/1.2 var(--fd);letter-spacing:-.01em;margin:0 0 10px}
.co-ok-box h3+h3,.co-ok-del+h3{margin-top:16px}
.co-ok-del{font-size:13.5px;color:var(--ml);line-height:1.5}
.co-ok-steps{padding-left:18px;display:grid;gap:6px;font-size:13.5px;color:var(--ml)}
.co-ok-act{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:24px}

/* ===== product page ===== */
.pp[hidden],.notfound[hidden]{display:none}
.pp{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;padding:18px 0 10px}
@media(min-width:900px){.pp{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;padding:26px 0 20px}}
/* gallery: one photo at a time on a snapping track; thumbnails in a row under it on phones, a column beside it on desktop */
.gal{display:grid;gap:10px;min-width:0}
@media(min-width:900px){
  .gal.thumbs-on{grid-template-columns:72px minmax(0,1fr)}
  .gal.thumbs-on .main-ph{grid-column:2;grid-row:1}
  .gal.thumbs-on .thumbs{grid-column:1;grid-row:1;display:grid;align-content:start;overflow:visible}
}
@media(min-width:900px) and (min-height:760px){.gal{position:sticky;top:calc(var(--nav-h) + 18px)}}
.thumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.thumbs::-webkit-scrollbar{display:none}
.thumbs[hidden]{display:none}
.thumbs button{flex:0 0 64px;width:64px;height:64px;border-radius:var(--r-sm);border:1px solid var(--line-l);background:#F3F6FA;display:grid;place-items:center;padding:6px;overflow:hidden;cursor:pointer;transition:border-color .15s,box-shadow .15s}
@media(min-width:900px){.thumbs button{width:72px;height:72px}}
.thumbs button:hover{border-color:var(--ml)}
.thumbs button.on{border-color:var(--navy);box-shadow:0 0 0 2px rgba(27,58,92,.2)}
.thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.main-ph{position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);background:linear-gradient(160deg,#FBFCFD,#E9EEF4);border:1px solid var(--line-l);overflow:hidden}
.ph-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;background:inherit;border-radius:inherit}
.ph-track::-webkit-scrollbar{display:none}
.ph-track:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.ph-slide{flex:0 0 100%;height:100%;display:grid;place-items:center;padding:10%;scroll-snap-align:center;scroll-snap-stop:always}
.main-ph img{position:relative;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ph-nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid var(--line-l);background:rgba(255,255,255,.94);color:var(--tl);box-shadow:var(--sh-sm);display:grid;place-items:center;cursor:pointer;transition:opacity .2s,transform .2s}
.ph-nav .ic{width:18px;height:18px}
.ph-nav.prev{left:12px}
.ph-nav.next{right:12px}
.ph-nav.prev .ic{transform:rotate(180deg)}
.ph-nav:hover{transform:scale(1.06)}
.ph-nav:disabled{opacity:0;pointer-events:none}
.ph-nav[hidden]{display:none}
@media(hover:none) and (pointer:coarse){.ph-nav{display:none}}
/* the photo viewer (p/index.html): Zoom on the photo, then full screen with + and -, pinch, double-tap and drag */
.ph-zoom{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--line-l);background:rgba(255,255,255,.94);color:var(--tl);font:700 13px/1 var(--fb);box-shadow:var(--sh-sm);cursor:pointer}
.ph-zoom .ic{width:18px;height:18px}
.ph-zoom[hidden]{display:none}   /* an item with no photo has nothing to zoom */
.main-ph .ph-slide img{cursor:zoom-in}
html.zm-on{overflow:hidden}
.zoom{position:fixed;inset:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0B1624;color:#fff;overflow:hidden}
.zoom::backdrop{background:#0B1624}
.zoom:not([open]){display:none}
/* one grid cell the size of the space left, so the photo's max-height:100% has something to measure (it had none:
   a tall photo spilled past the screen, its middle far below the screen's); the same room above and below the photo,
   so it sits in the middle of the screen (it sat 16 px high); the phone's own bars (notch, home bar)
   added to both */
.zm-stage{position:absolute;inset:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;overflow:hidden;touch-action:none;cursor:zoom-in;padding:calc(96px + max(env(safe-area-inset-top),env(safe-area-inset-bottom))) 12px}
.zm-stage.zoomed{cursor:grab}.zm-stage.zoomed.live{cursor:grabbing}
.zm-stage img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;border-radius:6px;transform-origin:center;transition:transform .16s ease-out;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.zm-stage.live img{transition:none}
.zoom button{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(12,30,51,.82);color:#fff;cursor:pointer}
.zoom button:disabled{opacity:.35;cursor:default}
.zoom button .ic{width:22px;height:22px}
.zm-x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:2}
.zm-count{position:absolute;top:calc(24px + env(safe-area-inset-top));left:16px;z-index:2;font:600 12px/1 var(--fm);letter-spacing:.1em}
.zm-nav{position:absolute;top:50%;margin-top:-24px;z-index:2}.zm-nav.prev{left:12px}.zm-nav.next{right:12px}.zm-nav.prev .ic{transform:rotate(180deg)}
.zm-nav[hidden]{display:none}
.zm-bar{position:absolute;left:50%;bottom:calc(34px + env(safe-area-inset-bottom));z-index:2;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--r-pill);background:rgba(12,30,51,.82)}
.zm-bar span{min-width:52px;text-align:center;font:600 13px/1 var(--fm)}
.zm-hint{position:absolute;left:0;right:0;bottom:calc(8px + env(safe-area-inset-bottom));margin:0;text-align:center;font-size:12px;color:#A9B8C8}
.zm-err{position:absolute;left:24px;right:24px;top:50%;z-index:1;margin:0;transform:translateY(-50%);text-align:center;font:600 15px/1.45 var(--fb);color:#E6EDF4}
.zm-err[hidden]{display:none}
/* a phone on its side: less room kept for the buttons, so the photo is not a stamp in the middle */
@media(max-height:500px){.zm-stage{padding:calc(64px + max(env(safe-area-inset-top),env(safe-area-inset-bottom))) 72px}.zm-bar{bottom:calc(8px + env(safe-area-inset-bottom))}.zm-hint{display:none}}
@media(prefers-reduced-motion:reduce){.zm-stage img{transition:none}}
.ph-count{position:absolute;left:50%;bottom:14px;z-index:2;transform:translateX(-50%);font:600 10px/1 var(--fm);letter-spacing:.1em;color:#fff;background:rgba(15,39,66,.72);padding:6px 10px;border-radius:var(--r-pill);pointer-events:none}
.ph-count[hidden]{display:none}
.main-ph .cond{position:absolute;left:14px;top:14px;z-index:1}
.main-ph .store-x{position:absolute;right:14px;top:14px;z-index:1;font:600 9.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--ml);background:rgba(255,255,255,.92);padding:6px 8px;border-radius:var(--r-sm)}
.info{min-width:0}
.info .k{display:block;font:600 11px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.info h1{font:800 clamp(1.45rem,2.6vw,2.1rem)/1.1 var(--fd);letter-spacing:-.025em;margin:8px 0 12px;color:var(--tl)}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}
.price b{font:800 32px/1 var(--fd);letter-spacing:-.03em;color:var(--tl)}
.price>span{font-size:13px;color:var(--ml)}   /* the note beside the price; not the price's own .money span inside the b (22 Oct: it shrank the price to 13 px) */
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 16px}
.meta span{font:700 11.5px/1 var(--fb);padding:7px 10px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--line-l);color:#3F4A55}
.meta span.ok{color:#176B48;background:#E8F6EF;border-color:#BFE6D2}
.buyrow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--line-l);border-radius:var(--r-md);overflow:hidden;background:#fff}
.qty button{width:42px;height:48px;border:0;background:#fff;color:var(--ml);display:grid;place-items:center;cursor:pointer}
.qty button .ic{width:15px;height:15px}
.qty b{width:40px;text-align:center;font:700 16px/1 var(--fb);color:var(--tl)}
.buy{display:grid;gap:10px;margin-top:10px}
.buy .btn{width:100%}
.fulfil{margin-top:16px;border:1px solid var(--line-l);border-radius:var(--r-md);overflow:hidden;background:#fff}
.fulfil>div{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:11px 14px;font-size:13.5px;border-top:1px solid var(--line-l)}
.fulfil>div:first-child{border-top:0}.fulfil>div[hidden]{display:none}.fulfil>div[hidden]+div{border-top:0}
.fulfil .ic{color:var(--new);width:18px;height:18px;margin-top:2px}
.fulfil b{display:block;color:var(--tl)}.fulfil small{display:block;color:var(--ml);font-size:12px}
.cguide{margin:-6px 0 14px;border:1px solid var(--line-l);border-radius:var(--r-md);background:#fff}
.cguide summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;font:700 13px/1 var(--fb);color:var(--tl);cursor:pointer;list-style:none}
.cguide summary::-webkit-details-marker{display:none}
.cguide summary .ic{width:14px;height:14px;margin-left:auto;color:var(--ml);transition:transform .2s}
.cguide[open] summary .ic{transform:rotate(90deg)}
.cguide dl{display:grid;gap:6px;padding:4px 12px 12px;margin:0;border-top:1px solid var(--line-l)}
.cguide dl>div{display:grid;grid-template-columns:92px 1fr;gap:8px;font-size:12.5px;color:var(--ml);padding:6px 8px;border-radius:var(--r-sm)}
.cguide dl>div[hidden]{display:none}
.cguide dl>div.on{background:var(--paper);color:var(--tl)}
.cguide dt{font-weight:800;color:var(--tl)}
.cguide dd{margin:0}
.about{margin-top:20px}
.pvid{margin-top:20px}.pvid h2{font:800 1.1rem/1.2 var(--fd);letter-spacing:-.02em;color:var(--tl);margin-bottom:8px}
.pvid video{display:block;width:100%;max-height:70vh;border-radius:14px;background:#0C1E33}
.about h2{font:800 1.1rem/1.2 var(--fd);letter-spacing:-.02em;color:var(--tl);margin-bottom:8px}
.about ul{list-style:none;display:grid;gap:7px}
.about li{position:relative;padding-left:16px;font-size:14px;color:var(--ml);line-height:1.5}
.about li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:2px;background:var(--yel)}
.about li a{color:var(--tl);font-weight:700}
.about p{font-size:14px;color:var(--ml)}
/* item specifics: label and value rows, as the listing states them */
.specs{margin-top:20px}
.specs h2{font:800 1.1rem/1.2 var(--fd);letter-spacing:-.02em;color:var(--tl);margin-bottom:8px}
.specs dl{margin:0;border:1px solid var(--line-l);border-radius:var(--r-md);overflow:hidden;background:#fff}
.specs dl>div{display:grid;grid-template-columns:minmax(96px,38%) minmax(0,1fr);gap:12px;padding:10px 14px;font-size:13.5px;line-height:1.45;border-top:1px solid var(--line-l)}
.specs dl>div:first-child{border-top:0}
.specs dl>div:nth-child(even){background:#F8FAFC}
.specs dt{color:var(--ml);font-weight:600}
.specs dd{margin:0;color:var(--tl);font-weight:600;overflow-wrap:anywhere}
.specs p{margin-top:8px;font-size:12px;color:var(--ml)}
.also{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-l);font-size:13px;color:var(--ml)}
.also a{color:var(--tl);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.also a:hover{color:var(--blue)}
.also .ic{width:14px;height:14px}
.rel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.rel-head .h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.notfound{margin:30px 0 60px;padding:28px;border-radius:var(--r-lg);background:#fff;border:1.5px dashed rgba(42,117,184,.45);display:grid;gap:10px;justify-items:start}
.notfound b{font:800 1.4rem/1.15 var(--fd);letter-spacing:-.02em;color:var(--tl)}
.notfound > span{color:var(--ml)}   /* the description only: the buttons' own text keeps its colour (contrast) */
.notfound .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ===== shop page ===== */
.shop-head{display:grid;gap:14px;padding:18px 0 6px}
@media(min-width:760px){.shop-head{grid-template-columns:1fr auto;align-items:end}}
.shop-head h1{font:800 clamp(1.9rem,4vw,2.8rem)/1 var(--fd);letter-spacing:-.03em;color:var(--tl)}
.shop-head .cnt{color:var(--ml);font-size:13.5px;margin-top:6px}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sbox{display:flex;align-items:center;gap:8px;flex:1 1 220px;min-width:0;height:46px;padding:0 12px;border-radius:var(--r-md);background:#fff;border:1.5px solid var(--line-l);color:var(--ml)}
.sbox .ic{width:16px;height:16px;flex:none}
.sbox input{flex:1;min-width:0;border:0;background:transparent;outline:0;font:600 14px/1 var(--fb);color:var(--tl)}
.sbox input::-webkit-search-cancel-button{display:none}
.sbox:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(42,117,184,.15)}
.sortsel{height:46px;padding:0 36px 0 12px;border-radius:var(--r-md);border:1.5px solid var(--line-l);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6076' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 10px center/16px no-repeat;color:var(--tl);font:700 13.5px/1 var(--fb);appearance:none;-webkit-appearance:none;cursor:pointer}
.fbtn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:var(--r-md);border:1.5px solid var(--line-l);background:#fff;color:var(--tl);font:700 13.5px/1 var(--fb);cursor:pointer}
.fbtn .ic{width:16px;height:16px}
.fbtn .n{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--navy-3);color:#fff;font:600 11px/20px var(--fm);text-align:center}
.fbtn .n:empty{display:none}
@media(min-width:1000px){.fbtn{display:none}}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding:10px 0 4px;margin:0 -20px;padding-left:20px;padding-right:20px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow button{flex:none;min-height:44px;padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--line-l);background:#fff;color:var(--tl);font:700 12.5px/1 var(--fb);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chiprow button[aria-pressed="true"]{background:var(--navy-3);color:#fff;border-color:var(--navy-3)}
.chiprow button .cond{padding:0;border:0;background:none;color:inherit;font-size:12.5px;letter-spacing:0;text-transform:none;font-family:var(--fb);font-weight:700}
@media(min-width:1000px){.chiprow{display:none}}
.shop-lay{display:grid;grid-template-columns:1fr;gap:18px;padding:12px 0 var(--pad);align-items:start}
@media(min-width:1000px){.shop-lay{grid-template-columns:250px minmax(0,1fr);gap:28px}.shop-lay .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1400px){.shop-lay .grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
.rail{display:none}
@media(min-width:1000px){.rail{display:block;position:sticky;top:calc(var(--nav-h) + 72px)}}
.railbox{background:#fff;border:1px solid var(--line-l);border-radius:var(--r-md);padding:16px 16px 6px}
.railbox h3{font:600 11px/1.3 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin:8px 0 8px}
.railbox h3:first-child{margin-top:0}
.railbox .grp{display:grid;gap:2px;margin-bottom:14px}
.railbox label{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 8px;border-radius:var(--r-sm);font-size:13.5px;color:var(--tl);cursor:pointer}
.railbox label:hover{background:var(--paper)}
.railbox label input{width:16px;height:16px;accent-color:var(--navy-3);margin:0}
.railbox label .cnt{margin-left:auto;font:600 11px/1 var(--fm);color:var(--ml)}
.railbox label.off{color:var(--ml)}   /* nothing on that shelf right now: muted by colour, which still reads (4.5:1); the box fades */
.railbox label.off input{opacity:.45}
.railbox .range{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;margin-bottom:14px}
.railbox .range input{width:100%;height:44px;border:1.5px solid var(--line-l);border-radius:var(--r-sm);padding:0 10px;font:600 13.5px/1 var(--fb);color:var(--tl);outline:0}
.railbox .range input:focus{border-color:var(--blue)}
.railbox .range span{color:var(--ml);font-size:12px}
.railbox .clear{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--blue);font:700 13px/1 var(--fb);cursor:pointer;padding:8px 6px 10px}
.railbox .clear[hidden]{display:none}
/* the same rail as a bottom sheet on phones */
.sheet{position:fixed;inset:0;z-index:130;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s linear .3s}
.sheet.open{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
.sheet-bg{position:absolute;inset:0;background:rgba(6,14,24,.6)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;background:var(--paper);color:var(--tl);border-radius:18px 18px 0 0;transform:translateY(30px);transition:transform .35s var(--ease)}
.sheet.open .sheet-panel{transform:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line-l);font:800 17px/1 var(--fd)}
.sheet-head .x{width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--line-l);background:#fff;color:var(--ml);display:grid;place-items:center;cursor:pointer}
.sheet-head .x .ic{width:18px;height:18px}
.sheet-body{flex:1;overflow:auto;padding:14px 16px}
.sheet-body .railbox{border:0;padding:0;background:transparent}
.sheet-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line-l);background:#fff}
.sheet-foot .btn{width:100%}
.results{min-width:0}
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:22px}
.pager button{min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-md);border:1px solid var(--line-l);background:#fff;color:var(--tl);font:700 13.5px/1 var(--fb);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.pager button[aria-current="page"]{background:var(--navy-3);color:#fff;border-color:var(--navy-3)}
.pager button[disabled]{opacity:.4;pointer-events:none}
.pager .ic{width:15px;height:15px}
.pager .dots{color:var(--ml);padding:0 4px}
.results .empty-card{margin-top:0}

/* ===== pass 2: prices, section flips, reveal ===== */
.money small{font-size:.6em;font-weight:inherit;letter-spacing:0;margin-left:1px;vertical-align:baseline}
.flip{position:relative;z-index:1;border-radius:24px 24px 0 0;margin-top:-24px;padding-top:calc(var(--pad) + 24px)}
footer.flip{padding-top:calc(clamp(40px,6vw,64px) + 24px)}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.revealed{opacity:1;transform:none}

/* ===== pass 1: phones first ===== */
/* search on phones: an icon in the nav opens the box, and the menu has one */
.search-btn{display:grid}
@media(min-width:1060px){.search-btn{display:none}}
.hn.search-on .hn-search,.mnav .wrap.search-on .hn-search{display:flex;flex:1 1 auto}
.hn.search-on .brand,.hn.search-on .hn-links,.hn.search-on .hn-tel,.mnav .wrap.search-on .brand,.mnav .wrap.search-on .mnav-links{display:none}
.menu-search{display:flex;align-items:center;gap:8px;margin:14px 0 4px;padding:0 12px;min-height:48px;border-radius:var(--r-sm);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#C9D3DE}
.menu-search .ic{width:16px;height:16px;flex:none}
.menu-search input{flex:1;min-width:0;background:transparent;border:0;color:#fff;font:600 15px/1 var(--fb);outline:0}
.menu-search input::placeholder{color:#A9B8C8}
.menu-search:focus-within{border-color:var(--sky)}
/* add feedback: the button says so, the badge bumps, phones get a toast instead of the full drawer */
.btn.ok{background:var(--new)!important;color:#fff!important;transform:none!important}
@keyframes bump{40%{transform:scale(1.35)}}
.cart-btn .n.bump{animation:bump .4s var(--ease)}
.toast{position:fixed;left:12px;right:12px;bottom:calc(128px + env(safe-area-inset-bottom));z-index:85;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--r-md);background:var(--tl);color:#fff;font:600 14px/1.2 var(--fb);box-shadow:var(--sh-md)}
.toast[hidden]{display:none}
.toast .ic{width:18px;height:18px;color:var(--new);flex:none}
.toast a{margin-left:auto;color:var(--yel);font-weight:800;text-decoration:none;white-space:nowrap;padding:6px 0}
@media(min-width:760px){.toast{left:auto;right:20px;bottom:20px;max-width:360px}}
/* shop: the toolbar and the count stick under the nav; category chips on phones; a clear button in the search */
.stick-sentinel{height:1px;margin-top:-1px}
.stick{position:sticky;top:var(--nav-h);z-index:5;background:var(--paper);margin:0 -20px;padding:8px 20px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;transition:box-shadow .2s}
.stick.stuck{box-shadow:0 10px 24px -16px rgba(19,39,61,.4)}
.stick .results-head{flex:1 1 100%;margin:0;padding:2px 0 0}
@media(min-width:760px){.stick .results-head{flex:0 0 auto;margin-left:auto;padding:0}}
.sbox .sx{width:32px;height:32px;margin-right:-6px;border:0;border-radius:var(--r-sm);background:none;color:var(--ml);display:grid;place-items:center;cursor:pointer;flex:none}
.sbox .sx:hover{background:var(--paper)}
.sbox .sx[hidden]{display:none}
.sbox .sx .ic{width:14px;height:14px}
.chiprow.cats{margin-top:10px}
.chiprow.cats button{font-weight:600}
#results{scroll-margin-top:calc(var(--nav-h) + 72px)}
#filters{scroll-margin-top:calc(var(--nav-h) + 12px)}
/* product page: a buy bar slides in on phones once the real buttons scroll away, and a way back to the results */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:81;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;color:var(--tl);border-top:1px solid var(--line-l);box-shadow:0 -8px 24px -16px rgba(19,39,61,.35);transform:translateY(110%);transition:transform .3s var(--ease)}
.buybar .money{font:800 22px/1 var(--fd);letter-spacing:-.02em;white-space:nowrap}
.buybar .btn{flex:1;min-height:48px}
.buybar.on{transform:none}
body.buy-on .cb{display:none}
@media(min-width:960px){.buybar{display:none}}
.pback{display:inline-flex;align-items:center;gap:6px;margin:14px 0 -6px;min-height:44px;font:700 13px/1 var(--fb);color:var(--blue);text-decoration:none}
.pback .ic{width:15px;height:15px}
.pback[hidden]{display:none}
/* checkout on phones: the order summary folds behind one row */
.co-tog{display:none}
@media(max-width:899px){
  .co-tog{display:flex;width:100%;align-items:center;gap:10px;min-height:52px;padding:0;background:none;border:0;font:700 14px/1 var(--fb);color:var(--blue);cursor:pointer;text-align:left}
  .co-tog .ic{width:18px;height:18px;flex:none}
  .co-tog b{margin-left:auto;color:var(--tl);font:800 16px/1 var(--fd)}
  .co-tog .chev{transition:transform .2s;color:var(--ml)}
  .co-r.open .co-tog .chev{transform:rotate(90deg)}
  .co-r:not(.open) #co-sumbody{display:none}
  .co-r.open #co-sumbody{padding-top:10px}
}
/* narrow desktops: six nav links leave no room for a box, so the search icon stays until 1180px */
@media(min-width:1060px) and (max-width:1180px){.hn-search{display:none}.hn-act .icon-btn.search-btn,.mnav .icon-btn.search-btn{display:grid}}

/* ===== accessibility: skip link, visible focus, less motion when asked ===== */
.skip{position:absolute;left:12px;top:-60px;z-index:2147483647;padding:12px 16px;border-radius:var(--r-sm);background:var(--yel);color:#1A2433;font:800 14px/1 var(--fb);text-decoration:none;transition:top .15s}
.skip:focus{top:12px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
:where(.hero,.mnav,.menu,footer,.cb,.pagehead,.ctl) :where(a,button,input,summary):focus-visible{outline-color:var(--yel)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main:focus{outline:0}

/* ===== questions people ask (home) ===== */
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:#fff;border:1px solid var(--line-l);border-radius:var(--r-md)}
.faq summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:14px 18px;font:700 16px/1.3 var(--fb);color:var(--tl);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';margin-left:auto;flex:none;width:10px;height:10px;border-right:2px solid var(--ml);border-bottom:2px solid var(--ml);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .a{padding:0 18px 16px;color:var(--ml);font-size:15px;line-height:1.6}
.faq .a a{color:var(--blue)}

/* ===== store policies (privacy, terms) ===== */
.legal{padding:4px 0 var(--pad)}
.doc{max-width:760px;margin:0 auto;padding-top:18px}
.doc h1{font:800 clamp(2rem,4.4vw,2.8rem)/1.05 var(--fd);letter-spacing:-.03em;color:var(--tl);margin:6px 0 12px}
.doc .draft{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-md);background:#FFF5FA;border:1px solid rgba(232,57,138,.28);color:var(--tl);font-size:14px;line-height:1.55;margin:14px 0}
.doc .upd{color:var(--ml);font-size:13.5px}
.doc .toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 8px}
.doc .toc a{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line-l);color:var(--tl);font:600 13px/1 var(--fb);text-decoration:none}
.doc .toc a:hover{border-color:var(--blue);color:var(--blue)}
.doc h2{font:800 1.35rem/1.2 var(--fd);letter-spacing:-.02em;color:var(--tl);margin:34px 0 10px;scroll-margin-top:calc(var(--nav-h) + 16px)}
.doc h3{font:700 1rem/1.3 var(--fb);color:var(--tl);margin:18px 0 6px}
.doc p,.doc li{color:#3D4D61;font-size:15.5px;line-height:1.7}
.doc p+p{margin-top:10px}
.doc ul{padding-left:20px;display:grid;gap:6px;margin:8px 0}
.doc a{color:var(--blue)}
.doc .contact{margin-top:14px;padding:16px 18px;border-radius:var(--r-md);background:#fff;border:1px solid var(--line-l)}
.crumb .mid{display:contents}
.crumb .mid[hidden]{display:none}

/* ===== reviews: phones show three and the Read all tile ===== */
@media(max-width:699px){.rvgrid .rv:not(.keep):not(.more){display:none}}

/* ===== visit ===== */
.visit{display:grid;gap:16px}
@media(min-width:900px){.visit{grid-template-columns:1.15fr .85fr;align-items:stretch}}
.vmap{position:relative;min-height:300px;border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#0F2742}
.vmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmap-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:24px;text-align:center;background:radial-gradient(60% 70% at 50% 45%,rgba(42,117,184,.35),transparent 70%),var(--px),linear-gradient(160deg,#12304F,#0C1E33)}
.vmap-ph .pin{width:46px;height:46px;color:var(--pink);margin-bottom:6px;filter:drop-shadow(0 8px 16px rgba(232,57,138,.35))}
.vmap-ph b{font:800 1.15rem/1.2 var(--fd);color:#fff;letter-spacing:-.01em}
.vmap-ph span{color:var(--md);font-size:14px;margin-bottom:10px}
.vmap-ph small{color:#8FA0B3;font-size:11.5px;margin-top:4px}
.vinfo{display:grid;gap:16px;align-content:start;padding:22px;border-radius:var(--r-lg);background:var(--navy-2);border:1px solid rgba(255,255,255,.1)}
.vrow{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.vrow .ic{width:20px;height:20px;color:var(--yel);margin-top:2px}
.vrow b{display:block;color:#fff;font-size:15.5px}
.vrow span{display:block;color:var(--md);font-size:14px;line-height:1.5}
.vact{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.vact .btn{flex:1 1 auto;justify-content:center}
/* phones: the floating concept badge waits until the visitor scrolls past the first screen (the top bar keeps "Claim it"),
   so it never sits on the page's own buttons */
@media(max-width:959px){
  .swc-badge{transition:opacity .25s ease,transform .25s ease}
  body:has(#mnav:not(.on)) .swc-badge{opacity:0;pointer-events:none;transform:translateY(8px)}
}

/* ===== audit fixes, Oct 17 ===== */
.rv-score small a{text-decoration:underline;text-underline-offset:2px}
.filters button[hidden],.chiprow button[hidden]{display:none}
.info h1.long{font-size:clamp(1.22rem,2.1vw,1.7rem);line-height:1.18}

/* ===== phones: the stage, then "Scan a category" as one swipeable row right under it, then Shop all (Talan, Oct 17).
   Kept at the end so it beats the base rules. The stage is shorter and the tag slimmer so the row fits on the first
   screen; the stage itself opens the item shown, so the row needs no text or button under it. ===== */
@media(max-width:599px){
  .hero-in{padding-top:12px;gap:12px}
  .stage{aspect-ratio:16/11}
  .st-img img{top:17%;max-height:52%;max-width:76%}
  .st-tag{min-width:138px;max-width:58%;padding:8px 11px}
  .st-tag .pr{font-size:20px}
  .st-tag .bc{display:none}
  .ctl .sig-head{padding:7px 14px}
  /* Talan, 21 Oct: on phones the categories are a grid, every one in view, not a row to swipe */
  .ctl .pk{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:8px 12px 10px}
  .ctl .pk button,.ctl .pk .pk-soon{min-width:0;min-height:52px;padding:7px 3px;font-size:10.5px;overflow-wrap:anywhere}
  .ctl .pk button .ic,.ctl .pk .pk-soon .ic{width:17px;height:17px}
  .ctl .pk button:hover,.ctl .pk .pk-soon:hover{transform:none}
  .ctl .pk-read,.ctl .pk-go{display:none}
}

/* ===== shop: a band that sells, photo category tiles, editorial breaks (Talan, Oct 17: "it's still bland") ===== */
.shop-head{position:relative;display:grid;gap:18px;margin-top:12px;padding:22px 20px 24px;border-radius:var(--r-lg);overflow:hidden;color:#fff;background:radial-gradient(60% 120% at 88% 10%,rgba(42,117,184,.5),transparent 70%),var(--px),linear-gradient(160deg,#15355A,#0C1E33);box-shadow:var(--sh-md)}
.shop-head h1{color:#fff}
.shop-head .cnt{color:#C9D3DE}
.swrap .shop-head .eyebrow{color:var(--sky)}
.sh-sub{margin-top:10px;max-width:52ch;color:#AFC0D2;font-size:14px;line-height:1.5}
.sh-art{display:none}
@media(min-width:900px){
  .shop-head{grid-template-columns:minmax(0,1fr) 250px;align-items:center;padding:34px 38px;min-height:230px}
  .sh-art:not([hidden]){position:relative;display:block;width:250px;aspect-ratio:1/1;border-radius:var(--r-lg);background:linear-gradient(160deg,#FBFCFD,#E6ECF3);box-shadow:0 26px 50px -22px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.14);isolation:isolate;overflow:hidden;transition:transform .25s var(--ease)}
  .sh-art:hover{transform:translateY(-3px)}
  .sh-art img{position:absolute;left:12%;top:7%;width:76%;height:60%;object-fit:contain;mix-blend-mode:multiply}
  .sh-art img.cut{mix-blend-mode:normal;filter:drop-shadow(0 14px 14px rgba(19,39,61,.25))}
  .sh-cap{position:absolute;left:10px;right:10px;bottom:10px;padding:9px 11px;border-radius:var(--r-md);background:#fff;box-shadow:var(--sh-sm);color:var(--tl);display:grid;gap:3px}
  .sh-cap b{font-size:12px;line-height:1.3;font-weight:700;color:var(--ml);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .sh-cap .money{font:800 20px/1 var(--fd);letter-spacing:-.02em}
}
.chiprow.cats{gap:10px;padding-top:14px;padding-bottom:8px;margin-top:4px}
.chiprow.cats button{flex:none;display:grid;justify-items:center;align-content:start;gap:5px;width:108px;min-height:0;padding:10px 8px 11px;border-radius:var(--r-md);border:1px solid var(--line-l);background:#fff;color:var(--tl);box-shadow:var(--sh-sm);font:700 12.5px/1.2 var(--fb);text-align:center;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.chiprow.cats button:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.chiprow.cats button[aria-pressed="true"]{background:#fff;color:var(--tl);border-color:var(--yel);box-shadow:0 0 0 3px rgba(242,193,62,.5),var(--sh-sm)}
.ct-ph{width:64px;height:64px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(160deg,#FBFCFD,#E9EEF4);isolation:isolate;overflow:hidden}
.ct-ph img{max-width:86%;max-height:86%;object-fit:contain;mix-blend-mode:multiply}
.ct-ph img.cut{mix-blend-mode:normal}
.ct-n{font:600 9.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--ml)}
.chiprow.cats button.soon{border-style:dashed}.chiprow.cats button.soon .ct-ph .ic{width:28px;height:28px;color:var(--navy-3,#1B3A5C)}.chiprow.cats button.soon .ct-n{color:#A81E5F}
@media(max-width:599px){.chiprow.cats button.soon .ct-n{display:block;font-size:8.5px}}
/* Talan, 21 Oct: below desktop the category tiles are a grid, every shelf in view, not a row to swipe */
@media(max-width:999px){.chiprow.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));overflow:visible;margin:4px 0 0;padding:12px 0 6px}.chiprow.cats button{width:auto;min-width:0;overflow-wrap:anywhere}.chiprow.cats button:hover{transform:none}}
@media(min-width:1000px){.chiprow.cats{display:flex;flex-wrap:wrap;overflow:visible;margin:0;padding:18px 0 4px}}
@media(max-width:599px){#s-chips{display:none}.shop-head{padding:16px 16px 18px;gap:10px}.sh-sub{display:none}.chiprow.cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding-top:10px;padding-bottom:6px}.chiprow.cats button{width:auto;padding:8px 4px 9px;gap:4px;font-size:11px}.ct-ph{width:44px;height:44px;border-radius:10px}.ct-n{display:none}}
.ed{grid-column:1/-1;position:relative;display:grid;gap:6px;padding:22px 22px 20px;border-radius:var(--r-lg);overflow:hidden;color:#fff;text-decoration:none;background:radial-gradient(55% 140% at 90% 0%,rgba(232,57,138,.3),transparent 70%),var(--px),linear-gradient(160deg,#15355A,#0C1E33);box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s}
.ed:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.swrap .ed .eyebrow{color:var(--sky);margin-bottom:2px}
.ed b{font:800 clamp(1.25rem,2.4vw,1.7rem)/1.1 var(--fd);letter-spacing:-.02em}
.ed > span:not(.eyebrow):not(.ed-go){color:#C9D3DE;font-size:14px;max-width:60ch}
.ed-go{display:inline-flex;align-items:center;gap:8px;margin-top:8px;justify-self:start;padding:11px 16px;border-radius:var(--r-md);background:var(--yel);color:#1A2433;font-weight:800;font-size:14px;min-height:44px}
.ed-go .ic{width:16px;height:16px}
.ed-visit{background:radial-gradient(55% 140% at 90% 0%,rgba(126,200,240,.3),transparent 70%),var(--px),linear-gradient(160deg,#15355A,#0C1E33)}
@media(min-width:900px){.ed{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:24px;padding:26px 30px}.ed > :not(.ed-go){grid-column:1}.ed-go{grid-column:2;grid-row:1/4;margin:0}}
.pc-ph .jl{position:absolute;right:10px;top:10px;z-index:1;font:600 9.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#1A2433;background:var(--yel);padding:6px 8px;border-radius:var(--r-pill);box-shadow:0 2px 8px -2px rgba(19,39,61,.25)}

/* ===== checkout errors, the back office link, footer icons ===== */
.in-err{display:block;color:#B4235F;font-size:12.5px;font-weight:600;margin:-4px 0 10px}
.in-err:empty{display:none}
.co [aria-invalid="true"]{border-color:#B4235F!important;box-shadow:0 0 0 3px rgba(180,35,95,.15)}
.ok-office a{font-weight:800}
.ft li a:has(.soc),.ft li a:has(.ebay){display:inline-flex;align-items:center;gap:9px}
.ft .soc{width:18px;height:18px;flex:none}
.ft li a .ebay{font-size:15px;line-height:1;background:#fff;border-radius:5px;padding:2px 5px 3px}

/* ===== brand on cards, recently viewed, desktop hover photo ===== */
.cat-l b{color:var(--tl);font-weight:700}
.cat-l{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-ph img.alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease);background:#fff;mix-blend-mode:normal;pointer-events:none;z-index:0}
@media(hover:hover){.pc:hover .pc-ph img.alt[src]{opacity:1}}
.mini-row{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity;scrollbar-width:thin}
.mini{flex:0 0 150px;display:grid;gap:6px;align-content:start;text-decoration:none;color:var(--tl);scroll-snap-align:start}
.mi-ph{position:relative;aspect-ratio:1/1;border-radius:var(--r-md);background:linear-gradient(160deg,#FBFCFD,#E9EEF4);border:1px solid var(--line-l);overflow:hidden;isolation:isolate;transition:box-shadow .2s,transform .2s var(--ease)}
.mini:hover .mi-ph{box-shadow:var(--sh-md);transform:translateY(-2px)}
.mi-ph img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;mix-blend-mode:multiply}
.mini b{font-size:12.5px;line-height:1.3;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini .money{font:800 15px/1 var(--fd);letter-spacing:-.02em}
.recent-home{margin-top:30px}
.h3s{font:800 1.05rem/1.2 var(--fd);letter-spacing:-.01em;margin-bottom:10px;color:var(--tl)}

/* ===== live store (shopify.js): sold out, the cart's notes from Shopify, a catalog that did not load ===== */
.pc-ph .so{position:absolute;right:10px;top:10px;z-index:1;font:600 9.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--navy-3);padding:6px 8px;border-radius:var(--r-pill);box-shadow:0 2px 8px -2px rgba(19,39,61,.25)}
.pc.sold .pc-ph img{opacity:.55;filter:grayscale(.5)}
.pc.sold .pr{color:var(--ml)}
.cart-warn{margin:0;padding:10px 18px;background:#FFF8E1;border-bottom:1px solid #F1DFA6;color:#5B4A12;font-size:12.5px;font-weight:600;line-height:1.45}
.cart-warn[hidden]{display:none}
/* a supplier (drop-ship) item in the cart: this order ships */
.cart-ds{margin:0;padding:10px 18px;background:#E6F4FC;border-bottom:1px solid #BFE0F3;color:#17466B;font-size:12.5px;font-weight:600;line-height:1.45}
.cart-ds[hidden]{display:none}
/* the shop's ship-only switch, beside the sort */
.shipall{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line,#D9E1EA);border-radius:999px;background:#fff;font-size:13.5px;font-weight:600;color:var(--tl);cursor:pointer;white-space:nowrap}
.shipall input{width:18px;height:18px;margin:0;accent-color:#1F5F99}
.shipall small{font-weight:600;color:var(--ml)}
.shipall[hidden]{display:none}   /* the pill style would beat the hidden attribute (same slip as the office labels page, 21 Oct) */
.shipall .sa-short{display:none}
/* phones: the shop's toolbar in two rows, search and Filters, then the sort and the switch side by side, then the count
   line (bug hunt 22 Oct: with the switch it took four rows, 202 px at 375 px wide, a quarter of the screen) */
@media(max-width:759px){
  .stick{padding-top:6px;padding-bottom:6px;row-gap:6px}
  .stick .sbox{order:1;flex:1 1 55%;height:44px}
  .stick .fbtn{order:2;flex:0 0 auto;height:44px}
  .stick .sortsel{order:3;flex:1 1 40%;min-width:0;height:44px;padding-right:30px;background-position:right 8px center;font-size:13px}
  .stick .shipall{order:4;flex:1 1 40%;min-width:0;justify-content:center;padding:0 10px;font-size:13px}
  .stick .results-head{order:5;padding:0;font-size:12.5px;line-height:1.3}
  .shipall .sa-long{display:none}.shipall .sa-short{display:inline}
}
@media(max-width:359px){.shipall small{display:none}}
.px-fail{background:#FFF8E1;border-bottom:1px solid #F1DFA6;color:#3F3510;padding:14px 0;font-size:14px}
.px-fail .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.px-fail a{color:inherit;font-weight:700}
/* what live mode hides: a condition Shopify does not give, a missing eBay link, Buy it now on a sold-out item, a stage shelf with nothing on it */
.cond[hidden],.cguide[hidden],.meta span[hidden],.also [hidden],.buy .btn[hidden],.pk button[hidden]{display:none}
/* a sold-out item's buttons read as unavailable, not as the yellow call to action */
.pc.sold .pc-act .btn,.buyrow .btn:disabled,.buybar .btn:disabled{background:var(--paper-2);color:var(--ml);box-shadow:none;cursor:default;transform:none}
.btn[aria-busy="true"]{opacity:.75;pointer-events:none}
/* the message form honeypot: a field people never see (off screen, out of the tab order); the function drops anything that fills it */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* the shop while a page is on its way from Shopify */
.results.busy .grid{opacity:.5;transition:opacity .2s}

/* tap targets (22 Oct, measured at 375 px): the search field fills its box, so a tap anywhere on the box types;
   the quantity buttons are 44 px wide. On touch screens every target is at least 44 px tall: the footer links grow,
   and where a bigger box would change the look (breadcrumbs, hero chips, the legal pages' section links, eBay and
   Ask about it under an item) an invisible layer widens what a finger can hit. Links inside running text stay as they are. */
.sbox input{align-self:stretch}
.qty button{width:44px}
@media(pointer:coarse){
  .ft ul{gap:0}.ft a{padding:11px 0}
  .crumb a,a.chip,.doc .toc a,.also a{position:relative}
  .crumb a::after,.also a::after{content:'';position:absolute;left:-6px;right:-6px;top:50%;height:44px;margin-top:-22px}
  a.chip::after,.doc .toc a::after{content:'';position:absolute;left:0;right:0;top:-4px;bottom:-4px}
}

/* the shop's items-per-page box sits before the sort box; on phones the two share the row */
.persel{margin-right:8px}
@media(max-width:759px){.stick .persel{flex:0 1 34%;margin-right:0}}