/* Site-only additions for the G By Shahed front end. site.css stays identical to the template's. */

/* Contact form honeypot: hidden from people, filled only by bots. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* "Logged in as a customer" bar for admins (impersonation). */
.imp-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:8px var(--gutter);background:var(--sale);color:#fff;font-size:13px}
.imp-bar button{height:30px;padding:0 12px;border:0;border-radius:var(--r-sm);background:#fff;color:var(--ink);font:600 12px var(--font-body);cursor:pointer}

/* Error flash/toast. */
.toast--error{background:var(--sale)}

/* Reviews: empty stars, the rating picker in "Write a review", the pager. */
.stars .ic.st.off{fill:none}
.rate-pick{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin:16px 0 14px;padding:0;border:0}
.rate-pick legend{width:100%;margin-bottom:8px;font-size:13px;font-weight:600}
.rate-pick input{position:absolute;opacity:0;pointer-events:none}
.rate-pick label{cursor:pointer;color:var(--ink-faint)}
.rate-pick label .ic.st{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5}
.rate-pick input:checked ~ label,.rate-pick label:hover,.rate-pick label:hover ~ label{color:var(--ink)}
.rate-pick input:checked ~ label .ic.st,.rate-pick label:hover .ic.st,.rate-pick label:hover ~ label .ic.st{fill:currentColor}
.rate-pick input:focus-visible + label{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;font-size:13px}
.pager .btn{min-height:40px;padding:0 16px}.pager [aria-disabled]{opacity:.35}

/* Bag: where promo codes go (they are entered at checkout). */
.pcode-note{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:12px 14px;border-radius:var(--r);background:#fff;font-size:13px;color:var(--ink-soft)}.pcode-note .ic{width:16px;height:16px;flex:none}

/* Card payment pages (pay, not completed, confirming): button row under the hero, icon colours. */
.pay-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}.pay-acts form{display:contents}.pay-acts .lnk{align-self:center;margin-left:6px}
.done__ok.pay-bad{background:var(--sale)}.done__ok.pay-wait{background:var(--ink)}
.pay-note{margin-top:18px;font-size:13px;color:var(--ink-soft)}
.pay-acts .btn{display:flex;justify-content:center;align-items:center;text-align:center}
@media (max-width:899px){.pay-acts .btn{width:100%}}

/* Account: sign-out is a form button styled like the menu links; address label chips are radios. */
.acct nav form,.acct__list form{display:contents}
button.out{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;border:0;background:none;font:inherit;font-size:14.5px;font-weight:500;color:var(--sale);text-align:left;cursor:pointer}
@media (min-width:900px){.acct__side button.out{min-height:46px;padding:0 8px;font-size:14px}}
/* Tracker: steps without a date stay level with the others. */
.track li{align-content:start}
.chips-l .chip{cursor:pointer}
.acard__a form{display:inline}

/* Card colour dots: with more than one colour they are buttons that switch the card photo (front.js). */
.sw button{width:13px;height:13px;padding:0;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(20,20,20,.18);cursor:pointer}
.sw button.on{outline:1px solid var(--ink);outline-offset:2px}

/* Footer: payment methods as logos in white cards; HiTech credit on its own quiet line. */
.ft-pay{gap:8px}
.ft-pay .pm{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.ft-pay .pm svg{display:block;height:17px;width:auto}
.ft-pay .pm .ic{height:18px;width:18px}
.ft-pay .pm b{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ft-credit{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:16px;padding:16px 0 8px;border-top:1px solid var(--line);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.ft-credit a{display:block;line-height:0}
.ft-credit img{display:block;height:20px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
.ft-credit a:hover img,.ft-credit a:focus-visible img{filter:none;opacity:1}
.ft-pay .pm svg[aria-label="Mastercard"]{height:23px}

/* Home category tiles: the template's grid (2 big + 3 small) is drawn for 5. With fewer, every count still fills the row. */
.gate.gate--1 a{grid-column:1/-1;aspect-ratio:16/10}
.gate.gate--3 a{grid-column:span 2;aspect-ratio:3/4.2}.gate.gate--3 a b{font-size:19px}
.gate.gate--4 a{grid-column:span 3;aspect-ratio:4/4.6}.gate.gate--4 a b{font-size:26px}
@media (min-width:900px){
  .gate.gate--1 a{aspect-ratio:21/9}
  .gate.gate--3 a{aspect-ratio:4/3}.gate.gate--3 a b{font-size:30px}
  .gate.gate--4 a{aspect-ratio:16/9}.gate.gate--4 a b{font-size:40px}
}

/* Order badge for "pending" (placed, not yet being prepared): the template only had Preparing onwards. */
.st--pending{background:#F3F1EE;color:var(--ink)}

/* Currency picker (partials/currency): a compact select in the header (desktop), a row in the menu drawer. Only shown with 2+ active currencies.
   Draws its own chevron (the template's, from .fld select) so the native arrow doesn't eat the space. */
.cur{display:flex;align-items:center;gap:12px}
.cur label{display:flex;align-items:center;gap:12px;cursor:pointer}
.cur select{width:auto;height:36px;margin-inline-start:auto;padding:0 30px 0 12px;border:1px solid var(--line);border-radius:8px;appearance:none;-webkit-appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/14px;font:600 13px var(--font-body);letter-spacing:.06em;color:inherit;cursor:pointer}
.cur--menu{min-height:48px;font-size:14px;border-top:1px solid var(--line)}
.cur--menu .ic{width:19px;height:19px}
.cur--hd{display:none;margin-inline-end:8px}.cur--hd select{width:auto;height:34px;padding:0 24px 0 10px;border-color:transparent;background-position:right 6px center;font-size:12px}
@media (min-width:900px){.cur--hd{display:flex}}
@media (hover:hover){.cur--hd select:hover{border-color:var(--line)}}

/* Category page: the category's (or subcategory's) description under its title. */
.cat-desc{max-width:62ch;margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* Product page: "Model is 170 cm and wears size S", under the size picker. */
.pmodel{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;color:var(--ink-soft)}
.pmodel .ic{width:16px;height:16px;flex:none}

/* ===== Wider layout: near-fluid on large screens (the template capped everything at 1240px). ===== */
.wrap,.top,.cats,.stories,.gate{max-width:1760px}
@media (min-width:1200px){:root{--gutter:48px}}
@media (min-width:1500px){.shop-grid,.wl__grid{grid-template-columns:repeat(5,1fr)}}

/* Footer: two link columns (Help, About) now that the Shop column is gone. */
@media (min-width:900px){
  .ft-grid{grid-template-columns:1.2fr 1.4fr 1fr}
  .ft-links{grid-template-columns:repeat(2,1fr)}
}

/* ===== Product page on phones: calmer type scale (title, price, options, description). ===== */
@media (max-width:899px){
  .pdp{padding-top:8px}
  .pinfo__brand{font-size:10.5px;letter-spacing:.14em}
  .pinfo__rate{font-size:12.5px}.pinfo__rate .ic.st{width:13px;height:13px}
  .pinfo h1{margin:6px 0 4px;font-size:clamp(21px,5.6vw,25px);line-height:1.18;letter-spacing:0}
  .pinfo__sku{font-size:11px}
  .pinfo__price{margin-top:10px;font-size:22px}
  .pinfo__price s{font-size:16px;font-weight:500;color:var(--ink-soft)}
  .offb{font-size:10.5px;padding:3px 8px}
  .pinfo__note,.plow,.pmodel{font-size:12px}
  .popt{padding-top:16px}
  .popt h3{margin-bottom:10px;font-size:10.5px}
  .popt h3 span,.popt h3 b{font-size:12.5px}
  .popt h3 .lnk{font-size:12px}
  .size{height:42px;font-size:12.5px}
  .pbanner{font-size:12px;padding:9px 12px}
  .phelp p{font-size:12.5px}
  .phelp .btn{font-size:13px}
  .pboxes div{font-size:11.5px;padding:9px 10px}.pboxes .ic{width:19px;height:19px}
  .pdesc h3{font-size:11px}
  .pdesc__box{padding:12px 14px;font-size:13px;line-height:1.6}
  .ptabs{gap:20px}.ptabs button{font-size:11px;padding:10px 2px}
  .pbar b{font-size:12px}.pbar span{font-size:15px}.pbar .btn{min-height:44px;padding:0 16px;font-size:12px}
}

/* Product description (TinyMCE HTML): headings, lists and tables, which the template's reset flattens. */
.pdesc__box h1,.pdesc__box h2,.pdesc__box h3,.pdesc__box h4,.pdesc .acc h1,.pdesc .acc h2,.pdesc .acc h3,.pdesc .acc h4{margin:12px 0 6px;font-family:var(--font-body);font-size:13.5px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.pdesc__box>:first-child,.pdesc .acc>div>:first-child{margin-top:0}
.pdesc__box ul,.pdesc__box ol,.pdesc .acc ul,.pdesc .acc ol{margin:0 0 8px;padding-inline-start:1.25em}
.pdesc__box ul,.pdesc .acc ul{list-style:disc}.pdesc__box ol,.pdesc .acc ol{list-style:decimal}
.pdesc__box li,.pdesc .acc li{margin:0 0 3px}
.pdesc__box table,.pdesc .acc table{width:100%;margin:6px 0 10px;border-collapse:collapse;font-size:12.5px}
.pdesc__box th,.pdesc__box td,.pdesc .acc th,.pdesc .acc td{padding:6px 8px;border:1px solid var(--line);text-align:start;vertical-align:top}
.pdesc__box img,.pdesc .acc img{max-width:100%;height:auto}

/* ===== Policies (Markdown → HTML): lists, tables, sub-headings, paragraph spacing. ===== */
.pol__body p{margin:0 0 10px}.pol__body p:last-child{margin-bottom:0}
.pol__body h3,.pol__body h4{margin:16px 0 6px;font-size:15px;font-weight:700;color:var(--ink)}
.pol__body ul,.pol__body ol{margin:0 0 12px;padding-inline-start:1.3em;max-width:68ch;font-size:15px;line-height:1.7;color:var(--ink-soft)}
.pol__body ul{list-style:disc}.pol__body ol{list-style:decimal}
.pol__body li{margin:0 0 6px}.pol__body li::marker{color:var(--ink)}
.pol__body li p{margin:0}
.pol__body strong{color:var(--ink);font-weight:700}
.pol__body a{text-decoration:underline;text-underline-offset:3px}
.pol__body blockquote{margin:12px 0;padding:12px 16px;border-inline-start:3px solid var(--ink);border-radius:var(--r-sm);background:var(--tint-soft);color:var(--ink-soft);font-size:14px}
.pol__body blockquote p{margin:0}
.pol__body hr{margin:16px 0;border:0;border-top:1px solid var(--line)}
.pol__table{max-width:100%;overflow-x:auto;margin:6px 0 14px;border:1px solid var(--line);border-radius:var(--r)}
.pol__body table{width:100%;min-width:420px;border-collapse:collapse;font-size:14px}
.pol__body th,.pol__body td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.pol__body th{background:var(--tint-soft);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.pol__body tr:last-child td{border-bottom:0}
.pol__body td{color:var(--ink-soft)}.pol__body td:first-child{color:var(--ink);font-weight:600}

/* Sign-in: the "by continuing with Google you agree…" line under the Google button. */
.soc-note{margin:8px 0 0;font-size:11.5px;line-height:1.5;color:var(--ink-soft);text-align:center}
.soc-note a{text-decoration:underline;text-underline-offset:2px}

/* ===== Cookie consent (analytics only load after "Accept"). ===== */
.cc{position:fixed;left:10px;right:10px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:80;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:560px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 12px 34px rgba(20,20,20,.16);font-size:12.5px;line-height:1.5;color:var(--ink-soft)}
.cc[hidden]{display:none}
.cc p{flex:1 1 260px;margin:0}.cc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.cc div{display:flex;gap:8px}
.cc button{min-height:38px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r-sm);background:#fff;font:600 12px var(--font-body);letter-spacing:.04em;color:var(--ink);cursor:pointer}
.cc button[data-cc="1"]{background:var(--ink);color:#fff}
body.pdp-page .cc{bottom:calc(92px + env(safe-area-inset-bottom))}
@media (min-width:900px){.cc,body.pdp-page .cc{left:24px;right:auto;bottom:24px}}
/* Product page on phones: section headings below the info (reviews, similar pieces) in step with the smaller title. */
@media (max-width:899px){.pdp-page .sec h2,.pdp-page .sh h2{font-size:24px;line-height:1.15}}

/* ===== Home hero: full-screen photo under the header (the header is about 130px tall on phones, 140px on computers). ===== */
.hh{position:relative;height:calc(100svh - 130px);min-height:440px;max-height:1000px;overflow:hidden;background:var(--tint);color:#fff}
.hh picture,.hh img{position:absolute;inset:0;width:100%;height:100%}
.hh img{object-fit:cover;object-position:center 25%}
.hh::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,20,.62),rgba(20,20,20,.12) 45%,rgba(20,20,20,0) 70%)}
.hh__t{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;justify-items:center;gap:12px;padding:0 var(--gutter) 40px;text-align:center}
.hh__t .caps{margin:0;color:rgba(255,255,255,.9)}
.hh__h{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(40px,8vw,104px);line-height:1;letter-spacing:-.01em}
.hh__t p{max-width:44ch;margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.88)}
.hh__t .btn{margin-top:6px}
@media (min-width:900px){.hh{height:calc(100svh - 140px)}.hh__t{padding-bottom:64px;gap:16px}.hh__t p{font-size:15px}}

/* Home: the first 4 categories in one row under the hero. */
.cat4{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;max-width:1760px;margin:4px auto 0;padding:0 var(--gutter)}
.cat4--1{grid-template-columns:1fr}.cat4--2{grid-template-columns:repeat(2,1fr)}.cat4--3{grid-template-columns:repeat(3,1fr)}
.cat4 a{position:relative;overflow:hidden;aspect-ratio:3/4.2;background:var(--tint);-webkit-tap-highlight-color:transparent}
.cat4 img{transition:transform .7s ease}
.cat4 a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,20,.55),rgba(20,20,20,0) 55%)}
.cat4 span{position:absolute;z-index:2;left:4px;right:4px;bottom:10px;display:grid;justify-items:center;gap:6px;color:#fff;text-align:center}
.cat4 b{font-family:var(--font-display);font-weight:400;font-size:13px;line-height:1.1}
.cat4 small{display:none;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.8);padding-bottom:2px}
.cat4 a:active img{transform:scale(1.03)}
@media (min-width:600px){.cat4 b{font-size:18px}.cat4 span{bottom:14px}}
@media (min-width:900px){.cat4{gap:8px;margin-top:8px}.cat4 b{font-size:clamp(20px,2vw,30px)}.cat4 small{display:block}.cat4 span{bottom:22px}.cat4 a:hover img{transform:scale(1.04)}}

/* Policies: headings in capitals. */
.legal-page .pt h1,.pol__body h2,.pol__body h3,.pol__body h4{text-transform:uppercase;letter-spacing:.06em}
.legal-page .pt h1{letter-spacing:.04em}

/* Category bar under the logo: a little bolder and darker. */
.cats a{font-weight:700;color:var(--ink)}
.cats a.sale{color:var(--sale)}

/* Home category circles: centred row, 4 circles per view on phones (swipe), 7 on computers with ‹ › arrows.
   Auto margins on the first/last circle centre a short row without cutting off the start of a long, scrolling one. */
.circ{position:relative;display:flex;align-items:center;gap:8px;max-width:1760px;margin:0 auto;padding:18px var(--gutter) 4px}
.circ .stories{flex:1;min-width:0;max-width:none;margin:0;padding:0;gap:12px;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.circ .story{flex:0 0 calc((100% - 3 * 12px) / 4);width:auto;scroll-snap-align:start}
.circ .story .r,.circ .story .r.seen{width:100%;max-width:80px;height:auto;aspect-ratio:1}
.circ .stories>.story:first-child{margin-inline-start:auto}
.circ .stories>.story:last-child{margin-inline-end:auto}
.circ__btn{display:none;flex:none;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(20,20,20,.08);cursor:pointer;transition:opacity .2s,border-color .2s}
.circ__btn .ic{width:18px;height:18px}
.circ__btn:hover{border-color:var(--ink)}
.circ__btn:disabled{opacity:.3;cursor:default;border-color:var(--line)}
@media (min-width:900px){
  .circ{justify-content:center;gap:16px}
  .circ .stories{flex:0 1 calc(7 * 100px + 6 * 18px);gap:18px}
  .circ .story{flex-basis:calc((100% - 6 * 18px) / 7)}
  .circ .story .r,.circ .story .r.seen{max-width:96px}
  .circ__btn{display:grid}
  .circ--fit .circ__btn{visibility:hidden}
}

/* Phones: a shorter hero, and the category photos as a swipe slider with 4 in view (swipe for the rest). */
@media (max-width:899px){
  .hh{height:auto;min-height:0;aspect-ratio:4/4.6;max-height:72svh}
  .hh__t{padding-bottom:26px;gap:8px}
  .hh__h{font-size:clamp(32px,9vw,44px)}
  .hh__t p{font-size:13px}
  .hh__t .btn{margin-top:4px;min-height:44px}
  .cat4,.cat4--1,.cat4--2,.cat4--3{display:flex;gap:4px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-top:6px}
  .cat4::-webkit-scrollbar{display:none}
  .cat4 a{flex:0 0 calc((100% - 3 * 4px) / 4);aspect-ratio:3/4.4;scroll-snap-align:start}
  .cat4 b{font-size:clamp(12px,2.8vw,18px);line-height:1.15}
  .cat4 span{bottom:8px}
  .cat4 small{display:none}
}

/* Category photos on computers: a slider with 4 in view; ‹ › arrows sit over the photos (hidden when all fit). */
.cat4w{position:relative}
.cat4w__btn{display:none}
@media (min-width:900px){
  .cat4w{max-width:1760px;margin:8px auto 0;padding-inline:var(--gutter)}
  .cat4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:0;padding:0;max-width:none}
  .cat4::-webkit-scrollbar{display:none}
  .cat4 a{flex:0 0 calc((100% - 3 * 8px) / 4);scroll-snap-align:start}
  .cat4--1 a,.cat4--2 a,.cat4--3 a{flex:1 1 0}
  .cat4w__btn{display:grid;position:absolute;top:50%;z-index:3;transform:translateY(-50%)}
  .cat4w__btn.prev{left:calc(var(--gutter) + 14px)}
  .cat4w__btn.next{right:calc(var(--gutter) + 14px)}
  .cat4w__btn:disabled{visibility:hidden}
  .cat4w.circ--fit .cat4w__btn{visibility:hidden}
}

/* ===== Home image slider (admin → Home Slides): full-width photos, no text. Swipe on phones; arrows + dots; autoplay. ===== */
.hs{position:relative;margin:28px 0 8px;overflow:hidden;background:var(--tint)}
.hs__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.hs__track::-webkit-scrollbar{display:none}
.hs__slide{position:relative;flex:0 0 100%;aspect-ratio:4/5;scroll-snap-align:start;scroll-snap-stop:always;display:block}
.hs__slide picture,.hs__slide img{position:absolute;inset:0;width:100%;height:100%}
.hs__slide img{object-fit:cover}
.hs__nav{display:none;position:absolute;top:50%;z-index:2;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 4px 14px rgba(20,20,20,.12);transform:translateY(-50%);cursor:pointer}
.hs__nav .ic{width:20px;height:20px}
.hs__nav.prev{left:var(--gutter)}.hs__nav.next{right:var(--gutter)}
.hs__dots{position:absolute;z-index:2;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
.hs__dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(20,20,20,.08);cursor:pointer;transition:width .25s,background .25s}
.hs__dots button[aria-current="true"]{width:22px;border-radius:4px;background:#fff}
@media (min-width:768px){.hs__slide{aspect-ratio:12/5}}
@media (min-width:900px){.hs{margin:44px 0 12px}.hs__nav{display:grid}.hs__dots{bottom:20px}}

/* ===== Bigger prices: product cards, product page, bag and checkout summary. ===== */
.p .pr{font-size:15.5px}.p .pr s{font-size:13px}
.pinfo__price{font-size:28px}.pinfo__price s{font-size:19px}
.pbar span{font-size:15px}
.line__price{font-size:15px}
.mini strong{font-size:15px}
.rows{font-size:14.5px}
.rows .tot{font-size:22px}.rows .tot small{font-size:11.5px}
@media (max-width:899px){
  .p .pr{font-size:14.5px}.p .pr s{font-size:12.5px}
  .pinfo__price{font-size:24px}.pinfo__price s{font-size:17px}
  .rows .tot{font-size:20px}
}

/* Home image slider: shorter, with side margins in line with the page (not edge to edge). */
.hs{width:calc(100% - 2 * var(--gutter));max-width:calc(1760px - 2 * var(--gutter));margin:24px auto 8px;border-radius:0}
.hs__slide{aspect-ratio:1/1}
.hs__nav.prev{left:14px}.hs__nav.next{right:14px}
@media (min-width:768px){.hs__slide{aspect-ratio:3/1}}
@media (min-width:900px){.hs{margin:40px auto 12px}}

/* Product cards: "Sold out" centred on the photo and larger (the photo stays tappable through it). */
.p .tag.out{left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);padding:10px 18px;border-radius:var(--r-sm);background:rgba(255,255,255,.94);color:var(--ink);font-size:12px;letter-spacing:.2em;white-space:nowrap;box-shadow:0 6px 20px rgba(20,20,20,.12);pointer-events:none}
@media (min-width:900px){.p .tag.out{padding:12px 24px;font-size:13px}}