/* Generated from tokens.json by build_tokens.py. Do not edit by hand. */
:root { --bg: #FFFFFF; --surface: #F1F3EF; --ink: #0F1311; --muted: #59625C; --line: #E1E5DF; --accent: #0F1311; --on-accent: #FFFFFF; --accent-soft: #DDF46A; --brass: #C9EA2E; --sale: #A23B2A; --ok: #2F6B45; --warn-bg: #FFF6E5; --warn-ink: #7A4B00; --img-bg: #F1F3EF; --font-display: "Rubik", "Heebo", "Arial", sans-serif; --font-body: "Heebo", "Rubik", "Arial", sans-serif; --display-weight: 800; --track: -0.01em; --hero-size: clamp(2.5rem, 6.4vw, 5.2rem); --radius: 14px; --radius-lg: 24px; --pill: 999px }
:root[data-dir="d2"] { --bg: #FFFFFF; --surface: #F1F3EF; --ink: #0F1311; --muted: #59625C; --line: #E1E5DF; --accent: #0F1311; --on-accent: #FFFFFF; --accent-soft: #DDF46A; --brass: #C9EA2E; --sale: #A23B2A; --ok: #2F6B45; --warn-bg: #FFF6E5; --warn-ink: #7A4B00; --img-bg: #F1F3EF; --font-display: "Rubik", "Heebo", "Arial", sans-serif; --font-body: "Heebo", "Rubik", "Arial", sans-serif; --display-weight: 800; --track: -0.01em; --hero-size: clamp(2.5rem, 6.4vw, 5.2rem); --radius: 14px; --radius-lg: 24px; --pill: 999px }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0E110F; --surface: #191D1A; --ink: #EEF1EC; --muted: #A6B0A9; --line: #2C332E; --accent: #D6F45A; --on-accent: #0F1311; --accent-soft: #2B3315; --brass: #D6F45A; --sale: #F08A73; --ok: #8FD3A6; --warn-bg: #33270F; --warn-ink: #F3C77A; --img-bg: #F4F5F2; color-scheme: dark }
  :root:not([data-theme="light"])[data-dir="d2"] { --bg: #0E110F; --surface: #191D1A; --ink: #EEF1EC; --muted: #A6B0A9; --line: #2C332E; --accent: #D6F45A; --on-accent: #0F1311; --accent-soft: #2B3315; --brass: #D6F45A; --sale: #F08A73; --ok: #8FD3A6; --warn-bg: #33270F; --warn-ink: #F3C77A; --img-bg: #F4F5F2; color-scheme: dark }
}
:root[data-theme="dark"] { --bg: #0E110F; --surface: #191D1A; --ink: #EEF1EC; --muted: #A6B0A9; --line: #2C332E; --accent: #D6F45A; --on-accent: #0F1311; --accent-soft: #2B3315; --brass: #D6F45A; --sale: #F08A73; --ok: #8FD3A6; --warn-bg: #33270F; --warn-ink: #F3C77A; --img-bg: #F4F5F2; color-scheme: dark }
:root[data-theme="dark"][data-dir="d2"] { --bg: #0E110F; --surface: #191D1A; --ink: #EEF1EC; --muted: #A6B0A9; --line: #2C332E; --accent: #D6F45A; --on-accent: #0F1311; --accent-soft: #2B3315; --brass: #D6F45A; --sale: #F08A73; --ok: #8FD3A6; --warn-bg: #33270F; --warn-ink: #F3C77A; --img-bg: #F4F5F2; color-scheme: dark }
/* Layout concept: editorial storefront — wide product imagery on a calm light ground,
   one accent per direction, mega menu under a slim header, 4-up grid on desktop, 2-up on phone. */

* { box-sizing: border-box }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.55; margin: 0; -webkit-text-size-adjust: 100% }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg) }
a { color: inherit }
button, input, select, textarea { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px }
img { max-width: 100%; display: block }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--track); text-wrap: balance; margin: 0; line-height: 1.12 }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.num { font-variant-numeric: tabular-nums }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) }

/* Preview strip + direction switcher */
.proto { background: var(--ink); color: var(--bg); font-size: 13px }
.proto .wrap { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding-block: 8px }
.proto b { font-weight: 700 }
.dirs { display: flex; gap: 6px; flex-wrap: wrap }
.dirs button { border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); background: transparent; color: var(--bg); border-radius: 999px; padding: 4px 12px; min-height: 32px }
.dirs button[aria-pressed="true"] { background: var(--bg); color: var(--ink) }

/* Header */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
.hdr-top { display: flex; align-items: center; gap: 12px; padding-block: 12px }
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 8px; white-space: nowrap }
.logo b { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.45rem; letter-spacing: 0.08em }
:root[data-dir="d2"] .logo b { letter-spacing: -0.02em; font-size: 1.5rem }
.logo span { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--muted) }
.search { flex: 1; min-width: 0; max-width: 460px; margin-inline-start: auto; position: relative }
.search input { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 10px 14px; min-height: 44px }
.icon-btn { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; position: relative; text-decoration: none }
.icon-btn svg { width: 20px; height: 20px }
.badge { position: absolute; top: -6px; inset-inline-start: -6px; background: var(--accent); color: var(--on-accent); font-size: 11px; min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center; padding: 0 5px }
.burger { display: none }
.nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none }
.nav::-webkit-scrollbar { display: none }
.nav > button, .nav > a { border: 0; background: none; padding: 12px 12px 14px; white-space: nowrap; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-bottom: 2px solid transparent; min-height: 44px }
.nav > button[aria-expanded="true"], .nav > a.on { border-bottom-color: var(--accent) }
.nav .sale-link { color: var(--sale) }

/* Mega menu */
.mega { position: absolute; inset-inline: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.25) }
.mega .wrap { display: grid; grid-template-columns: 1.2fr 1fr 0.9fr; gap: 32px; padding-block: 28px 32px }
.mega h3 { font-size: 1.6rem; margin-bottom: 4px }
.mega .eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin: 0 0 10px }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.mega .subs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px }
.mega li a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; text-decoration: none; border-bottom: 1px solid var(--line) }
.mega li a:hover { color: var(--accent) }
.mega li a small { color: var(--muted) }
.mega .feat { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; text-decoration: none; background: var(--bg); border-radius: var(--radius-lg); padding: 12px }
.mega .feat .ph { width: 96px; height: 96px }
.mega .all { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--accent) }
.review-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); margin-inline-start: 6px; vertical-align: middle }

/* Drawer (mobile menu, cart) */
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.38); z-index: 70 }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(420px, 92vw); background: var(--surface); z-index: 80; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
.drawer.end { inset-inline-start: auto; inset-inline-end: 0 }
.drawer header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.drawer .body { overflow-y: auto; padding: 8px 16px 24px; flex: 1 }
.acc { border-bottom: 1px solid var(--line) }
.acc > button { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: none; padding: 14px 0; font-weight: 700; min-height: 48px; text-align: start }
.acc ul { list-style: none; margin: 0 0 10px; padding: 0 }
.acc li a { display: flex; justify-content: space-between; padding: 10px 4px; text-decoration: none; min-height: 44px; align-items: center }

/* Buttons + chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--radius); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; transition: transform 160ms ease, background 160ms ease }
.btn:hover { transform: translateY(-1px) }
.btn svg { width: 20px; height: 20px; flex: 0 0 20px }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line) }
.btn.wide { width: 100% }
:root[data-dir="d2"] .btn { border-radius: 999px }
:root[data-dir="d2"] .btn.lime { background: var(--accent-soft); color: #0F1311; border-color: var(--accent-soft) }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; min-height: 40px; font-size: 0.92rem; text-decoration: none }
.chip[aria-pressed="true"], .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink) }
.pill.warn { background: var(--warn-bg); color: var(--warn-ink) }
.pill.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok) }

/* Hero */
.hero { padding-block: 28px 8px }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: center }
.hero h1 { font-size: var(--hero-size) }
.hero p.lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; margin: 16px 0 24px }
.hero .ctas { display: flex; gap: 10px; flex-wrap: wrap }
.hero-art { position: relative; background: var(--img-bg); border-radius: var(--radius-lg); aspect-ratio: 5 / 4; display: grid; place-items: center; overflow: hidden; max-width: 100% }
.hero-art img { width: 86%; height: auto; mix-blend-mode: multiply }
.hero-tag { position: absolute; bottom: 14px; inset-inline-end: 14px; background: var(--surface); border-radius: var(--radius); padding: 10px 14px; font-size: 0.9rem; box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.3); text-decoration: none }
.hero-tag b { display: block }
:root[data-dir="d2"] .hero h1 em { font-style: normal; background: var(--accent-soft); color: #0F1311; padding: 0 0.12em; border-radius: 0.12em }

/* Sections */
section.block { padding-block: 40px }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap }
.sec-head h2 { font-size: clamp(1.6rem, 3vw, 2.3rem) }
.sec-head p { color: var(--muted); margin: 4px 0 0 }
.depts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.dept { position: relative; background: var(--surface); border-radius: var(--radius-lg); padding: 16px; text-decoration: none; display: grid; gap: 8px; min-height: 220px; align-content: space-between; border: 1px solid var(--line); overflow: hidden }
.dept .ph { aspect-ratio: 4 / 3; background: var(--img-bg); border-radius: var(--radius) }
.dept h3 { font-size: 1.3rem }
.dept small { color: var(--muted) }
:root[data-dir="d2"] .depts { grid-template-columns: repeat(6, minmax(0, 1fr)) }
:root[data-dir="d2"] .dept { grid-column: span 2; border: 0; background: var(--surface) }
:root[data-dir="d2"] .dept:nth-child(1), :root[data-dir="d2"] .dept:nth-child(2) { grid-column: span 3 }
:root[data-dir="d2"] .dept:nth-child(1) { background: var(--accent-soft) }
:root[data-dir="d2"] .dept:nth-child(1) * { color: #0F1311 }
.parts-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px }
.part { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; min-height: 56px }
.part small { color: var(--muted) }
.service { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px }
.service div { padding: 18px; border-top: 2px solid var(--accent) }
.service b { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.2rem; margin-bottom: 4px }
.service p { margin: 0; color: var(--muted) }

/* Product grid + card */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px }
.card { display: grid; gap: 10px; text-decoration: none; min-width: 0 }
.card .ph { aspect-ratio: 1; background: var(--img-bg); border-radius: var(--radius-lg); position: relative; overflow: hidden }
.card .ph img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform 320ms ease }
.card:hover .ph img { transform: scale(1.04) }
.card .brand { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted) }
.card .name { font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em }
.price { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap }
.price b { font-size: 1.08rem }
.price s { color: var(--muted); font-size: 0.9rem }
.card .meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted) }
.tag-sale { position: absolute; top: 10px; inset-inline-start: 10px; background: var(--sale); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px }
:root[data-dir="d2"] .tag-sale { background: var(--accent-soft); color: #0F1311 }
.noimg { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 0.82rem; padding: 12px; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--line) 50%, transparent) 10px 11px) }

/* Category page */
.crumbs { display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.88rem; color: var(--muted); padding-block: 18px 6px }
.crumbs a { text-decoration: none }
.cat-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-bottom: 14px }
.cat-head h1 { font-size: clamp(2rem, 4vw, 3rem) }
.subchips .chip { white-space: nowrap; flex: 0 0 auto }
.subchips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin }
.cat-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding-block: 18px 48px }
.filters { display: grid; gap: 18px; align-content: start; position: sticky; top: 140px }
.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px }
.filters legend { font-weight: 700; margin-bottom: 6px }
.filters label { display: flex; gap: 8px; align-items: center; min-height: 36px; font-size: 0.94rem }
.filters label small { color: var(--muted); margin-inline-start: auto }
.filters input[type="number"] { width: 100%; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 8px 10px; min-height: 40px }
.range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap }
.toolbar select { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 8px 12px; min-height: 44px }
.filter-toggle { display: none }
.cover { margin: 0 0 4px; font-size: 0.8rem; color: var(--muted) }
.filters label.zero { opacity: 0.45 }
.price .verify { font-size: 0.72rem; color: var(--warn-ink); font-weight: 600 }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 16px }
.active-chips .chip { min-height: 36px; font-size: 0.86rem }
.badge-inline { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 8px; font-size: 0.8rem; margin-inline-start: 6px }
.result-count { color: var(--muted) }
.sheet-head { display: none }
.sheet-body { display: grid; gap: 18px }
.sheet-foot { display: flex; gap: 8px }
.sheet-foot #fapply { display: none }
.more { display: flex; justify-content: center; margin-top: 28px }
.empty { padding: 48px 0; text-align: center; color: var(--muted) }

/* Product page */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; padding-block: 10px 40px }
.gallery { display: grid; gap: 12px; align-content: start }
.gallery .main { background: var(--img-bg); border-radius: var(--radius-lg); aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; position: relative; max-width: 100% }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; padding: 4% }
.gallery .main .cap { position: absolute; bottom: 10px; inset-inline-start: 10px; font-size: 0.8rem }
.thumbs { display: flex; gap: 8px; overflow-x: auto }
.thumbs button { flex: 0 0 76px; height: 76px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--img-bg); padding: 4px }
.thumbs button[aria-current="true"] { border-color: var(--ink); border-width: 2px }
.thumbs img { width: 100%; height: 100%; object-fit: contain }
.buy { display: grid; gap: 16px; align-content: start }
.buy h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem) }
.buy .brand { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted) }
.buy .sku { color: var(--muted); font-size: 0.9rem }
.buy .price b { font-size: 1.8rem; font-family: var(--font-display); font-weight: var(--display-weight) }
.opt { display: grid; gap: 8px }
.opt-label { font-weight: 700; display: flex; justify-content: space-between; gap: 8px }
.opt-label span { font-weight: 400; color: var(--muted) }
.opt .choices { display: flex; flex-wrap: wrap; gap: 8px }
.opt .note { font-size: 0.85rem; color: var(--warn-ink); background: var(--warn-bg); padding: 6px 10px; border-radius: var(--radius) }
.qty { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface) }
.qty button { width: 44px; height: 46px; border: 0; background: none; font-size: 1.2rem }
.qty output { min-width: 36px; display: grid; place-items: center }
.buy-row { display: flex; gap: 10px; flex-wrap: wrap }
.buy-row .btn { flex: 1 }
.assure { display: grid; gap: 8px; font-size: 0.92rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px }
.assure div { display: flex; gap: 8px; align-items: start }
.assure svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--accent) }
.flags { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 12px 14px; font-size: 0.88rem }
.flags b { display: block; margin-bottom: 4px }
.flags ul { margin: 0; padding-inline-start: 18px }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto }
.tabs button { border: 0; background: none; padding: 12px 14px; font-weight: 700; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 48px }
.tabs button[aria-selected="true"] { border-bottom-color: var(--accent) }
.panel { padding-block: 22px; max-width: 78ch }
.panel table { width: 100%; border-collapse: collapse; font-size: 0.96rem }
.panel th, .panel td { text-align: start; padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top }
.panel th { width: 38%; font-weight: 600; color: var(--muted) }
.panel tr:nth-child(odd) td, .panel tr:nth-child(odd) th { background: color-mix(in srgb, var(--surface) 70%, transparent) }
.panel .src { font-size: 0.82rem; color: var(--muted); margin-top: 10px }
.table-scroll { overflow-x: auto }

/* Cart */
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center }
.cart-line .ph { width: 72px; height: 72px; background: var(--img-bg); border-radius: var(--radius) }
.cart-line .ph img { width: 100%; height: 100%; object-fit: contain }
.cart-line small { color: var(--muted); display: block }
.link { border: 0; background: none; text-decoration: underline; color: var(--muted); padding: 4px 0; min-height: 32px }
.order { display: grid; gap: 12px; margin-top: 16px }
.order label { display: grid; gap: 4px; font-weight: 600; font-size: 0.92rem }
.order input, .order textarea { border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); padding: 10px 12px; min-height: 44px; font-weight: 400 }
.order pre { white-space: pre-wrap; background: var(--bg); border: 1px dashed var(--line); padding: 12px; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.9rem; margin: 0 }
.totals { display: flex; justify-content: space-between; padding: 14px 0; font-size: 1.1rem }

/* Report */
.report { padding-block: 24px 56px; display: grid; gap: 28px }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px }
.kpi b { display: block; font-size: 1.9rem; font-family: var(--font-display); font-weight: var(--display-weight) }
.kpi span { color: var(--muted); font-size: 0.9rem }
.report table { width: 100%; border-collapse: collapse; font-size: 0.94rem }
.report th, .report td { text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
.report th { color: var(--muted); font-weight: 600 }
.state { font-weight: 700; white-space: nowrap }
.state.go { color: var(--ok) }
.state.hold { color: var(--warn-ink) }

/* Content pages migrated from the old site (WK_Pages / WK_FAQ) */
.content-page { max-width: 820px; padding-bottom: 40px }
.content-page > h1, .prose h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 8px 0 18px }
.prose { line-height: 1.75; overflow-wrap: anywhere }
.prose h2 { font-size: 1.45rem; margin: 30px 0 10px }
.prose h3 { font-size: 1.15rem; margin: 22px 0 8px }
.prose p { margin: 0 0 14px }
.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 22px }
.prose li p { margin: 0 0 4px }
.prose img { display: block; max-width: 100%; height: auto; margin: 18px 0; border-radius: var(--radius); background: var(--img-bg) }
.prose a { color: var(--ink); text-underline-offset: 3px }
.draft-banner { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius); padding: 12px 16px; margin: 6px 0 18px; font-size: 0.92rem }
.draft-banner ul { margin: 6px 0 0; padding-inline-start: 20px }
.faq-group h2 { font-size: 1.3rem; margin: 26px 0 10px }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px }
.faq-item summary { cursor: pointer; padding: 14px 16px; font-weight: 700; min-height: 48px; display: flex; align-items: center }
.faq-item p { margin: 0; padding: 0 16px 16px; line-height: 1.7 }

/* Footer */
.foot { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 0.95rem; margin-top: 40px; padding-bottom: env(safe-area-inset-bottom, 0px) }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-block: 40px 28px }
.foot .logo { color: var(--ink) }
.foot-brand p { margin: 10px 0 14px; max-width: 34ch }
.foot ul { list-style: none; margin: 0; padding: 0 }
.foot-h { display: block; color: var(--ink); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.05rem; margin-bottom: 8px }
.foot-list a, .foot-contact a { display: flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-decoration: none }
.foot-list a:hover, .foot-contact a:hover { text-decoration: underline; text-underline-offset: 3px }
.foot-list .ext { font-size: 0.8em; color: var(--muted) }
.foot-tel { font-size: 1.25rem; font-weight: 700; direction: ltr; justify-content: flex-end }
.foot address { font-style: normal; color: var(--ink); min-height: 40px; display: flex; align-items: center }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; border-top: 1px solid var(--line); padding-block: 16px 24px; font-size: 0.85rem }
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 16px }
  .foot-brand { grid-column: 1 / -1 }
}
@media (max-width: 340px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr) }
}
.toast { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); inset-inline: 0; margin: auto; width: fit-content; max-width: 90vw; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 999px; z-index: 90; font-size: 0.95rem }

@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .parts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .mega .wrap { grid-template-columns: 1fr 1fr }
  .mega .feat-col { display: none }
}
@media (max-width: 860px) {
  .nav { display: none }
  .burger { display: inline-flex }
  .search { order: 3; flex-basis: 100%; max-width: none }
  .hdr-top { flex-wrap: wrap }
  .hero-grid, .pdp { grid-template-columns: minmax(0, 1fr) }
  .hero-art { order: -1 }
  .depts, :root[data-dir="d2"] .depts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  :root[data-dir="d2"] .dept, :root[data-dir="d2"] .dept:nth-child(1), :root[data-dir="d2"] .dept:nth-child(2) { grid-column: span 1 }
  .service { grid-template-columns: minmax(0, 1fr) }
  .cat-layout { grid-template-columns: minmax(0, 1fr) }
  .filters { position: fixed; inset: auto 0 0 0; top: auto; z-index: 75; display: none; max-height: 86vh; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: 0 -16px 40px -12px rgb(0 0 0 / 0.35); padding: 0; gap: 0; grid-template-rows: auto minmax(0, 1fr) auto }
  .filters.open { display: grid }
  .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 12px max(16px, env(safe-area-inset-left, 0px)) 12px max(16px, env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--line) }
  .sheet-body { overflow-y: auto; padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)) }
  .sheet-foot { padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line) }
  .sheet-foot .btn { flex: 1 }
  .sheet-foot #fapply { display: inline-flex }
  body.sheet-open::after { content: ""; position: fixed; inset: 0; background: rgb(0 0 0 / 0.38); z-index: 74 }
  body.sheet-open { overflow: hidden }
  .filter-toggle { display: inline-flex }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 10px }
  .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .logo span { display: none }
  .proto .wrap { font-size: 12px }
  section.block { padding-block: 28px }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important }
}

/* storefront additions */
.sub-link { display: block; padding: 10px 6px; text-decoration: none; min-height: 44px }
.acc { display: grid; gap: 2px; padding-block: 10px }
.sec-title { font-size: 1.2rem; margin: 18px 0 8px }
.panel table { width: 100% }
.hero .lead { color: var(--muted) }

.test-band { background: #E0262E; color: #fff; text-align: center }
.test-band .wrap { justify-content: center }
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); padding: max(16px, env(safe-area-inset-left, 0px)) }
.gate-card { display: grid; gap: 10px; width: min(360px, 100%); background: var(--surface); padding: 24px; border-radius: var(--radius-lg); border: 1px solid var(--line) }
.gate-card input { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; min-height: 44px; background: var(--bg) }
/* SSR additions on top of storefront/app.css */
.dept h2 { font-size: 1.3rem }
.filters { margin: 0 }
.content-page time { font-variant-numeric: tabular-nums }
.empty h1 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 16px }
/* the hidden attribute wins over component display rules (.badge is display:grid) */
[hidden] { display: none !important }
/* order message in the cart drawer wraps instead of scrolling sideways */
.drawer pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px dashed var(--line); padding: 12px; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.9rem; margin: 8px 0 12px }
.drawer .btn + .btn { margin-top: 8px }
/* missing-product request box (components/AskProduct.astro): quiet surface card, stacks on mobile */
.ask-product { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 40px 0 8px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg) }
.ask-product-text { flex: 1 1 420px; min-width: 0 }
.ask-product h2 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); margin: 0 0 8px }
.ask-product p { margin: 0 0 4px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere }
.ask-product-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto }
@media (max-width: 640px) { .ask-product { padding: 18px 16px; margin-top: 28px } .ask-product-actions, .ask-product-actions .btn { width: 100% } }
/* home hero: text and a real product picture side by side; stacked on phones (text first, picture below) */
.hero-art { margin: 0 }
.hero-art img { width: auto; max-width: 88%; max-height: 88%; object-fit: contain }
.hero-tag span { color: var(--muted); font-size: 0.85rem }
@media (max-width: 860px) { .hero-art { order: 0; aspect-ratio: 4 / 3 } }
/* department tiles: equal row heights; a short last row stretches to the full width */
:root[data-dir="d2"] .depts { grid-auto-rows: 1fr }
@media (min-width: 861px) { :root[data-dir="d2"] .dept.half { grid-column: span 3 } :root[data-dir="d2"] .dept.full { grid-column: span 6 } }
@media (max-width: 860px) { :root[data-dir="d2"] .depts > .dept:last-child:nth-child(odd) { grid-column: span 2 } }
/* shopping advisor demo (components/Advisor.astro): floating button at the inline end, panel above it; a bottom sheet on phones */
.adv-fab { position: fixed; right: 16px; bottom: calc(16px + var(--adv-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 65; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); font: inherit; font-weight: 700; box-shadow: 0 10px 28px -10px rgb(0 0 0 / 0.45); cursor: pointer }
.adv-fab svg { width: 22px; height: 22px }
.adv-panel { position: fixed; right: 16px; bottom: calc(16px + var(--adv-lift, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 66; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100vh - 32px - var(--adv-lift, 0px))); height: min(640px, calc(100dvh - 32px - var(--adv-lift, 0px))); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45); overflow: hidden }
.adv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line) }
.adv-head small { display: block; color: var(--muted); font-size: 0.8rem }
.adv-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px }
.adv-msg { margin: 0; max-width: 88%; padding: 10px 14px; border-radius: 16px; line-height: 1.5; overflow-wrap: anywhere }
.adv-msg.bot { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-start-start-radius: 4px }
.adv-msg.me { align-self: flex-end; background: var(--ink); color: var(--bg); border-start-end-radius: 4px }
.adv-chips { display: flex; flex-wrap: wrap; gap: 8px }
.adv-chips .chip { cursor: pointer; font: inherit; font-size: 0.92rem }
.adv-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.adv-card { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit }
.adv-card img { width: 80px; height: 80px; flex: 0 0 80px; object-fit: contain; background: var(--img-bg); border-radius: 8px }
.adv-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.adv-card .name { font-size: 0.95rem; line-height: 1.35; overflow-wrap: anywhere }
.adv-card .brand, .adv-card .spec { color: var(--muted); font-size: 0.8rem }
.adv-card .price { display: flex; gap: 6px; align-items: baseline }
.adv-card .go { font-size: 0.85rem; font-weight: 700; margin-top: 2px }
.adv-wa { align-self: stretch }
.adv-note { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.5 }
.adv-noimg { width: 80px; height: 80px; flex: 0 0 80px; display: grid; place-items: center; background: var(--img-bg); border-radius: 8px; color: var(--muted) }
.adv-noimg svg { width: 40px; height: 40px }
.adv-form { display: flex; gap: 8px; padding: 10px 16px 0; border-top: 1px solid var(--line) }
.adv-form input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-size: 16px }
.adv-send { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--bg); cursor: pointer }
.adv-send svg { width: 20px; height: 20px }
.adv-foot { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 8px }
.adv-wa-fixed { width: 100%; min-height: 46px }
.adv-nav { display: flex; justify-content: space-between; gap: 12px }
.adv-link { background: none; border: 0; padding: 6px 0; min-height: 44px; font: inherit; font-size: 0.9rem; color: var(--ink); text-decoration: underline; cursor: pointer }
.adv-link[disabled] { opacity: 0.4; cursor: default; text-decoration: none }
@media (max-width: 640px) {
  .adv-fab { right: 12px; bottom: calc(12px + var(--adv-lift, 0px) + env(safe-area-inset-bottom, 0px)) }
  /* the page behind the open sheet does not scroll with it */
  body.adv-open { overflow: hidden }
  .adv-panel { inset: auto 0 var(--adv-lift, 0px) 0; width: 100%; height: calc(86vh - var(--adv-lift, 0px)); height: calc(86dvh - var(--adv-lift, 0px)); max-height: 100dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px) }
}
/* business details (components/BusinessDetails.astro): plain text with small icons, no cards; footer and contact page */
.biz { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--ink) }
.biz li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; min-width: 0 }
.biz li > svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--muted) }
.biz li > span { min-width: 0; overflow-wrap: anywhere }
.biz a { color: var(--ink); text-underline-offset: 3px }
.biz address { display: inline; font-style: normal }
.biz-hours { display: grid; gap: 2px; color: var(--muted) }
.biz-social { display: flex; gap: 8px; margin: 14px 0 0 }
.biz-social a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); border-radius: 50% }
.biz-social a:hover { background: var(--bg) }
.biz-social svg { width: 22px; height: 22px }
.foot .biz { font-size: 0.92rem }
.foot .biz a, .foot .biz address { min-height: 0; display: inline }
/* contact page: details beside the map on a computer, stacked on a phone */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px 32px; align-items: stretch; margin: 32px 0 }
.visit h2 { margin: 0 0 14px; font-size: 1.3rem }
.visit-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0 }
.visit-map { width: 100%; min-height: 360px; height: 100%; border: 0; border-radius: var(--radius-lg); background: var(--img-bg) }
@media (max-width: 860px) { .visit { grid-template-columns: minmax(0, 1fr) } .visit-map { min-height: 300px } .visit-nav .btn { flex: 1 1 100% } }
/* sorting on category pages */
.toolbar { flex-wrap: wrap }
.sort { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; font-size: 0.92rem }
.sort select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; max-width: 100% }
.subchips .chip small { color: var(--muted); margin-inline-start: 4px }
.subchips .chip.on { border-color: var(--ink); font-weight: 700 }

/* neutral placeholder for products without a photo (components/NoImage.astro) */
.noimg { gap: 6px; align-content: center }
.noimg svg { opacity: .55 }