/* Storefront styles. Every colour, font and corner comes from the variables below.
   views.js sets them from content.js theme on every page, so to rebrand, edit content.js, not this file.
   The values here are only the fallback (the same as the content.js defaults). */
:root {
  --bg: #ffffff;
  --soft: #f5f5f5;
  --band: #f5f5f5;
  --band-ink: #111111;
  --header: #ffffff;
  --header-ink: #111111;
  --notice: #f5f5f5;
  --notice-ink: #111111;
  --footer: #ffffff;
  --footer-ink: #111111;
  --ink: #111111;
  --sub: #666666;
  --line: #e5e5e5;
  --photo: #eeeeee;
  --accent: #111111;
  --head-accent: #666666;
  --deal: #111111;
  --deal-bg: #ebebeb;
  --badge: #111111;
  --badge-ink: #ffffff;
  --button: #111111;
  --button-ink: #ffffff;
  --button-hover: #333333;
  --star: #111111;
  --ok: #111111;
  --warn: #8a8a8a;
  --error: #b3261e;
  --error-bg: #fbeaea;
  --font-head: 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --head-weight: 700;
  --head-case: none;
  --head-tracking: -0.02em;
  --r: 8px;
  --btn-r: 8px;
  --pad: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 124px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-head); font-weight: var(--head-weight); line-height: 1.08; letter-spacing: var(--head-tracking); text-transform: var(--head-case); }
h1 { font-size: clamp(34px, 5.4vw, 60px); }
h2 { font-size: clamp(28px, 3.8vw, 44px); }
h3 { font-size: 18px; line-height: 1.3; font-weight: 700; }
p, li, summary, blockquote { text-wrap: pretty; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--button); color: var(--button-ink); padding: 10px 16px; border-radius: var(--btn-r); font-weight: 700; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.big { width: 34px; height: 34px; stroke-width: 1.5; }
.small { font-size: 14px; color: var(--sub); }
.center { text-align: center; }
.lead { font-size: 18px; color: var(--sub); max-width: 62ch; }
.band .lead { color: color-mix(in srgb, currentColor 70%, transparent); }
.nowrap, .credit { white-space: nowrap; }
@media (max-width: 599px) { .hide-sm { display: none; } }
@media (min-width: 600px) { .sm-only { display: none; } }

/* Eyebrow labels: a short rule, then small caps (no dash characters) */
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 600 12px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.accent { color: var(--head-accent); }

/* Buttons: one style everywhere, solid, with an arrow */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--btn-r); background: var(--button); color: var(--button-ink); font: 600 15px/1 var(--font-body); letter-spacing: .01em; text-transform: var(--head-case); text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.btn:hover { background: var(--button-hover); }
.btn:active { transform: translateY(1px); }
.btn .arr { font-size: 18px; transition: transform .2s; }
.btn:hover .arr { transform: translateX(3px); }
.btn.big { min-height: 58px; padding: 0 34px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn.outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn.outline:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn[disabled] { background: var(--line); color: var(--sub); cursor: not-allowed; }
.btn[aria-busy='true'] { opacity: .7; pointer-events: none; }
@media (max-width: 699px) { .btn.big, .sec .btn:not(.small), .page-head .btn { width: 100%; } }

/* Stars, rating line and the sample tag */
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .st { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 14px; font-weight: 600; text-decoration: none; }
a.rating:hover > span:not(.sample-tag) { text-decoration: underline; }
.rating .g, .g-tag .g { width: 16px; height: 16px; flex: none; }
.g-tag { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sample-tag { display: inline-block; vertical-align: 1px; padding: 1px 6px; border: 1px solid currentColor; border-radius: 4px; font: 600 10px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; opacity: .75; }

/* Prices */
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.price { font-weight: 700; font-size: 18px; }
.was { color: var(--sub); font-size: 15px; }
.save { color: var(--deal); background: var(--deal-bg); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .02em; }
.price-row.big .price { font-size: 32px; letter-spacing: -.01em; }
.price-row.big .was { font-size: 18px; }
.price-row.big .save { font-size: 14px; }
.paylater { font-size: 14px; color: var(--sub); margin: 6px 0 0; }
.paylater:empty { display: none; }
/* Product page: Afterpay beside the big price (Nate, 16 Oct 2026) */
.price-line { display: flex; align-items: center; gap: 6px 14px; }
.price-line .price-row { flex: none; }
.price-line .paylater, .price-note { margin: 0; flex: 1; min-width: 0; line-height: 1.35; }
.price-note { font-size: 15px; font-weight: 700; color: var(--ok); }
.price-note:empty { display: none; }

/* Payment logos */
.pay { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.pay li { display: inline-flex; }
.pay .pi { width: 40px; height: 25px; flex: none; display: block; }

/* ---------- Header ---------- */
/* Top bar + header stay pinned together while scrolling */
.site-top { position: sticky; top: 0; z-index: 40; }
.notice { display: block; background: var(--notice); color: var(--notice-ink); text-align: center; font-size: 13px; font-weight: 500; padding: 8px 16px; text-decoration: none; }
.notice:hover b { text-decoration: underline; }
/* Rotating top bar (Nate, 16 Oct 2026): each message drops in from the top with a small bounce, holds about
   3.5 seconds, then slides down and out as the next one drops in. Paused on hover. 4 seconds a message.
   The keyframe timing is set for 2 messages. */
.notice.rotate { position: relative; overflow: hidden; height: 36px; padding: 0; }
.notice-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; white-space: nowrap;
  opacity: 0; transform: translateY(-110%); animation: notice-drop calc(var(--n) * 4s) infinite both; animation-delay: calc(var(--i) * 4s); }
.notice.rotate:hover .notice-msg { animation-play-state: paused; }
@keyframes notice-drop {
  0% { opacity: 0; transform: translateY(-110%); animation-timing-function: cubic-bezier(.34, 1.5, .64, 1); }
  7% { opacity: 1; transform: translateY(0); }
  44% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  50% { opacity: 0; transform: translateY(110%); }
  100% { opacity: 0; transform: translateY(110%); }
}
@media (prefers-reduced-motion: reduce) {
  .notice-msg { animation: none; }
  .notice-msg:first-child { opacity: 1; transform: none; }
}
.site-header { background: var(--header); color: var(--header-ink); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 12px; height: 64px; }
.logo { margin-right: auto; text-decoration: none; display: inline-flex; align-items: center; }
.logo-img { height: 30px; width: auto; }
.wordmark { font: var(--head-weight) 20px/1 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); white-space: nowrap; }
.wordmark .mark { width: 1.55em; height: auto; margin-right: .35em; vertical-align: -0.12em; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; position: relative; border-radius: 99px; }
.icon-btn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--button); color: var(--button-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.main-nav, .header-phone { display: none; }
.menu-btn { margin-left: -10px; }
@media (min-width: 1100px) {
  .header-inner { height: 72px; gap: 28px; position: relative; }
  .menu-btn { display: none; }
  .logo-img { height: 34px; }
  .wordmark { font-size: 22px; }
  /* Menu centred on the page, not just between the logo and the cart */
  .main-nav { display: flex; gap: 26px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .main-nav a { font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; opacity: .8; padding: 6px 0; border-bottom: 2px solid transparent; }
  .main-nav a:hover, .main-nav a[aria-current] { opacity: 1; border-color: currentColor; }
}
@media (min-width: 1360px) { .header-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; } .header-phone .ic { width: 18px; height: 18px; } }

/* Trust bar: a ticker on phones, a row on desktop */
.trust-bar { background: var(--bg); border-bottom: 1px solid var(--line); overflow: hidden; font-size: 13px; font-weight: 500; }
.trust-track { display: flex; width: max-content; animation: tick 28s linear infinite; }
.trust-bar ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 9px 16px; }
.trust-bar li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.trust-bar .ic { width: 18px; height: 18px; color: var(--accent); }
@keyframes tick { to { transform: translateX(-50%); } }
@media (min-width: 900px) {
  .trust-track { animation: none; width: auto; justify-content: center; }
  .trust-bar ul { gap: 48px; }
  .trust-bar .dup { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; width: auto; }
  .trust-bar ul { flex-wrap: wrap; justify-content: center; gap: 6px 20px; }
  .trust-bar .dup { display: none; }
  html { scroll-behavior: auto; }
}

/* Phone menu with product photos */
.menu { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .4); }
.menu-panel { position: absolute; inset: 0 auto 0 0; width: min(420px, 92vw); background: var(--bg); overflow-y: auto; padding: 12px 16px 32px; animation: slide .25s ease-out; }
@keyframes slide { from { transform: translateX(-100%); } }
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-logo .logo-img { height: 28px; }
.menu-label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sub); margin: 8px 0; }
.menu-products { list-style: none; margin: 0 0 16px; padding: 0; }
.menu-products a { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.menu-products img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.menu-products a > span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.menu-products small { color: var(--sub); font-size: 12px; }
.menu-price { flex: none !important; display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-size: 14px; line-height: 1.25; }
.menu-price s, .pair-price s { font-weight: 400; font-size: 12px; color: var(--sub); }
.menu-links { list-style: none; padding: 0; margin: 20px 0; }
.menu-links a { display: block; padding: 12px 0; font: var(--head-weight) 20px/1.2 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu-contact { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--sub); }
.menu-contact a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none; font-size: 16px; }
.tag-pop { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--badge); color: var(--badge-ink); font: 700 10px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
body.menu-open { overflow: hidden; }

/* ---------- Sections ---------- */
.sec { padding: var(--pad) 0; }
.sec.soft { background: var(--soft); }
.band { background: var(--band); color: var(--band-ink); }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.sec-head h2 + .lead, .sec-head h2 + .rating { margin-top: 16px; }
.sec-head:not(.left) { text-align: center; margin-left: auto; margin-right: auto; }
.sec-head:not(.left) .eyebrow, .reviews-sec .sec-head .rating { justify-content: center; }
.sec-head:not(.left) .lead { margin-left: auto; margin-right: auto; }
.center-cta { text-align: center; margin: 36px 0 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.reassure { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 0; font-size: 14px; font-weight: 600; }
.reassure li { display: flex; align-items: center; gap: 6px; }
.reassure .ic { width: 16px; height: 16px; color: var(--ok); stroke-width: 2.4; }
.ticks { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.ticks .ic { color: var(--accent); margin-top: 1px; }

/* A button with its reassure line centred under it */
.cta-stack { display: inline-flex; flex-direction: column; align-items: stretch; gap: 14px; max-width: 100%; }
.cta-stack .btn { margin: 0; }
.cta-stack form .btn { width: 100%; }
.cta-stack .reassure { margin: 0; justify-content: center; }
@media (max-width: 699px) { .cta-stack { display: flex; width: 100%; } }

/* Hero */
.hero { overflow: hidden; }
.hero-grid { display: grid; }
.hero-copy { padding: 40px 16px 32px; max-width: 640px; }
.hero h1 { margin-bottom: 18px; font-size: clamp(40px, 7vw, 68px); line-height: 1.02; }
.hero .lead { margin-bottom: 22px; }
.hero-img { position: relative; background: var(--photo); }
.hero-img img, .hero-img video { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.stats { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0 auto; padding-top: 4px; padding-bottom: 4px; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.stats li { padding: 18px 8px; text-align: center; display: flex; flex-direction: column; }
.stats b { font: var(--head-weight) 26px/1.1 var(--font-head); letter-spacing: var(--head-tracking); }
.stats span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, currentColor 65%, transparent); margin-top: 6px; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1fr 1fr; min-height: 600px; }
  .hero-copy { padding: 72px 40px 64px max(28px, calc((100vw - 1240px) / 2 + 28px)); align-self: center; max-width: none; }
  .hero-img { min-height: 100%; }
  .hero-img img, .hero-img video { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
}

/* 3 steps: number on the left, icon top right */
.step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.step-list li { position: relative; padding: 18px 44px 18px 0; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.step-list li + li { border-top: 1px solid var(--line); }
.step-list .ic { position: absolute; top: 18px; right: 0; color: var(--accent); }
.step-list h3 { margin-bottom: 6px; font-size: 19px; }
.step-list p { color: var(--sub); }
.step-n { font: var(--head-weight) 32px/1 var(--font-head); color: var(--head-accent); }
.step-list .step-n { grid-row: span 2; }
@media (min-width: 800px) {
  .step-list { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .step-list li { display: block; padding: 4px 28px 4px; }
  .step-list li + li { border-top: 0; border-left: 1px solid var(--line); }
  .step-list li:first-child { padding-left: 0; }
  .step-list .ic { top: 4px; right: 28px; }
  .step-list .step-n { display: block; margin-bottom: 14px; }
}

/* Product cards: 2 across on phones, 4 on desktop */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 899px) {
  /* A card alone on the last row sits in the middle */
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > .card { grid-column: span 2; }
  .grid > .card:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
@media (min-width: 700px) { .col-grid .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .col-grid .grid > .card, .col-grid .grid > .card:last-child:nth-child(odd) { grid-column: auto; } }
@media (min-width: 900px) { .grid, .col-grid .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.card { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.card-main { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.card-img { position: relative; aspect-ratio: 4 / 3; background: var(--photo); overflow: hidden; }
.card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s, transform .5s; }
.card-img .alt { opacity: 0; }
@media (hover: hover) { .card:hover .card-img .alt { opacity: 1; } .card:hover .card-img img { transform: scale(1.03); } }
.badge { position: absolute; z-index: 2; top: 10px; left: 10px; background: var(--badge); color: var(--badge-ink); font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 5px 9px; border-radius: 4px; }
.badge.sold { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; flex: 1; }
.card-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sub); line-height: 1.35; }
.card-name { font: var(--head-weight) 17px/1.25 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); }
.card-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; }
.card-rating .st { width: 13px; height: 13px; }
.card-body .price-row { margin-top: auto; padding-top: 4px; }
.card-body .save { display: none; }
.card-foot { padding: 0 14px 16px; }
.card-foot .btn { min-height: 44px; padding: 0 12px; font-size: 14px; gap: 8px; white-space: nowrap; }
@media (min-width: 700px) { .card-body { padding: 18px 18px 20px; } .card-name { font-size: 19px; } .card-foot { padding: 0 18px 20px; } }

/* Bundle */
.bundle { display: grid; gap: 32px; align-items: center; }
.bundle-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 22px 0 6px; }
.bundle-price .price { font-size: 36px; }
.bundle-what { font-weight: 600; margin-bottom: 20px; }
.bundle form { margin-bottom: 12px; }
.bundle .rating { margin: 14px 0 0; }
.bundle .cta-stack .reassure { margin-top: 0; }
.bundle-imgs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.bundle-imgs a { display: block; background: var(--bg); border-radius: var(--r); overflow: hidden; text-decoration: none; border: 1px solid var(--line); }
.bundle-imgs img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--photo); }
.bundle-imgs a span { display: block; padding: 10px 12px; font-weight: 600; font-size: 15px; }
.plus { font: var(--head-weight) 36px/1 var(--font-head); color: var(--head-accent); }
@media (min-width: 900px) { .bundle { grid-template-columns: 1fr 1.1fr; gap: 64px; } }

/* Details section: one close-up at a time, a new one every 3 seconds */
.spec-grid, .story-grid, .visit-grid, .box-grid, .faq-grid, .contact-grid { display: grid; gap: 36px; }
.story-grid > * { min-width: 0; }
.spec-img img, .story-img img { border-radius: var(--r); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--photo); }
.fader { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--photo); }
.fader img { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto !important; border-radius: 0 !important; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.fader img.on { opacity: 1; }
.fader-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; z-index: 1; }
.fader-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); cursor: pointer; transition: width .3s; }
.fader-dots button[aria-current] { width: 22px; background: var(--ink); }
.benefits { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 22px; }
.benefits li { display: flex; gap: 16px; }
.benefits .ic { color: var(--accent); }
.benefits h3 { margin-bottom: 4px; }
.benefits p { color: var(--sub); }
@media (min-width: 900px) {
  .spec-grid, .story-grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .story-grid { align-items: start; }
  .story-img { position: sticky; top: 120px; }
  .benefits { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .benefits li { flex-direction: column; gap: 10px; }
}

/* Review quotes, one at a time */
.big-quote { margin: 0 auto; text-align: center; }
.big-quote .stars .st { width: 22px; height: 22px; }
.big-quote blockquote { margin: 20px 0; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.45; font-weight: 500; }
.big-quote figcaption { font-size: 14px; color: color-mix(in srgb, currentColor 70%, transparent); }
.big-quotes { margin: 0; }
.big-quotes .mr-track { border-radius: 0; }
.big-quotes .big-quote { flex: 0 0 100%; margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; }
.big-quotes .big-quote blockquote, .big-quotes .big-quote figcaption { max-width: 900px; }
.big-quotes .mr-dots { margin-top: 24px; }
.big-quotes .mr-dots button { background: color-mix(in srgb, currentColor 25%, transparent); }
.big-quotes .mr-dots button[aria-current="true"] { background: currentColor; }

/* Reviews: swipe on phones, grid on desktop */
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding-bottom: 12px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: thin; }
.review { scroll-snap-align: start; margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.review-hl { font-weight: 700; font-size: 18px; line-height: 1.35; margin: 0; }
.review blockquote { margin: 0; color: var(--sub); font-size: 15px; flex: 1; }
.review blockquote b { color: var(--ink); font-weight: 600; }
.review figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.review .who { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; min-width: 0; }
.review small { color: var(--sub); font-size: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
@media (min-width: 900px) { .reviews { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; } }

/* Shop by type */
.cat-grid { display: grid; gap: 14px; }
.cat { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); color: var(--ink); text-decoration: none; }
.cat-img { display: block; overflow: hidden; background: var(--photo); }
.cat-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s; }
.cat:hover .cat-img img { transform: scale(1.04); }
.cat-txt { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.cat b { font: var(--head-weight) 22px/1.2 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); }
.cat small { font-size: 14px; color: var(--sub); }
.cat em { font-style: normal; font-weight: 600; font-size: 14px; margin-top: 6px; }
.cat:hover em { text-decoration: underline; }
@media (min-width: 800px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* "Us vs the rest" table: the table scrolls inside its box, never the page */
.table-wrap { overflow-x: auto; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); font-size: 15px; table-layout: fixed; }
.ctable thead th:first-child { border-top-left-radius: var(--r); width: 40%; }
.ctable thead th:last-child { border-top-right-radius: var(--r); }
.ctable tbody tr:last-child > :first-child { border-bottom-left-radius: var(--r); }
.ctable tbody tr:last-child > :last-child { border-bottom-right-radius: var(--r); }
.ctable th, .ctable td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable tbody tr:last-child th, .ctable tbody tr:last-child td { border-bottom: 0; }
.ctable thead th { font: var(--head-weight) 17px/1.2 var(--font-head); letter-spacing: var(--head-tracking); background: var(--soft); vertical-align: bottom; }
.ctable tbody th { font-weight: 600; color: var(--sub); font-size: 14px; background: var(--bg); }
.ctable .here { background: color-mix(in srgb, var(--ink) 3%, var(--bg)); font-weight: 600; }
.ctable thead .here { background: var(--ink); color: var(--bg); }
.ctable .ic { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; }
.ctable .yes { color: var(--ink); }
.ctable .no { color: var(--sub); }
@media (max-width: 599px) { .ctable { font-size: 14px; } .ctable th, .ctable td { padding: 12px 10px; } .ctable thead th { font-size: 15px; } }
.peek { position: fixed; left: 0; top: 0; width: 260px; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 70; background: var(--photo); }
.peek.on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 20px 0; font-weight: 700; font-size: 17px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq-ic { transition: transform .2s; color: var(--accent); }
details[open] > summary .faq-ic { transform: rotate(45deg); }
.faq-a { padding: 0 0 20px; color: var(--sub); max-width: 70ch; }
.faq-a a, .lead a, .desc a, .prose a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.more-link a { font-weight: 700; text-decoration: none; }
.more-link a:hover { text-decoration: underline; }
.faq-grid h2 { margin-bottom: 14px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } }
.faq-only .faq { max-width: 860px; margin: 0 auto; }

/* Visit us: facts and a map */
.visit-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.visit-facts li { display: flex; gap: 14px; align-items: flex-start; background: var(--soft); border-radius: var(--r); padding: 18px; }
.visit-facts .ic { color: var(--accent); margin-top: 2px; }
.visit-facts span { display: flex; flex-direction: column; }
.visit-facts b { font-size: 15px; }
.visit-facts a { font-weight: 600; }
.visit .lead { margin: 16px 0 24px; }
.visit .visit-facts { margin-bottom: 24px; }
@media (min-width: 600px) { .visit-facts:not(.stack) { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .visit:not(.no-map) .visit-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; } }
.map { position: relative; border-radius: var(--r); overflow: hidden; background: var(--soft); min-height: 320px; }
@media (min-width: 900px) { .map { min-height: 460px; } }
.map-canvas, .map .map-canvas.maplibregl-map { position: absolute; inset: 0; }
.map-card { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--bg); color: var(--ink); font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.map-card b { font-size: 16px; }
.map-card a { font-weight: 700; text-decoration: none; margin-top: 4px; }
.map-pin { position: relative; width: 46px; height: 56px; cursor: default; }
.map-pin span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.map-pin img { width: 24px; height: 24px; }
.map-pin::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border: 8px solid transparent; border-top: 11px solid var(--ink); border-bottom: 0; }
.map .maplibregl-ctrl-group { border-radius: 6px; }
.map .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(255, 255, 255, .8); min-height: 22px; }

/* Closing section (the hero again) */
.end { position: relative; overflow: hidden; }
.end-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .15; }
.end > .wrap { position: relative; }
.end-inner { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.end-inner h2 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 16px; }
.end-inner .lead { margin: 0 auto 24px; }
.end-inner .ticks { text-align: left; }
.end-inner .btn { margin-bottom: 18px; }
.end-inner .cta-stack { margin-bottom: 4px; }
.end-inner .cta-stack .btn { margin: 0; }
.end-inner .reassure, .end-inner .pay { justify-content: center; }

/* ---------- Product page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--sub); padding-top: 16px; padding-bottom: 12px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.pdp { padding-bottom: 56px; }
.pdp-grid { display: grid; gap: 24px; }
.pdp-grid > * { min-width: 0; }
.gallery { position: relative; min-width: 0; }
.gallery-wrap { min-width: 0; }
.photo-note { margin-top: 10px; font-size: 13px; color: var(--sub); }
@media (min-width: 900px) {
  .pdp-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .gallery, .gallery-wrap { position: sticky; top: 128px; }
  .gallery-wrap .gallery { position: relative; top: auto; }
}
/* Photos 3:2, thumbnails square. Keep SLIDE_RATIO in views.js the same */
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--r); background: var(--photo); scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; aspect-ratio: 3 / 2; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.gal-btn { position: absolute; top: calc(50% - 46px); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .15); display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.gal-btn.prev { left: 10px; }
.gal-btn.next { right: 10px; }
.gal-count { position: absolute; top: 12px; right: 12px; background: color-mix(in srgb, var(--ink) 80%, transparent); color: var(--bg); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 99px; }
@media (max-width: 699px) { .gal-count { right: 0; } }
.thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.thumbs button { position: relative; flex: 0 0 72px; aspect-ratio: 1 / 1; border: 2px solid transparent; border-radius: var(--r); padding: 0; overflow: hidden; background: var(--photo); cursor: pointer; }
.thumbs button[aria-current] { border-color: var(--ink); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .thumbs button { flex-basis: 88px; } }
.thumb-tag { position: absolute; left: 4px; bottom: 4px; padding: 2px 5px; border-radius: 3px; background: var(--ink); color: var(--bg); font: 700 9px/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
/* The labelled feature photo */
.slide.annot { position: relative; }
.pin { position: absolute; display: flex; align-items: center; gap: 6px; transform: translate(-7px, -50%); pointer-events: none; }
.pin.l { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.pin i { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 15%, transparent); }
.pin b { padding: 5px 8px; border-radius: 4px; background: var(--ink); color: var(--bg); font: 600 11px/1.2 var(--font-body); white-space: nowrap; }
@media (min-width: 700px) { .pin b { font-size: 13px; padding: 6px 10px; } }

.buy h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 8px; }
.buy .rating { margin-bottom: 12px; }
.buy-headline { font-size: 18px; font-weight: 500; color: var(--sub); margin-bottom: 16px; }
/* Phones: every sub line 16px (Nate, 16 Oct 2026) */
@media (max-width: 699px) { .lead, .buy-headline, .dek, .list-txt p { font-size: 16px; } }
.stock { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; margin: 14px 0 18px; }
.stock .dot { margin-top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 15%, transparent); flex: none; }
.stock.preorder .dot { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 20%, transparent); }
.stock.soldout .dot { background: var(--line); box-shadow: 0 0 0 1px var(--sub); }
.buy .ticks { margin-bottom: 20px; }
.pre-box { display: flex; gap: 12px; background: var(--soft); border-radius: var(--r); padding: 16px; margin-bottom: 18px; font-size: 15px; }
.pre-box .ic { color: var(--accent); }
.pre-box b { margin-right: 8px; }
.pre-box p { margin: 4px 0 0; color: var(--sub); }
.pre-box .timer { margin-left: 0; vertical-align: 1px; }
.buy-form { margin-bottom: 12px; }
.pair-pick { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
.pair-pick legend { font-size: 15px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.pair-pick legend b { color: var(--deal); }
.pair-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--bg); transition: border-color .15s, background .15s; min-height: 64px; }
.pair-opt:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--bg)); }
.pair-opt:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.pair-opt input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; margin: 0; }
.pair-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--photo); flex: none; }
.pair-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; font-size: 15px; }
.save-txt { color: var(--deal); font-weight: 700; font-size: 12px; }
.pair-price { font-weight: 700; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.secure { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--sub); margin: 0 0 18px; }
.secure .ic, .secure .shopify { width: 16px; height: 16px; flex: none; }
/* "Secure checkout" and the payment logos on one line, centred under the button */
.secure-block { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px; margin: 0 0 18px; }
.secure-block .secure { margin: 0; }
.secure-block .pay { justify-content: center; }
@media (max-width: 899px) { .secure-block .pi { width: 32px; height: 20px; } .secure-block .pay { gap: 5px; } }
@media (min-width: 900px) { .secure-block .pi { width: 36px; height: 23px; } }
.assure { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.assure li { display: flex; gap: 12px; font-size: 14px; line-height: 1.45; }
.assure .ic { color: var(--accent); }
.assure.small li { font-size: 14px; font-weight: 500; }
.mini-review { margin: 0 0 20px; background: var(--soft); border-radius: var(--r); padding: 16px 18px; }
.mini-review blockquote { margin: 6px 0; font-weight: 600; }
.mini-review figcaption { font-size: 13px; color: var(--sub); }
.mini-reviews { margin: 0 0 20px; }
.mr-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r); }
.mr-track::-webkit-scrollbar { display: none; }
.mr-track .mini-review { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.mr-dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.mr-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.mr-dots button[aria-current="true"] { background: var(--ink); }
.tabs details { border-top: 1px solid var(--line); }
.tabs details:last-child { border-bottom: 1px solid var(--line); }
.tabs summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 700; cursor: pointer; }
.tabs summary::-webkit-details-marker { display: none; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; }
.spec-table th, .spec-table td { text-align: left; padding: 9px 10px; vertical-align: top; }
.spec-table th { color: var(--sub); font-weight: 600; width: 42%; }
.spec-table tr:nth-child(odd) { background: var(--soft); }
.tab-text { font-size: 14px; color: var(--sub); padding-bottom: 16px; }
.box-list { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 10px; font-size: 14px; }
.box-list li { display: flex; gap: 10px; }
.box-list .ic { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.box-list.big { font-size: 16px; gap: 14px; }
.box-list.big { gap: 0; }
.box-list.big li { padding: 14px 0; }
.box-list.big li + li { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .box-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; } }
.story-sec h2 { margin-bottom: 16px; }

/* Product descriptions from Shopify: lists, tables, headings */
.desc { margin: 8px 0 24px; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.desc > :first-child { margin-top: 0; }
.desc h2, .desc h3 { font: var(--head-weight) clamp(20px, 2.2vw, 26px)/1.2 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); margin: 32px 0 12px; }
.desc h2 strong, .desc h3 strong { font-weight: inherit; }
.desc p { margin: 0 0 14px; }
.desc img, .desc iframe, .desc video { max-width: 100%; height: auto; }
.desc img { display: block; border-radius: var(--r); margin: 0 0 14px; }
.desc ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.desc ul li { position: relative; padding-left: 26px; }
.desc ul li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.desc table { width: 100%; border-collapse: collapse; border: 0; font-size: 14px; margin: 0 0 24px; }
.desc td, .desc th { border: 0; text-align: left; padding: 9px 10px; vertical-align: top; overflow-wrap: anywhere; }
.desc tr:nth-child(odd) { background: var(--soft); }
.desc td:first-child, .desc th:first-child { color: var(--sub); font-weight: 600; width: 42%; }

/* Pinned buy bars: product pages (phones and tablets), every other page (all sizes), cart (phones) */
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--bg); color: var(--ink); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(0, 0, 0, .06); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); transform: translateY(110%); transition: transform .25s; }
.sticky-buy.on { transform: none; }
.sticky-inner { display: flex; align-items: center; gap: 12px; }
.sticky-info { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.sticky-info b { font: var(--head-weight) 16px/1.25 var(--font-head); letter-spacing: var(--head-tracking); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-info .st { width: 12px; height: 12px; }
.sticky-info > span { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.sticky-info .was { font-size: 12px; font-weight: 400; }
.sticky-buy .btn { min-height: 48px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
@media (max-width: 599px) { .sticky-buy .btn { padding: 0 14px; font-size: 13px; } }
@media (min-width: 1100px) { .sticky-buy { display: none; } .sticky-buy.home-sticky { display: block; } .home-sticky .sticky-inner { max-width: 1000px; } }
.home-sticky .sticky-info b { font-size: 17px; white-space: normal; overflow: visible; text-overflow: clip; }
.cart-sticky .sticky-info span { color: var(--sub); font-size: 13px; }
@media (min-width: 900px) { .cart-sticky { display: none; } }
/* Room under the footer while a bar is pinned over it, so the last line stays readable */
@media (max-width: 1099px) { body:has([data-sticky].on) .site-footer { padding-bottom: 96px; } }
body:has([data-sticky-home].on) .site-footer { padding-bottom: 110px; }

/* Countdown badges, pulsing softly (still for people who turn motion off) */
.timer { display: inline-block; vertical-align: 2px; margin-left: 4px; padding: 3px 7px; border-radius: 4px; background: var(--button); color: var(--button-ink); font: 700 12px/1.2 var(--font-body); letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; animation: timer-pulse 2s ease-out infinite; }
@keyframes timer-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--badge) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .timer { animation: none; } }

/* ---------- Collections and plain pages ---------- */
.col-head, .page-head { padding: clamp(28px, 6vw, 72px) 0 clamp(20px, 4vw, 40px); background: var(--soft); }
.page-head.band { background: var(--band); }
.col-head h1, .page-head h1 { margin-bottom: 14px; }
.col-head .lead, .page-head .lead { margin-bottom: 16px; }
.col-head .rating { margin: 0; }
.page-head .btn { margin-top: 12px; }
.col-grid { padding-top: 32px; }
@media (max-width: 699px) { .col-head .lead { font-size: 16px; margin-bottom: 10px; } .col-grid { padding-top: 20px; } }
.help-band { padding: 40px 0; }
.help-grid { display: grid; gap: 12px; }
.help-grid a { display: flex; gap: 14px; align-items: center; background: var(--bg); border-radius: var(--r); padding: 20px; text-decoration: none; border: 1px solid var(--line); }
.help-grid .ic { color: var(--accent); }
.help-grid span { display: flex; flex-direction: column; font-size: 14px; color: var(--sub); }
.help-grid b { color: var(--ink); font-size: 16px; }
@media (min-width: 800px) { .help-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

/* About */
.value-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.value-list li { position: relative; background: var(--bg); border-radius: var(--r); padding: 26px 22px; }
.value-list .step-n { display: block; margin-bottom: 10px; }
.value-list h3 { margin-bottom: 6px; font-size: 19px; }
.value-list p { color: var(--sub); }
@media (min-width: 800px) { .value-list { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .value-list { grid-template-columns: repeat(4, 1fr); } }

/* Forms */
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
input[type='email'], input[type='text'], input[type='tel'], input[type='number'], select, textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--ink) 22%, var(--bg)); border-radius: var(--r); background: var(--bg); color: var(--ink); font-size: 16px; font-weight: 400; }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.contact-form { display: grid; gap: 14px; background: var(--soft); border-radius: var(--r); padding: 24px; }
.contact-form h2 { font-size: 28px; }
.two { display: grid; gap: 14px; }
@media (min-width: 700px) { .two { grid-template-columns: 1fr 1fr; } }
.sent { background: var(--soft); border-radius: var(--r); padding: 32px; }
.sent h2 { margin: 12px 0; font-size: 28px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; } }
.form-msg { background: var(--error-bg); color: var(--error); border-radius: var(--r); padding: 12px 14px; font-weight: 600; font-size: 14px; }
.form-note { font-size: 13px; color: var(--sub); margin: 0; }

/* Policies */
.prose { max-width: 760px; margin: 0 auto; font-size: 16px; }
.prose h2 { font-size: 24px; margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose li { margin-bottom: 6px; }

/* ---------- Cart ---------- */
.cart-page { padding: 32px 0 64px; }
.cart-page h1 { font-size: clamp(32px, 4.5vw, 44px); margin-bottom: 20px; }
.empty-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
@media (min-width: 700px) { .cart-empty .wrap { text-align: center; } .cart-empty .lead { margin-left: auto; margin-right: auto; } .cart-empty .empty-cta { align-items: center; } }
/* Checkout steps: three equal columns joined by a line, one row on every screen */
.cart-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 480px; padding: 0; margin: 0 auto 24px; font-size: 13px; color: var(--sub); }
.cart-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.cart-steps li + li::before { content: ''; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.cart-steps span { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); font-weight: 700; font-size: 12px; color: var(--ink); }
.cart-steps [aria-current] { color: var(--ink); font-weight: 700; }
.cart-steps [aria-current] span { background: var(--ink); color: var(--bg); }
@media (min-width: 900px) {
  .cart-steps { max-width: 580px; font-size: 15px; }
  .cart-steps li { gap: 8px; }
  .cart-steps span { width: 30px; height: 30px; font-size: 14px; }
  .cart-steps li + li::before { top: 14px; }
}
.cart-grid { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) { .cart-grid { grid-template-columns: 1.4fr 1fr; gap: 48px; } .summary { position: sticky; top: 132px; } }
.lines { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.line { position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line-img img { width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--photo); }
/* The price sits top right, the rest of the line runs full width under it */
.line-info { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.line-name { margin-right: 84px; font: var(--head-weight) 17px/1.25 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); text-decoration: none; }
.line-unit { font-size: 14px; }
.line-var { font-size: 13px; color: var(--sub); }
.line-note { align-self: flex-start; margin: 2px 0; padding: 4px 9px; border-radius: 4px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; }
.line-save { font-size: 13px; color: var(--deal); font-weight: 700; }
.line-total { position: absolute; top: 18px; right: 0; font-weight: 700; }
.qty { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.qty form { display: inline; }
.qty button { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--bg); border-radius: var(--r); display: grid; place-items: center; cursor: pointer; }
.qty .ic { width: 16px; height: 16px; }
.qty > span { min-width: 28px; text-align: center; font-weight: 700; }
.qty .remove button { width: auto; border: 0; background: none; text-decoration: underline; color: var(--sub); font-size: 13px; padding: 0 8px; }
.lines + .nudge { margin: 20px 0 0; }
@media (min-width: 900px) { .lines + .nudge { margin-top: 40px; } }
.nudge { background: var(--soft); border-radius: var(--r); padding: 22px; margin-bottom: 18px; }
.nudge.done { display: flex; align-items: center; gap: 8px; padding: 16px; font-size: 15px; }
.nudge-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 12px/1.3 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.nudge-kicker .ic { width: 16px; height: 16px; }
.nudge h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 8px; }
.nudge-sub { margin: 0 0 12px; font-size: 15px; color: var(--sub); }
.nudge-trust { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; font-weight: 600; }
.nudge-trust li { display: flex; align-items: center; gap: 6px; }
.nudge-trust .ic { width: 16px; height: 16px; color: var(--ok); stroke-width: 2.4; }
.nudge-list { display: grid; gap: 14px; }
@media (min-width: 700px) { .nudge-list { grid-template-columns: 1fr 1fr; } }
.nudge-item { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.nudge-img img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--photo); }
@media (max-width: 699px) { .nudge-img img { aspect-ratio: 16 / 9; } }
.nudge-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.nudge-rating { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
.nudge-body h3 { margin: 0; font-size: 18px; }
.nudge-body h3 a { text-decoration: none; }
.nudge-best { margin: 0; font-size: 14px; color: var(--sub); }
.nudge-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: auto 0 0; padding-top: 6px; }
.nudge-price .price { font-size: 22px; font-weight: 700; }
.nudge-price .save { white-space: nowrap; }
.nudge-item .btn { min-height: 46px; padding: 0 14px; font-size: 14px; gap: 8px; white-space: nowrap; }
.nudge-more { align-self: center; font-size: 13px; font-weight: 600; text-decoration: none; }
.nudge-more:hover { text-decoration: underline; }
/* Order summary */
.summary { border-radius: var(--r); padding: 22px; }
.summary.band { background: var(--soft); color: var(--ink); } /* light sand yellow, not the blue band (Nate, 16 Oct 2026) */
.summary h2 { font-size: 24px; margin-bottom: 12px; }
.sum-items { list-style: none; padding: 0 0 12px; margin: 0 0 6px; display: grid; gap: 12px; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.sum-items li { display: flex; align-items: center; gap: 12px; }
.sum-items img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--photo); flex: none; }
.sum-items span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; font-size: 15px; }
.sum-items small { font-size: 12px; color: color-mix(in srgb, currentColor 65%, transparent); }
.sum-items .sum-price { flex: none; align-items: flex-end; font-weight: 600; }
.sum-items .sum-price s { font-size: 12px; font-weight: 400; color: color-mix(in srgb, currentColor 60%, transparent); }
.summary dl { margin: 0 0 12px; }
.summary dl div { display: flex; justify-content: space-between; padding: 8px 0; }
.summary dt { color: color-mix(in srgb, currentColor 70%, transparent); }
.summary dd { margin: 0; font-weight: 600; }
.summary .sv dd, .summary .sv dt { color: var(--deal); font-weight: 700; }
.summary .free { color: var(--ok); }
.summary .tot { align-items: center; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); margin-top: 6px; padding-top: 14px; font-size: 20px; }
.summary .tot dt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: inherit; font-weight: 700; }
.summary .tot dd { font-weight: 700; }
.you-save { display: inline-block; padding: 4px 9px; border-radius: 4px; background: var(--deal-bg); color: var(--deal); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.summary .paylater { margin-bottom: 14px; }
.summary form { margin: 14px 0 12px; }
.ship-goal { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; background: var(--bg); border-radius: var(--r); font-size: 14px; }
.ship-goal .ic { width: 18px; height: 18px; }
.deal-line { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0 0 14px; padding: 14px 16px; background: var(--bg); border-radius: var(--r); font-size: 16px; text-align: center; }
.deal-line .ic { width: 20px; height: 20px; color: var(--accent); }
.deal-line .timer { margin-left: 0; vertical-align: 0; font-size: 14px; padding: 4px 9px; }
.summary .secure { color: color-mix(in srgb, currentColor 70%, transparent); }
.summary .assure { border-top-color: color-mix(in srgb, currentColor 15%, transparent); }
.summary .mini-review { background: var(--bg); margin: 16px 0 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--footer); color: var(--footer-ink); border-top: 1px solid var(--line); padding: 56px 0 20px; }
.news { display: grid; gap: 20px; padding-bottom: 40px; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); margin-bottom: 40px; }
.news h2 { margin-bottom: 8px; font-size: clamp(24px, 3vw, 32px); }
.news p { color: color-mix(in srgb, currentColor 70%, transparent); }
.news-form { display: grid; gap: 10px; }
.news-form input { min-height: 50px; }
.news .form-msg { margin: 0; }
@media (min-width: 900px) { .news { grid-template-columns: 1fr 1fr; align-items: center; } .news-form { grid-template-columns: 1fr auto; } .news-form .form-note, .news-form .form-msg { grid-column: 1 / -1; } }
.foot-cols { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.foot-brand { grid-column: 1 / -1; }
.foot-logo { display: inline-block; margin-bottom: 14px; }
.foot-logo .logo-img { height: 32px; }
.foot-brand p { color: color-mix(in srgb, currentColor 70%, transparent); font-size: 14px; max-width: 34ch; }
.foot-cols h3 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); margin-bottom: 14px; }
.foot-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 14px; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-contact li { color: color-mix(in srgb, currentColor 80%, transparent); }
.social { display: flex !important; gap: 6px !important; margin-top: 16px !important; }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, currentColor 7%, transparent); }
.social .ic { width: 18px; height: 18px; }
@media (min-width: 900px) { .foot-cols { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr; } .foot-brand { grid-column: auto; } }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); font-size: 13px; color: color-mix(in srgb, currentColor 70%, transparent); }
.foot-bottom p { margin: 0; }
.foot-bottom a { color: inherit; }
/* Phones: copyright and credit on one row, payment logos under. Desktop: copyright | logos in the middle | credit */
.legal-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; width: 100%; }
/* Little Dips: no credit, so the pay icons sit on the copyright line, on the right (Nate, 16 Oct 2026) */
.legal-row .pay { justify-content: flex-end; }
@media (max-width: 899px) { .legal-row .pi { width: 32px; height: 20px; } .legal-row .pay { gap: 5px; } }
.credit a { text-decoration: none; }
.credit a:hover { text-decoration: underline; }
/* Cart: a bare footer, and a header with just the logo and the contact line */
.site-footer.slim { padding-top: 20px; }
.site-footer.slim .foot-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
.site-footer.slim .legal-row { grid-template-columns: 1fr auto; }
.site-header.slim .header-inner { justify-content: space-between; }
.site-header.slim .logo { margin-right: 0; }
.site-header.slim .header-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-header.slim .header-phone .ic { width: 18px; height: 18px; }

.img-missing { display: block; width: 100%; height: 100%; min-height: 120px; background: var(--photo); }

/* ---------- Sign-up code (footer and pop-up) ---------- */
.signup-done { display: grid; gap: 10px; }
.signup-done:focus { outline: none; }
.signup-done p { margin: 0; }
.done-title { display: flex; align-items: center; gap: 12px; font: var(--head-weight) 26px/1.1 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); }
.done-title .ic { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--button); color: var(--button-ink); stroke-width: 2.6; }
.code-label { margin-top: 6px !important; font: 600 12px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); }
.code-box { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: var(--r); background: var(--soft); }
.code { flex: 1; min-width: 0; font: 700 28px/1.1 var(--font-body); letter-spacing: .06em; font-variant-numeric: slashed-zero; color: var(--ink); user-select: all; -webkit-user-select: all; }
.code-copy { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--btn-r); background: var(--bg); color: var(--ink); font: 600 14px/1 var(--font-body); cursor: pointer; transition: background .2s; }
.code-copy:hover { background: var(--soft); }
.code-copy .ic { width: 18px; height: 18px; }
.done-use { font-size: 15px; color: var(--sub); }
.signup-done .btn { margin-top: 8px; }

/* ---------- Sign-up pop-up: a box on desktop, a card then a bottom sheet on phones ---------- */
.fn { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.fn-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .22s ease; }
.fn-box { position: relative; display: grid; grid-template-columns: 5fr 6fr; width: min(880px, 100%); max-height: calc(100vh - 48px); overflow: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); border-radius: calc(var(--r) + 4px); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .22s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.fn.on .fn-back { opacity: 1; }
.fn.on .fn-box { opacity: 1; transform: none; }
.fn-box:focus { outline: none; }
.fn-photo { position: relative; min-height: 100%; background: var(--photo); overflow: hidden; }
.fn-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fn-tag { position: absolute; left: 16px; top: 16px; padding: 8px 11px; border-radius: 4px; background: var(--badge); color: var(--badge-ink); font: 700 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fn-body { display: flex; flex-direction: column; justify-content: center; min-height: 500px; padding: 52px 44px 36px; }
.fn-body h2 { font-size: clamp(30px, 3.6vw, 38px); line-height: 1.05; }
.fn-body h2 .accent { display: block; color: var(--ink); }  /* same size as the rest of the headline, never bigger */
.fn-sub { margin: 16px 0 22px; font-size: 16px; color: var(--sub); }
.fn-form { display: grid; gap: 10px; }
.fn-form input { min-height: 54px; }
.fn-form .btn { width: 100%; min-height: 56px; font-size: 16px; }
.fn-form .form-msg { margin: 0; }
.fn-form .form-note { margin: 2px 0 0; font-size: 12.5px; text-align: center; }
.fn-x { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; transition: background .2s; }
.fn-x:hover { background: var(--line); }
.fn-x .ic { width: 18px; height: 18px; }
html.fn-lock { overflow: hidden; scrollbar-gutter: stable; } /* no page scroll behind it, and no jump as the scroll bar goes */
/* Phones: a sheet up from the bottom, opened from the card (so it never covers the page uninvited) */
@media (max-width: 767px) {
  .fn { place-items: end stretch; padding: 0; }
  .fn-box { grid-template-columns: 1fr; width: 100%; max-height: 88dvh; border-radius: 16px 16px 0 0; opacity: 1; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom); }
  .fn-photo { height: 128px; min-height: 0; }
  .fn-tag { left: 16px; top: auto; bottom: 14px; }
  .fn-body { min-height: 0; padding: 22px 20px 20px; }
  .fn-body h2 { font-size: 28px; }
  .fn-sub { margin: 10px 0 16px; font-size: 15px; }
  .done-title { font-size: 24px; }
  .code { font-size: 24px; }
}
/* The phone card: one line and a button, just above whichever bar is pinned to the bottom (site.js sets --fn-lift) */
.fn-card { position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--fn-lift, env(safe-area-inset-bottom, 0px))); z-index: 44; display: flex; align-items: stretch; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); transform: translateY(calc(100% + 120px)); transition: transform .32s cubic-bezier(.2, .8, .2, 1), bottom .25s; }
.fn-card.on { transform: none; }
.fn-card { background: var(--badge); color: var(--badge-ink); border-color: transparent; } /* Sun Yellow so it stands out (Nate, 16 Oct 2026) */
.fn-card .fn-card-open .ic { color: var(--badge-ink); }
.fn-card .fn-card-x { border-left-color: rgba(11, 34, 53, .15); color: var(--badge-ink); }
.fn-card-open { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 10px 0 14px; border: 0; background: none; color: inherit; font: 600 15px/1.25 var(--font-body); text-align: left; cursor: pointer; }
.fn-card-open > span:not(.arr) { flex: 1; }
.fn-card-open .ic { width: 20px; height: 20px; color: var(--accent); }
.fn-card-open .arr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--button); color: var(--button-ink); font-size: 17px; }
.fn-card-x { flex: none; display: grid; place-items: center; width: 46px; padding: 0; border: 0; border-left: 1px solid var(--line); background: none; color: var(--sub); cursor: pointer; }
.fn-card-x .ic { width: 18px; height: 18px; }
@media (min-width: 768px) { .fn-card { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .fn-back, .fn-box, .fn-card { transition: none; } }

/* ---------- Landing pages for ads (content.js landingPages) ---------- */
/* The "Advertisement" label on advertorials and listicles: the top line of the page, pinned with the header */
.ad-label { margin: 0; padding: 6px 16px; background: var(--ink); color: var(--bg); text-align: center; font: 700 11px/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
html:has(.ad-label) { scroll-padding-top: 150px; }
/* Small footer: the policies and the contact page */
.site-footer.lander { padding-top: 32px; }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 0; margin: 0; font-size: 14px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.site-footer.lander .foot-bottom { margin-top: 24px; }

/* Advertorial and listicle: a narrow column that reads like an article */
.article-top { padding: clamp(28px, 5vw, 56px) 0 0; }
.article { padding: 0 0 var(--pad); }
.article-col { max-width: 760px; margin: 0 auto; }
.article-top h1 { font-size: clamp(32px, 4.8vw, 52px); margin-bottom: 16px; }
.dek { font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--sub); margin-bottom: 22px; }
.byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; margin: 0 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--sub); }
.byline b { color: var(--ink); }
.byline .avatar { flex: none; width: 36px; height: 36px; font-size: 13px; }
.article-img { margin: 0 0 28px; }
.article-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.article-body { font-size: 18px; line-height: 1.7; }
.article-body > h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 14px; }
.article-body > :first-child { margin-top: 0; }
.article-body > p { margin-bottom: 1.1em; }
.article-body > .article-img { margin: 28px 0 0; }
/* Listicle: numbered reasons, the photo beside the words on desktop, swapping sides */
.listicle-wrap { max-width: 1040px; margin: 0 auto; }
.listicle-wrap .dek { max-width: 760px; }
.listicle { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.list-item { display: grid; gap: 18px; }
.list-item > * { min-width: 0; }
.list-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.list-n { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--ink); color: var(--bg); font: var(--head-weight) 20px/1 var(--font-head); }
.list-item h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.list-txt p { font-size: 17px; color: var(--sub); }
@media (min-width: 800px) {
  .list-item { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .list-item.flip .list-img { order: 2; }
}
/* The product box, mid-article and at the end */
.offer-box { display: grid; gap: 20px; max-width: 760px; margin: clamp(36px, 6vw, 64px) auto; padding: 18px; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r); font-size: 16px; line-height: 1.6; }
.offer-box > * { min-width: 0; }
.offer-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.offer-body .eyebrow { margin-bottom: 10px; }
.offer-name { margin: 0 0 4px; font: var(--head-weight) clamp(24px, 3vw, 30px)/1.15 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); }
.offer-head { color: var(--sub); margin-bottom: 10px; }
.offer-box .rating { margin: 0 0 10px; }
.offer-box .price-row { margin-bottom: 14px; }
.offer-box .stock { margin: 0 0 14px; }
.offer-box .ticks { margin-bottom: 16px; }
.offer-box .ticks li { font-size: 15px; }
.offer-box .pre-box { background: var(--bg); }
.offer-end .offer-box { margin: 0 auto; }
@media (min-width: 700px) { .offer-box { grid-template-columns: 1fr 1.15fr; align-items: center; gap: 28px; padding: 24px; } }

/* Sales page: the buy box in the hero, then the long story */
/* Phones and tablets: the product photo first, so ad visitors see what it is before the price */
@media (max-width: 899px) {
  .sales-hero .hero-img { order: -1; }
  .sales-hero .hero-img img { aspect-ratio: 3 / 2; }
}
.sales-hero .hero-copy > .rating { margin-bottom: 14px; }
.sales-hero .lead { margin-bottom: 18px; }
.sales-hero .ticks { margin-bottom: 20px; }
.sales-hero .stock { margin: 10px 0 16px; }
.sales-hero .pre-box, .sales-hero .buy-form, .sales-hero .secure-block { max-width: 480px; }
.sales-hero .pre-box { background: var(--bg); }
.sales-hero .secure-block { margin-bottom: 0; }
.pain { list-style: none; display: grid; gap: 12px; max-width: 760px; padding: 0; margin: 0 auto; }
.pain li { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r); font-size: 17px; font-weight: 500; }
.pain .ic { color: var(--sub); }
.guarantee { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 680px; margin: 0 auto; border-radius: var(--r); text-align: center; }
.guarantee .ic { width: 48px; height: 48px; color: var(--accent); }
.guarantee .lead { margin: 0 auto; }

/* Quiz: every question at once without the script; one at a time with it (site.js) */
.quiz-sec { padding: clamp(32px, 6vw, 72px) 0 var(--pad); background: var(--soft); }
.quiz-wrap { max-width: 820px; margin: 0 auto; }
.quiz-intro { display: flex; flex-direction: column; align-items: center; margin-bottom: 48px; text-align: center; }
.quiz-wrap.js .quiz-intro { margin-bottom: 0; }
/* The steps differ in height; this stops the footer jumping up the screen between them */
.quiz-wrap.js { min-height: 520px; }
.quiz-art { width: min(260px, 64%); margin-bottom: 24px; }
.quiz-art img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; background: var(--photo); }
.quiz-intro .eyebrow { justify-content: center; }
.quiz-intro h1 { margin-bottom: 14px; }
.quiz-intro .lead { margin: 0 auto 26px; }
.quiz-meta { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; color: var(--sub); }
.quiz-meta .ic { width: 18px; height: 18px; }
.quiz-q { min-width: 0; margin: 0 0 40px; padding: 0; border: 0; }
.quiz-q legend { display: block; width: 100%; margin: 0 0 22px; padding: 0; text-align: center; font: var(--head-weight) clamp(24px, 3.4vw, 34px)/1.15 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); }
.quiz-n { display: block; margin-bottom: 10px; font: 600 12px/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quiz-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 124px; padding: 18px 12px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--bg); text-align: center; font-weight: 600; line-height: 1.3; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.quiz-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
.quiz-opt:hover { border-color: color-mix(in srgb, var(--ink) 40%, var(--bg)); }
.quiz-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.quiz-opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.quiz-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.quiz-opt .ic { color: var(--accent); }
.quiz-opt:has(img) { justify-content: flex-start; padding: 8px 8px 14px; }
.quiz-opt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r) - 2px); background: var(--photo); }
@media (min-width: 700px) {
  .quiz-opts.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quiz-opts.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quiz-opts.n3 .quiz-opt:last-child { grid-column: auto; }
}
.quiz-go { text-align: center; }
/* With the script: back, the count and a progress bar over one question at a time */
.quiz-top { margin-bottom: 26px; }
.quiz-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--sub); }
.quiz-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; background: none; color: var(--ink); font-weight: 600; cursor: pointer; }
.quiz-back .ic { width: 18px; height: 18px; }
.quiz-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.quiz-bar span { display: block; width: 0; height: 100%; background: var(--ink); transition: width .3s ease; }
.quiz-wrap.js .quiz-go, .quiz-wrap.js .quiz-n { display: none; }
.quiz-wrap.js .quiz-q { margin: 0; animation: quiz-in .3s ease; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(8px); } }
.quiz-loading { padding: 64px 0; text-align: center; font: var(--head-weight) 22px/1.3 var(--font-head); }
.spin { display: block; width: 46px; height: 46px; margin: 0 auto 20px; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.quiz-email { display: flex; flex-direction: column; align-items: center; max-width: 520px; margin: 0 auto; text-align: center; }
.quiz-email > .ic { width: 52px; height: 52px; margin-bottom: 18px; padding: 12px; border-radius: 50%; background: var(--button); color: var(--button-ink); stroke-width: 2.4; }
.quiz-email h2 { margin-bottom: 12px; outline: none; }
.quiz-email .lead { margin: 0 auto 22px; }
.quiz-email form { display: grid; gap: 10px; width: 100%; }
.quiz-email .form-msg { margin: 0; }
.quiz-skip { margin-top: 16px; padding: 8px; border: 0; background: none; color: var(--sub); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } .quiz-wrap.js .quiz-q { animation: none; } }
/* Quiz result: the match, ready to buy */
.quiz-result { padding: clamp(24px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.result-grid { display: grid; gap: 24px; }
.result-grid > * { min-width: 0; }
.result-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.result-copy h1 { font-size: clamp(32px, 4.4vw, 48px); margin-bottom: 8px; }
.result-picks { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; }
.result-picks li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--soft); font-size: 13px; font-weight: 600; }
.result-picks .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.result-copy .price-row { margin-bottom: 16px; }
.result-copy .ticks { margin-bottom: 18px; }
.quiz-code { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 14px 16px; border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: var(--r); font-size: 15px; }
.quiz-code .ic { color: var(--ok); stroke-width: 2.4; }
.result-copy .buy-form { margin-bottom: 14px; }
.result-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; font-size: 14px; font-weight: 600; }
.result-links a { text-decoration: none; }
.result-links a:hover { text-decoration: underline; }
.quiz-join .news { margin: 0; padding: 0; border: 0; }
@media (min-width: 900px) {
  .result-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
  .also .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); justify-content: center; }
}

/* ---------- Cart drawer (site.js): slides in from the right, the checkout button always in view ---------- */
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .3s; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100%); background: var(--bg); color: var(--ink); box-shadow: -12px 0 40px rgba(0, 0, 0, .15); transform: translateX(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); outline: none; }
.drawer.on .drawer-back { opacity: 1; }
.drawer.on .drawer-panel { transform: none; }
/* Phones and tablets: the cart fills the screen, none of the page behind it shows (Nate, 16 Oct 2026) */
@media (max-width: 1023px) { .drawer-panel { width: 100%; box-shadow: none; } }
html.drawer-lock { overflow: hidden; scrollbar-gutter: stable; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 20px; }
.drawer-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; transition: opacity .2s; }
.drawer-body[aria-busy="true"] { opacity: .6; pointer-events: none; }
.drawer-body > .spin { margin: 64px auto; }
.drawer-body > .form-msg { margin: 14px 20px 0; }
.drawer-empty { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 20px 28px; text-align: center; }
.drawer-empty p { margin: 0; font: var(--head-weight) 22px/1.3 var(--font-head); letter-spacing: var(--head-tracking); }
/* Goals: free shipping, then the free gift */
.goals { padding: 16px 20px 18px; border-bottom: 1px solid var(--line); }
.goal-msg { margin: 0 0 14px; font-size: 14px; text-align: center; }
.goal-bar { position: relative; height: 6px; margin: 0 14px 0 4px; border-radius: 3px; background: var(--line); }
.goal-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--ok); transition: width .4s ease; }
.goal-mark { position: absolute; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--sub); transform: translate(-50%, -50%); }
.goal-mark .ic { width: 14px; height: 14px; }
.goal-mark.on { border-color: var(--ok); background: var(--ok); color: var(--bg); }
.cart-page .goals { margin: 0 0 16px; padding: 14px 16px 16px; border: 0; border-radius: var(--r); background: color-mix(in srgb, var(--ok) 12%, var(--bg)); } /* pale green, like the bar. Above the products (Nate, 16 Oct 2026) */
.cart-page[aria-busy="true"] .cart-grid { opacity: .6; pointer-events: none; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .drawer-back, .drawer-panel, .goal-fill { transition: none; } }
/* The items */
.dlines { list-style: none; padding: 0 20px; margin: 0; }
.dline { position: relative; display: grid; grid-template-columns: 80px 1fr auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dline-img img { width: 80px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.dline-info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.dline-name { font: var(--head-weight) 16px/1.25 var(--font-head); letter-spacing: var(--head-tracking); text-transform: var(--head-case); text-decoration: none; }
.dline-total { font-weight: 700; }
.dline .qty { margin-top: 4px; }
.dline .qty button { width: 32px; height: 32px; }
.gift-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 4px 9px; border-radius: 4px; background: var(--soft); font-size: 13px; font-weight: 700; }
.gift-tag .ic { width: 15px; height: 15px; }
.line .gift-tag { align-self: flex-start; }
/* Offers: the other half of the bundle, then the best sellers */
.ups { padding: 18px 20px; }
.ups h3 { margin: 0 0 12px; font-size: 15px; }
.ups ul { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; }
.up { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); }
.up-pic img { width: 56px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: calc(var(--r) - 2px); background: var(--photo); }
.up-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.up-info a { font-weight: 600; text-decoration: none; }
.up-info a:hover { text-decoration: underline; }
.up-info small { color: var(--deal); font-weight: 700; }
.up .btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
/* The bottom: protection, the total, the sale end, checkout and the trust badges */
.drawer-foot { position: sticky; bottom: 0; margin-top: auto; padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); box-shadow: 0 -8px 24px rgba(0, 0, 0, .05); }
.drawer-sum { margin: 0 0 12px; font-size: 14px; }
.drawer-sum div { display: flex; justify-content: space-between; padding: 3px 0; }
.drawer-sum dt { color: var(--sub); }
.drawer-sum dd { margin: 0; font-weight: 600; }
.drawer-sum .sv dt, .drawer-sum .sv dd { color: var(--deal); font-weight: 700; }
.drawer-sum .free { color: var(--ok); }
/* Savings sit left of the number they belong to (Nate, 16 Oct 2026) */
.summary dl dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.summary dl .you-save { padding: 2px 8px; font-size: 12px; }
.drawer-sum dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.drawer-sum .you-save { padding: 2px 8px; font-size: 12px; }
.drawer-sum .tot { align-items: center; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 18px; }
.drawer-sum .tot dt { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--ink); font-weight: 700; }
.drawer-sum .tot dd { font-weight: 700; }
.drawer-foot form { margin: 0; }
.drawer-view { display: block; margin: 10px 0 12px; font-size: 14px; font-weight: 600; text-align: center; text-underline-offset: 3px; }
.drawer-trust { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; margin: 0; font-size: 12px; color: var(--sub); }
.drawer-trust li { display: flex; align-items: center; gap: 5px; }
.drawer-trust .ic { width: 15px; height: 15px; }
/* Shipping protection: a switch, never on until the shopper turns it on */
.protect { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); }
.protect > .ic { flex: none; width: 22px; height: 22px; }
.protect-txt { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.35; }
.protect-txt small { color: var(--sub); font-size: 12px; }
.switch { position: relative; flex: none; width: 46px; height: 28px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: background .2s; }
.switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"] span { transform: translateX(18px); }
.switch:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.summary .protect { margin: 0 0 12px; }
/* A button waiting on the cart */
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.drawer-deal { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 10px 20px; background: var(--soft); font-size: 14px; }
.drawer-deal .ic { width: 18px; height: 18px; }
.drawer-deal .timer { margin-left: 0; vertical-align: 0; }
.timer { background: var(--badge); color: var(--badge-ink); } /* Sun Yellow countdown (Nate, 16 Oct 2026) */
.drawer-body > .protect { margin: 14px 20px 0; }
.drawer-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin: 10px 0; }
.drawer-pay .drawer-view { margin: 0; }
.drawer-pay .pi { width: 32px; height: 20px; }
.drawer-pay .pay { gap: 4px; }
/* Cart drawer (Nate, 16 Oct 2026): Secure checkout beside the card logos, the shipping facts on one line */
.drawer-secure { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.drawer-secure .ic { width: 16px; height: 16px; }
.drawer-trust { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 13px; }
/* The empty cart leads with the deals: each row is one tap to add */
.drawer-deals { padding: 18px 20px 8px; }
.drawer-deals-empty { margin: 0 0 14px; font-size: 14px; color: var(--sub); text-align: center; }
.drawer-deals h3 { margin: 0; font: var(--head-weight) 22px/1.25 var(--font-head); letter-spacing: var(--head-tracking); }
.drawer-deals-name { margin: 2px 0 18px; font-size: 14px; color: var(--sub); }
.drawer-deals ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.drawer-deals form { margin: 0; }
.ddeal { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto 28px; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border: 2px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.ddeal:hover { border-color: var(--accent); }
.ddeal:active { transform: scale(.985); }
.ddeal.picked { border-color: var(--accent); background: var(--band); }
.ddeal .deal-price { text-align: right; }
.ddeal-add { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--button); color: var(--button-ink); }
.ddeal-add .ic { width: 16px; height: 16px; }

/* Stars: an empty star for each one short of 5 */
.stars .st.off { opacity: .2; }

/* Cookie banner: hidden until the tags script or "Cookie settings" opens it. Accept and reject look the same. */
.cookie-bar { display: none; position: fixed; z-index: 85; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 440px; padding: 20px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 40px rgba(0, 0, 0, .18); font-size: 14px; line-height: 1.5; }
html[data-ask-cookies] .cookie-bar { display: block; }
.cookie-bar:focus { outline: none; }
.cookie-title { margin: 0 0 6px; font-size: 18px; }
.cookie-text { margin: 0 0 14px; color: var(--sub); }
.cookie-text a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.cookie-choices { display: grid; gap: 10px; margin: 0 0 14px; padding: 12px; background: var(--soft); border-radius: var(--r); }
.cookie-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.cookie-opt input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.cookie-opt span { color: var(--sub); }
.cookie-opt b { color: var(--ink); font-weight: 600; }
.cookie-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie-btns .btn { min-height: 46px; padding: 10px 12px; font-size: 15px; }
.cookie-more { grid-column: 1 / -1; justify-self: center; padding: 6px; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 700px) { .cookie-bar { left: 20px; bottom: 20px; } }
.cookie-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* "Email me when it's back" under a sold-out product's button */
.restock { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px; background: var(--soft); border-radius: var(--r); }
.restock-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.restock-title .ic { width: 20px; height: 20px; flex: none; }
.restock-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.restock .form-msg { margin: 0; }
.restock-done { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 14px 16px; background: var(--soft); border-radius: var(--r); font-weight: 600; font-size: 15px; }
.restock-done .ic { width: 20px; height: 20px; flex: none; }

/* Reviews: how they are checked (under the reviews), and the review form */
.reviews-how { margin: 18px 0 0; font-size: 13px; color: var(--sub); }
.review-grid { display: grid; gap: 28px; max-width: 980px; margin: 0 auto; }
@media (min-width: 900px) { .review-grid { grid-template-columns: 380px 1fr; align-items: start; } }
.review-product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--photo); }
.star-row { border: 0; margin: 0; padding: 0; }
.star-row legend { padding: 0; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
/* Five stars, picked by tapping: listed 5 to 1 and shown 1 to 5, so a star and the ones before it fill */
.stars-in { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-pick { position: relative; cursor: pointer; color: color-mix(in srgb, var(--ink) 18%, var(--bg)); }
.star-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.star-pick .st { width: 36px; height: 36px; fill: currentColor; stroke: none; }
.star-pick:has(input:checked), .star-pick:has(input:checked) ~ .star-pick, .star-pick:hover, .star-pick:hover ~ .star-pick { color: var(--star); }
.star-pick:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* Blog: the list of posts and a post's body (the HTML from Shopify) */
.post-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card a { display: flex; flex-direction: column; height: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: var(--ink); text-decoration: none; }
.post-img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--photo); }
.post-body { display: flex; flex-direction: column; gap: 8px; padding: 18px; flex: 1; }
.post-body time { font-size: 13px; color: var(--sub); }
.post-title { font: var(--head-weight) 20px/1.25 var(--font-head); letter-spacing: var(--head-tracking); }
.post-ex { color: var(--sub); font-size: 15px; flex: 1; }
.post-more { font-weight: 600; font-size: 14px; }
.post-card a:hover .post-title { text-decoration: underline; text-underline-offset: 3px; }
.older { margin: 32px 0 0; }
.post-body-html > h3 { font-size: 20px; margin: 28px 0 10px; }
.post-body-html > ul, .post-body-html > ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.post-body-html li { margin-bottom: 6px; }
.post-body-html a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.post-cat { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
/* The category links on the blog and category pages */
.cat-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; }
.cat-nav a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.cat-nav a:hover { border-color: var(--ink); }
.cat-nav a[aria-current="page"] { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.article-top .eyebrow a { color: inherit; text-decoration: none; }

/* ---------- Deals on the product page (content.js products deals) ---------- */
.deal-pick { border: 0; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; }
.deal-pick legend { font-size: 16px; font-weight: 700; margin-bottom: 10px; padding: 0; }
.deal-opt { position: relative; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r); cursor: pointer; background: var(--bg); transition: border-color .15s, background .15s, transform .12s; min-height: 68px; }
.deal-opt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--bg)); }
.deal-opt:active { transform: scale(.985); }
.deal-opt:has(input:checked) { border-color: var(--accent); background: var(--band); }
.deal-opt:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.deal-opt input { width: 22px; height: 22px; accent-color: var(--accent); margin: 0; }
.deal-txt { display: flex; flex-direction: column; gap: 3px; line-height: 1.3; min-width: 0; }
.deal-txt b { font-size: 16px; }
.deal-txt small { font-size: 14px; color: var(--sub); }
.deal-txt .deal-save { color: var(--ok); font-weight: 700; font-size: inherit; } /* green, like "Free shipping"; same size as "2 pairs" */
.deal-tag { position: absolute; top: -11px; right: 16px; display: inline-block; padding: 2px 10px; border-radius: 99px; background: var(--badge); color: var(--badge-ink); font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.deal-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; line-height: 1.25; text-align: right; }
.deal-price b { font-size: 17px; }
.deal-price small { font-size: 13px; color: var(--sub); white-space: nowrap; }
.deal-price small.free { color: var(--ok); font-weight: 700; }
@media (max-width: 420px) { .deal-opt { padding: 12px; gap: 10px; } .deal-price small { font-size: 12px; } }

/* ---------- A colour for each pair (content.js products colours) ---------- */
.colour-pick { border: 0; padding: 0; margin: 0 0 18px; }
.colour-pick legend { font-size: 16px; font-weight: 700; margin-bottom: 4px; padding: 0; }
.colour-row { display: grid; grid-template-columns: 52px auto 1fr; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.colour-row:last-of-type, .colour-row:has(+ .colour-row[hidden]) { border-bottom: 0; }
.colour-row[hidden] { display: none; }
.colour-n { font-size: 14px; font-weight: 700; color: var(--sub); white-space: nowrap; }
.swatches { display: flex; gap: 8px; }
.swatch { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sw, .dot-sw { display: block; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent); }
.sw { width: 28px; height: 28px; transition: transform .12s; }
.swatch::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; transition: border-color .15s; }
.swatch:hover::after { border-color: color-mix(in srgb, var(--ink) 30%, var(--bg)); }
.swatch:has(input:checked)::after { border-color: var(--ink); }
.swatch:active .sw { transform: scale(.85); }
.swatch:has(input:focus-visible)::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.colour-name { font-size: 14px; color: var(--ink); line-height: 1.3; min-width: 0; }
@media (max-width: 380px) { .colour-row { grid-template-columns: 46px auto 1fr; gap: 8px; } .swatches { gap: 4px; } }
/* Under a cart line: a dot for each pair, then the colours */
.line-colours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--sub); line-height: 1.35; }
.line-colours .dots { display: flex; gap: 3px; }
.dot-sw { width: 12px; height: 12px; }

/* ---------- Icon bar under the buy box (content.js products icons) ---------- */
.icon-bar { padding: 8px 0 28px; }
.icon-bar ul { list-style: none; margin: 0; padding: 22px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.icon-bar li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 15px; font-weight: 700; line-height: 1.3; }
.icon-bar .ic { width: 34px; height: 34px; color: var(--accent); }
@media (max-width: 699px) { .icon-bar ul { grid-template-columns: repeat(2, 1fr); row-gap: 22px; } .icon-bar li { font-size: 14px; } }

/* ---------- One-tick add-ons in the cart (content.js cartDrawer.bumps) ---------- */
.bumps { padding: 16px 20px 6px; }
.cart-page .bumps { padding: 18px 0 6px; }
.bumps h3 { margin: 0 0 10px; font-size: 16px; }
.bumps ul { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.bump { display: grid; grid-template-columns: 24px 52px 1fr; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 2px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.bump:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--bg)); }
.bump:active { transform: scale(.985); }
.bump[aria-checked="true"] { border-color: var(--accent); background: var(--band); }
.bump[aria-busy="true"] { opacity: .6; }
.bump-box { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid color-mix(in srgb, var(--ink) 35%, var(--bg)); border-radius: 6px; background: var(--bg); transition: background .15s, border-color .15s; }
.bump-box .ic { width: 16px; height: 16px; opacity: 0; color: var(--button-ink); stroke-width: 3; transition: opacity .15s; }
.bump[aria-checked="true"] .bump-box { background: var(--button); border-color: var(--button); }
.bump[aria-checked="true"] .bump-box .ic { opacity: 1; }
.bump img { width: 52px; height: 52px; object-fit: cover; border-radius: calc(var(--r) - 4px); background: var(--photo); }
.bump-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.bump-txt b { font-size: 15px; }
.bump-price { color: var(--accent); white-space: nowrap; }
.bump-txt small { font-size: 14px; color: var(--sub); }

/* ---------- Deals on the home page: each a link to the product page with that deal picked ---------- */
.deal-links { list-style: none; margin: 0 auto 28px; padding: 0; display: grid; gap: 14px; max-width: 640px; }
.deal-link .deal-tag { left: auto; right: 16px; } /* tags on the right (Nate, 16 Oct 2026) */
.deal-link { position: relative; display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 14px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .12s; }
.deal-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.deal-link:active { transform: scale(.985); }
.deal-link > .ic { width: 20px; height: 20px; color: var(--accent); }

/* ---------- Phones: the buy button about one swipe down (ConversionWise check, PLAN.md section 9) ---------- */
@media (max-width: 699px) {
  .crumbs { display: none; }
  .pdp { padding-top: 12px; }
  .thumbs button { flex-basis: 52px; }
  .buy-headline { margin-bottom: 10px; }
  .buy .ticks { gap: 6px; margin-bottom: 16px; }
  .buy .ticks li { font-size: 15px; }
  .deal-pick legend { margin-bottom: 6px; }
  .deal-opt { min-height: 58px; padding: 10px 12px; gap: 10px; }
  .deal-opt .deal-tag { left: auto; right: 16px; }
}

/* What a deal saves, under its line total in the cart (green, like "Free shipping") */
.line-saving { display: block; margin-top: 2px; color: var(--ok); font-size: 13px; font-weight: 700; white-space: nowrap; }
.you-save.deal { background: none; padding: 0; color: var(--ok); }
/* In the totals both savings are the same green text, and "Free" is black (Nate, 16 Oct 2026) */
.drawer-sum .you-save, .summary dl .you-save { background: none; padding: 0; color: var(--ok); font-size: 13px; }
.drawer-sum dd.free, .summary dl dd.free { color: var(--ink); }

/* Track my order (/track/, views.js trackForm and trackOrder). Plain layout: hairlines, no boxes on things you cannot click */
.page-head.plain { background: var(--bg); padding-bottom: 0; } /* white, no cream band (Nate, 16 Oct 2026) */
.page-head.plain + .sec { padding-top: clamp(24px, 4vw, 40px); }
.track-ask { display: grid; gap: 36px; }
.track-form { max-width: 560px; }
.track-form .track-hint { margin: -6px 0 0; }
.track-how { list-style: none; margin: 0; padding: 0; }
.track-how li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); }
.track-how li:first-child { border-top: 0; padding-top: 0; }
.track-how .step-n { font-size: 28px; color: var(--accent); }
.track-how li > span:last-child { color: var(--sub); }
.track-how b { display: block; font-size: 17px; color: var(--ink); }
.track-help { margin: 28px 0 0; color: var(--sub); }
.track-help a { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .track-ask { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; } .track-form { max-width: none; } }

.track-grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .track-grid { grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; } }
.parcel { display: grid; gap: 16px; }
.parcel + .parcel { margin-top: 36px; padding-top: 36px; border-top: 1px solid var(--line); }
.parcel h2 { font-size: clamp(28px, 3.6vw, 40px); }
.parcel h3 { margin-top: 8px; font-size: 18px; }
.parcel-n { margin: 0; font-size: 14px; font-weight: 700; color: var(--sub); }
.parcel-sub { margin: -6px 0 0; font-size: 18px; color: var(--sub); }
.parcel-late { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 600; }
.parcel-late .ic { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--accent); }
.parcel-late a { color: inherit; }

.track-steps { margin: 8px 0 4px; }
.track-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.track-bar span { display: block; height: 100%; border-radius: 99px; background: var(--accent); animation: track-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes track-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .track-bar span { animation: none; } }
.track-steps ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.track-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; line-height: 1.3; color: var(--sub); }
.track-steps li .ic { width: 22px; height: 22px; }
.track-steps li.done { color: var(--ink); }
.track-steps li.done .ic { color: var(--accent); }
.track-steps li.now { color: var(--ink); font-weight: 700; }
.track-steps li.now .ic { color: var(--accent); }
@media (min-width: 700px) { .track-steps li { font-size: 15px; } }

.track-num { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.track-num-label { flex-basis: 100%; font-size: 14px; color: var(--sub); }
.track-num .code { font-size: 20px; letter-spacing: .03em; overflow-wrap: anywhere; }
.track-num .code-copy { min-height: 40px; transition: background .2s, transform .1s; }
.track-num .code-copy:active { transform: scale(.96); }
.track-link, .track-again { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-weight: 700; text-decoration: none; }
.track-link:hover, .track-again:hover { text-decoration: underline; }
.track-link .ic, .track-again .ic { width: 18px; height: 18px; transition: transform .2s; }
.track-link:hover .ic, .track-again:hover .ic { transform: translateX(3px); }

.track-updates { list-style: none; margin: 0; padding: 0; }
.track-updates li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.track-updates li:first-child { border-top: 0; padding-top: 4px; }
.track-updates time { font-size: 14px; color: var(--sub); }
.track-updates b { font-weight: 600; }
.track-updates b + span { display: block; font-size: 14px; color: var(--sub); }
@media (min-width: 700px) { .track-updates li { grid-template-columns: 170px 1fr; gap: 16px; } }
.track-items { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.track-items li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.track-items .qty { color: var(--sub); white-space: nowrap; }

.track-side h2 { font-size: 24px; margin-bottom: 8px; }
.track-order { list-style: none; margin: 0; padding: 0; }
.track-order li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.track-order li:first-child { border-top: 0; }
.track-order img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; background: var(--photo); flex: none; }
.track-order b { display: block; font-weight: 600; line-height: 1.3; }
.track-side .track-help { margin-top: 20px; }
.track-again { margin-top: 16px; }
@media (min-width: 900px) { .track-side { position: sticky; top: 140px; } }