/* ============================================================
   Coolblue app — concept redesign
   Flat surface treatment. Every value below resolves to a token
   in css/tokens.css; no raw hex outside that file.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  color:var(--text-body);
  background:var(--cb-grey-200);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,textarea,select{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer;padding:0;text-align:inherit}
a{color:var(--text-link);text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:0;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}

/* ------------------------------------------------------------
   App shell
   ------------------------------------------------------------ */
#app{
  display:flex;
  flex-direction:column;
  height:100dvh;
  max-width:520px;
  margin:0 auto;
  background:var(--surface-page);
  position:relative;
  overflow:hidden;
  box-shadow:0 0 0 1px var(--cb-grey-300);
}
#chrome{flex:none;z-index:20}
#screen{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
#actionbar:empty{display:none}
#actionbar{
  flex:none;
  background:var(--surface-card);
  border-top:1px solid var(--border-subtle);
  padding:var(--space-4) var(--gutter);
  z-index:15;
}
#tabbar{flex:none}
#tabbar:empty{display:none}

.page{padding:var(--gutter);display:flex;flex-direction:column;gap:var(--space-4)}
.page--flush{padding:0}
.page--center{align-items:center;text-align:center;padding-top:var(--space-9);gap:var(--space-4)}
.page > .bleed{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1)}
.safe-bottom{padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0px))}

/* ------------------------------------------------------------
   Chrome — blue header, app bar, search
   ------------------------------------------------------------ */
.chrome{background:var(--surface-brand);color:var(--text-inverse);padding-top:env(safe-area-inset-top,0px)}

.appbar{
  display:flex;align-items:center;gap:var(--space-3);
  min-height:52px;padding:0 var(--space-2);
}
.appbar__btn{
  width:var(--tap-min);height:var(--tap-min);flex:none;
  display:grid;place-items:center;color:var(--text-inverse);
  border-radius:var(--radius-sm);
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.appbar__btn:active{background:rgba(255,255,255,.14)}
.appbar__title{
  flex:1;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-extrabold);
  letter-spacing:var(--ls-tight);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.appbar__title--pad{padding-left:var(--space-4)}
.appbar__action{
  flex:none;padding:0 var(--space-4);height:var(--tap-min);
  display:grid;place-items:center;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-inverse);
  border-radius:var(--radius-sm);
}
.appbar__action:active{background:rgba(255,255,255,.14)}
.appbar__action[disabled]{opacity:.5}

.brandbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--gutter) 0}
/* The mark carries the same 44px as the icon buttons beside it, so the
   brand is not outweighed by secondary navigation. The row was already
   44px tall — the icon buttons set it — so this costs no header height.
   The logo asset is 86% disc on a blue field the header matches, so the
   image is oversized inside a circular clip: what shows is disc only. */
.brandbar__mark{
  width:var(--tap-min);height:var(--tap-min);flex:none;
  border-radius:var(--radius-circle);overflow:hidden;
  display:grid;place-items:center;
}
/* Scaled rather than sized up: a transform is not layout, so it cannot
   be clamped by the global img max-width or skewed by the track it sits
   in. 1.16 ≈ 1 / 0.86, which lands the disc edge on the clip. */
.brandbar__logo{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.16)}
.brandbar__pay{
  flex:1;min-width:0;font-family:var(--font-slab);font-size:var(--fs-sm);
  font-weight:500;color:var(--cb-blue-100);letter-spacing:var(--ls-normal);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.brandbar__icons{display:flex;gap:var(--space-1);flex:none}
.iconbtn-inverse{
  width:var(--tap-min);height:var(--tap-min);display:grid;place-items:center;
  color:var(--text-inverse);border-radius:var(--radius-sm);position:relative;
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.iconbtn-inverse:active{background:rgba(255,255,255,.14)}

.searchbar{padding:var(--space-3) var(--gutter);display:flex;gap:var(--space-3);align-items:center}
.searchbar__field{
  flex:1;min-width:0;height:var(--control-h-md);background:var(--cb-white);
  border-radius:var(--radius-sm);display:flex;align-items:center;gap:var(--space-3);
  padding:0 var(--space-4);color:var(--text-muted);font-size:var(--fs-sm);
  border:0;width:100%;
}
.searchbar__field span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.searchbar__field svg{color:var(--cb-blue-600);flex:none}
.searchbar__input{
  flex:1;min-width:0;border:0;background:none;outline:0;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-body);
}
.searchbar__input::placeholder{color:var(--text-subtle);font-weight:var(--fw-regular)}
.searchbar__cancel{
  flex:none;color:var(--text-inverse);font-size:var(--fs-sm);font-weight:var(--fw-bold);
  padding:var(--space-2) var(--space-1);
}

/* USP strip under the header — the service promise as layout */
.uspstrip{
  display:flex;gap:var(--space-5);padding:0 var(--gutter) var(--space-3);
  overflow-x:auto;scrollbar-width:none;
}
.uspstrip::-webkit-scrollbar{display:none}
.uspstrip__item{
  display:flex;align-items:center;gap:var(--space-2);flex:none;
  font-size:var(--fs-3xs);font-weight:var(--fw-semibold);color:var(--cb-blue-50);
  white-space:nowrap;
}
.uspstrip__item svg{width:14px;height:14px;flex:none}

/* ------------------------------------------------------------
   Bottom tab bar
   ------------------------------------------------------------ */
.tabbar{
  flex:none;display:flex;background:var(--surface-card);
  border-top:1px solid var(--border-subtle);
  padding-bottom:env(safe-area-inset-bottom,0px);
  z-index:20;
}
.tabbar__item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--space-1);height:56px;color:var(--text-muted);position:relative;
  transition:color var(--duration-fast) var(--ease-standard);
}
.tabbar__item.is-active{color:var(--cb-blue-600)}
.tabbar__label{font-size:var(--fs-3xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-normal)}
.tabbar__item.is-active .tabbar__label{font-weight:var(--fw-extrabold)}
.tabbar__icon{position:relative;display:grid;place-items:center}
.tabbar__badge{
  position:absolute;top:-5px;left:12px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--radius-pill);background:var(--surface-accent);color:var(--text-inverse);
  font-size:10px;font-weight:var(--fw-black);display:grid;place-items:center;
  border:2px solid var(--surface-card);
}

/* ------------------------------------------------------------
   Typography helpers
   ------------------------------------------------------------ */
.display{
  font-size:var(--fs-3xl);font-weight:var(--fw-black);line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);text-transform:uppercase;
}
.title{font-size:var(--fs-2xl);font-weight:var(--fw-extrabold);line-height:var(--lh-snug);letter-spacing:var(--ls-tight)}
.h1{font-size:var(--fs-xl);font-weight:var(--fw-extrabold);line-height:var(--lh-snug);letter-spacing:var(--ls-tight)}
.h2{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.h3{font-size:var(--fs-md);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.h4{font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.body{font-size:var(--fs-md);line-height:var(--lh-normal)}
.small{font-size:var(--fs-sm);line-height:var(--lh-normal)}
.caption{font-size:var(--fs-2xs);line-height:var(--lh-normal)}
.muted{color:var(--text-muted)}
.subtle{color:var(--text-subtle)}
.success{color:var(--text-success)}
.danger{color:var(--text-discount)}
.brand{color:var(--cb-blue-600)}
.slab{font-family:var(--font-slab)}
.strong{font-weight:var(--fw-bold)}
.center{text-align:center}
.dot-orange{color:var(--surface-accent)}
.nowrap{white-space:nowrap}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.section{display:flex;flex-direction:column;gap:var(--space-4)}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}

/* ------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------ */
.row{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.row--top{align-items:flex-start}
.row--baseline{align-items:baseline}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-width:0}
.stack{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.stack--tight{gap:var(--space-2)}
.stack--loose{gap:var(--space-5)}
.grow{flex:1;min-width:0}
.spacer{flex:1}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
/* Bleeds to the screen edge, with the gutter put back as padding so
   the first card lines up with the section heading. The snapport has
   to be inset by that same gutter — without it the first card snaps
   to the border box, the rail loads at scrollLeft:16, and the padding
   it was meant to sit behind is scrolled straight past. */
.hscroll{
  display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x proximity;
  padding:var(--space-1) var(--gutter);margin:0 calc(var(--gutter) * -1);
  scroll-padding-inline:var(--gutter);
  scrollbar-width:none;
}
.hscroll::-webkit-scrollbar{display:none}
.hscroll > *{scroll-snap-align:start;flex:none}
/* Rails already inside a padded card or sheet don't bleed, so they
   drop the gutter — and the snapport inset with it. */
.hscroll--flush{padding-left:0;margin-left:0;scroll-padding-left:0}
.divider{height:1px;background:var(--border-subtle);border:0;margin:0}

/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */
.card{
  background:var(--surface-card);
  border-radius:var(--radius-card);
  box-shadow:var(--elevation-card);
  padding:var(--space-5);
  display:flex;flex-direction:column;gap:var(--space-3);
  min-width:0;
}
.card--tight{padding:var(--space-4)}
.card--flat{box-shadow:none;border:1px solid var(--border-subtle)}
.card--brand{background:var(--surface-brand-soft);box-shadow:none;border:1px solid var(--cb-blue-200)}
.card--accent{background:var(--surface-accent-soft);box-shadow:none;border:1px solid var(--cb-orange-100)}
.card--success{background:var(--cb-green-50);box-shadow:none;border:1px solid #bde3c6}
.card--danger{background:var(--cb-red-50);box-shadow:none;border:1px solid #f4c2c8}
.card--selected{box-shadow:none;border:2px solid var(--border-focus);background:var(--surface-brand-soft)}
.card--muted{opacity:.6}
.card-btn{
  width:100%;text-align:left;
  transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-instant) var(--ease-standard);
}
.card-btn:active{box-shadow:var(--elevation-card-hover);transform:translateY(1px)}

/* ------------------------------------------------------------
   Live order card — open order at the top of Home
   ------------------------------------------------------------ */
.livecard{gap:var(--space-4)}
.livecard__top{display:flex;align-items:flex-start;gap:var(--space-4);min-width:0}

/* A solid medallion so the glyph carries the same weight as the
   three lines of copy beside it. */
.livecard__badge{
  flex:none;width:44px;height:44px;border-radius:var(--radius-circle);
  display:grid;place-items:center;
  background:var(--surface-brand);color:var(--text-inverse);
}
.livecard__head{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);padding-top:var(--space-1)}
.livecard__title{
  font-size:var(--fs-md);font-weight:var(--fw-extrabold);
  line-height:var(--lh-snug);letter-spacing:var(--ls-tight);color:var(--cb-blue-800);
}
/* Day and window are set as two deliberate lines. Run together they
   overflow 375px on the longer weekdays and wrap mid-window, which is
   what made this card read as a wall of grey. */
.livecard__when{display:flex;flex-direction:column;line-height:var(--lh-snug);min-width:0}
.livecard__day{font-size:var(--fs-xs);color:var(--text-muted)}
.livecard__when b{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-body);white-space:nowrap}
.livecard__chev{flex:none;color:var(--cb-blue-600);display:grid;place-items:center;height:44px}

/* Step track — four segments, filled through the current step */
.livecard__track{display:flex;gap:var(--space-2)}
.livecard__seg{
  flex:1;height:4px;border-radius:var(--radius-pill);
  background:var(--cb-blue-100);
}
/* Three tiers. The current step is told apart by colour, not by
   opacity — the pulse below would otherwise carry it up to the
   done blue twice a second. */
.livecard__seg.is-done{background:var(--cb-blue-500)}
.livecard__seg.is-now{background:var(--cb-blue-300)}

.livecard__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  font-size:var(--fs-2xs);color:var(--text-muted);
}
.livecard__step{font-weight:var(--fw-semibold);color:var(--cb-blue-700)}

/* The current segment breathes so the card reads as live. An infinite
   loop needs its own opt-out — the global reduced-motion rule only
   shortens durations, which would make this flicker rather than stop. */
@keyframes livecard-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.livecard__seg.is-now{animation:livecard-pulse 1800ms var(--ease-standard) infinite}
@media (prefers-reduced-motion:reduce){
  .livecard__seg.is-now{animation:none !important}
}

/* List rows inside a card */
.listrow{
  display:flex;align-items:center;gap:var(--space-4);
  min-height:var(--tap-min);width:100%;text-align:left;
  padding:var(--space-3) 0;
}
.listrow + .listrow{border-top:1px solid var(--border-subtle)}
.listrow__icon{width:24px;flex:none;display:grid;place-items:center;color:var(--cb-blue-600)}
.listrow__label{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:var(--fw-semibold)}
.listrow__meta{flex:none;font-size:var(--fs-2xs);color:var(--text-muted)}
.listrow__chev{flex:none;color:var(--text-subtle);display:grid;place-items:center}
.listrow:active{background:var(--cb-grey-50)}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  height:var(--control-h-md);padding:0 var(--space-6);
  border-radius:var(--radius-button);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1;
  transition:var(--transition-control),transform var(--duration-instant) var(--ease-standard);
  white-space:nowrap;
}
.btn--lg{height:var(--control-h-lg);font-size:var(--fs-md);padding:0 var(--space-7)}
.btn--sm{height:var(--control-h-sm);font-size:var(--fs-2xs);padding:0 var(--space-4);gap:var(--space-2)}
.btn--block{display:flex;width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}

.btn--primary{background:var(--action-primary-bg);color:var(--action-primary-text)}
.btn--primary:active{background:var(--action-primary-bg-active)}
.btn--secondary{background:var(--action-secondary-bg);color:var(--action-secondary-text)}
.btn--secondary:active{background:var(--action-secondary-bg-active)}
.btn--outline{background:var(--surface-card);color:var(--text-body);box-shadow:inset 0 0 0 1px var(--border-default)}
.btn--outline:active{background:var(--cb-grey-50)}
.btn--ghost{background:transparent;color:var(--text-body)}
.btn--ghost:active{background:var(--cb-grey-100)}
.btn--danger{background:transparent;color:var(--text-discount);box-shadow:inset 0 0 0 1px currentColor}
.btn--link{
  height:auto;padding:0;background:none;color:var(--action-quiet-text);
  font-weight:var(--fw-bold);gap:var(--space-1);
}
.btn--link:active{color:var(--text-link-hover);transform:none}
.btn__price{font-weight:var(--fw-black);margin-left:auto;padding-left:var(--space-4)}

.iconbtn{
  width:var(--tap-min);height:var(--tap-min);flex:none;display:grid;place-items:center;
  border-radius:var(--radius-button);color:var(--text-body);
  transition:var(--transition-control);
}
.iconbtn--outline{box-shadow:inset 0 0 0 1px var(--border-default);background:var(--surface-card)}
.iconbtn--outline:active{background:var(--cb-grey-50)}
.iconbtn.is-on{color:var(--text-discount)}

/* ------------------------------------------------------------
   Chips / tags / badges
   ------------------------------------------------------------ */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:var(--control-h-sm);padding:0 var(--space-4);flex:none;
  border-radius:var(--radius-pill);background:var(--surface-card);
  box-shadow:inset 0 0 0 1px var(--border-default);
  font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-body);
  transition:var(--transition-control);
}
.chip:active{background:var(--cb-grey-50)}
.chip.is-on{
  background:var(--surface-brand-soft);color:var(--cb-blue-700);
  box-shadow:inset 0 0 0 2px var(--border-focus);font-weight:var(--fw-bold);
}
.chip--count{background:var(--surface-brand);color:var(--text-inverse);box-shadow:none}
.chip--day{
  flex-direction:column;gap:0;height:auto;padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg);line-height:1.25;text-align:center;
}
.chip__n{font-size:var(--fs-md);font-weight:var(--fw-extrabold)}

.badge{
  display:inline-flex;align-items:center;height:20px;padding:0 var(--space-2);
  border-radius:var(--radius-badge);font-size:var(--fs-3xs);font-weight:var(--fw-black);
  letter-spacing:var(--ls-caps);
}
.badge--discount{background:var(--cb-red-500);color:var(--text-inverse)}
.badge--new{background:var(--cb-blue-500);color:var(--text-inverse)}
.badge--deal{background:var(--surface-accent);color:var(--text-inverse)}
.badge--soft{background:var(--cb-grey-100);color:var(--text-muted)}

.tag{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-1) var(--space-3);border-radius:var(--radius-xs);
  background:var(--cb-grey-100);font-size:var(--fs-3xs);font-weight:var(--fw-semibold);
  color:var(--text-muted);
}

/* Segmented control (Actief / Eerder) */
.segmented{display:flex;gap:var(--space-2)}
.segmented .chip{flex:1;justify-content:center}

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.field-col{min-width:0}
.field__label{font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--text-muted)}
.field__hint{font-size:var(--fs-2xs);color:var(--text-muted)}
.field__error{font-size:var(--fs-2xs);color:var(--text-discount);font-weight:var(--fw-semibold)}

.input{
  display:flex;align-items:center;gap:var(--space-3);
  height:var(--control-h-lg);padding:0 var(--space-4);
  background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-input);transition:var(--transition-control);
}
.input:focus-within{border-color:var(--border-focus);box-shadow:var(--shadow-focus)}
.input.is-error{border-color:var(--cb-red-500)}
.input input,.input textarea{
  flex:1;min-width:0;border:0;background:none;outline:0;
  font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--text-body);
}
.input input::placeholder,.input textarea::placeholder{color:var(--text-subtle);font-weight:var(--fw-regular)}
.input--area{height:auto;padding:var(--space-4);align-items:flex-start}
.input--area textarea{resize:none;min-height:72px;font-weight:var(--fw-regular);line-height:var(--lh-normal)}
.input--code input{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase}
.input__affix{flex:none;font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--action-quiet-text)}

.switch{
  width:44px;height:26px;flex:none;border-radius:var(--radius-pill);
  background:var(--cb-grey-300);position:relative;
  transition:background-color var(--duration-normal) var(--ease-standard);
}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:var(--radius-circle);background:var(--cb-white);box-shadow:var(--shadow-xs);
  transition:transform var(--duration-normal) var(--ease-standard);
}
.switch.is-on{background:var(--cb-blue-500)}
.switch.is-on::after{transform:translateX(18px)}

.radio,.checkbox{
  width:22px;height:22px;flex:none;border:2px solid var(--border-default);
  background:var(--surface-card);display:grid;place-items:center;
  transition:var(--transition-control);
}
.radio{border-radius:var(--radius-circle)}
.checkbox{border-radius:var(--radius-xs)}
.radio.is-on{border-color:var(--cb-blue-500)}
.radio.is-on::after{content:"";width:11px;height:11px;border-radius:var(--radius-circle);background:var(--cb-blue-500)}
.checkbox.is-on{border-color:var(--cb-blue-500);background:var(--cb-blue-500);color:var(--cb-white)}
.checkbox svg{width:14px;height:14px;stroke-width:3.2}
.checkbox:not(.is-on) svg{display:none}

.optionrow{
  display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;
  padding:var(--space-4);border-radius:var(--radius-card);background:var(--surface-card);
  box-shadow:var(--elevation-card);min-height:var(--tap-min);
  transition:var(--transition-control);
}
.optionrow.is-on{box-shadow:none;border:2px solid var(--border-focus);background:var(--surface-brand-soft);padding:calc(var(--space-4) - 2px)}
.togglerow{display:flex;align-items:center;gap:var(--space-4);width:100%;min-height:var(--tap-min);text-align:left}
.togglerow + .togglerow{border-top:1px solid var(--border-subtle)}

.stepper{
  display:inline-flex;align-items:center;flex:none;
  border:1px solid var(--border-default);border-radius:var(--radius-pill);
  height:var(--control-h-sm);overflow:hidden;background:var(--surface-card);
}
.stepper button{
  width:32px;height:100%;display:grid;place-items:center;color:var(--cb-blue-600);
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.stepper button:active{background:var(--cb-blue-50)}
.stepper button[disabled]{color:var(--text-subtle);pointer-events:none}
.stepper__n{min-width:24px;text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-bold)}

/* ------------------------------------------------------------
   Commerce bits
   ------------------------------------------------------------ */
/* A price must never break across lines. */
.price{font-weight:var(--fw-black);color:var(--text-price);letter-spacing:var(--ls-tight);line-height:1.1;white-space:nowrap}
.price--xl{font-size:var(--fs-3xl)}
.price--lg{font-size:var(--fs-xl)}
.price--md{font-size:var(--fs-md)}
.price--sm{font-size:var(--fs-sm)}
.price__was{font-size:var(--fs-2xs);font-weight:var(--fw-semibold);color:var(--text-muted);text-decoration:line-through}

.rating{display:inline-flex;align-items:center;gap:var(--space-2);white-space:nowrap}
.stars{display:inline-flex;gap:1px}
.stars svg{width:14px;height:14px}
.stars--lg svg{width:18px;height:18px}

.promise{display:flex;flex-direction:column;gap:var(--space-2)}
.promise__line{display:flex;align-items:flex-start;gap:var(--space-3);font-size:var(--fs-sm);line-height:var(--lh-snug)}
.promise__line svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--delivery-ok)}
.promise__line--info svg{color:var(--cb-blue-600)}
.promise__line--muted{color:var(--text-muted)}
.promise__line--muted svg{color:var(--text-subtle)}

/* Service promise card — the same lines as rows you can act on.
   Row padding carries the rhythm, so the list itself has no gap. */
.promise--list{gap:0}
.promise__item + .promise__item{border-top:1px solid var(--border-subtle)}
.promise__row{
  display:flex;align-items:flex-start;gap:var(--space-3);
  width:100%;text-align:left;min-height:var(--tap-min);
  padding:var(--space-3) 0;
  border-radius:var(--radius-sm);
  transition:background-color var(--duration-fast) var(--ease-standard);
}
.promise__row:active{background:var(--cb-grey-50)}
.promise__ic{flex:none;display:grid;place-items:center;height:20px;color:var(--cb-blue-600)}
.promise__ic svg{width:18px;height:18px}
.promise__label{
  flex:1;min-width:0;
  font-size:var(--fs-sm);line-height:var(--lh-snug);
  align-self:center;
}
.promise__chev{flex:none;color:var(--text-subtle);display:grid;place-items:center;height:20px}
.promise__caret{transition:transform var(--duration-normal) var(--ease-standard)}
.promise__item.is-open .promise__caret{transform:rotate(180deg)}

.promise__detail{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);
  padding:0 var(--space-3) var(--space-4) calc(18px + var(--space-3));
  animation:promise-open var(--duration-normal) var(--ease-out);
}
.promise__detail[hidden]{display:none}
@keyframes promise-open{
  from{opacity:0;transform:translateY(-2px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .promise__caret{transition:none}
  .promise__detail{animation:none}
}

/* Product art frame */
.shot{
  background:var(--cb-grey-50);border-radius:var(--radius-md);
  display:grid;place-items:center;overflow:hidden;position:relative;
}
.shot svg{width:100%;height:100%}
.shot--pad{padding:var(--space-3)}

/* Product card — grid variant */
.pcard{
  background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--elevation-card);
  padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);
  text-align:left;width:100%;position:relative;
  transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-instant) var(--ease-standard);
}
.pcard:active{box-shadow:var(--elevation-card-hover);transform:translateY(1px)}
.pcard__shot{height:112px}
.pcard__title{
  font-size:var(--fs-2xs);font-weight:var(--fw-bold);line-height:var(--lh-snug);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(var(--fs-2xs) * 1.2 * 2);
}
.pcard__flag{position:absolute;top:var(--space-3);left:var(--space-3);z-index:1}
.pcard__heart{position:absolute;top:var(--space-1);right:var(--space-1);z-index:1;width:36px;height:36px;display:grid;place-items:center;color:var(--text-subtle)}
.pcard__heart.is-on{color:var(--text-discount)}

/* Product card — row variant */
.prow{
  display:flex;gap:var(--space-4);width:100%;text-align:left;
  background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--elevation-card);
  padding:var(--space-3);position:relative;
  transition:box-shadow var(--duration-normal) var(--ease-out);
}
.prow:active{box-shadow:var(--elevation-card-hover)}
.prow__shot{width:88px;height:88px;flex:none}
.prow__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}
.prow__title{font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:var(--lh-snug)}

.rail-card{width:132px}
.rail-card .pcard__shot{height:96px}

/* ------------------------------------------------------------
   Hero / campaign
   ------------------------------------------------------------ */
/* Copy and drawn art sit side by side rather than stacked, so the
   headline needs no scrim over a photograph to stay legible — the
   flat-surface rule holds here as it does on every other surface. */
.hero{
  position:relative;display:flex;align-items:center;
  border-radius:var(--radius-xl);overflow:hidden;
  background:var(--surface-card);box-shadow:var(--elevation-card);color:inherit;
  height:180px;
  transition:box-shadow var(--duration-normal) var(--ease-out);
}
.hero:active{box-shadow:var(--elevation-card-hover)}
.hero__body{
  flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:var(--space-2);padding:var(--space-5);
}
.hero__art{flex:none;width:42%;max-width:170px;align-self:stretch;padding:var(--space-4) var(--space-3) var(--space-4) 0}
.hero__art svg{width:100%;height:100%;display:block}
.hero__kicker,.hero__title,.hero__payoff{display:block}
.hero__kicker{font-size:var(--fs-3xs);font-weight:var(--fw-black);letter-spacing:var(--ls-caps);color:var(--surface-accent);text-transform:uppercase}
.hero__title{
  font-size:var(--fs-2xl);font-weight:var(--fw-black);line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-heading-brand);
}
.hero__payoff{font-family:var(--font-slab);font-size:var(--fs-sm);color:var(--cb-navy-400)}

.catbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);
  background:var(--surface-card);border-radius:var(--radius-card);box-shadow:var(--elevation-card);
  padding:var(--space-4) var(--space-2);color:var(--cb-blue-600);
  transition:box-shadow var(--duration-normal) var(--ease-out),transform var(--duration-instant) var(--ease-standard);
}
.catbtn:active{box-shadow:var(--elevation-card-hover);transform:translateY(1px)}
.catbtn span{font-size:var(--fs-3xs);font-weight:var(--fw-bold);color:var(--text-body);text-align:center;line-height:1.2}

/* ------------------------------------------------------------
   Alerts / banners
   ------------------------------------------------------------ */
.alert{
  display:flex;gap:var(--space-3);align-items:flex-start;
  padding:var(--space-4);border-radius:var(--radius-md);
  font-size:var(--fs-sm);line-height:var(--lh-snug);
}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert--info{background:var(--surface-brand-soft);color:var(--cb-blue-800)}
.alert--success{background:var(--cb-green-50);color:var(--cb-green-600)}
.alert--warn{background:var(--cb-yellow-100);color:var(--cb-grey-700)}
.alert--error{background:var(--cb-red-50);color:var(--cb-red-600)}

/* ------------------------------------------------------------
   Order / refund timeline
   ------------------------------------------------------------ */
.timeline{display:flex;flex-direction:column}
.timeline__step{display:flex;gap:var(--space-4);min-height:52px}
.timeline__rail{width:22px;flex:none;display:flex;flex-direction:column;align-items:center}
.timeline__dot{
  width:16px;height:16px;border-radius:var(--radius-circle);flex:none;margin-top:2px;
  border:2px solid var(--border-default);background:var(--surface-card);
  display:grid;place-items:center;color:var(--cb-white);
}
.timeline__dot svg{width:10px;height:10px;stroke-width:3.5;display:none}
.timeline__step.is-done .timeline__dot{background:var(--cb-green-500);border-color:var(--cb-green-500)}
.timeline__step.is-done .timeline__dot svg{display:block}
.timeline__step.is-current .timeline__dot{
  border-color:var(--cb-blue-500);
  box-shadow:0 0 0 4px var(--cb-blue-100);
}
.timeline__line{width:2px;flex:1;background:var(--border-subtle);margin:var(--space-1) 0}
.timeline__step:last-child .timeline__line{display:none}
.timeline__step.is-done .timeline__line{background:var(--cb-green-500)}
.timeline__body{flex:1;min-width:0;padding-bottom:var(--space-5)}
.timeline__step:last-child .timeline__body{padding-bottom:0}
.timeline__title{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.timeline__step:not(.is-done):not(.is-current) .timeline__title{color:var(--text-muted);font-weight:var(--fw-semibold)}
.timeline__meta{font-size:var(--fs-2xs);color:var(--text-muted)}

/* ------------------------------------------------------------
   Totals
   ------------------------------------------------------------ */
.totals{display:flex;flex-direction:column;gap:var(--space-3)}
.totals__row{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--fs-sm)}
.totals__row--grand{
  border-top:1px solid var(--border-subtle);padding-top:var(--space-3);
  font-size:var(--fs-md);font-weight:var(--fw-black);
}
.totals__row--grand:first-child{border-top:0;padding-top:0}

/* ------------------------------------------------------------
   Sheets, dialogs, scrim, toast
   ------------------------------------------------------------ */
#overlay{position:absolute;inset:0;z-index:40;pointer-events:none}
#overlay.is-open{pointer-events:auto}
.scrim{
  position:absolute;inset:0;background:rgba(13,16,17,.5);
  opacity:0;transition:opacity var(--duration-slow) var(--ease-standard);
}
.is-open .scrim{opacity:1}

.sheet{
  position:absolute;left:0;right:0;bottom:0;max-height:88%;
  background:var(--surface-card);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow:var(--elevation-modal);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform var(--duration-slow) var(--ease-standard);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.is-open .sheet{transform:translateY(0)}
.sheet__grip{width:36px;height:4px;border-radius:var(--radius-pill);background:var(--cb-grey-300);margin:var(--space-3) auto var(--space-1)}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--gutter) var(--space-2)}
.sheet__body{flex:1;overflow-y:auto;padding:var(--space-3) var(--gutter) var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}
.sheet__foot{padding:var(--space-4) var(--gutter);border-top:1px solid var(--border-subtle)}

.dialog{
  position:absolute;left:var(--space-7);right:var(--space-7);top:26%;
  background:var(--surface-card);border-radius:var(--radius-xl);
  box-shadow:var(--elevation-modal);padding:var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-4);text-align:center;
  opacity:0;transform:scale(.96);
  transition:opacity var(--duration-normal) var(--ease-standard),transform var(--duration-normal) var(--ease-standard);
}
.is-open .dialog{opacity:1;transform:scale(1)}
.dialog__actions{display:flex;gap:var(--space-3)}
.dialog__actions .btn{flex:1}

#toast{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--space-8);z-index:50;
  pointer-events:none;display:flex;flex-direction:column;gap:var(--space-2);
}
.toast{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface-inverse);color:var(--text-inverse);
  border-radius:var(--radius-md);padding:var(--space-4);
  box-shadow:var(--elevation-menu);font-size:var(--fs-sm);font-weight:var(--fw-semibold);
  pointer-events:auto;
  animation:toast-in var(--duration-slow) var(--ease-out) both;
}
.toast svg{flex:none;color:var(--cb-green-500)}
.toast a,.toast button{color:var(--cb-blue-300);font-weight:var(--fw-bold);margin-left:auto;flex:none}
.toast.is-out{animation:toast-out var(--duration-normal) var(--ease-in) both}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

/* ------------------------------------------------------------
   Search overlay pieces
   ------------------------------------------------------------ */
.suggest{display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;min-height:var(--tap-min);padding:var(--space-2) 0}
.suggest__icon{width:20px;flex:none;color:var(--text-subtle);display:grid;place-items:center}
.suggest__text{flex:1;min-width:0;font-size:var(--fs-sm)}
.suggest__text b{font-weight:var(--fw-extrabold)}
.suggest__go{flex:none;color:var(--text-subtle);display:grid;place-items:center}

/* ------------------------------------------------------------
   Compare table
   ------------------------------------------------------------ */
.compare{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.compare::-webkit-scrollbar{display:none}
.compare table{border-collapse:collapse;width:max-content;min-width:100%}
.compare th,.compare td{
  padding:var(--space-3);font-size:var(--fs-2xs);text-align:left;vertical-align:middle;
  width:136px;min-width:136px;max-width:136px;
}
.compare tbody tr:nth-child(odd){background:var(--cb-grey-50)}
.compare .sticky-col{
  position:sticky;left:0;background:var(--surface-card);z-index:1;
  min-width:98px;width:98px;max-width:98px;font-weight:var(--fw-bold);color:var(--text-muted);
  box-shadow:1px 0 0 var(--border-subtle);
  /* Dutch spec labels are long compound words — let them break. */
  overflow-wrap:anywhere;hyphens:auto;
}
.compare tbody tr:nth-child(odd) .sticky-col{background:var(--cb-grey-50)}
.compare thead .sticky-col{background:var(--surface-card)}
.compare__head{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.compare__shot{width:88px;height:64px}
.compare__best{color:var(--cb-green-600);font-weight:var(--fw-extrabold)}

/* ------------------------------------------------------------
   Map placeholder (store picker / live tracking)
   ------------------------------------------------------------ */
.map{
  position:relative;height:160px;border-radius:var(--radius-card);overflow:hidden;
  background:
    linear-gradient(90deg,rgba(0,0,0,.045) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg,rgba(0,0,0,.045) 1px,transparent 1px) 0 0/28px 28px,
    var(--cb-grey-200);
  box-shadow:var(--elevation-card);
}
.map__road{position:absolute;background:var(--cb-white)}
/* Pins stay in the brand blue; orange is reserved for the one
   commercial CTA per view, never repeated across a map. */
.map__pin{
  position:absolute;transform:translate(-50%,-100%);
  color:var(--cb-grey-400);filter:drop-shadow(0 2px 3px rgba(13,16,17,.2));
}
.map__pin--active{color:var(--cb-blue-600)}
.map__van{
  position:absolute;transform:translate(-50%,-50%);
  width:34px;height:34px;border-radius:var(--radius-circle);
  background:var(--cb-blue-500);color:var(--cb-white);display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(0,144,227,.25),var(--shadow-md);
}
.map__van svg{width:18px;height:18px}
.map__label{
  position:absolute;right:var(--space-3);bottom:var(--space-3);
  background:var(--surface-card);border-radius:var(--radius-sm);
  padding:var(--space-2) var(--space-3);font-size:var(--fs-3xs);font-weight:var(--fw-bold);
  box-shadow:var(--shadow-sm);
}

/* ------------------------------------------------------------
   QR / pickup pass
   ------------------------------------------------------------ */
.qr{
  width:180px;height:180px;padding:var(--space-4);background:var(--cb-white);
  border-radius:var(--radius-lg);box-shadow:var(--elevation-card);
}
.qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}

/* ------------------------------------------------------------
   Empty states & misc
   ------------------------------------------------------------ */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-9) var(--space-5);text-align:center}
.empty__art{width:96px;height:96px;color:var(--cb-blue-200)}
.empty__art svg{width:100%;height:100%}

.avatar{
  width:56px;height:56px;border-radius:var(--radius-circle);flex:none;
  background:var(--cb-blue-100);color:var(--cb-blue-700);
  display:grid;place-items:center;font-size:var(--fs-lg);font-weight:var(--fw-black);
}
.avatar--sm{width:40px;height:40px;font-size:var(--fs-sm)}

.swipe{position:relative;overflow:hidden;border-radius:var(--radius-card);box-shadow:var(--elevation-card)}
.swipe .prow{box-shadow:none;border-radius:0}
.swipe__action{
  position:absolute;top:0;right:0;bottom:0;width:88px;
  background:var(--cb-red-500);color:var(--cb-white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);
  font-size:var(--fs-3xs);font-weight:var(--fw-bold);
  /* Hidden until revealed, so no red sub-pixel bleeds past the closed row. */
  opacity:0;pointer-events:none;
  transition:opacity var(--duration-fast) var(--ease-standard);
}
.swipe.is-open .swipe__action{opacity:1;pointer-events:auto}
.swipe__content{
  position:relative;background:var(--surface-card);
  transition:transform var(--duration-normal) var(--ease-standard);
}
.swipe.is-open .swipe__content{transform:translateX(-88px)}

.pwreq{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-2xs)}
.pwreq svg{width:14px;height:14px;flex:none}
.pwreq.is-ok{color:var(--text-success)}
.pwreq.is-bad{color:var(--text-discount)}
.pwreq:not(.is-ok):not(.is-bad){color:var(--text-muted)}

.gaugebar{height:6px;border-radius:var(--radius-pill);background:var(--cb-grey-200);overflow:hidden}
.gaugebar__fill{height:100%;background:var(--cb-blue-500);border-radius:var(--radius-pill)}

.reviewbars{display:flex;flex-direction:column;gap:var(--space-2)}
.reviewbars__row{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-3xs);color:var(--text-muted)}
.reviewbars__row .gaugebar{flex:1}

.gallery{position:relative;background:var(--cb-grey-50)}
.gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__slide{flex:none;width:100%;scroll-snap-align:center;height:260px;display:grid;place-items:center;padding:var(--space-6)}
.gallery__slide svg{width:100%;height:100%;display:block}
.gallery__dots{position:absolute;bottom:var(--space-4);left:0;right:0;display:flex;justify-content:center;gap:var(--space-2)}
.gallery__dot{width:6px;height:6px;border-radius:var(--radius-circle);background:var(--cb-grey-300)}
.gallery__dot.is-on{background:var(--cb-blue-500);width:16px;border-radius:var(--radius-pill)}
.gallery__count{
  position:absolute;top:var(--space-4);right:var(--space-4);
  background:rgba(13,16,17,.6);color:var(--cb-white);border-radius:var(--radius-pill);
  padding:2px var(--space-3);font-size:var(--fs-3xs);font-weight:var(--fw-bold);
}

.specrow{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-3) 0;font-size:var(--fs-sm)}
.specrow + .specrow{border-top:1px solid var(--border-subtle)}
.specrow dt{color:var(--text-muted);flex:none}
.specrow dd{margin:0;font-weight:var(--fw-bold);text-align:right}

.stickyfilters{
  position:sticky;top:0;z-index:10;background:var(--surface-page);
  padding:var(--space-3) var(--gutter);margin:0 calc(var(--gutter) * -1);
  box-shadow:0 1px 0 var(--border-subtle);
}
.stickyfilters .hscroll{padding:0 var(--gutter);margin:0 calc(var(--gutter) * -1)}

.stepnum{
  width:22px;height:22px;flex:none;border-radius:var(--radius-circle);
  background:var(--cb-blue-500);color:var(--cb-white);
  display:grid;place-items:center;font-size:var(--fs-3xs);font-weight:var(--fw-black);
}
.stepnum.is-done{background:var(--cb-green-500)}

.confetti-check{
  width:88px;height:88px;border-radius:var(--radius-circle);
  background:var(--cb-green-50);color:var(--cb-green-500);
  display:grid;place-items:center;
  animation:pop var(--duration-slow) var(--ease-out) both;
}
.confetti-check svg{width:44px;height:44px;stroke-width:2.5}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

.screen-enter{animation:screen-in var(--duration-normal) var(--ease-out) both}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms !important;transition-duration:1ms !important}
}