/*
Theme Name: VANDGAARD
Theme URI: https://vandgaard.com
Author: VANDGAARD
Author URI: https://vandgaard.com
Description: Technical menswear theme for WooCommerce. Charcoal #16181D ground, military olive structure, signal yellow #D6FF3F held back for calls to action and parameter highlights. Bebas Neue display over IBM Plex Sans body, both self hosted. Square corners, hard 2px borders, one fixed left column index. Sold on parameters: every SKU carries its own specification sheet. No promo strip, no ratings, no chat widget, no lifestyle copy.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vandgaard
Tags: e-commerce, dark, two-columns, featured-images, translation-ready, block-styles
WC requires at least: 7.0
WC tested up to: 9.5
*/

/* ==========================================================================
   VANDGAARD (S4) - technical menswear, built to spec.
   --------------------------------------------------------------------------
   Design system, fixed:
     charcoal #16181D  /  text #F2F4F7  /  military olive #4A5D3A
     signal yellow #D6FF3F - reserved for CTAs, parameter highlights and
     borders under the cursor. Nothing else.
     Display: Bebas Neue (self-hosted). Body: IBM Plex Sans (self-hosted).
     Cards: square corners, hard 2px borders. Left column navigation is fixed.
   --------------------------------------------------------------------------
   Blocks: A3 nav  A8 hero  C3 sheets  C6 compare  E4 rail  D5 grid  H3 footer
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --bg: #16181D;
  --bg-2: #1C1F26;
  --bg-3: #101216;
  --bg-4: #0B0D10;
  --ink: #F2F4F7;
  --ink-2: #B4BBC6;
  --ink-3: #7C838F;
  --ink-4: #5A616C;
  --olive: #4A5D3A;
  --olive-d: #2C361F;
  --olive-lt: #93AC6E;
  --sig: #D6FF3F;
  --sig-d: #BCE324;
  --line: #2A2F38;
  --line-2: #363C46;

  --f-d: 'Bebas Neue', 'Arial Narrow', 'Haettenschweiler', system-ui, sans-serif;
  --f-b: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --navw: 244px;
  --bar: 58px;
  --pad: clamp(20px, 3.4vw, 64px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --hatch: repeating-linear-gradient(135deg, var(--olive) 0 5px, rgba(0, 0, 0, 0) 5px 13px);
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-b);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* display type: military narrow, wide tracking, always uppercase */
.h1, .hero__h1, .sec-h, .nav__mark, .nav__t, .nav__k, .card__name, .sheet__name,
.sheet__idx, .cmp__name, .cmp__tag, .cmph, .foot__logo, .hero__price, .card__price,
.rail__count, .sec-k, .foot__h, .hk, .sheet__badge, .card__badge {
  font-family: var(--f-d);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: square; stroke-linejoin: miter;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

::selection { background: var(--sig); color: var(--bg-3); }

:focus-visible { outline: 2px solid var(--sig); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -70px; z-index: 300;
  background: var(--sig); color: var(--bg-3); padding: 12px 18px;
  font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { top: 0; }

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--pad); }

/* the diagonal motif: a hatched band cut on the skew */
.seam {
  display: block; height: 16px;
  border-top: 2px solid var(--olive);
  border-bottom: 2px solid var(--olive);
  background: var(--hatch);
  opacity: .9;
}

/* the small yellow diamond used as a bullet in section kickers */
.dot {
  display: inline-block; width: 9px; height: 9px; margin-right: 10px;
  background: var(--sig); transform: rotate(45deg) translateY(-1px);
}

/* ---------------------------------------------------------------- A3 nav */
.nav {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--navw);
  display: flex; flex-direction: column;
  background: var(--bg-3);
  border-right: 2px solid var(--olive);
}
.nav__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 20px 18px;
  border-bottom: 2px solid var(--olive);
}
.nav__brand { display: block; min-width: 0; }
.nav__mark { display: block; font-size: 27px; line-height: .9; letter-spacing: .05em; }
.nav__sub {
  display: block; margin-top: 6px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--olive-lt);
}
.nav__burger { display: none; padding: 8px; margin: -8px -8px -8px 0; }
.nav__burger .ic { width: 22px; height: 22px; }
.nav__burger-open, .nav__burger-shut { display: inline-flex; align-items: center; }
.nav__burger-shut { display: none; }
.nav.is-open .nav__burger-open { display: none; }
.nav.is-open .nav__burger-shut { display: inline-flex; }

.nav__panel { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 20px 26px; }
.nav__k { margin: 0 0 14px; font-size: 11px; letter-spacing: .2em; color: var(--ink-4); }
.nav__list { border-top: 2px solid var(--line-2); }
.nav__link {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 8px 12px 10px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.nav__n {
  font-family: var(--f-b); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; color: var(--ink-4); transition: color .18s var(--ease);
}
.nav__t { font-size: 19px; line-height: 1; letter-spacing: .07em; color: var(--ink-2); transition: color .18s var(--ease); }
.nav__link:hover { background: var(--bg-2); border-left-color: var(--olive-lt); }
.nav__link:hover .nav__t { color: var(--ink); }
.nav__link.is-active { background: var(--bg-2); border-left-color: var(--sig); }
.nav__link.is-active .nav__n { color: var(--sig); }
.nav__link.is-active .nav__t { color: var(--ink); }

.nav__foot { margin-top: 26px; border-top: 2px solid var(--line-2); padding-top: 16px; }
.nav__stat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.nav__stat span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.nav__stat b { font-family: var(--f-d); font-size: 16px; letter-spacing: .06em; }
.nav__note { margin: 14px 0 10px; font-size: 10px; line-height: 1.7; letter-spacing: .12em; color: var(--ink-4); text-transform: uppercase; }
.nav__mail { font-size: 12px; letter-spacing: .04em; color: var(--olive-lt); border-bottom: 1px solid var(--olive); }
.nav__mail:hover { color: var(--sig); border-bottom-color: var(--sig); }

.main { margin-left: var(--navw); }

/* --------------------------------------------------------------- A8 hero */
.hero { position: relative; background: var(--bg); }

.hero__top {
  position: relative;
  min-height: min(78vh, 680px);
  display: flex; align-items: flex-end;
  padding: clamp(28px, 5vw, 76px) var(--pad) clamp(46px, 6vw, 84px);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  display: block;
  background: var(--bg-4);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 52% 44%;
  filter: contrast(1.1) saturate(.82) brightness(.74);
}
.hero__grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(22,24,29,.78) 0%, rgba(22,24,29,.22) 32%, rgba(22,24,29,.88) 74%, var(--bg) 100%),
    repeating-linear-gradient(135deg, rgba(74,93,58,.18) 0 2px, rgba(74,93,58,0) 2px 11px);
}
.hero__index {
  position: absolute; right: var(--pad); top: 26px;
  font-family: var(--f-d); font-size: clamp(60px, 9vw, 150px); line-height: .8;
  letter-spacing: .04em; color: var(--olive); opacity: .5;
  user-select: none;
}
.hero__copy { position: relative; max-width: 56rem; }
.hero__eyebrow {
  display: flex; align-items: center;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
}
.hero__h1 {
  margin: 18px 0 14px;
  font-size: clamp(54px, 9.4vw, 152px);
  line-height: .84;
  letter-spacing: .005em;
}
.hero__lead {
  max-width: 34ch; font-size: clamp(15px, 1.4vw, 19px); color: var(--ink-2);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 20px;
  border: 2px solid var(--olive);
  border-radius: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn .ic { width: 16px; height: 16px; }
.btn--sig { border-color: var(--sig); color: var(--sig); }
.btn--sig:hover { background: var(--sig); color: var(--bg-3); }
.btn--ghost:hover { border-color: var(--sig); color: var(--sig); }
.btn--line:hover { border-color: var(--sig); color: var(--sig); }
.btn--xs { padding: 10px 14px; font-size: 11px; letter-spacing: .12em; }

.hero__bottom {
  display: grid;
  grid-template-columns: 1.05fr 1.5fr .95fr;
  border-top: 2px solid var(--olive);
  background: var(--bg-2);
}
.hero__bottom > * { padding: clamp(24px, 3vw, 40px) var(--pad); }
.hero__desc { border-right: 1px solid var(--line); }
.hk { display: block; margin-bottom: 12px; font-size: 11px; letter-spacing: .2em; color: var(--olive-lt); }
.hero__p { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.hero__bullets { margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.hero__bullets li {
  position: relative; padding-left: 18px;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.hero__bullets li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; background: var(--olive);
  transform: rotate(45deg);
}

.hero__params {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  padding: 0;
  border-right: 1px solid var(--line);
}
.hp { background: var(--bg-2); padding: 22px clamp(16px, 1.8vw, 26px); }
.hp__k { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.hp__v { display: block; margin-top: 10px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }

.hero__buy { display: flex; flex-direction: column; align-items: flex-start; }
.hero__price { display: flex; align-items: baseline; gap: 12px; font-size: 40px; line-height: 1; letter-spacing: .04em; }
.hero__price b { font-weight: 400; }
.hero__price s { font-size: 18px; color: var(--ink-4); letter-spacing: .04em; }
.hero__stock { margin-top: 12px; font-size: 11px; letter-spacing: .14em; color: var(--sig); text-transform: uppercase; }
.hero__pick { margin: 8px 0 22px; font-size: 11px; letter-spacing: .14em; color: var(--ink-4); text-transform: uppercase; }

/* ------------------------------------------------- generic section frame */
.sec { padding: clamp(56px, 6.5vw, 116px) 0; border-bottom: 2px solid var(--line); }
.sec--sheets { background: var(--bg); }
.sec--cmp { background: var(--bg-3); }
.sec--rail { background: var(--bg); }
.sec--grid { background: var(--bg-3); border-bottom: 0; }

.sec-head { border-bottom: 2px solid var(--olive); padding-bottom: clamp(18px, 2vw, 28px); }
.sec-k {
  display: flex; align-items: center;
  font-size: 11px; letter-spacing: .2em; color: var(--ink-3);
}
.sec-h { margin: 16px 0 0; font-size: clamp(34px, 4.9vw, 74px); line-height: .9; }
.sec-h em { font-style: normal; color: var(--olive-lt); }
.sec-s { margin: 16px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.sec-head--row { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px, 3vw, 48px); align-items: end; }
.sec-head--row .sec-s { margin: 0; }

/* mark: the signal-yellow parameter highlight, the only yellow in data rows */
.hl { background: none; color: var(--sig); font-weight: 600; padding: 0; }

/* --------------------------------------------------------- C3 spec sheets */
.sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: clamp(28px, 3.4vw, 52px); }
.sheet {
  display: grid; grid-template-columns: minmax(140px, 33%) minmax(0, 1fr);
  border: 2px solid var(--olive);
  background: var(--bg-2);
  transition: border-color .2s var(--ease);
}
.sheet:hover, .sheet:focus-within { border-color: var(--sig); }
.sheet__media { position: relative; background: var(--bg-4); border-right: 2px solid var(--olive); }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) brightness(.9); }
.sheet__idx {
  position: absolute; left: 0; top: 0;
  padding: 8px 14px 8px 10px;
  background: var(--bg-3); color: var(--ink-2);
  font-size: 12px; letter-spacing: .14em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.sheet__badge {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 8px 12px; background: var(--olive-d); color: var(--ink-2);
  font-size: 11px; letter-spacing: .16em;
}
.sheet__body { padding: clamp(16px, 1.8vw, 26px); min-width: 0; }
.sheet__head { border-bottom: 2px solid var(--line-2); padding-bottom: 14px; margin-bottom: 14px; }
.sheet__name { font-size: clamp(22px, 2vw, 28px); line-height: 1; }
.sheet__meta { margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.sheet__meta b { color: var(--sig); }
.sheet__tag {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}

table.spec { width: 100%; border-top: 2px solid var(--olive); }
table.spec tr { border-bottom: 1px solid var(--line); }
table.spec tr:last-child { border-bottom: 0; }
table.spec th, table.spec td { padding: 10px 0; vertical-align: top; text-align: left; }
table.spec th {
  width: 40%; padding-right: 14px;
  font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
table.spec th .ic { width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; color: var(--olive-lt); stroke-width: 1.7; }
table.spec td { font-size: 13px; line-height: 1.55; color: var(--ink); }

/* -------------------------------------------------------- C6 shell compare */
.cmp__scroll {
  margin-top: clamp(28px, 3.4vw, 52px);
  border: 2px solid var(--olive);
  background: var(--bg-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.cmp { width: 100%; min-width: 860px; border-collapse: collapse; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 18px clamp(14px, 1.6vw, 24px); }
.cmp thead th { border-bottom: 2px solid var(--olive); background: var(--bg-3); }
.cmp__corner { width: 16%; border-right: 1px solid var(--line); }
.cmp__corner span { display: block; font-size: 10px; letter-spacing: .18em; color: var(--ink-4); font-weight: 600; }
.cmp__corner b { display: block; margin-top: 8px; font-family: var(--f-d); font-weight: 400; font-size: 22px; letter-spacing: .06em; color: var(--ink-2); }
.cmp__col { width: 28%; border-right: 1px solid var(--line); }
.cmp__col:last-child { border-right: 0; }
.cmp__img { display: block; margin-bottom: 14px; border: 2px solid var(--olive); background: var(--bg-4); }
.cmp__img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 38%; filter: contrast(1.06) brightness(.88); }
.cmp__col.is-lightest .cmp__img { border-color: var(--sig); }
.cmp__tag { display: block; font-size: 11px; letter-spacing: .16em; color: var(--olive-lt); }
.cmp__name { display: block; margin-top: 8px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; }
.cmp__price { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; font-family: var(--f-d); font-size: 22px; letter-spacing: .05em; }
.cmp__price s { font-size: 15px; color: var(--ink-4); }
.cmp tbody th {
  width: 16%; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.cmp tbody td {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.6; color: var(--ink);
}
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 2px solid var(--olive); }
.cmp tbody td:last-child { border-right: 0; }
.cmp tbody td.is-win { background: rgba(214, 255, 63, .06); box-shadow: inset 3px 0 0 var(--sig); }
.cmp .win {
  display: block; margin-top: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sig);
}
.cmp tfoot th { border-right: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.cmp tfoot td { border-right: 1px solid var(--line); background: var(--bg-3); }
.cmp tfoot td:last-child { border-right: 0; }

/* thin scrollbars for the two horizontal scrollers */
.cmp__scroll, .rail__view { scrollbar-width: thin; scrollbar-color: var(--olive) var(--bg-4); }
.cmp__scroll::-webkit-scrollbar, .rail__view::-webkit-scrollbar { height: 8px; }
.cmp__scroll::-webkit-scrollbar-track, .rail__view::-webkit-scrollbar-track { background: var(--bg-4); }
.cmp__scroll::-webkit-scrollbar-thumb, .rail__view::-webkit-scrollbar-thumb { background: var(--olive); }

/* ------------------------------------------------------------- E4 the rail */
.rail { margin-top: clamp(28px, 3.4vw, 52px); }
.rail__view {
  position: relative;
  overflow-x: auto; overflow-y: hidden;
  cursor: grab;
  padding-bottom: 4px;
  -ms-overflow-style: none;
}
.rail__view::-webkit-scrollbar { height: 0; }
.rail__view:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.rail.is-drag .rail__view { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.rail.is-drag .card__link { pointer-events: none; }
.rail__track { display: flex; gap: 16px; width: max-content; padding: 2px; }
.rail__hud {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
  margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--olive);
}
.rail__nav { display: flex; gap: 8px; }
.rbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 44px;
  border: 2px solid var(--olive); color: var(--ink-2);
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.rbtn:hover { border-color: var(--sig); color: var(--sig); background: var(--bg-2); }
.rbtn[disabled] { opacity: .35; cursor: not-allowed; }
.rbtn[disabled]:hover { border-color: var(--olive); color: var(--ink-2); background: none; }
.rail__scrub { position: relative; flex: 1; height: 44px; display: flex; align-items: center; touch-action: none; }
.rail__scrub-line { display: block; width: 100%; height: 2px; background: var(--line-2); }
.rail__fill { display: block; height: 2px; width: 10%; background: var(--sig); transition: width .12s linear; }
.rail__knob {
  position: absolute; top: 50%; left: 10%;
  width: 16px; height: 34px; margin-left: -8px; transform: translateY(-50%);
  background: var(--bg-2); border: 2px solid var(--sig);
  cursor: grab;
  transition: left .12s linear;
}
.rail__knob:active { cursor: grabbing; background: var(--sig); }
.rail__count { font-size: 20px; letter-spacing: .1em; color: var(--ink-4); }
.rail__count b { font-weight: 400; color: var(--ink); }

/* ------------------------------------------------- D5 cards and the grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 18px; margin-top: clamp(24px, 3vw, 42px); }

.cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.4vw, 34px); }
.cats li {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 9px 14px; border: 2px solid var(--olive);
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.cats li span { font-size: 10px; color: var(--olive-lt); }

.card {
  border: 2px solid var(--olive);
  background: var(--bg-2);
  border-radius: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.card:hover, .card:focus-within { border-color: var(--sig); background: var(--bg-3); }
.card__link { display: block; height: 100%; }
.card--rail { flex: 0 0 clamp(232px, 21vw, 268px); }

.card__media {
  position: relative; display: block;
  aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--bg-4);
  border-bottom: 2px solid var(--olive);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.card:hover .card__media, .card:focus-within .card__media { border-bottom-color: var(--sig); }
.card__shot { display: block; position: absolute; inset: 0; }
.card__shot img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.06) brightness(.92) saturate(.9); }
.card__shot--alt { opacity: 0; transition: opacity .28s var(--ease); }
.card:hover .card__shot--alt, .card:focus-within .card__shot--alt { opacity: 1; }
.card__shot--alt img { filter: contrast(1.06) brightness(1); }

.card__badge {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 7px 14px 7px 12px; background: var(--sig); color: var(--bg-3);
  font-size: 11px; letter-spacing: .16em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.card__body { display: block; padding: 16px 16px 18px; }
.card__cat { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--olive-lt); }
.card__name { display: block; margin-top: 8px; font-size: 21px; line-height: 1; }
.card__param { display: block; margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.card__price { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 21px; letter-spacing: .04em; }
.card__price b { font-weight: 400; }
.card__price s { font-size: 13px; color: var(--ink-4); }
.card__go {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
  transition: color .18s var(--ease);
}
.card__go .ic { width: 14px; height: 14px; transition: transform .18s var(--ease); }
.card:hover .card__go, .card:focus-within .card__go { color: var(--sig); }
.card:hover .card__go .ic, .card:focus-within .card__go .ic { transform: translateX(3px); }

.grid__foot {
  margin-top: clamp(22px, 2.6vw, 34px);
  padding-top: 18px; border-top: 2px solid var(--olive);
  font-size: 12px; letter-spacing: .06em; color: var(--ink-4);
}
.grid__foot a { color: var(--ink-2); border-bottom: 1px solid var(--olive); }
.grid__foot a:hover { color: var(--sig); border-bottom-color: var(--sig); }

/* ------------------------------------------------------------- H3 footer */
.foot { background: var(--bg-4); margin-left: var(--navw); }
.foot__seam { display: block; height: 16px; border-bottom: 2px solid var(--olive); background: var(--hatch); }
.foot__top {
  display: grid; grid-template-columns: 1.35fr 1.05fr 1.05fr 1.1fr;
  gap: clamp(22px, 3vw, 46px);
  padding: clamp(46px, 5vw, 82px) 0 clamp(34px, 4vw, 56px);
}
.foot__col { min-width: 0; border-top: 2px solid var(--olive); padding-top: 18px; }
.foot__logo { font-size: 40px; line-height: .9; letter-spacing: .04em; }
.foot__blurb { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--ink-2); max-width: 40ch; }
.foot__facts { margin-top: 18px; }
.foot__facts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.foot__facts span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.foot__facts b { font-weight: 600; color: var(--ink); text-align: right; }
.foot__h { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 1; color: var(--ink); }
.foot__h .ic { width: 17px; height: 17px; color: var(--sig); }
.foot__h--gap { margin-top: 28px; }
.foot__lead { margin-top: 12px; font-size: 13px; line-height: 1.65; color: var(--ink); font-weight: 600; }
.foot__k { margin-top: 20px; font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.foot__list { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.foot__list li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.foot__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--olive); transform: rotate(45deg); }
.foot__list--dim li { color: var(--ink-4); }
.foot__list--dim li::before { background: var(--line-2); }
.foot__list--warn li::before { background: var(--sig); }
.foot__terms { margin-top: 12px; }
.foot__terms li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.foot__terms span { flex: none; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.foot__terms b { font-weight: 600; }
.foot__links { margin-top: 12px; }
.foot__links a {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.foot__links a span { font-size: 10px; color: var(--ink-4); }
.foot__links a:hover { color: var(--sig); }
.foot__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 0 30px;
  border-top: 2px solid var(--olive);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
}
.foot__legal { order: -1; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.foot__legal-k { color: var(--ink-4); }
.foot__legal a { color: var(--ink-2); border-bottom: 1px solid var(--olive); }
.foot__legal a:hover { color: var(--sig); border-bottom-color: var(--sig); }

/* ------------------------------------------------------- scroll reveal */
body.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
  transition-delay: var(--d, 0ms);
}
body.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- breakpoints */
@media (max-width: 1240px) {
  .hero__bottom { grid-template-columns: 1fr 1fr; }
  .hero__desc { border-right: 0; }
  .hero__buy { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .hero__params { border-right: 0; }
}

@media (max-width: 1120px) {
  .sheets { grid-template-columns: minmax(0, 1fr); }
  .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the left column folds into a top bar with a panel */
@media (max-width: 1024px) {
  html { scroll-padding-top: calc(var(--bar) + 12px); }
  .nav {
    inset: 0 0 auto 0; width: auto; height: var(--bar);
    flex-direction: row; align-items: stretch;
    border-right: 0; border-bottom: 2px solid var(--olive);
  }
  .nav__bar { flex: 1; padding: 0 var(--pad); border-bottom: 0; }
  .nav__mark { font-size: 22px; }
  .nav__sub { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__panel {
    position: fixed; left: 0; right: 0; top: var(--bar);
    max-height: calc(100vh - var(--bar));
    overflow-y: auto;
    background: var(--bg-3);
    border-bottom: 2px solid var(--sig);
    padding: 20px var(--pad) 28px;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  }
  .nav.is-open .nav__panel { opacity: 1; visibility: visible; transform: none; }
  .main { margin-left: 0; padding-top: var(--bar); }
  .foot { margin-left: 0; }
  .hero__top { min-height: min(74vh, 620px); }
}

@media (max-width: 860px) {
  .sec-head--row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hero__bottom { grid-template-columns: minmax(0, 1fr); }
  .hero__params { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__buy { border-top: 1px solid var(--line); }
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet__media { border-right: 0; border-bottom: 2px solid var(--olive); aspect-ratio: 16 / 10; }
  .sheet__media img { position: absolute; inset: 0; }
  .sheet__media { position: relative; }
}

@media (max-width: 620px) {
  :root { --pad: 20px; }
  body { font-size: 15px; }
  .hero__h1 { font-size: clamp(46px, 15vw, 78px); }
  .hero__index { font-size: 74px; top: 14px; opacity: .35; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__params { grid-template-columns: minmax(0, 1fr); }
  .foot__top { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .rail__hud { flex-wrap: wrap; }
  .rail__count { order: -1; width: 100%; }
  .sheet__idx { font-size: 11px; }
  .foot__bar { font-size: 10px; }
}

@media (max-width: 400px) {
  .rbtn { width: 42px; height: 40px; }
  .card__name { font-size: 19px; }
  .hero__price { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.reveal-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card__shot--alt { transition: none; }
  .rail__fill, .rail__knob { transition: none; }
}