/* Storefront stylesheet. Photo-first and calm: the product pictures do the
   talking, the chrome stays quiet, and the buy path is unmistakable.

   Three layers, in this order, and the order matters:

   1. Tokens. Every colour and face comes from the store's own palette and font
      pair (set inline by store/_brand.html). Custom themes (Monument) load this
      file first and then re-point the same tokens, so token NAMES are a contract.
   2. Shared components. Classes a custom theme's own templates also use (.grid,
      .card, .variantpick, .addform, .reviewform, .buybar, .thumbs ...) and the
      default cart / checkout / track / status / policy pages a themed shop still
      renders inside its own base. These rules are kept deliberately plain and
      low-specificity so a theme's skin always wins over them.
   3. `.sf` scope. The default theme's own look. `.sf` is only on the default
      base.html body, so nothing in this layer can reach a custom theme. */

* { box-sizing: border-box; margin: 0; }
:root {
  --accent: #D95B2B;
  --accent-dark: #A83F17;
  --ink: #221410;
  --bg: #FFFFFF;
  --paper: #FFFFFF;
  --line: #E8E5E0;
  --line-strong: #D3CEC7;
  --soft: #6B665F;
  --display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --body: "Public Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  /* derived: set per store by _brand.html; these are the safe fallbacks a
     custom theme inherits */
  --on-accent: #fff;
  --brand-strong: var(--accent-dark);
  --accent-text: var(--accent-dark);
  --tint: color-mix(in srgb, var(--ink) 4%, #fff);
  --good: #146C43;
  --bad: #9B2C12;
  --r-card: 14px;
  --r-btn: 999px;
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1280px;
  --head-h: 68px;
}
.btnstyle-square { --r-btn: 10px; }
body { font-family: var(--body); background: var(--bg); color: var(--ink); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2 { font-family: var(--display); line-height: 1.15; }
a { color: var(--accent-text); }
.muted { color: var(--soft); }
.mono { font-family: var(--mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skiplink {
  position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: 8px; font: 600 14px var(--body); text-decoration: none;
}
.skiplink:focus { top: 12px; }
.shopbody { flex: 1 0 auto; display: flex; flex-direction: column; }
/* in-page links (#reviews, #products) land below the sticky header */
html:has(body.sf) { scroll-padding-top: 130px; }

/* ── 2. shared components ──────────────────────────────────────────────── */

/* announcement bar + header: one sticky block, so the trust line survives
   scrolling. The strip is a hard-capped single line. */
.shoptop { position: sticky; top: 0; z-index: 40; }
.announce {
  background: var(--brand-strong); color: #fff; text-align: center;
  font: 500 12.5px/18px var(--body); letter-spacing: 0.01em; padding: 7px 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shophead {
  position: relative; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.shophead__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--head-h); display: flex; align-items: center; gap: 24px;
}
.shopbrand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.shopbrand__mark {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  background: var(--accent); color: var(--on-accent); border-radius: 10px;
  font: 800 17px/1 var(--display);
}
.shopbrand__name {
  font: 700 19px/1.15 var(--display); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a real logo, when the shop brought one across from its old storefront */
.shopbrand__logo { max-height: 42px; max-width: 190px; width: auto; display: block; }
.shopnav { display: flex; gap: 2px; min-width: 0; flex: 1; overflow: hidden; }
.shopnav__link {
  position: relative; color: var(--soft); text-decoration: none; white-space: nowrap;
  font: 500 14.5px/1 var(--body); padding: 11px 12px; border-radius: 8px;
}
.shopnav__link:hover { color: var(--ink); background: var(--tint); }
.shopnav__link.is-on { color: var(--ink); }
.shopnav__link.is-on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--accent);
}
.shophead__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.headsearch { position: relative; }
.headsearch svg {
  position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
  fill: none; stroke: var(--soft); stroke-width: 2; stroke-linecap: round; pointer-events: none;
}
.headsearch input {
  width: 200px; height: 42px; padding: 0 14px 0 38px; color: var(--ink);
  border: 1px solid transparent; border-radius: var(--r-btn); background: var(--tint);
  font: 400 14.5px var(--body); transition: width .2s ease, background .15s ease, border-color .15s ease;
}
.headsearch input::placeholder { color: var(--soft); }
.headsearch input:focus { outline: none; background: var(--paper); border-color: var(--ink); width: 250px; }
.iconbtn {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  cursor: pointer; color: var(--ink); list-style: none;
}
.iconbtn::-webkit-details-marker { display: none; }
.iconbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.iconbtn:hover, details[open] > .iconbtn { background: var(--tint); }
.shopmenu { display: none; }
.shopmenu__panel {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--paper);
  border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(0, 0, 0, .08);
  padding: 14px var(--gutter) 18px;
}
.shopmenu__panel nav { display: grid; }
.shopmenu__panel nav a {
  display: block; padding: 13px 2px; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none; font: 500 16px var(--body);
}
.shopmenu__panel nav a:last-child { border-bottom: 0; color: var(--soft); }
.shopmenu__search { display: flex; gap: 8px; margin-bottom: 6px; }
.shopmenu__search input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; font: 400 16px var(--body); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--paper);
}
.shopmenu__search button {
  height: 46px; padding: 0 18px; border: 0; border-radius: var(--r-btn);
  background: var(--ink); color: #fff; font: 600 15px var(--body); cursor: pointer;
}
.cartlink {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--paper);
  color: var(--ink); text-decoration: none; font: 600 14.5px var(--body);
}
.cartlink:hover { border-color: var(--ink); }
.cartlink svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cartlink__count {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: 99px;
  background: var(--accent); color: var(--on-accent);
  font: 700 12px/21px var(--body); text-align: center; font-variant-numeric: tabular-nums;
}

/* demo-shop ribbon back to the platform: a quiet note that scrolls away */
.demoribbon {
  display: block; text-align: center; background: var(--tint); color: var(--ink);
  text-decoration: none; font: 500 13px/1.35 var(--body); padding: 8px var(--gutter);
  border-bottom: 1px solid var(--line);
}
.demoribbon span { color: var(--accent-text); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.demoribbon:hover span { text-decoration-thickness: 2px; }

.herobanner { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: clamp(14px, 2vw, 24px) var(--gutter) 0; }
.herobanner img {
  width: 100%; aspect-ratio: 5 / 2; object-fit: cover; display: block;
  border-radius: var(--r-card); background: var(--tint);
}
.shopintro {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: clamp(28px, 5vw, 56px) var(--gutter) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px clamp(24px, 5vw, 72px); align-items: end;
}
.shopintro__title { font: 700 clamp(32px, 4.6vw, 56px)/1.02 var(--display); letter-spacing: -0.025em; max-width: 14ch; }
.shopintro p { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--soft); line-height: 1.6; max-width: 54ch; }
.shopintro--bare { padding: 0; }

/* sale pricing */
.wasprice { color: var(--soft); font-size: 0.82em; font-weight: 400; margin-left: 6px; }
.savebadge {
  display: inline-block; background: var(--brand-strong); color: #fff;
  font: 600 12px var(--body); border-radius: 99px; padding: 3px 10px;
  margin-left: 8px; vertical-align: middle;
}
.salebadge {
  position: absolute; top: 10px; left: 10px; background: var(--brand-strong); color: #fff;
  font: 600 11.5px var(--body); letter-spacing: 0.3px; border-radius: 99px; padding: 4px 10px;
}

/* delivery expectation + trust strip on the product page */
.delivline { margin-top: 8px; font-size: 14px; color: var(--soft); }
.qtybreakline { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--brand-strong); }
.trustrow { list-style: none; padding: 14px 0 0; margin: 22px 0 0; border-top: 1px solid var(--line); }
.trustrow li { font-size: 13px; color: var(--soft); padding: 3px 0 3px 20px; position: relative; }
.trustrow li::before { content: "✓"; position: absolute; left: 2px; color: var(--accent-text); font-weight: 700; }
.trustrow a { color: var(--soft); }

/* checkout: contact note + collapsed discount box */
.contactnote { font-size: 13px; }
.cocheck { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.cocheck input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.discountwrap { margin-top: 16px; }
.discountwrap summary { cursor: pointer; font-size: 14px; color: var(--soft); }
.discountwrap summary:hover { color: var(--ink); }
.discountwrap[open] summary { margin-bottom: 10px; }

/* one-pager layout: hero with the shop's name on it + contact band */
.onehero { position: relative; min-height: clamp(360px, 56vh, 560px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: var(--ink); }
.onehero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.onehero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 6, 0.2), rgba(10, 8, 6, 0.6)); }
.onehero--plain { background: radial-gradient(120% 90% at 20% 0%, var(--accent-dark), var(--ink) 70%); }
.onehero--plain::after { content: none; }
.onehero__inner { position: relative; z-index: 1; color: #fff; padding: 56px var(--gutter); max-width: 760px; }
.onehero__inner h1 { font: 800 clamp(36px, 6.5vw, 68px)/1.02 var(--display); letter-spacing: -0.025em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3); }
.onehero__inner p { margin: 16px auto 0; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; max-width: 54ch; color: rgba(255, 255, 255, 0.92); }
.onehero__cta { margin-top: 28px; }
.onehero .onehero__cta { background: #fff; color: var(--ink); padding-inline: 32px; }
.onehero .onehero__cta:hover { background: color-mix(in srgb, #fff 88%, var(--accent)); color: var(--ink); }
.contactband { background: var(--tint); border-top: 1px solid var(--line); text-align: center; padding: clamp(40px, 6vw, 72px) var(--gutter); margin-top: clamp(24px, 4vw, 48px); }
.contactband h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.01em; }
.contactband__lead { color: var(--soft); margin: 8px auto 22px; max-width: 48ch; }
.contactband__row { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: center; align-items: center; }
.contactband__link { color: var(--ink); font-weight: 600; font-size: 15px; }

/* theme layout variants (set as body classes from the store's theme) */
.imgstyle-portrait .card__imgwrap { aspect-ratio: 3 / 4; }
.btnstyle-square .buybtn, .btnstyle-square .cartlink, .btnstyle-square .chip,
.btnstyle-square .wabtn, .btnstyle-square .btn--ghost { border-radius: 10px; }
.btnstyle-square .shopsearch input, .btnstyle-square .discountform input { border-radius: 10px; }

/* collection chips + storefront search */
.shoptools {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  padding: 20px clamp(16px, 4vw, 48px) 0; max-width: 1240px; margin: 0 auto; width: 100%;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  text-decoration: none; color: var(--ink); font: 550 13.5px var(--body);
  border: 1.5px solid var(--line); border-radius: 99px; padding: 7px 16px;
}
.chip:hover { border-color: var(--ink); }
.chip--on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* grid sort control + pagination */
.shopsort { display: flex; gap: 8px; align-items: center; }
.shopsort__lbl { font: 550 13px var(--body); color: var(--muted, #666); }
.shopsort__sel {
  font: 400 14px var(--body); padding: 8px 12px; background: #fff; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 99px; max-width: 200px;
}
.shopsort__sel:focus { border-color: var(--ink); outline: none; }
.btnstyle-square .shopsort__sel, .btnstyle-square .shopsort__go { border-radius: 10px; }
/* The button is the no-JS path; with JS the select submits on change. */
.shopsort__go {
  font: 550 13px var(--body); padding: 8px 14px; cursor: pointer;
  background: none; color: var(--ink); border: 1.5px solid var(--line); border-radius: 99px;
}
.shopsort__go:hover { border-color: var(--ink); }
.pager {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  max-width: 1240px; margin: 0 auto; width: 100%;
  padding: 8px clamp(16px, 4vw, 48px) 40px;
}
.pager__nums { display: flex; flex-wrap: wrap; gap: 6px; }
.pager__n, .pager__step {
  text-decoration: none; color: var(--ink); font: 550 13.5px var(--body);
  border: 1.5px solid var(--line); border-radius: 99px; padding: 8px 14px;
}
.btnstyle-square .pager__n, .btnstyle-square .pager__step { border-radius: 10px; }
a.pager__n:hover, a.pager__step:hover { border-color: var(--ink); }
.pager__n--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager__step--off { opacity: .35; }
.pager__gap { font: 550 13.5px var(--body); padding: 8px 2px; opacity: .5; }
.pager__count { flex-basis: 100%; text-align: center; font: 400 13px var(--body); opacity: .65; }

/* default theme: chips, sort, pager */
.sf .shoptools { padding: 16px 0 0; }
.sf .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf .chip {
  text-decoration: none; color: var(--ink); font: 500 14px/1 var(--body); white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); padding: 10px 16px;
}
.sf .chip:hover { border-color: var(--ink); }
.sf .chip--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sf .chip--sub { color: var(--soft); }

/* grid sort control + pagination */
.sf .shopsort { display: flex; gap: 8px; align-items: center; }
.sf .shopsort__lbl { font: 500 14px var(--body); color: var(--soft); }
.sf .shopsort__sel {
  font: 500 14px var(--body); height: 42px; padding: 0 36px 0 14px; color: var(--ink); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); max-width: 220px;
  appearance: none; -webkit-appearance: none;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%236B665F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 14px center / 11px no-repeat;
}
.sf .shopsort__sel:focus-visible { border-color: var(--ink); }
.btnstyle-square .shopsort__sel, .btnstyle-square .shopsort__go { border-radius: 10px; }
/* The button is the no-JS path; with JS the select submits on change. */
.sf .shopsort__go {
  font: 600 13.5px var(--body); height: 42px; padding: 0 14px; cursor: pointer;
  background: none; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-btn);
}
.sf .shopsort__go:hover { border-color: var(--ink); }
.sf .pager {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 0 var(--gutter) 56px;
}
.sf .pager__nums { display: flex; flex-wrap: wrap; gap: 6px; }
.sf .pager__n, .sf .pager__step {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
  text-decoration: none; color: var(--ink); font: 500 14px var(--body); font-variant-numeric: tabular-nums;
  border: 1px solid var(--line); border-radius: var(--r-btn); padding: 0 14px;
}
.btnstyle-square .pager__n, .btnstyle-square .pager__step { border-radius: 10px; }
.sf a.pager__n:hover, .sf a.pager__step:hover { border-color: var(--ink); }
.sf .pager__n--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sf .pager__step--off { opacity: .35; }
.sf .pager__gap { font: 500 14px var(--body); padding: 8px 2px; opacity: .5; }
.sf .pager__count { flex-basis: 100%; text-align: center; font: 400 13.5px var(--body); color: var(--soft); margin-top: 6px; }

/* product gallery thumbnails */
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.thumbs__item {
  padding: 0; border: 2px solid transparent; border-radius: 10px; cursor: pointer;
  background: none; overflow: hidden; width: 64px; height: 64px;
}
.thumbs__item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; }
.thumbs__item--on { border-color: var(--ink); }

/* product grid: borderless, image-led */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(18px, 3vw, 32px) clamp(14px, 2vw, 24px);
  padding: clamp(24px, 4vw, 40px) clamp(16px, 4vw, 48px) 72px;
  max-width: 1240px; margin: 0 auto; width: 100%;
}
.card { text-decoration: none; color: var(--ink); }
.card__imgwrap {
  position: relative; aspect-ratio: 1 / 1; background: var(--tint);
  border-radius: 12px; overflow: hidden; margin-bottom: 12px;
}
.card__imgwrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.35s ease;
}
.card:hover .card__imgwrap img { transform: scale(1.045); }
.card__noimg {
  width: 100%; height: 100%; display: grid; place-items: center;
  font: 800 44px var(--display); color: var(--on-accent); background: var(--accent);
}
.card__noimg--big { aspect-ratio: 1 / 1; border-radius: 12px; }
.card__body { display: grid; gap: 3px; padding: 0 2px; }
.card__body h2 { font: 500 15.5px var(--body); }
.card:hover .card__body h2 { text-decoration: underline; text-underline-offset: 3px; }
.card__price { font: 500 14.5px var(--body); color: var(--soft); font-variant-numeric: tabular-nums; }
.soldout {
  position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.94); color: var(--ink);
  font: 600 12px var(--body); padding: 5px 12px; border-radius: 99px;
}
.soldout--inline { position: static; display: inline-block; background: var(--tint); }
.shopempty { grid-column: 1 / -1; color: var(--soft); text-align: center; padding: 40px 0; }

/* product page (default product.html; a theme with its own keeps its own) */
.productpage {
  display: grid; grid-template-columns: minmax(300px, 560px) 1fr;
  gap: clamp(24px, 5vw, 64px); padding: clamp(28px, 5vw, 48px) clamp(16px, 4vw, 48px) 72px;
  max-width: 1180px; margin: 0 auto; width: 100%;
}
/* aspect-ratio reserves the LCP element's height so the price and the buy
   button don't jump (and get mis-tapped) while the photo loads */
.productpage__img img { width: 100%; border-radius: 14px; background: var(--tint); aspect-ratio: 1 / 1; object-fit: contain; }
.productpage__info { max-width: 460px; }
.productpage__info h1 { font-size: clamp(26px, 3.5vw, 40px); margin-top: 12px; letter-spacing: -0.01em; }
.pricetag, .pricetag--big { font: 500 20px var(--body); color: var(--ink); display: inline-block; margin: 12px 0 4px; font-variant-numeric: tabular-nums; }
/* A long unbroken name or a pasted link in the description wraps instead of
   widening the page sideways on a phone. Also the cart line's name and option. */
.productpage__info h1, .productpage__desc, .cartline__info { overflow-wrap: anywhere; }
.productpage > * { min-width: 0; }
.productpage__desc { margin: 14px 0 6px; color: color-mix(in srgb, var(--ink) 80%, #fff); max-width: 60ch; }

/* bundles: what's inside */
.bundlecontents { margin: 18px 0 0; padding: 14px 16px; background: var(--tint); border-radius: 12px; }
.bundlecontents h2 { font: 600 14px var(--body); color: var(--ink); margin: 0 0 8px; }
.bundlecontents ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bundlecontents li { font-size: 14px; color: var(--ink); }

/* rich descriptions: sanitized HTML from an imported shop */
.richtext p { margin: 0 0 0.9em; }
.richtext p:last-child { margin-bottom: 0; }
.richtext h2, .richtext h3, .richtext h4 {
  font-family: var(--display); color: var(--ink); line-height: 1.2;
  margin: 1.1em 0 0.4em; font-size: 1.08em;
}
.richtext ul, .richtext ol { margin: 0 0 0.9em; padding-left: 1.3em; }
.richtext li { margin-bottom: 0.25em; }
.richtext blockquote {
  margin: 0.9em 0; padding: 4px 0 4px 14px;
  border-left: 3px solid var(--line); color: var(--soft);
}
.richtext hr { border: 0; border-top: 1px solid var(--line); margin: 1.1em 0; }
.richtext table {
  border-collapse: collapse; margin: 0.9em 0; font-size: 0.92em;
  display: block; overflow-x: auto; max-width: 100%;
}
.richtext th, .richtext td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.richtext th { background: var(--tint); font-weight: 600; }
.richtext a { color: var(--accent-text); }
.backlink { display: inline-block; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--soft); }
.backlink:hover { color: var(--ink); }
.addform { display: grid; gap: 14px; margin-top: 22px; max-width: 360px; }
.addform label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: var(--soft); }
.addform input {
  width: 90px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font: 500 15px var(--body);
}
.addform input:focus { border-color: var(--ink); outline: none; }
/* a variant row is a label inside .addform: keep it a row, not a stack */
.addform .variantpick__opt { display: flex; }
.stocknote { color: var(--soft); font-size: 13.5px; margin-top: 12px; }
.notice--good { color: var(--good); font-weight: 600; }

/* reviews (post-moderation) */
.reviews { max-width: 720px; margin: 0 auto 64px; padding: 0 clamp(16px, 4vw, 48px); }
.reviews h2 { font-size: 20px; margin: 0 0 10px; }
.reviews__stars { color: #C98A12; letter-spacing: 1px; font-size: 15px; }
.reviews__avg { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 13.5px; margin: 0 0 18px; }
.reviews__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 16px; }
.reviews__item { padding: 14px 0; border-top: 1px solid var(--line); }
.reviews__item strong { display: block; margin: 4px 0 2px; font-size: 14px; }
.reviews__item p { margin: 0; color: color-mix(in srgb, var(--ink) 80%, #fff); font-size: 14px; white-space: pre-wrap; }
.reviews__photo { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 6px; border: 1px solid var(--line); }
.reviews__verified { display: inline-block; font-size: 12px; font-weight: 600; color: var(--good); }
.reviews__item .reviews__title { margin: 2px 0 4px; }
.reviewform { display: grid; gap: 14px; max-width: 420px; margin-top: 8px; }
.reviewform label { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: var(--soft); }
.reviewform input[type="text"], .reviewform textarea {
  padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font: 500 15px var(--body);
}
.ratepick { border: 0; padding: 0; margin: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.ratepick legend { font-weight: 600; font-size: 13px; color: var(--soft); padding: 0 0 6px; }
.ratepick label { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 13.5px; color: var(--ink); }

.buybtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--btn-bg, var(--ink)); color: var(--btn-fg, #fff); border: none; min-height: 48px;
  border-radius: var(--r-btn); cursor: pointer; text-decoration: none; text-align: center;
  font: 600 15.5px/1.2 var(--body); padding: 14px 28px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.buybtn:hover { background: color-mix(in srgb, var(--btn-bg, var(--ink)) 78%, var(--accent)); color: var(--btn-fg, #fff); }
.buybtn:active { transform: scale(0.985); }
.buybtn:disabled { opacity: .7; cursor: progress; }
.buybtn--wide { width: 100%; margin-top: 6px; }

/* variant selector */
.variantpick { border: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; min-width: 0; }
.variantpick legend { font-weight: 600; font-size: 13px; color: var(--soft); margin-bottom: 6px; }
.variantpick__opt {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 14px;
  font: 500 14.5px var(--body);
}
.variantpick__opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.variantpick__opt--out { opacity: 0.5; cursor: not-allowed; }
.variantpick__price { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--soft); }
.variantpick__out { font: 600 11px var(--mono); text-transform: uppercase; }
/* the variant swatch on a variant row: the option IS the picture on a
   jewellery/apparel shop, so show it next to the name */
.variantpick__swatch {
  width: 34px; height: 34px; flex: 0 0 auto; object-fit: cover;
  border-radius: 8px; background: var(--tint); display: block;
}

/* form fields (checkout, track, notify, reviews). :where() keeps these at
   zero specificity so a theme's own input styling always wins. */
.field { display: grid; gap: 6px; min-width: 0; }
.field__label { display: block; font: 600 14px/1.35 var(--body); color: var(--ink); }
.field__opt { font-weight: 400; color: var(--soft); }
.field__hint { display: block; font: 400 13px/1.45 var(--body); color: var(--soft); }
:where(.field) :where(input, select, textarea) {
  width: 100%; min-height: 48px; padding: 11px 14px; color: var(--ink);
  font: 400 16px/1.4 var(--body); background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(.field) :where(select) {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%236B665F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 15px center / 11px no-repeat;
}
:where(.field) :where(textarea) { resize: vertical; min-height: 84px; }
:where(.field) :where(input, select, textarea):hover { border-color: color-mix(in srgb, var(--ink) 35%, var(--line-strong)); }
:where(.field) :where(input, select, textarea):focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
:where(.field) :where(input, textarea)::placeholder { color: color-mix(in srgb, var(--soft) 80%, #fff); }
.input--ref { text-transform: uppercase; font-family: var(--mono); letter-spacing: .04em; }
.input--ref::placeholder { text-transform: none; }

/* cart + checkout */
.narrow { max-width: 760px; margin: 0 auto; width: 100%; padding: clamp(28px, 5vw, 48px) var(--gutter) 72px; flex: 1; }
.narrow h1 { margin-bottom: 22px; letter-spacing: -0.01em; }
.center { text-align: center; }
.cartlist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.cartline {
  display: grid; grid-template-columns: 64px 1fr auto auto; gap: 16px; align-items: center;
  padding: 16px 2px; border-bottom: 1px solid var(--line);
}
.cartline img, .thumbless { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--tint); display: block; }
.cartline__info { display: grid; gap: 2px; min-width: 0; }
.cartline__info strong { font-weight: 600; font-size: 14.5px; }
.cartline__info strong a { color: inherit; text-decoration: none; }
.cartline__info strong a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cartline__info .muted { font-size: 13px; }
.cartline__variant { font-size: 13.5px; color: var(--ink); }
.qtyform { display: flex; gap: 8px; align-items: center; }
.qtyform input { width: 52px; padding: 8px 6px; border: 1.5px solid var(--line); border-radius: 8px; font: 500 14px var(--body); text-align: center; color: var(--ink); }
.qtyform button { background: none; border: none; color: var(--soft); cursor: pointer; font: 600 13px var(--body); text-decoration: underline; min-height: 44px; padding: 0 10px; }
.qtyform button:hover { color: var(--ink); }
/* Remove sits away from + so a thumb can't delete the line by accident */
.qtyform button[name="qty"] { margin-left: auto; }
/* − / + steppers: big enough for a thumb; the Update button is the no-JS fallback */
.qtyform .qtybtn {
  width: 44px; height: 44px; flex: none; text-decoration: none; padding: 0;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper);
  font: 600 17px var(--body); color: var(--ink); line-height: 1;
}
.qtyform .qtybtn:hover { border-color: var(--ink); color: var(--ink); }
.cartline__total { font: 600 14.5px var(--body); font-variant-numeric: tabular-nums; }
.carttotal {
  display: flex; justify-content: space-between; font: 600 19px var(--body);
  margin-top: 20px; padding-top: 4px; font-variant-numeric: tabular-nums;
}
/* delivery expectation under the cart total: no surprise fee at checkout */
.delnote { text-align: right; color: var(--soft); font-size: 13.5px; margin-top: 4px; }
.delnote--free { color: var(--good); font-weight: 600; }
.cartnotice { text-align: left; background: var(--tint); color: var(--ink); padding: 12px 16px; border-radius: 10px; margin: -8px 0 20px; }
.cartsum .buybtn { margin-top: 16px; }
.checkoutpage .cosec__sub { margin: -8px 0 0; font: 400 13.5px/1.4 var(--body); color: var(--soft); }
.checkoutpage .paydetail { flex-direction: column; justify-content: center; text-align: center; gap: 10px; padding: 18px 20px; }
.checkoutpage .paydetail p { max-width: 34ch; }
.checkoutpage .paydetail__art { width: 60px; height: 37px; }
.paysecured { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; font: 500 13px/1 var(--body); color: var(--soft); }
.paysecured .paytrust__lock { stroke: currentColor; stroke-width: 2.2; }
.paysecured .yocoword { font-size: 14px; color: var(--ink); }
.paytrust__lock { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--good, #146C43); stroke-width: 2.1; stroke-linecap: round; }
.cartsum__trust { font-size: 13px; color: var(--soft); text-align: center; margin: 10px 0 4px; }
.cartsum .backlink { display: block; text-align: center; margin-top: 8px; }
.cartempty { text-align: center; padding: 48px 0 16px; display: grid; gap: 18px; justify-items: center; }
.cartempty__icon { width: 56px; height: 56px; fill: none; stroke: var(--soft); stroke-width: 1.2; stroke-linejoin: round; }
.cartempty p { font-size: 17px; }
.checkoutgrid { display: grid; grid-template-columns: 1fr 280px; gap: clamp(20px, 4vw, 40px); align-items: start; }
.checkoutform { display: grid; gap: 14px; }
.addrrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .addrrow { grid-template-columns: 1fr; } }
.cosec { display: grid; gap: 14px; min-width: 0; }
.cosec ~ .cosec { padding-top: 24px; border-top: 1px solid var(--line); margin-top: 10px; }
.cosec__h { font: 700 19px/1.2 var(--display); letter-spacing: -0.01em; }
.placeorder { display: grid; gap: 10px; margin-top: 12px; }
.placeorder .buybtn { min-height: 54px; font-size: 16px; }
.paynote { font-size: 13px; text-align: center; }
/* checkout trust: card marks, lock on the pay button, who you're buying from */
.cardmarks { display: inline-flex; gap: 5px; vertical-align: -3px; margin-left: 8px; }
.cardmark { display: inline-grid; place-items: center; width: 34px; height: 22px; border-radius: 4px; border: 1px solid var(--line); background: #fff; }
.cardmark--visa { font: italic 800 10.5px/1 Arial, sans-serif; letter-spacing: .02em; color: #1a1f71; }
.cardmark--mc { grid-auto-flow: column; }
.cardmark--mc i { width: 12px; height: 12px; border-radius: 50%; background: #eb001b; }
.cardmark--mc i + i { background: #f79e1b; margin-left: -5px; mix-blend-mode: multiply; }
.buybtn .lockicon { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: -3px; }
.sellerbox { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13px; color: var(--soft, var(--muted)); }
.sellerbox p { margin: 0; }
.sellerbox__h { color: var(--ink); font-size: 13.5px; }
.sellerbox__h strong { font-weight: 700; }
.sellerbox a { color: inherit; text-underline-offset: 2px; }
.sellerbox a:hover { color: var(--ink); }
.sellerbox__links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px !important; }
.sumitems { list-style: none; margin: 0 0 14px; padding: 0 0 14px; display: grid; gap: 14px; border-bottom: 1px solid var(--line); }
.sumitem { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.sumitem__thumb { position: relative; width: 52px; height: 52px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.sumitem__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.sumitem__qty {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 99px; background: var(--ink); color: #fff; text-align: center;
  font: 600 12px/22px var(--body); font-variant-numeric: tabular-nums;
}
.sumitem__name { line-height: 1.35; }
.sumitem__name small { display: block; color: var(--soft); font-size: 12.5px; }
.sumitem__amt { font-variant-numeric: tabular-nums; }
.sumline { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 4px 0; color: color-mix(in srgb, var(--ink) 80%, #fff); font-variant-numeric: tabular-nums; }
.sumline--total { font: 600 16px var(--body); color: var(--ink); border-top: 1px solid var(--line); margin-top: 10px; padding-top: 12px; font-variant-numeric: tabular-nums; }
.formerror { background: #FDE0D8; color: var(--bad); padding: 11px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.sumline--discount { color: var(--good); }
.discountform { display: flex; gap: 8px; }
.discountform input {
  flex: 1; min-width: 0; font: 400 14px var(--body); padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--paper); color: var(--ink);
}
.discountform input[aria-invalid="true"] { border-color: var(--bad); }
.discountform button {
  background: none; border: 1.5px solid var(--ink); border-radius: 8px; min-height: 44px;
  font: 600 13.5px var(--body); padding: 0 16px; cursor: pointer; color: var(--ink);
}
.discountform button:hover { background: var(--ink); color: #fff; }
.discounterr { color: var(--bad); font-size: 13px; margin-top: 8px; }
/* gift cards: the applied card under the code box, the "covers it all" note,
   and the shopper's balance check page */
.giftchip { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; font-size: 13.5px; color: var(--good); }
.giftchip a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; padding: 0 2px; }
.giftchip a:hover { color: var(--ink); }
.giftcovers { font-size: 14px; color: var(--good); font-weight: 600; margin: 0 0 12px; }
.giftbal { margin-top: 18px; }
.giftbal__amount { font: 600 32px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; margin: 4px 0 6px; }

/* status, track, pay link, test pay: a card with the receipt on it */
.statuspage { max-width: 640px; }
.statuscard {
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 5vw, 44px); text-align: center;
  display: grid; gap: 14px; justify-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .05);
}
.statuscard > h1, .statuscard > h2 { font: 700 clamp(24px, 3.2vw, 32px)/1.15 var(--display); letter-spacing: -0.015em; margin: 0; }
.statuscard__lead { font-size: 17px; max-width: 42ch; }
.statuscard .mono { white-space: nowrap; }
.statuscard > .muted { max-width: 48ch; }
.statuscard--form { text-align: left; justify-items: stretch; }
.statuscard--form .checkoutform { gap: 16px; }
.statuscard .formerror { margin: 0; justify-self: stretch; }
.statuscard__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.statuscard__actions--stack { flex-direction: column; align-items: stretch; width: 100%; max-width: 380px; }
.statuspage > .backlink { display: block; width: fit-content; margin: 20px auto 0; }
.receipt {
  width: 100%; max-width: 420px; margin: 6px 0; padding: 4px 18px; text-align: left;
  background: var(--tint); border-radius: 12px;
}
.receipt > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--line-strong); }
.receipt > div:last-child { border-bottom: 0; }
.receipt dt { color: var(--soft); font-size: 14px; }
.receipt dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.paylines { width: 100%; max-width: 420px; text-align: left; margin: 4px 0 6px; }
.statuscard form { width: 100%; max-width: 420px; }
.tracksteps { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; max-width: 460px; }
.tracksteps li { position: relative; display: grid; justify-items: center; gap: 8px; font-size: 13px; line-height: 1.3; color: var(--soft); text-align: center; padding: 0 4px; }
.tracksteps li::before { content: ""; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--line-strong); }
.tracksteps li:first-child::before { content: none; }
.tracksteps__dot { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); }
.tracksteps li.is-done { color: var(--ink); }
.tracksteps li.is-done::before { background: var(--good); }
.tracksteps .is-done .tracksteps__dot { background: var(--good); border-color: var(--good); }
.tracksteps li.is-now { font-weight: 600; }
.tracksteps .is-now .tracksteps__dot { box-shadow: 0 0 0 4px #DDF4E6; }
.trackcourier { width: 100%; max-width: 420px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; text-align: left; display: grid; gap: 4px; }
.bigmark {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  font: 700 30px/1 var(--display); color: #fff; margin: 0 auto;
}
.bigmark--good { background: #177A4A; }
.bigmark--bad { background: #B0431F; }
.bigmark--wait { background: var(--tint); color: var(--ink); border: 1px solid var(--line); }
.testbanner {
  background: #FFEBC2; color: #7A4B00; border: 1px dashed #E0BC77;
  font: 600 12.5px var(--body); letter-spacing: .02em;
  padding: 7px 16px; border-radius: 99px; display: inline-block;
}
.testpayform { display: grid; gap: 10px; max-width: 360px; margin: 8px auto; }
.btn--ghost {
  background: transparent; color: var(--ink); border: 1.5px solid var(--line);
  border-radius: 99px; padding: 12px 24px; font: 600 14.5px var(--body); cursor: pointer;
}
.sf .btn--ghost, .statuscard .btn--ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 10px 22px; text-decoration: none; border-radius: var(--r-btn);
}
.sf .btn--ghost { border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }

/* footer */
.shopfoot { margin-top: auto; background: var(--tint); border-top: 1px solid var(--line); }
.shopfoot__in {
  max-width: var(--maxw); margin: 0 auto; padding: 40px var(--gutter) 28px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px;
}
.shopfoot__about { display: grid; gap: 8px; justify-items: start; align-content: start; max-width: 440px; }
.shopfoot__name { font: 700 18px/1.2 var(--display); }
.shopfoot__addr, .shopfoot__mail { color: var(--soft); font-size: 14px; text-decoration: none; }
.shopfoot__addr span { white-space: nowrap; }
.shopfoot__addr:hover, .shopfoot__mail:hover { color: var(--ink); text-decoration: underline; }
.shopfoot__about .wabtn { margin-top: 6px; }
.shopfoot__legal { display: grid; gap: 10px; align-content: start; }
.shopfoot__legal a { color: var(--soft); font-size: 14px; text-decoration: none; }
.shopfoot__legal a:hover { color: var(--ink); text-decoration: underline; }
.shopfoot__base {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter));
  margin: 0 auto; padding: 16px 0 20px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  color: var(--soft); font-size: 13px; border-top: 1px solid var(--line);
}
/* the floating WhatsApp button must never sit on the credit line */
.has-wa .shopfoot__base { padding-right: 76px; }
.shopfoot__credit { font-size: 12px; line-height: 1; white-space: nowrap; }
/* inherits the footer's own text colour, so it reads on any footer, light or dark */
.shopfoot__credit a { display: inline-flex; align-items: center; gap: .4em; color: inherit; opacity: .8; text-decoration: none; }
.shopfoot__credit a:hover, .shopfoot__credit a:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
.shopfoot__credit svg { height: 1.1em; width: auto; fill: currentColor; flex: none; }
.wabtn {
  display: inline-flex; align-items: center; min-height: 44px;
  background: #117A43; color: #fff; text-decoration: none; font-weight: 600;
  padding: 10px 20px; border-radius: var(--r-btn); font-size: 14.5px;
}
.wabtn:hover { background: #0C6636; color: #fff; }

/* floating WhatsApp button: one tap from anywhere, made for phone shoppers */
.wafloat {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #179C4F; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .12s ease, background .12s ease;
}
.wafloat svg { width: 30px; height: 30px; fill: #fff; }
.wafloat:hover { background: #117A43; transform: scale(1.05); }
/* stands down while the footer (which has its own WhatsApp link) is on screen */
.wafloat { transition: transform .18s ease, opacity .18s ease, background .12s ease; }
.wafloat--away { opacity: 0; transform: scale(.8); pointer-events: none; }

/* sticky mobile buy-bar: the CTA is below the fold on phones for any long
   description; the bar appears only once the real add-form scrolls out of
   view (JS-toggled), and only on phone widths. */
.buybar { display: none; }
@media (max-width: 768px) {
  .buybar.buybar--on {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    align-items: center; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
  }
  .buybar__info { min-width: 0; flex: 1; display: grid; gap: 1px; }
  .buybar__name {
    font: 500 13px var(--body); color: var(--soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .buybar__price { font: 700 15px var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
  .buybar__btn { flex-shrink: 0; margin: 0; }
  /* the WhatsApp float must not sit on top of the bar's button */
  body.has-buybar .wafloat { bottom: 92px; }
  /* while the real Add to cart form is on screen the float would sit on its
     button (390px, 2026-09-13 integration check); the page has its own
     WhatsApp line in the trust list, so the float steps aside until the bar */
  body.buyform-in-view .wafloat { opacity: 0; transform: scale(.8); pointer-events: none; }
}

/* policy pages: merchant-written plain text, kept readable */
.policypage { max-width: 780px; }
.policypage__shop { color: var(--soft); font-size: 14px; margin-bottom: 4px; }
.policybody {
  white-space: pre-wrap; line-height: 1.75; font-size: 16px; color: var(--ink);
  max-width: 68ch;
}
.policynav { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.policynav a { font-size: 14px; font-weight: 600; }

/* stand-alone pages: suspended shop, missing shop, 404 */
.solo { background: var(--tint); display: grid; place-items: center; padding: 24px 16px; }
.solo--platform {
  /* Storeforge brand (forge green, deep green, ink): only the platform's own pages */
  --accent: #0B6E4F; --accent-dark: #07533B; --ink: #101A15; --soft: #4A5852; --line: #E1E5E1;
  --brand-strong: #0B6E4F; --accent-text: #0B6E4F; --on-accent: #fff; --tint: #F4F5F3;
  --display: "Bricolage Grotesque", "Segoe UI", sans-serif; --body: "Public Sans", "Segoe UI", sans-serif;
}
.solo__card {
  width: 100%; max-width: 480px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 20px; padding: clamp(28px, 6vw, 48px); text-align: center;
  display: grid; gap: 14px; justify-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 16px 40px rgba(0, 0, 0, .06);
}
.solo__card h1 { font: 700 clamp(24px, 4vw, 30px)/1.15 var(--display); letter-spacing: -0.015em; }
.solo__card p { color: var(--soft); max-width: 40ch; }
.solo__card .buybtn { margin-top: 4px; }
.solo__mark { width: 56px; height: 56px; font-size: 26px; border-radius: 14px; }
.solo__logo { max-height: 56px; max-width: 200px; }
.solo__sflogo { display: block; height: 30px; width: auto; margin: 0 auto 8px; }
.solo--platform .buybtn { background: var(--accent); color: #fff; }
.solo--platform .buybtn:hover { background: var(--accent-dark); }
.solo__code { font: 700 60px/1 var(--display); letter-spacing: -0.02em; color: var(--accent); }
.solo__search { width: 100%; max-width: 340px; display: grid; gap: 10px; text-align: left; }
.solo__search input { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--paper); }

/* payment options at checkout (only shown when the shop sells on account) */
.payopts { border: 0; padding: 0; margin: 4px 0 4px; min-width: 0; }
.payopts legend {
  padding: 0; font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 10px;
}
/* A floated legend renders INSIDE the fieldset box. Without it, a theme that
   turns .payopts into a card (Monument) gets the legend straddling the card's
   top edge. No visual change on the default theme (border 0, padding 0). */
.payopts > legend { float: left; width: 100%; }
.payopts > legend + * { clear: both; }
.payopts__note { font-size: 13px; margin-top: 2px; }
.payopt {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px;
  margin-bottom: 8px; transition: border-color .12s, background .12s;
}
.payopt:hover { border-color: var(--soft); }
.payopt input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand-strong); flex: none; }
.payopt strong { display: block; font-size: 15px; font-weight: 600; }
.payopt em { display: block; font-style: normal; font-size: 13px; color: var(--soft); margin-top: 1px; }
.payopt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
.payopt:has(input:focus-visible) { outline: 3px solid var(--brand-strong); outline-offset: 2px; }

/* "you may also like": the cross-sell row at the foot of a product page */
.alsolike { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 8px; }
.alsolike__h {
  font-size: 20px; margin: 0; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.alsolike__grid {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  padding: 20px 0 64px; max-width: none;
}

/* ── checkout + payment result pages (2026-09-13 redesign) ─────────────────
   Distraction-free and calm: a quiet header (store/_checkout_head.html), the
   form on white at left, the order summary on a tinted panel at right that
   runs to the page edge; on phones the summary folds into one bar at the top.
   Scoped to .checkoutpage / .cohead / .cofoot / .coresult so it renders the
   same inside a custom theme's base: the theme's tokens still re-point colours
   and faces, and these rules sit one class deeper than a theme's own
   .ordersummary / .payopt skin so the layout holds. */
.cohead, .checkoutpage, .coresult, .cofoot {
  --co-split: 52%;
  --co-pad: clamp(32px, 4vw, 64px);
  --co-rule: color-mix(in srgb, var(--ink) 10%, var(--line));
  --co-form: 600px;
  --co-side: 400px;
  --co-pick: color-mix(in srgb, var(--accent) 6%, var(--paper));
}
html:has(body.is-checkout) { scroll-padding-top: 16px; }

/* header */
.cohead { background: var(--paper); border-bottom: 1px solid var(--co-rule); color: var(--ink); }
.cohead__in {
  max-width: calc(600px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cohead--split .cohead__in { max-width: calc(var(--co-form) + var(--co-side) + 2 * var(--gutter) + 64px); }
.cohead__cell { display: flex; align-items: center; min-width: 0; }
.cohead__brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 0;
  color: var(--ink); text-decoration: none; border-radius: 8px;
}
.cohead__logo { display: block; max-height: 44px; max-width: 200px; width: auto; height: auto; }
.cohead__mark {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  background: var(--accent); color: var(--on-accent); border-radius: 9px; font: 800 16px/1 var(--display);
}
.cohead__name { font: 700 19px/1.15 var(--display); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cohead__secure { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--body); color: var(--soft); white-space: nowrap; }
.cohead__secure svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* page + grid */
.checkoutpage { flex: 1 0 auto; width: 100%; background: var(--paper); color: var(--ink); }
.checkoutpage .checkoutgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.checkoutpage .coside, .checkoutpage .coside__in { display: contents; }
.checkoutpage .sumtoggle { order: 1; }
.checkoutpage .ordersummary { order: 2; }
.checkoutpage .comain { order: 3; }
.checkoutpage .sellerbox { order: 4; }
.checkoutpage .cofoot { order: 5; }
.checkoutpage .comain, .checkoutpage .sellerbox, .checkoutpage .cofoot, .checkoutpage .ordersummary, .checkoutpage .sumtoggle {
  padding-inline: max(var(--gutter), calc((100% - var(--co-form)) / 2));
}
.checkoutpage .comain { padding-top: 20px; min-width: 0; }

/* breadcrumb */
.costeps ol {
  list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; align-items: center;
  font: 400 13.5px/1.2 var(--body); color: var(--soft);
}
.costeps li { display: flex; align-items: center; min-height: 44px; }
.costeps li + li::before {
  content: ""; width: 6px; height: 6px; margin: 0 12px 0 8px; opacity: .55;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.costeps a { color: var(--accent-text); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.costeps a:hover { text-decoration: underline; text-underline-offset: 3px; }
.costeps [aria-current] { color: var(--ink); font-weight: 600; }

/* form */
.checkoutpage .formerror { margin: 0 0 20px; }
.checkoutpage .checkoutform { display: grid; gap: 36px; }
.checkoutpage .cosec { display: grid; gap: 14px; min-width: 0; }
.checkoutpage .cosec ~ .cosec { padding-top: 0; margin-top: 0; border-top: 0; }
.checkoutpage .cosec__h { font: 600 20px/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.checkoutpage .payopts { margin: 4px 0 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
.checkoutpage .payopts > legend { font: 600 14px/1.35 var(--body); color: var(--ink); margin-bottom: 8px; }
.checkoutpage .payopts__note { margin-top: 8px; }

/* radio groups (delivery + payment): one bordered stack, selected row picked out */
.checkoutpage .optgroup {
  border: 1px solid var(--co-rule); border-radius: 10px; overflow: hidden; background: var(--paper);
}
.checkoutpage .optgroup > .payopt {
  display: flex; align-items: center; gap: 12px; margin: 0; min-height: 56px; padding: 14px 16px;
  border: 0; border-radius: 0; background: transparent; box-shadow: 0 1px 0 var(--co-rule);
  font-weight: 400; font-size: 14px; cursor: pointer; transition: background .15s ease;
}
.checkoutpage .optgroup > .payopt[hidden] { display: none; }
.checkoutpage .optgroup > .payopt:hover { background: color-mix(in srgb, var(--ink) 3%, var(--paper)); }
.checkoutpage .optgroup > .payopt:has(input:checked),
.checkoutpage .optgroup > .payopt--only {
  background: var(--co-pick); box-shadow: inset 0 0 0 1px var(--ink), 0 1px 0 var(--co-rule);
  border-radius: 10px 10px 0 0;
}
.checkoutpage .optgroup > .payopt:has(input:checked):not(:first-child) { border-radius: 0; }
.checkoutpage .optgroup > .payopt:has(input:focus-visible) { outline: 3px solid var(--brand-strong); outline-offset: -4px; }
.checkoutpage .optgroup > .payopt input { margin: 0; width: 18px; height: 18px; flex: none; accent-color: var(--brand-strong); }
.checkoutpage .payopt__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.checkoutpage .payopt__body strong { font: 500 15px/1.3 var(--body); color: var(--ink); }
.checkoutpage .payopt__body em { font: 400 13px/1.45 var(--body); font-style: normal; color: var(--soft); margin: 0; }
.checkoutpage .payopt__price { font: 600 14.5px/1.3 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.checkoutpage .payopt__icon { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.checkoutpage .payopt .cardmarks { margin-left: auto; vertical-align: 0; }
.checkoutpage .paydetail {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  background: var(--tint); box-shadow: 0 1px 0 var(--co-rule);
}
.checkoutpage .paydetail p { font: 400 13.5px/1.5 var(--body); color: var(--soft); margin: 0; }
.paydetail__art { width: 72px; height: 44px; flex: none; fill: none; stroke: var(--soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.paydetail__art circle { fill: var(--soft); stroke: none; }
/* each "you'll pay on their page" note shows under its own row, only while
   that row is picked (it used to key on card alone, so PayPal's note showed
   under card and vanished when PayPal was picked) */
.checkoutpage .payopt:not(.payopt--only):not(:has(input:checked)) + .paydetail { display: none; }
.testbadge {
  display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 99px;
  background: #FFEBC2; color: #7A4B00; font: 600 12px/1.3 var(--body);
}

/* place order */
.checkoutpage .placeorder { display: grid; gap: 12px; margin-top: -8px; }
.checkoutpage .placeorder .buybtn { width: 100%; min-height: 56px; margin: 0; font-size: 16.5px; }
.checkoutpage .paynote { font-size: 13px; text-align: center; margin: 0; }
.checkoutpage .paynote[hidden] { display: none; }

/* order summary */
.checkoutpage .ordersummary {
  position: static; top: auto; background: var(--tint); border: 0; border-radius: 0; box-shadow: none;
  padding-block: 22px; border-bottom: 1px solid var(--co-rule);
}
.checkoutpage .ordersummary h2 { font: 600 17px/1.3 var(--display); margin: 0 0 18px; color: var(--ink); }
.ordersummary__count { font: 400 14px var(--body); color: var(--soft); }
.checkoutpage .sumitems { list-style: none; margin: 0; padding: 0 0 18px; display: grid; gap: 16px; border-bottom: 1px solid var(--co-rule); }
.checkoutpage .sumitem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; font-size: 14.5px; }
.checkoutpage .sumitem__thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; background: var(--paper); border: 1px solid var(--co-rule); }
.checkoutpage .sumitem__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }
.checkoutpage .sumitem__qty { background: color-mix(in srgb, var(--ink) 72%, var(--paper)); }
.checkoutpage .sumitem__amt { font-weight: 500; }
.checkoutpage .discountwrap { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--co-rule); }
.checkoutpage .discountwrap summary { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: 14px; list-style: none; }
.checkoutpage .discountwrap summary::-webkit-details-marker { display: none; }
.checkoutpage .discountwrap summary::after {
  content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid var(--soft); border-bottom: 1.5px solid var(--soft);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.checkoutpage .discountwrap[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.checkoutpage .discountwrap[open] summary { margin-bottom: 4px; }
.checkoutpage .discountwrap[open] { padding-bottom: 16px; }
.checkoutpage .sumlines { padding-top: 14px; }
.checkoutpage .sumline { padding: 5px 0; font-size: 14px; }
.checkoutpage .sumline--total { font: 600 18px/1.3 var(--body); color: var(--ink); border-top: 0; margin-top: 6px; padding-top: 8px; }
.checkoutpage .sumline--total span:last-child { font-size: 20px; }

/* phone summary bar */
.checkoutpage .sumtoggle { display: none; }
.cofold .sumtoggle {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 56px; margin: 0;
  background: var(--tint); border: 0; border-bottom: 1px solid var(--co-rule); cursor: pointer;
  font: 500 14.5px var(--body); color: var(--accent-text); text-align: left;
}
.cofold .sumtoggle:focus-visible { outline-offset: -3px; }
.sumtoggle__bag { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.sumtoggle__chev { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .15s ease; }
.sumtoggle[aria-expanded="true"] .sumtoggle__chev { transform: rotate(180deg); }
.sumtoggle__total { margin-left: auto; font: 600 16.5px var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.cofold .ordersummary { display: none; }
.cofold .ordersummary.is-open { display: block; }
.cofold .ordersummary h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* seller + footer */
/* phones: the policy links sit in the footer straight below, so not twice */
@media (max-width: 999px) { .checkoutpage .sellerbox__links { display: none; } }
.checkoutpage .sellerbox { margin-top: 32px; padding-top: 20px; padding-bottom: 4px; border-top: 1px solid var(--co-rule); gap: 5px; }
.cofoot { color: var(--soft); }
.cofoot__in {
  max-width: calc(600px + 2 * var(--gutter)); margin: 0 auto; padding: 10px var(--gutter) 18px;
  display: flex; flex-wrap: wrap; gap: 0 22px;
  /* a rule the width of the content, not of the padded box */
  background: linear-gradient(var(--co-rule), var(--co-rule)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.cofoot a { display: inline-flex; align-items: center; min-height: 44px; font: 400 13px var(--body); color: var(--accent-text); text-decoration: none; }
.cofoot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.checkoutpage .cofoot__in { max-width: none; margin: 16px 0 0; padding-inline: 0; background-size: 100% 1px; }
.coresult ~ .cofoot, .shopbody:has(.coresult) + .cofoot { background: var(--tint); }

/* desktop: two panes, the summary panel tinted to the page edge */
@media (min-width: 1000px) {
  .checkoutpage, .cohead--split {
    background:
      linear-gradient(var(--co-rule), var(--co-rule)) var(--co-split) 0 / 1px 100% no-repeat,
      linear-gradient(90deg, var(--paper) var(--co-split), var(--tint) var(--co-split));
  }
  .cohead--split { border-bottom: 0; }
  .cohead--split .cohead__in { display: grid; grid-template-columns: var(--co-split) minmax(0, 1fr); max-width: none; padding: 0; min-height: 0; }
  .cohead--split .cohead__cell { padding: 28px var(--co-pad) 0 var(--gutter); justify-self: end; width: 100%; max-width: calc(var(--co-form) + var(--co-pad) + var(--gutter)); }
  .cohead--split .cohead__cell--side { justify-self: start; justify-content: flex-end; padding: 28px var(--gutter) 0 var(--co-pad); max-width: calc(var(--co-side) + var(--co-pad) + var(--gutter)); }
  .checkoutpage .checkoutgrid { grid-template-columns: var(--co-split) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .checkoutpage .coside { display: block; grid-column: 2; grid-row: 1 / span 2; align-self: stretch; padding: 24px var(--gutter) 56px var(--co-pad); }
  .checkoutpage .coside__in { display: block; max-width: var(--co-side); position: sticky; top: 24px; }
  .checkoutpage .comain, .checkoutpage .cofoot { grid-column: 1; justify-self: end; width: 100%; max-width: calc(var(--co-form) + var(--co-pad) + var(--gutter)); padding: 0 var(--co-pad) 0 var(--gutter); }
  .checkoutpage .comain { grid-row: 1; padding-top: 12px; }
  .checkoutpage .cofoot { grid-row: 2; align-self: start; padding-bottom: 12px; }
  .checkoutpage .ordersummary, .checkoutpage .sellerbox { padding-inline: 0; }
  .checkoutpage .ordersummary { background: none; border-bottom: 0; padding-block: 0; }
  .checkoutpage .sellerbox { margin-top: 28px; }
  .cofold .sumtoggle { display: none; }
  .cofold .ordersummary { display: block; }
  .cofold .ordersummary h2 { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}
@media (min-width: 1000px) and (max-height: 720px) {
  .checkoutpage .coside__in { position: static; }
}

/* payment result pages: paid, placed, not completed */
.coresult { flex: 1 0 auto; width: 100%; background: var(--tint); color: var(--ink); padding: clamp(28px, 5vw, 52px) var(--gutter) 48px; }
.coresult__in { max-width: 600px; margin: 0 auto; display: grid; gap: 14px; }
.coresult__head { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.resultmark { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 50%; border: 2px solid currentColor; }
.resultmark svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.resultmark--good { color: var(--good); }
.resultmark--stop { color: var(--bad); }
.coresult__ref { font: 400 13.5px/1.3 var(--body); color: var(--soft); margin: 0 0 2px; }
.coresult__ref .mono { color: var(--ink); }
.coresult h1 { font: 700 clamp(24px, 3.4vw, 30px)/1.15 var(--display); letter-spacing: -0.015em; margin: 0; }
.coresult .coresult__card {
  text-align: left; justify-items: stretch; gap: 10px; padding: 22px 24px;
  background: var(--paper); border: 1px solid var(--co-rule); border-radius: 12px; box-shadow: none;
}
.coresult .coresult__h { font: 600 17px/1.3 var(--body); letter-spacing: 0; margin: 0; color: var(--ink); }
.coresult .coresult__card > .muted { max-width: none; margin: 0; font-size: 14.5px; }
.coresult .receipt { max-width: none; margin: 6px 0 0; }
.coresult .statuscard__actions { justify-content: flex-start; margin-top: 4px; }
.coresult .statuscard__actions--stack { max-width: none; }
.coresult .statuscard__actions .buybtn { min-height: 52px; }
.coresult__actions { margin-top: 4px; }
.nextsteps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.nextsteps li::marker { color: var(--soft); }
.coresult__back { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; }
@media (max-width: 480px) {
  .coresult .statuscard__actions { flex-direction: column; align-items: stretch; }
  .coresult .coresult__card { padding: 18px; }
  .cohead__secure { font-size: 12.5px; }
}

/* ── 3. default theme (.sf) ────────────────────────────────────────────── */

/* the catalogue shelf */
.shelf { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: clamp(28px, 4vw, 48px) var(--gutter) 0; }
.shelf__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
}
.shelf__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.shelf__title h1, .shelf__title h2 { font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--display); letter-spacing: -0.01em; }
.shelf__count { color: var(--soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.sf .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 20px;
  padding: 28px 0 64px; max-width: none; margin: 0;
}
.sf .card { display: flex; flex-direction: column; gap: 12px; border-radius: var(--r-card); }
.sf .card:focus-visible { outline: none; }
.sf .card:focus-visible .card__imgwrap { outline: 3px solid var(--brand-strong); outline-offset: 3px; }
.sf .card__imgwrap { border-radius: var(--r-card); margin: 0; }
.sf .card__imgwrap img { transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
.sf .card:hover .card__imgwrap img { transform: scale(1.035); }
.sf .card[data-soldout] .card__imgwrap img { opacity: .55; filter: grayscale(.35); }
.sf .card__body { gap: 4px; }
.sf .card__body h2 {
  font: 500 15px/1.4 var(--body); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sf .card:hover .card__body h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sf .card__price { font: 600 15px var(--body); color: var(--ink); }
.sf .card__price--sale { color: var(--accent-text); }
.sf .card__price .wasprice { color: var(--soft); font-weight: 400; }
.sf .salebadge, .sf .soldout { top: 12px; left: 12px; font: 600 12px/1 var(--body); letter-spacing: 0; padding: 7px 11px; }
.sf .soldout { box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.sf .soldout--inline { box-shadow: none; margin: 0 0 14px; font-size: 13px; padding: 7px 12px; }
.sf .card__noimg { font-size: 48px; }
.sf .shopempty { padding: 56px 16px; background: var(--tint); border-radius: var(--r-card); font-size: 16px; }

/* product page */
.sf .productpage {
  max-width: var(--maxw); padding: clamp(20px, 3vw, 40px) var(--gutter) 64px;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: start;
}
.sf .productpage__img { position: sticky; top: calc(var(--head-h) + 52px); }
.gallery__main { aspect-ratio: 1 / 1; background: var(--tint); border-radius: var(--r-card); overflow: hidden; }
.sf.imgstyle-portrait .gallery__main { aspect-ratio: 4 / 5; }
.sf .gallery__main img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; display: block; }
.sf .gallery__main .card__noimg--big { aspect-ratio: auto; border-radius: 0; font-size: 96px; }
.sf .thumbs { flex-wrap: nowrap; overflow-x: auto; gap: 10px; margin-top: 12px; padding: 4px; scrollbar-width: none; }
.sf .thumbs::-webkit-scrollbar { display: none; }
.sf .thumbs__item {
  flex: none; width: 76px; height: 76px; border: 0; border-radius: 10px;
  background: var(--tint); opacity: .72; transition: opacity .15s ease;
}
.sf .thumbs__item:hover { opacity: 1; }
.sf .thumbs__item--on { opacity: 1; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.sf .thumbs__item img { border-radius: 0; }
.sf .productpage__info { max-width: 540px; padding-top: 2px; }
.sf .productpage__info h1 { font: 700 clamp(28px, 3.3vw, 42px)/1.08 var(--display); letter-spacing: -0.02em; margin-top: 14px; }
.pricerow { margin-top: 14px; }
.sf .pricetag--big { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 600 23px/1.3 var(--body); margin: 0; }
.sf .pricetag--big .wasprice { margin: 0; font-size: 17px; }
.sf .pricetag--big .savebadge { margin: 0; }
.buybox { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.sf .addform { max-width: none; margin: 0; gap: 22px; }
.variantpick--chips legend { font: 600 14px var(--body); color: var(--ink); margin: 0 0 10px; padding: 0; }
.variantpick__list { display: flex; flex-wrap: wrap; gap: 8px; }
.sf .addform .variantpick--chips .variantpick__opt {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper);
  color: var(--ink); font: 500 14.5px/1.25 var(--body); box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sf .variantpick--chips .variantpick__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sf .variantpick--chips .variantpick__opt:hover { border-color: var(--ink); }
.sf .variantpick--chips .variantpick__opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sf .variantpick--chips .variantpick__opt:has(input:focus-visible) { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.variantpick__text { display: grid; gap: 1px; }
.sf .variantpick--chips .variantpick__price { margin: 0; font-size: 12.5px; color: var(--soft); }
.sf .variantpick--chips .variantpick__swatch { width: 34px; height: 34px; border-radius: 7px; margin-left: -6px; }
.sf .addform .variantpick--chips .variantpick__opt--out { opacity: 1; cursor: not-allowed; color: var(--soft); border-style: dashed; background: var(--tint); }
.sf .variantpick--chips .variantpick__opt--out:hover { border-color: var(--line-strong); }
.sf .variantpick--chips .variantpick__opt--out .variantpick__name { text-decoration: line-through; }
.sf .variantpick--chips .variantpick__out { font: 600 11.5px var(--body); text-transform: none; color: var(--soft); }
.buyrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.buyrow .buybtn { flex: 1 1 200px; width: auto; min-height: 52px; margin: 0; font-size: 16px; }
.qtyfield { display: grid; gap: 8px; }
.sf .addform .qtyfield .field__label { display: block; font: 600 14px var(--body); color: var(--ink); }
.stepper {
  display: inline-flex; align-items: stretch; height: 52px; background: var(--paper);
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); overflow: hidden;
}
.stepper:focus-within { border-color: var(--ink); }
.stepper__btn { width: 46px; border: 0; background: none; cursor: pointer; color: var(--ink); font: 400 21px/1 var(--body); }
.stepper__btn:hover { background: var(--tint); }
.stepper__btn:focus-visible { outline-offset: -3px; }
.sf .addform .stepper input {
  width: 40px; padding: 0; border: 0; border-radius: 0; background: none; text-align: center;
  font: 600 16px var(--body); color: var(--ink); -moz-appearance: textfield; appearance: textfield;
}
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sf .addform .stepper input:focus { outline: none; }
.sf .notifyform .field input { width: 100%; }
.sf .stocknote { font-size: 13.5px; margin-top: 12px; }
.sf .trustrow {
  display: grid; gap: 9px; margin: 22px 0 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.sf .trustrow li { font-size: 14px; color: var(--ink); padding: 0 0 0 28px; line-height: 1.45; }
.sf .trustrow li::before {
  content: ""; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6l4.4-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.sf .trustrow a { color: var(--ink); }
.sf .productpage__desc { margin: 28px 0 0; font-size: 15.5px; line-height: 1.7; }

/* reviews */
.sf .reviews { max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter) 56px; }
.reviews__in {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(28px, 5vw, 80px);
  padding-top: 44px; border-top: 1px solid var(--line); align-items: start;
}
.sf .reviews h2 { font: 700 24px/1.2 var(--display); letter-spacing: -0.01em; margin: 0 0 8px; }
.sf .reviews__avg { display: grid; gap: 2px; margin: 0 0 20px; font-size: 14px; }
.sf .reviews__avg .reviews__stars { font-size: 22px; letter-spacing: 2px; }
.reviews__side > .muted { margin-bottom: 18px; }
.reviewwrite > summary { list-style: none; }
.reviewwrite > summary::-webkit-details-marker { display: none; }
.reviewwrite[open] > summary { margin-bottom: 20px; }
.sf .reviews__list { margin: 0; gap: 0; }
.sf .reviews__item { padding: 20px 0; }
.sf .reviews__item:first-child { border-top: 0; padding-top: 0; }
.sf .reviews__item strong { margin: 6px 0 4px; font-size: 15px; }
.sf .reviews__item p { font-size: 15px; line-height: 1.6; max-width: 65ch; }
.sf .reviewform { gap: 16px; max-width: 460px; margin: 0; }
.sf .reviewform .field { font-size: 14px; color: var(--ink); font-weight: 400; }
.sf .reviewform .field input, .sf .reviewform .field textarea { padding: 11px 14px; border: 1px solid var(--line-strong); font: 400 16px/1.4 var(--body); }
.sf .reviewform .buybtn { justify-self: start; }
.sf .reviewform .stocknote { margin: 0; }
.starpick { display: block; }
.starpick legend { font: 600 14px var(--body); color: var(--ink); padding: 0 0 4px; }
.starpick__stars { display: inline-flex; flex-direction: row-reverse; gap: 0; }
.starpick__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sf .reviewform .starpick__stars label {
  display: block; padding: 2px 3px; font-size: 32px; line-height: 1; cursor: pointer;
  color: var(--line-strong); border-radius: 6px; transition: color .1s ease;
}
.sf .reviewform .starpick__stars input:checked ~ label,
.sf .reviewform .starpick__stars label:hover,
.sf .reviewform .starpick__stars label:hover ~ label { color: #C98A12; }
.sf .reviewform .starpick__stars input:focus-visible + label { outline: 3px solid var(--brand-strong); outline-offset: 0; }

/* also like */
.sf .alsolike { max-width: var(--maxw); width: 100%; padding: 0 var(--gutter); }
.sf .alsolike__h { font: 700 24px/1.2 var(--display); letter-spacing: -0.01em; padding-top: 44px; }
.sf .alsolike__grid { padding: 24px 0 64px; }

/* cart */
.sf .narrow { max-width: 1120px; }
.sf .narrow > h1 { font: 700 clamp(30px, 3.6vw, 44px)/1.08 var(--display); letter-spacing: -0.02em; margin-bottom: 28px; }
.sf .statuspage { max-width: 640px; }
.sf .statuspage.trackpage > h1 { text-align: center; }
.sf .policypage { max-width: 780px; }
.cartgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.sf .cartgrid { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(28px, 4vw, 56px); }
.sf .cartline {
  grid-template-columns: 100px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 20px; row-gap: 10px; align-items: start; padding: 22px 0;
}
.sf .cartline__thumb { grid-row: 1 / span 2; }
.sf .cartline img, .sf .cartline .thumbless { width: 100px; height: 100px; border-radius: 12px; }
.sf .cartline__info { gap: 3px; padding-top: 2px; }
.sf .cartline__info strong { font: 600 16px/1.35 var(--body); }
.sf .cartline__total { grid-column: 3; grid-row: 1; font: 600 16px var(--body); padding-top: 2px; text-align: right; }
.sf .qtyform { grid-column: 2 / span 2; grid-row: 2; gap: 0; align-self: end; }
.sf .qtyform .qtybtn { width: 42px; height: 42px; border: 1px solid var(--line-strong); font-weight: 400; font-size: 20px; }
.sf .qtyform .qtybtn[data-step="-1"] { border-radius: var(--r-btn) 0 0 var(--r-btn); border-right: 0; }
.sf .qtyform .qtybtn[data-step="1"] { border-radius: 0 var(--r-btn) var(--r-btn) 0; border-left: 0; }
.sf .qtyform input {
  width: 44px; height: 42px; border: 1px solid var(--line-strong); border-left: 0; border-right: 0; border-radius: 0;
  font: 600 15px var(--body); -moz-appearance: textfield; appearance: textfield; padding: 0;
}
.sf .qtyform input::-webkit-inner-spin-button, .sf .qtyform input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sf .qtyform .qtybtn:hover { background: var(--tint); }
.sf .qtyform__remove { font-weight: 500; color: var(--soft); }
.cartsum { display: grid; }
.sf .cartsum {
  position: sticky; top: calc(var(--head-h) + 52px); padding: 24px;
  background: var(--tint); border: 1px solid var(--line); border-radius: 16px;
}
.sf .carttotal { margin: 0; padding: 0; font: 600 18px var(--body); }
.sf .cartsum .delnote { text-align: left; margin-top: 6px; }
.sf .cartsum .buybtn { min-height: 54px; font-size: 16px; }

/* ── responsive ── */
@media (max-width: 1080px) {
  .sf .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  :root { --head-h: 60px; }
  .shopnav, .headsearch { display: none; }
  .shopmenu { display: block; }
  .shophead__in { gap: 8px; }
  .shopbrand__name { font-size: 18px; }
  .shopintro { grid-template-columns: 1fr; align-items: start; }
  .sf .cartgrid { grid-template-columns: 1fr; }
  .sf .cartsum { position: static; }
}
@media (min-width: 901px) {
  .shoptools--navdup { display: none; }
}
@media (max-width: 760px) {
  .productpage { grid-template-columns: 1fr; }
  .sf .productpage { grid-template-columns: 1fr; gap: 20px; padding-top: 12px; }
  .sf .productpage__img { position: static; margin: 0 calc(-1 * var(--gutter)); }
  .sf .gallery__main { border-radius: 0; }
  .sf .thumbs { padding: 4px var(--gutter); }
  .sf .productpage__info h1 { margin-top: 10px; }
  .cartline { grid-template-columns: 56px 1fr; grid-auto-rows: auto; }
  .qtyform { grid-column: 1 / -1; }
  .cartline__total { grid-column: 2; text-align: right; }
  .reviews__in { grid-template-columns: 1fr; }
  /* 16px inputs stop iOS zooming the whole page on focus */
  input, select, textarea { font-size: 16px !important; }
}
@media (max-width: 700px) {
  .herobanner img { aspect-ratio: 4 / 3; }
  .sf .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; padding-top: 20px; }
  .sf .alsolike__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf .card { gap: 10px; }
  .sf .card__body h2 { font-size: 14px; }
  .sf .card__price { font-size: 14px; }
  .sf .salebadge, .sf .soldout { top: 8px; left: 8px; padding: 6px 9px; font-size: 11.5px; }
  .sf .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); scrollbar-width: none; }
  .sf .chips::-webkit-scrollbar { display: none; }
  .shelf__head { align-items: flex-end; }
  .sf .cartline { grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: 14px; padding: 18px 0; }
  .sf .cartline img, .sf .cartline .thumbless { width: 76px; height: 76px; }
  .sf .cartline__info strong, .sf .cartline__total { font-size: 15px; }
  .sf .cartline__thumb { grid-row: 1 / span 2; }
  .sf .qtyform { grid-column: 2 / span 2; }
  .sf .cartline__total { grid-column: 3; text-align: right; }
  .shopfoot__in { flex-direction: column; padding-top: 32px; }
  .has-wa .shopfoot__base { padding-right: 0; padding-bottom: 84px; }
  .wafloat { right: 14px; bottom: 14px; }
  .announce { font-size: 12px; padding: 6px 12px; }
}
@media (max-width: 480px) {
  .cartlink__label { display: none; }
  .cartlink { padding: 0 12px; }
  .shopbrand__mark { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
  .shopbrand__name { font-size: 17px; }
  .buyrow .qtyfield { flex: none; }
}
/* Phones: a long shop name wraps to two lines (and steps down a size) instead of
   ending in "..." mid-word. The header keeps its fixed height. */
@media (max-width: 600px) {
  .shopbrand__name {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
    font-size: 16px; line-height: 1.12; min-width: 0;
  }
}
@media (max-width: 360px) {
  .shopbrand { gap: 8px; }
  .shopbrand__name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .sf .card:hover .card__imgwrap img { transform: none; }
}

/* ── payment trust (2026-09-13): method marks, "secured by", facts panel ── */
.cardmarks { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0; }
.cardmarks .pm { display: block; height: 24px; width: auto; }
.cardmarks .pm--visa, .cardmarks .pm--mc, .cardmarks .pm--amex { width: 38px; }
.cardmarks .pm--apple { width: 50px; }
.cardmarks .pm--google { width: 54px; }
.yocoword {
  display: inline-block; font: 900 13.5px/1 "Arial Black", Arial, sans-serif; letter-spacing: .02em;
  color: #009BDE; vertical-align: -1px;
}
.paytrust {
  display: grid; gap: 12px; margin-top: 6px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
}
.paytrust__head { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 13.5px/1.2 var(--body); color: var(--ink); }
.paytrust__lock { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--good, #146C43); stroke-width: 2.1; stroke-linecap: round; }
.paytrust > .cardmarks { justify-content: center; }
.paytrust__list { list-style: none; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.paytrust__list li { display: flex; gap: 10px; align-items: flex-start; font: 400 13px/1.45 var(--body); color: var(--soft); }
.paytrust__list svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.paytrust__list a { color: var(--ink); text-underline-offset: 2px; }
.cartsum__trust { display: grid; justify-items: center; gap: 8px; margin: 12px 0 4px; }
.cartsum__trust p { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 13px/1.2 var(--body); color: var(--soft); }
.cartsum__trust .cardmarks { justify-content: center; }
.statuspage .paysecured { margin-top: 14px; }

/* collection breadcrumb (product page + collection page) — appended once at
   the end of the file so it wins regardless of anything earlier. */
.pcrumb {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(14px, 2.4vw, 22px) var(--gutter) 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font: 400 13px/1.3 var(--body); color: var(--soft);
}
.pcrumb a { color: var(--soft); text-underline-offset: 2px; }
.pcrumb a:hover { color: var(--ink); }
.pcrumb span[aria-current] { color: var(--ink); }
.pcrumb__desc { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); color: var(--soft); font: 400 15px/1.5 var(--body); }
/* ── named option chips (Colour, Size, ...): progressive enhancement over
   the plain variant combo list, which stays underneath as the real fallback
   and no-JS path. Only rendered when a product's variants split cleanly
   into named parts — see app/product_options.py. */
.optionpicker { display: grid; gap: 14px; margin: 4px 0 14px; }
.optiongroup { border: none; padding: 0; margin: 0; }
.optiongroup legend { font-weight: 600; font-size: 13px; color: var(--soft); margin-bottom: 8px; padding: 0; }
.optiongroup__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.optionchip {
  font: 500 13.5px var(--body); padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  cursor: pointer; line-height: 1.2;
}
.optionchip:hover { border-color: var(--ink); }
.optionchip--on { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.optionchip--out { color: var(--soft); border-style: dashed; background: var(--tint); text-decoration: line-through; cursor: not-allowed; }
.optionchip:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
/* The full combo list stays functional (and is the ONLY picker with no JS),
   just visually secondary once the chips above are doing the choosing. */
.variantpick--legacy legend { font-size: 12px; }
.variantpick--legacy .variantpick__opt { padding: 8px 10px; font-size: 13px; }
/* ── shopper flow polish (2026-10-09) ─────────────────────────────────────
   Appended last on purpose: lines ~540-1307 of this file appear twice, so a
   rule edited in the first copy is silently overridden by the second. */

/* "Added to your cart" panel (store.js, data-sf-ajax-add). A small popover
   under the header on desktop, a bottom sheet on phones. Non-modal: the page
   stays usable, Esc or a tap outside closes it. */
.minicart {
  position: fixed; z-index: 70; top: 84px; right: max(16px, calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  width: min(380px, calc(100vw - 32px)); padding: 18px 20px 14px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: 0 18px 48px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .06);
  display: grid; gap: 14px; animation: sf-minicart-in .22s cubic-bezier(.2, .8, .2, 1);
}
.minicart[hidden] { display: none; }
.minicart:focus { outline: none; }
.minicart:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.minicart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.minicart__h { display: flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--body); }
.minicart__h svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--good); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.minicart__close {
  width: 44px; height: 44px; margin: -10px -12px -10px 0; display: grid; place-items: center;
  border: 0; background: none; color: var(--soft); cursor: pointer; border-radius: 10px;
}
.minicart__close:hover { color: var(--ink); background: var(--tint); }
.minicart__close:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: -3px; }
.minicart__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.minicart__notice { background: var(--tint); padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.minicart__line { display: flex; gap: 12px; align-items: center; }
.minicart__line img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex: none; background: var(--tint); }
.minicart__info { display: grid; gap: 2px; min-width: 0; font-size: 14px; color: var(--soft); }
.minicart__info strong { color: var(--ink); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minicart__sub {
  display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  font: 600 15px var(--body); font-variant-numeric: tabular-nums;
}
.minicart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.minicart__actions > :only-child { grid-column: 1 / -1; }
.minicart__actions .buybtn, .minicart__actions .btn--ghost {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0;
  width: 100%; text-align: center; text-decoration: none;
}
.minicart__keep {
  justify-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer;
  font: 500 14px var(--body); color: var(--soft); text-decoration: underline; text-underline-offset: 3px;
}
.minicart__keep:hover { color: var(--ink); }
.minicart__keep:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 6px; }
@keyframes sf-minicart-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
  .minicart {
    top: auto; right: 0; left: 0; bottom: 0; width: auto;
    border-radius: var(--r-card) var(--r-card) 0 0; border-width: 1px 0 0;
    padding: 16px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .18);
    animation-name: sf-minicart-up;
  }
}
@keyframes sf-minicart-up { from { transform: translateY(100%); } to { transform: none; } }

/* the header count gives a small nudge when something lands in the cart */
.cartlink--bump .cartlink__count { animation: sf-bump .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sf-bump { 0% { transform: scale(.6); } 100% { transform: none; } }

/* option chips are the picker once JS is on, so the plain list (the no-JS
   picker) is hidden rather than shown twice */
.variantpick--legacy.variantpick--enhanced { display: none; }
.buybtn:disabled[data-sf-label] { cursor: not-allowed; }
.addform[data-sf-unavailable] .buybtn, .buybar__btn:disabled { opacity: .55; }

/* swipeable main photo: let the browser keep vertical scrolling */
.gallery__main--swipe { touch-action: pan-y pinch-zoom; }

/* checkout header: the shop name gives way, not the "Secure checkout" label */
.cohead__cell--side { flex-shrink: 0; }

/* phones: 44px tap targets on the small links and chips shoppers use */
@media (max-width: 768px) {
  .optionchip { min-height: 44px; padding: 10px 16px; font-size: 15px; }
  .shopfoot__legal { gap: 0; }
  .shopfoot__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .sf .reviewform .starpick__stars label { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
  .pcrumb a { display: inline-flex; align-items: center; min-height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .minicart, .cartlink--bump .cartlink__count { animation: none; }
}

/* Local pickup ("Collect from us"): the address block hides when it is chosen. */
.addrblock { display: grid; gap: 14px; min-width: 0; }
.addrblock[hidden] { display: none; }
.pickupnote, .payopt__pickup { white-space: pre-line; }
.pickupcard .pickupnote { margin: 4px 0 8px; }

/* ── menus the merchant built (Online store > Navigation) ── */
.shopnav--menu { overflow: visible; flex-wrap: nowrap; }
.shopnav__item { position: relative; display: flex; align-items: center; }
.shopnav__more {
  display: grid; place-items: center; width: 28px; height: 36px; margin-left: -8px;
  border: 0; background: none; color: var(--soft); cursor: pointer; border-radius: 8px;
}
.shopnav__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.shopnav__more:hover { color: var(--ink); background: var(--tint); }
.shopnav__more:focus-visible, .shopnav__sub a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.has-sub.is-open .shopnav__more svg { transform: rotate(180deg); }
.shopnav__sub {
  display: none; position: absolute; left: 0; top: 100%; z-index: 30; min-width: 210px;
  margin: 0; padding: 6px; list-style: none; background: var(--paper);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px rgba(0, 0, 0, .1);
}
.has-sub:hover > .shopnav__sub, .has-sub:focus-within > .shopnav__sub, .has-sub.is-open > .shopnav__sub { display: block; }
.shopnav__sub a {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink);
  text-decoration: none; font: 500 14.5px/1.3 var(--body); white-space: nowrap;
}
.shopnav__sub a:hover { background: var(--tint); }
.shopnav__sub a[aria-current], .shopmenu__panel nav a[aria-current] { font-weight: 700; color: var(--ink); }
.shopmenu__panel nav a.is-sub { padding-left: 20px; color: var(--soft); font-size: 15px; }
.shopmenu__panel nav a:last-child { color: var(--soft); }

/* ── blog ── */
.blogwrap { max-width: 1120px; margin: 0 auto; width: 100%; padding: clamp(24px, 4vw, 48px) var(--gutter) 64px; flex: 1; }
.blogwrap__head { margin-bottom: 22px; }
.blogwrap__head h1 { font: 700 clamp(28px, 4vw, 40px)/1.1 var(--display); letter-spacing: -0.02em; }
.blogwrap__head p { color: var(--soft); margin-top: 6px; }
.blogtags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.bloggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.blogcard { display: flex; flex-direction: column; min-width: 0; }
.blogcard__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-card); background: var(--tint); }
.blogcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blogcard__img--none { display: grid; place-items: center; color: var(--soft); font: 700 28px var(--display); }
.blogcard__meta { margin-top: 12px; color: var(--soft); font-size: 13.5px; }
.blogcard h2 { font: 650 20px/1.25 var(--display); margin: 4px 0 6px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.blogcard h2 a { color: var(--ink); text-decoration: none; }
.blogcard h2 a:hover { text-decoration: underline; }
.blogcard p { color: var(--soft); font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.blogcard__more { margin-top: 8px; font-weight: 600; font-size: 14.5px; color: var(--accent-text); text-decoration: none; }
.blogempty { padding: 40px 0; color: var(--soft); }
.blogpost { max-width: 720px; margin: 0 auto; width: 100%; padding: clamp(24px, 4vw, 48px) var(--gutter) 64px; flex: 1; }
.blogpost h1 { font: 700 clamp(30px, 5vw, 44px)/1.1 var(--display); letter-spacing: -0.02em; margin: 6px 0 12px; overflow-wrap: anywhere; }
.blogpost__meta { color: var(--soft); font-size: 14.5px; margin-bottom: 22px; }
.blogpost__cover { width: 100%; border-radius: var(--r-card); margin-bottom: 26px; display: block; }
.blogbody { font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }
.blogbody p, .blogbody ul, .blogbody ol, .blogbody blockquote, .blogbody table { margin: 0 0 1.1em; }
.blogbody h2 { font: 650 26px/1.2 var(--display); margin: 1.6em 0 .5em; }
.blogbody h3, .blogbody h4 { font: 650 20px/1.25 var(--display); margin: 1.4em 0 .4em; }
.blogbody ul, .blogbody ol { padding-left: 1.3em; }
.blogbody a { color: var(--accent-text); }
.blogbody blockquote { border-left: 3px solid var(--line-strong); padding-left: 16px; color: var(--soft); }
.blogbody table { border-collapse: collapse; display: block; overflow-x: auto; }
.blogbody th, .blogbody td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.blogpost__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.blogmore { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.blogmore h2 { font: 650 20px var(--display); margin-bottom: 14px; }
.blogmore ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.blogmore a { color: var(--ink); font-weight: 600; text-decoration: none; }
.blogmore a:hover { text-decoration: underline; }
.blogmore span { color: var(--soft); font-size: 13.5px; margin-left: 8px; }
@media (max-width: 900px) { .bloggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bloggrid { grid-template-columns: 1fr; }
  .blogbody { font-size: 16.5px; }
}
/* automatic discounts in the cart (store/_cart_offers.html) */
.cartdisc { display: flex; justify-content: space-between; gap: 10px; font-size: 14.5px; padding: 4px 0; color: var(--good); font-variant-numeric: tabular-nums; }
.cartdisc--total { color: var(--ink); font-weight: 600; }
.cartoffers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.cartoffer { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); }
.cartoffer strong { font-weight: 600; }
.cartoffer__state { display: block; color: var(--soft); }
.cartoffer--done { border-color: color-mix(in srgb, var(--good) 35%, var(--line)); }
.cartoffer--done .cartoffer__state { color: var(--good); font-weight: 600; }
.cartoffer__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; fill: none; stroke: var(--soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cartoffer--done .cartoffer__icon { stroke: var(--good); }
.offernote { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 6px 10px; border-radius: 999px; background: var(--tint); color: var(--ink); font-size: 13.5px; font-weight: 600; }
.discountnote { font-size: 13px; margin: 6px 0 0; }
.sumline__tag { font-size: 12px; color: var(--good); font-weight: 600; }
/* "Buy it now": the quieter button under Add to cart */
.buybtn--ghost { background: transparent; color: var(--btn2, var(--ink)); box-shadow: inset 0 0 0 1.5px var(--btn2, var(--ink)); margin-top: 0; }
.buybtn--ghost:hover { background: var(--btn2, var(--ink)); color: var(--btn2-fg, #fff); }
.addform .buybtn--ghost { margin-top: -10px; }

/* Storefront password page */
.pwform { display: grid; gap: 10px; width: 100%; max-width: 340px; margin-top: 8px; text-align: left; }
.pwform label { font: 600 13px/1.3 var(--body); color: var(--soft); }
.pwform input[type=password], .pwform input[type=email] {
  width: 100%; min-height: 48px; padding: 0 14px; font: 400 16px var(--body); color: var(--ink);
  background: var(--paper, #fff); border: 1px solid var(--line); border-radius: var(--r-btn, 10px);
}
.pwform input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pwform .buybtn { margin-top: 2px; }
.pwerr { color: var(--bad, #b3261e); font: 600 14px/1.4 var(--body); margin: 0; }
.pwnote { font-size: 14px; }
.solo__card .pwsplit { width: 100%; max-width: 340px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; }

/* ── Returns: "Request a return" on the track page (app/returns.py, 2026-10-11) ── */
.returnbox { width: 100%; max-width: 420px; text-align: left; display: grid; gap: 12px; }
.returnbox__title { font: 600 15px/1.3 var(--body); margin: 0; }
.returnbox__ok { margin: 0; padding: 11px 14px; border-radius: 10px; background: #DDF4E6; color: var(--good); font-size: 14px; }
.returnlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.returnlist__item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; font-size: 14px; }
.returnlist__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.returnstatus { font: 600 12px/1 var(--body); padding: 4px 9px; border-radius: 999px; background: var(--tint); color: var(--ink); }
.returnstatus--requested { background: #FFEBC2; color: #7A4B00; }
.returnstatus--approved { background: #DDEFF7; color: #0B5A7A; }
.returnstatus--received, .returnstatus--closed { background: #DDF4E6; color: var(--good); }
.returnstatus--declined { background: #FDE0D8; color: var(--bad); }
.returnform { border: 1px solid var(--line); border-radius: 12px; }
.returnform__open { cursor: pointer; padding: 13px 16px; min-height: 44px; font-weight: 600; display: flex; align-items: center; }
.returnform[open] > .returnform__open { border-bottom: 1px solid var(--line); }
.returnform__body { padding: 16px; }
.returnlines { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.returnline { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: center; }
.returnline input { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; width: 100%; background: var(--paper); color: var(--ink); }
/* ── fast images (2026-10-11): width/height attributes are now printed on photos so the page does not jump; where the CSS sets only a width, the height must follow the ratio ── */
.herobanner img, .blogpost__cover { height: auto; }
/* ── Shipping rates by weight and order amount (2026-10-11) ─────────────── */
.nodelivery { border: 1px solid #E8B7A6; background: #FDE0D8; color: var(--bad); border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.nodelivery p { margin: 4px 0 0; }
.nodelivery a { color: inherit; font-weight: 600; text-decoration: underline; }
.buybtn:disabled[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
/* ── Product search and filters (r4/search) ──
   The filter rail beside the grid, the "Filter" bar on a phone, removable
   chips, and the zero-result suggestions. Uses the same tokens as the sort
   control and chips above so a re-branded shop re-colours them too. */
.shelfcols--rail { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.shelfcols__main { min-width: 0; }
.filters { padding-top: 24px; }
.filters__sum { display: none; list-style: none; }
.filters__sum::-webkit-details-marker { display: none; }
.filters__form { display: grid; gap: 4px; }
.facet { border: 0; margin: 0; padding: 14px 0; min-width: 0; border-bottom: 1px solid var(--line); }
.facet:first-child { padding-top: 0; }
.facet__h { padding: 0; margin: 0 0 10px; font: 600 14px/1.3 var(--body); color: var(--ink); }
.facet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.facet__opt { display: flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; font: 400 14.5px/1.3 var(--body); color: var(--ink); }
.facet__opt input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent, var(--ink)); }
.facet__lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.facet__cnt { color: var(--soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.facet__price { display: flex; align-items: flex-end; gap: 8px; }
.facet__pin { display: grid; gap: 4px; flex: 1; min-width: 0; font: 400 12.5px var(--body); color: var(--soft); }
.facet__pin input {
  width: 100%; min-width: 0; height: 42px; padding: 0 10px; font: 500 14px var(--body); color: var(--ink);
  background: var(--paper, #fff); border: 1px solid var(--line-strong); border-radius: var(--r-btn, 10px);
  font-variant-numeric: tabular-nums;
}
.facet__pin input:focus-visible, .facet__opt input:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 2px; }
.facet__to { padding-bottom: 12px; color: var(--soft); font-size: 13px; }
.filters__foot { display: flex; align-items: center; gap: 14px; padding-top: 14px; }
.filters__apply {
  font: 600 13.5px var(--body); height: 42px; padding: 0 18px; cursor: pointer; color: var(--ink);
  background: none; border: 1px solid var(--line-strong); border-radius: var(--r-btn, 10px);
}
.filters__apply:hover { border-color: var(--ink); }
.filters__clear, .afclear { color: var(--ink); font: 500 14px var(--body); text-decoration: underline; text-underline-offset: 3px; }
.activefilters { list-style: none; margin: 0; padding: 20px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.afchip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; text-decoration: none;
  font: 500 13.5px var(--body); color: var(--ink); background: var(--tint, #f4f2ee);
  border: 1px solid var(--line-strong); border-radius: var(--r-btn, 10px);
}
.afchip:hover { border-color: var(--ink); }
.afchip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.afclear { padding: 0 6px; }
.suggest { padding: 8px 0 56px; }
.suggest__h { font: 700 clamp(18px, 2vw, 22px)/1.2 var(--display); margin: 0; padding-top: 8px; }
.sf .suggest .grid { padding-bottom: 0; }
@media (min-width: 900px) {
  .shelfcols--rail .filters { position: sticky; top: calc(var(--head-h, 64px) + 16px); max-height: calc(100vh - var(--head-h, 64px) - 32px); overflow-y: auto; padding-right: 4px; }
  .sf .shelfcols--rail .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1080px) {
  .shelfcols--rail { grid-template-columns: 216px minmax(0, 1fr); column-gap: 28px; }
  .sf .shelfcols--rail .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .shelfcols--rail { display: block; }
  .filters { padding-top: 16px; }
  .filters__sum {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 0 16px; cursor: pointer;
    font: 600 15px var(--body); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-btn, 10px);
  }
  .filters__sum::after {
    content: ""; width: 9px; height: 9px; margin-left: auto; flex: none; border: solid currentColor; border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
  }
  .filters__panel[open] .filters__sum::after { transform: rotate(-135deg); }
  .filters__n { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 99px; background: var(--ink); color: #fff; font: 600 12px var(--body); }
  .filters__form { padding: 14px 4px 4px; }
  .facet__opt { min-height: 44px; }
  .facet__pin input { height: 48px; }
  .filters__apply { height: 48px; }
  .activefilters { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .filters__sum::after { transition: none; } }

/* ── Trade price lists (2026-10-11): the bar a trade customer sees ─────────── */
.tradebar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px;
  background: var(--tint, #f3f1ec); color: var(--ink); border-bottom: 1px solid var(--line);
  font: 500 13px/1.4 var(--body); padding: 6px var(--gutter, 16px); text-align: center;
}
.tradebar__who strong { font-weight: 700; overflow-wrap: anywhere; }
.tradebar__dot { color: var(--ink-3, #7a8880); }
.tradebar__exit {
  color: var(--accent-text, var(--accent)); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px;
}
.tradebar__exit:hover { text-decoration-thickness: 2px; }
@media (max-width: 560px) { .tradebar { font-size: 13.5px; } .tradebar__exit { min-height: 44px; } }

/* ── Digital products (app/downloads.py) ───────────────────────────────── */
.delivline--digital { color: var(--ink); }
.digitalfiles { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.digitalfiles h2 { font: 700 15px/1.3 var(--body); margin: 0 0 8px; }
.digitalfiles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.digitalfiles li { overflow-wrap: anywhere; }
.dlcard { text-align: left; width: 100%; display: grid; gap: 12px; margin-top: 14px; }
.dlcard > p { margin: 0; }
.dlcard__item { display: grid; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.dlcard__item:first-of-type { border-top: 0; padding-top: 0; }
.dlcard__name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dlcard__files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dlcard__files li { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; overflow-wrap: anywhere; }
.dlcard__link { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.dlcard__meta { margin: 0; font-size: 13px; }
.dlcard__files--page { gap: 10px; width: 100%; max-width: 420px; }
.dlcard__files--page li { display: block; }
.dlcard__size { font-weight: 400; opacity: .85; margin-left: 6px; }
/* ── Custom pages (round 5, pages) ─────────────────────────────────────── */
.custompage__draft { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: var(--line); color: var(--ink); font-size: 14px; }
/* ═══════════════ pay the extra on an edited order (round 5, order edit) ═══════════════ */
.balancebank { text-align: left; margin: 14px 0 6px; }
.balancebank .pickupnote { margin: 6px 0; }
/* ═══════════════ QA and design pass, round 5 (2026-10-11) ═══════════════ */
/* Every row of the track page's receipt reads at one size (the date used to be larger than the total). */
.receipt dd { font-size: 15px; }
@media (max-width: 720px) {
  .chip, .sf .chip { display: inline-flex; align-items: center; min-height: 44px; }
  .shopfoot__legal a { display: inline-block; padding: 8px 0; }
  .backlink { padding: 10px 0; }
}

/* ── ready-made themes (round 6, app/looks.py) ─────────────────────────── */
/* Page background and corner shape for the default theme. White + soft are
   the old look exactly, so a shop that never picks a look is unchanged. */
.sf.surface-cream { --bg: #FAF6EF; --paper: #FAF6EF; --line: #E8E0D2; --line-strong: #D6CBB8;
  --tint: color-mix(in srgb, var(--ink) 5%, #FAF6EF); }
.sf.surface-stone { --bg: #F3F3F1; --paper: #F3F3F1; --line: #E0E0DC; --line-strong: #CBCBC6;
  --tint: color-mix(in srgb, var(--ink) 5%, #F3F3F1); }
.sf.corners-sharp { --r-card: 3px; }
.sf.corners-round { --r-card: 22px; }

/* ── shopper review photos (round 6) ───────────────────────────────────── */
.reviews__photolink { display: inline-block; margin-bottom: 6px; border-radius: 8px; }
.reviews__photolink .reviews__photo { width: 96px; height: 96px; margin-bottom: 0; }

/* ── pages and articles in search (round 6) ────────────────────────────── */
.contenthits { margin: 32px 0 8px; }
.contenthits h2 { font-size: 20px; margin: 0 0 12px; }
.contenthits ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.contenthits a { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); color: var(--ink); text-decoration: none; background: var(--paper); }
.contenthits a:hover { border-color: var(--line-strong); }
.contenthits__kind { font: 600 11.5px var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
.contenthits__snip { color: var(--soft); font-size: 14px; }

/* settings-nonic: contact form on a custom page, shipping policy links */
.pagecontact { margin-top: 28px; max-width: 560px; }
.pagecontact .builtinpage__sent { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); margin: 0 0 14px; }
.pagecontact label, .pagecontact input, .pagecontact textarea { max-width: 100%; box-sizing: border-box; }
.pagecontact input, .pagecontact textarea { width: 100%; }
.pagecontact .btn { min-height: 44px; }

/* ── Collection photo (import fix, 2026-10-18) ── */
.pcrumb__photo { max-width: var(--maxw); margin: 0 auto 14px; padding: 0 var(--gutter); }
.pcrumb__photo img { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-card); }
/* ── Per-variant Was price (nonic rebuild) ── */
.sf [data-was-wrap]:not([hidden]) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* ── logo in the footer and header colours (brandbar, nonic rebuild 2026-10-18) ──
   Logo height, the shop name beside the logo and the header colours come from
   the editor's Theme settings (blocks.style_css and chrome_edits). */
.shopbrand__logo { flex: 0 1 auto; min-width: 0; }
.shopfoot__logo { display: block; max-height: 44px; max-width: min(190px, 70vw); width: auto; height: auto; }
@media (max-width: 720px) {
  .shopbrand__logo { max-width: 46vw; }
}
/* footer extras the editor adds (opening hours, social icons) */
.shopfoot__hours { margin: 0; font-size: 14px; color: var(--soft); }
.shopfoot__social { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.shopfoot__social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--soft); }
.shopfoot__social a:hover { color: var(--ink); border-color: var(--ink); }
.shopfoot__social svg { width: 18px; height: 18px; fill: currentColor; }
.shopbrand__logo--sized { max-height: none; max-width: min(260px, 60vw); }
.richtext img, .blogbody img { max-width: 100%; height: auto; border-radius: var(--r-card, 8px); display: block; margin: 1em 0; }

/* ── Storefront extras (nonic rebuild, 2026-10-18) ───────────────────────── */
.card__rating { display: flex; align-items: center; gap: 4px; margin: 2px 0 4px; font: 500 13px var(--body); color: var(--soft); }
.card__stars { color: #C98A12; letter-spacing: 1px; font-size: 14px; }
.buytrust { margin: 14px 0 4px; display: grid; gap: 8px; justify-items: start; }
.buytrust__icons .cardmarks { margin: 0; }
.buytrust__line { margin: 0; font: 500 14px/1.4 var(--body); color: var(--soft); }
/* brand2: shop intro in the footer */
.shopfoot__intro { margin: 0; font-size: 14px; color: var(--soft); max-width: 46ch; }

/* The shop's public reply under a review (round 8). */
.reviews__reply { margin: 10px 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--line); }
.reviews__reply strong { margin: 0 0 2px; font-size: 13px; }
.reviews__reply p { font-size: 14px; }

/* ── Product page blocks (round 9) ───────────────────────────────────────────
   Each block of the product page sits in <div class="pb pb--TYPE" data-sf-pblock>.
   The wrappers add no box of their own: the default page looks as it always did. */
.pb--variants { display: grid; gap: inherit; }
.pb--variants-noprice .variantpick__price { display: none; }
.buyrow > .pb--buttons { flex: 1 1 200px; display: flex; }
.buyrow > .pb--buttons .buybtn { flex: 1 1 auto; width: auto; min-height: 52px; margin: 0; font-size: 16px; }
.buyrow > .pb--quantity { flex: none; }
.productpage__info .pb--title.pb-size-small h1 { font-size: clamp(20px, 2.4vw, 28px); }
.productpage__info .pb--title.pb-size-large h1 { font-size: clamp(32px, 4.6vw, 54px); }
.pb--price.pb-size-small .pricetag { font-size: 16px; }
.pb--price.pb-size-small .pricetag .wasprice { font-size: 14px; }
.pb__h { font: 700 18px/1.3 var(--body); margin: 22px 0 8px; }
.pb__body { margin: 0; white-space: pre-line; color: var(--soft); font-size: 15px; line-height: 1.6; }
.pb--note { margin-top: 18px; }
.pb--accordion { margin-top: 18px; border-top: 1px solid var(--line); }
.pb--accordion + .pb--accordion { margin-top: 0; }
.pb-acc { border-bottom: 1px solid var(--line); }
.pb-acc__t { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 14px 0; font: 600 15px var(--body); color: var(--ink); }
.pb-acc__t::-webkit-details-marker { display: none; }
.pb-acc__t::after { content: "+"; font-weight: 400; font-size: 20px; line-height: 1; }
.pb-acc[open] > .pb-acc__t::after { content: "\2212"; }
.pb-acc__b { padding: 0 0 14px; color: var(--soft); font-size: 15px; line-height: 1.6; }
.pb-acc__b p { margin: 0 0 8px; }
.pb-selects { display: grid; gap: 14px; }
.pb-selects__f { display: grid; gap: 6px; }
.pb-select {
  width: 100%; min-height: 48px; padding: 0 40px 0 12px; font: 500 15px var(--body); color: var(--ink);
  appearance: none; -webkit-appearance: none; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}
.pb-select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Sale timer block (product page): one calm line, restarts by itself */
.dealtimer { margin: 10px 0 4px; font: 600 14px/1.3 var(--body); color: var(--ink); }
.dealtimer__c { font-variant-numeric: tabular-nums; color: var(--accent-text); letter-spacing: .02em; }