/* ============================================================
   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 */
/* THE BRAND'S OWN LOGO (2026-07-29) — the header says who this site is
   about in the brand's own mark, not in our typeface. Height is the ONE
   dimension set (--logo-h, per brand in site.css) so every logo keeps its
   own aspect ratio; the four heights differ so the four DRAWINGS read as
   one weight — see BrandSite.LogoHeightPx. */
.brand__logo{ display:block; height:var(--logo-h,24px); width:auto;
              max-width:190px; object-fit:contain }
.brand__by{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.16em;
            text-transform:uppercase; color:var(--grey-500); margin-top:1px }
/* A HOUSE DOOR (advice. / ensemble.) wears OUR wordmark where an embassy
   wears a marque's — same .brand__logo slot, so the responsive rules and
   --logo-h ladder are shared. It drops the monogram + VU needle that
   precede a brand logo, so the row starts at the wordmark: nudge the
   optical left edge back in line with the band's mark above it. */
.brand--house{ padding-left:2px }
.brand--house .brand__logo{ max-width:230px }
.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 }
/* the same announced increase on a category page — on light ground here,
   so the amber carries its own tint instead of sitting on the blue */
.sec__soon{ max-width:62ch; margin:0 0 26px; padding:.55rem .9rem;
            background:#fff4e0; border-left:4px solid #b35c00;
            border-radius:.35rem; font-size:.92rem; font-weight:600;
            color:#8a4700 }

/* ======================== 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) }

/* ============================== RANGE STRIP ============================ */
/* the other models of this range, one tap away (2026-08-21): chips in
   catalogue order under the crumb, the current one lit. Scrolls sideways
   on a phone with the scrollbar hidden; position:relative so the centring
   script's offsetLeft is measured against the strip itself. */
.range{ position:relative; display:flex; gap:.4rem; align-items:center;
        margin:.45rem 0 0; padding:.15rem 0 .35rem; overflow-x:auto;
        scrollbar-width:none; -webkit-overflow-scrolling:touch; white-space:nowrap }
.range::-webkit-scrollbar{ display:none }
.range__chip{ flex:none; font-size:.78rem; font-weight:600; line-height:1.2;
              color:var(--grey-700); padding:.32rem .8rem; border-radius:999px;
              background:var(--panel); border:1px solid var(--panel-edge);
              text-decoration:none }
.range__chip:hover{ border-color:var(--brand); color:var(--brand) }
.range__chip.is-on{ color:var(--ink); border-color:var(--brand);
                    background:color-mix(in srgb, var(--brand) 14%, #fff) }
.range__chip--all{ color:var(--grey-500); background:transparent; border-style:dashed }
.range__chip--all::after{ content:" →" }

/* ============================= 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 }
/* "read more…" — the way to the brand's own full story (LongStory ST2).
   Written only where a long story exists, so this rule is idle on most
   pages. Joenit blue: it is our page offering their words, and the
   arrow is CSS so the text node stays the translated phrase alone. */
.prod__story .prod__more{ margin:1rem 0 0; font-size:.95rem }
.prod__more a{ color:var(--accent); font-weight:600 }
.prod__more a::after{ content:" →" }
.prod__more a:hover{ text-decoration:underline }

/* THE DATELINE (2026-08-22) — news where the readers already are.
   One line under the model name when this product has current news;
   a product without news gets not one byte of this. It wears the
   BRAND accent, not Joenit blue: it is news about their machine, not
   a price we quote. Kept to one line on purpose — the headline is the
   hook, the article is one tap away, and a second paragraph here
   would compete with the model's own story below it. */
.pnews{ display:flex; flex-wrap:wrap; gap:.15rem .6rem; align-items:baseline;
        margin:.95rem 0 0; padding:.5rem .75rem;
        border-left:3px solid var(--brand);
        background:color-mix(in srgb, var(--brand) 7%, transparent);
        border-radius:0 var(--radius-sm) var(--radius-sm) 0 }
.pnews__meta{ color:var(--text-soft); font-size:.74rem; letter-spacing:.07em;
              text-transform:uppercase; white-space:nowrap }
.pnews__kind{ color:var(--brand); font-weight:600 }
.pnews__h{ font-size:.97rem; line-height:1.35; margin:0 }
.pnews__h a{ color:var(--ink); font-weight:600; text-decoration:none }
.pnews__h a:hover{ color:var(--brand); text-decoration:underline }

/* the same line on the brand HOME, under the hero lead — wider, so it
   keeps the date and the headline on one row until small screens. */
.hnews{ margin:1.1rem 0 0; display:flex; flex-wrap:wrap;
        gap:.2rem .7rem; align-items:baseline }
.hnews__meta{ color:var(--text-soft); font-size:.74rem; letter-spacing:.07em;
              text-transform:uppercase; white-space:nowrap }
.hnews__kind{ color:var(--brand); font-weight:600 }
.hnews__h{ margin:0; font-size:1.02rem; line-height:1.35 }
.hnews__h a{ color:var(--ink); font-weight:600; text-decoration:none;
             border-bottom:1px solid color-mix(in srgb, var(--brand) 45%, transparent) }
.hnews__h a:hover{ color:var(--brand); border-bottom-color:var(--brand) }

/* 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) }
/* "per pair" beside the big number — small print, never a second price */
.plate__srp small{ font-size:.8rem; font-weight:600;
                   letter-spacing:.04em; color:var(--on-dark-soft) }
.plate__note{ margin-top:.25rem; font-size:.76rem; color:var(--on-dark-soft) }
/* an announced price increase, inside the blue plate: amber, because it
   is a heads-up on the promise above it and must not read as small
   print. Data colour (a warning hue), not palette. */
.plate__soon{ margin-top:.5rem; font-weight:600; color:#ffc46b }
.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 }

/* ===================== DEALER DIRECTORY (index) ========================
   Brand × tier, the Rega-enquiries look Wim asked for (2026-07-31):
   plain columns, NO rules, NO boxes — deliberately the one section that
   skips the card system, because 70 names in cards is a wall and in
   plain columns is a directory. The tier name is the column head, so
   the ranking reads at a glance; the town rides behind the name in
   grey. Same shape as the mothership's where2buy brand block, on the
   light stage. */
/* The country prose above the columns (P2, 2026-08-29). Quiet by design:
   it is written for the machine that reads the page, so it must not
   out-shout the directory a human came for. Same measure as .sec__lead,
   one notch smaller, and it stacks as separate <p> so each country is
   its own quotable sentence. */
.dlr__geo{ margin-top:1.05rem; max-width:62ch; display:grid; gap:.3rem }
.dlr__geo p{ color:var(--text-soft); font-size:.95rem; line-height:1.5 }

.dlr{ display:grid; gap:1.7rem clamp(1.4rem,3vw,2.6rem);
      grid-template-columns:repeat(auto-fit, minmax(215px,1fr));
      margin-top:1.6rem; align-items:start }
.dlr__head{ font-family:var(--font); font-size:.7rem; font-weight:700;
            letter-spacing:.18em; text-transform:uppercase;
            color:var(--grey-500); margin:0 0 .7rem }
.dlr__list{ list-style:none }
.dlr__list li{ margin:.34rem 0; font-size:.9rem; line-height:1.45 }
.dlr__name{ font-weight:600; color:var(--ink) }
a.dlr__name:hover{ color:var(--brand); text-decoration:underline }
.dlr__city{ color:var(--grey-500); font-size:.82rem }

/* ========================= FAQ (category pages) ========================
   Question-shaped content for the AI reader (session 20260731 [A3]).
   Plain typography, no accordion — these sites ship no script, and a
   folded answer is read by neither humans nor machines. */
.faq{ display:grid; gap:1.15rem; max-width:72ch }
.faq__q{ font-family:var(--font-display); font-size:1.02rem;
         font-weight:600; color:var(--ink); margin:0 0 .25rem }
.faq__a{ color:var(--text-soft); font-size:.95rem; margin:0 }
.faq__a a{ color:var(--accent); font-weight:600; white-space:nowrap }
.faq__a a:hover{ text-decoration:underline }

/* ============================== 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 }

/* ===================== THE COUNTRY BAR (a soft offer) ==================
   Ported rule for rule from the live site's styles.css .langbar, in the
   theme's own tokens. Drawn by assets/langbar.js (BrandSiteLangBar.cs)
   only when the reader's country speaks another language than the page
   — an OFFER, never a redirect (rule E, 2026-09-03). Bottom centre,
   above everything, slides up once and never nags. */
.langbar{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%,140%);
  z-index:60; display:flex; align-items:center; gap:.9rem;
  max-width:calc(100vw - 24px);
  padding:.6rem .7rem .6rem 1.1rem; border-radius:14px;
  background:linear-gradient(180deg, var(--blue-700), var(--blue-900));
  color:var(--on-dark); border:1px solid var(--blue-900);
  box-shadow:var(--shadow-lg);
  opacity:0; transition:transform .3s ease, opacity .3s ease;
}
.langbar.in{ transform:translate(-50%,0); opacity:1 }
.langbar__txt{ font-weight:600; font-size:.95rem }
.langbar__go{
  border:0; cursor:pointer; font:inherit; font-weight:700; font-size:.9rem;
  color:#fff; padding:.45rem .85rem; border-radius:9px;
  background:linear-gradient(180deg, var(--accent-hi), var(--accent));
}
.langbar__go:hover{ filter:brightness(1.07) }
.langbar__x{
  border:0; background:transparent; color:var(--on-dark-soft); cursor:pointer;
  font-size:1.4rem; line-height:1; padding:.1rem .4rem; border-radius:8px;
}
.langbar__x:hover{ color:#fff; background:var(--on-dark-edge) }

/* =============================== RESPONSIVE ============================ */
@media (max-width:820px){
  .prod{ grid-template-columns:1fr }
  .nav{ gap:.1rem }
  .nav a{ padding:.4rem .5rem; font-size:.85rem }
}
/* ── THE TOOLBAR'S OWN BREAKPOINT (2026-09-02) ────────────────────
   The secondary toolbar links hide HERE, at 760, and not down in the
   560 phone block where they used to sit. That one number was the
   whole defect: below 561 they were hidden and the page fitted, above
   560 all four came back AT ONCE, and there was no width between 561
   and ~760 where they fitted. The header is a nowrap flex row
   (.chrome__in), so they did not wrap — THE WHOLE DOCUMENT scrolled
   sideways, on every page of all six properties, for every visitor on
   a small tablet or a split-screen phone.

   760 IS MEASURED, NOT CHOSEN. Headless Chrome over CDP, the six real
   baked properties in all three languages, viewport driven by
   Emulation.setDeviceMetricsOverride. The width each page needs before
   the full toolbar fits:
       rega en/nl, totem en, chord en, both houses   <= 680
       rega fr, kerr en                                 700
       chord nl, totem nl                               720
       chord fr, kerr nl, totem fr                      740
       kerr fr                                          760  <- worst
   French labels are the long ones ("Où acheter", "Actualités") and
   Kerr's toolbar is the fullest, so kerr/fr sets the number. Anything
   lower leaves that page scrolling sideways; the earlier reading of
   "it clears at 680" came from measuring rega alone.

   WHAT IT COSTS, AND WHY THAT IS THE RIGHT TRADE (Wim, 2026-09-02).
   Between 681 and 760 the four .nav--hideable links now hide where
   today they show. They carry that class precisely because they are
   the ones allowed to go, and nothing becomes unreachable: the Joenit
   band above every page still carries catalogue, dealers, B-stock and
   both house doors, and the footer mesh carries the rest. A hidden
   secondary link beats a page that scrolls sideways.

   Re-measure with the same rig before moving this number: it follows
   the LONGEST label in the LONGEST language, so a renamed nav item can
   invalidate it silently. */
@media (max-width:760px){
  .nav .nav--hideable{ display:none }
}
@media (max-width:560px){
  .brand__vu{ display:none }
  .brand__by{ display:none }
  /* the logo is the LAST thing to shrink and it never disappears: on a
     phone it is the only thing naming the site. Back off ~18% so it and
     the nav still share one row. */
  .brand__logo{ height:calc(var(--logo-h,24px) * .82); max-width:150px }
  /* 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 }
  /* ── THE BAND AT 360 px (2026-09-02) ──────────────────────────
     The two house doors joined the ribbon on 2026-09-02, and on a
     phone they cost a whole extra LINE: measured on the real baked
     pages, the band went from 56 px / 2 rows to 84 px / 3 rows at
     320, 360 and 390 — identical on all four embassies and both
     houses, in every language. Nothing overflowed (this nav has
     always been flex-wrap:wrap, unlike www's own ribbon); it simply
     ate a quarter of the first screen before the page began.

     THE DOORS STAY VISIBLE. Folding them into the "Brands ▾"
     disclosure was the obvious cheap fix and is wrong twice over:
     WEAVE1 placed them OUTSIDE that group precisely so they survive
     the phone collapse, and a door is not a marque — filing Advice
     and Team under a control labelled "Brands" would misname them.
     So the band is made to FIT instead:
       · the nav stops being pushed right by margin-left:auto and
         becomes a flex-basis:0 item, so it shares the first line
         with the Joenit mark instead of wrapping below it whole;
       · one notch smaller with tighter padding, which is what buys
         the five items their single line.
     Back to 56 px / 2 rows at 320-390 — the height it had BEFORE the
     doors, with the doors on it. Nothing above 560 px is touched. */
  .jband{ font-size:.72rem }
  .jband__in{ gap:.1rem .45rem; padding:.15rem .9rem }
  .jband__nav{ margin-left:0; flex:1 1 0; min-width:0; gap:.1rem .2rem;
               justify-content:flex-end }
  .jband__nav a, .jband__here, .jband__more{ padding:.2rem .28rem }
}
@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 }
  /* the bar still appears, it just does not slide */
  .langbar{ transition:none; transform:translate(-50%,0); opacity:1 }
}

/* ============ PRINT: a clean spec sheet (hi-fi people print these) ====== */
@media print{
  .jband, .chrome, .footer, .actions, .plate__act, .thumbs, .where,
  .range, .hero__mood, .lang, .skip, .langbar{ 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 }
}