/* Hallmark · shape: Marquee Hero (draw 12019c, hero swapped to Counter) · genre: editorial · theme: Newsprint (deal 2/3, seed boetiek-damesmode-mouw-zoom-f713·974abdc7·2026-11-07·r0) · job: buy · draw: 12019c
 * hero: Counter · nav: masthead (swapped from search-led: six pieces need no search) · footer: letter close · imagery: photographs, example images for this invented shop, colour · signature: the fitting-room curtain that closes and opens on the piece you pick from the rail
 * axes: light/slab-serif/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a shop page argues little; the before and after pair argues FashionPix with two pictures instead of a paragraph */
/* Hallmark · motion (7 nov, Marcel's choice): calm · the curtain stays the one big move · added: the chosen hanger photo swings from its hook (900ms, 7deg damped to 0) and the 'draag hem met' pieces appear one by one as the curtain opens (320ms, 160ms apart) · reduced motion: neither, as before no curtain */
/* Hallmark · waive 39b · the 22px controls are inline 'draag het met' links inside the caption, the 85px ones are rail rows · a caption link and a row that carries a hanger photograph are not marketing buttons */
/* Hallmark · waive 77 · 'Mouw te lang' is a statement head over three ruled facts · a shop has little to say about alterations and we invent nothing to fill it */
/* Hallmark · sweep: Floor 0 FAIL · Reflex 2 waived (39b, 77) · finish-review: subagent · 7 findings · 7 resolved (captions say voorbeeld, list rows dress the fitting room, h1 capped, route link real, phone nav, band padding, no side stripe) · gap: newsprint density traded for air, form only */
/* Hallmark · brand over theme: Newsprint gives the form (rules, square corners, ruled listings, double rule); colours and faces are the shop's own (chalk wall, navy ink, the cobalt curtain; Gloock over Schibsted Grotesk), photographs stay in colour because the clothing is the subject */
@import url("./tokens.css");
@import url("./base.css");

/* voorbeeldbalk van WinkelKlaar */
.wk { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.wk__rij { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); justify-content: space-between; padding-block: var(--space-xs); color: var(--color-muted); }
.wk a { color: var(--color-ink); }

/* kop */
.kop { border-bottom: 3px double var(--color-rule-2); }
.kop__rij { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; }
.merk { white-space: nowrap; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1; text-decoration: none; color: var(--color-ink); letter-spacing: var(--tracking-display); }
.merk span { color: var(--color-accent); }
.kop__nav { display: flex; gap: var(--space-lg); align-items: center; }
.kop__nav a { text-decoration: none; color: var(--color-ink); padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid transparent; }
.kop__nav a:hover { border-bottom-color: var(--color-ink); }
.kop__tas { font-weight: 500; white-space: nowrap; }

/* knoppen: één volle stijl, één lijnstijl */
.knop { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-sm) var(--space-lg); font: 500 var(--text-md)/1.2 var(--font-body); text-decoration: none; border: 0; border-radius: 0; cursor: pointer; text-align: center; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.knop--vol { background: var(--color-ink); color: var(--color-paper); }
.knop--vol:hover { background: var(--color-accent); }
.knop--vol:active { background: var(--color-curtain-2); }
.knop--lijn { background: none; color: var(--color-ink); border-block: var(--rule-hair) solid var(--color-ink); }
.knop--lijn:hover { background: var(--color-paper-2); }
.knop--wit { background: var(--color-curtain-ink); color: var(--color-curtain-2); }
.knop--wit:hover { background: var(--color-paper-2); }
.knop:disabled { opacity: 0.5; cursor: not-allowed; }

/* held: tekst, paskamer, rek */
.held { padding-block: var(--space-xl) var(--space-2xl); }
.held__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3.4fr); gap: var(--space-2xl); align-items: center; }
.held__tekst h1 { font-size: clamp(2.75rem, 4.2vw + 0.5rem, 4.25rem); line-height: 1; max-width: 9ch; }
.held__tekst .lead { margin-top: var(--space-lg); max-width: 26ch; color: var(--color-ink-2); }
.held__acties { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-xl); }

.paskamer { margin: 0; }
.paskamer__raam { position: relative; overflow: hidden; aspect-ratio: 3 / 4; max-height: 70vh; margin-inline: auto; border-top: 6px solid var(--color-rule-2); background: var(--color-paper-3); }
.paskamer__raam img { width: 100%; height: 100%; object-fit: cover; }
.gordijn { position: absolute; inset: 0; background-color: var(--color-curtain); background-image: repeating-linear-gradient(90deg, transparent 0 22px, color-mix(in oklab, var(--color-curtain-2) 70%, transparent) 22px 30px, transparent 30px 44px); transform: translateX(-100%); transition: transform var(--dur-long) var(--ease-in-out); }
.paskamer.dicht .gordijn { transform: translateX(0); }
.paskamer__kaartje { color: var(--color-ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); padding-top: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-sm); }
.paskamer__naam { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.1; }
.paskamer__prijs { font-size: var(--text-xl); font-variant-numeric: tabular-nums; align-self: baseline; }
.paskamer__met { grid-column: 1 / -1; color: var(--color-muted); font-size: var(--text-sm); }
.paskamer__met button { font: inherit; color: var(--color-accent); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; cursor: pointer; }
.paskamer__met button:hover { text-decoration-thickness: 2px; }

.rek__lijst { border-top: 3px double var(--color-rule-2); }
.rek__kop { font-size: var(--text-sm); color: var(--color-muted); padding-bottom: var(--space-xs); border-bottom: 3px double var(--color-rule-2); }
.rek__lijst { list-style: none; margin: 0; padding: 0; }
.rek__lijst li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.hanger { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--space-md); align-items: center; width: 100%; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); background: none; border: 0; color: var(--color-ink); text-align: left; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.hanger img { grid-row: 1 / 3; width: 52px; height: 69px; object-fit: cover; transform-origin: 50% 0; }
.hanger__naam { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.15; align-self: end; }
.hanger__stof { grid-column: 2; font-size: var(--text-sm); color: var(--color-muted); align-self: start; }
.hanger__prijs { grid-column: 3; grid-row: 1 / 3; font-variant-numeric: tabular-nums; }
.hanger:hover { background: var(--color-paper-2); }
.hanger:active { background: var(--color-paper-3); }
.hanger[aria-pressed="true"] { background: var(--color-paper-3); }
.hanger[aria-pressed="true"] .hanger__naam { color: var(--color-accent); }

/* van de hanger naar de paskamer */
.foto { padding-block: var(--section-gap-s); }
.dubbel { box-sizing: content-box; height: 2px; border: 0; border-block: var(--rule-hair) solid var(--color-rule-2); margin: 0 0 var(--space-2xl); }
.foto__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: end; }
.foto__tekst { align-self: center; display: grid; gap: var(--space-lg); }
.foto__tekst h2 { font-size: var(--text-section); }
.foto__optie { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.foto__optie a, .winkel__links a, .voet a { color: var(--color-accent); }
.foto__optie a:hover, .winkel__links a:hover, .voet a:hover { text-decoration-thickness: 2px; }
.foto figure { margin: 0; }
.foto img, .winkel__foto img { border: var(--rule-hair) solid var(--color-rule); width: 100%; }
figcaption { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-xs); }

/* het rek als lijst */
.lijst { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.lijst__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
.lijst h2 { font-size: var(--text-section); }
.stukken { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--color-rule-2); }
.stukken li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.stuk { width: 100%; background: none; border: 0; color: var(--color-ink); text-align: left; cursor: pointer; font: inherit; display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 4rem; gap: var(--space-lg); align-items: baseline; padding: var(--space-md) var(--space-xs); transition: background-color var(--dur-micro) var(--ease-out); }
.stuk:hover { background: var(--color-paper-3); }
.stuk:hover .stuk__naam { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.stuk:active { background: var(--color-paper); }
.stuk__naam { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; }
.stuk__regel { color: var(--color-ink-2); }
.stuk__prijs { text-align: right; font-variant-numeric: tabular-nums; }

/* het gordijn als band: passen in de winkel */
.passen { background: var(--color-curtain); color: var(--color-curtain-ink); padding-block: var(--section-gap-s); }
.passen__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); }
.passen h2 { font-size: var(--text-section); color: var(--color-curtain-ink); }
.passen__grid > div p { margin-top: var(--space-lg); max-width: 34ch; font-size: var(--text-lead); line-height: 1.45; }
.formulier { display: grid; gap: var(--space-lg); }
.formulier fieldset { border: 0; margin: 0; padding: 0; }
.formulier legend { padding: 0; margin-bottom: var(--space-sm); font-weight: 500; }
.vinkjes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-curtain-ink) 40%, transparent); }
.vinkjes label { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; border-bottom: var(--rule-hair) solid color-mix(in oklab, var(--color-curtain-ink) 40%, transparent); cursor: pointer; }
.vinkjes input { width: 20px; height: 20px; accent-color: var(--color-curtain-ink); margin: 0; }
.velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.veld { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.veld input, .veld select { min-height: 48px; padding: var(--space-xs) var(--space-sm); background: var(--color-curtain-2); color: var(--color-curtain-ink); border: var(--rule-hair) solid color-mix(in oklab, var(--color-curtain-ink) 55%, transparent); border-radius: 0; font-size: var(--text-md); }
.veld input:hover, .veld select:hover { border-color: var(--color-curtain-ink); }
.passen :focus-visible { outline-color: var(--color-curtain-ink); }
.formulier .knop { justify-self: start; }
.melding { font-size: var(--text-sm); }
.melding:empty { display: none; }

/* korter maken, verzenden, ruilen */
.korter { padding-block: var(--section-gap-s); }
.korter__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); }
.korter h2 { font-size: var(--text-section); max-width: 12ch; }
.feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 3px double var(--color-rule-2); }
.feiten div { padding: var(--space-lg) var(--space-lg) 0 0; }
.feiten div + div { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.feiten dt { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; }
.feiten dd { margin: var(--space-sm) 0 0; color: var(--color-ink-2); }

/* de winkel */
.winkel { padding-block: 0 var(--section-gap-s); }
.winkel__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); align-items: start; }
.winkel__foto { margin: 0; }
.winkel h2 { font-size: var(--text-section); }
.winkel__adres { margin-top: var(--space-md); font-size: var(--text-lead); }
.tijden { width: 100%; margin-top: var(--space-lg); border-collapse: collapse; border-top: 3px double var(--color-rule-2); }
.tijden th, .tijden td { padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: left; font-weight: 400; }
.tijden td { text-align: right; }
.tijden tr.vandaag th, .tijden tr.vandaag td { font-weight: 600; color: var(--color-accent); }
.winkel__links { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); }

/* voet: een brief */
.voet { padding-block: var(--space-xl) var(--space-2xl); }
.voet .dubbel { margin-bottom: var(--space-xl); }
.voet__brief { font-family: var(--font-display); font-size: var(--text-display-s); line-height: 1.05; }
.voet__brief span { display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-md); color: var(--color-muted); }
.voet__rij { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.voet__bron { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* computer: rustiger maten op een laag scherm */
@media (max-height: 820px) and (min-width: 60.01rem) { .paskamer__raam { max-height: 62vh; } .hanger img { width: 44px; height: 58px; } .hanger { grid-template-columns: 44px minmax(0, 1fr) auto; } }

/* tablet en telefoon */
@media (max-width: 60rem) {
  .held__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .held__tekst h1 { max-width: 12ch; }
  .paskamer__raam { max-height: none; }
  .rek__lijst { display: grid; grid-auto-flow: column; grid-auto-columns: 8.5rem; overflow-x: auto; gap: var(--space-sm); scroll-snap-type: x mandatory; padding-bottom: var(--space-xs); }
  .rek__lijst li { border: 0; scroll-snap-align: start; }
  .hanger { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: var(--space-xs); border-bottom: 3px solid transparent; }
  .hanger img { grid-row: auto; width: 100%; height: auto; aspect-ratio: 3 / 4; margin-bottom: var(--space-xs); }
  .hanger__naam, .hanger__stof, .hanger__prijs { grid-column: 1; grid-row: auto; font-size: var(--text-sm); }
  .hanger__naam { font-size: var(--text-md); }
  .hanger[aria-pressed="true"] { border-bottom-color: var(--color-accent); }
  .foto__grid, .lijst__grid, .passen__grid, .korter__grid, .winkel__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .foto__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .foto__tekst { grid-column: 1 / -1; }
  .feiten { grid-template-columns: minmax(0, 1fr); }
  .feiten div, .feiten div + div { padding: var(--space-lg) 0 var(--space-md); border-left: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
}
@media (max-width: 40rem) {
  .kop__rij { flex-wrap: wrap; gap: 0; padding-block: var(--space-xs); }
  .kop__nav { width: 100%; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
  .kop__nav a { white-space: nowrap; }
  .kop__rek { display: none; }
  .merk { font-size: var(--text-xl); }
  .held__acties .knop { white-space: normal; }
  .wk__rij span { display: none; }
  .vinkjes, .velden { grid-template-columns: minmax(0, 1fr); }
  .vinkjes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stuk { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-md); }
  .stuk__regel { grid-column: 1 / -1; grid-row: 2; }
  .stuk__prijs { grid-column: 2; grid-row: 1; }
  .held__acties .knop { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .gordijn { display: none; } }