/* ============================================================================
   SWISS DESIGN SYSTEM — tokens + base
   design-systems/swiss/tokens/swiss.tokens.css

   International Typographic Style kit. Inherits Core DNA from
   /style-dna/core/swiss.md + /style-dna/asset-dna/swiss.md and the catalog
   tokens in /colors_and_type.css ([data-style="swiss"]). Reproduced here so
   the kit is portable. NEVER contradicts the Design Bible.

   Doctrine: strict modular grid · flush-left ragged-right neo-grotesque ·
   crisp black-on-white with EXACTLY ONE signal red · hairline rules · big
   index numerals · objective grayscale photography · 0 radius / no shadow.
   ============================================================================ */

:root {
  /* ---- Color (B/W + one signal red — never a second accent) ---- */
  --bg:       #ffffff;   /* page ground */
  --paper:    #fafafa;   /* subtle alt ground */
  --surface:  #f5f5f5;   /* card / fill */
  --ink:      #111111;   /* text + structural lines */
  --muted:    #6b6b6b;   /* secondary text */
  --hair:     #e6e6e6;   /* light hairline (data rules) */
  --line:     #111111;   /* primary hairline (structure) */
  --accent:   #e2231a;   /* SIGNAL RED — the one accent */
  --on-ink:   #ffffff;

  /* ---- Type ---- */
  --font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  /* Modular scale, flush-left, large. px */
  --t-cap:  12px; --t-xs: 13px; --t-sm: 15px; --t-base: 18px;
  --t-lg:   22px; --t-xl: 28px; --t-2xl: 36px; --t-3xl: 46px;
  --t-4xl:  60px; --t-5xl: 78px; --t-6xl: 104px; --t-7xl: 150px;
  --tracking-eyebrow: .22em;
  --tracking-tight:  -.03em;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* ---- Grid ---- */
  --col: 12; /* @kind other */
  --gutter: 24px;
  --margin: 64px;       /* generous page margin */
  --maxw: 1280px;

  /* ---- Form (Swiss is flat) ---- */
  --radius: 0;
  --shadow: none;
  --rule: 1px;          /* hairline weight */
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #fff; }

/* ============================================================================
   SHARED VOCABULARY — used across foundations / components / patterns / project
   ============================================================================ */

/* layout */
.swiss-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--margin); }
.rule  { height: var(--rule); background: var(--line); width: 100%; border: 0; }
.hair  { height: 1px; background: var(--hair); width: 100%; border: 0; }

/* type helpers */
.eyebrow {
  font-size: var(--t-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.eyebrow .dot { color: var(--accent); }
.num {           /* big index numeral */
  font-variant-numeric: tabular-nums; color: var(--accent);
  font-weight: 600; letter-spacing: 0;
}
.h-display { font-size: var(--t-4xl); line-height: .96; letter-spacing: var(--tracking-tight); font-weight: 700; margin: 0; }
.h-2 { font-size: var(--t-2xl); line-height: 1.0; letter-spacing: -.02em; font-weight: 700; margin: 0; }
.h-3 { font-size: var(--t-xl); line-height: 1.1; letter-spacing: -.01em; font-weight: 600; margin: 0; }
.lead { font-size: var(--t-lg); line-height: 1.5; max-width: 46ch; }
.body { font-size: var(--t-base); line-height: 1.65; color: #1a1a1a; }
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }
.accent { color: var(--accent); }

/* buttons (flat, 0 radius) */
.btn {
  font-family: var(--font); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .01em; padding: 14px 26px; border: var(--rule) solid var(--ink);
  background: var(--ink); color: var(--on-ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; border-radius: 0;
  transition: background .12s linear, color .12s linear;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--on-ink); }
.btn--red { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--red:hover { background: var(--ink); border-color: var(--ink); }

/* caption — objective, technical, like a plate caption */
.cap {
  font-size: var(--t-cap); letter-spacing: .04em; color: var(--muted);
  display: flex; justify-content: space-between; gap: var(--sp-4);
}
.cap b { color: var(--ink); font-weight: 600; }

/* grayscale image placeholder (review-first; replace with B&W photography) */
.plate {
  position: relative; background: var(--surface); overflow: hidden;
  background-image:
    repeating-linear-gradient(135deg, #eee 0 10px, #f4f4f4 10px 20px);
  display: flex; align-items: center; justify-content: center;
}
.plate .tag {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #8a8a8a; font-weight: 600; text-align: center; padding: 8px 12px;
  border: 1px solid #d8d8d8; background: rgba(255,255,255,.7);
}
.plate.is-photo { background: none; }
.plate.is-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.04); }

/* tags / chips (square, flat) */
.tag-chip {
  font-size: var(--t-cap); letter-spacing: .08em; text-transform: uppercase;
  font-weight: 600; padding: 7px 12px; border: var(--rule) solid var(--ink);
  background: transparent; color: var(--ink); border-radius: 0; white-space: nowrap;
}
.tag-chip.on { background: var(--ink); color: var(--on-ink); }
.tag-chip.red { border-color: var(--accent); color: var(--accent); }

/* doc-card scaffolding for the @dsCard pages */
.doc { padding: var(--sp-9) 0; }
.doc + .doc { border-top: var(--rule) solid var(--line); }
.doc-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-7); }
.spec-grid { display: grid; gap: var(--gutter); }

/* ============================================================================
   PRODUCT CARD — real grayscale photography, objective caption, one signal red
   ============================================================================ */
.pcard { display: flex; flex-direction: column; background: var(--bg); }
.pcard .shot { position: relative; aspect-ratio: 4 / 5; background: var(--surface); overflow: hidden; }
.pcard .shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); display: block; transition: transform .4s ease, filter .2s linear; }
.pcard:hover .shot img { transform: scale(1.03); }
.pcard .flag { position: absolute; top: 0; left: 0; background: var(--accent); color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 6px 10px; }
.pcard .wish { position: absolute; top: 10px; right: 12px; color: #fff; mix-blend-mode: difference; font-size: 18px; line-height: 1; cursor: pointer; }
.pcard .info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 0 0; }
.pcard .info .nm { font-weight: 600; font-size: var(--t-base); letter-spacing: -.01em; line-height: 1.2; }
.pcard .info .nm small { display: block; font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; margin-top: 5px; }
.pcard .info .pr { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pcard .info .pr.sale { color: var(--accent); }
.pcard .info .pr s { color: var(--muted); font-weight: 400; margin-right: 6px; }
.pcard .swatches { display: flex; gap: 6px; margin-top: 12px; }
.pcard .swatches i { width: 14px; height: 14px; border: 1px solid var(--ink); display: block; }
.pcard .swatches i.sel { outline: 1px solid var(--accent); outline-offset: 2px; }

.pgrid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.pgrid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .pgrid-4 { grid-template-columns: repeat(2, 1fr); } .pgrid-3 { grid-template-columns: 1fr; } }

/* ---- price ---- */
.price { font-variant-numeric: tabular-nums; font-weight: 600; }
.price s { color: var(--muted); font-weight: 400; margin-right: 8px; }
.price .now { color: var(--accent); }

/* ---- quantity stepper ---- */
.stepper { display: inline-flex; border: var(--rule) solid var(--ink); width: max-content; }
.stepper button { border: 0; background: transparent; width: 42px; height: 42px; font-size: 18px; cursor: pointer; font-family: var(--font); }
.stepper button:hover { background: var(--ink); color: #fff; }
.stepper .q { width: 52px; display: grid; place-items: center; border-left: var(--rule) solid var(--ink); border-right: var(--rule) solid var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- breadcrumb ---- */
.crumb { display: flex; gap: 10px; font-size: var(--t-xs); color: var(--muted); letter-spacing: .02em; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb .sep { color: var(--hair); }
.crumb .here { color: var(--ink); font-weight: 600; }

/* ---- pagination ---- */
.pager { display: flex; gap: 0; border: var(--rule) solid var(--ink); width: max-content; }
.pager span { min-width: 42px; height: 42px; display: grid; place-items: center; border-right: var(--rule) solid var(--ink); font-size: var(--t-sm); font-variant-numeric: tabular-nums; cursor: pointer; }
.pager span:last-child { border-right: 0; }
.pager span.on { background: var(--ink); color: #fff; }
.pager span.dis { color: #cfcfcf; cursor: default; }

/* ---- accordion ---- */
.acc { border-top: var(--rule) solid var(--ink); }
.acc .it { border-bottom: 1px solid var(--hair); }
.acc .it .hd { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 600; cursor: pointer; }
.acc .it .hd .pm { color: var(--accent); font-size: 20px; line-height: 1; }
.acc .it .bd { padding: 0 0 18px; color: var(--muted); font-size: var(--t-sm); max-width: 52ch; }

/* ---- cart line item ---- */
.cartline { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.cartline .th { width: 64px; height: 80px; overflow: hidden; background: var(--surface); }
.cartline .th img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.cartline .nm { font-weight: 600; }
.cartline .nm small { display: block; font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.cartline .pr { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- select / sort ---- */
.sel { display: inline-flex; align-items: center; gap: 10px; border: var(--rule) solid var(--ink); padding: 11px 16px; font-size: var(--t-sm); font-weight: 600; cursor: pointer; background: var(--bg); }
.sel .chev { color: var(--accent); }

/* ---- checkbox / radio (square, flat) ---- */
.opt { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); cursor: pointer; }
.opt .box { width: 18px; height: 18px; border: var(--rule) solid var(--ink); display: grid; place-items: center; }
.opt .box.on { background: var(--ink); color: #fff; }
.opt .box.on::after { content: "✓"; font-size: 12px; }
.opt .rad { width: 18px; height: 18px; border: var(--rule) solid var(--ink); border-radius: 50%; display: grid; place-items: center; }
.opt .rad.on::after { content: ""; width: 9px; height: 9px; background: var(--accent); border-radius: 50%; }

/* ---- announcement bar ---- */
.announce { background: var(--ink); color: #fff; text-align: center; padding: 10px 16px; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.announce b { color: var(--accent); }