/* ================================================================
   STOREFRONT TEMPLATES — each `t-<key>` is a distinct design system
   over the same markup. All ride the day/night variables; some add
   their own surface tints per light/dark mode.
   ================================================================ */

/* ---------- karoo — warm, earthy, serif ---------- */
body.t-karoo {
  --sf-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  background: #faf6ef;
}
html[data-theme="dark"] body.t-karoo { background: radial-gradient(ellipse at top, #201a12 0%, #17130c 55%, #0f0c07 100%); }
body.t-karoo .sf-hero h1, body.t-karoo .pdp h1, body.t-karoo .sf-name { font-family: var(--sf-serif); font-weight: 500; letter-spacing: 0; }
body.t-karoo .sf-hero { padding: 76px 0; }
body.t-karoo .sf-hero h1 { font-size: clamp(32px, 4.6vw, 46px); }
body.t-karoo .sf-hero p { font-style: italic; }
body.t-karoo .product-card { border-radius: 4px; background: #f3ece0; border-color: #e6dcc9; }
html[data-theme="dark"] body.t-karoo .product-card { background: #241e14; border-color: #352c1e; }
body.t-karoo .product-card .ph { background: #ece3d2; }
html[data-theme="dark"] body.t-karoo .product-card .ph { background: #2b2418; }
body.t-karoo .btn.brand { border-radius: 3px; }
body.t-karoo .sf-announce { letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }