/* SKIN: retail (shops, markets, boutiques, grocers)
   Feel: friendly, product-forward, a little playful. Rounded, bright. */
:root{
  --paper:#fffefb; --ink:#232120; --muted:#5c5854;
  --radius:18px;
  --shadow:0 6px 20px rgba(35,33,32,.10);
  --tile-border:1.5px solid #eee7db;
  --header-line:1.5px solid #eee7db;
  --section-bg-alt:#faf5eb;
  --accent-text:var(--dark);
  --hero-overlay:linear-gradient(180deg,rgba(25,20,15,.55),rgba(25,20,15,.25) 50%,rgba(25,20,15,.62));
}
.btn{border-radius:999px}
.eyebrow{background:var(--accent);color:var(--dark);padding:.2rem .7rem;border-radius:999px;letter-spacing:.08em}
.tile{overflow:hidden}
/* height:auto is NOT optional — every product <img> in the fleet carries HTML
   width/height attributes for CLS. Omit height:auto here and a browser's own
   presentational hint keeps the box pinned to the raw HTML height attribute
   (often nowhere near 4:3), leaving aspect-ratio nothing "auto" to fill in —
   silently ignored, then whatever oversized box results gets clipped by
   .tile{overflow:hidden} to the surrounding card's height instead of to the
   intended crop. Found on aph-athletic-fashion 2026-09-02 (a live render
   measured the box at ~250x1254, not ~250x188) — see that site's SITE-CLAUDE.md
   for the full diagnosis. Matches this file's own "Layout standards" note:
   "an explicit height beats aspect-ratio." */
.tile > img{margin:-1.6rem -1.5rem 1.1rem;width:calc(100% + 3rem);max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover}