/* ============================================================
   Faire-derived storefront system — Build and Equip catalogue
   White canvas · dollar-green type · Google Sans Flex site-wide
   Two radii only (4px / 40px) · shadows reserved for hover lift
   Trust-first sales palette: every tone derived from one dollar-green hue (160)
   Light dollar-bill green = short decorative rule only, never a control
   ============================================================ */

:root {
  --c-cream: #ffffff;                     /* white canvas */
  --c-white: #ffffff;                     /* card surface */
  --c-ink: oklch(38% 0.08 160);           /* dollar-green ink — headings, menus */
  --c-charcoal: oklch(32% 0.05 160);      /* body text */
  --c-smoke: oklch(52% 0.04 160);         /* muted text */
  --c-ash: oklch(91% 0.015 160);          /* hairline borders */
  --c-butter: oklch(75% 0.11 140);        /* dollar-bill light green — decorative rule */
  --c-flame: oklch(45% 0.1 160);          /* primary CTA green */
  --c-ember: oklch(38% 0.1 160);          /* CTA hover — deeper green */
  --c-forest: oklch(30% 0.06 160);        /* inverted band */
  --c-field: oklch(96.5% 0.02 160);       /* soft tinted field behind tonal sections */
  --c-field-2: oklch(93.5% 0.03 160);     /* slightly deeper tint for stacked fields */

  --r-md: 4px;
  --r-pill: 40px;
  --maxw: 1280px;
  --page-pad: 50px;

  /* Hover lift — the sole shadow in the system, kept faint and soft */
  --lift: 0 10px 30px -14px oklch(32% 0.06 160 / 0.35);
  --lift-lg: 0 18px 44px -18px oklch(32% 0.06 160 / 0.45);

  /* Single family site-wide: Google Sans Flex (variable 100-900, self-hosted).
     Display hierarchy comes from weight (500) instead of a serif contrast. */
  --font-sans: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Google Sans Flex', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-caption: 14px;
  --t-body: 16px;
  --t-sub: 18px;
  --t-heading-sm: 22px;
  --t-heading: 28px;
  --t-heading-lg: 31px;
  --t-display: 54px;

  --header-h: 159px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  letter-spacing: 0.009em;
  color: var(--c-charcoal);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums lining-nums;
}

body { overflow-x: clip; }

/* full-bleed breakout for sections living inside the centered wrap */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

h1, h2, h3 { color: var(--c-ink); font-weight: 500; letter-spacing: -0.012em; }
.muted { color: var(--c-smoke); }

.wrap { width: 100%; margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }

/* Short decorative butter rule — the system's only accent gesture */
.rule::before {
  content: "";
  display: block;
  width: 64px; height: 3px;
  background: var(--c-butter);
  margin-bottom: 16px;
}

/* ---------------- Header ---------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-cream);
  border-bottom: 1px solid var(--c-ash);
}
.nav-inner { width: 100%; padding: 0 var(--page-pad); display: flex; flex-direction: column; }

.nav-top {
  display: flex; align-items: center; gap: 32px;
  min-height: 76px; padding: 14px 0;
  position: relative;
}

/* Logo — drawer-unit monogram (echoes the trade-counter hero) + serif wordmark */
.brand { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; flex-shrink: 0; }
.brand-mark svg, .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-name {
  font-family: var(--font-serif);
  font-size: 22px; font-weight: 500; line-height: 1;
  letter-spacing: 0.01em; color: var(--c-ink); white-space: nowrap;
}
.brand-name i { font-style: italic; color: var(--c-smoke); padding: 0 1px; }
.brand-name small {
  display: block; margin-top: 5px;
  font-family: var(--font-sans);
  font-size: 9.5px; font-weight: 400; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--c-smoke);
}
/* Header lockup: caption spans exactly the "Build&Equip" wordmark width —
   width:0 keeps it out of the shrink-to-fit measure, justify fills the line */
/* JS (fitBrandCaption) computes the exact letter-spacing to fill the wordmark
   width; the 0.11em + justify pair is only the no-JS fallback */
.brand-lock small {
  width: 0; min-width: 100%;
  letter-spacing: 0.11em;
  text-align: justify; text-align-last: justify;
  white-space: nowrap;
}

/* Pill search — the only pill-shaped control in the header */
.search {
  flex: 1 1 auto; min-width: 0; max-width: 560px;
  display: flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  background: var(--c-white);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-pill);
}
.search svg { width: 17px; height: 17px; color: var(--c-charcoal); flex-shrink: 0; }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: var(--t-body); letter-spacing: 0.009em; color: var(--c-ink);
}
.search input::placeholder { color: var(--c-charcoal); opacity: 0.75; }
.search:focus-within { border-color: var(--c-charcoal); }

.nav-actions { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.ghost-link { font-size: var(--t-caption); letter-spacing: 0.009em; color: var(--c-ink); white-space: nowrap; }
.ghost-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Primary CTA — forest green (matches footer band) for the filled control */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--c-flame); color: var(--c-white);
  font-size: var(--t-caption); font-weight: 400; letter-spacing: 0.009em;
  border-radius: var(--r-md); padding: 12px 23px;
  white-space: nowrap;
}
.hx-actions .btn { background: var(--c-forest); }
.hx-actions .btn:hover { background: var(--c-ember); }
.btn svg { width: 15px; height: 15px; }
[data-od-id="nav-cta"] { padding: 15px 29px; }
.btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover { background: var(--c-ember); }
/* <button class="btn"> için de görünür odak halkası — tarayıcı varsayılanına
   bırakılmasın, sistemdeki diğer kontrollerle aynı halkayı kullansın. */
.btn:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.btn-ghost {
  background: transparent; color: var(--c-ink);
  border: 1px solid var(--c-ink);
}
.btn-ghost:hover { background: var(--c-ink); color: var(--c-white); }

/* Language switcher — dollar-green outlined twin of the CTA, sits to its left */
.nav-lang { position: relative; margin-left: auto; flex-shrink: 0; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--c-flame);
  border: 1px solid var(--c-flame);
  border-radius: var(--r-md); padding: 11px 14px;
  font-family: inherit; font-size: var(--t-caption); font-weight: 400; letter-spacing: 0.04em;
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lang-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.lang-btn .lb-chev { width: 12px; height: 12px; transition: transform .15s ease; }
.lang-btn:hover { background: color-mix(in oklch, var(--c-flame) 8%, var(--c-white)); color: var(--c-ember); border-color: var(--c-ember); }
.nav-lang.open .lang-btn { background: var(--c-flame); color: var(--c-white); border-color: var(--c-flame); }
.nav-lang.open .lb-chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  min-width: 184px; margin: 0; padding: 6px; list-style: none;
  background: var(--c-white);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-md);
  display: none; z-index: 60;
}
.nav-lang.open .lang-menu { display: block; }
.lang-menu li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-md);
  font-size: var(--t-caption); color: var(--c-charcoal);
  cursor: pointer;
}
.lang-menu li:hover { background: color-mix(in oklch, var(--c-flame) 7%, var(--c-white)); color: var(--c-ink); }
.lang-menu li[aria-selected="true"] { color: var(--c-flame); }
.lang-menu .lm-code {
  width: 24px; flex-shrink: 0;
  font-size: 11px; letter-spacing: 0.08em; color: var(--c-smoke);
}
.lang-menu li[aria-selected="true"] .lm-code { color: var(--c-flame); }
.lang-menu .lm-name { flex: 1; }
.lang-menu .lm-check { width: 14px; height: 14px; flex-shrink: 0; visibility: hidden; }
.lang-menu li[aria-selected="true"] .lm-check { visibility: visible; }

/* Category text nav — 16 fixed departments, symmetric 8×2 grid (no scroll) */
.nav-cats-row { padding: 2px 0 10px; }
.nav-cats {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 2px 18px;
}
.nav-cat { min-width: 0; }
.nav-cat > a {
  font-size: 15.6px; line-height: 1.3; letter-spacing: 0.009em;
  min-height: 34px; height: 100%;
  display: flex; align-items: center; justify-content: flex-start;
  text-align: left; padding: 3px 8px; white-space: nowrap;
  color: var(--c-ink);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
}
@media (max-width: 1400px) {
  .nav-cat > a { font-size: 14.4px; }
}
@media (max-width: 1240px) {
  .nav-cat > a { font-size: 13.2px; }
  .nav-cats { column-gap: 12px; }
}
.nav-cat > a:hover { border-bottom-color: var(--c-ink); }
.nav-cat.active > a { border-color: var(--c-ink); }

/* Mobile menu button */
.menu-btn {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  color: var(--c-ink);
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
}
.menu-btn svg { width: 24px; height: 24px; }

.mobile-menu {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-white); border-bottom: 1px solid var(--c-ash);
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.mobile-menu.open { display: block; }
.mm-cat > button {
  width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px; font-size: 19.2px; color: var(--c-ink);
  border-bottom: 1px solid var(--c-ash);
}
.mm-sub { display: none; background: var(--c-cream); }
.mm-cat.open .mm-sub { display: block; }
.mm-sub a { display: block; padding: 10px 24px 10px 40px; font-size: 18px; border-bottom: 1px solid var(--c-ash); color: var(--c-charcoal); }

/* ---------------- Hero (home) — the supply desk ----------------
   Display type and the real catalogue on the right: three house/department
   renders in a bento, multiplied onto the canvas the same way the counter
   shelf does it, over the faint graph paper the workflow infographics use.
   The guarantee rail underneath is the 7-step chain compressed to five chips,
   and it scrolls straight down to that section. */
.hx { padding: 30px 0 10px; }
/* Full-width stage: the slider is the whole hero now — no second column */
.hx-grid { display: block; }
.hx-copy { display: flex; flex-direction: column; align-items: flex-start; }
.hx-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-smoke);
}
.hx-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--c-butter); flex-shrink: 0; }
.hx-title {
  margin-top: 16px;
  font-weight: 550;
  font-size: clamp(38px, 4.9vw, 68px);
  line-height: 1.02; letter-spacing: -0.032em;
  color: var(--c-ink); text-wrap: balance; max-width: 15ch;
}
.hx-title i { font-style: italic; font-weight: 500; color: var(--c-forest); }
.hx-lead {
  margin-top: 18px;
  font-size: var(--t-sub); line-height: 1.5; color: var(--c-smoke);
  max-width: 46ch;
}
.hx-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hx-actions .btn { padding: 14px 24px; font-size: 15px; }
.hx-stats { width: auto; margin-top: 0; }

/* Guarantee rail */
.hx-rail {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px;
  background: var(--c-field); border: 1px solid var(--c-ash); border-radius: var(--r-md);
}
.hx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--c-white); border: 1px solid var(--c-ash);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--c-ink);
  white-space: nowrap;
}
.hx-chip svg { width: 16px; height: 16px; color: var(--c-flame); flex-shrink: 0; }
.hx-rail__link {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--c-ink); white-space: nowrap;
}
.hx-rail__link svg { width: 15px; height: 15px; }
.hx-rail__link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
}

/* ---------------- Hero stage — the department slider under the pitch ----------------
   The pitch now sits on the same photo wall the category hyperframe uses: five
   department covers cross-faded under the identical dollar-green duotone, so the
   hero and the catalogue below read as one system rather than two treatments.
   The dots are the progress track — no separate timer bar — and every slide is a
   real department, so the caption chip is a door into that range. */
.hx-stage {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(520px, 44vw, 660px);
  padding: clamp(28px, 3vw, 52px);
  border: 1px solid var(--c-ash); border-radius: 12px;
  background: var(--c-forest);
}
.hx-slides { position: absolute; inset: 0; z-index: 0; }
.hx-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .8s ease; }
.hx-slide.is-on { opacity: 1; }
.hx-slide img {
  width: 100%; height: 100%; object-fit: cover;
  /* the projects are the point: full colour, only a light grade */
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.05);
}
.hx-stage[data-auto="on"] .hx-slide.is-on img { animation: hx-drift 6.6s linear forwards; }
.hx-stage.is-paused .hx-slide.is-on img,
.hx-stage.is-paused .hx-dot.is-on span { animation-play-state: paused; }
@keyframes hx-drift { from { transform: scale(1.05); } to { transform: scale(1.12); } }

/* Duotone veil — same recipe as .hf-veil, plus a reading gradient from the
   text edge so the headline never sits on raw photo detail. */
.hx-stage__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* physical direction on purpose: `to inline-end` is not valid in a gradient
     and silently kills the whole background declaration — RTL is flipped below */
  background:
    linear-gradient(to right, oklch(12% .035 160 / .92) 0%, oklch(12% .035 160 / .78) 34%, oklch(12% .035 160 / .34) 66%, oklch(12% .035 160 / .12) 100%),
    linear-gradient(180deg, oklch(16% .04 160 / .30) 0%, oklch(14% .035 160 / .16) 40%, oklch(10% .03 160 / .72) 100%);
}

/* Copy, inverted onto the stage */
/* Grouped pitch, vertically centred in the stage above the foot row */
.hx-stage .hx-copy {
  position: relative; z-index: 2; flex: 1 1 auto; max-width: 54ch;
  display: flex; flex-direction: column; justify-content: center;
}
/* the CTAs live in the stage foot row now, on the slider transport's line */
.hx-footrow .hx-actions { margin-top: 0; padding-top: 0; }
.hx-stage .hx-eyebrow { color: oklch(93% .02 160 / .82); }
.hx-stage .hx-title { color: var(--c-white); }
.hx-stage .hx-title i { color: var(--c-butter); }
.hx-stage .hx-lead { color: oklch(94% .015 160 / .8); }
/* per-slide copy swap: fade the headline + lead down/out then back */
.hx-stage .hx-copy #hxTitle,
.hx-stage .hx-copy #hxLead { transition: opacity .42s ease, transform .42s ease; }
.hx-stage .hx-copy.is-swap #hxTitle,
.hx-stage .hx-copy.is-swap #hxLead { opacity: 0; transform: translateY(10px); }
.hx-stage .hx-actions .btn {
  background: var(--c-forest); color: var(--c-white);
  border: 1px solid var(--c-forest); font-weight: 500;
}
.hx-stage .hx-actions .btn:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-forest); }
.hx-stage .hx-actions .btn-ghost {
  background: transparent; color: var(--c-white);
  border-color: oklch(95% .01 160 / .5);
}
.hx-stage .hx-actions .btn-ghost:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-forest); }
.hx-stage .hero-stats { border-top-color: oklch(95% .01 160 / .24); border-bottom-color: oklch(95% .01 160 / .24); }
.hx-stage .hero-stats .hs + .hs { border-inline-start-color: oklch(95% .01 160 / .24); }
.hx-stage .hero-stats .hs b { color: var(--c-white); }
.hx-stage .hero-stats .hs span { color: oklch(93% .02 160 / .66); }

/* Control row: the live counters sit on the left, the transport on the right —
   one bottom line for the whole stage. */
.hx-footrow {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  margin-top: clamp(18px, 2vw, 26px);
}
/* Sahnenin alt satırında metin, hemen altında CTA'lar; transport sağda kalır */
.hx-footcol { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hx-footcol .hx-lead { margin-top: 0; max-width: 58ch; }
.hx-slider {
  display: flex; align-items: center; gap: 14px;
  margin-inline-start: auto;
}
.hx-dots { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.hx-dot {
  position: relative; width: 28px; height: 20px;
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.hx-dot::before {
  content: ""; position: absolute; inset-inline: 0; height: 2px;
  background: oklch(95% .01 160 / .3);
}
.hx-dot span {
  position: relative; display: block; width: 100%; height: 2px;
  background: var(--c-butter);
  transform: scaleX(0); transform-origin: 0 50%;
}
.hx-dot.is-on span { transform: scaleX(1); }
.hx-stage[data-auto="on"] .hx-dot.is-on span { animation: hx-tick 6s linear forwards; }
@keyframes hx-tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[dir="rtl"] .hx-stage__veil {
  background:
    linear-gradient(to left, oklch(12% .035 160 / .92) 0%, oklch(12% .035 160 / .78) 34%, oklch(12% .035 160 / .34) 66%, oklch(12% .035 160 / .12) 100%),
    linear-gradient(180deg, oklch(16% .04 160 / .30) 0%, oklch(14% .035 160 / .16) 40%, oklch(10% .03 160 / .72) 100%);
}
[dir="rtl"] .hx-dot span { transform-origin: 100% 50%; }
.hx-arrows { display: flex; gap: 8px; }
.hx-arrow {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  color: var(--c-white);
  background: oklch(18% .04 160 / .4);
  border: 1px solid oklch(95% .01 160 / .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.hx-arrow:hover { background: var(--c-butter); border-color: var(--c-butter); color: var(--c-forest); }
.hx-arrow svg { width: 16px; height: 16px; }
[dir="rtl"] .hx-arrow svg { transform: scaleX(-1); }
.hx-dot:focus-visible, .hx-arrow:focus-visible {
  outline: 2px solid var(--c-butter); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .hx-slide { transition: none; }
  .hx-slide img, .hx-dot span { animation: none !important; }
}

/* The shelf — items stand on the line; captions hang below the counter edge */
.hero-shelf {
  position: relative;
  display: flex; align-items: flex-end;
  gap: clamp(8px, 1.6vw, 28px);
  margin-top: clamp(28px, 4vw, 48px);
}
.hero-shelf::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 42px;
  height: 1px; background: var(--c-ash);
}
.hero-shelf::after {
  content: ""; position: absolute; left: 0; bottom: 41px;
  width: 96px; height: 3px; background: var(--c-butter);
}
.shelf-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.shelf-item .sh-img {
  height: clamp(150px, 17vw, 260px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 4px;
}
.shelf-item .sh-img img {
  max-height: 100%; max-width: 100%; width: auto;
  /* multiply melts the near-white studio backdrops into the canvas so the
     shelf line runs continuously behind the products */
  mix-blend-mode: multiply;
  transition: transform .18s ease;
}
.shelf-item:hover .sh-img img { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) {
  .shelf-item .sh-img img { transition: none; }
  .shelf-item:hover .sh-img img { transform: none; }
}
.shelf-item .sh-cap {
  height: 42px; padding-top: 11px;
  text-align: center;
  font-size: 12.5px; letter-spacing: 0.02em; color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shelf-item .sh-cap i { font-style: normal; color: var(--c-smoke); font-size: 11.5px; margin-inline-start: 6px; }
.shelf-item:hover .sh-cap { text-decoration: underline; text-underline-offset: 3px; }

/* Stats — trade-desk ticker: one ruled strip, number and label share a baseline */
.hero-stats {
  display: flex; align-items: stretch;
  margin-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid var(--c-ash);
  border-bottom: 1px solid var(--c-ash);
}
.hero-stats .hs {
  display: flex; align-items: baseline; gap: 10px;
  padding: 16px clamp(24px, 3.4vw, 52px) 16px 0;
  white-space: nowrap;
}
.hero-stats .hs + .hs {
  border-inline-start: 1px solid var(--c-ash);
  padding-inline-start: clamp(24px, 3.4vw, 52px);
}
.hero-stats .hs b {
  font-weight: 650;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 1; color: var(--c-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-stats .hs span {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-smoke);
}

/* ===================== Supply-chain workflow band (7-step infographic) =====================
   The chain reads as one running conveyor, not seven parked cards:
   a numbered rail draws itself in on entry, a butter spark keeps travelling it,
   and the seven tiles rise in sequence underneath. Three phase brackets above
   the rail turn the list into a narrative (agree → make → ship). */
.section.flow-band {
  --flow-cols: repeat(4, minmax(0, 1fr)) 1.24fr repeat(2, minmax(0, 1fr));
  --flow-gap: 14px;
  /* 7 columns totalling 7.24fr -> half of one 1fr column, used to clip the rail
     so it begins on station 01 and ends on station 07 instead of running off-edge */
  --flow-half-col: calc((100% - 6 * var(--flow-gap)) / 14.48);
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px var(--page-pad) 68px;
  background: var(--c-field);
  border-bottom: 1px solid var(--c-ash);
}
.flow-band .section-head { margin-bottom: 30px; }

.flow-pipeline { position: relative; margin-top: 8px; }

/* ---- phase brackets: 01–03 agree · 04–05 make · 06–07 ship ---- */
.flow-phases,
.flow-track__nodes,
.flow-steps {
  display: grid;
  grid-template-columns: var(--flow-cols);
  gap: var(--flow-gap);
}
.flow-phases { margin-bottom: 12px; }
.flow-phase {
  grid-column: span var(--span);
  position: relative;
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  padding-left: 11px;
}
/* short vertical tick opens each bracket */
.flow-phase::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 2px; height: 12px; margin-top: -6px; border-radius: 1px;
  background: var(--c-flame);
}
.flow-phase__k {
  font-size: 11px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-ink); white-space: nowrap;
}
.flow-phase__r {
  font-size: 10.5px; letter-spacing: 0.1em; color: var(--c-smoke);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.flow-phase::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 12px;
  background: linear-gradient(90deg, var(--c-ash) 0 72%, transparent 100%);
}
.flow-phase--make .flow-phase__k { color: var(--c-flame); }
.flow-phase--make::before { background: var(--c-butter); }
.flow-phase--make::after { background: linear-gradient(90deg, var(--c-butter) 0 72%, transparent 100%); }

/* ---- the rail itself ---- */
.flow-track { position: relative; height: 38px; margin-bottom: 14px; }
.flow-track__line,
.flow-track__fill {
  position: absolute; top: 50%; left: var(--flow-half-col);
  height: 2px; margin-top: -1px; border-radius: 2px;
}
.flow-track__line {
  right: var(--flow-half-col);
  background: repeating-linear-gradient(90deg, var(--c-ash) 0 7px, transparent 7px 14px);
}
.flow-track__fill { width: 0; background: var(--c-flame); }
.js .flow-band.is-inview .flow-track__fill {
  width: calc(100% - 2 * var(--flow-half-col));
  transition: width 1.9s cubic-bezier(.25, .85, .3, 1) .18s;
}
.flow-track__spark {
  position: absolute; top: 50%; left: var(--flow-half-col); z-index: 2;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--c-butter); opacity: 0;
  box-shadow: 0 0 0 4px oklch(75% 0.11 140 / 0.22);
}
.js .flow-band.is-inview .flow-track__spark {
  animation: flow-spark 5.2s cubic-bezier(.5, 0, .5, 1) 2.1s infinite;
}
@keyframes flow-spark {
  0%   { left: var(--flow-half-col); opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% - var(--flow-half-col) - 8px); opacity: 0; }
}

/* numbered stations, one per column — they align with the tiles below for free */
.flow-track__nodes { position: absolute; inset: 0; align-items: center; }
.flow-node {
  justify-self: center; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-white); border: 1px solid var(--c-ash);
  color: var(--c-smoke);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.7);
  transition: opacity .38s ease, transform .42s cubic-bezier(.2, .9, .3, 1),
              border-color .3s ease, color .3s ease, background-color .3s ease;
}
.js .flow-band.is-inview .flow-node {
  opacity: 1; transform: none;
  border-color: var(--c-flame); color: var(--c-ink);
  transition-delay: calc(.3s + var(--i) * .17s);
}
.flow-node--accent { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-butter); }
.js .flow-band.is-inview .flow-node--accent { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-butter); }

/* ---- one infographic tile per step ---- */
.flow-step {
  /* graphic palette — the SVG scenes read these, so the accent tile recolours itself */
  --g-line: var(--c-ink);
  --g-fill: var(--c-field);
  --g-surface: var(--c-white);
  --g-accent: var(--c-flame);
  --g-hi: var(--c-butter);
  --g-mute: var(--c-ash);
  --g-onaccent: #fff;

  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .18s ease, transform .34s cubic-bezier(.22, .61, .36, 1),
              box-shadow .18s ease, opacity .42s ease;
}
.js .flow-step { opacity: 0; transform: translateY(16px); }
.js .flow-band.is-inview .flow-step {
  opacity: 1; transform: none;
  transition-delay: calc(.24s + var(--i) * .075s);
}
.js .flow-band.is-inview .flow-step:hover {
  transform: translateY(-6px); border-color: var(--c-flame);
  box-shadow: var(--lift); transition-delay: 0s;
}
.flow-step:hover { border-color: var(--c-flame); box-shadow: var(--lift); }

/* hairline that wipes across the top edge on hover */
.flow-step__edge {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4; height: 2px;
  background: var(--c-flame);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}
.flow-step:hover .flow-step__edge { transform: scaleX(1); }
.flow-step--accent .flow-step__edge { background: var(--c-butter); }

.flow-step__art {
  position: relative;
  height: 108px; flex-shrink: 0;
  background: radial-gradient(120% 120% at 50% 0%, var(--c-white) 0%, var(--c-field) 100%);
  border-bottom: 1px solid var(--c-ash);
  overflow: hidden;
}
/* faint graph paper so the scenes read as diagrams, not clip-art */
.flow-step__art::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--c-ash) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-ash) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: .45;
  transition: opacity .25s ease;
  pointer-events: none;
}
.flow-step:hover .flow-step__art::before { opacity: .7; }
.flow-step__art svg {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
}
.flow-step__ghost {
  position: absolute; top: -6px; right: 6px; z-index: 0;
  font-size: 54px; font-weight: 800; line-height: 1; letter-spacing: -0.06em;
  color: var(--c-ink); opacity: 0.07; pointer-events: none;
  font-variant-numeric: tabular-nums;
  transition: opacity .25s ease;
}
.flow-step:hover .flow-step__ghost { opacity: 0.12; }

.flow-step__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 11px 13px;
  text-align: center;
}
/* the rail carries the numbers on desktop; this pill takes over once it is hidden */
.flow-step__num { display: none; }
.flow-step__title {
  font-size: 14px; font-weight: 650; line-height: 1.25; color: var(--c-ink);
  letter-spacing: -0.012em; text-wrap: balance;
}
.flow-step__title span {
  display: block; margin-top: 5px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-flame);
}
.flow-step__meta {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--c-field); border: 1px solid var(--c-ash);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: var(--c-smoke);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flow-step__meta::before {
  content: ""; flex: 0 0 auto;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-butter);
}

/* the inspection step is the pivot of the chain — it gets the inverted band */
.flow-step--accent {
  background: var(--c-forest); border-color: var(--c-forest);
  --g-line: #fff;
  --g-fill: rgba(255,255,255,0.10);
  --g-surface: rgba(255,255,255,0.06);
  --g-accent: var(--c-butter);
  --g-hi: var(--c-butter);
  --g-mute: rgba(255,255,255,0.26);
  --g-onaccent: var(--c-forest);
}
.flow-step--accent:hover,
.js .flow-band.is-inview .flow-step--accent:hover { border-color: var(--c-butter); }
.flow-step--accent .flow-step__art {
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0));
  border-bottom-color: rgba(255,255,255,0.16);
}
.flow-step--accent .flow-step__art::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px);
  opacity: .5;
}
.flow-step--accent .flow-step__ghost { color: #fff; opacity: 0.13; }
.flow-step--accent .flow-step__num { background: var(--c-butter); color: var(--c-forest); border-color: var(--c-butter); }
.flow-step--accent .flow-step__title { color: var(--c-white); }
.flow-step--accent .flow-step__title span { color: var(--c-butter); }
.flow-step--accent .flow-step__meta { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.78); }
.flow-step--accent .flow-step__meta::before { background: var(--c-butter); }

/* motion lives inside the graphics: material travels, bars settle */
.g-dash { stroke-dasharray: 5 5; }
.g-bar, .g-rise { transform-box: fill-box; transform-origin: center bottom; transition: transform .22s cubic-bezier(.2,.8,.3,1); }
.flow-step:hover .g-dash { animation: g-travel 1.1s linear infinite; }
.flow-step:hover .g-bar { transform: scaleY(1.06); }
.flow-step:hover .g-rise { transform: translateY(-3px); }
.flow-step:hover .g-rise:nth-of-type(2) { transition-delay: .04s; }
@keyframes g-travel { to { stroke-dashoffset: -20; } }

@media (prefers-reduced-motion: reduce) {
  .flow-step:hover .g-dash { animation: none; }
  .g-bar, .g-rise { transition: none; }
  .flow-step:hover .g-bar, .flow-step:hover .g-rise { transform: none; }
  .js .flow-step { opacity: 1; transform: none; }
  .js .flow-band.is-inview .flow-step { transition-delay: 0s; }
  .js .flow-band.is-inview .flow-track__fill { width: 100%; transition: none; }
  .js .flow-band.is-inview .flow-track__spark { animation: none; opacity: 0; }
  .flow-node { opacity: 1; transform: none; }
  .js .flow-band.is-inview .flow-node { transition-delay: 0s; }
}

/* ---- the three guarantees that sit under the chain ---- */
.flow-bottom {
  display: grid; grid-template-columns: 1.15fr 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}
.flow-bottom__col {
  padding: 18px;
  background: var(--c-white);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-md);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.flow-bottom__col:hover { border-color: var(--c-flame); transform: translateY(-3px); box-shadow: var(--lift); }
.flow-bottom__col h4 {
  font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-ink); display: flex; align-items: center; gap: 10px;
}
.flow-bottom__col h4 svg {
  flex: 0 0 auto;
  width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: oklch(45% 0.1 160 / 0.1);
  color: var(--c-flame);
}
.flow-bottom__col p { font-size: 12.5px; line-height: 1.55; color: var(--c-charcoal); margin-top: 10px; }
.flow-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.flow-badge {
  font-size: 10.5px; letter-spacing: 0.04em; font-weight: 600;
  padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--c-field); border: 1px solid var(--c-ash); color: var(--c-ink);
  transition: border-color .16s ease, color .16s ease;
}
.flow-badge:hover { border-color: var(--c-flame); color: var(--c-flame); }

/* Shelf section (relocated) */
.shelf-section { padding-top: 48px; }
.shelf-section .section-head { margin-bottom: 20px; }
.shelf-section .hero-shelves { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 1100px) {
  .hx-grid { grid-template-columns: 1fr; gap: 30px; }
  .hx-title { max-width: 20ch; }
  .hx-stage { min-height: clamp(400px, 62vw, 500px); }
  /* the horizontal rail only works at 7 columns — below that the tiles carry their own numbers */
  .section.flow-band { --flow-cols: repeat(3, minmax(0, 1fr)); padding: 52px var(--page-pad) 56px; }
  .flow-track, .flow-phases { display: none; }
  .flow-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 9px; border-radius: var(--r-pill);
    background: var(--c-white); border: 1px solid var(--c-flame);
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--c-ink);
    font-variant-numeric: tabular-nums;
  }
  /* seven tiles never fill a 3-up grid — the last one becomes the closing row */
  .flow-step:last-child { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
  .flow-step:last-child .flow-step__art {
    flex: 0 0 224px; height: auto; min-height: 116px;
    border-bottom: none; border-right: 1px solid var(--c-ash);
  }
  .flow-step:last-child .flow-step__art svg { height: 116px; }
  .flow-step:last-child .flow-step__ghost { font-size: 46px; }
  .flow-step:last-child .flow-step__body {
    flex-direction: row; align-items: center; justify-content: flex-start;
    text-align: left; gap: 18px; padding: 16px 18px; flex-wrap: wrap;
  }
  .flow-step:last-child .flow-step__title span { display: inline-block; margin: 0 0 0 10px; }
  .flow-step:last-child .flow-step__meta { margin-top: 0; margin-left: auto; }
  .flow-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hx { padding: 18px 0 6px; }
  .hx-stage { padding: 20px; min-height: 0; border-radius: 10px; }
  .hx-footrow { flex-direction: column; align-items: stretch; gap: 14px; }
  .hx-footcol { align-items: stretch; }
  .hx-slider { gap: 10px; margin-inline-start: 0; }
  .hx-stats { width: 100%; }
  .hx-arrow { width: 44px; height: 44px; }
  .hx-title { font-size: clamp(30px, 8.4vw, 44px); max-width: none; }
  .hx-lead { font-size: 15.5px; }
  .hx-actions { width: 100%; }
  .hx-actions .btn { flex: 1 1 auto; }
  .hx-rail { gap: 8px; padding: 12px; }
  .hx-chip { font-size: 12px; padding: 7px 12px; }
  .hx-rail__link { margin-inline-start: 0; width: 100%; justify-content: space-between; padding-top: 4px; }
  .section.flow-band { --flow-cols: 1fr; padding: 44px var(--page-pad) 48px; }
  /* the tablet "closing row" treatment must not leak into the stacked timeline */
  .flow-step:last-child { grid-column: auto; }
  .flow-step:last-child .flow-step__art { flex: 0 0 116px; min-height: 96px; }
  .flow-step:last-child .flow-step__art svg { height: 100%; }
  .flow-step:last-child .flow-step__ghost { font-size: 54px; }
  .flow-step:last-child .flow-step__body {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 10px; padding: 14px; flex-wrap: nowrap;
  }
  .flow-step:last-child .flow-step__title span { display: block; margin: 5px 0 0; }
  .flow-step:last-child .flow-step__meta { margin-top: auto; margin-left: 0; }
  .flow-steps { gap: 0; position: relative; padding-left: 18px; }
  .flow-steps::before {
    content: ""; position: absolute; left: 6px; top: 14px; bottom: 26px;
    width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--c-flame), oklch(75% 0.11 140 / 0.55));
  }
  /* stacked timeline: graphic left, label right */
  .flow-step { flex-direction: row; align-items: stretch; margin-bottom: 12px; overflow: visible; }
  .flow-step__art { border-radius: var(--r-md) 0 0 var(--r-md); }
  .flow-step::before {
    content: ""; position: absolute; left: -17px; top: 42px; z-index: 2;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--c-white); border: 2px solid var(--c-flame);
  }
  .flow-step--accent::before { background: var(--c-butter); border-color: var(--c-butter); }
  .flow-step__art {
    flex: 0 0 116px; width: 116px; height: auto; min-height: 96px;
    border-bottom: none; border-right: 1px solid var(--c-ash);
  }
  .flow-step--accent .flow-step__art { border-right-color: rgba(255,255,255,0.16); }
  .flow-step__ghost { display: none; }
  .flow-step__body { align-items: flex-start; text-align: left; padding: 14px 14px; gap: 10px; }
  .flow-step__title { font-size: 15px; }
  .flow-bottom__col { padding: 14px; }
}

/* ---------------- Sections ---------------- */
.section { padding: 72px 0 0; }
.hx + .section { padding-top: 56px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-head h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--t-heading-lg); line-height: 1.2;
  letter-spacing: -0.02em;
}
.section-head .count { color: var(--c-smoke); font-size: var(--t-caption); white-space: nowrap; padding-bottom: 4px; }
/* "Shop by category" — display-grade head: butter-dashed eyebrow over big type */
.sh-grand { margin-bottom: 40px; }
.sh-note {
  font-size: var(--t-caption); color: var(--c-smoke);
  text-align: end; padding-bottom: 5px; max-width: 34ch; text-wrap: balance;
}
.sh-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-smoke);
}
.sh-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--c-butter); }
.sh-grand h2 {
  margin-top: 10px;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 550;
  letter-spacing: -0.025em; line-height: 1.05;
}

/* ---------------- Fluid auto-fill grid — every tile/product grid ----------------
   Fills the full 50px-margin container; column count derives from --tile-min. */
.flow-grid {
  --tile-min: 282px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr));
  gap: clamp(20px, 2vw, 30px) clamp(14px, 1.6vw, 24px);
}
/* ---------------- Category hyperframe (home) ----------------
   One continuous frame, sixteen departments, no gaps: the 16 covers tile a
   4 x 4 wall joined by 1px forest seams, so the section reads as a single
   commissioned photo wall instead of 16 floating cards. Resting state is a
   brand duotone (grayscale photo under a neutral scrim) with a horizontal
   department rail; hovering or tab-focusing a panel opens its row DOWNWARDS —
   the accordion runs on the vertical axis, the four columns never move — and
   restores full colour plus the department plate (name, top families, stocked
   count). Panels are ranked by real stocked count, so 01 sits top-left and
   pending ranges sit at the tail. */
.cat-hf {
  --hf-h: clamp(560px, 53vw, 748px);   /* height of the whole 4 x 4 wall */
  --hf-rest: 1;        /* row grow at rest */
  --hf-dim: 0.85;      /* row grow while another row is open */
  --hf-open: 1.9;      /* row grow while open — open row = 1.71x its resting height */
  /* the open panel has to grow on BOTH axes by the same 1.71x or its cover crop
     distorts; 2.24 : 1 across four columns is exactly that factor */
  --hf-dim-w: 1;       /* panel grow inside the open row */
  --hf-open-w: 2.24;   /* panel grow while open */
  --hf-ease: cubic-bezier(.22, .61, .36, 1);
  display: flex;
  flex-direction: column;
  gap: 1px;
  height: var(--hf-h);
  background: var(--c-forest);
  border: 1px solid var(--c-forest);
  border-radius: var(--r-md);
  overflow: hidden;
}
/* the accordion lives on the rows now: a row grows in height, its siblings give
   the space back, and the four columns keep their exact quarter widths */
.hf-row {
  display: flex; gap: 1px;
  flex: var(--hf-rest) 1 0;
  min-height: 0;
  transition: flex-grow .46s var(--hf-ease);
}
.cat-hf:hover .hf-row, .cat-hf:focus-within .hf-row { flex-grow: var(--hf-dim); }
/* must match the dim rule's specificity (a descendant selector with :hover is
   0,3,0) or the open row never wins */
.cat-hf .hf-row:hover, .cat-hf .hf-row:focus-within { flex-grow: var(--hf-open); }

.hf-panel {
  position: relative;
  flex: var(--hf-dim-w) 1 0;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  /* the rail label sizes off the panel's own width, so it never clips when the
     siblings of an open panel narrow */
  container-type: inline-size;
  background: var(--c-forest);
  color: var(--c-white);
  transition: flex-grow .46s var(--hf-ease);
}
/* inside the open row the hovered panel widens too — same specificity as the
   sibling rule (0,4,0) and declared after it, so the open panel wins */
.cat-hf .hf-row:hover .hf-panel, .cat-hf .hf-row:focus-within .hf-panel { flex-grow: var(--hf-dim-w); }
.cat-hf .hf-row .hf-panel:hover, .cat-hf .hf-row .hf-panel:focus-visible { flex-grow: var(--hf-open-w); }
.hf-panel:focus-visible { outline: 2px solid var(--c-butter); outline-offset: -3px; }

/* Photo: cover-cropped, slightly over-scaled so the crop never shows an edge */
.hf-photo {
  position: absolute; inset: 0; z-index: 0;
  /* neutral bed: translucent (pending) photos must composite over grey, not
     over the frame's forest fill, or they read as a green wash */
  background: oklch(16% 0 0);
}
.hf-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hf-pos, 50% 50%);
  transform: scale(1.06);
  filter: grayscale(1) contrast(1.14) brightness(1.06);
  transition: filter .5s var(--hf-ease), transform .6s var(--hf-ease);
}
.hf-photo.ph {
  display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  background: oklch(20% 0 0);
}
.hf-photo.ph .ph-txt { color: oklch(93% .02 160 / .7); }

/* Neutral scrim: no colour cast at all — the resting panel is a true black &
   white plate, and the scrim only carries legibility. It retreats to a
   bottom-anchored gradient once the panel opens and the photo turns colour. */
.hf-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, oklch(0% 0 0 / .06) 0%, oklch(0% 0 0 / .38) 45%, oklch(0% 0 0 / .86) 100%),
    linear-gradient(0deg, oklch(0% 0 0 / .20), oklch(0% 0 0 / .20));
  transition: background .5s var(--hf-ease);
}

/* Rank numeral — always visible, deliberately neutral: the butter accent is
   reserved for the single open panel (rule + go button), never 16 at once. */
.hf-idx {
  position: absolute; z-index: 3; top: 16px; inset-inline-start: 16px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em;
  color: oklch(95% .01 160 / .55);
  font-variant-numeric: tabular-nums;
  transition: color .3s var(--hf-ease);
}
.hf-panel:hover .hf-idx, .hf-panel:focus-visible .hf-idx { color: var(--c-butter); }

/* Resting rail: the department name as a vertical spine, reading bottom-to-top.
   Set uppercase and tracked out so it reads as a label on the plate edge rather
   than a squeezed headline. Neutral on purpose — butter stays reserved for the
   single open panel. */
.hf-short {
  position: absolute; z-index: 3;
  inset-inline-start: 20px; inset-inline-end: 20px; bottom: 18px;
  display: flex; align-items: center; gap: clamp(7px, 3cqw, 12px);
  /* the longest department (ELECTROMECHANICAL) is one unbreakable word, so the
     rail scales off the panel's own width instead of clipping — this also keeps
     the three narrowed siblings of an open panel legible */
  font-size: clamp(11.9px, 6cqw, 20px); font-weight: 500; line-height: 1.15;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(97% 0 0 / .9);
  text-shadow: 0 1px 14px oklch(0% 0 0 / .55);
  white-space: normal; overflow: hidden;
  transition: opacity .26s var(--hf-ease), transform .34s var(--hf-ease);
}

/* Department plate: hidden at rest, slides up when the panel opens */
.hf-open {
  position: absolute; z-index: 3;
  inset: auto 0 0 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 0 22px 22px;
  opacity: 0; transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s var(--hf-ease), transform .38s var(--hf-ease);
}
.hf-rule { width: 40px; height: 3px; background: var(--c-butter); margin-bottom: 4px; }
.hf-title {
  font-size: var(--t-heading-sm); font-weight: 500; line-height: 1.2;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.hf-fams {
  font-size: var(--t-caption); line-height: 1.4;
  color: oklch(93% .02 160 / .78);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hf-foot { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hf-count { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.hf-count b { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.hf-count > span {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(93% .02 160 / .72);
}
.hf-soon { font-size: var(--t-caption); color: oklch(93% .02 160 / .72); }
.hf-go {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-pill);
  border: 1px solid oklch(95% .01 160 / .45);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.hf-go svg { width: 15px; height: 15px; }

/* Open state — the photo returns to its untouched original colour */
.hf-panel:hover .hf-photo img,
.hf-panel:focus-visible .hf-photo img { filter: none; transform: scale(1); }
/* the open panel is now ~1.7x taller, so the reading gradient has to bite lower
   down or the department plate lands on the bright middle of the photo */
.hf-panel:hover .hf-veil,
.hf-panel:focus-visible .hf-veil {
  background:
    linear-gradient(180deg,
      oklch(0% 0 0 / 0) 0%,
      oklch(0% 0 0 / .16) 30%,
      oklch(0% 0 0 / .70) 62%,
      oklch(0% 0 0 / .96) 90%),
    linear-gradient(0deg, oklch(0% 0 0 / 0), oklch(0% 0 0 / 0));
}
.hf-panel:hover .hf-short,
.hf-panel:focus-visible .hf-short { opacity: 0; transform: translateY(10px); }
.hf-panel:hover .hf-open,
.hf-panel:focus-visible .hf-open { opacity: 1; transform: translateY(0); transition-delay: .1s; }
.hf-panel:hover .hf-go,
.hf-panel:focus-visible .hf-go { background: var(--c-butter); border-color: var(--c-butter); color: var(--c-forest); }

/* Pending departments stay honest: no colour reward, plate still opens */
.hf-panel--pending .hf-photo img { opacity: .55; }
.hf-panel--pending:hover .hf-photo img,
.hf-panel--pending:focus-visible .hf-photo img { filter: none; opacity: 1; }
.hf-panel--pending .hf-rule { background: oklch(95% .01 160 / .35); }
.hf-panel--pending:hover .hf-go,
.hf-panel--pending:focus-visible .hf-go { background: none; border-color: oklch(95% .01 160 / .45); color: var(--c-white); }

@media (prefers-reduced-motion: reduce) {
  .hf-row, .hf-panel, .hf-photo img, .hf-veil, .hf-short, .hf-open, .hf-go { transition: none; }
}

/* ---------------- Inverted value-prop band ---------------- */
.band {
  background: var(--c-forest);
  color: var(--c-white);
  margin-top: 72px;
}
.band-inner {
  width: 100%;
  padding: 64px var(--page-pad);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.band h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 38px; line-height: 1.27; color: var(--c-white);
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.band p { font-size: var(--t-sub); line-height: 1.44; margin-top: 16px; max-width: 52ch; color: rgb(255 255 255 / 0.85); }
.band-link {
  font-size: var(--t-sub); color: var(--c-white); white-space: nowrap;
  border-bottom: 2px solid var(--c-butter);
  padding-bottom: 4px;
}
.band-link:hover { border-bottom-color: var(--c-white); }

/* ---------------- Product cards ---------------- */
.p-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.p-card .p-img {
  position: relative; aspect-ratio: 5 / 3;
  overflow: hidden;
  background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.p-card .p-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .18s ease; }
.p-card:hover { border-color: var(--c-ash); transform: translateY(-3px); box-shadow: var(--lift); }
.p-card:hover .p-img img { transform: scale(1.05); }
/* Garden & Event Umbrellas: product visuals rendered 44% larger (1.2 × 1.2) */
#sub-semsiye .p-card .p-img img { transform: scale(1.44); }
#sub-semsiye .p-card:hover .p-img img { transform: scale(1.512); }
/* Plastics, Polymers & Geosynthetics: product visuals rendered 40% larger */
body.page-category[data-cat="plastics-polymers"] .p-card .p-img img { transform: scale(1.4); }
body.page-category[data-cat="plastics-polymers"] .p-card:hover .p-img img { transform: scale(1.47); }
/* Construction Chemicals: product visuals rendered 25% larger */
body.page-category[data-cat="construction-chemicals"] .p-card .p-img img { transform: scale(1.25); }
body.page-category[data-cat="construction-chemicals"] .p-card:hover .p-img img { transform: scale(1.3125); }
/* Metal Imports (pt.1): product visuals rendered 40% larger */
[id^="sub-mtl-"] .p-card .p-img img { transform: scale(1.4); }
[id^="sub-mtl-"] .p-card:hover .p-img img { transform: scale(1.47); }
/* Thermoset tableware supplier shots already fill their frame — the category-wide
   1.4× plastics zoom cropped their edges inside the card. Show them at true size. */
body.page-category[data-cat="plastics-polymers"] .p-card[data-od-id^="p-card-kulsan-"] .p-img img { transform: none; }
body.page-category[data-cat="plastics-polymers"] .p-card[data-od-id^="p-card-kulsan-"]:hover .p-img img { transform: scale(1.05); }
/* Garden & Furniture: Furniture Hardware + Design Collections (knobs, pulls,
   stoppers, coat hooks, Harmonique/Nowo/Solo families) are square supplier
   shots — clean cutouts and installed lifestyle photos, several with the
   hardware sitting small in a much larger cabinet scene — so a 5:3 frame
   letterboxed them small in the middle. A 1:1 image area plus a stronger
   zoom lets the hardware itself read clearly on the card. Garden & Event
   Umbrellas (semsiye) already has its own scale below and keeps the 5:3
   frame. */
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor^="sh-"] .p-card .p-img { aspect-ratio: 1 / 1; }
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor^="sh-"] .p-card .p-img img { transform: scale(1.4); }
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor^="sh-"] .p-card:hover .p-img img { transform: scale(1.47); }
/* Furniture Hardware specifically (Knobs, Drawer Pulls, Stoppers, Coat Hooks)
   pushed further per follow-up request — overrides the 1.4 above for just
   these four leaves. */
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-kulp"] .p-card .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-cekme-kolu"] .p-card .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-stopper"] .p-card .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-askilik"] .p-card .p-img img { transform: scale(1.6); }
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-kulp"] .p-card:hover .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-cekme-kolu"] .p-card:hover .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-stopper"] .p-card:hover .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-askilik"] .p-card:hover .p-img img { transform: scale(1.68); }
/* Design Collections (Harmonique/Nowo/Solo families): several of these are
   lifestyle shots where the knob is a small detail against a full cabinet
   scene, so 1.4 still read as tiny. Push well past Furniture Hardware's 1.6 —
   the knob is centered in every sample checked, so the extra crop into the
   surrounding cabinet is the point, not a loss. */
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-harmonique-1-ailesi"] .p-card .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-harmonique-2-ailesi"] .p-card .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-nowo-ailesi"] .p-card .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-solo-ailesi"] .p-card .p-img img { transform: scale(2); }
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-harmonique-1-ailesi"] .p-card:hover .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-harmonique-2-ailesi"] .p-card:hover .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-nowo-ailesi"] .p-card:hover .p-img img,
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="sh-solo-ailesi"] .p-card:hover .p-img img { transform: scale(2.1); }
/* Furniture & Fixtures (yeni-landscape-furniture): AI studio shots from the same
   yeni-upload batch as Electromechanical/Cement & Concrete — same generous white
   margin around the subject, and this leaf was missed when those got their zoom
   fix. Reuse the same 1.35 ratio. */
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="yeni-landscape-furniture"] .p-card .p-img img { transform: scale(1.35); }
body.page-category[data-cat="landscape-furniture"] .sub-section[data-anchor="yeni-landscape-furniture"] .p-card:hover .p-img img { transform: scale(1.4175); }
/* Real reason the fixes above never showed: every category page opens on the
   "All" tab by default, which renders a flat .cat-stream grid with no
   .sub-section wrapper at all — goSub('all') sets every .sub-section to
   display:none and only shows .cat-stream. Every rule above is scoped to
   .sub-section[data-anchor=...]/#sub-semsiye, so none of them ever applied
   on first load; they only kicked in once a visitor clicked a specific
   subnav chip. These id-prefix rules key off data-od-id="p-card-<product
   id>" (set directly on the card itself in pCardHtml, independent of which
   grid it renders into), so they also apply inside .cat-stream. The
   sub-section rules above have higher specificity and still take over with
   their finer per-leaf values once a chip is actually selected. */
body.page-category[data-cat="landscape-furniture"] .p-card[data-od-id^="p-card-sh-"] .p-img img { transform: scale(1.6); }
body.page-category[data-cat="landscape-furniture"] .p-card[data-od-id^="p-card-sh-"]:hover .p-img img { transform: scale(1.68); }
body.page-category[data-cat="landscape-furniture"] .p-card[data-od-id^="p-card-semsiye-"] .p-img img { transform: scale(1.44); }
body.page-category[data-cat="landscape-furniture"] .p-card[data-od-id^="p-card-semsiye-"]:hover .p-img img { transform: scale(1.512); }
body.page-category[data-cat="landscape-furniture"] .p-card[data-od-id*="20260823"] .p-img img { transform: scale(1.35); }
body.page-category[data-cat="landscape-furniture"] .p-card[data-od-id*="20260823"]:hover .p-img img { transform: scale(1.4175); }
/* Wood & Forestry: supplier shots are square studio photos with a wide white
   margin, so a 5:3 frame letterboxed the piece small. A 1:1 image area plus a
   light zoom trims the dead margin and lets the timber fill the card. */
body.page-category[data-cat="wood-forestry"] .p-card .p-img { aspect-ratio: 1 / 1; padding: 12px; }
body.page-category[data-cat="wood-forestry"] .p-card .p-img img { transform: scale(1.12); }
body.page-category[data-cat="wood-forestry"] .p-card:hover .p-img img { transform: scale(1.176); }
/* Prefab, Panel & Modular Structures: square studio shots of wide, low
   structures (cabins, carports, pergolas) sit in a tall dead band above and
   below the subject, so the 5:3 frame renders them small and pillarboxed.
   Zoom in to let the structure fill the card. */
body.page-category[data-cat="prefab-modular"] .p-card .p-img img { transform: scale(1.5); }
body.page-category[data-cat="prefab-modular"] .p-card:hover .p-img img { transform: scale(1.575); }
/* Electromechanical: the AI studio shots (pumps, boilers, chillers, cable
   trays...) sit small on a padded white square, so scale them up. ARG Mekanik's
   real-world site photos already fill the frame edge-to-edge — exclude those. */
body.page-category[data-cat="electromechanical"] .p-card .p-img img { transform: scale(1.35); }
body.page-category[data-cat="electromechanical"] .p-card:hover .p-img img { transform: scale(1.4175); }
body.page-category[data-cat="electromechanical"] .p-card[data-od-id^="p-card-arg-"] .p-img img { transform: none; }
body.page-category[data-cat="electromechanical"] .p-card[data-od-id^="p-card-arg-"]:hover .p-img img { transform: scale(1.05); }
/* Cement, Concrete & Aggregates: AI studio shots (blocks, pavers, manhole
   covers, drainage pipes...) sit small on a padded white square — same fix. */
body.page-category[data-cat="cement-concrete"] .p-card .p-img img { transform: scale(1.35); }
body.page-category[data-cat="cement-concrete"] .p-card:hover .p-img img { transform: scale(1.4175); }
/* Natural Resources, Mining & Raw Materials: thin marble/travertine/stone
   slabs sit low in the padded square (a lot of empty air above and below),
   so the usual moderate zoom isn't enough — push it further. */
body.page-category[data-cat="mining-raw-materials"] .p-card .p-img img { transform: scale(1.6); }
body.page-category[data-cat="mining-raw-materials"] .p-card:hover .p-img img { transform: scale(1.68); }
/* Thermal, Sound & Water Insulation: sandwich/EPS/rock-wool/acoustic panels
   are thin flat slabs shot diagonally on a padded square — even more empty
   air above and below than the mining slabs, so push the zoom further still. */
body.page-category[data-cat="insulation"] .p-card .p-img img { transform: scale(1.9); }
body.page-category[data-cat="insulation"] .p-card:hover .p-img img { transform: scale(1.995); }
/* Floor & Wall Coverings: this category is different from the rest — it's
   almost entirely continuous material swatches (Duratiles wood/concrete-look
   porcelain planks, Unmar Neboard panel textures), shot as tall full-bleed
   chips or angled studio panels, not isolated products on white. A zoom
   would either do nothing (already full-bleed) or crop a plank's ends for no
   gain. object-fit: cover fills the card edge-to-edge for every image here —
   correct for a material swatch, where cropping the continuous texture loses
   nothing the way cropping a product silhouette would. */
body.page-category[data-cat="floor-wall-coverings"] .p-card .p-img img { object-fit: cover; }
/* Metal, Steel & Iron — Flat Rolled Steel, Profiles & Pipes, Other Steel
   Products (anchors metal-steel-iron-3-*, -4-* and -5-0 by current subnav
   order): supplier product shots already fill most of the frame, so only a
   light zoom is needed — anything stronger would crop the fuller ones
   (angle-bracket rows, box sections) that already reach near the edges. */
body.page-category[data-cat="metal-steel-iron"] .sub-section[data-anchor^="metal-steel-iron-3-"] .p-card .p-img img,
body.page-category[data-cat="metal-steel-iron"] .sub-section[data-anchor^="metal-steel-iron-4-"] .p-card .p-img img,
body.page-category[data-cat="metal-steel-iron"] .sub-section[data-anchor="metal-steel-iron-5-0"] .p-card .p-img img { transform: scale(1.2); }
body.page-category[data-cat="metal-steel-iron"] .sub-section[data-anchor^="metal-steel-iron-3-"] .p-card:hover .p-img img,
body.page-category[data-cat="metal-steel-iron"] .sub-section[data-anchor^="metal-steel-iron-4-"] .p-card:hover .p-img img,
body.page-category[data-cat="metal-steel-iron"] .sub-section[data-anchor="metal-steel-iron-5-0"] .p-card:hover .p-img img { transform: scale(1.26); }
/* Doors, Windows, Glass & Facade: Fornax/Besel hardware photos, System Handle
   door handle lifestyle shots and the AI studio (accordion gates, composite
   panels, facade profiles) all carry moderate white padding — the same
   profile as Electromechanical/Cement & Concrete, so reuse that ratio. */
body.page-category[data-cat="doors-windows-facade"] .p-card .p-img img { transform: scale(1.35); }
body.page-category[data-cat="doors-windows-facade"] .p-card:hover .p-img img { transform: scale(1.4175); }
@media (prefers-reduced-motion: reduce) {
  .p-card .p-img img { transition: none; }
}
.p-card .p-body {
  border-top: 1px solid var(--c-ash);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.p-card .p-title { font-size: var(--t-body); line-height: 1.35; color: var(--c-ink); }
.p-card:hover .p-title { text-decoration: underline; text-underline-offset: 3px; }
.p-card .p-meta { font-size: var(--t-caption); color: var(--c-smoke); }

.p-img.ph, .ph { background: var(--c-white); }
.ph .ph-txt, .p-img.ph .ph-txt { color: var(--c-smoke); font-size: 13px; text-align: center; padding: 12px; }

/* ---------------- Chips / subnav — 40px pills ---------------- */
.chips-wrap { position: relative; margin-bottom: 48px; }
.chips { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  border: 1px solid var(--c-charcoal); border-radius: var(--r-md);
  padding: 10px 23px;
  font-size: var(--t-caption); letter-spacing: 0.009em;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-white); color: var(--c-ink);
}
.chip .n { color: var(--c-smoke); font-size: 13px; }
.chip { transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.chip:hover { border-color: var(--c-ink); background: var(--c-cream); }
.chip.active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.chip.active .n { color: rgb(255 255 255 / 0.7); }

/* Collapsed subnav — one full row + half of the second row, blurred tail, arrow toggle */
.chips-wrap.has-more .chips {
  overflow: hidden;
  max-height: var(--more-h, 72px);
  transition: max-height .4s ease, padding-bottom .4s ease;
}
.chips-wrap.has-more.expanded .chips {
  max-height: calc(var(--full-h, 999px) + 52px);
  padding-bottom: 52px;
}
.chips-wrap.has-more .chips::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--row-h, 40px) * 0.85 + 10px);
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.9) 88%);
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
  mask-image: linear-gradient(to bottom, transparent, #000 40%);
  opacity: 1; transition: opacity .3s ease;
}
.chips-wrap.has-more.expanded .chips::after { opacity: 0; }
.chips-more {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  z-index: 3;
  width: 38px; height: 38px; border-radius: var(--r-md);
  border: 1px solid var(--c-charcoal); background: var(--c-white); color: var(--c-ink);
  outline: 3px solid var(--c-cream);
  display: none; align-items: center; justify-content: center;
}
.chips-more svg { width: 16px; height: 16px; transition: transform .35s ease; }
.chips-wrap.has-more .chips-more { display: flex; }
.chips-wrap.expanded .chips-more svg { transform: rotate(180deg); }
.chips-more:hover { border-color: var(--c-ink); background: var(--c-cream); }
@media (prefers-reduced-motion: reduce) {
  .chips-wrap.has-more .chips, .chips-more svg, .chips-wrap.has-more .chips::after { transition: none; }
}

.page-category .chips-wrap {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--c-cream);
  padding: 10px 0 0; margin-bottom: 10px;
  border-bottom: 1px solid var(--c-ash);
}
/* ---------------- Category page ---------------- */
.cat-head { padding: 12px 0 0; }
.cat-head .crumbs { font-size: 12px; margin-bottom: 4px; }
.cat-bar { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.crumbs { font-size: 13px; color: var(--c-smoke); display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { opacity: 0.5; }
.cat-title {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(20px, 2vw, 25px); line-height: 1.25;
}
.cat-title::after {
  content: ""; display: block;
  width: 28px; height: 2px; background: var(--c-butter);
  margin-top: 5px;
}
.cat-desc { color: var(--c-smoke); font-size: 13px; }

/* Grouped categories follow the same rhythm as flat ones (janitorial baseline):
   22px serif heads, sub-head margins — no oversized group headings */
.group-block { padding-top: 24px; }
.group-block > h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--t-heading-sm); line-height: 1.45;
  margin-bottom: 4px;
}
.sub-section { padding-top: 4px; }
.sub-head {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--t-heading-sm); line-height: 1.45; color: var(--c-ink);
  margin: 12px 0 20px; display: flex; align-items: baseline; gap: 12px;
}
.sub-head .n { font-family: var(--font-sans); color: var(--c-smoke); font-size: var(--t-caption); }

/* ---------------- Search results ---------------- */
.search-head { padding: 32px 0 8px; margin-bottom: 32px; }
.search-head h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 38px); line-height: 1.27;
  letter-spacing: -0.02em;
}
.search-head .n { color: var(--c-smoke); margin-top: 10px; font-size: var(--t-caption); }

/* ---------------- Product detail ---------------- */
/* Aşamalı kart akışı: henüz kart basılmamış bölüm ve grup başlıkları
   görünmez — sayfa açılışta üst üste boş başlıklarla dolmasın. */
.sub-section.is-pending, .group-block.is-pending { display: none; }
/* Kategoriye girişteki karışık "Tümü" akışı — subnav başlıkları olmadan,
   kategorinin bütün ürünleri tek grid'de. Bir subnav çipi seçilince JS
   bunu display:none yapar ve sıralı bölümleri gösterir. */
.cat-stream { padding-top: 4px; }
#gridSentinel { height: 1px; }

/* Geniş ekranda kolonlar serbest bırakılmaz: görsel kolonu clamp ile,
   bilgi kolonu okunabilir ölçüyle sınırlanır — 1920'de kare fotoğrafın
   ekranı doldurmasını engeller. */
.pdp {
  display: grid;
  /* solda görsel · ortada künye + spec · sağda paketleme/koşullar/iletişim */
  grid-template-columns:
    clamp(230px, 20%, 400px)
    minmax(0, 1fr)
    clamp(250px, 25%, 420px);
  gap: clamp(20px, 2vw, 44px);
  padding: 32px 0 0; align-items: stretch;
}
/* Yan kolonlar satırı doldurur ama viewport'u aşmaz: 180+ satırlık spec
   tablosu olan ürünlerde satır 8000px'e çıkabiliyor — orada kolonlar
   ekran boyunda kalıp sticky olarak kaydırmayı takip eder. */
.pdp-media, .pdp-aside {
  max-height: min(100%, calc(100vh - var(--header-h) - 60px));
  position: sticky; top: calc(var(--header-h) + 20px);
}
.pdp-media { display: flex; flex-direction: column; }
.pdp-media .frame {
  /* Üç kolon aynı satırda bittiği için görsel çerçevesi kolonu doldurur:
     alt çizgisi "Request a quote" butonunun alt çizgisiyle çakışır. */
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 1px solid var(--c-ash); border-radius: var(--r-md);
  overflow: hidden; background: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 1.6vw, 24px);
}
.pdp-media .frame img { width: 100%; height: 100%; object-fit: contain; }
.pdp-info h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--t-heading-lg); line-height: 1.27;
  letter-spacing: -0.02em;
}
.pdp-info h1::after {
  content: ""; display: block;
  width: 48px; height: 3px; background: var(--c-butter);
  margin-top: 12px;
}
.pdp-info { min-width: 0; display: flex; flex-direction: column; }
.pdp-info .lead { color: var(--c-smoke); margin-top: 14px; max-width: 52ch; }
.pdp-tags { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.tag {
  border: 1px solid var(--c-ash); border-radius: var(--r-pill);
  padding: 6px 16px; font-size: 13px; color: var(--c-charcoal);
  background: var(--c-white);
}
/* Plastics size-variant picker */
.pdp-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pdp-size {
  border: 1px solid var(--c-ash); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 13px; color: var(--c-charcoal);
  background: var(--c-white); cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.pdp-size:hover { border-color: var(--c-ink); background: var(--c-cream); }
.pdp-size.is-on { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-white); }
.pdp-size:focus-visible { outline: 2px solid var(--c-forest); outline-offset: 2px; }
.pdp-dim {
  margin-top: 10px; font-size: 13px; color: var(--c-smoke);
  font-variant-numeric: tabular-nums;
}
.pdp-dim:empty { display: none; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: var(--t-caption); }
.spec-table th {
  text-align: left; font-weight: 400; font-size: 13px;
  letter-spacing: 0.011em; text-transform: uppercase; color: var(--c-smoke);
  padding: 8px 12px; border-bottom: 1px solid var(--c-ink);
}
.spec-table td { padding: 10px 12px; border-bottom: 1px solid var(--c-ash); color: var(--c-charcoal); }
.spec-table td.c { color: var(--c-ink); }
/* Key–value spec rows (fetched product specs): th is a row label, not a column head */
.spec-table.kv th { border-bottom: 1px solid var(--c-ash); width: 38%; vertical-align: top; }
.spec-table.kv tr:last-child th, .spec-table.kv tr:last-child td { border-bottom: 1px solid var(--c-ink); }

.pdp-feat { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--c-charcoal); max-width: 60ch; }

/* margin-top:auto — CTA satırı bilgi kolonunun dibine yaslanır; böylece
   satır yüksekliğini hangi kolon belirlerse belirlesin üç kolon da aynı
   alt çizgide biter. padding-top spec tablosuyla arasındaki asgari boşluk. */
.pdp-cta { display: flex; align-items: center; gap: 20px; margin-top: auto; padding-top: 32px; flex-wrap: wrap; }
.pdp-cta .btn { font-size: var(--t-body); padding: 14px 28px; }

.acc { border-top: 1px solid var(--c-ink); margin-top: 36px; }
.acc-row { border-bottom: 1px solid var(--c-ash); }
.acc-row > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; font-size: var(--t-body); color: var(--c-ink);
}
.acc-row .plus { font-size: 20px; color: var(--c-smoke); transition: transform .2s ease; }
.acc-row.open .plus { transform: rotate(45deg); }
.acc-body { display: none; padding: 0 0 20px; font-size: 15px; color: var(--c-charcoal); max-width: 60ch; }
.acc-row.open .acc-body { display: block; }
@media (prefers-reduced-motion: reduce) { .acc-row .plus { transition: none; } }

/* ---------------- Full-bleed section field ----------------
   Shop-by-category runs edge to edge on a plain white surface: the hyperframe
   itself carries all the colour, so the section behind it stays blank and the
   only structure is the pair of hairlines top and bottom. */
.field-section {
  position: relative;
  overflow: hidden;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 64px var(--page-pad);
  background: var(--c-white);
  border-top: 1px solid var(--c-ash);
  border-bottom: 1px solid var(--c-ash);
}
.field-section .sh-grand, .field-section .cat-hf, .field-section .cs { position: relative; z-index: 1; }
/* Bant zaten kendi dolgusunu veriyor — modülün kendi dış boşluğu eklenmesin. */
.field-section .cs { margin: 0; }
/* Art arda iki bant: alt çizgi + üst çizgi 2px'lik kalın bir hat oluşturmasın. */
.field-section + .field-section { border-top: 0; }

/* Scroll-reveal (depth): cards rise in softly on first entry.
   JS toggles .is-inview; reduced-motion and no-JS keep content visible. */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-inview { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Footer ---------------- */
.footer { margin-top: 88px; background: var(--c-forest); color: var(--c-white); }
/* Marka bloğu display:contents ile grid'e çözülür; böylece "Categories"
   başlığı "Company" ile aynı satır çizgisinden başlar — sabit offset yok */
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 560px) 1fr;
  grid-template-areas:
    "logo    ."
    "company cats"
    "map     cats"
    "mapcap  cats";
  column-gap: 88px; row-gap: 0;
  padding: 56px 0 36px; align-items: start;
}
.foot-brand { display: contents; }
.foot-brand > .brand { grid-area: logo; }
.foot-company { grid-area: company; }
.foot-map { grid-area: map; }
.foot-map__cap { grid-area: mapcap; }
.foot-grid > .foot-cols {
  grid-area: cats; margin-top: 22px; align-self: stretch;
  display: grid; align-content: space-between; gap: 40px;
}
.foot-brand .brand { margin-bottom: 0; }
.foot-company { margin-top: 22px; }
.foot-company h4 {
  font-size: 16px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.92); margin-bottom: 12px;
}
.foot-company p { font-size: 18.2px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.foot-hq { margin-top: 14px; }
.foot-hq__label {
  font-size: 12.7px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.11em; color: rgba(255,255,255,0.62); margin-bottom: 8px;
}
.foot-hq p { font-size: 18.2px; line-height: 1.6; color: rgba(255,255,255,0.85); }
.foot-map {
  margin-top: 18px;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  background: #0f1a14; height: 320px;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
}
.foot-map iframe {
  display: block; width: 100%; height: 100%; border: 0;
}
.foot-map__cap {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 11px; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.62);
}
.foot-map__cap svg { width: 11px; height: 11px; opacity: 0.8; }
.foot-map__cap a { color: rgba(255,255,255,0.75); text-decoration: underline; text-underline-offset: 3px; }
.foot-map__cap a:hover { color: var(--c-white); }
#footCats, #footPages { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 32px; }
#footCats a, #footPages a { padding: 5px 0; }
/* Full-width horizontal Trade desk banner */
.foot-trade {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 22px; margin: 0 0 32px;
  border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-md);
  background: rgba(255,255,255,0.07);
}
.foot-trade__main { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; min-width: 0; }
.foot-trade__title {
  font-size: 13px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.11em; color: rgba(255,255,255,0.7); white-space: nowrap;
}
.foot-trade__contacts { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot-trade__contacts a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--c-white); white-space: nowrap;
}
.foot-trade__contacts a svg { width: 14px; height: 14px; opacity: 0.85; flex-shrink: 0; }
.foot-trade__contacts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-trade__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.foot-trade__link {
  font-size: 14px; color: var(--c-white);
  border-bottom: 1px solid rgba(255,255,255,0.35); padding-bottom: 2px; white-space: nowrap;
}
.foot-trade__link:hover { border-bottom-color: var(--c-white); }
.foot-trade__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-white); color: var(--c-forest);
  font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--r-md); padding: 10px 16px; white-space: nowrap;
  transition: background-color .15s ease, transform .15s ease;
}
.foot-trade__btn:hover { background: var(--c-field); transform: translateY(-1px); }
.foot-trade__btn svg { width: 14px; height: 14px; }
.foot-trade__addr {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 14px; color: rgba(255,255,255,0.82); max-width: 100%;
}
.foot-trade__addr svg { width: 14px; height: 14px; opacity: 0.85; flex-shrink: 0; margin-top: 3px; }

/* "Let us call you" — footer callback modal */
.cbk {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.cbk[hidden] { display: none; }
body.cbk-open { overflow: hidden; }
.cbk__scrim {
  position: absolute; inset: 0;
  background: oklch(30% 0.06 160 / 0.55); backdrop-filter: blur(2px);
}
.cbk__panel {
  position: relative; width: 100%; max-width: 460px;
  background: var(--c-white); color: var(--c-charcoal);
  border: 1px solid var(--c-ash); border-radius: var(--r-md);
  box-shadow: var(--lift-lg);
  padding: 30px 30px 26px; max-height: calc(100vh - 48px); overflow-y: auto;
}
.cbk__close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--c-smoke);
}
.cbk__close:hover { background: var(--c-field); color: var(--c-ink); }
.cbk__close:focus-visible { outline: 2px solid var(--c-flame); outline-offset: 2px; }
.cbk__close svg { width: 18px; height: 18px; }
.cbk__eyebrow {
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--c-flame);
}
.cbk__title { margin-top: 8px; font-size: 24px; font-weight: 500; line-height: 1.2; color: var(--c-ink); }
.cbk__intro { margin-top: 8px; font-size: 14px; color: var(--c-smoke); }
.cbk__form { margin-top: 20px; display: grid; gap: 14px; }
.cbk__field { display: grid; gap: 6px; }
.cbk__field label { font-size: 13px; font-weight: 500; color: var(--c-ink); }
.cbk__field input, .cbk__field textarea {
  font: inherit; font-size: 15px; color: var(--c-charcoal);
  background: var(--c-field); border: 1px solid var(--c-ash);
  border-radius: var(--r-md); padding: 10px 12px; width: 100%;
}
.cbk__field textarea { resize: vertical; min-height: 74px; }
.cbk__field input:focus-visible, .cbk__field textarea:focus-visible {
  outline: 2px solid var(--c-flame); outline-offset: 1px;
  border-color: var(--c-flame); background: var(--c-white);
}
.cbk__err { font-size: 13px; color: oklch(55% 0.17 25); }
.cbk__actions { display: flex; gap: 10px; margin-top: 4px; }
.cbk__submit {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c-flame); color: var(--c-white);
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  border-radius: var(--r-md); padding: 11px 16px;
  transition: background-color .15s ease;
}
.cbk__submit:hover { background: var(--c-ember); }
.cbk__submit:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.cbk__cancel {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 16px; font-size: 15px; color: var(--c-smoke);
  border: 1px solid var(--c-ash); border-radius: var(--r-md);
}
.cbk__cancel:hover { background: var(--c-field); color: var(--c-ink); }
.cbk__cancel:focus-visible { outline: 2px solid var(--c-flame); outline-offset: 2px; }
.cbk__done-icon {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-field); color: var(--c-flame);
}
.cbk__done-icon svg { width: 22px; height: 22px; }
@media (max-width: 560px) {
  .cbk { padding: 0; align-items: stretch; }
  .cbk__panel { max-width: none; border-radius: 0; max-height: 100vh; }
}

.foot-brand .brand { gap: 12px; }
.foot-brand .brand .brand-mark { width: 60px; height: 60px; }
.foot-brand .brand .brand-name { color: var(--c-white); font-size: 32px; }
.foot-brand .brand .brand-name small { font-size: 11px; margin-top: 8px; }
.foot-brand .brand .brand-name i { color: rgba(255,255,255,0.7); }
.foot-brand .brand .brand-name small { color: rgba(255,255,255,0.8); }
.foot-brand .brand .brand-mark svg rect { fill: var(--c-white); }
.foot-brand .brand .brand-mark svg path { stroke: var(--c-flame); }
.foot-brand .brand .brand-mark svg rect + rect, .foot-brand .brand .brand-mark svg rect ~ rect { stroke: var(--c-flame); }
.foot-brand .muted { color: rgba(255,255,255,0.85); }
.foot-col h4 {
  font-size: 16px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.92); margin-bottom: 16px;
}
.foot-col a { display: block; font-size: 18.2px; padding: 4px 0; color: var(--c-white); }
.foot-col a:hover { color: rgba(255,255,255,0.9); text-decoration: underline; text-underline-offset: 3px; }
.foot-copy { border-top: 1px solid rgba(255,255,255,0.2); padding: 20px 0; font-size: 13px; color: rgba(255,255,255,0.7); }
.foot-copy .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-left: 0; padding-right: 0; }

/* Footer — narrow: trade banner wraps */
@media (max-width: 900px) {
  .foot-trade { flex-direction: column; align-items: flex-start; }
  .foot-trade__actions { width: 100%; justify-content: flex-start; }
}
@media (max-width: 560px) {
  #footCats, #footPages { grid-template-columns: 1fr; }
  .foot-trade { padding: 16px; }
}
/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .nav-cats-row, .nav-actions .ghost-link { display: none; }
  .nav-top { min-height: 64px; padding: 10px 56px 10px 0; }
  .menu-btn { display: inline-flex; right: 0; }
  :root { --header-h: 64px; }
  .nav-actions { display: none; }
  .search { max-width: none; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) 1fr; column-gap: 48px; }
  /* Product page collapses at the same breakpoint as the nav — no sticky
     media or twin columns anywhere in the mobile range */
  /* Shelf wraps 3-up: the continuous counter line becomes per-item edges */
  .hero-shelf { flex-wrap: wrap; gap: 14px 10px; }
  .hero-shelf::before, .hero-shelf::after { display: none; }
  .shelf-item { flex: 1 1 30%; }
  .shelf-item .sh-img { height: 150px; border-bottom: 1px solid var(--c-ash); }
  .shelf-item .sh-cap { height: auto; padding-top: 8px; }
  .shelf-item .sh-cap i { display: none; }
  /* Ticker stacks: each stat becomes a ruled row */
  .hero-stats { flex-direction: column; }
  .hero-stats .hs { padding: 11px 0; }
  .hero-stats .hs + .hs { border-inline-start: 0; border-top: 1px solid var(--c-ash); padding-inline-start: 0; }
  /* Hyperframe -> static department grid. A horizontal hover accordion has no
     meaning on touch, so below the desktop breakpoint every panel becomes an
     always-open tile inside the same fluid auto-fill grid the catalogue uses;
     the 1px forest seams keep it reading as one frame. */
  .cat-hf {
    --hf-tile: 232px;
    display: grid;
    height: auto;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--hf-tile), 100%), 1fr));
    gap: 10px;
    /* The frame's seams and forest fill only work when the panels tile it
       exactly; a fluid column count leaves orphan cells, so the fallback drops
       the frame chrome and lets the panels stand as individual plates. */
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .hf-row { display: contents; }
  .hf-panel { flex: none; aspect-ratio: 4 / 3; border-radius: var(--r-md); }
  .cat-hf:hover .hf-row, .cat-hf:focus-within .hf-row,
  .cat-hf .hf-row:hover, .cat-hf .hf-row:focus-within,
  .cat-hf .hf-row:hover .hf-panel, .cat-hf .hf-row .hf-panel:hover,
  .cat-hf .hf-row .hf-panel:focus-visible { flex-grow: 0; }
  .sh-hint { display: none; }
  .hf-short { display: none; }
  .hf-open { opacity: 1; transform: none; padding: 0 16px 16px; gap: 6px; }
  .hf-title { font-size: var(--t-sub); }
  .hf-photo img { filter: none; transform: scale(1); }
  .hf-veil {
    background: linear-gradient(180deg, oklch(0% 0 0 / 0) 0%, oklch(0% 0 0 / .48) 28%, oklch(0% 0 0 / .95) 72%);
  }
  .hf-panel--pending .hf-photo img { filter: none; opacity: .72; }
}

@media (max-width: 720px) {
  :root { --page-pad: 16px; }
  .nav-top { gap: 12px; padding: 10px 48px 10px 0; }
  .brand { gap: 6px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 18px; }
  .brand-name small { font-size: 8.5px; letter-spacing: 0.24em; margin-top: 3px; }
  .brand-lock small { letter-spacing: 0.07em; }
  .search { height: 40px; padding: 0 16px; }
  .lang-btn { padding: 9px 11px; gap: 6px; }
  .lang-btn .lb-chev { display: none; }
  .hero { padding: 18px 0 36px; }
  .shelf-item .sh-img { height: 118px; }
  .shelf-item .sh-cap { font-size: 11px; }
  .hero-stats { margin-top: 24px; }
  .hero-stats .hs b { font-size: 20px; }
  .section { padding-top: 48px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .flow-grid { --tile-min: 180px; gap: 20px 12px; }
  /* Hyperframe on phones: two columns, plate trimmed to name + stocked count */
  .cat-hf { --hf-tile: 158px; }
  .hf-panel { aspect-ratio: 3 / 4; }
  .hf-idx { top: 12px; inset-inline-start: 12px; font-size: 10px; }
  .hf-open { padding: 0 13px 13px; gap: 5px; }
  .hf-rule { width: 28px; height: 2px; margin-bottom: 2px; }
  .hf-title { font-size: 15px; }
  .hf-fams { display: none; }
  .hf-foot { gap: 10px; margin-top: 2px; }
  .hf-count b { font-size: 17px; }
  .hf-go { width: 28px; height: 28px; }
  .hf-go svg { width: 13px; height: 13px; }
  .p-card .p-img { padding: 12px; }
  .band { margin-top: 48px; }
  .band-inner { flex-direction: column; align-items: flex-start; gap: 24px; padding: 48px var(--page-pad); }
  .band h2 { font-size: var(--t-heading); }
  .chips { gap: 8px; }
  .chip { padding: 8px 16px; }
  .pdp { gap: 28px; padding-top: 20px; }
  .pdp-media .frame { width: min(100%, 320px); padding: 16px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) 1fr; gap: 24px; column-gap: 32px; padding: 40px 0 48px; }
}

@media (max-width: 560px) {
  .foot-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "company" "map" "mapcap" "cats";
    gap: 0; column-gap: 0;
  }
  .foot-grid > .foot-cols { margin-top: 32px; gap: 32px; }
  .foot-map { height: 240px; }
  .foot-brand .brand .brand-mark { width: 48px; height: 48px; }
  .foot-brand .brand .brand-name { font-size: 26px; }
}

/* Mobile: scrollbars hidden everywhere — scrolling itself stays enabled */
@media (max-width: 1100px) {
  * { scrollbar-width: none; -ms-overflow-style: none; }
  *::-webkit-scrollbar { display: none; width: 0; height: 0; }
}

/* ======================== i18n: Arabic RTL ======================== */
[dir="rtl"] { direction: rtl; text-align: right; }
[dir="rtl"] .rule::before { margin-left: auto; margin-right: 0; }
[dir="rtl"] .crumbs .sep { margin: 0 8px 0 0; }
[dir="rtl"] .brand { flex-direction: row-reverse; }
[dir="rtl"] .nav-cat.active::after { right: auto; left: 0; }
[dir="rtl"] .hero-shelf::after { left: auto; right: 0; }
[dir="rtl"] .cc-arrow { transform: scaleX(-1); }
[dir="rtl"] .band-link svg { transform: scaleX(-1); }
[dir="rtl"] .pdp-cta .btn svg { transform: scaleX(-1); }
[dir="rtl"] .foot-grid { direction: rtl; }
[dir="rtl"] .mm-sub { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .chip { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .spec-table { direction: rtl; }
/* Hyperframe rail: Arabic is never set vertically, so the resting label lies
   flat across the bottom of the panel instead of running up its edge. */
[dir="rtl"] .hf-short {
  writing-mode: horizontal-tb; transform: none;
  inset-inline-end: 14px; bottom: 16px;
  max-height: none; font-size: 18.75px; line-height: 1.3;
  white-space: normal; text-overflow: clip;
}
[dir="rtl"] .hf-panel:hover .hf-short,
[dir="rtl"] .hf-panel:focus-visible .hf-short { transform: translateY(10px); }
[dir="rtl"] .hf-go svg { transform: scaleX(-1); }

/* ======================== i18n: Turkish font sizing ======================== */
:lang(tr) { font-size: 15px; }
:lang(tr) .hero h1 { font-size: clamp(34px, 4.6vw, 64px); }
:lang(tr) .cc-t { font-size: 14px; }
:lang(tr) .cat-title { font-size: clamp(24px, 3vw, 32px); }
:lang(tr) .pdp-info h1 { font-size: clamp(22px, 2.5vw, 30px); }
:lang(tr) .acc-row button { font-size: 14px; }

/* ======================== i18n: German font sizing ======================== */
:lang(de) { font-size: 15px; }
:lang(de) .hero h1 { font-size: clamp(34px, 4.6vw, 64px); }
:lang(de) .cc-t { font-size: 14px; }

/* ======================== i18n: French font sizing ======================== */
:lang(fr) { font-size: 15px; }
:lang(fr) .hero h1 { font-size: clamp(28px, 3.5vw, 44px); }

/* ======================== i18n: Russian font sizing ======================== */
:lang(ru) { font-size: 15px; }
:lang(ru) .hero h1 { font-size: clamp(28px, 3.5vw, 44px); }

/* Narrow phones: the dots carry the slider, the arrows step out */
@media (max-width: 560px) {
  .hx-arrows { display: none; }
  .hx-dot { width: 22px; }
}

/* ---------------- Static pages ----------------
   About / process / logistics / legal pages reached from the footer's Pages
   menu. Same rhythm as the category pages: 22px block headings, blocks no
   more than 40px apart, everything inside the 50px page margin. */
.pg-head { padding: 32px 0 0; }
.pg-head .sh-eyebrow { margin-bottom: 14px; }
.pg-head h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 38px); line-height: 1.27; letter-spacing: -0.02em;
}
.pg-lead {
  margin-top: 16px; max-width: 74ch;
  font-size: var(--t-sub); line-height: 1.56; color: var(--c-charcoal);
}
.pg-section { padding: 40px 0 0; }
.pg-section > h2 {
  font-size: var(--t-heading-sm); line-height: 1.3; margin-bottom: 18px;
}
.pg-prose p {
  max-width: 78ch; font-size: var(--t-body); line-height: 1.68;
  color: var(--c-charcoal);
}
.pg-prose p + p { margin-top: 14px; }

.pg-cards {
  --tile-min: 300px;
  display: grid;
  /* auto-fit, not auto-fill: a three-card row should share the full width
     instead of leaving an empty phantom column on the right */
  grid-template-columns: repeat(auto-fit, minmax(min(var(--tile-min), 100%), 1fr));
  gap: 16px;
}
.pg-card {
  display: block; padding: 22px 22px 24px;
  border: 1px solid var(--c-ash); border-radius: var(--r-md);
  background: var(--c-white);
}
.pg-card h3 { font-size: var(--t-sub); line-height: 1.3; margin-bottom: 8px; }
.pg-card p { font-size: 15px; line-height: 1.6; color: var(--c-smoke); }
.pg-card--link { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.pg-card--link:hover {
  border-color: var(--c-flame); box-shadow: var(--lift); transform: translateY(-2px);
}
.pg-card--link:hover h3 { color: var(--c-flame); }

.pg-steps { display: grid; gap: 2px; }
.pg-step {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px; align-items: start;
  padding: 18px 0; border-top: 1px solid var(--c-ash);
}
.pg-step:last-child { border-bottom: 1px solid var(--c-ash); }
.pg-step__n {
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--c-flame); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.pg-step h3 { font-size: var(--t-sub); line-height: 1.3; margin-bottom: 6px; }
.pg-step p { font-size: 15px; line-height: 1.62; color: var(--c-charcoal); max-width: 72ch; }

.pg-faq details { border-top: 1px solid var(--c-ash); }
.pg-faq details:last-child { border-bottom: 1px solid var(--c-ash); }
.pg-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: var(--t-sub); line-height: 1.35; color: var(--c-ink);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary span {
  position: relative; flex: 0 0 auto; width: 14px; height: 14px;
}
.pg-faq summary span::before,
.pg-faq summary span::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--c-flame);
}
.pg-faq summary span::before { width: 14px; height: 2px; }
.pg-faq summary span::after { width: 2px; height: 14px; transition: transform .18s ease; }
.pg-faq details[open] summary span::after { transform: scaleY(0); }
.pg-faq details[open] summary { color: var(--c-flame); }
.pg-faq p {
  padding: 0 0 20px; max-width: 78ch;
  font-size: 15px; line-height: 1.68; color: var(--c-charcoal);
}

.pg-table { width: 100%; border-collapse: collapse; }
.pg-table th, .pg-table td {
  text-align: start; vertical-align: top; padding: 14px 0;
  border-top: 1px solid var(--c-ash); font-size: 15px; line-height: 1.6;
}
.pg-table tr:last-child th, .pg-table tr:last-child td { border-bottom: 1px solid var(--c-ash); }
.pg-table th {
  width: 220px; padding-inline-end: 32px; font-weight: 500; color: var(--c-ink);
}
.pg-table td { color: var(--c-charcoal); }

.page-static .band { margin-top: 64px; }

@media (max-width: 720px) {
  .pg-section { padding-top: 32px; }
  .pg-lead { font-size: 16px; }
  .pg-cards { --tile-min: 240px; }
  .pg-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .pg-table th, .pg-table td { display: block; width: auto; padding-inline-end: 0; }
  .pg-table th { border-bottom: 0; padding-bottom: 2px; }
  .pg-table td { border-top: 0; padding-top: 0; padding-bottom: 14px; }
  .pg-table tr:last-child th { border-bottom: 0; }
}

/* Çok geniş ekranda bilgi kolonu biraz daha nefes alır */
@media (min-width: 1600px) {
  .pdp { gap: 56px; }
}

/* ---------------- Ürün sayfası: "More in this family" ----------------
   İlk sıra scroll gerektirmeden görünsün diye bölüm başlığı sıkışır ve kart
   görseli sabit oran yerine ölçülen --fam-img yüksekliğini alır. */
.pdp-related { padding-top: 40px; }
.pdp-related .section-head { margin-bottom: 18px; }
.pdp-related .section-head h2 { font-size: var(--t-heading); }
.pdp-related .p-card .p-img { aspect-ratio: auto; height: var(--fam-img, 190px); }

/* Üçüncü kolon: bilgi panelleri masaüstünde açık gelir */
.pdp-aside { min-width: 0; display: flex; }
/* Paneller kolonu tam doldurur: son satırın alt kenarlığı konteynerın
   alt çizgisine oturur, üst kenarlık da bilgi kolonunun üstüyle hizalı. */
.pdp-aside .acc { margin-top: 0; width: 100%; display: flex; flex-direction: column; }
.pdp-aside .acc-row { flex: 1 0 auto; }
.pdp-aside .acc-row > button { padding: 14px 0; font-size: 15px; }
.pdp-aside .acc-body { padding-bottom: 16px; font-size: 14px; line-height: 1.6; max-width: none; }

/* Alçak masaüstü pencerelerinde (≈800px) PDP bloğu sıkışır — aile şeridinin
   ilk sırasına yer açmak için dolgular ve panel tipografisi daralır. */
@media (min-width: 1000px) and (max-height: 900px) {
  .pdp { padding-top: 20px; }
  /* Satır yüksekliğini hep sağ panel belirliyordu (1200px'te 472px'e çıkıyordu).
     Kolon biraz genişletilip tipografi sıkıştırılınca panel ~340px'e iniyor ve
     aile şeridinin ilk sırası 768px yükseklikte bile katlanmanın üstünde kalıyor. */
  .pdp {
    grid-template-columns:
      clamp(190px, 16%, 320px)
      minmax(0, 1fr)
      clamp(300px, 30%, 430px);
  }
  .pdp-cta { padding-top: 20px; }
  .pdp-cta .btn { padding: 11px 22px; }
  .spec-table { margin-top: 18px; }
  .pdp-info .lead { margin-top: 10px; }
  .pdp-tags { margin-top: 12px; }
  .pdp-aside .acc-row > button { padding: 7px 0; font-size: 13.5px; }
  .pdp-aside .acc-body { padding-bottom: 9px; font-size: 13px; line-height: 1.5; }
  .pdp-related { padding-top: 20px; }
  .pdp-related .section-head { margin-bottom: 12px; }
  .pdp-related .section-head h2 { font-size: 24px; }
  .pdp-related .p-card .p-body { padding: 10px 12px 12px; }
  .pdp-related .p-title { font-size: 14px; }
  .pdp-related .p-meta { font-size: 12px; }
}



/* ---------------- Ürün görseli koruması ----------------
   Ürün fotoğrafları indirilemez / sürüklenemez / sağ tıklanamaz olmalı.
   Görsel katmanı işaretçi olaylarını almaz; üstteki şeffaf katman
   "farenin gördüğü" eleman olur, böylece "Resmi farklı kaydet" hedef
   bulamaz. Ekran görüntüsü tarayıcı içinden tamamen engellenemez —
   pencere odağı kaybolduğunda ve PrintScreen'de görsel bulanıklaşır. */
.p-img, .sh-img, .pdp-media .frame {
  position: relative;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.p-img img, .sh-img img, .pdp-media .frame img {
  pointer-events: none;
  -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; user-drag: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.p-img::after, .sh-img::after, .pdp-media .frame::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: transparent;
}
/* kart tıklanabilir kalmalı: örtü linkin altında değil, linkin içinde */
.p-card .p-img::after, .shelf-item .sh-img::after { pointer-events: none; }
.pdp-media .frame::after { pointer-events: auto; cursor: default; }

/* Pencere odağı kaybolunca (alt-tab, yakalama aracı) görseller kapanır */
html.img-shield .p-img img,
html.img-shield .sh-img img,
html.img-shield .pdp-media .frame img {
  filter: blur(18px) grayscale(1);
  opacity: 0.35;
  transition: filter .12s linear, opacity .12s linear;
}

/* Yazdırma / PDF çıktısında ürün görselleri basılmaz */
@media print {
  .p-img img, .sh-img img, .pdp-media .frame img { display: none !important; }
  .p-img::before, .sh-img::before, .pdp-media .frame::before {
    content: "Image protected"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: #999;
  }
}

/* Telif satırındaki ikincil sayfa linkleri */
.foot-minor { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-minor a { color: rgba(255,255,255,0.7); }
.foot-minor a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }


/* ---------------- Ürün sayfası: dar ekranda tek kolon ----------------
   Üçlü grid 1000px'e kadar tek satırda kalır; altında dikey akışa geçer. */
@media (max-width: 999px) {
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
  /* tek kolonda "aynı alt çizgi" kuralı anlamsız — doğal akışa dön */
  .pdp-info { display: block; }
  .pdp-cta { margin-top: 32px; padding-top: 0; }
  .pdp-media, .pdp-aside { max-height: none; position: static; }
  .pdp-media { display: block; }
  .pdp-media .frame { height: auto; aspect-ratio: 1 / 1; max-height: none; }
  .pdp-aside { display: block; }
  .pdp-aside .acc { display: block; }
  .pdp-aside .acc-row { flex: none; }
  .pdp-related { padding-top: 48px; }
  .pdp-related .p-card .p-img { aspect-ratio: 5 / 3; height: auto; }
  .pdp-aside { grid-column: auto; }
  .pdp-aside .acc { border-top: 1px solid var(--c-ink); }
  /* dar ekranda paneller kapalı başlar — açık üç panel gereksiz scroll yaratır */
  .pdp-aside .acc-row.open .acc-body { display: none; }
  .pdp-aside .acc-row.open.is-user .acc-body { display: block; }
  .pdp-aside .acc-row.open .plus { transform: none; }
  .pdp-aside .acc-row.open.is-user .plus { transform: rotate(45deg); }
  .pdp-media { position: static; }
  .pdp-media .frame { width: min(100%, 420px); margin: 0 auto; }
  .spec-table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
  .pdp-info { max-width: 100%; overflow-x: hidden; }
}

/* ============================================================================
   Fandeck kartı — boya kalemlerinin katalog fotoğrafı yok.
   Gri "görsel yok" kutusu yerine renk alanı + altında beyaz künye şeridi.
   Yazı hiçbir zaman renk alanının üstünde durmaz; kontrast her tonda güvende.
   ========================================================================== */
/* NOT: sınıf adı `fdk`, `chip` DEĞİL — `.chip` subnav pill'lerine ait ve
   goSub() onların üzerinde `.active` sınıfını gezdiriyor. */
.p-img.fdk, .frame.fdk {
  padding: 0;
  display: block;
  background: var(--c-white);
}
.fdk-face {
  position: absolute; inset: 0 0 38px 0;
  background: var(--fdk, var(--c-field));
}
.fdk-tag {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  height: 38px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px;
  background: var(--c-white);
  border-top: 1px solid var(--c-ash);
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--c-smoke);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fdk-tag b {
  font-weight: 500; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.p-card:hover .fdk-face { filter: brightness(1.04); }
/* PDP kapağı: çerçeve kolonu doldurmaya devam eder (alt çizgi hizası bozulmasın),
   künye şeridi de o çerçevenin altına oturur. */
.pdp-media .frame.fdk { position: relative; padding: 0; display: block; }
.frame.fdk .fdk-face { inset: 0 0 46px 0; }
.frame.fdk .fdk-tag { height: 46px; font-size: 13px; padding: 0 16px; }

/* ============================================================================
   Colour studio — Paint & Surface kategorisinin başındaki renk seçim modülü.

   Tek katlı iki kolon: solda sahne + uyarı notu, sağda beyaz kontrol kartı.
   Kolonlar `stretch` ile eşit boyda. Kartın içindeki sıra:
     etiket + renk barı → etiket + tonlar → cs__pitch → CTA.
   `cs__pitch` (modül adı, başlık, açıklama) `margin-top:auto` ile tonlarla CTA
   arasındaki esnek boşluğu doldurur; böylece kart ortasında ölü alan kalmaz ve
   ayrı bir başlık şeridine gerek olmaz.

   YÜKSEKLİK BÜTÇESİ: modül katlamayı doldurmamalı — altındaki alt gezinme ve
   ürün ızgarası ilk ekranda görünsün. Bu yüzden oda sekmeleri sahnenin ÜSTÜNDE
   yüzer (altına satır eklemez), açıklama tek satırdır ve kart iç ölçüleri
   dardır. Buraya yükseklik eklerken bu bütçeyi gözet.

   Tipografi kademesi (tek merdiven, ara boy yok):
     18 başlık · 14 açıklama + künye adı · 13 sekme · 12 hex/not · 11 etiket
     + ton kodu.
   ========================================================================== */
.cs {
  margin: 4px 0 28px;
  background: var(--c-field);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-md);
  overflow: hidden;
}

.cs__body {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  padding: 24px;
}

/* ---- sahne ---- */
/* position: relative — oda sekmeleri sahnenin köşesine göre konumlanır ama
   sahnenin overflow kırpmasının dışında kalır. */
.cs__stage { position: relative; min-width: 0; display: flex; flex-direction: column; }
/* Katman sırası: duvar (seçilen renk) → zemin → oda kesiti (şeffaf PNG) → künye.
   Oda görselinin arkasına düz renk konduğu için maske, karışım modu veya filtre
   yok; renk ekranda hex değeriyle birebir çıkar.
   `--cs-floor` ve en/boy oranı sahne başına JS'ten geliyor. */
.cs-scene {
  position: relative;
  aspect-ratio: 4 / 3;            /* JS satır içi oranla eziyor — bu yalnızca yedek */
  border-radius: var(--r-md);
  border: 1px solid var(--c-ash);
  overflow: hidden;
  background: var(--c-field);
  -webkit-user-select: none; user-select: none;
}
.cs-scene__wall {
  position: absolute; inset: 0;
  background: var(--cs-colour);
  transition: background-color .25s ease;
}
.cs-scene__floor {
  position: absolute; inset: var(--cs-floor, 52%) 0 0 0;
  background:
    /* mobilya grubunun duvar dibine düşen yumuşak temas gölgesi */
    radial-gradient(ellipse 58% 30% at 50% 0%, oklch(35% 0.02 80 / 0.22), transparent 72%),
    linear-gradient(to bottom, oklch(83% 0.014 78), oklch(90% 0.009 82));
  transition: opacity .2s ease;
}
/* süpürgelik — düz cepheli duvarda birleşimi okunur kılan tek detay;
   mobilya PNG'si üstte olduğu için doğal biçimde onun arkasında kalır */
.cs-scene__floor::before {
  content: ""; position: absolute;
  top: -7px; left: 0; right: 0; height: 7px;
  background: oklch(97% 0.003 90);
  box-shadow: 0 1px 0 oklch(35% 0.02 80 / 0.10);
}
.cs-scene__room {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 100%;
  pointer-events: none;
  -webkit-user-drag: none; user-drag: none;
  transition: opacity .2s ease;
}
.cs-scene__badge {
  position: absolute; left: 14px; bottom: 14px; z-index: 4;
  max-width: calc(100% - 28px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  background: oklch(100% 0 0 / 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid oklch(0% 0 0 / 0.07);   /* açık halı/zeminde kenarı kaybolmasın */
  border-radius: var(--r-md);
  box-shadow: var(--lift);
}
.cs-scene__swatch {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-md);
  border: 1px solid oklch(0% 0 0 / 0.12);
  transition: background-color .25s ease;
}
.cs-scene__meta { display: grid; gap: 2px; min-width: 0; }
.cs-scene__name {
  font-size: var(--t-caption); font-weight: 500; line-height: 1.2; color: var(--c-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-scene__hex {
  font-size: 12px; line-height: 1.2; letter-spacing: 0.05em; color: var(--c-smoke);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* oda sekmeleri — sahnenin sağ üst köşesinde yüzen segment kontrolü.
   Sahnenin ALTINDA satır kaplamadığı için modül kısalıyor; köşe her odada düz
   duvar olduğundan mobilyayı kapatmıyor. Künye sol altta, çakışma yok. */
.cs-views {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 3px;
  background: oklch(100% 0 0 / 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid oklch(0% 0 0 / 0.10);   /* açık duvar renginde kenarı kaybolmasın */
  border-radius: var(--r-md);
  box-shadow: var(--lift);
}
.cs-views__btn {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 15px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--c-charcoal);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cs-views__btn:hover { background: var(--c-field-2); border-color: var(--c-ash); color: var(--c-ink); }
.cs-views__btn.is-on { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.cs-views__btn.is-on:hover { background: var(--c-charcoal); border-color: var(--c-charcoal); color: var(--c-white); }
.cs-views__btn:focus-visible { outline: 2px solid var(--c-flame); outline-offset: 2px; }

/* ---- başlık tipografisi ---- */
/* ---- kartın içindeki tanıtım bloğu: tonlar ile CTA arasında ---- */
.cs__pitch {
  margin-top: auto;                 /* tonlarla CTA arasındaki boşluğu yutar */
  padding-top: 18px;
  border-top: 1px solid var(--c-ash);
}
.cs__eyebrow {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--c-flame);
}
.cs__title {
  margin-top: 6px;
  font-size: var(--t-sub); font-weight: 500; line-height: 1.3;
  color: var(--c-ink);
  text-wrap: balance;               /* son satırda tek kelime kalmasın */
}
.cs__intro {
  margin-top: 6px;
  font-size: var(--t-caption); line-height: 1.5; color: var(--c-smoke);
  text-wrap: pretty;
}

/* ---- kontrol kartı ---- */
.cs__panel {
  min-width: 0;
  display: flex; flex-direction: column;
  padding: 18px;
  background: var(--c-white);
  border: 1px solid var(--c-ash);
  border-radius: var(--r-md);
}
.cs__label {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 16px; margin-bottom: 8px;
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--c-smoke);
}
.cs__panel > .cs__label:first-child { margin-top: 0; }
.cs__label-em {
  color: var(--c-ink);
  /* etiketten ayıran kısa dikey çizgi — ayrı bir ayraç karakteri gerekmez */
  border-left: 1px solid var(--c-ash);
  padding-left: 8px;
}

/* renk barı — 12 aile, ortadaki tonlarıyla */
/* overflow-x: auto, overflow-y'yi de kırpar — seçili/hover segmentin 3px
   yükselmesi ve gölgesi için üstte/altta pay bırakılıyor. */
.cs-rail {
  display: flex; gap: 3px;
  padding: 4px 0 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.cs-rail__seg {
  position: relative;
  flex: 1 1 0; min-width: 40px; height: 46px;
  background: var(--seg);
  border-radius: var(--r-md);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cs-rail__seg:hover { transform: translateY(-3px); box-shadow: var(--lift); }
.cs-rail__seg.is-on {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px var(--c-white), 0 0 0 2px var(--c-ink);
}
.cs-rail__seg:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.cs-rail__name {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* seçilen ailenin beş tonu — hex kodlarıyla */
.cs-tones { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.cs-tone {
  display: grid; gap: 6px; justify-items: stretch; text-align: left;
  padding: 5px 5px 7px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: transparent;
  transition: background-color .15s ease, border-color .15s ease;
}
.cs-tone__tile {
  display: block; height: 52px;
  border-radius: var(--r-md);
  border: 1px solid oklch(0% 0 0 / 0.1);
}
.cs-tone__hex {
  font-size: 12px; line-height: 1.25; letter-spacing: 0.03em; color: var(--c-charcoal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-tone__code {
  font-size: 11px; line-height: 1.25; letter-spacing: 0.06em; color: var(--c-smoke);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-tone:hover { background: var(--c-field); border-color: var(--c-ash); }
.cs-tone.is-on { background: var(--c-field-2); border-color: var(--c-ink); }
.cs-tone.is-on .cs-tone__hex { color: var(--c-ink); }
.cs-tone.is-on .cs-tone__code { color: var(--c-charcoal); }
.cs-tone:focus-visible { outline: 2px solid var(--c-flame); outline-offset: 2px; }

/* Esnek boşluğu cs__pitch yuttuğu için CTA doğrudan onun altına oturur */
.cs__foot {
  margin-top: 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
/* Tanıtım bloğu basılmadığında (ana sayfa — başlık bölüm başlığında) esnek
   boşluğu CTA yutar, kart ortasında ölü alan kalmaz. */
.cs--bare .cs__foot { margin-top: auto; padding-top: 20px; }
.cs__cta { padding: 12px 20px; font-size: var(--t-caption); }
.cs__cta:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.cs__link {
  font-size: var(--t-caption); color: var(--c-ink);
  background: transparent;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--c-butter);
}
.cs__link:hover { text-decoration-color: var(--c-ink); }
.cs__link:focus-visible { outline: 2px solid var(--c-flame); outline-offset: 3px; border-radius: 2px; }
/* sahnenin altındaki altyazı — sol kolonu sağdaki kartın boyuna tamamlar */
.cs__note {
  margin-top: 12px;
  font-size: 12px; line-height: 1.45; color: var(--c-smoke);
}

/* NOT: sahnenin en/boy oranı satır içi stille geldiği için burada ezilmiyor —
   oda görselinin oranı her ekranda korunur, kırpma/mektup kutusu olmaz. */
@media (max-width: 1100px) {
  .cs__body { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .cs__stage { max-width: 560px; }   /* tek kolona düşünce sahne uzayıp katlamayı yemesin */
  .cs__intro { max-width: 62ch; }
}
/* Sahne daraldığında üç sekme sağ üst köşeye sığmaz — kontrol sahnenin altına
   iner ve tam genişlikte dokunma hedefine büyür. */
@media (max-width: 720px) {
  .cs-views {
    position: static; max-width: none; margin-top: 12px;
    display: flex; align-self: stretch;
    background: var(--c-white);
    border-color: var(--c-ash);
    box-shadow: none;
    backdrop-filter: none;
  }
  .cs-views__btn { flex: 1 1 auto; justify-content: center; min-height: 44px; padding: 0 12px; }
}
@media (max-width: 560px) {
  .cs__body { padding: 16px; gap: 16px; }
  .cs__panel { padding: 15px; }
  .cs-scene__floor::before { top: -4px; height: 4px; }
  .cs-scene__badge { left: 10px; bottom: 10px; padding: 7px 11px 7px 7px; }
  .cs-scene__swatch { width: 28px; height: 28px; }
  .cs-tones { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .cs-tone { padding: 4px 4px 6px; gap: 5px; }
  .cs-tone__tile { height: 44px; }
  .cs-tone__hex, .cs-tone__code { font-size: 10px; letter-spacing: 0; }
  .cs__foot { gap: 14px; padding-top: 18px; }
  .cs__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-rail__seg, .cs-tone, .cs-scene__wall, .cs-scene__floor,
  .cs-scene__room, .cs-scene__swatch { transition: none; }
  .cs-rail__seg:hover, .cs-rail__seg.is-on { transform: none; }
}