/* Shopfront storefront. Every colour, corner and gap comes from the theme's
   variables (set on .sf), so a seller's choices restyle the whole shop. */

.sf-mark{ width:36px; height:36px; border-radius:50%; overflow:hidden; flex:none; display:inline-flex;
  align-items:center; justify-content:center; background:var(--brand,#333); color:var(--on-brand,#fff);
  font-weight:700; font-size:16px; text-transform:uppercase; }
.sf-mark img{ width:100%; height:100%; object-fit:cover; }

.sf{ --pad:clamp(20px, 5vw, 72px); --maxw:1260px; background:var(--bg); color:var(--ink); font-family:var(--fb);
  font-size:16px; line-height:1.6; min-height:100vh; overflow-x:clip; -webkit-font-smoothing:antialiased; }
.sf *, .sf *::before, .sf *::after{ box-sizing:border-box; }
.sf [hidden]{ display:none !important; }
.sf a{ color:inherit; }
.sf img{ display:block; max-width:100%; }
.sf button, .sf input, .sf select{ font-family:inherit; }
.sf button{ cursor:pointer; }
.sf :focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.sf-in{ max-width:calc(var(--maxw) + 2 * var(--pad)); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.sf-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sf main > section{ padding-top:var(--sec); }
.sf-owner{ background:var(--surface); font-size:13px; padding:9px 20px; text-align:center; }
.sf-owner a{ font-weight:600; }
.sf-arrow{ flex:none; }
/* the dashboard styles bare elements; inside the shop, start from neutral (zero-specificity, so every class below wins) */
:where(.sf) button{ min-height:0; padding:0; border-radius:0; font-weight:inherit; font-size:inherit; }
:where(.sf) label{ display:inline; font-size:inherit; font-weight:inherit; letter-spacing:normal; text-transform:none; color:inherit; margin:0; }
:where(.sf) input, :where(.sf) select, :where(.sf) textarea{ width:auto; padding:0; border:0; border-radius:0; background:none; font-size:inherit; }
:where(.sf) h1, :where(.sf) h2, :where(.sf) h3{ font-size:inherit; letter-spacing:inherit; margin:0; }

/* type */
.eyebrow{ font-family:var(--fb); font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-text); margin:0 0 14px; line-height:1.4; }
.eyebrow-line{ display:flex; align-items:center; gap:12px; }
.eyebrow-line::before{ content:""; width:30px; height:1.5px; background:currentColor; flex:none; }
.hero-title, .sec-title, .split-title, .cta-title, .ct-name, .pd-name, .fe-name, .fw-mark, .hk-title, .hc-promo{
  font-family:var(--fd); font-weight:var(--dw); letter-spacing:var(--track); margin:0; }
.is-upper .hero-title, .is-upper .sec-title, .is-upper .split-title, .is-upper .cta-title, .is-upper .ct-name,
.is-upper .pd-name, .is-upper .fe-name, .is-upper .fw-mark, .is-upper .hk-title{ text-transform:uppercase; letter-spacing:-0.02em; }
.hero-title{ font-size:calc(clamp(44px, 5.9vw, 86px) * var(--fscale)); line-height:.97; overflow-wrap:break-word; }
.sec-title{ font-size:calc(clamp(32px, 3.3vw, 46px) * var(--fscale)); line-height:1.04; }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px 32px; flex-wrap:wrap; margin-bottom:32px; }
.sec-lead{ color:var(--muted); margin:14px 0 0; max-width:52ch; font-size:15px; }

/* buttons and links */
.sf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:58px; padding:0 26px;
  border-radius:var(--r-btn); border:0; font-weight:600; font-size:15px; text-decoration:none; line-height:1.2; text-align:center; }
.sf .sf-btn-primary{ background:var(--accent); color:var(--on-accent); }
.sf .sf-btn-primary:hover{ filter:brightness(1.07); }
.sf .sf-btn-deep{ background:var(--deep-btn); color:var(--deep-btn-ink); }
.sf-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15px; text-decoration:none; padding:12px 0; }
.sf-link:hover{ text-decoration:underline; text-underline-offset:5px; }
.sf .sf-more{ display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:14px; text-decoration:none;
  padding:6px 0 7px; border-bottom:1.5px solid currentColor; white-space:nowrap; }
.sf-linkbtn{ border:0; background:none; padding:0; color:inherit; font:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* label laid over photos */
.sf-chip{ position:absolute; left:16px; bottom:16px; z-index:1; background:#ffffff; color:#1A1A1A; font-family:var(--fb);
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.25; padding:8px 12px;
  max-width:calc(100% - 32px); }
.media{ position:relative; display:block; overflow:hidden; border-radius:var(--r); background:var(--surface); text-decoration:none; }
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a.media img, .pc-img img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
  a.media:hover img, .pc:hover .pc-img img{ transform:scale(1.03); }
}

/* ---------- announcement bar ---------- */
.sf-announce{ background:var(--deep); color:var(--on-deep); text-align:center; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; line-height:1.4; padding:9px 0; }

/* ---------- header ---------- */
.sf-header{ background:var(--bg); position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); }
.is-ruled .sf-header{ border-bottom:2px solid var(--ink); }
.hd{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:24px; height:88px; }
.sf-brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; min-width:0; justify-self:start; }
.sf-logo{ width:40px; height:40px; border-radius:50%; overflow:hidden; flex:none; background:var(--surface); }
.sf-logo img{ width:100%; height:100%; object-fit:cover; }
.sf-name{ font-family:var(--fd); font-weight:var(--dw); font-size:calc(26px * var(--fscale)); letter-spacing:-0.03em;
  line-height:1.05; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.logo-sans .sf-name{ font-family:var(--fb); font-weight:800; font-size:24px; letter-spacing:-0.04em; }
.logo-spaced .sf-name{ font-size:calc(19px * var(--fscale)); text-transform:uppercase; letter-spacing:.12em; }
.is-upper .sf-name{ text-transform:uppercase; }
.hd-nav{ display:flex; align-items:center; gap:36px; font-size:14.5px; font-weight:600; }
.hd-nav a{ text-decoration:none; padding:10px 0; }
.hd-nav a:hover{ text-decoration:underline; text-underline-offset:6px; }
.hd-tools{ display:flex; align-items:center; justify-content:flex-end; gap:8px; justify-self:end; }
.sf-iconbtn{ width:44px; height:44px; border:0; background:none; color:var(--ink); padding:0; display:inline-flex;
  align-items:center; justify-content:center; border-radius:50%; }
.sf-iconbtn:hover{ background:var(--surface); }
.sf-menubtn{ display:none; }
.hd-centred .sf-brand{ justify-self:center; }
.hd-centred .hd-left{ justify-self:start; }
.hd-minimal{ grid-template-columns:minmax(0,1fr) auto; }
.hd-minimal .hd-tools{ gap:28px; }
.sf-searchbar{ border-top:1px solid var(--line); padding:14px 0; }
.sf-find{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; color:var(--muted); }
.sf-find input{ flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:15px; padding:10px 0; }
.sf-find input::placeholder{ color:var(--muted); }
.sf-searchbar .sf-find{ border:1px solid var(--line-strong); border-radius:min(var(--r), 8px); padding:0 16px; background:var(--bg); }
.sf-searchbar .sf-find:focus-within, .hq-bar .sf-find:focus-within{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }
.sf-drawer{ border-top:1px solid var(--line); padding:4px var(--pad) 12px; display:grid; }
.sf-drawer a{ padding:14px 0; border-bottom:1px solid var(--line); text-decoration:none; font-weight:600; }
.sf-drawer a:last-child{ border-bottom:0; }

/* ---------- top of the page ---------- */
.sf main > .s-hero{ padding-top:64px; }
.hero-sub{ font-size:clamp(15.5px, 1.3vw, 17px); color:var(--muted); margin:24px 0 0; max-width:44ch; line-height:1.7; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px 30px; align-items:center; margin-top:34px; }
.hero-meta{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 28px; padding:0; margin:52px 0 0; font-size:11px;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* split */
.hs-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(32px, 5vw, 70px); align-items:center; }
.hs-img{ height:clamp(380px, 36vw, 520px); }

/* centred */
.hcn-copy{ text-align:center; max-width:860px; margin:0 auto; padding-top:24px; }
.hcn-copy .eyebrow{ justify-content:center; }
.hcn-copy .hero-sub{ margin-left:auto; margin-right:auto; }
.hcn-copy .hero-actions{ justify-content:center; }
.hero-centred .hero-title{ font-size:calc(clamp(42px, 5.4vw, 76px) * var(--fscale)); }
.hcn-stage{ position:relative; margin-top:64px; }
.hcn-img{ height:clamp(300px, 34vw, 480px); }
.hcn-strip{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr); gap:12px; }
.sf .hcn-card{ position:absolute; right:24px; bottom:24px; z-index:2; display:grid; gap:2px; min-width:250px; max-width:340px;
  background:var(--bg); color:var(--ink); padding:18px 22px; text-decoration:none; border-radius:min(var(--r), 6px);
  box-shadow:0 14px 40px rgba(0,0,0,.12); }
.hcn-label{ font-size:12.5px; color:var(--muted); }
.hcn-card strong{ font-family:var(--fd); font-weight:var(--dw); font-size:calc(21px * var(--fscale)); letter-spacing:-0.02em; line-height:1.2; }
.hcn-price{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; margin-top:6px; }

/* search first */
.hq-top{ display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr) minmax(0,360px); gap:20px 28px; align-items:end; }
.hq-eyebrow{ margin:0 0 8px; max-width:150px; }
.hero-search .hero-title{ font-size:calc(clamp(42px, 5.4vw, 76px) * var(--fscale)); }
.hs-lead{ color:var(--muted); margin:0 0 6px; font-size:15.5px; line-height:1.7; }
.hq-bar{ display:flex; align-items:center; gap:16px; margin-top:44px; background:var(--surface); border-radius:min(var(--r), 6px);
  padding:14px 14px 14px 24px; }
.hq-bar .sf-btn{ min-height:54px; }
.ct-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.hero-search .ct-grid{ margin-top:18px; }
.ct-n2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.ct-n4{ grid-template-columns:repeat(4, minmax(0,1fr)); }

/* banner */
.hb-panel{ position:relative; background:var(--deep); color:var(--on-deep); border-radius:var(--r); overflow:hidden;
  min-height:clamp(440px, 44vw, 640px); display:flex; align-items:center; }
.hb-img{ position:absolute; top:0; right:0; width:62%; height:100%; object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 38%); mask-image:linear-gradient(90deg, transparent 0, #000 38%); }
.hb-copy{ position:relative; z-index:1; padding:64px clamp(28px, 6vw, 80px) 96px; max-width:min(660px, 62%); }
.hb-noimg .hb-copy{ max-width:760px; }
.hb-copy .eyebrow{ color:var(--accent-on-deep); }
.hb-copy .hero-sub{ color:var(--muted-on-deep); }
.hero-banner .hero-title{ font-size:calc(clamp(42px, 5.2vw, 78px) * var(--fscale)); }
.sf .hb-cap{ position:absolute; left:clamp(28px, 6vw, 80px); bottom:32px; z-index:1; display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--on-deep); text-decoration:none; }
.sf .hb-cap:hover{ text-decoration:underline; text-underline-offset:4px; }

/* big photo, words on top */
.sf main > .s-hero.hero-cover{ padding-top:0; }
.hv{ position:relative; display:flex; align-items:flex-end; min-height:clamp(540px, 84vh, 880px); overflow:hidden;
  background:var(--deep); color:#ffffff; }
.hv-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hv-pair .hv-img{ width:50%; }
.hv-pair .hv-img + .hv-img{ left:50%; }
.hv::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 38%, rgba(0,0,0,0) 72%); }
.hv-noimg{ color:var(--on-deep); }
.hv-noimg::after{ display:none; }
.hv-in{ position:relative; z-index:1; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px;
  flex-wrap:wrap; padding-top:140px; padding-bottom:clamp(36px, 5.5vw, 76px); }
.hv-copy{ max-width:760px; }
.hero-cover .hero-title{ font-size:calc(clamp(46px, 6.6vw, 100px) * var(--fscale)); }
.hero-cover .eyebrow, .hero-cover .hero-title, .hero-cover .sf-link{ color:inherit; }
.hero-cover .hero-sub{ color:inherit; opacity:.9; }
.sf .hv-cap{ display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:8px 0; }
.sf .hv-cap:hover{ text-decoration:underline; text-underline-offset:4px; }
/* the luxury theme centres its words, as fine jewellers do */
.f-luxury .hv-in{ flex-direction:column; align-items:center; text-align:center; }
.f-luxury .hv-copy{ margin:0 auto; }
.f-luxury .hero-cover .hero-actions, .f-luxury .hero-cover .eyebrow{ justify-content:center; }
.f-luxury .hero-cover .hero-sub{ margin-left:auto; margin-right:auto; }

/* collage */
.hc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr) minmax(0,.55fr); gap:12px; align-items:stretch; }
.hc-copy{ padding:28px clamp(16px, 3vw, 44px) 28px 0; align-self:center; }
.hc-main{ min-height:clamp(380px, 38vw, 540px); }
.hc-side{ display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; }
.hc-promo{ background:var(--accent); color:var(--on-accent); padding:24px 22px; font-size:calc(clamp(18px, 1.8vw, 25px) * var(--fscale));
  line-height:1.1; text-transform:uppercase; letter-spacing:-0.01em; min-height:170px; border-radius:var(--r); }
.hc-small{ min-height:200px; }
.hc-small .sf-chip, .hc-main .sf-chip{ font-size:10px; }

/* booking */
.hk-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:clamp(32px, 6vw, 96px); align-items:center; }
.hk-card{ background:var(--surface); border-radius:var(--r); padding:clamp(24px, 3vw, 40px); display:grid; gap:14px; }
.hk-label{ color:var(--ink); margin:0; }
.hk-title{ font-size:calc(clamp(26px, 2.4vw, 34px) * var(--fscale)); line-height:1.12; margin-bottom:10px; }
.hk-field{ display:grid; gap:8px; font-size:13.5px; font-weight:600; }
.hk-field select{ width:100%; min-height:56px; padding:0 16px; border:1px solid var(--line-strong); border-radius:min(var(--r), 6px);
  background:var(--bg); color:var(--ink); font-size:15px; }
.hk-card .sf-btn{ width:100%; margin-top:6px; }
.hk-note{ margin:4px 0 0; font-size:13px; color:var(--muted); }

/* software window */
.hw-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
.hw-pills{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:30px 0 0; }
.hw-pills li{ background:var(--surface); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; }
.hw-frame{ position:relative; background:var(--deep); border-radius:calc(var(--r) + 4px); padding:0 8px 8px; box-shadow:0 30px 60px -30px rgba(0,0,0,.35); }
.hw-bar{ display:flex; align-items:center; gap:7px; height:38px; padding:0 8px; color:var(--on-deep); font-size:12px; }
.hw-bar i{ width:8px; height:8px; border-radius:50%; background:var(--on-deep); opacity:.9; }
.hw-bar span{ margin-left:10px; opacity:.95; }
.hw-img{ height:clamp(300px, 30vw, 430px); border-radius:max(calc(var(--r) - 2px), 0px); }
.hw-float{ position:absolute; right:-14px; bottom:44px; z-index:2; background:var(--bg); color:var(--ink); font-size:13px; font-weight:600;
  padding:11px 16px; border-radius:min(var(--r), 8px); box-shadow:0 12px 30px rgba(0,0,0,.14); }

/* ---------- category tiles ---------- */
.sf .ct-tile{ position:relative; display:grid; grid-template-rows:auto 1fr auto; align-items:start; text-align:left; min-height:clamp(170px, 18vw, 255px);
  padding:26px 28px; border:0; border-radius:var(--r); color:var(--ink); background:var(--surface); font:inherit; }
.ct-2{ background:var(--tint) !important; }
.sf .ct-3{ background:var(--deep); color:var(--on-deep); }
.ct-n{ font-size:12.5px; }
.ct-name{ font-size:calc(clamp(24px, 2.2vw, 31px) * var(--fscale)); line-height:1.1; margin-top:32px; max-width:12ch; }
.ct-count{ font-size:13px; margin-top:8px; }
.ct-tile .sf-arrow{ position:absolute; right:26px; bottom:26px; width:16px; height:16px; }
.sf .ct-tile:hover .sf-arrow{ transform:translate(2px, -2px); transition:transform .2s; }
.ct-compact .ct-tile{ min-height:150px; grid-template-rows:auto 1fr; padding:20px 22px; }
.ct-compact .ct-name{ align-self:end; margin-top:0; font-size:calc(clamp(20px, 1.8vw, 26px) * var(--fscale)); }
.ct-compact .ct-count{ display:none; }
.ct-compact .ct-tile .sf-arrow{ top:22px; bottom:auto; right:22px; }

/* category tiles with a photo from each category */
.cp-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.cp-n2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.cp-n4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.sf .cp-tile{ position:relative; display:flex; flex-direction:column; align-items:stretch; min-width:0; padding:0; border:0;
  background:none; color:var(--ink); font:inherit; text-align:left; }
.cp-img{ position:relative; display:block; aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--r); background:var(--surface); }
.cp-n2 .cp-img{ aspect-ratio:3 / 2; }
.tile-over .cp-name{ font-size:calc(clamp(24px, 2.3vw, 34px) * var(--fscale)); }
.cp-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cp-text{ display:flex; flex-direction:column; gap:4px; padding-top:14px; }
.cp-name{ font-family:var(--fd); font-weight:var(--dw); letter-spacing:var(--track); font-size:calc(clamp(20px, 1.8vw, 25px) * var(--fscale)); line-height:1.15; }
.is-upper .cp-name{ text-transform:uppercase; letter-spacing:-0.01em; }
.cp-meta{ font-size:13.5px; color:var(--muted); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .cp-img img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
  .cp-tile:hover .cp-img img{ transform:scale(1.03); }
}
/* words laid over the photo */
.tile-over .cp-img::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.66) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,0) 62%); }
.tile-over .cp-text{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:0 22px 20px; color:#fff; }
.tile-over .cp-meta{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
/* a soft card around the photo, name and starting price */
.sf .tile-card .cp-tile{ background:var(--surface); border-radius:calc(var(--r) + 4px); padding:12px 12px 20px; text-align:center; }
.tile-card .cp-img{ aspect-ratio:1 / 1; border-radius:var(--r); }
.tile-card .cp-text{ align-items:center; }
.sf .is-band .tile-card .cp-tile{ background:var(--bg); }
.tile-card .cp-meta{ color:var(--ink); font-weight:600; }

/* a full-width tinted band behind the categories, for themes that use one */
.sf main > .s-categories.is-band{ margin-top:var(--sec); padding-top:calc(var(--sec) * .8); padding-bottom:calc(var(--sec) * .8); background:var(--surface); }
.is-band .ct-1{ background:var(--bg); }

/* ---------- reassurance strip ---------- */
.sf main > .s-trust{ padding-top:calc(var(--sec) * .5); }
.tr-list{ list-style:none; margin:0; padding:18px 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:12px 28px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px; color:var(--muted); }
.tr-list li{ display:flex; gap:10px; align-items:center; }
.tr-list svg, .pd-notes svg{ width:19px; height:19px; flex:none; color:var(--accent-text); }

/* ---------- products ---------- */
.pg-cats{ display:flex; gap:8px; flex-wrap:wrap; }
.pg-cats button{ min-height:40px; padding:0 16px; border-radius:var(--r-btn); border:1px solid var(--line-strong);
  background:transparent; color:var(--ink); font-size:14px; font-weight:600; }
.pg-cats button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
/* bold and heritage shops filter with big words instead of small buttons */
.f-bold .s-products .sec-head, .f-retro .s-products .sec-head{ flex-direction:column; align-items:flex-start; }
.f-bold .pg-cats, .f-retro .pg-cats{ gap:4px 28px; }
.f-bold .pg-cats button, .f-retro .pg-cats button{ min-height:44px; padding:0; border:0; border-radius:0;
  background:none; color:var(--muted); font-family:var(--fd); font-weight:var(--dw); letter-spacing:var(--track);
  font-size:calc(clamp(22px, 2.2vw, 32px) * var(--fscale)); line-height:1.1; }
.f-bold .pg-cats button{ text-transform:uppercase; letter-spacing:-0.01em; }
.f-bold .pg-cats button[aria-pressed="true"], .f-retro .pg-cats button[aria-pressed="true"]{ background:none; color:var(--ink);
  text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:9px; }
/* heritage shops rule a heavy line under each heading */
.f-retro .sec-head{ border-bottom:3px solid var(--ink); padding-bottom:18px; }
/* friendly shops centre their headings */
.f-soft .sec-head{ flex-direction:column; align-items:center; text-align:center; }
.f-soft .pg-cats{ justify-content:center; }
.sf-closed{ padding:14px 18px; border:1px solid var(--line-strong); border-radius:var(--r); margin:0 0 24px; }
.pg-none{ color:var(--muted); margin-top:20px; }
.pg-grid{ display:grid; gap:40px 24px; }
.pg-c2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.pg-c3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.pg-c4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.pc{ display:flex; flex-direction:column; text-decoration:none; color:inherit; min-width:0; }
.pc-img{ display:block; position:relative; aspect-ratio:var(--pc-ratio, 1 / 1); overflow:hidden; border-radius:var(--r); background:var(--surface); }
.pg-c3 .pc-img, .pg-c2 .pc-img{ aspect-ratio:var(--pc-ratio3, 5 / 4); }
/* photo shapes follow the kind of shop: tall for fashion, jewellery and skincare, wide for digital things */
.f-luxury, .f-bold, .f-natural{ --pc-ratio:4 / 5; --pc-ratio3:4 / 5; }
.f-digital{ --pc-ratio:4 / 3; --pc-ratio3:4 / 3; }
.pc-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sf .pc-chip{ top:16px; bottom:auto; }
.pc-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--fd);
  font-size:56px; color:var(--muted); text-transform:uppercase; }
.pc-body{ display:flex; flex-direction:column; gap:3px; padding-top:18px; }
.pc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.pc-name{ font-weight:600; font-size:16px; line-height:1.3; letter-spacing:-0.01em; }
.pc-price{ font-weight:600; font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.pc-note{ color:var(--muted); font-size:13px; }
.cards-framed .pc-img{ border:2px solid var(--ink); border-radius:0; }
.is-upper .pc-name{ font-weight:700; }
.f-luxury .pg-grid{ column-gap:14px; }

/* edge to edge: photos almost touching, words small underneath */
.cards-tight .pg-grid{ column-gap:6px; row-gap:36px; }
.cards-tight .pc-img{ border-radius:0; }
.cards-tight .pc-body{ padding-top:12px; }

/* product details, each theme's own way */
.dt-stacked .pg-grid:not(.pg-one) .pc-top{ flex-direction:column; align-items:flex-start; gap:3px; }
.dt-stacked .pg-grid:not(.pg-one) .pc-name{ font-weight:500; font-size:15px; }
.dt-stacked .pg-grid:not(.pg-one) .pc-price{ font-weight:500; font-size:14.5px; }
.dt-centred .pg-grid:not(.pg-one) .pc-body{ align-items:center; text-align:center; }
.dt-centred .pg-grid:not(.pg-one) .pc-top{ flex-direction:column; align-items:center; gap:4px; }
.f-luxury.dt-centred .pg-grid:not(.pg-one) .pc-name{ text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; font-weight:600; }
.f-luxury.dt-centred .pg-grid:not(.pg-one) .pc-price{ font-weight:400; font-size:14px; }
@media (min-width:761px){ .dt-tag .pg-grid:not(.pg-one) .pc-top{ align-items:center; } }
.dt-tag .pg-grid:not(.pg-one) .pc-price{ align-self:flex-start; }
.dt-tag .pg-grid:not(.pg-one) .pc-price{ background:var(--surface); border-radius:6px; padding:4px 10px; font-size:13.5px; }
.f-retro .pg-grid:not(.pg-one) .pc-name{ font-family:var(--fd); font-weight:var(--dw); font-size:calc(19px * var(--fscale)); letter-spacing:-0.01em; }
.sf .pg-one .pc-body, .sf .pg-one .pc-top{ align-items:flex-start; text-align:left; }

.pg-list{ display:grid; border-top:1px solid var(--line); }
.pc-row{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:20px; align-items:center; padding:16px 0;
  border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.pc-row .pc-img{ aspect-ratio:1; border-radius:min(var(--r), 8px); }
.pc-row .pc-body{ padding:0; gap:2px; }
.pc-row .pc-name{ font-family:var(--fd); font-weight:var(--dw); font-size:calc(21px * var(--fscale)); letter-spacing:-0.02em; }
.pc-desc{ color:var(--muted); font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pc-end{ display:flex; align-items:center; gap:18px; }
.pc-act{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; border:1px solid var(--line-strong);
  border-radius:var(--r-btn); font-size:13.5px; font-weight:600; }
.pc-row:hover .pc-act{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.pg-one{ grid-template-columns:minmax(0,1fr) !important; }
.pg-one .pc{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:56px; align-items:center; }
.pg-one .pc-img{ aspect-ratio:5 / 4; }
.pg-one .pc-body{ padding:0; }
.pg-one .pc-top{ flex-direction:column; align-items:flex-start; gap:10px; }
.pg-one .pc-name{ font-family:var(--fd); font-weight:var(--dw); font-size:calc(clamp(30px, 3vw, 42px) * var(--fscale)); letter-spacing:var(--track); line-height:1.08; }
.pg-one .pc-price{ font-size:19px; }

/* ---------- split sections: story and featured product ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 84px); align-items:center; }
.split-rev .split-img{ order:2; }
.split-img{ min-height:clamp(320px, 30vw, 430px); }
.split-noimg{ grid-template-columns:minmax(0,1fr); }
.split-noimg .split-copy{ max-width:760px; }
.split-title{ font-size:calc(clamp(34px, 3.6vw, 52px) * var(--fscale)); line-height:1.04; }
.split-lead{ margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.75; max-width:52ch; }
.split-text{ margin:14px 0 0; color:var(--muted); font-size:15.5px; line-height:1.75; max-width:52ch; }
.split-price{ margin:16px 0 0; font-weight:600; font-size:15px; }
.split-terms{ margin:16px 0 0; font-size:13.5px; color:var(--muted); }
.split-copy .sf-more{ margin-top:30px; }

/* ---------- how ordering works ---------- */
.st-title{ margin-bottom:18px; }
.st-list{ list-style:none; margin:0; padding:30px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px 40px;
  border-top:1px solid var(--line); }
.st-list li{ display:flex; gap:16px; align-items:flex-start; }
.st-n{ flex:none; width:42px; height:42px; border-radius:50%; background:var(--surface); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; }
.st-txt strong{ display:block; font-size:14.5px; font-weight:700; margin-top:2px; }
.st-txt span{ display:block; font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.6; }
.st-band .st-box{ background:var(--surface); border-radius:var(--r); padding:30px 32px 32px; }
.st-band .st-list{ border-top:0; padding-top:0; }
.st-band .st-n{ background:var(--bg); }

/* ---------- colour banner ---------- */
.cta-band{ background:var(--accent); color:var(--on-accent); border-radius:var(--r); padding:clamp(28px, 4vw, 52px) clamp(24px, 4.6vw, 60px);
  display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; }
.sf .cta-eyebrow{ color:var(--on-accent); margin-bottom:10px; }
.cta-title{ font-size:calc(clamp(28px, 3vw, 42px) * var(--fscale)); line-height:1.08; }
.cta-text{ margin:10px 0 0; font-size:15.5px; }
.sf .cta-btn{ background:var(--band-btn); color:var(--band-btn-ink); min-height:52px; }

/* ---------- questions ---------- */
.faq-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:48px; align-items:start; }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list details:first-child{ border-top:1px solid var(--line); }
.faq-list summary{ list-style:none; cursor:pointer; padding:20px 40px 20px 0; font-weight:600; font-size:16.5px; position:relative; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{ content:"+"; position:absolute; right:6px; top:15px; font-size:24px; font-weight:400; }
.faq-list details[open] summary::after{ content:"\2212"; }
.faq-list p{ margin:0 0 22px; color:var(--muted); max-width:62ch; }

/* ---------- footer ---------- */
.sf-footer{ margin-top:calc(var(--sec) * 1.1); }
.ftr-columns, .ftr-wordmark{ background:var(--deep); color:var(--on-deep); }
.fe-grid{ display:grid; grid-template-columns:minmax(0,2fr) repeat(2, minmax(0,1fr)); gap:40px; padding-top:72px; padding-bottom:48px; }
.fe-name{ display:block; font-size:calc(34px * var(--fscale)); line-height:1.05; }
.logo-sans .fe-name{ font-family:var(--fb); font-weight:800; letter-spacing:-0.04em; }
.fe-brand p{ color:var(--muted-on-deep); font-size:14.5px; margin:12px 0 0; max-width:38ch; }
.ftr-columns nav{ display:grid; gap:12px; align-content:start; font-size:14.5px; }
.ftr-columns nav h3{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 6px; font-family:var(--fb); }
.ftr-columns nav a{ color:var(--on-deep); text-decoration:none; justify-self:start; }
.ftr-columns nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
.ftr-columns nav span{ color:var(--muted-on-deep); }
.fe-bottom{ display:flex; flex-wrap:wrap; gap:8px 28px; padding-top:22px; padding-bottom:34px; font-size:13px; color:var(--muted-on-deep);
  border-top:1px solid color-mix(in srgb, var(--on-deep) 18%, transparent); }
.fe-bottom a{ color:var(--on-deep); }
.ftr-compact{ border-top:1px solid var(--line); }
.ftr-compact .sf-in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px; padding-top:28px; padding-bottom:40px; font-size:14px; }
.fc-brand{ font-family:var(--fd); font-weight:var(--dw); font-size:calc(20px * var(--fscale)); letter-spacing:-0.02em; }
.ftr-compact nav{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.ftr-compact nav a{ text-decoration:none; color:var(--muted); }
.fc-small{ margin-left:auto; display:flex; flex-wrap:wrap; gap:6px 18px; color:var(--muted); font-size:13px; }
.fw-mark{ font-size:calc(clamp(56px, 11vw, 160px) * var(--fscale)); letter-spacing:-0.05em; line-height:.88; padding-top:64px; overflow-wrap:anywhere; }
.fw-row{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; padding:36px 0 40px; font-weight:600; }
.fw-row nav{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.fw-small{ margin-left:auto; display:flex; flex-wrap:wrap; gap:6px 18px; font-weight:400; font-size:13.5px; color:var(--muted-on-deep); }
.fw-small a{ color:var(--on-deep); }

/* ---------- product page ---------- */
.pd{ display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:clamp(32px, 5vw, 72px); align-items:start; padding-top:44px; padding-bottom:40px; }
.pd-media{ position:sticky; top:110px; }
.pd-main{ position:relative; aspect-ratio:4 / 5; overflow:hidden; border-radius:var(--r); background:var(--surface); }
.pd-main img{ width:100%; height:100%; object-fit:cover; }
.pd-main.empty{ aspect-ratio:16 / 10; }
.pd-main .pc-ph{ font-size:96px; }
.cards-framed .pd-main{ border:2px solid var(--ink); border-radius:0; }
.pd-thumbs{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; }
.pd-thumbs button{ flex:none; width:72px; height:86px; padding:0; border:0; border-radius:min(var(--r), 6px); overflow:hidden;
  background:var(--surface); opacity:.7; }
.pd-thumbs button[aria-pressed="true"]{ opacity:1; outline:1.5px solid var(--ink); outline-offset:2px; }
.pd-thumbs img{ width:100%; height:100%; object-fit:cover; }
.pd-crumb{ display:flex; gap:8px; align-items:center; font-size:13.5px; color:var(--muted); margin:0 0 18px; }
.pd-crumb button{ padding:0; border:0; background:none; color:inherit; font-size:inherit; text-decoration:underline; text-underline-offset:3px; }
.pd-eyebrow{ margin-bottom:10px; }
.pd-name{ font-size:calc(clamp(36px, 4vw, 58px) * var(--fscale)); line-height:1; overflow-wrap:anywhere; }
.pd-from{ font-size:19px; font-weight:600; margin:14px 0 0; }
.pd-desc{ color:var(--muted); margin:18px 0 0; max-width:52ch; line-height:1.7; }
.pd-group{ border:0; padding:0; margin:30px 0 0; min-width:0; }
.pd-group legend{ font-weight:700; font-size:14.5px; margin:0 0 12px; padding:0; }
.pd-group legend span{ font-weight:400; color:var(--muted); margin-left:4px; }
.pd-need{ display:block; margin-top:10px; font-size:14px; font-weight:600; color:var(--accent-text); }
.pd-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-opt{ min-height:48px; padding:8px 18px; border:1px solid var(--line-strong); border-radius:var(--r-btn);
  background:var(--bg); color:var(--ink); font-size:15px; }
.pd-opt span{ color:var(--muted); margin-left:6px; }
.pd-opt:hover{ border-color:var(--ink); }
.pd-opt[aria-pressed="true"]{ border-color:var(--ink); outline:1px solid var(--ink); outline-offset:-2px; background:var(--surface); font-weight:600; }
.cards-framed .pd-opt{ border:2px solid var(--ink); border-radius:0; font-weight:600; }
.cards-framed .pd-opt[aria-pressed="true"]{ outline:0; background:var(--ink); color:var(--bg); }
.cards-framed .pd-opt[aria-pressed="true"] span{ color:inherit; }
.pd-qtyrow{ display:flex; justify-content:space-between; align-items:center; margin-top:28px; }
.pd-label{ font-weight:700; font-size:14.5px; }
.pd-qty{ display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--r-btn); }
.pd-qty button{ width:46px; height:46px; border:0; background:none; color:var(--ink); font-size:20px; border-radius:var(--r-btn); }
.pd-qty button:disabled{ opacity:.35; cursor:default; }
.pd-qty output{ min-width:32px; text-align:center; font-weight:600; }
.pd-buy{ margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.pd-total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.pd-total span{ color:var(--muted); font-size:15px; }
.pd-price{ font-family:var(--fd); font-size:calc(40px * var(--fscale)); font-weight:var(--dw); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.pd-go{ width:100%; min-height:58px; font-size:16px; }
.pd-notes{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; font-size:14px; color:var(--muted); }
.pd-notes li{ display:flex; gap:10px; align-items:flex-start; }

/* premium editorial: a bigger gallery and a quieter buying panel */
.pdl-editorial .pd{ grid-template-columns:minmax(0,62fr) minmax(0,38fr); }
.pdl-editorial .pd-main{ aspect-ratio:4 / 5; }
.pdl-editorial .pd-info{ padding-top:24px; }
.pdl-editorial .pd-name{ font-size:calc(clamp(38px, 4.4vw, 64px) * var(--fscale)); }

/* custom order: introduction first, then the choices beside an order summary */
.pdl-custom .pd{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"media head" "config summary"; row-gap:56px; }
.pdl-custom .pd-info{ display:contents; }
.pdl-custom .pd-media{ grid-area:media; position:static; }
.pdl-custom .pd-main{ aspect-ratio:5 / 4; }
.pdl-custom .pd-head{ grid-area:head; align-self:center; }
.pdl-custom .pd-config{ grid-area:config; border-top:1px solid var(--line); }
.pdl-custom .pd-config .pd-group:first-child{ margin-top:30px; }
.pdl-custom .pd-opt{ min-height:60px; min-width:120px; }
.pdl-custom .pd-summary{ grid-area:summary; position:sticky; top:110px; background:var(--surface); border-radius:var(--r); padding:28px; }
.pdl-custom .pd-buy{ margin-top:0; padding-top:0; border-top:0; }

/* ---------- one product, large ---------- */
.hp-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px, 5vw, 76px); align-items:center; }
.hp-media{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); }
.hp-n2, .hp-n3{ grid-template-columns:minmax(0,3fr) minmax(0,1fr); grid-template-rows:repeat(2, minmax(0,1fr)); }
.hp-main{ aspect-ratio:4 / 5; }
.hp-n2 .hp-main, .hp-n3 .hp-main, .hp-n2 .hp-side{ grid-row:1 / span 2; }
.hero-spot .hero-title{ font-size:calc(clamp(40px, 4.6vw, 72px) * var(--fscale)); }
.hp-price{ font-size:clamp(20px, 1.8vw, 24px); font-weight:600; margin:18px 0 0; font-variant-numeric:tabular-nums; }
.hp-opts{ margin:14px 0 0; font-size:14px; color:var(--muted); }
.hero-spot .hero-meta{ margin-top:40px; }

/* ---------- products grouped into collections ---------- */
.pcol{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,3fr); gap:24px clamp(28px, 4vw, 64px); padding:44px 0; border-top:1px solid var(--line); }
.pcol:first-child{ border-top:0; padding-top:8px; }
.pcol-head{ position:sticky; top:112px; align-self:start; }
.pcol-name{ font-family:var(--fd); font-weight:var(--dw); letter-spacing:var(--track); font-size:calc(clamp(26px, 2.4vw, 36px) * var(--fscale)); line-height:1.08; }
.is-upper .pcol-name{ text-transform:uppercase; letter-spacing:-0.01em; }
.pcol-meta{ margin:10px 0 0; font-size:14px; color:var(--muted); }
/* the cards here are narrower, so the price sits under the name */
.sf .pcol .pc-top{ flex-direction:column; align-items:flex-start; gap:2px; }
.sf.dt-centred .pcol .pc-top{ align-items:center; }

/* sorting, for bigger shops */
.pg-bar{ display:flex; justify-content:flex-end; margin:-8px 0 24px; }
.pg-sort{ display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.sf .pg-sort select{ min-height:44px; padding:0 12px; border:1px solid var(--line-strong); border-radius:min(var(--r), 8px);
  background:var(--bg); color:var(--ink); font-size:14px; font-weight:600; }
.is-dark .pg-sort select, .is-dark .hk-field select{ color-scheme:dark; }

/* ---------- photo gallery ---------- */
.gl-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:clamp(150px, 16vw, 230px); gap:12px; }
.gl-n3{ grid-template-columns:repeat(3, minmax(0,1fr)); grid-auto-rows:clamp(220px, 26vw, 360px); }
.gl-n4{ grid-auto-rows:clamp(200px, 22vw, 320px); }
.gl-n5 .gl-item:first-child, .gl-n9 .gl-item:first-child{ grid-column:span 2; grid-row:span 2; }
.gl-item{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--surface); }
.gl-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gl-item a{ position:absolute; inset:0; display:block; text-decoration:none; }
.gl-cap{ position:absolute; left:0; right:0; bottom:0; padding:32px 16px 14px; font-size:13px; font-weight:600; line-height:1.35; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,0)); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .gl-item img{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
  .gl-item a:hover img{ transform:scale(1.03); }
}

/* ---------- customer reviews ---------- */
.rv-count{ margin:0; font-size:14px; color:var(--muted); }
.rv-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.rv-n2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.rv-n1{ grid-template-columns:minmax(0,1fr); }
.rv figure{ margin:0; height:100%; display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  padding:clamp(24px, 2.6vw, 34px); background:var(--surface); border-radius:var(--r); }
.rv blockquote{ margin:0; }
.rv-mark{ display:block; height:30px; font-family:var(--fd); font-size:64px; line-height:1; color:var(--accent-text); }
.rv blockquote p{ margin:0; font-size:16.5px; line-height:1.65; }
.rv figcaption strong{ display:block; font-size:14.5px; }
.rv figcaption span{ display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.rv-n1 figure{ background:none; padding:8px 0 0; align-items:center; text-align:center; }
.rv-n1 blockquote p{ font-family:var(--fd); font-weight:var(--dw); letter-spacing:var(--track); font-size:calc(clamp(24px, 2.4vw, 34px) * var(--fscale));
  line-height:1.25; max-width:30ch; margin:0 auto; }
.cards-framed .rv figure{ border:2px solid var(--ink); border-radius:0; background:none; }

/* ---------- availability calendar ---------- */
.av-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px, 5vw, 80px); align-items:center; }
.av-lead{ margin:20px 0 0; color:var(--muted); font-size:16px; line-height:1.7; max-width:44ch; }
.av-lead strong{ color:var(--ink); font-weight:600; }
.av-key{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; padding:0; margin:22px 0 30px; font-size:13.5px; color:var(--muted); }
.av-key li{ display:inline-flex; align-items:center; gap:8px; }
.av-dot{ width:14px; height:14px; border-radius:4px; display:inline-block; }
.av-k-open{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-strong); }
.av-k-soon{ box-shadow:inset 0 0 0 1px var(--line-strong); }
.av-k-full{ background:var(--tint); }
.av-cal{ width:100%; border-collapse:separate; border-spacing:6px; table-layout:fixed; }
.av-cal th{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:0 0 4px; text-align:center; }
.av-cal td{ height:clamp(50px, 5vw, 64px); padding:0; text-align:center; vertical-align:middle; border-radius:min(var(--r), 10px); }
.av-n{ display:flex; flex-direction:column; align-items:center; font-weight:600; font-size:15px; line-height:1.1; font-variant-numeric:tabular-nums; }
.av-n small{ font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:3px; }
.av-open{ background:var(--surface); color:var(--ink); }
.av-soon, .av-past{ color:var(--muted); }
.av-soon{ box-shadow:inset 0 0 0 1px var(--line-strong); }
.av-past .av-n{ font-weight:400; }
.av-full{ background:var(--tint); color:var(--ink); }
.av-full .av-n{ text-decoration:line-through; font-weight:400; }
.sf .av-first{ box-shadow:inset 0 0 0 2px var(--ink); }
.av-today .av-n::after{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; margin-top:4px; }

/* ---------- social links ---------- */
.so-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:24px clamp(32px, 5vw, 80px); align-items:center; }
.so-links{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.so-links li{ border-bottom:1px solid var(--line); }
.so-links a{ display:flex; align-items:center; gap:16px; padding:20px 2px; text-decoration:none; }
.so-net{ font-family:var(--fd); font-weight:var(--dw); letter-spacing:var(--track); font-size:calc(clamp(22px, 2vw, 30px) * var(--fscale)); line-height:1.1; }
.is-upper .so-net{ text-transform:uppercase; letter-spacing:-0.01em; }
.so-end{ margin-left:auto; display:inline-flex; align-items:center; gap:14px; color:var(--muted); font-size:14.5px; }
.so-links .sf-arrow{ width:18px; height:18px; color:var(--ink); }
.so-links a:hover .so-net{ text-decoration:underline; text-underline-offset:6px; }
.fe-4{ grid-template-columns:minmax(0,2fr) repeat(3, minmax(0,1fr)); }

/* ---------- Dark & Immersive: glowing accents on deep colour ---------- */
.f-dark{ --pc-ratio:4 / 5; --pc-ratio3:4 / 5; }
.f-dark .sf-header{ background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.f-dark .sf-btn-primary{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 70%, transparent), 0 12px 44px -10px color-mix(in srgb, var(--accent) 65%, transparent); }
.f-dark .s-hero:not(.hero-cover){ background:radial-gradient(60% 70% at 85% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.f-dark .pg-cats button[aria-pressed="true"]{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.f-dark .pc-img, .f-dark .gl-item{ box-shadow:0 0 0 1px var(--line); }
@media (hover:hover){ .f-dark .pc:hover .pc-img{ box-shadow:0 0 0 1px var(--accent), 0 20px 50px -24px var(--accent); } }
.f-dark .eyebrow{ letter-spacing:.24em; }

/* ---------- laptops and tablets ---------- */
@media (max-width:1100px){
  .hd-nav{ gap:24px; }
  .hq-top{ grid-template-columns:minmax(0,1fr) minmax(0,320px); }
  .hq-eyebrow{ grid-column:1 / -1; max-width:none; margin:0; }
  .hc-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hc-copy{ grid-column:1 / -1; padding:0 0 24px; }
  .pg-c4{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ---------- phones and small tablets ---------- */
@media (max-width:860px){
  .sf main > .s-hero{ padding-top:28px; }
  .sf main > section{ padding-top:calc(var(--sec) * .62); }
  .hs-grid, .hk-grid, .hw-grid, .split, .faq-grid{ grid-template-columns:minmax(0,1fr); }
  .hs-img{ order:-1; height:clamp(260px, 72vw, 420px); }
  .hero-actions{ margin-top:28px; }
  .hero-actions .sf-btn{ flex:1 1 auto; }
  .hero-meta{ margin-top:32px; }
  .hcn-stage{ margin-top:36px; }
  .hcn-strip{ grid-template-columns:minmax(0,1fr); }
  .hcn-strip .hcn-side{ display:none; }
  .hcn-stage .sf-chip{ display:none; }
  .hcn-img{ height:clamp(260px, 70vw, 380px); }
  .sf .hcn-card{ position:relative; right:auto; bottom:auto; margin:-44px 16px 0; min-width:0; max-width:none; }
  .hq-top{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .hq-bar{ margin-top:28px; padding:8px 8px 8px 16px; }
  .hq-bar .sf-btn{ min-height:48px; padding:0 16px; gap:8px; }
  .hb-panel{ display:block; min-height:0; }
  .hb-img{ position:relative; width:100%; height:240px; -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 55%, transparent 100%); }
  .hb-copy{ max-width:none; padding:8px 24px 76px; }
  .sf .hb-cap{ left:24px; bottom:26px; }
  .hc-grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:10px; }
  .hc-main{ min-height:300px; }
  .hc-promo{ min-height:0; padding:16px 14px; font-size:calc(17px * var(--fscale)); }
  .hc-small{ min-height:150px; }
  .hc-small .sf-chip{ display:none; }
  .hw-frame{ margin-right:10px; }
  .hw-img{ height:240px; }
  .hw-float{ right:-10px; bottom:24px; }
  .ct-grid, .ct-n4{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
  .ct-grid .ct-tile:last-child:nth-child(odd){ grid-column:span 2; }
  .sf .ct-tile{ min-height:140px; padding:18px; }
  .ct-name{ margin-top:18px; }
  .ct-tile .sf-arrow{ right:18px; bottom:18px; }
  .ct-compact .ct-tile{ min-height:104px; padding:14px 16px; }
  .ct-compact .ct-tile .sf-arrow{ top:16px; right:16px; }
  .split-img{ min-height:260px; }
  .split-rev .split-img{ order:0; }
  .st-list{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .cta-band{ flex-direction:column; align-items:flex-start; }
  .sf .cta-btn{ width:100%; }
  .faq-grid{ gap:12px; }
  .fe-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px 24px; padding-top:48px; }
  .fe-brand{ grid-column:1 / -1; }
  .fc-small, .fw-small{ margin-left:0; }
  .pg-c3, .pg-c4{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 14px; }
  .pg-c3 .pc-img{ aspect-ratio:var(--pc-ratio, 1 / 1); }
  .cards-tight .pg-c3, .cards-tight .pg-c4{ gap:28px 4px; }
  .cards-tight .pg-grid{ margin:0 calc(-1 * var(--pad) + 4px); }
  .cards-tight .pc-body{ padding-left:6px; padding-right:6px; }
  /* category photos become a row to swipe through, the next one peeking in */
  .cp-grid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--pad);
    margin:0 calc(-1 * var(--pad)); padding:0 var(--pad) 8px; scrollbar-width:none; }
  .cp-grid::-webkit-scrollbar{ display:none; }
  .sf .cp-tile{ flex:0 0 72%; scroll-snap-align:start; }
  .sf .cp-n2 .cp-tile{ flex-basis:calc(50% - 6px); }
  .cp-n2 .cp-img{ aspect-ratio:4 / 5; }
  .tile-over .cp-text{ padding:0 16px 16px; }
  .sf main > .s-categories.is-band{ padding-top:calc(var(--sec) * .55); padding-bottom:calc(var(--sec) * .55); margin-top:calc(var(--sec) * .62); }
  /* the big photo hero on phones */
  .hv{ min-height:clamp(480px, 80vh, 720px); }
  .hv-pair .hv-img{ width:100%; }
  .hv-pair .hv-img + .hv-img{ display:none; }
  .hv-in{ padding-top:96px; }
  .sf .hv-cap{ display:none; }
  .pc-end{ flex-direction:column; align-items:flex-end; gap:8px; }
  .pc-act{ min-height:34px; padding:0 12px; font-size:12.5px; }
  .pc-top{ flex-direction:column; align-items:flex-start; gap:2px; }
  .pc-name{ font-size:15px; }
  .sf .pc-chip{ left:10px; top:10px; font-size:9.5px; padding:6px 8px; max-width:calc(100% - 20px); }
  .pc-row{ grid-template-columns:72px minmax(0,1fr) auto; gap:14px; }
  .pg-one .pc{ grid-template-columns:minmax(0,1fr); gap:20px; }
  /* product page: photo edge to edge, buy bar fixed to the bottom */
  .pd, .pdl-editorial .pd, .pdl-custom .pd{ grid-template-columns:minmax(0,1fr); grid-template-areas:none; gap:20px; row-gap:20px; padding-top:0; padding-bottom:24px; }
  .pdl-custom .pd-info{ display:block; }
  .pdl-custom .pd-media, .pdl-custom .pd-head, .pdl-custom .pd-config, .pdl-custom .pd-summary{ grid-area:auto; }
  .pd-media, .pdl-custom .pd-media{ position:static; margin:0 calc(-1 * var(--pad)); }
  .pd-main, .pdl-custom .pd-main, .cards-framed .pd-main{ border-radius:0; aspect-ratio:1; border:0; }
  .pd-thumbs{ padding:0 var(--pad); }
  .pdl-custom .pd-config{ border-top:0; }
  .pdl-custom .pd-summary{ position:static; background:none; padding:0; }
  .pd-buy, .pdl-custom .pd-buy{ position:fixed; left:0; right:0; bottom:0; z-index:30; margin:0; background:var(--bg); border-top:1px solid var(--line);
    padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:16px; }
  .pd-total{ display:block; margin:0; }
  .pd-total span{ display:block; font-size:12px; }
  .pd-price{ font-size:26px; }
  .pd-go{ flex:1; width:auto; }
  .is-product .sf-footer{ padding-bottom:96px; }
}
@media (max-width:760px){
  .sf-menubtn{ display:inline-flex; }
  .hd-nav{ display:none; }
  .hd, .hd-minimal{ height:64px; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
  .hd-centred .hd-left{ display:none; }
  .sf-name{ font-size:calc(22px * var(--fscale)); }
  .logo-sans .sf-name{ font-size:21px; }
  .logo-spaced .sf-name{ font-size:calc(16px * var(--fscale)); letter-spacing:.1em; }
  .sf-logo{ width:32px; height:32px; }
  .sf-announce{ font-size:10.5px; letter-spacing:.1em; padding:8px 0; }
  .hd-tools .sf-iconbtn{ margin-right:-6px; }
  /* centred header on a phone: menu left, name in the middle, search right */
  .hd-centred{ grid-template-columns:44px minmax(0,1fr) 44px; }
  .hd-centred .hd-tools{ display:contents; }
  .hd-centred .sf-menubtn{ grid-column:1; grid-row:1; justify-self:start; margin:0 0 0 -10px; }
  .hd-centred .sf-brand{ grid-column:2; grid-row:1; justify-self:center; }
  .hd-centred [data-searchbtn]{ grid-column:3; grid-row:1; justify-self:end; margin-right:-6px; }
}
@media (max-width:420px){
  .hero-actions .sf-link{ padding:6px 0; }
  .pc-price{ font-size:14px; }
}

/* the newer sections on phones and small tablets */
@media (max-width:860px){
  .hp-grid, .av-grid, .so-grid{ grid-template-columns:minmax(0,1fr); }
  .hp-media{ grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none !important; }
  .hp-side{ display:none; }
  .hp-main{ aspect-ratio:1; grid-row:auto !important; }
  .pcol{ grid-template-columns:minmax(0,1fr); gap:16px; padding:32px 0; }
  .pcol-head{ position:static; }
  .pg-bar{ justify-content:flex-start; margin:-12px 0 20px; }
  .gl-grid, .gl-n3, .gl-n4{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:42vw; gap:8px; }
  .gl-n5 .gl-item:first-child, .gl-n9 .gl-item:first-child, .gl-n3 .gl-item:first-child{ grid-column:span 2; grid-row:span 1; }
  .gl-cap{ padding:24px 10px 10px; font-size:12px; }
  .rv-list, .rv-n2{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .av-cal{ border-spacing:4px; }
  .av-cal td{ height:46px; }
  .av-cal th{ font-size:10px; letter-spacing:.04em; }
  .av-n{ font-size:14px; }
  .av-key{ margin-bottom:24px; }
  .av-copy .sf-btn{ width:100%; }
  .so-links a{ padding:16px 2px; }
  .so-end{ font-size:13.5px; }
  .fe-4{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

/* ---------- subscription plans: cards side by side, the price first ---------- */
.pl-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gap); }
.pl-n1{ grid-template-columns:minmax(0, 520px); }
.pl-n2{ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:1040px; }
.pl{ display:flex; flex-direction:column; background:var(--surface); border-radius:var(--r); padding:clamp(22px, 2.4vw, 30px); overflow:hidden; }
.pl-pick{ box-shadow:inset 0 0 0 2px var(--accent); }
.pl-img{ display:block; margin:calc(clamp(22px, 2.4vw, 30px) * -1) calc(clamp(22px, 2.4vw, 30px) * -1) 22px; aspect-ratio:3 / 2; overflow:hidden; }
.pl-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pl-pick .pl-img{ margin:calc(clamp(22px, 2.4vw, 30px) * -1 + 2px) calc(clamp(22px, 2.4vw, 30px) * -1 + 2px) 22px; }
.pl-flag{ align-self:flex-start; margin:0 0 12px; font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:999px; background:var(--accent); color:var(--on-accent); }
.pl-name{ margin:0; font-family:var(--fd); font-weight:var(--dw); letter-spacing:var(--track); font-size:calc(clamp(22px, 2vw, 28px) * var(--fscale)); line-height:1.12; }
.is-upper .pl-name{ text-transform:uppercase; letter-spacing:-0.01em; }
.pl-price{ margin:14px 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 7px; color:var(--muted); font-size:15px; }
.pl-price strong{ color:var(--ink); font-family:var(--fd); font-weight:var(--dw); font-size:calc(clamp(34px, 3.2vw, 46px) * var(--fscale)); line-height:1; font-variant-numeric:tabular-nums; }
.pl-desc{ margin:16px 0 0; color:var(--muted); font-size:15px; line-height:1.6; max-width:46ch; }
.pl-points{ list-style:none; margin:20px 0 26px; padding:18px 0 0; border-top:1px solid var(--line); display:grid; gap:10px; font-size:15px; line-height:1.45; }
.pl-points li{ display:flex; gap:10px; align-items:flex-start; }
.pl-tick{ flex:none; margin-top:2px; color:var(--accent-text); }
.pl-btn{ margin-top:auto; width:100%; justify-content:center; }
.cards-framed .pl{ background:none; box-shadow:none; border:2px solid var(--ink); border-radius:0; }
.cards-framed .pl-pick{ border-color:var(--accent); }
.cards-framed .pl-pick .pl-img{ margin:calc(clamp(22px, 2.4vw, 30px) * -1) calc(clamp(22px, 2.4vw, 30px) * -1) 22px; }
@media (max-width:860px){
  .pl-grid, .pl-n1, .pl-n2{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- footer help: your orders, managing a subscription, reporting a shop ---------- */
.sf-footer .sf-help{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; cursor:pointer; }
.sf-footer .sf-help:hover{ text-decoration-thickness:2px; }

/* ---------- product videos ---------- */
.pd-videos{ display:flex; align-items:flex-start; gap:12px; margin-top:16px; overflow-x:auto; padding-bottom:4px; }
.pd-vid{ flex:none; width:168px; margin:0; display:grid; align-content:start; gap:8px; }
.pd-vid.tall{ width:128px; }
.pd-vplay{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16 / 9;
  padding:0; border:0; border-radius:min(var(--r), 8px); overflow:hidden; background:#17171B; color:#fff; cursor:pointer; text-decoration:none;
  box-shadow:inset 0 0 0 1px var(--line); }
.pd-vposter{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; pointer-events:none; }
.pd-vid.tall .pd-vplay{ aspect-ratio:9 / 14; }
.pd-vplay video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.pd-vnet{ position:absolute; left:8px; top:8px; font-size:11.5px; font-weight:700; letter-spacing:.02em; color:#fff;
  background:rgba(0,0,0,.55); padding:2px 7px; border-radius:999px; }
.pd-vicon{ position:relative; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.92); color:#111; box-shadow:0 2px 10px rgba(0,0,0,.25); }
.pd-vplay:hover .pd-vicon{ transform:scale(1.06); }
.pd-vplay:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.pd-vid figcaption{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:12.5px; color:var(--muted); line-height:1.35; }
.pd-vby{ overflow-wrap:anywhere; }
.pd-vid figcaption a{ color:var(--ink); font-weight:700; font-size:12px; text-decoration:none; padding:3px 10px;
  border:1px solid var(--line-strong); border-radius:999px; }
.pd-vid figcaption a:hover{ border-color:var(--ink); }
@media (prefers-reduced-motion: no-preference){ .pd-vicon{ transition:transform .15s ease; } }

/* the player, opened over the page */
.vm{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(10,10,12,.86); }
.vm-box{ position:relative; width:min(960px, 100%); display:grid; gap:12px; }
.vm-box.tall{ width:min(400px, 100%); }
.vm-frame{ position:relative; width:100%; aspect-ratio:16 / 9; background:#000; border-radius:10px; overflow:hidden; }
.vm-box.tall .vm-frame{ aspect-ratio:9 / 16; max-height:calc(100vh - 140px); margin:0 auto; }
.vm-frame iframe, .vm-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.vm-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; color:#f2f2f2; font-size:14px; }
.vm-foot a{ color:#fff; font-weight:700; text-underline-offset:3px; }
.vm-foot .vm-follow{ background:#fff; color:#111; text-decoration:none; padding:8px 14px; border-radius:999px; font-size:13.5px; }
.vm-close{ position:absolute; top:-6px; right:-6px; transform:translateY(-100%); width:44px; height:44px; min-height:0; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.vm-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width: 600px){ .vm{ padding:56px 12px 16px; } .vm-close{ top:-8px; right:0; } }