/* Demir Kardesler Toptan Spot — site stilleri.
   Sade magaza/tedarikci dili: beyaz zemin, gercek fotograflar, ince cizgiler, marka yesili vurgu. */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  /* Balanced line box for plain text (box centre 0.32em above the baseline). Icons and controls do not rely on it:
     they hang off the text baseline and the cap-height centre (--cap-axis), see "Icon ↔ text" below. */
  ascent-override: 100%;
  descent-override: 36%;
  line-gap-override: 0%;
}

:root {
  --bg: #ffffff;
  --surface: #f6f5f3;
  --surface-2: #eeece8;
  --line: #e6e3de;
  --line-strong: #d3cfc8;
  --line-hover: #b9b4ac;
  --text: #171818;
  --text-2: #4a4d50;
  --text-3: #6e7175;
  --brand: #e02a06;
  --brand-dark: #b82205;
  --brand-tint: #fdebe6;
  --brand-ink: #fbd3c8;
  --brand-ring: rgba(224, 42, 6, .2);
  --danger: #b42318;
  --danger-tint: #fdeceb;
  --danger-line: #f0b8b3;
  --focus: #e02a06;
  --footer: #171818;
  --on-dark: #ffffff;
  --on-dark-2: #c9cbcd;
  --on-dark-3: #9a9da1;
  --on-dark-line: rgba(255, 255, 255, .1);
  --on-dark-accent: #ff8a6b;
  --on-dark-border: rgba(255, 255, 255, .3);
  --on-dark-hover: rgba(255, 255, 255, .08);
  --on-brand: #ffffff;
  --overlay: rgba(255, 255, 255, .94);
  --glass: rgba(255, 255, 255, .14);
  --scrim: linear-gradient(180deg, rgba(23, 24, 24, 0) 35%, rgba(23, 24, 24, .55) 62%, rgba(23, 24, 24, .9) 100%);
  --muted: #9a9da1;

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cap-axis: .36em;
  --text-axis: .32em;
  --x-axis: .27em;
  --icon-axis: var(--text-axis);
  --gutter: clamp(16px, 4vw, 40px);
  --container: 1240px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --header-h: 72px;
  --topbar-h: 37px;
  --action-bar-h: 58px;
  --section-space: clamp(52px, 3vw + 36px, 88px);
  --section-space-sm: clamp(36px, 2vw + 24px, 56px);
  --crumbs-gap: clamp(20px, 1vw + 14px, 28px);
  --crumbs-accent-gap: 14px;
  --shadow-sm: 0 1px 2px rgba(23, 24, 24, .06);
  --shadow: 0 12px 32px -16px rgba(23, 24, 24, .22);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --motion: .4s;
  --motion-t: var(--motion) var(--ease);
  --motion-loop: var(--motion) linear infinite;
  --track-line: 2px;
  --motion-shift: 4px;
  --motion-zoom: 1.04;
  --motion-lift: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
a, button, input, select, textarea, summary, label { transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
@keyframes motion-in { from { opacity: 0; transform: translateY(var(--motion-lift)); } to { opacity: 1; transform: none; } }
@keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--motion-lift)); } }
@keyframes motion-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes motion-flow-x { to { background-position-x: 12px; } }
@keyframes motion-flow-up { to { background-position-y: -12px; } }
@keyframes motion-flow-down { to { background-position-y: 12px; } }
/* offset = one dash period of .tr-map__route (2 + 7) */
@keyframes motion-flow-dash { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -9px; } }
@keyframes motion-turn { from { opacity: 0; transform: rotate(-90deg); } to { opacity: 1; transform: none; } }
@property --scroller-fade-start { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --scroller-fade-end { syntax: "<length>"; inherits: true; initial-value: 48px; }
.reveal { opacity: 0; transform: translateY(var(--motion-lift)); transition: opacity var(--motion-t), transform var(--motion-t); }
.reveal.is-in { opacity: 1; transform: none; }
.field__error, .form-alert, .error-page__text { animation: motion-in var(--motion-t); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 1rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { color: var(--text); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
table { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* Icon ↔ text vertical rule (rule 6). At 1x Chrome lays text out on whole-pixel font metrics, so centring an icon box and a
   text box separately drifts 1–2px. Alignment therefore hangs off the text baseline:
   - icon rows use align-items: baseline; the icon rests on the baseline, is lifted so its centre meets --icon-axis, rounded to
     a whole pixel, and takes no vertical room. --icon-axis is the mixed-case optical centre (--text-axis, between the x-height
     centre and the cap centre) in running rows, and the cap-height centre (--cap-axis) inside controls, whose labels are
     Title Case. Size icons only through --icon-size;
   - fixed-height controls get a zero-width strut (::after) that puts the baseline where the cap block is centred:
     --control-h outer height, --control-inset border + block padding, --control-gap the row gap;
   - inline icons get the same lift through vertical-align. A new icon row or control joins the lists below. */
.icon { --icon-size: 20px; display: inline-block; width: var(--icon-size); height: var(--icon-size); flex: none; vertical-align: round(calc(var(--icon-axis) - var(--icon-size) / 2), 1px); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon--lg { --icon-size: 26px; }
:where(.btn, .list-link, .menu-btn, .chip, .more-link, .error-help__count, .about-place__address, .about-intro__facts li, .mega__all, .mega__facts li, .topbar__item, .topbar__phone, .nav__mobile-link, .footer-nap a, .buybox__call, .quote-summary__call, .quote-step__more, .prep-chip--add a, .contact-store__map-fallback, .contact-primary__go, .cat-card__count, .brand-tile__meta, .guide-card__more, .guide-item__more, .solution-card__more, .crumbs li, .filter-group__toggle, .footer-acc__toggle, .toc__toggle, .label__head, .label__foot, .form-alert, .field__error, .buybox__note, .page-hero__facts li, .page-hero__meta li, .contact-store__info li, .related a, .subcats a, .active-filter, .pick__in, .pager__step) > .icon,
:where(.filter-option) > .filter-option__mark, :where(.nav__item) > .nav__toggle, :where(.faq__q) > .faq__mark, :where(.check) > input,
:where(.cond)::before, :where(.page-hero__meta li + li)::before, :where(.hero__kicker)::before {
  position: relative; top: round(calc(var(--icon-size) / 2 - var(--icon-axis)), 1px); margin-top: calc(-1 * var(--icon-size));
}
/* every control starts from zero inset/gap, so a control nested in another (the count badge in "Teklif Listesi") does not inherit its parent's values */
:where(.btn, .list-link, .menu-btn, .chip, .picker__group, .picker__segment button, .cat-card__links a, .brand-card__cats a, .subcats a, .active-filter, .active-filters__clear, .pick__in, .cond, .count, .pager__pages a, .pager__pages span, .pager__step, .process__n, .quote-next__list span, .filter-option, .topbar__in) { --control-inset: 0px; --control-gap: 0px; --icon-axis: var(--cap-axis); }
:where(.btn, .list-link, .menu-btn, .chip, .picker__group, .picker__segment button, .cat-card__links a, .brand-card__cats a, .subcats a, .active-filter, .active-filters__clear, .pick__in, .cond, .count, .pager__pages a, .pager__pages span, .pager__step, .process__n, .quote-next__list span, .filter-option, .topbar__in)::after {
  --control-inner: calc(var(--control-h) - 2 * var(--control-inset, 0px));
  --control-baseline: round(calc(var(--control-inner) / 2 + var(--cap-axis)), 1px);
  content: ""; flex: none; align-self: baseline; width: 0;
  margin: var(--control-baseline) 0 calc(var(--control-inner) - var(--control-baseline)) calc(-1 * var(--control-gap, 0px));
}
.btn > .count { align-self: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--on-brand); padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link { transition: top var(--motion-t), color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.skip-link:focus { top: 12px; color: var(--on-brand); }
main:focus { outline: none; }
.nw { white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), 860px); }

/* ---------- Buttons ---------- */

.btn {
  --control-h: 46px; --control-inset: 1px; --control-gap: 8px;
  display: inline-flex; align-items: baseline; justify-content: center; gap: var(--control-gap);
  min-height: var(--control-h); padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-sm); background-clip: padding-box;
  font-weight: 600; font-size: .98rem; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t);
}
.btn .icon { --icon-size: 19px; }
.btn--sm { --control-h: 38px; padding: 0 14px; font-size: .92rem; }
.btn--lg { --control-h: 52px; padding: 0 24px; font-size: 1.02rem; }
.btn--wa, .btn--green, .btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--wa:hover, .btn--green:hover, .btn--primary:hover { background: var(--brand-dark); color: var(--on-brand); }
.btn--line { background: var(--bg); color: var(--text); border-color: var(--line-strong); }
.btn--line:hover { border-color: var(--text); color: var(--text); }
.btn--yellow { background: var(--bg); color: var(--brand-dark); }
.btn--yellow:hover { background: var(--brand-tint); color: var(--brand-dark); }
.btn--on-dark { background: transparent; color: var(--on-brand); border-color: var(--on-dark-border); }
.btn--on-dark:hover { border-color: var(--on-dark); background: var(--on-dark-hover); color: var(--on-brand); }
.btn--danger { background: var(--bg); color: var(--danger); border-color: var(--danger-line); }
.btn--danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-brand); }

.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.icon-btn:hover { border-color: var(--text); color: var(--text); }
.icon-btn--wa { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.icon-btn--wa:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--on-brand); }

.more-link { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; color: var(--brand); text-decoration: none; }
.more-link .icon { --icon-size: 17px; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), transform var(--motion-t); }
.more-link:hover { color: var(--brand-dark); }
.more-link:hover .icon { transform: translateX(var(--motion-shift)); }

/* ---------- Badges ---------- */

.cond { --control-h: 24px; --control-gap: 6px; display: inline-flex; align-items: baseline; gap: var(--control-gap); height: var(--control-h); padding: 0 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap; }
.cond::before { content: ""; --icon-size: 6px; width: var(--icon-size); height: var(--icon-size); flex: none; border-radius: 50%; background: currentColor; }
.cond--new { background: var(--brand-tint); color: var(--brand-dark); }
.cond--lg { --control-h: 30px; --control-gap: 7px; padding: 0 14px; font-size: .85rem; }

.eclass { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; white-space: nowrap; }
.eclass::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--eclass); }
/* EU energy label scale colours (standard, not brand tokens) */
.eclass--a { --eclass: #00a651; }
.eclass--b { --eclass: #50b848; }
.eclass--c { --eclass: #bed630; }
.eclass--d { --eclass: #fff200; }
.eclass--e { --eclass: #fdb913; }
.eclass--f { --eclass: #f37021; }
.eclass--g { --eclass: #cf1219; }

/* ---------- Cards ---------- */

.label { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.label__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.label__title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.label__mark { display: none; }
.label__head .icon--lg { color: var(--brand); }
.label__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 20px; border-top: 1px solid var(--line); }
.label__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.label__table th, .label__table td { padding: 11px 20px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.label__table tr:first-child th, .label__table tr:first-child td { border-top: 0; }
.label__table th { font-weight: 500; color: var(--text-2); }
.label__table td { font-weight: 700; text-align: right; white-space: nowrap; }
.label__foot { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface); font-size: .85rem; color: var(--text-3); line-height: 1.45; }
.label__foot .icon { --icon-size: 17px; }


/* ---------- Header ---------- */

.topbar { background: var(--surface); border-bottom: 1px solid var(--line); color: var(--text-2); font-size: .84rem; }
.topbar__in { --control-h: calc(var(--topbar-h) - 1px); --control-gap: 26px; display: flex; align-items: baseline; gap: var(--control-gap); min-height: var(--control-h); }
.topbar__item { display: inline-flex; align-items: baseline; gap: 7px; margin: 0; color: inherit; text-decoration: none; }
.topbar__item .icon, .topbar__phone .icon { --icon-size: 15px; color: var(--brand); }
a.topbar__item:hover { color: var(--text); }
.topbar__contact { display: flex; align-items: baseline; gap: 26px; margin-left: auto; }
.topbar__phone { display: inline-flex; align-items: baseline; gap: 7px; color: var(--text); font-weight: 700; text-decoration: none; }
.topbar__phone:hover { color: var(--brand); }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__in { position: relative; display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { flex: none; display: block; }
.brand img { height: 52px; width: auto; }

.nav { margin-left: 8px; }
.nav__list { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; display: flex; align-items: baseline; }
.nav__link { display: block; padding: 24px 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap; }
.nav__link:hover, .nav__link.is-current { color: var(--brand); }
.nav__toggle { --icon-size: 34px; display: grid; place-items: center; width: 24px; height: var(--icon-size); margin-left: -8px; padding: 0; border: 0; background: none; color: var(--text-3); border-radius: 4px; }
.nav__toggle .icon { --icon-size: 15px; position: absolute; inset: 0; margin: auto; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), transform var(--motion-t); }
.nav__item.is-open .nav__toggle { color: var(--brand-dark); }
.nav__item.is-open .nav__toggle .icon { transform: rotate(180deg); }
@media (min-width: 1024px) {
  .nav__item--panel:hover .nav__toggle, .nav__item--panel:focus-within .nav__toggle { color: var(--brand-dark); }
  .nav__item--panel:hover .nav__toggle .icon, .nav__item--panel:focus-within .nav__toggle .icon { transform: rotate(180deg); }
  .nav__item--panel.is-closed .nav__toggle { color: var(--text-3); }
  .nav__item--panel.is-closed .nav__toggle .icon { transform: none; }
}

.nav__panel {
  position: absolute; top: calc(100% - 6px); left: -12px; z-index: 60; min-width: 280px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(var(--motion-lift));
  transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), transform var(--motion-t), visibility 0s linear var(--motion);
}
.nav__item--panel:has(> .nav__panel--wide) { position: static; }
.nav__panel--wide { left: 0; right: 0; width: auto; }
.nav__panel--narrow { width: min(960px, 100%); margin-inline: auto; }
.nav__item--panel:hover > .nav__panel, .nav__item--panel:focus-within > .nav__panel, .nav__item--panel.is-open > .nav__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__item--panel.is-closed > .nav__panel { opacity: 0; visibility: hidden; }

.mega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); gap: 8px; padding: 12px; }
.mega__col { display: flex; flex-direction: column; padding: 12px 14px 14px; }
.mega__col--aside { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-sm); background: var(--surface); }
.mega__head, .mega__tile { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.mega__head { margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mega__tile { padding: 10px; margin-inline: -10px; border-radius: var(--radius-sm); }
.mega__col--aside .mega__tile + .mega__tile { position: relative; }
.mega__col--aside .mega__tile + .mega__tile::before { content: ""; position: absolute; top: -4px; left: 10px; right: 10px; height: 1px; background: var(--line); }
.mega__tile:hover { background: var(--bg); }
.mega__thumb { position: relative; display: block; width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.mega__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-t); }
.mega__head:hover .mega__thumb img, .mega__tile:hover .mega__thumb img { transform: scale(var(--motion-zoom)); }
.mega__head-text { display: grid; gap: 2px; min-width: 0; }
.mega__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .95rem; transition: color var(--motion-t); }
.mega__head:hover .mega__name, .mega__tile:hover .mega__name { color: var(--brand-dark); }
.mega__count { font-size: .8rem; color: var(--text-3); }
.mega__title { margin: 0 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-inline: -8px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: .92rem; }
.mega__list a:hover { background: var(--surface); color: var(--brand-dark); }
.mega--solutions { grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr); }
.mega__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-content: stretch; gap: 4px 16px; list-style: none; margin: 0; padding: 12px 14px; }
.mega__tiles > li { display: grid; }
.mega__tiles .mega__tile { margin-inline: 0; }
.mega__tiles > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.mega__tiles .mega__tile:hover { background: var(--surface); }
.mega__tiles .mega__count, .mega__col--aside .mega__count { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mega__text { margin: 0; font-size: .9rem; color: var(--text-2); }
.mega__facts { display: grid; gap: 8px; list-style: none; margin: 8px 0 0; padding: 0; }
.mega__facts li { display: flex; align-items: baseline; gap: 10px; font-size: .88rem; font-weight: 500; color: var(--text); }
.mega__facts .icon { --icon-size: 16px; color: var(--brand-dark); }
.mega__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.mega__col--aside > :nth-last-child(2) { margin-bottom: 8px; }
.mega__foot .btn { width: 100%; }
.mega__all { display: inline-flex; align-items: baseline; justify-content: center; gap: 6px; font-weight: 600; font-size: .92rem; color: var(--brand-dark); text-decoration: none; }
.mega__col-all { justify-content: flex-start; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.mega__list + .mega__col-all { margin-top: auto; }
.mega__col .mega__list { margin-bottom: 12px; }
.mega__all .icon { --icon-size: 16px; transition: transform var(--motion-t); }
.mega__all:hover .icon { transform: translateX(var(--motion-shift)); }

.nav__mobile-extra { display: none; }

.header-actions { --header-control: 42px; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-actions .icon-btn, .header-actions .list-link, .header-actions .menu-btn, .header-actions .btn { --control-h: var(--header-control); height: var(--header-control); min-height: var(--header-control); }
.header-actions .icon-btn { width: var(--header-control); }
.list-link { --control-h: 42px; --control-inset: 1px; --control-gap: 8px; position: relative; display: inline-flex; align-items: baseline; gap: var(--control-gap); height: var(--control-h); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1; white-space: nowrap; }
.list-link:hover { border-color: var(--text); color: var(--text); }
.count:not([hidden]) { animation: motion-in var(--motion-t); }
.count { --control-h: 20px; display: inline-flex; justify-content: center; align-items: baseline; min-width: 20px; height: var(--control-h); padding: 0 6px; border-radius: 10px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: .72rem; line-height: 1; }
.count[hidden] { display: none; }
.list-link .count { position: absolute; top: -8px; right: -8px; }
.list-link > .icon { --icon-size: 19px; }
.menu-btn { --control-h: 42px; --control-inset: 1px; --control-gap: 6px; display: none; align-items: baseline; gap: var(--control-gap); height: var(--control-h); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-weight: 600; text-decoration: none; }
.menu-btn .icon--close { display: none; }
.menu-btn--js .icon { animation: motion-turn var(--motion-t); }
.nav-open .menu-btn .icon--open { display: none; }
.nav-open .menu-btn .icon--close { display: block; }

/* ---------- Sections ---------- */

.section { --section-bg: var(--bg); --section-contrast: var(--surface); padding-block: var(--section-space); }
.section--ground { --section-bg: var(--surface); --section-contrast: var(--bg); background: var(--surface); }
.section--tight { padding-block: var(--section-space-sm); }
.section-head { max-width: 720px; margin-bottom: clamp(24px, 2vw + 12px, 36px); }
.section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.section-title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance; }
.section-lede { margin: 10px 0 0; font-size: 1.05rem; color: var(--text-2); max-width: 62ch; }

/* ---------- Home hero ---------- */

.hero { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h) - var(--header-h) - 1px); min-height: calc(100svh - var(--topbar-h) - var(--header-h) - 1px); background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); }
.hero__in { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding-block: var(--section-space-sm); }
.hero__kicker { display: flex; align-items: baseline; gap: 12px; margin: 0 0 16px; color: var(--text-3); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero__kicker::before { content: ""; --icon-size: 3px; width: 28px; height: var(--icon-size); flex: none; border-radius: 2px; background: var(--brand); }
.hero__title { margin: 0 0 18px; font-size: clamp(2rem, 1.2rem + 2.4vw, 3.1rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.hero__title-line { display: block; color: var(--brand); font-weight: 700; }
.hero__lede { max-width: 54ch; margin: 0 0 26px; font-size: clamp(1.02rem, .96rem + .3vw, 1.15rem); color: var(--text-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__quick { margin-top: clamp(24px, 3vw, 34px); }
.hero__quick-title { margin: 0 0 12px; color: var(--text-3); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero__quick-list { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hero__quick-list li { flex: none; }
.hero__call { margin: 18px 0 0; color: var(--text-3); font-size: .95rem; }
.hero__call a { color: var(--text); font-weight: 700; text-decoration: none; margin-left: 4px; white-space: nowrap; }
.hero__call a:hover { color: var(--brand); }
.hero__media { position: relative; }
/* 4:3 keeps the photo level with the text column and leaves room on both sides of the shop sign */
.hero__media img { position: relative; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

.trust { border-block: 1px solid var(--line); background: var(--bg); }
.trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.trust__item { display: flex; align-items: center; gap: 14px; padding: 22px 18px; }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--brand-tint); color: var(--brand); }
.trust__item strong { display: block; font-size: .95rem; line-height: 1.3; }
.trust__item div span { display: block; font-size: .85rem; color: var(--text-3); line-height: 1.35; }

/* ---------- Category tiles ---------- */

.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cat-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--footer); color: var(--on-dark); }
.cat-card__media { position: absolute; inset: 0; z-index: -1; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), transform var(--motion-t); }
.cat-card__media::after { content: ""; position: absolute; inset: 0; background: var(--scrim); }
.cat-card:hover .cat-card__media img { transform: scale(var(--motion-zoom)); }
.cat-card__body { padding: 0 0 22px; }
.cat-card__head { padding: 0 22px 14px; }
.cat-card__title::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--brand); transition: width var(--motion-t); }
.cat-card:hover .cat-card__title::before { width: 56px; }
.cat-card__title { margin: 0; font-size: clamp(1.35rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.02em; }
.cat-card__title a { color: var(--on-dark); text-decoration: none; }
.cat-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cat-card:has(.cat-card__title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.cat-card__title a:focus-visible { outline: none; }
.cat-card__count { display: inline-flex; align-items: baseline; gap: 6px; margin: 4px 0 0; font-size: .9rem; font-weight: 600; color: var(--on-dark-accent); }
.cat-card__count .icon { --icon-size: 16px; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), transform var(--motion-t); }
.cat-card:hover .cat-card__count .icon { transform: translateX(var(--motion-shift)); }
.cat-card__scroller { position: relative; z-index: 2; }
.cat-card__links { list-style: none; margin: 0; padding: 0 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.cat-card__links li { flex: none; }
.cat-card__links a { --control-h: 32px; --control-inset: 1px; display: inline-flex; align-items: baseline; min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--on-dark-border); border-radius: 999px; background: var(--glass); color: var(--on-dark); text-decoration: none; font-size: .86rem; font-weight: 500; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.cat-card__links a:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }


/* Scroller: one-row horizontal strip; links stay plain HTML, JS adds edge state and mouse drag */
.scroller { position: relative; }
.scroller__track { transition: --scroller-fade-start var(--motion-t), --scroller-fade-end var(--motion-t); flex-wrap: nowrap; cursor: grab; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--scroller-fade-start, 0px), #000 calc(100% - var(--scroller-fade-end, 48px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--scroller-fade-start, 0px), #000 calc(100% - var(--scroller-fade-end, 48px)), transparent 100%); }
.scroller__track::-webkit-scrollbar { display: none; }
.scroller.is-start .scroller__track { --scroller-fade-start: 0px; }
.scroller:not(.is-start) .scroller__track { --scroller-fade-start: 48px; }
.scroller.is-end .scroller__track { --scroller-fade-end: 0px; }
.scroller.is-dragging .scroller__track { cursor: grabbing; }
.scroller.is-static .scroller__track { cursor: auto; }
.scroller.is-dragging a { pointer-events: none; }


/* ---------- Product card ---------- */

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 22px; }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.pcard:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.pcard__head { position: absolute; top: 12px; right: 12px; z-index: 2; pointer-events: none; }
.pcard__cat { display: none; }
.pcard__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), transform var(--motion-t); }
.pcard:hover .pcard__media img { transform: scale(var(--motion-zoom)); }
.pcard__placeholder { color: var(--line-strong); }
.pcard__placeholder .icon { width: 48px; height: 48px; }
.pcard__body { padding: 16px 16px 0; }
.pcard__kicker { margin: 0 0 6px; font-size: .78rem; color: var(--text-3); }
.pcard__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.pcard__link { color: var(--text); text-decoration: none; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__link:focus-visible { outline: none; }
.pcard:has(.pcard__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.pcard:hover .pcard__link { color: var(--brand); }
.pcard__summary { margin: 6px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .85rem; color: var(--text-3); }
.pcard__brand { margin: 3px 0 0; font-size: .85rem; color: var(--text-3); }
.pcard__specs { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 14px 16px 0; overflow: hidden; }
.pcard .spec { flex: none; white-space: nowrap; }
.pcard .spec--more dd { color: var(--brand-dark); }
.pcard .spec { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px; background: var(--surface); font-size: .8rem; }
.pcard .spec dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pcard .spec dd { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 600; color: var(--text-2); }
.pcard .spec__icon { display: none; }
.pcard__actions { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: auto; padding: 16px; }
.pcard__add { flex: 1; }
.pcard__add.is-added { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.pcard .cond { --control-h: 26px; padding: 0 11px; box-shadow: var(--shadow-sm); color: var(--on-brand); }
.pcard .cond::before { background: var(--on-brand); opacity: .75; }
.pcard .cond--new { background: var(--brand); }

/* ---------- Process ---------- */

.process__n { --control-h: 36px; display: inline-flex; justify-content: center; align-items: baseline; width: 36px; height: var(--control-h); border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: .95rem; line-height: 1; }
.track-wrap { --track-node: 52px; position: relative; margin-top: clamp(12px, 2vw, 24px); }
.track-wrap::after { content: ""; position: absolute; left: var(--track-end-x, 100%); top: calc(var(--track-node) / 2 - var(--track-rise, 0px)); width: var(--track-line); margin-left: calc(var(--track-line) / -2); height: var(--track-rise, 0px); background: repeating-linear-gradient(180deg, var(--brand) 0 6px, transparent 6px 12px); animation: motion-flow-up var(--motion-loop); animation-delay: calc(var(--motion) / -2); background-size: var(--track-line) 12px; }
.track { --track-gap: clamp(24px, 4vw, 56px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--track-gap); list-style: none; margin: 0; padding: 0; }
.track::before { content: ""; position: absolute; top: calc(var(--track-node) / 2); left: calc(var(--track-node) / 2); right: calc(100% - var(--track-end-x, 100%)); height: var(--track-line); margin-top: calc(var(--track-line) / -2); background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 12px); animation: motion-flow-x var(--motion-loop); background-size: 12px var(--track-line); }
.track__step { position: relative; }
.track__node { position: relative; display: grid; place-items: center; width: var(--track-node); height: var(--track-node); margin: 0 0 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 8px var(--section-bg, var(--surface)); }
.track__node .icon { width: 22px; height: 22px; }
.track__n { margin: 0 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.track__title { margin: 0 0 8px; font-size: 1.15rem; letter-spacing: -.01em; color: var(--text); }
.track__text { margin: 0; max-width: 38ch; font-size: .95rem; color: var(--text-2); }
.track__text strong { color: var(--text); }

/* ---------- Brands ---------- */

.brand-logo { display: block; max-width: none; object-fit: contain; }
/* own section right under the hero; a divider only when it follows other content in the same wrap */
* + .brand-strip { margin-top: var(--section-space-sm); padding-top: var(--section-space-sm); border-top: 1px solid var(--line); }
.brand-strip__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.brand-strip__title { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
/* wrapping row: the last row always fills the width (no empty cells at any brand count); cell lines overlap by 1px and the frame hides the outer ones */
.brand-strip__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; }
.brand-strip__list li { flex: 1 1 170px; margin: -1px 0 0 -1px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.brand-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: 34px 18px 26px; text-align: center; color: var(--text-3); text-decoration: none; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.brand-tile::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--brand); transform: translateX(-50%); transition: width var(--motion-t); }
.brand-tile__logo { display: grid; place-items: center; min-height: 48px; margin-bottom: 10px; }
.brand-tile .brand-logo { transition: transform var(--motion-t); }
.brand-tile__name { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-3); }
.brand-tile__cats { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .82rem; color: var(--text-3); }
.brand-tile__meta { position: relative; display: inline-flex; align-items: baseline; font-size: .85rem; font-weight: 700; color: var(--text); transition: color var(--motion-t); }
.brand-tile__meta .icon { --icon-size: 14px; margin-inline: 5px calc(-5px - var(--icon-size)); opacity: 0; transform: translateX(calc(-1 * var(--motion-shift))); transition: opacity var(--motion-t), transform var(--motion-t); }
.brand-tile:hover, .brand-tile:focus-visible { background: var(--surface); }
.brand-tile:hover::after, .brand-tile:focus-visible::after { width: 48px; }
.brand-tile:hover .brand-tile__meta, .brand-tile:focus-visible .brand-tile__meta { color: var(--brand-dark); }
.brand-tile:hover .brand-logo, .brand-tile:focus-visible .brand-logo { transform: scale(var(--motion-zoom)); }
.brand-tile:hover .brand-tile__meta .icon, .brand-tile:focus-visible .brand-tile__meta .icon { opacity: 1; transform: none; }

/* ---------- Delivery & store ---------- */

.delivery__in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.delivery__text p { font-size: 1.05rem; color: var(--text-2); margin: 14px 0 18px; max-width: 52ch; }
.map-figure { position: relative; margin: 0; }
.map-figure .tr-map { display: block; width: 100%; height: auto; }
.tr-map__land { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; stroke-linejoin: round; }
.tr-map__outline { fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-linejoin: round; }
.tr-map__route { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 7; }
.tr-map__route path { animation: motion-flow-dash var(--motion-loop); }
.tr-map__dot { fill: var(--brand); }
.tr-map__city { fill: var(--brand); stroke: var(--brand-dark); stroke-width: 1.5; stroke-linejoin: round; }
.tr-map__pin { fill: var(--bg); stroke: var(--brand-dark); stroke-width: 3; }


/* ---------- FAQ ---------- */

.faq .section-title { margin-bottom: 20px; }
.prose + .faq, .content-block + .faq, .prose + .label { margin-top: clamp(40px, 4vw, 60px); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 18px 2px; cursor: pointer; list-style: none; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q h3 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; }
.faq__q:hover h3 { color: var(--brand); }
.faq__mark { --icon-size: 28px; transition: background-color var(--motion-t); position: relative; flex: none; width: var(--icon-size); height: var(--icon-size); border-radius: 50%; background: var(--surface); }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; border-radius: 2px; background: var(--text-2); transform: translate(-50%, -50%); transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), transform var(--motion-t); }
.faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open]:not(.is-closing) .faq__mark, .faq--split .faq__item[open]:not(.is-closing) .faq__mark { background: var(--brand-tint); }
.faq__item[open]:not(.is-closing) .faq__mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__q h3 { transition: color var(--motion-t); }
.faq__a { padding: 0 48px 20px 2px; color: var(--text-2); max-width: 72ch; }
.faq__a p:last-child { margin-bottom: 0; }
.faq .more-link { margin-top: 20px; }
.faq--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq--split .section-title { margin-bottom: 0; }
.faq__intro { position: sticky; top: calc(var(--header-h) + 24px); }
.faq__intro .more-link { margin-top: 16px; }
.faq__help { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--line-strong); }
.faq__help-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.faq__help-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); }
.faq__help-title { margin: 0 0 2px; font-size: 1.05rem; font-weight: 700; }
.faq__help-text { margin: 0; color: var(--text-2); font-size: .95rem; }
.faq__help-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.faq__help-actions .btn { width: 100%; }
.faq--split .faq__list { border-top: 1px solid var(--line-strong); }
.faq--split .faq__item { border-bottom-color: var(--line-strong); }
.faq--split .faq__mark { background: var(--section-contrast, var(--bg)); }

/* ---------- Guides ---------- */

.guide-list { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 56px); list-style: none; margin: 0; padding: 0; }
.guide-item { position: relative; display: grid; grid-template-columns: clamp(140px, 15vw, 220px) minmax(0, 1fr); gap: 20px; align-items: stretch; padding-block: 22px; border-top: 1px solid var(--line); }
.guide-item:nth-child(2) { border-top: 0; padding-top: 0; }
.guide-list > .guide-item:last-child:not(.guide-item--lead) { padding-bottom: 0; }
.guide-item--lead { grid-row: span 3; display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 0; border-top: 0; }
.guide-list > .guide-item:nth-child(n+5) { grid-column: 1 / -1; }
.guide-item__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.guide-item--lead .guide-item__media { position: relative; flex: 1 1 0; min-height: 380px; aspect-ratio: auto; border-radius: var(--radius-lg); }
.guide-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-t); }
.guide-item__media { position: relative; }
.guide-item__media img { position: absolute; inset: 0; }
.guide-list > .guide-item:not(.guide-item--lead) .guide-item__media { aspect-ratio: auto; min-height: 112px; }
.guide-item:hover .guide-item__media img { transform: scale(var(--motion-zoom)); }
.guide-item__body { display: grid; align-content: center; gap: 6px; min-width: 0; }
.guide-item__meta { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.guide-item__meta span { color: var(--brand-dark); }
/* Separator dot for uppercase meta rows: an inline box exactly cap-height tall sitting on the baseline, dot painted at its centre,
   so it lands on the optical centre of the capitals whatever the line metrics. Left margin takes back the trailing letter-spacing. */
.guide-item__meta span::after { content: ""; display: inline-block; width: 4px; height: .72em; margin-left: calc(10px - .1em); vertical-align: baseline; background: radial-gradient(circle closest-side, var(--line-strong) 98%, transparent) center / 4px 4px no-repeat; }
.guide-item__meta time { font-weight: 700; }
.guide-item__title { margin: 0; font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; }
.guide-item--lead .guide-item__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; letter-spacing: -.02em; }
.guide-item__title a { color: var(--text); text-decoration: none; }
.guide-item__title a::after { content: ""; position: absolute; inset: 0; }
.guide-item:hover .guide-item__title a { color: var(--brand-dark); }
.guide-item__text { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); font-size: .93rem; }
.solution-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.solution-card { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.solution-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.solution-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.solution-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-t); }
.solution-card:hover .solution-card__media img { transform: scale(var(--motion-zoom)); }
.solution-card__body { position: relative; display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 34px 18px 18px; }
.solution-card__badge { position: absolute; top: -24px; left: 18px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 4px var(--bg); transition: transform var(--motion-t); }
.solution-card__badge .icon { width: 22px; height: 22px; }
.solution-card:hover .solution-card__badge { transform: translateY(calc(-1 * var(--motion-shift))); }
.solution-card__for { margin: 6px 0 0; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.solution-card__title { margin: 0; font-size: 1.02rem; letter-spacing: -.01em; }
.solution-card__title a { color: var(--text); text-decoration: none; transition: color var(--motion-t); }
.solution-card__title a::after { content: ""; position: absolute; inset: 0; }
.solution-card:hover .solution-card__title a { color: var(--brand-dark); }
.solution-card__text { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); font-size: .88rem; }
.solution-card__more { display: inline-flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 12px; font-weight: 600; font-size: .88rem; color: var(--brand-dark); }
.solution-card__more .icon { --icon-size: 16px; transition: transform var(--motion-t); }
.solution-card:hover .solution-card__more .icon { transform: translateX(var(--motion-shift)); }
.solution-card--cta { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.solution-card--cta:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
.solution-card--cta .solution-card__body { justify-content: center; gap: 10px; padding: 24px; }
.solution-card--cta .solution-card__more { padding-top: 0; }
.solution-card--cta .solution-card__title a, .solution-card--cta:hover .solution-card__title a { color: var(--on-brand); }
.solution-card--cta .solution-card__title { font-size: 1.25rem; }
.solution-card--cta .solution-card__text { white-space: normal; color: var(--brand-ink); }
.solution-card--cta .solution-card__more { margin-top: 4px; color: var(--on-brand); }
.solution-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--on-dark-hover); box-shadow: inset 0 0 0 1px var(--on-dark-border); }
.brand-hero-logo { display: grid; place-items: center; min-height: 240px; padding: 32px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.brand-hero-logo .brand-logo { max-width: 100%; height: auto; }
.solution-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prep-card { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.prep-card__aside { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 40px); background: var(--footer); color: var(--on-dark-2); }
.prep-card__title { margin: 0; font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.02em; color: var(--on-dark); }
.prep-card__lede { margin: 0; color: var(--on-dark-3); }
.prep-card__actions { display: grid; gap: 10px; margin-top: auto; padding-top: 18px; }
.prep-card__actions .btn { width: 100%; }
.prep-card__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: center; list-style: none; margin: 0; padding: clamp(20px, 2.5vw, 32px); }
.prep-chip { display: grid; align-content: start; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.prep-chip:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.prep-chip__n { margin-bottom: 4px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--brand); }
.prep-chip__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 1rem; }
.prep-chip__value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .88rem; color: var(--text-3); }
.prep-chip--add { display: grid; padding: 0; border-style: dashed; border-color: var(--line-strong); background: transparent; }
.prep-chip--add a { display: grid; grid-auto-flow: column; align-items: baseline; align-content: center; justify-content: center; gap: 8px; min-height: 100%; padding: 16px 18px; color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.prep-chip--add:hover { border-color: var(--brand); background: var(--brand-tint); }
.prep-chip--span-2 { grid-column: span 2; }
.page-hero__facts { display: grid; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.page-hero__facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: baseline; gap: 10px; font-size: .95rem; color: var(--text-2); }
.page-hero__facts .icon { --icon-size: 18px; color: var(--brand-dark); }
/* cat-tiles: one row of photo cards on wide screens (auto-fit spreads 4–6 groups across the row), two per row on phones */
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.cat-tile { display: flex; flex-direction: column; height: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); text-decoration: none; transition: border-color var(--motion-t), box-shadow var(--motion-t); }
.cat-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--text); }
.cat-tile__thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.cat-tile__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-t); }
.cat-tile:hover .cat-tile__thumb img { transform: scale(var(--motion-zoom)); }
.cat-tile__body { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; }
.cat-tile__text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.cat-tile__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; letter-spacing: -.01em; transition: color var(--motion-t); }
.cat-tile:hover .cat-tile__name { color: var(--brand-dark); }
.cat-tile__count { font-size: .85rem; color: var(--text-3); }
.cat-tile__go { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--surface); color: var(--text-2); transition: background-color var(--motion-t), color var(--motion-t); }
.cat-tile__go .icon { width: 18px; height: 18px; transition: transform var(--motion-t); }
.cat-tile:hover .cat-tile__go { background: var(--brand); color: var(--on-brand); }
.cat-tile:hover .cat-tile__go .icon { transform: translateX(calc(var(--motion-shift) / 2)); }
.listing { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.listing__side { position: sticky; top: calc(var(--header-h) + 24px); }
.listing__toggle { display: none; }
/* Guides page keeps the light link panel */
.filter-panel { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 28px; }
.filter-panel__title { margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.filter-panel__list { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.filter-panel .filter-option { padding: 9px 12px; }
.filter-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.filter-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.filter-card__title { margin: 0; font-weight: 700; font-size: 1.02rem; }
.filter-card__clear { font-size: .85rem; font-weight: 600; color: var(--brand-dark); text-decoration: none; }
.filter-search { --search-h: 44px; position: relative; margin: 14px; }
.filter-search__icon { z-index: 1; position: absolute; top: 50%; left: 13px; width: 17px; height: 17px; translate: 0 -50%; color: var(--text-3); pointer-events: none; transition: color var(--motion-t); }
.filter-search:focus-within .filter-search__icon { color: var(--brand-dark); }
.filter-search__input { display: block; width: 100%; height: var(--search-h); padding: 0 42px 0 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: .92rem; line-height: calc(var(--search-h) - 2px); }
.filter-search__input::placeholder { color: var(--text-3); }
.filter-search__input:hover { border-color: var(--line-hover); }
.filter-search__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.filter-card__groups { border-top: 1px solid var(--line); }
.filter-group + .filter-group { border-top: 1px solid var(--line); }
.filter-group__toggle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; list-style: none; cursor: pointer; font-weight: 600; font-size: .95rem; }
.filter-group__toggle::-webkit-details-marker { display: none; }
.filter-group__chevron { --icon-size: 16px; color: var(--text-3); transition: transform var(--motion-t); }
.filter-group[open]:not(.is-closing) .filter-group__chevron { transform: rotate(180deg); }
.filter-group__list { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0 10px 12px; }
.filter-option { --filter-row: 40px; --control-h: var(--filter-row); --control-inset: 8px; --control-gap: 10px; display: flex; align-items: baseline; gap: var(--control-gap); min-height: var(--control-h); padding: 8px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: .92rem; }
.filter-option:hover { background: var(--surface); color: var(--text); }
.filter-option.is-child { padding-left: 22px; font-size: .88rem; }
.filter-tree__toggle { display: flex; align-items: stretch; gap: 4px; list-style: none; cursor: pointer; }
.filter-tree__toggle::-webkit-details-marker { display: none; }
.filter-tree__toggle .filter-option { flex: 1; min-width: 0; }
.filter-tree__chevron { display: grid; place-items: center; width: 40px; min-height: 40px; flex: none; border-radius: var(--radius-sm); color: var(--text-3); transition: color var(--motion-t), background-color var(--motion-t); }
.filter-tree__chevron .icon { --icon-size: 15px; transition: transform var(--motion-t); }
.filter-tree__toggle:hover .filter-tree__chevron { background: var(--surface); color: var(--text); }
.filter-tree__item[open]:not(.is-closing) .filter-tree__chevron .icon { transform: rotate(180deg); }
.filter-tree__children { display: grid; gap: 1px; list-style: none; margin: 0; padding: 0 0 4px; }
.filter-option__label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-option__count, .filter-option small { flex: none; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--text-3); }
.filter-option__mark { --icon-size: 18px; display: grid; place-items: center; width: var(--icon-size); height: var(--icon-size); flex: none; border: 1.5px solid var(--line-strong); background: var(--bg); color: transparent; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t); }
.filter-option__mark .icon { --icon-size: 12px; position: absolute; inset: 0; margin: auto; stroke-width: 3; }
.filter-option--radio .filter-option__mark { border-radius: 50%; }
.filter-option--check .filter-option__mark { border-radius: 5px; }
.filter-option:hover .filter-option__mark { border-color: var(--text-3); }
.filter-option.is-active { color: var(--text); font-weight: 600; }
.filter-option--link.is-active { background: var(--brand-tint); color: var(--brand-dark); }
.filter-option.is-active .filter-option__mark { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.listing__heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.active-filter { --control-h: 32px; --control-inset: 1px; --control-gap: 4px; display: inline-flex; align-items: baseline; gap: var(--control-gap); height: var(--control-h); padding: 0 8px 0 12px; border: 1px solid var(--brand-ink); border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); font-size: .85rem; text-decoration: none; }
.active-filter__key { font-weight: 500; opacity: .8; }
.active-filter__value { max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.active-filter .icon { --icon-size: 14px; margin-left: 2px; }
.active-filter:hover { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.active-filters__clear { --control-h: 32px; display: inline-flex; align-items: baseline; height: var(--control-h); padding: 0 4px; font-size: .85rem; font-weight: 600; color: var(--text-3); text-decoration: none; }
.active-filters__clear:hover { color: var(--brand-dark); }
.listing__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 52px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.listing__title { margin: 0; font-size: 1.2rem; letter-spacing: -.01em; }
.listing__count { display: inline-flex; align-items: center; height: 26px; margin: 0; padding: 0 10px; border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.guide-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-card { position: relative; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.guide-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.guide-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.guide-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-t); }
.guide-card:hover .guide-card__media img { transform: scale(var(--motion-zoom)); }
.guide-card__body { display: grid; gap: 8px; padding: 18px 20px 20px; }
.guide-card__title { margin: 0; font-size: 1.05rem; line-height: 1.35; letter-spacing: -.01em; }
.guide-card__title a { color: var(--text); text-decoration: none; transition: color var(--motion-t); }
.guide-card__title a::after { content: ""; position: absolute; inset: 0; }
.guide-card:hover .guide-card__title a { color: var(--brand-dark); }
.guide-card__text { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); font-size: .92rem; }
.guide-card__more { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 4px; font-weight: 600; font-size: .9rem; color: var(--brand-dark); }
.guide-card__more .icon { --icon-size: 16px; transition: transform var(--motion-t); }
.guide-card:hover .guide-card__more .icon { transform: translateX(var(--motion-shift)); }
.guide-item__more { display: none; align-items: baseline; gap: 6px; margin-top: 6px; font-weight: 600; font-size: .92rem; color: var(--brand-dark); }
.guide-item--lead .guide-item__more { display: inline-flex; }
.guide-item__more .icon { --icon-size: 16px; transition: transform var(--motion-t); }
.guide-item:hover .guide-item__more .icon { transform: translateX(var(--motion-shift)); }

/* ---------- Page hero & content ---------- */

.page-hero { padding-block: var(--section-space-sm); background: var(--surface); border-bottom: 1px solid var(--line); }
.page-top { padding-top: var(--section-space-sm); }
.page-hero__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 60px); align-items: center; }
.page-hero__in--single { grid-template-columns: minmax(0, 1fr); }
.page-hero__text { min-width: 0; }
.page-hero .crumbs { margin-bottom: var(--crumbs-accent-gap); }
.page-hero .crumbs::after { content: ""; display: block; width: 32px; height: 3px; margin-top: var(--crumbs-accent-gap); border-radius: 2px; background: var(--brand); }
.page-hero .page-title { margin-top: 0; }
.page-title { margin: 16px 0 14px; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.page-title__line { display: block; }
.page-summary { margin: 0; max-width: 66ch; font-size: clamp(1rem, .96rem + .2vw, 1.1rem); color: var(--text-2); }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.page-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 0; padding: 0; list-style: none; font-size: .88rem; color: var(--text-3); }
.page-hero__meta li { display: inline-flex; align-items: baseline; gap: 6px; }
.page-hero__meta li + li::before { content: ""; --icon-size: 4px; width: var(--icon-size); height: var(--icon-size); flex: none; margin-right: 6px; border-radius: 50%; background: var(--line-strong); }
.page-hero__meta .icon { --icon-size: 15px; }

.crumbs { margin-bottom: var(--crumbs-gap); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 4px; list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.crumbs li { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-3); }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { --icon-size: 13px; }
.crumbs [aria-current] { color: var(--text); font-weight: 500; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(32px, 5vw, 64px); align-items: start; }
.sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 18px; }

.prose { max-width: 74ch; font-size: 1.04rem; line-height: 1.75; color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2em 0 .6em; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); letter-spacing: -.02em; }
.prose h3 { margin: 1.6em 0 .5em; font-size: 1.18rem; }
.prose h4 { margin: 1.4em 0 .4em; font-size: 1.05rem; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose ul li::marker { color: var(--brand); }
.prose ol li::marker { font-weight: 700; color: var(--brand); }
.prose a { font-weight: 500; }
.prose strong { font-weight: 700; }
.prose aside, .prose blockquote { margin: 1.5em 0; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--brand-tint); }
.prose aside > :last-child, .prose blockquote > :last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose-table { margin: 1.5em 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94rem; line-height: 1.5; }
.prose caption { padding: 10px 14px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--surface); }
.prose thead th { padding: 11px 14px; background: var(--surface); text-align: left; font-weight: 700; border-bottom: 1px solid var(--line); }
.prose td, .prose tbody th { padding: 10px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose tbody tr:first-child td, .prose tbody tr:first-child th { border-top: 0; }

/* toc: numbered list; [data-toc] adds a reading-progress line on the top edge and marks the heading being read */
.toc { position: relative; padding: 16px 20px; }
.toc[data-toc]::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--brand); transform: scaleX(var(--toc-progress, 0)); transform-origin: left center; }
.toc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.toc__head .toc__title, .toc__toggle .toc__title { margin: 0; }
.toc__count { flex: none; color: var(--text-3); font-size: .82rem; font-variant-numeric: tabular-nums; }
.toc__title { margin: 0 0 8px; font-weight: 700; font-size: .95rem; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 5px 0; color: var(--text-2); text-decoration: none; font-size: .9rem; line-height: 1.4; }
.toc a::before { content: counter(toc) "."; font-weight: 600; color: var(--text-3); }
.toc a:hover { color: var(--brand); }
.toc a.is-active { color: var(--text); font-weight: 600; }
.toc a.is-active::before { color: var(--brand); }
/* content-grid--toc: on small screens the sidebar table of contents moves above the text as a collapsible panel */
.toc-inline { display: none; margin-bottom: 30px; }
.toc--inline { padding: 0; }
.toc__toggle { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px; list-style: none; cursor: pointer; }
.toc__toggle::-webkit-details-marker { display: none; }
.toc__toggle .toc__count { margin-left: auto; }
.toc__chevron { --icon-size: 16px; color: var(--text-3); transition: transform var(--motion-t); }
.toc--inline[open]:not(.is-closing) .toc__chevron { transform: rotate(180deg); }
.toc--inline ol { padding: 0 20px 14px; }

.related { list-style: none; margin: 0; padding: 0; }
.related a { display: grid; grid-template-columns: minmax(0, 1fr) 16px; gap: 10px; align-items: baseline; padding: 11px 20px; color: var(--text); text-decoration: none; font-size: .93rem; border-top: 1px solid var(--line); }
.related li:first-child a { border-top: 0; }
.related .icon { --icon-size: 16px; color: var(--text-3); }
.related a:hover { background: var(--surface); color: var(--brand); }

.cta-label { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.cta-label .label__head { border-bottom-color: var(--on-dark-border); }
.cta-label .label__title { color: var(--on-brand); }
.cta-label > p { margin: 0; padding: 14px 20px 0; color: var(--on-brand); font-size: .93rem; }
.cta-label__actions { display: grid; gap: 10px; padding: 16px 20px 20px; }
.cta-label .btn { width: 100%; }

/* ---------- Catalog listing ---------- */

.subcats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; }
.subcats a { --control-h: 38px; --control-inset: 1px; --control-gap: 8px; display: inline-flex; align-items: baseline; gap: var(--control-gap); min-height: var(--control-h); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .9rem; }
.subcats .icon { --icon-size: 16px; }
.subcats small { color: var(--text-3); font-size: .8rem; }
.subcats a:hover { border-color: var(--brand); color: var(--brand); }
.subcats a.is-current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.subcats a.is-current small { color: var(--on-brand); }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-bottom: 26px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.filters__label { font-size: .85rem; color: var(--text-3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chip { --control-h: 34px; --control-inset: 1px; --control-gap: 8px; display: inline-flex; align-items: baseline; gap: var(--control-gap); min-height: var(--control-h); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .88rem; }
.chip .icon { --icon-size: 16px; }
.chip small { color: var(--text-3); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.is-active small { color: var(--brand-ink); }
.chip:hover { border-color: var(--text); color: var(--text); }
.chip.is-active { background: var(--text); border-color: var(--text); color: var(--on-brand); }
.filters__count { margin: 0 0 0 auto; color: var(--text-3); font-size: .9rem; }
.filters__count strong { color: var(--text); }

.empty { padding: 36px 24px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); }
.empty h2, .empty h3 { margin: 0 0 8px; font-size: 1.2rem; }
.empty p { color: var(--text-2); max-width: 52ch; margin: 0 auto 18px; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 36px; }
.pager__pages { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pager__pages a, .pager__pages span, .pager__step { --control-h: 40px; --control-inset: 1px; --control-gap: 6px; display: inline-flex; align-items: baseline; justify-content: center; gap: var(--control-gap); min-width: 40px; height: var(--control-h); padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.pager__pages a:hover, .pager__step:hover { border-color: var(--text); color: var(--text); }
.pager__pages span[aria-current] { background: var(--text); border-color: var(--text); color: var(--on-brand); }
.pager__gap { display: grid; place-items: center; min-width: 18px; color: var(--text-3); }
.pager__step .icon { --icon-size: 16px; }


/* ---------- Product page ---------- */



.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: var(--section-space); }
.gallery { position: sticky; top: calc(var(--header-h) + 20px); }
.gallery__main { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__main img.is-swapping { animation: motion-fade var(--motion-t); }
.gallery__main .pcard__placeholder .icon { width: 64px; height: 64px; }
.gallery__cond { position: absolute; top: 16px; left: 16px; box-shadow: var(--shadow-sm); }
.gallery__thumbs { display: flex; gap: 10px; margin: 12px 0 0; padding: 0 0 4px; list-style: none; overflow-x: auto; }
.gallery__thumb { flex: none; width: 80px; height: 80px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); cursor: pointer; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { border-color: var(--line-strong); }
.gallery__thumb[aria-current="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.buybox { display: grid; gap: 18px; min-width: 0; }
.buybox__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; font-size: .88rem; color: var(--text-3); }
.buybox__kicker > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: var(--line-strong); vertical-align: middle; }
.buybox__kicker a { color: var(--text-2); font-weight: 600; text-decoration: none; transition: color var(--motion-t); }
.buybox__kicker a:hover { color: var(--brand-dark); }
.buybox__title { margin: -8px 0 0; font-size: clamp(1.8rem, 1.25rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.buybox__summary { margin: -6px 0 0; color: var(--text-2); font-size: 1.05rem; }
.buybox__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
/* label on top, value pinned to the bottom: values line up across boxes however many lines a label takes */
.buybox__spec { display: grid; grid-template-rows: 1fr auto; gap: 6px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.buybox__spec dt { font-size: .78rem; color: var(--text-3); }
.buybox__spec dd { display: flex; align-items: baseline; gap: 6px; margin: 0; overflow: hidden; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.spec__unit { font-size: .78em; font-weight: 500; color: var(--text-3); }
.buybox__spec .spec__icon { display: none; }
.buybox__notes { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.buybox__note { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2); font-size: .9rem; }
.buybox__note .icon { --icon-size: 18px; }
.buybox__panel { display: grid; gap: 12px; padding: 20px; background: var(--surface); border-radius: var(--radius-lg); }
.buybox__price, .buybox__ask { display: grid; gap: 2px; margin: 0 0 4px; }
.buybox__price strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.buybox__ask strong { font-size: 1.15rem; font-weight: 700; }
.buybox__price small, .buybox__ask small { font-size: .88rem; color: var(--text-3); }
.buybox__wa { width: 100%; }
.buybox__list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.buybox__list .qty { background: var(--bg); }
.buybox__add { width: 100%; background: var(--bg); }
.buybox__add.is-added { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.buybox__call { display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; padding-top: 2px; color: var(--text-2); font-size: .92rem; text-decoration: none; }
.buybox__call .icon { --icon-size: 17px; color: var(--brand-dark); }
.buybox__call strong { color: var(--text); transition: color var(--motion-t); }
.buybox__call:hover strong { color: var(--brand-dark); }
.buybox__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; list-style: none; margin: 0; padding: 4px 0 0; }
.buybox__facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; }
.buybox__fact-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); }
.buybox__fact-icon .icon { width: 18px; height: 18px; }
.buybox__facts li > span:last-child { display: grid; gap: 1px; min-width: 0; }
.buybox__facts strong { font-size: .92rem; }
.buybox__facts small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; color: var(--text-3); }
.product-details { display: grid; gap: clamp(28px, 4vw, 48px); }
.product-details--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.product-details .section-title { margin-bottom: 16px; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
.spec-card { background: var(--section-contrast, var(--bg)); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.spec-card__title { margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
.spec-card__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 -1px; }
.spec-card__list div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.spec-card__list div:nth-child(odd) { border-right: 1px solid var(--line); }
.spec-card__list dt { color: var(--text-3); font-size: .92rem; }
.spec-card__list dd { display: flex; align-items: baseline; gap: 6px; margin: 0; font-weight: 600; font-size: .95rem; }
.spec-card__list .spec__unit { font-size: 1em; font-weight: 400; }
.spec-card__list .spec__icon { display: none; }
.qty { display: inline-flex; align-items: stretch; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.qty button { width: 42px; border: 0; background: var(--bg); color: var(--text); display: grid; place-items: center; }
.qty button:hover { background: var(--surface); }
.qty button .icon { width: 17px; height: 17px; }
.qty input { width: 58px; border: 0; border-inline: 1px solid var(--line); text-align: center; font-weight: 700; -moz-appearance: textfield; appearance: textfield; background: var(--bg); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* ---------- Forms ---------- */

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.field__label { font-weight: 600; font-size: .92rem; }
.field__label small { font-weight: 400; color: var(--text-3); font-size: .85rem; }
.field__hint { margin: 0; font-size: .84rem; color: var(--text-3); line-height: 1.45; }
.input, .select, .textarea { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: .98rem; line-height: 1.4; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.textarea { min-height: 130px; resize: vertical; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-hover); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field__error { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--danger); font-weight: 500; font-size: .87rem; }
.field__error .icon { --icon-size: 15px; }
.check { display: flex; align-items: baseline; gap: 10px; font-size: .94rem; line-height: 1.5; }
.check input { --icon-size: 20px; flex: none; width: var(--icon-size); height: var(--icon-size); margin-inline: 0; margin-bottom: 0; border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--bg); cursor: pointer; -webkit-appearance: none; appearance: none; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.check input::after { content: ""; position: absolute; left: 50%; top: 45%; width: 5px; height: 10px; border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform var(--motion-t); }
.check input:hover { border-color: var(--text-3); }
.check input:checked { border-color: var(--brand); background: var(--brand); }
.check input:checked::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); }
.field.has-error .check input { border-color: var(--danger); }
.form-alert { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border: 1px solid var(--danger-line); border-radius: var(--radius-sm); background: var(--danger-tint); }
.form-alert .icon { color: var(--danger); }
.form-note { margin: 0; font-size: .85rem; color: var(--text-3); }
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }


.form-step__body { display: grid; gap: 16px; padding: 18px 20px 20px; }
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 48px); align-items: start; }
.quote-form { gap: 20px; }
.quote-step { min-width: 0; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg); overflow: hidden; }
.quote-step__head { display: flex; align-items: center; gap: 12px; float: left; width: 100%; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.quote-step__head + * { clear: both; }
.quote-step__n { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: .9rem; }
.quote-step__title { font-weight: 700; font-size: 1.1rem; }
.quote-step__action { margin-left: auto; }
.quote-step__body { display: grid; gap: 16px; padding: 20px 22px 22px; }
.quote-step__actions { display: grid; gap: 10px; padding: 0 22px 22px; }
.quote-step__actions .btn { width: 100%; }
.quote-step__hint { margin: 0; text-align: center; color: var(--text-3); font-size: .85rem; }
.quote-form .field { scroll-margin-top: calc(var(--header-h) + 32px); }
.field__error { animation: motion-in var(--motion-t); }
.quote-step__more { display: flex; align-items: baseline; justify-content: center; gap: 8px; width: 100%; padding: 14px; border: 0; border-top: 1px dashed var(--line-strong); background: var(--bg); color: var(--brand-dark); font-weight: 600; cursor: pointer; }
.quote-step__more:hover { background: var(--brand-tint); }
.quote-step__more .icon { --icon-size: 17px; }
.qlist-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 22px 30px; text-align: center; }
.qlist-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); }
.qlist-empty__icon .icon { width: 24px; height: 24px; }
.qlist-empty__title { margin: 0; font-weight: 700; font-size: 1.05rem; }
.qlist-empty__text { max-width: 44ch; margin: 0 0 10px; color: var(--text-2); font-size: .93rem; }
.quote-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.quote-summary { display: grid; gap: 10px; padding: 22px; border-radius: var(--radius-lg); background: var(--surface); }
.quote-summary__label { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.quote-summary__count { margin: 0 0 6px; color: var(--text-2); }
.quote-summary__count strong { margin-right: 4px; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.quote-summary .btn { width: 100%; }
.quote-summary .btn--line { background: var(--bg); }
.quote-summary__call { display: inline-flex; align-items: baseline; justify-content: center; gap: 8px; padding-top: 4px; color: var(--text-2); font-size: .9rem; text-decoration: none; }
.quote-summary__call .icon { --icon-size: 17px; color: var(--brand-dark); }
.quote-summary__call strong { color: var(--text); transition: color var(--motion-t); }
.quote-summary__call:hover strong { color: var(--brand-dark); }
.quote-next { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.quote-next__title { margin: 0 0 12px; font-weight: 700; }
.quote-next__list { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.quote-next__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; color: var(--text-2); font-size: .9rem; }
.quote-next__list span { --control-h: 24px; display: flex; justify-content: center; align-items: baseline; width: 24px; height: var(--control-h); border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); font-size: .75rem; font-weight: 700; }

/* ---------- Product picker (dialog) ---------- */
.picker { width: min(1120px, calc(100vw - 2 * var(--gutter))); max-width: none; height: min(860px, calc(100dvh - 48px)); max-height: none; margin: auto; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--text); overflow: visible; }
.picker::backdrop { background: rgba(23, 24, 24, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: motion-fade var(--motion-t); }
.picker.is-closing::backdrop { animation: motion-fade-out var(--motion-t) forwards; }
.picker__panel { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto; height: 100%; background: var(--bg); border-radius: var(--radius-lg); box-shadow: 0 30px 80px -20px rgba(23, 24, 24, .45); overflow: hidden; animation: motion-in var(--motion-t); }
.picker.is-closing .picker__panel { animation: motion-out var(--motion-t) forwards; }
.picker-open { overflow: hidden; }
.picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 14px; }
.picker__title { margin: 0; font-size: 1.45rem; letter-spacing: -.02em; }
.picker__sub { margin: 4px 0 0; color: var(--text-3); font-size: .92rem; }
.picker__close { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--text); cursor: pointer; }
.picker__close:hover { background: var(--surface); }
.picker__tools { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 24px 12px; }
.picker__search { position: relative; flex: 1 1 320px; min-width: 0; }
.picker__search-icon { z-index: 1; position: absolute; top: 50%; left: 14px; width: 18px; height: 18px; translate: 0 -50%; color: var(--text-3); pointer-events: none; transition: color var(--motion-t); }
.picker__search:focus-within .picker__search-icon { color: var(--brand-dark); }
.picker__search-input { display: block; width: 100%; height: 46px; padding: 0 14px 0 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: .95rem; line-height: 44px; }
.picker__search-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.picker__segment { display: inline-flex; flex: none; padding: 4px; border-radius: var(--radius-sm); background: var(--surface); }
.picker__segment button { --control-h: 38px; display: inline-flex; align-items: baseline; justify-content: center; height: var(--control-h); padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font-weight: 600; font-size: .88rem; cursor: pointer; }
.picker__segment button[aria-checked="true"] { background: var(--bg); color: var(--text); box-shadow: var(--shadow-sm); }
.picker__groups { min-width: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.picker__group-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0 24px; }
.picker__group-list li { flex: none; }
.picker__group { --control-h: 34px; --control-inset: 1px; display: inline-flex; align-items: baseline; justify-content: center; height: var(--control-h); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg); color: var(--text-2); font-size: .86rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.picker__group--child { border-style: dashed; }
.picker__group:hover { border-color: var(--text-3); color: var(--text); }
.picker__group[aria-checked="true"] { border-color: var(--text); background: var(--text); color: var(--on-brand); }
.picker__body { min-height: 0; padding: 16px 24px 24px; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); }
.picker__meta { margin: 0 0 12px; color: var(--text-3); font-size: .85rem; }
.picker__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.pick { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); animation: motion-in var(--motion-t); }
.pick:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.pick.is-in { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.pick.is-pulse .pick__in { animation: motion-in var(--motion-t); }
.pick__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-2); }
.pick__media img { width: 100%; height: 100%; object-fit: cover; }
.pick__cond { position: absolute; top: 10px; right: 10px; box-shadow: var(--shadow-sm); }
.pick__in { --control-h: 26px; --control-gap: 5px; position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: baseline; gap: var(--control-gap); height: var(--control-h); padding: 0 10px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: .78rem; font-weight: 700; }
.pick__in .icon { --icon-size: 13px; stroke-width: 3; }
.pick__body { display: grid; gap: 3px; flex: 1; padding: 12px 14px 4px; }
.pick__kicker { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .76rem; color: var(--text-3); }
.pick__name { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; letter-spacing: -.01em; }
.pick__name a { color: var(--text); text-decoration: none; transition: color var(--motion-t); }
.pick__name a:hover { color: var(--brand-dark); }
.pick__specs { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .82rem; color: var(--text-2); }
.pick__actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 10px 14px 14px; }
.pick__qty { height: 40px; }
.pick__qty button { width: 32px; }
.pick__qty input { width: 42px; }
.pick__add { --control-h: 40px; padding: 0 12px; }
.pick--skeleton { animation: none; }
.pick--skeleton .pick__media, .pick--skeleton .pick__body span { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%) 0 0 / 200% 100%; animation: motion-shimmer calc(var(--motion) * 4) linear infinite; }
.pick--skeleton .pick__body { padding: 14px; gap: 8px; }
.pick--skeleton .pick__body span { display: block; height: 10px; border-radius: 4px; }
.pick--skeleton .pick__body span:nth-child(1) { width: 40%; }
.pick--skeleton .pick__body span:nth-child(2) { width: 80%; height: 14px; }
.pick--skeleton .pick__body span:nth-child(3) { width: 60%; }
@keyframes motion-shimmer { to { background-position: -200% 0; } }
.picker__empty, .picker__error { display: grid; justify-items: center; gap: 6px; padding: 48px 20px; text-align: center; }
.picker__empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--bg); color: var(--text-3); }
.picker__empty-title { margin: 0; font-weight: 700; }
.picker__empty-text { max-width: 46ch; margin: 0; color: var(--text-2); font-size: .92rem; }
.picker__error p { margin: 0 0 8px; color: var(--text-2); }
.picker__more-wrap { display: grid; justify-items: center; padding-top: 18px; }
.picker__more { background: var(--bg); }
.picker__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--bg); }
.picker__summary { display: flex; align-items: center; gap: 12px; min-width: 0; }
.picker__thumbs { display: flex; }
.picker__thumbs img { width: 32px; height: 32px; object-fit: cover; border: 2px solid var(--bg); border-radius: 50%; background: var(--surface); }
.picker__thumbs img + img { margin-left: -10px; }
.picker__count { margin: 0; color: var(--text-2); font-size: .92rem; }
.picker__count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.qlist { list-style: none; margin: 0; padding: 0; }
.qlist__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
.qlist__item:first-child { border-top: 0; }
.qlist__item img { width: 52px; height: 52px; object-fit: cover; background: var(--surface); border-radius: var(--radius-sm); }
.qlist__thumb { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); }
.qlist__thumb .icon { width: 22px; height: 22px; }
.qlist__name { margin: 0; font-weight: 600; line-height: 1.3; font-size: .95rem; }
.qlist__name a { color: var(--text); text-decoration: none; }
.qlist__name a:hover { color: var(--brand); }
.qlist__meta { display: flex; gap: 8px; margin-top: 4px; font-size: .85rem; color: var(--text-3); }
.qlist .qty { height: 40px; }
.qlist .qty button { width: 36px; }
.qlist .qty input { width: 66px; font-variant-numeric: tabular-nums; }
.qlist__remove { width: 38px; height: 38px; border: 0; background: none; color: var(--text-3); display: grid; place-items: center; border-radius: var(--radius-sm); }
.qlist__remove:hover { background: var(--danger-tint); color: var(--danger); }

/* ---------- Misc blocks ---------- */

.brand-list { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.brand-card { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; align-items: stretch; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t); }
.brand-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.brand-card__logo { display: grid; place-items: center; padding: 28px; background: var(--surface); border-right: 1px solid var(--line); text-decoration: none; }
.brand-card__logo .brand-logo { max-width: 100%; height: auto; transition: transform var(--motion-t); }
.brand-card:hover .brand-card__logo .brand-logo { transform: scale(var(--motion-zoom)); }
.brand-card__logo-text { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.brand-card__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; min-width: 0; padding: 24px 28px; }
.brand-card__body > * { min-width: 0; }
.brand-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.brand-card__name { margin: 0; font-size: 1.3rem; letter-spacing: -.01em; }
.brand-card__name a { color: var(--text); text-decoration: none; transition: color var(--motion-t); }
.brand-card:hover .brand-card__name a { color: var(--brand-dark); }
.brand-card__count { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-dark); font-size: .78rem; font-weight: 700; }
.brand-card__text { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-2); font-size: .95rem; }
.brand-card__scroller { margin-top: 4px; }
.brand-card__cats { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.brand-card__cats li { flex: none; }
.brand-card__cats a { --control-h: 30px; --control-gap: 6px; display: inline-flex; align-items: baseline; gap: var(--control-gap); white-space: nowrap; min-height: var(--control-h); padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--text-2); text-decoration: none; font-size: .85rem; }
.brand-card__cats a:hover { background: var(--brand-tint); color: var(--brand-dark); }
.brand-card__actions { display: grid; align-content: center; gap: 10px; min-width: 210px; padding: 24px 28px 24px 0; }
.brand-ask { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 22px; margin-top: 16px; padding: clamp(22px, 3vw, 32px); background: var(--section-contrast, var(--surface)); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.brand-ask__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); }
.brand-ask__icon .icon { width: 24px; height: 24px; }
.brand-ask__title { margin: 0 0 4px; font-size: 1.2rem; }
.brand-ask__text p { margin: 0; color: var(--text-2); }
.brand-ask__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--brands { margin-top: 16px; }
/* Search inputs: native cancel hidden everywhere; site.js adds .search-field with a themed clear button */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-field { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
.search-field > input { width: 100%; padding-right: 42px; }
.search-field__clear { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; visibility: hidden; translate: 0 -50%; transition: color var(--motion-t), background-color var(--motion-t), opacity var(--motion-t), visibility 0s linear var(--motion); }
.search-field.has-value .search-field__clear { opacity: 1; visibility: visible; transition-delay: 0s; }
.search-field__clear:hover { background: var(--surface); color: var(--text); }
.search-field__clear .icon { width: 15px; height: 15px; }
.search-form { display: flex; gap: 10px; max-width: 640px; margin-top: 18px; }
.search-form .input { flex: 1; }


.contact-stage { padding-block: var(--section-space); }
.contact-panel { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.contact-panel { --contact-pad: clamp(24px, 3vw, 36px); }
.contact-panel__main { display: flex; flex-direction: column; padding: var(--contact-pad); }
.contact-panel__title { margin: 0; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.02em; }
.contact-panel__lede { margin: 6px 0 24px; color: var(--text-2); }
.contact-primary { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--radius); background: var(--brand); color: var(--on-brand); text-decoration: none; }
.contact-primary:hover { background: var(--brand-dark); color: var(--on-brand); }
.contact-primary__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--on-dark-hover); box-shadow: inset 0 0 0 1px var(--on-dark-border); }
.contact-primary__icon .icon { width: 26px; height: 26px; }
.contact-primary__body { display: grid; gap: 2px; min-width: 0; }
.contact-primary__label { font-size: .85rem; font-weight: 600; color: var(--on-brand); }
.contact-primary__value { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.contact-primary__go { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; }
.contact-primary__go .icon { --icon-size: 18px; transition: transform var(--motion-t); }
.contact-primary:hover .contact-primary__go .icon { transform: translateX(var(--motion-shift)); }
.contact-rows { display: grid; list-style: none; margin: auto 0 0; padding: 12px 0 0; }
.contact-rows li { display: grid; }
.contact-rows li + li { border-top: 1px solid var(--line); }
.contact-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 16px; padding: 16px 4px; color: var(--text); text-decoration: none; }
.contact-row__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); }
.contact-row__icon .icon { width: 20px; height: 20px; }
.contact-row__body { display: grid; gap: 2px; min-width: 0; }
.contact-row__label { font-size: .8rem; color: var(--text-3); }
.contact-row__value { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; transition: color var(--motion-t); }
.contact-row__go { color: var(--text-3); transition: color var(--motion-t), transform var(--motion-t); }
.contact-row__go .icon { width: 18px; height: 18px; }
.contact-row:hover .contact-row__value, .contact-row:hover .contact-row__go { color: var(--brand-dark); }
.contact-row:hover .contact-row__go { transform: translateX(var(--motion-shift)); }
.contact-panel__store { display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); }
.contact-store__map { position: relative; z-index: 0; display: grid; place-items: center; aspect-ratio: 21 / 9; overflow: hidden; background: var(--surface-2); font-family: var(--font); }
.contact-store__map-fallback { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; color: var(--brand-dark); text-decoration: none; }
/* OSM tiles toned to the site palette: desaturated, low contrast, lifted, with a faint warm wash */
.contact-store__map .leaflet-tile-pane { filter: grayscale(1) contrast(.72) brightness(1.12); }
.contact-store__map .leaflet-map-pane::after { content: ""; position: absolute; inset: -100vmax; z-index: 250; background: var(--brand-tint); mix-blend-mode: multiply; opacity: .45; pointer-events: none; }
.contact-store__map .leaflet-control-attribution { font-size: .68rem; color: var(--text-3); background: var(--overlay); }
.contact-store__map .leaflet-control-attribution a { color: var(--text-2); text-decoration: none; transition: color var(--motion-t); }
.contact-store__map .leaflet-control-attribution a:hover { color: var(--brand-dark); }
.contact-store__map .leaflet-bar { border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; }
.contact-store__map .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; border-color: var(--line); background: var(--bg); color: var(--text); font: 600 1.1rem/34px var(--font); transition: color var(--motion-t), background-color var(--motion-t); }
.contact-store__map .leaflet-bar a:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.contact-store__map .leaflet-bar a:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.contact-store__map .leaflet-bar a:hover { background: var(--surface); color: var(--brand-dark); }
.map-pin span { display: block; width: 28px; height: 28px; border: 4px solid var(--bg); border-radius: 50%; background: var(--brand); box-shadow: var(--shadow); }
.contact-store__body { display: flex; flex-direction: column; gap: 18px; flex: 1; padding: var(--contact-pad); }
.contact-store__title { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); font-size: 1.15rem; }
.contact-store__info { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.contact-store__info li { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.contact-store__info .icon { --icon-size: 18px; color: var(--brand-dark); }
.contact-store__info address { display: grid; justify-items: start; font-style: normal; color: var(--text-2); }
.contact-store__info strong { color: var(--text); font-weight: 700; }
.contact-store__info a { color: var(--text); text-decoration: none; }
.contact-store__info a:hover strong { color: var(--brand-dark); }
.contact-store__info strong { transition: color var(--motion-t); }
.contact-store__hours { display: grid; gap: 4px; margin: 0; }
.contact-store__hours div { display: flex; justify-content: space-between; gap: 12px; }
.contact-store__hours dt { color: var(--text-3); }
.contact-store__hours dd { margin: 0; font-weight: 600; }
.contact-store__social { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; }
.contact-store__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: auto; }

.summary-label { margin-bottom: 30px; background: var(--brand-tint); border-color: transparent; }
.summary-label .label__head { border-bottom: 0; padding-bottom: 0; }
.summary-label__text { margin: 0; padding: 8px 20px 18px; font-size: 1.04rem; }

.faq-jump { margin-top: 20px; }
.faq-groups { display: grid; gap: clamp(36px, 4vw, 56px); }
/* ---------- Hakkımızda ---------- */
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: stretch; }
.about-intro__media { position: relative; margin: 0; min-height: clamp(300px, 32vw, 460px); }
.about-intro__media img { border-radius: var(--radius-lg); background: var(--surface-2); }
.about-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-intro__body { display: grid; align-content: center; gap: 14px; min-width: 0; }
.about-intro__lead { margin: 0; font-size: clamp(1.12rem, 1.02rem + .4vw, 1.3rem); line-height: 1.5; color: var(--text); }
.about-intro__body p { margin: 0; color: var(--text-2); }
.about-intro__facts { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.about-intro__facts li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: baseline; color: var(--text); font-size: .95rem; font-weight: 500; }
.about-intro__facts .icon { --icon-size: 18px; color: var(--brand-dark); }
.about-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
.about-figures li { display: grid; gap: 4px; padding: 16px 18px; }
.about-figures li + li { border-left: 1px solid var(--line); }
.about-figures strong { color: var(--brand); font-size: clamp(1.5rem, 1.15rem + .9vw, 2rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.about-figures span { color: var(--text-3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; }
.about-reasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.about-reason { display: grid; align-content: start; gap: 12px; }
.about-reason__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark); }
.about-reason__title { display: block; margin-bottom: 2px; font-size: 1rem; letter-spacing: -.01em; }
.about-reason__text { display: block; color: var(--text-2); font-size: .93rem; line-height: 1.55; }
.about-place { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 28px; margin: clamp(28px, 3vw, 40px) 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .95rem; }
.about-place__address { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.about-place__address .icon { --icon-size: 18px; color: var(--brand-dark); }
.about-place__address strong { color: var(--text); font-weight: 700; }

/* ---------- Error pages (400, 403, 404, 405, 429, 500, 503): one component, error-page partial ---------- */
.error-page { padding-block: var(--section-space); background: var(--surface); border-bottom: 1px solid var(--line); }
.error-page__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 60px); align-items: stretch; }
.error-page__text { min-width: 0; }
.error-page__code { display: grid; gap: 10px; margin: 0; color: var(--brand); font-size: clamp(3.5rem, 2.4rem + 4vw, 6rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.error-page__kicker { color: var(--text-3); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.error-page__code::after { content: ""; display: block; width: 32px; height: 3px; margin-top: var(--crumbs-accent-gap); border-radius: 2px; background: var(--brand); }
.error-page .page-title { margin: var(--crumbs-accent-gap) 0 14px; }
.error-page .search-form { margin-top: 22px; }
.error-page .page-hero__actions { margin-top: 22px; }
.error-help { --focus: var(--on-dark-accent); display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--footer); color: var(--on-dark-2); }
.error-help__kicker { margin: 0; color: var(--on-dark-3); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.error-help__title { margin: -8px 0 0; color: var(--on-dark); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 700; line-height: 1.35; letter-spacing: -.015em; }
.error-help__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.error-help__groups { display: grid; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--on-dark-line); }
.error-help__groups-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.error-help .more-link { color: var(--on-dark-accent); font-size: .88rem; }
.error-help .more-link:hover { color: var(--on-dark); }
.error-help__list { display: grid; margin: 0; padding: 0; list-style: none; }
.error-help__list li + li { border-top: 1px solid var(--on-dark-line); }
.error-help__group { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 8px; margin-inline: -8px; border-radius: var(--radius-sm); color: var(--on-dark); text-decoration: none; transition: background-color var(--motion-t); }
.error-help__group:hover { background: var(--on-dark-hover); color: var(--on-dark); }
.error-help__thumb { position: relative; display: block; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-sm); background: var(--on-dark-line); }
.error-help__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-t); }
.error-help__group:hover .error-help__thumb img { transform: scale(var(--motion-zoom)); }
.error-help__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.error-help__count { display: inline-flex; align-items: baseline; gap: 8px; color: var(--on-dark-3); font-size: .88rem; font-variant-numeric: tabular-nums; }
.error-help__count .icon { --icon-size: 16px; transition: transform var(--motion-t), color var(--motion-t); }
.error-help__group:hover .error-help__count .icon { color: var(--on-dark-accent); transform: translateX(var(--motion-shift)); }
.error-shell { background: var(--bg); border-bottom: 1px solid var(--line); }
.error-shell__in { display: flex; align-items: center; min-height: var(--header-h); }
.error-shell__brand img { width: auto; height: 48px; }

/* ---------- Footer ---------- */

.site-footer { background: var(--footer); color: var(--on-dark-2); --focus: var(--on-dark-accent); }
.site-footer a:not(.btn) { color: var(--on-dark-2); }
.site-footer a:not(.btn):hover { color: var(--on-dark); }
.footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; padding-block: var(--section-space-sm); border-bottom: 1px solid var(--on-dark-line); }
.footer-cta__title { margin: 0 0 6px; color: var(--on-dark); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.02em; }
.footer-cta__text p { margin: 0; color: var(--on-dark-3); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-cta .btn--primary:hover { background: var(--brand-dark); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding-block: clamp(40px, 3vw + 24px, 60px); }
.footer-brand img { height: 60px; width: auto; margin-bottom: 18px; }
.footer-nap { display: grid; justify-items: start; gap: 9px; font-size: .93rem; }
.footer-nap span { color: var(--on-dark-2); }
.footer-nap a { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; overflow-wrap: anywhere; }
.footer-nap .icon { --icon-size: 17px; }
.footer-hours { display: grid; gap: 2px; margin: 16px 0 0; font-size: .9rem; }
.footer-hours div { display: flex; justify-content: space-between; max-width: 250px; }
.footer-hours dd { margin: 0; color: var(--on-dark); }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 16px 0 0; padding: 0; }
.footer-col__title { margin: 0 0 12px; color: var(--on-dark); font-size: .95rem; letter-spacing: 0; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.footer-col a { display: inline-block; padding: 4px 0; text-decoration: none; font-size: .9rem; }
.footer-acc__item + .footer-acc__item { border-top: 1px solid var(--on-dark-line); }
.footer-acc__toggle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; list-style: none; cursor: pointer; font-size: .9rem; color: var(--on-dark-2); }
.footer-acc__toggle::-webkit-details-marker { display: none; }
.footer-acc__toggle:hover, .footer-acc__item[open]:not(.is-closing) .footer-acc__toggle { color: var(--on-dark); }
.footer-acc__chevron { --icon-size: 16px; color: var(--on-dark-3); transition: transform var(--motion-t), color var(--motion-t); }
.footer-acc__item[open]:not(.is-closing) .footer-acc__chevron { transform: rotate(180deg); color: var(--on-dark-accent); }
.footer-col .footer-acc__panel { padding: 0 0 10px 12px; }
.footer-acc__panel a { font-size: .86rem; color: var(--on-dark-3); }
.footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px 24px; padding-block: 22px; border-top: 1px solid var(--on-dark-line); font-size: .84rem; color: var(--on-dark-3); }
.footer-bottom p { margin: 0; max-width: 80ch; }
.footer-bottom ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; list-style: none; margin: 0; padding: 0; }
.footer-credit { justify-self: end; display: inline-flex; align-items: center; gap: .3em; text-decoration: none; white-space: nowrap; }
/* befcode logo: its lowercase body spans pixel edges 13–48 of 48, so the body centre sits 13.5% of the logo height below the box centre.
   The box centres on --text-axis; a lowercase logo centres its body on the x-height (--x-axis) instead, so it overhangs the neighbouring lowercase equally above and below */
.footer-credit img { height: 1em; translate: 0 calc(var(--text-axis) - var(--x-axis) - 13.5%); width: auto; opacity: .8; transition: opacity var(--motion-t); }
.footer-credit:hover img { opacity: 1; }

/* ---------- Action bar & toast ---------- */

.action-bar { display: none; }
/* centred with auto margins: left: 50% would limit the shrink-to-fit width to half the screen and wrap the message */
.toast { position: fixed; left: 0; right: 0; bottom: 26px; z-index: 90; width: fit-content; margin-inline: auto; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); padding: 12px 16px; background: var(--text); color: var(--on-brand); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-weight: 500; font-size: .93rem; animation: toast-in var(--motion-t); }
.toast a { color: var(--on-dark-accent); font-weight: 700; white-space: nowrap; }
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--motion-lift)); } to { opacity: 1; transform: none; } }

/* ---------- Cookie consent ---------- */

/* same dark surface and entrance as the toast; accept and reject look identical (KVKK: refusing is as easy as accepting) */
.consent { position: fixed; left: var(--gutter); bottom: 20px; z-index: 80; width: min(420px, calc(100% - 2 * var(--gutter))); padding: 18px 20px; background: var(--text); color: var(--on-dark-2); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .9rem; line-height: 1.55; animation: toast-in var(--motion-t); }
.consent[hidden] { display: none; }
.consent p { margin: 0; }
.consent a { color: var(--on-dark-accent); font-weight: 600; }
.consent .consent__title { margin: 0 0 6px; color: var(--on-dark); font-size: .98rem; font-weight: 700; }
.consent__actions { display: flex; gap: 8px; margin-top: 14px; }
.consent__actions .btn { flex: 1; }

/* ---------- Responsive ---------- */

@media (min-width: 1024px) {
  .nav { margin-inline: auto; }
  .header-actions { margin-left: 0; }
}

@media (max-width: 1180px) {
  .nav__list { gap: 4px; }
  .nav__link { padding-inline: 8px; font-size: .92rem; }
  .list-link__text { display: none; }
  .topbar__item--wide { display: none; }
  .list-link { padding: 0; width: var(--header-control); justify-content: center; align-items: center; }
  .list-link::after { content: none; }
  .list-link > .icon { top: 0; margin-top: 0; }
  }

@media (max-width: 1023px) {
  :root { --header-h: 64px; --topbar-h: 0px; }
  .topbar { display: none; }
  .brand img { height: 44px; }
  .header-actions__wa { display: none; }
  .menu-btn--js { display: none; }
  .menu-btn--fallback { display: inline-flex; }
  .js .menu-btn--fallback { display: none; }
  .js .menu-btn--js { display: inline-flex; }

  .nav { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 45; margin: 0; padding: 8px var(--gutter) 110px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); border-top: 1px solid var(--line); visibility: hidden; opacity: 0; transition: color var(--motion-t), background-color var(--motion-t), border-color var(--motion-t), box-shadow var(--motion-t), opacity var(--motion-t), visibility 0s linear var(--motion); }
  html:not(.js) .nav { display: none; }
  .nav-open .nav { visibility: visible; opacity: 1; transition-delay: 0s; }
  .nav-open { overflow: hidden; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { position: relative; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
  .nav__link { flex: 1; padding: 16px 0; font-size: 1.05rem; }
  .nav__toggle { --icon-size: 48px; width: 48px; height: var(--icon-size); margin-left: 0; }
  .nav__panel, .nav__panel--wide, .nav__panel--narrow { position: static; display: none; width: 100%; min-width: 0; margin: 0 0 12px; opacity: 1; visibility: visible; transform: none; box-shadow: none; }
  .nav__item--panel.is-open > .nav__panel { display: block; animation: motion-in var(--motion-t); }
  .mega { grid-template-columns: 1fr; }
  .mega__list { columns: 2; column-gap: 16px; }
  .mega__list a { margin-inline: 0; padding-inline: 0; }
  .mega__thumb { display: none; }
  .mega__col-all { border-top: 0; padding-top: 4px; }
  .mega__head, .mega__tile { grid-template-columns: minmax(0, 1fr); }
  .mega__tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; padding: 0 0 8px; }
  .mega__tiles .mega__count { display: none; }
    .nav__mobile-extra { display: grid; gap: 2px; padding-top: 14px; }
  .nav__mobile-link { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; color: var(--text); font-weight: 600; text-decoration: none; }

  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cat-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .solution-grid, .solution-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-layout { grid-template-columns: minmax(0, 1fr); }
  .quote-aside { position: static; }
  .product { grid-template-columns: minmax(0, 1fr); }
  .gallery { position: static; }
  .gallery__main { aspect-ratio: 4 / 3; }
  .spec-card__list { grid-template-columns: minmax(0, 1fr); }
  .spec-card__list div:nth-child(odd) { border-right: 0; }
  .prep-card { grid-template-columns: minmax(0, 1fr); }
  .prep-card__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .brand-card { grid-template-columns: 180px minmax(0, 1fr); }
  .brand-card__actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 24px 24px; border-top: 0; }
  .brand-ask { grid-template-columns: 48px minmax(0, 1fr); }
  .brand-ask__actions { grid-column: 1 / -1; }
  .guide-list { grid-template-columns: minmax(0, 1fr); }
  .guide-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listing { grid-template-columns: minmax(0, 1fr); }
  .listing__side { position: static; }
  .listing__toggle { display: inline-flex; }
  .js .filter-card { display: none; margin-top: 12px; }
  .js .filter-card.is-open { display: block; animation: motion-in var(--motion-t); }
  .filter-panel { position: static; gap: 16px; }
  .filter-panel__list { display: flex; flex-wrap: wrap; gap: 8px; }
  .filter-panel .filter-option { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; }
  .filter-panel .filter-option.is-active { border-color: var(--brand-tint); }
  .guide-item--lead { grid-row: auto; padding-bottom: 24px; }
  .guide-item--lead .guide-item__media { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .guide-list > .guide-item:last-child:not(.guide-item--lead) { padding-bottom: 20px; }
  .guide-item:nth-child(2) { border-top: 1px solid var(--line); padding-top: 20px; }
  .track { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .track::before { top: 22px; bottom: 22px; left: 22px; right: auto; width: var(--track-line); margin: 0 0 0 calc(var(--track-line) / -2); height: auto; background: repeating-linear-gradient(180deg, var(--brand) 0 6px, transparent 6px 12px); animation-name: motion-flow-down; background-size: var(--track-line) 12px; }
  .track__step { padding-left: 64px; text-align: left; }
  .track__node { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: 0; }
  .track__text { margin: 0; }
  .track__node .icon { width: 20px; height: 20px; }
  .track-wrap::after { display: none; }
  .delivery__in { grid-template-columns: minmax(0, 1fr); }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .about-intro { grid-template-columns: minmax(0, 1fr); }
  .about-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-figures li + li { border-left: 0; }
  .about-figures li:nth-child(even) { border-left: 1px solid var(--line); }
  .about-figures li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .about-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .error-page__in { grid-template-columns: minmax(0, 1fr); }
  .content-grid--toc .toc-inline { display: block; }
  .content-grid--toc .sidebar .toc { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero__in { grid-template-columns: minmax(0, 1fr); }
  .page-hero__photo { display: none; }

  .action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1.2fr 1fr; background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .2); padding-bottom: env(safe-area-inset-bottom); }
  .action-bar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--action-bar-h); color: var(--text); text-decoration: none; font-weight: 600; font-size: .78rem; line-height: 1; }
  .action-bar__item .icon { width: 21px; height: 21px; }
  .action-bar__item--wa { background: var(--brand); color: var(--on-brand); }
  .action-bar__item--wa:hover { color: var(--on-brand); }
  /* badge sits on the icon's top-right corner; the ring keeps it off the glyph */
  .action-bar__item .count { --control-h: 16px; position: absolute; top: 3px; left: calc(50% + 3px); min-width: 16px; padding: 0 4px; border-radius: 8px; box-shadow: 0 0 0 2px var(--bg); font-size: .62rem; }
  body { padding-bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom)); }
  .consent { right: var(--gutter); width: auto; bottom: calc(var(--action-bar-h) + env(safe-area-inset-bottom) + 12px); }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
  .brand img { height: 40px; }
  .header-actions { --header-control: 40px; }
  .header-actions .icon-btn, .list-link { width: 40px; }
  .menu-btn span { display: none; }
  .menu-btn { align-items: center; }
  .menu-btn::after { content: none; }
  .menu-btn > .icon { top: 0; margin-top: 0; }
  .hero__actions .btn { flex: 1 1 100%; }
  .trust__item { padding: 16px 12px; gap: 10px; }
  .trust__icon { width: 36px; height: 36px; }
  .trust__item span { display: none; }
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .solution-grid, .solution-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .picker { width: 100vw; height: 100dvh; border-radius: 0; }
  .picker__panel { border-radius: 0; }
  .picker__head { padding: 16px 16px 10px; }
  .picker__title { font-size: 1.2rem; }
  .picker__tools { padding: 0 16px 10px; }
  .picker__segment { width: 100%; }
  .picker__segment button { flex: 1; }
  .picker__group-list { padding: 0 16px; }
  .picker__body { padding: 14px 16px 18px; }
  .picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pick__actions { grid-template-columns: minmax(0, 1fr); }
  .pick__qty { justify-content: space-between; }
  .pick__qty input { flex: 1; }
  .picker__foot { padding: 12px 16px; }
  .picker__thumbs { display: none; }
  .quote-step__head { padding: 16px; }
  .quote-step__body { padding: 16px; }
  .quote-step__actions { padding: 0 16px 16px; }
  .quote-step__actions .btn { flex: 1 1 100%; }
  .buybox__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* home: featured products slide sideways instead of stacking */
  .product-scroller .product-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; }
  .buybox__facts { grid-template-columns: minmax(0, 1fr); }
  .prep-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prep-card__actions { grid-template-columns: minmax(0, 1fr); }
  .prep-chip--span-2 { grid-column: auto; }
  .prep-chip--add { grid-column: 1 / -1; }
      .brand-card { grid-template-columns: minmax(0, 1fr); }
  .brand-card__logo { min-height: 168px; padding: 32px 22px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-card__body { padding: 20px 20px 16px; }
  .brand-card__actions { grid-template-columns: minmax(0, 1fr); padding: 0 20px 20px; }
  .brand-ask { grid-template-columns: minmax(0, 1fr); }
  .brand-ask__icon { display: none; }
  .guide-grid, .guide-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .cat-card { aspect-ratio: 4 / 3; }
  .guide-item { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .footer-bottom { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .footer-credit { justify-self: center; }
  .guide-list > .guide-item:not(.guide-item--lead) .guide-item__media { min-height: 96px; }
  .about-reasons { grid-template-columns: minmax(0, 1fr); }
  .error-help__actions { grid-template-columns: minmax(0, 1fr); }
  .brand-strip__list li { flex-basis: 140px; }
  .brand-tile { padding: 26px 14px 20px; }
  .brand-tile__cats { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .faq__a { padding-right: 0; }
  .faq--split { grid-template-columns: minmax(0, 1fr); }
  .faq__intro { position: static; }
  .filters__count { margin-left: 0; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-cta__actions .btn { flex: 1 1 100%; }
  .contact-panel { grid-template-columns: minmax(0, 1fr); }
  .contact-panel__store { border-left: 0; border-top: 1px solid var(--line); }
  .contact-primary { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .contact-primary__icon { width: 44px; height: 44px; }
  .contact-primary__go { display: none; }
  .contact-row { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 12px; }
  .contact-row__icon { width: 40px; height: 40px; }

  .qlist__item { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .qlist__item img, .qlist__thumb { width: 44px; height: 44px; }
  .qlist__item .qty { grid-column: 2; justify-self: start; }
  .qlist__remove { grid-row: 1; grid-column: 3; }
  .search-form { flex-direction: column; }
}

@media print {
  .reveal { opacity: 1; transform: none; }
  .topbar, .site-header, .action-bar, .site-footer, .toast, .consent, .pcard__actions { display: none !important; }
  body { padding: 0; }
}