/* ============================================================
   Joenit BrandSites — the joenit.com design system.
   Chrome is identical across brands; site.css sets --brand.
   ============================================================ */

/* ---- Poppins, self-hosted (SIL Open Font License 1.1). Same face the
        live site loads from Google Fonts; here it ships with the site so
        the page makes ZERO external requests. ---- */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Poppins-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Poppins-500-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Poppins-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Poppins-600-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Poppins-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Poppins-700-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------------------------------------------------------------
   TOKENS — the ONLY place colour is decided. A raw hex outside this
   block is a bug (same discipline as Visual.cs on the desktop).
   Everything down to --font-display is COPIED VERBATIM from the live
   site's styles.css :root — five domains, one house.
   --------------------------------------------------------------- */
:root {
  /* blues */
  --blue-900:#0c1f3a;   /* deep dark blue base */
  --blue-800:#12294b;
  --blue-700:#1a3a64;
  --blue-600:#234c80;
  --steel:#3a6ea5;      /* steel blue */
  --accent:#2f74e0;     /* bright action blue */
  --accent-hi:#4f93ff;

  /* metal / grey */
  --ink:#14202e;
  --grey-50:#f5f7fa;
  --grey-100:#eceff3;
  --grey-200:#dde2e9;
  --grey-300:#c4ccd6;
  --grey-500:#7b8694;
  --grey-700:#404a57;

  --panel:#ffffff;
  --panel-edge:#e4e8ee;
  --text:#1d2733;
  --text-soft:#566373;

  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(13,27,42,.06), 0 2px 8px rgba(13,27,42,.05);
  --shadow-md:0 6px 18px rgba(13,27,42,.10), 0 2px 6px rgba(13,27,42,.06);
  --shadow-lg:0 18px 50px rgba(13,27,42,.18);

  --maxw:1180px;
  --chrome-h:88px;      /* the LIVE site's chrome; ours is --head-h */

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* ---- brand-site additions (not on the live site) ---- */

  /* IDENTITY — overwritten per site by site.css. Default = Joenit blue,
     so a site.css that failed to write still renders in the house colour
     rather than in nothing. */
  --brand:#2f74e0;

  --band-h:34px;        /* the Joenit family ribbon */
  --head-h:56px;        /* our sticky brand chrome */

  /* text ramp ON the dark blue surfaces (band, price plate, footer) —
     the same values the live hero/footer use */
  --on-dark:#eaf1fb;
  --on-dark-soft:#bcd0ec;
  --on-dark-faint:#7e95b8;
  --on-dark-edge:rgba(255,255,255,.12);

  /* DATA COLOUR, not palette (Wim, 2026-07-27). Availability is a FACT
     about the product, so it may not wear the brand's identity colour:
     painted in --brand, "in stock" came out RED on Totem and read as a
     warning — the opposite of what it says. Green means available,
     everywhere, on every brand. Same green the live catalogue uses for
     its in-stock chip (#1e7f4d), so the family agrees; do not "theme" it. */
  --ok:#1e7f4d;

  /* empty photo slot — the live site's .imgslot hatch */
  --slot:repeating-linear-gradient(45deg, var(--grey-100) 0 11px, var(--grey-200) 11px 22px);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 14px) }
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--grey-50);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none }
img{ max-width:100%; height:auto; display:block }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600;
             line-height:1.15; letter-spacing:-.01em; color:var(--ink) }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem) }

.kicker{ font-size:.72rem; font-weight:700; letter-spacing:.18em;
         text-transform:uppercase; color:var(--brand); margin:0 0 .55rem }

/* skip link — off-screen until focused */
.skip{ position:absolute; left:-9999px; top:auto }
.skip:focus{ left:12px; top:12px; z-index:99; padding:.5rem .9rem;
             background:var(--panel); border:1px solid var(--panel-edge);
             border-radius:var(--radius-sm); box-shadow:var(--shadow-md) }

/* ================= THE JOENIT BAND — the family ribbon =================
   Five domains, one house. Deep --blue-900, above the sticky chrome, on
   every page of every property. The current property is a non-link in
   --accent-hi: you can always see where you are. */
.jband{ background:var(--blue-900); color:var(--on-dark-soft); font-size:.78rem }
.jband__in{ max-width:var(--maxw); margin:0 auto; min-height:var(--band-h);
            padding:.2rem clamp(1rem,4vw,2.5rem);
            display:flex; align-items:center; gap:.2rem .8rem; flex-wrap:wrap }
.jband a{ color:var(--on-dark-soft) }
.jband a:hover{ color:#fff }
.jband__home{ display:inline-flex; align-items:center; gap:.45rem;
              font-weight:700; color:#fff }
.jband__home:hover{ color:#fff }
.jband__mark{ width:17px; height:17px; flex:0 0 auto }
.jband__motto{ font-weight:400; font-style:italic; color:var(--on-dark-faint);
               margin-left:.35rem }
.jband__nav{ margin-left:auto; display:flex; align-items:center;
             gap:.1rem .35rem; flex-wrap:wrap }
.jband__nav a, .jband__here, .jband__more{
             padding:.2rem .45rem; border-radius:7px; white-space:nowrap }
.jband__nav a:hover{ background:rgba(255,255,255,.10) }
.jband__here{ color:var(--accent-hi); font-weight:700 }
.jband__sep{ width:1px; height:14px; background:var(--on-dark-edge); margin:0 .3rem }
.jband__brands{ display:flex; align-items:center; gap:.1rem .35rem; flex-wrap:wrap }
/* "Brands ▾" — a JS-free disclosure (the sites ship no script at all).
   Desktop shows the four brands inline and hides the toggle entirely. */
.jband__toggle{ position:absolute; width:0; height:0; opacity:0 }
.jband__more{ display:none; cursor:pointer; font-weight:700; color:#fff }

/* ========================== STICKY BRAND CHROME =========================
   Glass over light, exactly like the live site's chrome. */
.chrome{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,250,.82));
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--panel-edge);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.chrome__in{ max-width:var(--maxw); margin:0 auto; min-height:var(--head-h);
             padding:.35rem clamp(1rem,4vw,2.5rem);
             display:flex; align-items:center; gap:1rem }
.brand{ display:flex; align-items:center; gap:.55rem }
.brand__mark{ width:28px; height:28px; flex:0 0 auto }
.brand__vu{ width:56px; height:24px; flex:0 0 auto; opacity:.85 }   /* the wink */
.brand__name{ display:block; font-family:var(--font-display); font-weight:600;
              font-size:1.16rem; letter-spacing:-.01em; color:var(--blue-800);
              white-space:nowrap }
.brand__by{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.16em;
            text-transform:uppercase; color:var(--grey-500); margin-top:-2px }
.nav{ margin-left:auto; display:flex; align-items:center; gap:.25rem }
.nav a{ padding:.45rem .7rem; border-radius:9px; font-weight:600;
        font-size:.92rem; color:var(--grey-700); transition:.18s }
.nav a:hover{ background:var(--grey-100); color:var(--ink) }
.lang{ display:inline-flex; gap:2px; padding:3px; margin-left:.4rem;
       border:1px solid var(--panel-edge); border-radius:10px; background:var(--grey-100) }
.lang a{ font-weight:700; font-size:.72rem; letter-spacing:.04em;
         color:var(--grey-500); padding:.26rem .5rem; border-radius:7px }
.lang a:hover{ color:var(--ink) }
.lang a.on{ background:#fff; color:var(--brand); box-shadow:var(--shadow-sm) }

/* ================================ BUTTONS ==============================
   --joenit = leads home to joenit.com (prices, dealers, B-stock)
   --brand  = stays inside this brand site
   --ghost  = neutral; .is-home tints it Joenit blue */
.btn{ display:inline-flex; align-items:center; gap:.4rem;
      padding:.66rem 1.15rem; border-radius:11px; border:1px solid transparent;
      font-weight:700; font-size:.9rem; cursor:pointer; white-space:nowrap;
      transition:.18s }
.btn--sm{ padding:.45rem .8rem; font-size:.82rem; border-radius:9px }
.btn--joenit{ background:linear-gradient(180deg,var(--accent-hi),var(--accent));
              color:#fff; box-shadow:var(--shadow-md) }
.btn--joenit:hover{ filter:brightness(1.07); transform:translateY(-1px) }
.btn--brand{ background:var(--brand); color:#fff; box-shadow:var(--shadow-md) }
.btn--brand:hover{ filter:brightness(1.08); transform:translateY(-1px) }
.btn--ghost{ background:var(--panel); color:var(--ink); border-color:var(--grey-300) }
.btn--ghost:hover{ background:var(--grey-100); border-color:var(--grey-500) }
.btn--ghost.is-home{ color:var(--accent);
                     border-color:color-mix(in srgb, var(--accent) 38%, var(--panel-edge)) }
.btn--ghost.is-home:hover{ background:color-mix(in srgb, var(--accent) 8%, #fff);
                           border-color:var(--accent) }
/* ghost on the dark surfaces (price plate, hero) — the live on-dark ghost */
.plate .btn--ghost, .hero .btn--ghost{
      background:rgba(255,255,255,.08); color:#fff;
      border-color:rgba(255,255,255,.45) }
.plate .btn--ghost:hover, .hero .btn--ghost:hover{ background:rgba(255,255,255,.16) }

/* ================================== HERO ===============================
   The index front page borrows the live home page's deep-blue stage, with
   the brand's own colour in the glow — the family look, this brand's hue.
   Every INNER page (category, product, story) stays light, like the live
   catalogue. */
.hero{
  position:relative; overflow:hidden; color:var(--on-dark);
  background:
    radial-gradient(900px 500px at 82% -10%, color-mix(in srgb, var(--brand) 40%, transparent), transparent 60%),
    radial-gradient(700px 500px at 8% 110%, rgba(58,110,165,.30), transparent 55%),
    linear-gradient(160deg, var(--blue-900), var(--blue-700) 60%, var(--blue-600));
}
.hero::before{ /* brushed-metal sheen */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 7px);
  mix-blend-mode:overlay;
}
.hero .wrap{ position:relative; padding-block:clamp(3rem,7vw,5.5rem) clamp(2.2rem,5vw,3.6rem) }
.hero .kicker{ color:color-mix(in srgb, var(--brand) 45%, #dbe7f7) }
.hero__tag{ font-family:var(--font-display); font-weight:600; color:#dbe7f7;
            font-size:clamp(2.1rem,5.5vw,3.9rem); line-height:1.18; max-width:17ch }
.hero__lead{ max-width:60ch; margin-top:1.3rem; color:#c4d4ea;
             font-size:clamp(1.02rem,1.6vw,1.2rem) }
/* the mood photograph — also reused on category pages, on the LIGHT stage,
   so it carries its own white frame either way */
.hero__mood{ margin-top:clamp(2rem,4vw,3rem); border-radius:var(--radius);
             overflow:hidden; border:1px solid var(--panel-edge);
             background:var(--panel); box-shadow:var(--shadow-md) }
.hero__mood img{ width:100% }

.rule{ height:1px; border:0; margin:0; background:var(--panel-edge) }

/* ============================ SECTION HEADINGS ========================= */
.sec{ padding:clamp(2rem,4.5vw,3.4rem) 0 }
.sec__head{ display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap;
            margin-bottom:1.5rem }
.sec__title{ font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:600 }
.sec__lead{ color:var(--text-soft); max-width:62ch; margin:.7rem 0 0;
            font-size:1.04rem }

/* ======================== CATEGORY TILES (index) ======================= */
.tiles{ display:grid; gap:clamp(1rem,2.2vw,1.5rem);
        grid-template-columns:repeat(auto-fill, minmax(250px,1fr)) }
.tile{ display:block; background:var(--panel); border:1px solid var(--panel-edge);
       border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
       transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease }
.tile:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px);
             border-color:var(--brand) }
.tile__ph{ aspect-ratio:4/3; background:var(--panel); padding:1.1rem;
           display:flex; align-items:center; justify-content:center }
.tile__ph img{ max-width:100%; max-height:100%; object-fit:contain;
               transition:transform .25s ease }
.tile:hover .tile__ph img{ transform:scale(1.04) }
.tile__ph.is-empty{ background:var(--slot) }
.tile__ph.is-empty::after{ content:"♪"; font-family:var(--font-display);
                           font-size:2.6rem; color:var(--grey-500); opacity:.6 }
.tile__cap{ padding:.6rem .9rem 1rem; border-top:1px solid var(--grey-100);
            display:flex; align-items:baseline; justify-content:space-between; gap:.6rem }
.tile__name{ font-family:var(--font-display); font-size:1.02rem; font-weight:600;
             color:var(--ink) }
.tile__count{ font-size:.72rem; font-weight:600; letter-spacing:.04em;
              color:var(--grey-500); white-space:nowrap }

/* ====================== MODEL CARDS (category page) ====================
   The live catalogue's .pcard, verbatim in spirit: white card, photo on
   white, uppercase model name, lift on hover. */
.cards{ display:grid; gap:clamp(1rem,2.4vw,1.8rem);
        grid-template-columns:repeat(auto-fill, minmax(220px,1fr)) }
.card{ display:flex; flex-direction:column; background:var(--panel);
       border:1px solid var(--panel-edge); border-radius:var(--radius);
       overflow:hidden; box-shadow:var(--shadow-sm);
       transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease }
a.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px);
              border-color:var(--brand) }
a.card:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }
.card__ph{ aspect-ratio:4/3; background:var(--panel); padding:1.1rem;
           display:flex; align-items:center; justify-content:center }
.card__ph img{ max-width:100%; max-height:100%; object-fit:contain;
               transition:transform .25s ease }
a.card:hover .card__ph img{ transform:scale(1.04) }
.card__ph.is-empty{ background:var(--slot) }
.card__ph.is-empty::after{ content:"♪"; font-family:var(--font-display);
                           font-size:2.8rem; color:var(--grey-500); opacity:.6 }
.card__body{ padding:.5rem .8rem 1rem; border-top:1px solid var(--grey-100);
             display:flex; flex-direction:column; gap:.3rem; flex:1 }
.card__name{ font-size:.92rem; font-weight:700; letter-spacing:.06em;
             text-transform:uppercase; color:var(--ink); margin:.3rem 0 .1rem }
.card__meta{ display:flex; align-items:center; justify-content:space-between;
             gap:.35rem .7rem; margin-top:auto; flex-wrap:wrap }
.price{ font-variant-numeric:tabular-nums; font-size:1rem; font-weight:700;
        color:var(--ink) }
.price small{ font-size:.72rem; font-weight:600; color:var(--grey-500);
              letter-spacing:.05em }
.price--req{ font-size:.92rem; font-weight:600; font-style:italic;
             color:var(--grey-500) }
.badge{ font-size:.68rem; font-weight:700; letter-spacing:.06em;
        text-transform:uppercase; padding:.18rem .55rem; border-radius:999px;
        white-space:nowrap }
/* GREEN, not --brand: availability is data, not identity (see --ok). */
.badge--stock{ color:var(--ok);
               background:color-mix(in srgb, var(--ok) 10%, #fff);
               border:1px solid color-mix(in srgb, var(--ok) 35%, var(--panel-edge)) }
.badge--soon{ color:var(--grey-500); background:var(--grey-50);
              border:1px solid var(--panel-edge) }

/* =============================== BREADCRUMB ============================ */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
        font-size:.8rem; font-weight:600; color:var(--ink);
        padding:1.1rem 0 .2rem }
.crumb a{ color:var(--grey-700) }
.crumb a:hover{ color:var(--brand) }
.crumb span{ color:var(--grey-300) }

/* ============================= PRODUCT PAGE ============================ */
.prod{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.4rem);
       padding:1.4rem 0 .5rem; align-items:start }
.gallery__hero{ background:var(--panel); border:1px solid var(--panel-edge);
                border-radius:var(--radius); box-shadow:var(--shadow-sm);
                padding:clamp(1.2rem,3vw,2.4rem);
                display:flex; align-items:center; justify-content:center }
.gallery__hero img{ max-height:460px; max-width:100%; width:auto; object-fit:contain }
.gallery__hero.is-empty{ background:var(--slot); min-height:320px }
.gallery__hero.is-empty::after{ content:"♪"; font-family:var(--font-display);
                                font-size:4rem; color:var(--grey-500); opacity:.6 }
.thumbs{ display:flex; gap:.6rem; margin-top:.7rem; flex-wrap:wrap }
.thumbs img{ width:66px; height:66px; object-fit:contain; padding:.35rem;
             background:var(--panel); border:1px solid var(--panel-edge);
             border-radius:var(--radius-sm); cursor:pointer }
.thumbs img:hover{ border-color:var(--brand) }
.thumbs img.is-on{ border-color:var(--brand);
                   outline:1px solid var(--brand); outline-offset:-2px }
.prod__name{ font-family:var(--font-display); font-weight:600; color:var(--ink);
             font-size:clamp(1.8rem,3.6vw,2.8rem) }
.prod__story{ margin-top:1rem; color:var(--text-soft); font-size:1.04rem }
.prod__story p{ margin:0 0 .9em }
.prod__story p:last-child{ margin-bottom:0 }

/* the price plate — deep blue, the same panel the live home page uses for
   "adviesprijzen". Prices are a JOENIT promise, so they wear Joenit blue. */
.plate{ margin-top:1.4rem; padding:1rem 1.15rem; border-radius:var(--radius);
        background:linear-gradient(165deg, var(--blue-700), var(--blue-900));
        border:1px solid #0c1928; box-shadow:var(--shadow-md); color:#fff }
.plate__srp{ font-family:var(--font-display); font-weight:600; font-size:1.6rem;
             font-variant-numeric:tabular-nums; color:#fff }
.plate__srp.price--req{ font-size:1.15rem; color:var(--on-dark-soft) }
.plate__note{ margin-top:.25rem; font-size:.76rem; color:var(--on-dark-soft) }
.plate__act{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.9rem }
.actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.1rem }

/* ---- spec sheet — the live site's clean table idiom ---- */
.specs{ margin-top:.4rem }
.specs__grp{ margin-top:1.2rem; background:var(--panel);
             border:1px solid var(--panel-edge); border-radius:var(--radius);
             overflow:hidden; box-shadow:var(--shadow-sm) }
.specs__grp h3{ font-family:var(--font); font-size:.7rem; font-weight:700;
                letter-spacing:.06em; text-transform:uppercase;
                color:var(--grey-500); background:var(--grey-50);
                padding:.6rem 1.2rem; border-bottom:1px solid var(--panel-edge) }
.spec-table{ width:100%; border-collapse:collapse; font-size:.92rem }
.spec-table th{ text-align:left; font-weight:600; color:var(--text-soft);
                padding:.55rem 1.2rem; width:42%; vertical-align:top;
                border-bottom:1px solid var(--grey-100) }
.spec-table td{ padding:.55rem 1.2rem; color:var(--ink); vertical-align:top;
                font-variant-numeric:tabular-nums;
                border-bottom:1px solid var(--grey-100) }
.spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom:0 }
.spec-table tr:hover th, .spec-table tr:hover td{ background:var(--grey-50) }
.specs__foot{ margin-top:.9rem; font-size:.78rem; color:var(--grey-500) }

/* ============================ IN THE PRESS =============================
   Attributed press coverage, between the story and the specs. The same
   white-panel card system as everything else, so a reviewer's verdict
   sits in the page as evidence rather than as a shouty testimonial box.
   TWO SHAPES, one card: .rev carries a pull quote, .rev--slim is the
   Tier-1 attribution row (no quote, and none is missing). Score and
   award chips wear --brand: they are the publication's verdict about
   THIS brand, not a Joenit promise, so they never take Joenit blue. */
.press__list{ display:grid; gap:clamp(.9rem,2vw,1.3rem); align-items:start;
              grid-template-columns:repeat(auto-fill, minmax(320px,1fr)) }
/* min-width:0 — a grid item's default min-content floor would let one
   long unbreakable string (a score, a URL) widen the whole track and
   push the page sideways on a phone. */
.rev{ background:var(--panel); border:1px solid var(--panel-edge);
      border-radius:var(--radius); box-shadow:var(--shadow-sm);
      padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:.5rem;
      min-width:0; overflow-wrap:break-word }
.rev--slim{ padding:.85rem 1.1rem; gap:.35rem; background:var(--grey-50) }
/* The quote marks live HERE, not in the markup: the text node stays
   exactly the sentence as printed, with nothing glued onto it. */
.rev__q{ font-family:var(--font-display); font-weight:500; color:var(--text);
         font-size:1.02rem; line-height:1.5; margin:0;
         border-left:3px solid var(--brand); padding-left:.85rem }
.rev__q::before{ content:"\201C" }
.rev__q::after{  content:"\201D" }
.rev__by{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.3rem;
          font-size:.84rem; color:var(--text-soft) }
.rev__pre{ font-style:italic }
.rev__pub{ font-weight:700; color:var(--ink); letter-spacing:.01em }
.rev__cty{ color:var(--grey-500) }
.rev__dot{ color:var(--grey-300) }
.rev__date{ font-variant-numeric:tabular-nums }
.rev__chips{ display:flex; flex-wrap:wrap; gap:.35rem }
/* NOT nowrap, unlike .badge: a Score is the publication's OWN wording
   verbatim and is sometimes a whole sentence ('4.5 of 5 ("Gesamt"),
   class ÜBERRAGEND'). Held on one line it is wider than a phone and
   drags the entire page sideways. It wraps. */
.chip{ font-size:.71rem; font-weight:700; letter-spacing:.03em;
       padding:.2rem .55rem; border-radius:999px;
       color:var(--brand);
       background:color-mix(in srgb, var(--brand) 9%, #fff);
       border:1px solid color-mix(in srgb, var(--brand) 32%, var(--panel-edge)) }
.chip--award{ background:color-mix(in srgb, var(--brand) 18%, #fff) }
.rev__note{ font-size:.75rem; color:var(--grey-500) }
.rev__note--tr{ font-style:italic }
.rev__cta{ margin-top:auto; padding-top:.15rem }
.rev__cta a{ font-size:.8rem; font-weight:700; color:var(--accent) }
.rev__cta a:hover{ color:var(--blue-700); text-decoration:underline }

/* ---- where to listen ---- */
.where{ background:var(--panel); border:1px solid var(--panel-edge);
        border-radius:var(--radius); box-shadow:var(--shadow-sm);
        padding:clamp(1.4rem,3vw,2.2rem) }
.where p{ color:var(--text-soft); max-width:60ch; margin:0 0 1.2rem }
.where p:last-child{ margin-bottom:0 }

/* ============================== FOOTER MESH ============================
   Deep blue like the live footer. Three link neighbourhoods: every model
   of THIS site, then the way back to Joenit, then the house brands. */
.footer{ margin-top:clamp(2.5rem,7vw,5.5rem); background:var(--blue-900);
         color:var(--on-dark-soft); border-top:1px solid #0c1928 }
.mesh{ padding:clamp(2rem,5vw,3.4rem) 0 .5rem }
.mesh__title{ font-size:.68rem; font-weight:700; letter-spacing:.24em;
              text-transform:uppercase; color:var(--on-dark-faint);
              margin:0 0 1.1rem }
.mesh__grid{ display:grid; gap:1.4rem 1.9rem;
             grid-template-columns:repeat(auto-fill, minmax(190px,1fr)) }
.mesh__grp h4{ font-family:var(--font-display); font-size:.9rem; font-weight:600;
               color:#fff; margin:0 0 .5rem }
.mesh__grp h4 a{ color:#fff }
.mesh__grp ul{ list-style:none }
.mesh__grp li{ margin:.2rem 0 }
.mesh__grp a{ font-size:.8rem; color:#9fb8d6; letter-spacing:.01em }
.mesh__grp a:hover{ color:#fff }
/* the family block — the way home + the three siblings */
.mesh--fam{ margin-top:1.4rem; padding-top:1.6rem;
            border-top:1px solid var(--on-dark-edge) }
.mesh--fam .mesh__grid{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)) }
.mesh--fam .mesh__grp a{ color:var(--on-dark-soft) }
.mesh--fam .mesh__grp a:hover{ color:#fff }
.mesh__here{ font-size:.8rem; color:var(--accent-hi); font-weight:700 }

.foot{ padding:1.9rem 0 2.8rem; display:flex; flex-wrap:wrap; gap:1.2rem 2.2rem;
       align-items:flex-start; border-top:1px solid var(--on-dark-edge);
       margin-top:1.9rem }
.foot__promote{ flex:1 1 320px }
.foot__promote .plate2{ display:inline-block; margin-bottom:.7rem;
         padding:.35rem .75rem; border-radius:8px; font-size:.74rem;
         font-weight:700; letter-spacing:.06em; color:var(--accent-hi);
         background:color-mix(in srgb, var(--accent) 22%, transparent);
         border:1px solid color-mix(in srgb, var(--accent-hi) 45%, transparent) }
.foot__promote a{ color:var(--accent-hi); font-weight:600 }
.foot__promote p{ color:var(--on-dark-soft); font-size:.85rem; max-width:52ch;
                  margin:.35em 0 }
/* '{K}:promo' — own-voice promotion beside the factual importer line;
   set slightly back so the two do not read as one paragraph. */
.foot__promo{ margin-top:.9em !important; padding-top:.8em;
              border-top:1px solid var(--on-dark-edge) }
.foot__legal{ flex:1 1 260px; font-size:.76rem; color:var(--on-dark-faint);
              line-height:1.7 }
.foot__legal a{ color:var(--on-dark-soft) }
.foot__tm{ font-size:.7rem; color:#6d84a3; margin-top:.6rem }

/* =============================== RESPONSIVE ============================ */
@media (max-width:820px){
  .prod{ grid-template-columns:1fr }
  .nav{ gap:.1rem }
  .nav a{ padding:.4rem .5rem; font-size:.85rem }
}
@media (max-width:560px){
  .brand__vu{ display:none }
  .brand__by{ display:none }
  .nav .nav--hideable{ display:none }
  /* the band collapses: motto out, brands behind a tap (no JS) */
  .jband__motto{ display:none }
  .jband__sep{ display:none }
  .jband__more{ display:inline-block }
  .jband__brands{ display:none; width:100%; padding:.1rem 0 .35rem }
  .jband__toggle:checked ~ .jband__brands{ display:flex }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .tile, .card, .btn, .card__ph img, .tile__ph img{ transition:none }
  .tile:hover, a.card:hover, .btn:hover{ transform:none }
}

/* ============ PRINT: a clean spec sheet (hi-fi people print these) ====== */
@media print{
  .jband, .chrome, .footer, .actions, .plate__act, .thumbs, .where,
  .hero__mood, .lang, .skip{ display:none !important }
  body{ background:#fff; color:#000 }
  .hero{ background:none; color:#000 }
  .hero::before{ display:none }
  .hero__tag, .hero__lead, .hero .kicker{ color:#000 }
  .prod{ grid-template-columns:1fr }
  .card__ph, .tile__ph, .gallery__hero{ background:#fff; box-shadow:none }
  .card, .tile, .specs__grp, .gallery__hero, .where{ box-shadow:none;
                                                     border-color:#bbb }
  /* the press cards PRINT: a spec sheet somebody carries to a dealer is
     stronger with the reviewer's verdict on it. Flattened, and the link
     CTA goes — a printed page cannot be clicked. */
  .rev{ box-shadow:none; border-color:#bbb; break-inside:avoid;
        background:#fff }
  .rev__cta{ display:none }
  .chip{ color:#000; background:none; border-color:#bbb }
  .rev__q{ border-left-color:#bbb; color:#000 }
  .plate{ background:none; color:#000; border:1px solid #bbb; box-shadow:none }
  .plate__srp, .plate__note{ color:#000 }
  .kicker, .specs__grp h3{ color:#000 }
  .specs__grp{ break-inside:avoid }
  a{ color:#000 }
}