/* ═══════════════════════════════════════════════════════════════════
   Landing page — hero, trust strip, category tiles, spotlight

   Ordered for conversion: promise, objections, browsing path, then
   the merchandising rails.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero: value prop + a real buyable product above the fold ───── */
/* The hero is off-white now, not a dark slab. Warm drift from pure
   white into the faintest amber tint, so the brand colour is present
   without a second hue anywhere on the page. */
.hero{background:linear-gradient(170deg,var(--surface) 0%,var(--surface) 45%,var(--warm-tint) 100%);
  color:var(--ink-2);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4);
  padding-block:var(--sp-5)}
.hero-copy{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;min-width:0}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);
  background:var(--brand);color:var(--logo-ink);border-radius:var(--r-full);
  padding:var(--sp-1) var(--sp-3);font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.eyebrow .ico{width:18px;height:18px}
.hero h1{font-size:1.625rem;font-weight:900;color:var(--ink);letter-spacing:-.025em}
.hero h1 em{color:var(--brand);font-style:normal}
.hero p{color:var(--ink-2);font-size:.9375rem;max-width:52ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--sp-2);width:100%}
.hero-ctas .btn{flex:1 1 100%}
/* A published hero image (admin → content document). In the layout,
   under the copy — never behind it (§9.11). The box is pinned so
   nothing shifts on decode; the Store API publishes no dimensions. */
.hero-art{margin:0;width:100%;max-width:28rem;aspect-ratio:16/9;border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface-2);border:1px solid var(--line-soft)}
.hero-art img{display:block;width:100%;height:100%;object-fit:cover}
 /* Hidden on phones: these three say the same thing as the trust strip
    sitting directly beneath them, and on a 390px screen that duplication
    cost ~70px of the customer's first screen. Shown from 768 up, where
    the hero has a column to itself and the repetition reads as emphasis
    rather than filler. */
.hero-stats{display:none}
@media (min-width:768px){
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:var(--sp-3);width:100%;margin-top:var(--sp-1)}
}
.hero-stat{min-width:0}
.hero-stat .n{font-size:1.125rem;font-weight:800;color:var(--brand-ink);
  line-height:1.2}
.hero-stat .l{font-size:.875rem;color:var(--ink-3);margin-top:2px}

/* Featured product, in the hero — the conversion anchor.
   On a phone it is a COMPACT HORIZONTAL card: thumbnail left, name and
   price right, CTA across the bottom. Stacked, it ran the hero to 105%
   of a 390px viewport — the customer's whole first screen was banner
   and nothing else. It becomes the full vertical card at ≥768 where
   there is a second column to put it in. Same component, same markup,
   different form factor (CLAUDE.md §9.1). */
.hero-pick{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-3);box-shadow:var(--shadow-md);min-width:0;color:var(--ink-2);
  display:grid;grid-template-columns:88px minmax(0,1fr);
  grid-template-areas:"media tag" "media name" "media price" "cta cta" "blurb blurb";
  gap:var(--sp-1) var(--sp-3);align-items:start}
.hero-pick .media{grid-area:media;aspect-ratio:1/1;align-self:center}
.hero-pick .tag{grid-area:tag}
.hero-pick h3{grid-area:name}
.hero-pick .card-price{grid-area:price}
.hero-pick .btn{grid-area:cta;margin-top:var(--sp-2)}
.hero-pick .blurb{display:none}
.hero-pick .tag{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:.75rem;font-weight:700;color:var(--brand-ink);
  text-transform:uppercase;letter-spacing:.06em}
.hero-pick .tag .ico{width:19px;height:19px}
.hero-pick h3{font-size:1.0625rem;font-weight:700}
/* Three lines, not two. The short descriptions are a median of 138
   characters and roughly 70 fit a line here, so two lines clipped over
   half of them mid-sentence and printed an ellipsis for it — the exact
   thing the short-description pass exists to stop (TONE.md §3.1). The
   clamp stays as a bound on the outliers (p99 is 313 characters); the
   product page has the rest, and the text is in the DOM either way.
   NOTE: no `display` here. It is set to none in the compact grid above
   and to -webkit-box in the ≥768 block. Declaring it here too would
   collide at equal specificity and win by source order — which is
   exactly how the blurb kept rendering on phones. */
.hero-pick .blurb{grid-area:blurb;font-size:var(--fs-pair-sub);color:var(--ink-3);
  -webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── Trust strip ────────────────────────────────────────────────── */
.trust{background:var(--surface);border-block:1px solid var(--line)}
/* Collapsed on a phone, open from 640. No `hidden` attribute and no
   display:none on the text itself once open — the reasons stay in the
   DOM either way so a crawler always reads them. */
.trust-toggle{display:flex;align-items:center;gap:var(--sp-3);width:100%;
  min-height:var(--tap);padding-block:var(--sp-2);
  font-size:1rem;font-weight:700;color:var(--ink);text-align:left}
.trust-toggle>.ico{width:26px;height:26px;flex:0 0 auto;color:var(--brand-ink)}
.trust-toggle span{flex:1 1 auto;min-width:0}
.trust-toggle .ico:last-child{width:22px;height:22px;color:var(--ink-3);
  transition:transform .18s ease}
.trust-toggle[aria-expanded="true"] .ico:last-child{transform:rotate(90deg)}
.trust-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* ONE column on a phone. The reason heading is --fs-pair-head (17px)
   now, and two columns at 360px left it a ~156px box to wrap into —
   four lines for a three-word heading. Two-up from 480, four across
   from 900, where a column is wide enough to hold the pair. */
.trust-grid{display:none;grid-template-columns:minmax(0,1fr);
  gap:var(--sp-4);padding-block:var(--sp-5)}
.trust-toggle[aria-expanded="true"]+.sr-only+.trust-grid{display:grid}
.trust-item{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.trust-item .ico{width:30px;height:30px;color:var(--brand-ink)}   /* §9.3 */
.trust-item b{display:block;font-size:var(--fs-pair-head);color:var(--ink);font-weight:700}
.trust-item span{font-size:var(--fs-pair-sub);color:var(--ink-3)}

/* ── Category tiles ─────────────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.cat-tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-3);min-width:0;min-height:64px;
  display:flex;align-items:center;gap:var(--sp-3);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.cat-tile:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cat-tile .ico{width:30px;height:30px;color:var(--brand-ink)}     /* §9.3 */
.cat-tile .t{min-width:0}
.cat-tile .nm{font-size:.9375rem;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere;line-height:1.25}
.cat-tile.is-hot{border-color:var(--brand);background:var(--brand-xlight)}


/* ── Spotlight band — a single range promoted hard ──────────────── */
.spotlight{background:var(--brand-xlight);border-block:1px solid var(--brand-light)}
.spot-head{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4);
  flex-wrap:wrap}
.spot-head .ico{width:34px;height:34px;color:var(--brand-ink);flex:0 0 auto}
.spot-head h2{font-size:1.375rem;font-weight:800}
.spot-head p{font-size:var(--fs-pair-sub);color:var(--ink-2);max-width:60ch;margin-top:2px}
.spot-links{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}

/* ── Product rails — four, then "Show more" in fours (§9.10) ────── */
/* Two columns on a phone and four from 768, at every width between:
   four cards is then always whole rows (2×2, or 1×4), and so is every
   batch the button adds. The listing grid's 3- and 5-column steps would
   leave a widow in both. */
.rail .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* The fold. A measured max-height clip (rail.js), never display:none
   and never [hidden], so every card stays in the DOM for a crawler.
   The padding, taken back by the negative margin, is room for a card's
   hover lift and shadow so the clip does not shave them. */
.rail-clip{position:relative;overflow:hidden;
  padding:var(--sp-2);margin:calc(-1 * var(--sp-2));
  transition:max-height .28s ease}
.rail-foot{display:flex;justify-content:center;margin-top:var(--sp-4)}
.rail-foot .btn{width:100%}
.rail-more .ico{color:var(--brand-ink)}

/* ── About teaser ───────────────────────────────────────────────── */
/* Was an inline style on the paragraph in views/home.js. Same three
   declarations, same values — a standalone paragraph, not the sub half
   of a pair, so it keeps its own 17px measure. */
.about-teaser{font-size:1.0625rem;max-width:66ch;margin-bottom:var(--sp-4)}


@media (min-width:480px){
  .hero h1{font-size:2rem}
  .hero-ctas .btn{flex:0 1 auto}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:640px){
  .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Room to lay them out — the disclosure retires and all four show. */
  .trust-toggle{display:none}
  .trust-grid{display:grid}
}
@media (min-width:768px){
  .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .rail .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Same button, its natural width once it is not the only thing in the row. */
  .rail-foot .btn{width:auto;min-width:18rem}
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    align-items:center;padding-block:var(--sp-8);gap:var(--sp-8)}
  /* Room for the full card again */
  .hero-pick{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4)}
  .hero-pick .media{aspect-ratio:16/10;align-self:auto}
  .hero-pick .blurb{display:-webkit-box}
  .hero-pick .btn{margin-top:var(--sp-1)}
  .hero h1{font-size:2.25rem}
  .hero p{font-size:1.0625rem}
  .hero-stat .n{font-size:1.25rem}
}
@media (min-width:900px){
  .hero h1{font-size:2.5rem}
  /* Four across only once a column can hold a 17px heading and its
     description without either of them wrapping to four lines. */
  .trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}