/* ==========================================================================
   Kolesa Kaplja - Dark Luxe design system
   ========================================================================== */
:root{
  --bg: #1c1210;
  --bg-2: #241610;
  --bg-3: #2d1a14;
  --ink: #f3e8da;
  --ink-dim: #cdb8a6;
  --ink-faint: #9c8574;
  --gold: #d8a86a;
  --gold-light: #f3cfa0;
  --copper: #b56a4a;
  --pink: #e8a1a1;
  --cream: #f6ead8;
  --choc: #2a1712;
  --line: rgba(216,168,106,0.22);
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
  --ease: cubic-bezier(.22,.9,.3,1);
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px;
}

*{ box-sizing: border-box; }
html,body{ overflow-x: clip; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(216,168,106,0.09), transparent 60%),
              radial-gradient(900px 500px at 5% 110%, rgba(232,161,161,0.07), transparent 60%),
              var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: var(--gold-light); text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--cream); margin:0 0 .5em; font-weight:600; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:#1c1210; padding:.6em 1em; z-index:200; }
.skip-link:focus{ left:1em; top:1em; }
:focus-visible{ outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; }

/* grain overlay */
.grain-overlay{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:1; opacity:.5; mix-blend-mode:overlay; }
.grain-overlay svg{ width:100%; height:100%; }

/* ===== layout helpers ===== */
.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.grid{ display:grid; gap: clamp(1rem,3vw,2rem); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } }
.mt-1{margin-top:.5rem} .mt-2{margin-top:1rem} .mt-3{margin-top:2rem} .mt-4{margin-top:3rem}
.mb-1{margin-bottom:.5rem} .mb-2{margin-bottom:1rem} .mb-3{margin-bottom:2rem} .mb-4{margin-bottom:3rem}
.section{ padding-block: clamp(3rem,8vw,6rem); position:relative; }
.center{ text-align:center; }

/* ===== reveal ===== */
.reveal{ opacity:1; }
.reveal:not(.in-view){ opacity:0; transform: translateY(26px) scale(.98); clip-path: inset(0 0 12% 0); }
.reveal.in-view{ opacity:1; transform:none; clip-path: inset(0 0 0 0); transition: opacity .8s var(--ease), transform .8s var(--ease), clip-path .8s var(--ease); }
.reveal[data-delay="1"].in-view{ transition-delay:.08s; }
.reveal[data-delay="2"].in-view{ transition-delay:.16s; }
.reveal[data-delay="3"].in-view{ transition-delay:.24s; }
.reveal[data-delay="4"].in-view{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal:not(.in-view){ opacity:1; transform:none; clip-path:none; transition:none; }
}

/* ===== header ===== */
.site-header{ position:sticky; top:0; z-index:100; background: rgba(28,18,16,0.86); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); }
.header-inner{ max-width:var(--maxw); margin:0 auto; padding: .9rem clamp(1.25rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo{ display:flex; align-items:center; gap:.6rem; color:var(--cream); }
.logo-mark{ color: var(--gold); flex:none; }
.logo-word{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:.01em; }
.logo-word em{ font-style:normal; color: var(--gold); }
.footer-logo{ font-size:1.5rem; }
.site-nav{ display:flex; align-items:center; gap: clamp(.8rem,2vw,1.6rem); }
.site-nav a{ color: var(--ink-dim); font-size:.95rem; position:relative; padding:.3rem 0; }
.site-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--gold); transition: width .3s var(--ease); }
.site-nav a:hover::after, .site-nav a.is-active::after{ width:100%; }
.site-nav a.is-active{ color: var(--gold-light); }
.nav-cart{ display:flex; align-items:center; gap:.4rem; color:var(--cream)!important; }
.cart-count{ background:var(--gold); color:#1c1210; border-radius:50%; min-width:1.5em; height:1.5em; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; }
.cart-count.bump{ animation: cartBump .35s var(--ease); }
@keyframes cartBump{ 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.nav-toggle{ display:none; background:none; border:none; color:var(--cream); cursor:pointer; padding:.4rem; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

@media (max-width: 860px){
  .nav-toggle{ display:block; z-index:101; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,85vw); height:100vh;
    background: var(--bg-2); flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding: 6rem 1.5rem 2rem; gap:1.4rem; border-left:1px solid var(--line);
    transform: translateX(100%); visibility:hidden; transition: transform .35s var(--ease), visibility .35s;
  }
  .site-nav.is-open{ transform: translateX(0); visibility:visible; }
  .site-nav a{ font-size:1.1rem; }
}

/* ===== buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--font-body); font-weight:600; font-size:.95rem; padding:.85em 1.6em; border-radius: 999px; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; isolation:isolate; min-height:44px; transition: color .3s var(--ease), border-color .3s var(--ease); }
.btn::before{ content:""; position:absolute; inset:0; left:-100%; width:100%; background:var(--gold-light); z-index:-1; transition: left .35s var(--ease); }
.btn-primary{ background:var(--gold); color:#1c1210; }
.btn-primary::before{ background:var(--gold-light); }
.btn-primary:hover::before{ left:0; }
.btn-ghost{ background:transparent; color:var(--cream); border-color: var(--line); }
.btn-ghost::before{ background: rgba(216,168,106,0.18); }
.btn-ghost:hover::before{ left:0; }
.btn-ghost:hover{ color:var(--gold-light); }
.btn-sm{ padding:.55em 1.2em; font-size:.85rem; min-height:36px; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.icon{ flex:none; }

/* ===== hero ===== */
.hero{ position:relative; padding-block: clamp(3rem,10vw,6.5rem) clamp(2rem,6vw,4rem); overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,3rem); align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:.5em; color:var(--gold-light); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.hero-title{ font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height:1.02; margin-bottom:1rem; }
.hero-title .accent{ color:var(--gold); font-style:italic; }
.hero-lead{ color:var(--ink-dim); font-size:1.15rem; max-width:40ch; margin-bottom:2rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-parallax{ position:relative; aspect-ratio: 1/1; }
.hero-shape{ position:absolute; transition: transform .2s linear; }
.hero-figure{ position:relative; border-radius: var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio: 4/5; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; filter: sepia(.25) saturate(1.1) contrast(1.05); }
.hero-figure::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(28,18,16,.75)); }

/* ===== numbered section composition ===== */
.numbered-section{ display:grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1.5rem,4vw,3rem); align-items:start; }
.numbered-section .num{ font-family: var(--font-display); font-size: clamp(4rem,12vw,8rem); line-height:1; color: transparent; -webkit-text-stroke: 1.5px var(--line); background: linear-gradient(180deg, rgba(216,168,106,.25), transparent); -webkit-background-clip:text; background-clip:text; }
.numbered-section > div{ min-width: 0; }
@media (max-width:700px){ .numbered-section{ grid-template-columns:1fr; } .numbered-section .num{ font-size:3rem; } }

/* ===== cards ===== */
.card{ background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem,3vw,2rem); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.glow-card{ position:relative; --mx:50%; --my:50%; }
.glow-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; background: radial-gradient(220px circle at var(--mx) var(--my), rgba(216,168,106,.16), transparent 70%); opacity:0; transition:opacity .3s; pointer-events:none; }
.glow-card:hover::before{ opacity:1; }

/* ===== product card / strip ===== */
.product-strip{ display:grid; grid-auto-flow:column; grid-auto-columns: minmax(260px,1fr); gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.product-strip .product-card{ scroll-snap-align:start; }
.product-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:1.5rem; }
.product-card{ display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.product-card:hover{ transform: translateY(-6px); box-shadow:var(--shadow); }
.product-card .thumb{ aspect-ratio: 4/3; overflow:hidden; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.product-card:hover .thumb img{ transform: scale(1.08); }
.product-card .body{ padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.product-card .cat{ font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--gold-light); }
.product-card .price{ font-family:var(--font-display); font-size:1.3rem; color:var(--cream); margin-top:auto; }

/* ===== route planner (signature feature) ===== */
.planner{ background: linear-gradient(160deg, var(--bg-3), var(--choc)); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem,4vw,2.8rem); box-shadow: var(--shadow); }
.planner-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:2rem; }
@media (max-width:760px){ .planner-grid{ grid-template-columns:1fr; } }
.planner-field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.planner-field label{ font-size:.85rem; color:var(--ink-dim); }
.planner select{ background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius: var(--radius-sm); padding:.7em 1em; font-size:1rem; accent-color: var(--gold); }
.planner-result{ background: rgba(216,168,106,0.06); border:1px solid var(--line); border-radius: var(--radius-sm); padding:1.4rem; min-height:160px; }
.planner-result .r-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem; }
.planner-result .r-bike{ color:var(--gold-light); font-weight:600; }
.planner-stats{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:.8rem; }
.planner-stats div{ font-size:.85rem; color:var(--ink-faint); }
.planner-stats strong{ display:block; color:var(--cream); font-size:1.1rem; font-family:var(--font-display); }

/* ===== dividers / ornaments ===== */
.divider{ width:100%; height:auto; color: var(--gold); opacity:.6; margin-block: 1rem; }
.seal{ color: var(--gold-light); }

/* ===== page hero (inner pages) ===== */
.page-hero{ padding-block: clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,2.5rem); border-bottom:1px solid var(--line); }
.page-hero h1{ font-size: clamp(2rem,5vw,3.2rem); }
.page-hero p{ color:var(--ink-dim); max-width: 60ch; }

/* ===== breadcrumbs ===== */
.breadcrumbs{ display:flex; gap:.5em; font-size:.85rem; color:var(--ink-faint); margin-bottom:1rem; flex-wrap:wrap; }
.breadcrumbs a{ color:var(--ink-faint); }
.breadcrumbs a:hover{ color:var(--gold-light); }
.breadcrumbs .sep{ opacity:.5; }
.breadcrumbs .current{ color:var(--ink-dim); }

/* ===== prose (legal pages) ===== */
.prose{ max-width: 68ch; color: var(--ink-dim); }
.prose h2{ font-size:1.5rem; margin-top:2.2rem; }
.prose h3{ font-size:1.15rem; color:var(--gold-light); margin-top:1.6rem; }
.prose p{ margin: .8em 0; }
.prose ul, .prose ol{ padding-left:1.4em; margin:.8em 0; }
.prose li{ margin:.4em 0; }
.prose a{ text-decoration: underline; text-underline-offset:2px; }
.legal-toc{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.2rem 1.4rem; margin-bottom:2rem; }
.legal-toc h2{ font-size:1rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-light); margin-bottom:.6rem; }
.legal-toc ol{ margin:0; padding-left:1.2em; columns: 2; column-gap:2rem; }
@media (max-width:600px){ .legal-toc ol{ columns:1; } }

/* ===== notice ===== */
.notice{ display:flex; gap:.8em; align-items:flex-start; background: rgba(216,168,106,0.08); border:1px solid var(--line); border-radius: var(--radius-sm); padding:1rem 1.2rem; margin: 1.2rem 0; color: var(--ink-dim); }
.notice strong{ color:var(--cream); }
.notice.is-warning{ background: rgba(232,161,161,0.08); border-color: rgba(232,161,161,0.3); }

/* ===== forms ===== */
.form-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1.2rem; }
@media (max-width:620px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:.85rem; color:var(--ink-dim); }
.field input, .field textarea, .field select{ background:var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-sm); color:var(--ink); padding:.8em 1em; font-size:1rem; font-family:inherit; accent-color: var(--gold); }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--gold); }
.field-error{ color: var(--pink); font-size:.8rem; min-height:1.2em; }
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.field-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.field-row input{ flex:1; min-width:180px; }
.form-msg{ font-size:.9rem; min-height:1.4em; }
.form-msg.is-success{ color: var(--gold-light); }
.form-msg.is-error{ color: var(--pink); }

/* ===== faq ===== */
.faq{ display:flex; flex-direction:column; gap:.8rem; max-width:70ch; }
.faq-item{ background:var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem 1.2rem; }
.faq-item summary{ cursor:pointer; padding:.9rem 0; font-weight:600; color:var(--cream); list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--gold); font-size:1.4rem; flex:none; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ color:var(--ink-dim); padding-bottom:1rem; margin:0; }

/* ===== product detail ===== */
.product-detail{ display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem,4vw,3rem); }
@media (max-width:860px){ .product-detail{ grid-template-columns:1fr; } }
.product-detail .gallery{ border-radius: var(--radius); overflow:hidden; aspect-ratio:4/3; }
.product-detail .gallery img{ width:100%; height:100%; object-fit:cover; }
.product-detail .features{ list-style:none; padding:0; margin:1.2rem 0; display:flex; flex-direction:column; gap:.6rem; }
.product-detail .features li{ display:flex; gap:.6em; align-items:center; color:var(--ink-dim); }
.product-detail .price{ font-family:var(--font-display); font-size:2rem; color:var(--gold-light); margin:1rem 0; }
.qty-control{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.qty-control button{ width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--bg-2); color:var(--cream); font-size:1.2rem; cursor:pointer; }
.qty-control input{ width:3em; text-align:center; background:none; border:none; color:var(--cream); font-size:1.1rem; }

/* ===== cart / checkout ===== */
.cart-table{ width:100%; border-collapse: collapse; }
.cart-table th{ text-align:left; color:var(--ink-faint); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.cart-table td{ padding: 1rem 0; border-bottom:1px solid var(--line); vertical-align:middle; }
.cart-table .line-item{ display:flex; align-items:center; gap:1rem; }
.cart-table .line-item img{ width:64px; height:64px; object-fit:cover; border-radius: var(--radius-sm); }
.cart-summary{ background:var(--bg-2); border:1px solid var(--line); border-radius: var(--radius); padding:1.5rem; max-width:360px; margin-left:auto; }
.cart-summary .row{ display:flex; justify-content:space-between; margin:.5rem 0; color:var(--ink-dim); }
.cart-summary .row.total{ color:var(--cream); font-size:1.2rem; font-family:var(--font-display); border-top:1px solid var(--line); padding-top:.8rem; margin-top:.8rem; }
.cart-empty{ text-align:center; padding: 3rem 1rem; color:var(--ink-dim); }

/* ===== contact layout ===== */
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3rem); }
@media (max-width:860px){ .contact-layout{ grid-template-columns:1fr; } }
.contact-info{ display:flex; flex-direction:column; gap:1.2rem; }
.contact-info .row{ display:flex; gap:.8em; align-items:flex-start; color:var(--ink-dim); }
.contact-info .row svg{ color:var(--gold); flex:none; margin-top:.2em; }

/* ===== 404 ===== */
.error-page{ text-align:center; padding-block: 6rem; }
.error-page .code{ font-family: var(--font-display); font-size: clamp(5rem,20vw,10rem); color: transparent; -webkit-text-stroke: 2px var(--gold); background: linear-gradient(180deg, rgba(216,168,106,.3), transparent); -webkit-background-clip:text; background-clip:text; }

/* ===== cookie banner ===== */
.cookie-banner{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:150; max-width:640px; margin-inline:auto; background: var(--choc); border:1px solid var(--line); border-radius: var(--radius); padding:1.2rem 1.4rem; box-shadow:var(--shadow); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.cookie-banner p{ color:var(--ink-dim); font-size:.9rem; margin:0; flex:1 1 240px; }
.cookie-actions{ display:flex; gap:.6rem; flex:none; }

/* ===== footer ===== */
.site-footer{ background: var(--choc); border-top:1px solid var(--line); margin-top: 4rem; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding: clamp(2.5rem,5vw,4rem) clamp(1.25rem,4vw,3rem); display:grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 2.5rem; }
@media (max-width:860px){ .footer-inner{ grid-template-columns:1fr; } }
.footer-brand p{ color:var(--ink-faint); font-size:.9rem; max-width:32ch; }
.footer-contact{ display:flex; align-items:center; gap:.5em; color:var(--ink-dim); font-size:.9rem; }
.footer-links{ display:flex; gap:2rem; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col h3{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-light); margin-bottom:.2rem; }
.footer-col a{ color:var(--ink-dim); font-size:.9rem; }
.footer-col a:hover{ color:var(--gold-light); }
.newsletter-form h3{ font-size:1.1rem; margin-bottom:.3rem; }
.newsletter-form p{ color:var(--ink-faint); font-size:.85rem; margin-bottom:.8rem; }
.newsletter-form input[type="email"]{ background:var(--bg-2); border:1px solid var(--line); border-radius: var(--radius-sm); color:var(--ink); padding:.7em 1em; }
.footer-bottom{ border-top:1px solid var(--line); padding: 1rem clamp(1.25rem,4vw,3rem); text-align:center; color:var(--ink-faint); font-size:.82rem; }

/* COMPONENTS: .wrap - centered max-width page container
   COMPONENTS: .grid/.grid-2/.grid-3/.grid-4 - responsive grid helpers
   COMPONENTS: .section - vertical section spacing wrapper
   COMPONENTS: .reveal - scroll-reveal animation target (JS toggles .in-view)
   COMPONENTS: .site-header/.header-inner/.logo/.logo-mark/.logo-word - site header & logo
   COMPONENTS: .site-nav/.nav-cart/.cart-count/.nav-toggle - navigation & cart badge
   COMPONENTS: .btn/.btn-primary/.btn-ghost/.btn-sm - button variants with fill-sweep hover
   COMPONENTS: .hero/.hero-grid/.hero-eyebrow/.hero-title/.hero-lead/.hero-actions - home hero
   COMPONENTS: .hero-parallax/.hero-shape/.hero-figure - cursor-parallax hero art
   COMPONENTS: .numbered-section/.num - oversized number section composition
   COMPONENTS: .card/.glow-card - generic content card with cursor glow
   COMPONENTS: .product-strip/.product-grid/.product-card - catalog listings
   COMPONENTS: .planner/.planner-grid/.planner-field/.planner-result/.planner-stats - signature route planner feature
   COMPONENTS: .divider/.seal - decorative SVG ornaments
   COMPONENTS: .page-hero - inner page header band
   COMPONENTS: .breadcrumbs - page breadcrumb trail
   COMPONENTS: .prose - long-form readable legal/article text
   COMPONENTS: .legal-toc - table of contents box for legal pages
   COMPONENTS: .notice/.notice.is-warning - callout box
   COMPONENTS: .form-grid/.field/.field-error/.field-row/.hp-field/.form-msg - form building blocks
   COMPONENTS: .faq/.faq-item - accordion FAQ (details/summary)
   COMPONENTS: .product-detail/.qty-control - single product page layout
   COMPONENTS: .cart-table/.cart-summary/.cart-empty - cart & checkout layout
   COMPONENTS: .contact-layout/.contact-info - contact page layout
   COMPONENTS: .error-page - 404 page layout
   COMPONENTS: .cookie-banner/.cookie-actions - cookie consent banner
   COMPONENTS: .site-footer/.footer-inner/.footer-links/.footer-col/.newsletter-form/.footer-bottom - site footer
   COMPONENTS: .grain-overlay - fixed SVG feTurbulence grain texture
   COMPONENTS: .skip-link/.visually-hidden - accessibility helpers
*/

/* .icon-sprite, .card-body, .qty-input, .btn-remove */
.icon-sprite {
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentColor;
}

.card-body {
  padding: clamp(0.75rem, 2vw, 1.25rem);
}

.qty-input {
  width: 60px;
  padding: 0.5rem 0.625rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  text-align: center;
  cursor: text;
}

.qty-input:focus {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
  border-color: var(--gold);
}

.btn-remove {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-dim);
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s var(--ease);
}

.btn-remove:hover {
  border-color: var(--pink);
  color: var(--pink);
  background: rgba(232, 161, 161, 0.08);
}

.btn-remove:active {
  transform: scale(0.92);
}