/* pozornice.hr — redesign tokens
   Extracted from the redesign pages (homepage, category, planner, product).
   Load once, before any component CSS. Values are the ones the designs use;
   the graphite scale follows the brand foundations, the light surfaces are
   the configurator palette agreed in review. */

:root {
  /* ——— surfaces ——————————————————————————————————————— */
  --poz-page:            #FFFFFF;   /* page ground */
  --poz-panel:           #F2F4F6;   /* inset panel / alternating band */
  --poz-panel-2:         #F7F8F9;   /* second alternating band */
  --poz-plate:           #E9ECEF;   /* image plate behind a product */
  --poz-ink:             #0C0D10;   /* darkest surface (dark bands, footer top) */
  --poz-ink-2:           #101114;   /* dark tile / footer */
  --poz-ink-3:           #15171B;   /* dark tile, hover */

  /* ——— hairlines ————————————————————————————————————— */
  --poz-line:            #DFE3E7;   /* structural hairline on light */
  --poz-line-soft:       #E9ECEF;   /* internal divider on light */
  --poz-line-dark:       #24272D;   /* hairline on dark */
  --poz-line-dark-soft:  #1E2127;

  /* ——— text ————————————————————————————————————————— */
  --poz-text:            #16171B;   /* primary on light */
  --poz-text-2:          #5F6772;   /* secondary on light — 5.3:1 */
  --poz-text-3:          #8B929E;   /* secondary on dark — 6.28:1 */
  --poz-text-on-dark:    #FFFFFF;
  --poz-text-on-dark-2:  #B3BAC5;   /* lead copy on dark — 12.3:1 */
  --poz-text-muted-dark: #3D434C;   /* hairlines and decorative glyphs ONLY —
                                        1.95:1 on #0C0D10. Never text of any
                                        size. Muted text on dark is
                                        --poz-text-3 (6.2:1). */

  /* Do not use #B3BAC5 for text on light (1.96:1) — it is a hairline value. */

  /* ——— accent ————————————————————————————————————————
     The category hue doubles as the UI accent. Graphics use --poz-accent;
     ACCENT-COLOURED TEXT must use the -ink (on light) or -tint (on dark)
     variant, or it fails contrast at 9px. */
  --poz-accent:          #0066cc;
  --poz-accent-ink:      #004e9c;   /* accent text on light, and press state */
  --poz-accent-tint:     #56A6EE;   /* accent text on dark — ~7:1 */

  /* ——— category accents (wayfinding only, never CTA fill) ——— */
  --acc-stage-decks:     #0066cc;
  --acc-choir:           #c026d3;
  --acc-event:           #cc5500;
  --acc-lifting:         #dc2626;
  --acc-truss:           #1f8a5b;
  --acc-cable:           #ca8a04;
  --acc-barrier:         #b7d500;   /* Zastitne ograde - matches the mega menu */
  --acc-connector:       #007a70;   /* Kablovi i konektori - matches the mega menu */
  --acc-lighting:        #7c3aed;
  --acc-arch-lighting:   #0891b2;
  --acc-laser:           #65a30d;

  /* Ink-shifted twins for accent-coloured TEXT on light surfaces.
     Each is its hue darkened ~46%; measured 7.2–12.0:1 on #FFFFFF/#F2F4F6. */
  --acc-stage-decks-ink: #003d7a;
  --acc-choir-ink:       #6c1577;
  --acc-event-ink:       #6e2e00;
  --acc-lifting-ink:     #771515;
  --acc-truss-ink:       #114a31;
  --acc-cable-ink:       #6d4a02;
  --acc-barrier-ink:     #5c6b00;
  --acc-connector-ink:   #005a52;
  --acc-lighting-ink:    #431f80;
  --acc-arch-ink:        #044a5f;
  --acc-laser-ink:       #375808;

  /* Tint twins for accent-coloured TEXT on DARK surfaces.
     Each is its hue mixed toward white until it clears 7:1 on #0C0D10.
     The ink twins above are for LIGHT surfaces only — using them on a
     dark band lands at 1.8–2.4:1. */
  --acc-stage-decks-tint:    #61a0df;   /* 7.0:1 on #0C0D10 */
  --acc-choir-tint:          #d776e3;   /* 7.0:1 on #0C0D10 */
  --acc-event-tint:          #db884d;   /* 7.1:1 on #0C0D10 */
  --acc-lifting-tint:        #ea7b7b;   /* 7.0:1 on #0C0D10 */
  --acc-truss-tint:          #5eab89;   /* 7.1:1 on #0C0D10 */
  --acc-cable-tint:          #cd9011;   /* 7.0:1 on #0C0D10 */
  --acc-barrier-tint:        #9cb81f;   /* 7.1:1 on #0C0D10 */
  --acc-connector-tint:      #35b3a5;   /* 7.0:1 on #0C0D10 */
  --acc-lighting-tint:       #af87f4;   /* 7.0:1 on #0C0D10 */
  --acc-arch-lighting-tint:  #3ca8c2;   /* 7.0:1 on #0C0D10 */
  --acc-laser-tint:          #73ab23;   /* 7.0:1 on #0C0D10 */

  /* ——— state ————————————————————————————————————————— */
  --poz-ok:              #1f8a5b;
  --poz-warn:            #cc5500;

  /* ——— type ————————————————————————————————————————— */
  --poz-font-display: Michroma, sans-serif;          /* 400 only */
  --poz-font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --poz-font-mono:    'IBM Plex Mono', monospace;    /* labels, specs, numerals */

  /* Michroma is the principal face: nav, eyebrows, titles, numbers, buttons.
     Plex Sans is body copy only. Plex Mono is technical labels and readouts. */

  --poz-eyebrow:      400 9px/1.5 var(--poz-font-display);
  --poz-eyebrow-mono: 400 8px/1.5 var(--poz-font-mono);
  --poz-label:        400 9px/1.6 var(--poz-font-mono);
  --poz-spec:         400 12px/1.5 var(--poz-font-mono);
  --poz-body:         400 14px/1.72 var(--poz-font-body);
  --poz-body-sm:      400 12px/1.7 var(--poz-font-body);
  --poz-card-title:   400 12px/1.5 var(--poz-font-display);

  --poz-track-eyebrow: 0.16em;   /* Michroma eyebrows */
  --poz-track-mono:    0.20em;   /* mono uppercase labels */
  --poz-track-title:   0.02em;   /* Michroma headlines */
  --poz-track-btn:     0.13em;

  /* Fluid display sizes as used in the pages */
  --poz-h1:  clamp(26px, 4.4vw, 68px);
  --poz-h2:  clamp(22px, 3vw, 48px);
  --poz-h3:  clamp(17px, 1.8vw, 28px);
  --poz-h4:  clamp(15px, 1.5vw, 23px);

  /* ——— spacing ————————————————————————————————————— */
  --poz-1:  4px;
  --poz-2:  8px;
  --poz-3:  12px;
  --poz-4:  16px;
  --poz-5:  24px;
  --poz-6:  32px;
  --poz-7:  48px;
  --poz-8:  64px;
  --poz-9:  96px;
  --poz-10: 128px;

  --poz-gutter:  clamp(20px, 3.4vw, 56px);   /* page side padding */
  --poz-section: clamp(72px, 7vw, 116px);    /* band vertical padding */
  --poz-max:     1780px;                     /* content max width */

  /* ——— shape ————————————————————————————————————————— */
  --poz-radius-structural: 0;      /* cards, panels, bands, media */
  --poz-radius-control:    4px;    /* buttons, inputs */
  --poz-radius-pill:       999px;  /* tags only */
  --poz-border:            1px solid var(--poz-line);
  --poz-border-dark:       1px solid var(--poz-line-dark);
  --poz-spine:             2px;    /* accent spine / rule thickness */

  /* One shadow only — product photography resting on a surface. */
  --poz-shadow-product: 3px 5px 30px rgba(12, 13, 16, 0.22);

  /* ——— motion ————————————————————————————————————————— */
  --poz-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --poz-dur-hover:   0.32s;
  --poz-dur-press:   0.16s;
  --poz-dur-reveal:  0.9s;
  --poz-dur-draw:    0.7s;   /* accent rule / spine draw */
  --poz-dur-slide:   0.6s;   /* image crossfade */

  /* ——— layout chrome ———————————————————————————————————
     These four — utility, logo, header, anchor — are declared HERE and
     nowhere else. poz-chrome.css composes them; the same NUMBER appearing
     as a literal anywhere outside this block is a second source of truth
     and a bug. (Control sizes are a different matter: a 44px hit target
     or a 48px button is legitimately literal.) The logo height drives the
     header height, which drives the mega panel offset and the anchor
     offset — change the logo and all four follow. */
  /* 0px since 2026-08-03 (Sven: "remove the top small black bar"). The bar is
     gone from header.php, and this token is what every offset derived from it
     reads: .poz-header's `top`, --poz-chrome-h, --poz-anchor-top, and the
     hero's first-viewport height in poz-home-extra.css. Zeroing it IS the
     removal — there is no arithmetic to chase. Put the markup back and restore
     30px to revert.
     NOTE: poz-home-extra.css declares html:root { --poz-utility-h } which
     outranks this :root even though it loads later, so it is zeroed there too.
     Changing this line alone would not have taken. */
  --poz-utility-h:   0px;
  --poz-logo-h:      50px;
  --poz-logo-h-sm:   32px;
  --poz-header-h:    108px;  /* --poz-logo-h + 2 × 16px zraka */
  --poz-header-h-sm: 76px;   /* --poz-logo-h-sm + 2 × 14px */
  --poz-anchor-top:  calc(var(--poz-utility-h) + var(--poz-header-h) + 20px);
  --poz-bp-mobile:   900px;
  --poz-bp-nav:      1180px;
}

/* ——————————————————————————————————————————————————————
   COMPONENT STATES — the three patterns signed off in review.
   Selectors are indicative; keep the values.
   —————————————————————————————————————————————————————— */

/* Button — primary. Ink at rest, accent on hover, deeper accent pressed. */
.poz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 24px;
  border: 1px solid var(--poz-text); border-radius: var(--poz-radius-control);
  background: var(--poz-text); color: #FFFFFF;
  font: 400 9px/1 var(--poz-font-display);
  letter-spacing: var(--poz-track-btn); text-transform: uppercase;
  transition: background var(--poz-dur-hover) var(--poz-ease),
              border-color var(--poz-dur-hover), color var(--poz-dur-hover),
              transform var(--poz-dur-press);
}
.poz-btn:hover { background: var(--poz-accent); border-color: var(--poz-accent); }
.poz-btn:active { background: var(--poz-accent-ink); border-color: var(--poz-accent-ink); transform: scale(0.98); }

/* Button — secondary */
.poz-btn--secondary { background: transparent; color: var(--poz-text); border-color: var(--poz-line); }
.poz-btn--secondary:hover { background: var(--poz-panel); border-color: var(--poz-accent); }
.poz-btn--secondary:active { background: #E4E9EE; border-color: var(--poz-accent-ink); transform: scale(0.98); }

/* Button — ghost */
.poz-btn--ghost { height: auto; padding: 0; border: 0; background: none; color: var(--poz-text-2); gap: 9px; }
.poz-btn--ghost:hover { color: var(--poz-text); background: none; }
.poz-btn--ghost:hover .poz-btn__arrow { transform: translateX(6px); color: var(--poz-accent); }
.poz-btn--ghost:active { color: var(--poz-accent-ink); transform: scale(0.98); }

/* Spec chip — rest / hover / selected / unavailable */
.poz-chip {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid var(--poz-line); background: #FFFFFF; color: var(--poz-text-2);
  font: 400 9px/1 var(--poz-font-display); letter-spacing: 0.1em;
  cursor: pointer; transition: border-color 0.28s, color 0.28s, background 0.28s;
}
.poz-chip:hover { border-color: #B3BAC5; color: var(--poz-text); }
.poz-chip[aria-pressed="true"] { background: var(--poz-text); border-color: var(--poz-text); color: #FFFFFF; }
.poz-chip[disabled] { border-style: dashed; border-color: var(--poz-line-soft); color: #D3D8DE; cursor: default; }

/* Table row — 2px transparent spine turns accent on hover; selected keeps it */
.poz-row {
  border-bottom: 1px solid var(--poz-line-soft);
  border-left: var(--poz-spine) solid transparent;
  background: #FFFFFF;
  transition: background 0.3s, border-left-color 0.3s;
}
.poz-row:hover { background: var(--poz-panel-2); border-left-color: var(--poz-accent); }
.poz-row[aria-selected="true"] { border-left-color: var(--poz-accent); }
.poz-row__head { border-bottom: 1px solid var(--poz-text); }
.poz-row__label { font: var(--poz-eyebrow-mono); letter-spacing: var(--poz-track-mono); text-transform: uppercase; color: var(--poz-text-2); }

/* Section head — the signed-off "spine" variant (option 1f) */
.poz-head { display: grid; grid-template-columns: var(--poz-spine) 1fr; gap: 22px; align-items: start; }
.poz-head__spine { align-self: stretch; background: var(--poz-accent); }
.poz-head__eyebrow { font: var(--poz-eyebrow); letter-spacing: var(--poz-track-eyebrow); text-transform: uppercase; color: var(--poz-text-3); }
.poz-head__title { margin: 16px 0 0; font: 400 var(--poz-h3)/1.3 var(--poz-font-display); letter-spacing: var(--poz-track-title); }
.poz-head__lead { margin: 14px 0 0; max-width: 44ch; font: var(--poz-body); color: var(--poz-text-2); }
/* 32px between a section head and its first content. */

/* Focus — visible on every interactive element, on both grounds */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--poz-accent);
  outline-offset: 3px;
}
[data-dark] :where(a, button, input, textarea, [tabindex]):focus-visible { outline-color: var(--poz-accent-tint); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
}


/* ————————————————————————————————————————————————————————————
   Accent carriers. Put ONE of these on any element that needs a
   category hue — an accordion panel, a tile, a table row, a
   planner row. It exposes two locals:

     var(--acc)      the pure hue — graphics only (rules, spines,
                     tints, bars, dots)
     var(--acc-ink)  the ink-shifted twin — REQUIRED for any text
                     set in the category colour on a light surface

   Never use --acc as a button fill or next to the logo.
   ———————————————————————————————————————————————————————————— */
.poz-acc--stage-decks { --acc: var(--acc-stage-decks); --acc-ink: var(--acc-stage-decks-ink); }
.poz-acc--choir { --acc: var(--acc-choir); --acc-ink: var(--acc-choir-ink); }
.poz-acc--event { --acc: var(--acc-event); --acc-ink: var(--acc-event-ink); }
.poz-acc--lifting { --acc: var(--acc-lifting); --acc-ink: var(--acc-lifting-ink); }
.poz-acc--truss { --acc: var(--acc-truss); --acc-ink: var(--acc-truss-ink); }
.poz-acc--cable { --acc: var(--acc-cable); --acc-ink: var(--acc-cable-ink); }
.poz-acc--barrier { --acc: var(--acc-barrier); --acc-ink: var(--acc-barrier-ink); }
.poz-acc--connector { --acc: var(--acc-connector); --acc-ink: var(--acc-connector-ink); }
.poz-acc--lighting { --acc: var(--acc-lighting); --acc-ink: var(--acc-lighting-ink); }
.poz-acc--arch-lighting { --acc: var(--acc-arch-lighting); --acc-ink: var(--acc-arch-ink); }
.poz-acc--laser { --acc: var(--acc-laser); --acc-ink: var(--acc-laser-ink); }

/* Default accent for anything without a category. */
.poz-acc--default { --acc: var(--poz-accent); --acc-ink: var(--poz-accent-ink); }

/* On a dark band, --acc-ink points at the tint twin instead. This has to be
   written per category: a descendant .poz-acc--* re-declares --acc-ink in its
   own scope, so a single rule on the .poz-dark ancestor cannot reach it. */
.poz-dark .poz-acc--stage-decks, .poz-dark.poz-acc--stage-decks { --acc-ink: var(--acc-stage-decks-tint); }
.poz-dark .poz-acc--choir, .poz-dark.poz-acc--choir { --acc-ink: var(--acc-choir-tint); }
.poz-dark .poz-acc--event, .poz-dark.poz-acc--event { --acc-ink: var(--acc-event-tint); }
.poz-dark .poz-acc--lifting, .poz-dark.poz-acc--lifting { --acc-ink: var(--acc-lifting-tint); }
.poz-dark .poz-acc--truss, .poz-dark.poz-acc--truss { --acc-ink: var(--acc-truss-tint); }
.poz-dark .poz-acc--cable, .poz-dark.poz-acc--cable { --acc-ink: var(--acc-cable-tint); }
.poz-dark .poz-acc--barrier, .poz-dark.poz-acc--barrier { --acc-ink: var(--acc-barrier-tint); }
.poz-dark .poz-acc--connector, .poz-dark.poz-acc--connector { --acc-ink: var(--acc-connector-tint); }
.poz-dark .poz-acc--lighting, .poz-dark.poz-acc--lighting { --acc-ink: var(--acc-lighting-tint); }
.poz-dark .poz-acc--arch-lighting, .poz-dark.poz-acc--arch-lighting { --acc-ink: var(--acc-arch-lighting-tint); }
.poz-dark .poz-acc--laser, .poz-dark.poz-acc--laser { --acc-ink: var(--acc-laser-tint); }
.poz-dark .poz-acc--default, .poz-dark.poz-acc--default { --acc-ink: var(--poz-accent-tint); }

/* ————————————————————————————————————————————————————————————
   R7 — BRAND FOUNDATIONS REVISION (logo package v2)
   Appended last so it wins over the values declared above.

   What changed: the identity ships a named graphite scale, an explicit
   edge-light value, a light page ground that is warm rather than pure
   white, and Sora as the heading + body face (Michroma stays display-only,
   IBM Plex Mono stays technical). There is deliberately no accent hue in
   the brand — the category hues above survive as WAYFINDING ONLY and must
   never sit next to the logo or fill a CTA.
   ———————————————————————————————————————————————————————————— */
:root {
  /* ——— the named graphite scale ——————————————————————— */
  --poz-graphite-900: #0C0D10;   /* page background, dark */
  --poz-graphite-850: #101114;   /* ink; darkest surface */
  --poz-graphite-800: #191C21;   /* elevated surface on dark */
  --poz-graphite-700: #24272D;
  --poz-graphite-600: #3D434C;
  --poz-graphite-500: #5F6772;   /* secondary text on dark */
  --poz-graphite-400: #8B929E;   /* muted text; HR on light */
  --poz-graphite-300: #B3BAC5;
  --poz-graphite-200: #D9DEE5;   /* edge light; borders on dark */
  --poz-graphite-050: #FAFAF8;   /* page background, light */

  /* ——— surfaces re-pointed at the scale ————————————————— */
  --poz-ink-3:        #191C21;   /* elevated dark tile (was #15171B) */
  --poz-ink-raised:   #191C21;   /* semantic alias for the same surface */
  --poz-ground:       #FAFAF8;   /* warm light ground for full-bleed bands */

  /* ——— the edge light ——————————————————————————————————
     Emphasis in this identity is built with weight, scale and a hairline
     highlight — not with colour. This is that hairline. */
  --poz-edge:         #D9DEE5;
  --poz-edge-dark:    rgba(217, 222, 229, 0.16);  /* the same, on graphite */

  /* ——— logo ink (never set the wordmark in live text) ——— */
  --poz-logo-on-dark:    #FFFFFF;
  --poz-logo-on-light:   #16171B;
  --poz-logo-hr-on-dark: #6E7580;
  --poz-logo-hr-on-light:#8B929E;

  /* ——— LUMILAS spectrum ————————————————————————————————
     The parent brand's dash strip, as it appears on the deck skirt.
     Fixed sequence, left → right. Decorative only: never a text colour,
     never a fill behind copy. */
  --poz-spec-1:  #9B5CF6;   /* violet */
  --poz-spec-2:  #7C7CF8;   /* periwinkle */
  --poz-spec-3:  #4D9EF0;   /* blue */
  --poz-spec-4:  #2FD4E8;   /* cyan */
  --poz-spec-5:  #4ADE80;   /* green */
  --poz-spec-6:  #FDE047;   /* yellow */
  --poz-spec-7:  #FBA94C;   /* orange */
  --poz-spec-8:  #F87171;   /* coral */
  --poz-spec-9:  #F43F8E;   /* pink */
  --poz-spec-10: #FC03FB;   /* magenta */
  --poz-spectrum: linear-gradient(90deg,
      #9B5CF6 0%, #7C7CF8 11%, #4D9EF0 22%, #2FD4E8 33%, #4ADE80 44%,
      #FDE047 56%, #FBA94C 67%, #F87171 78%, #F43F8E 89%, #FC03FB 100%);

  /* ——— typography ————————————————————————————————————
     Michroma stays the display face (400 only, 1–2 words). Sora takes
     headings and body. IBM Plex Mono stays technical. */
  /* 2026-09-10: these were 'Sora'. Sora only ever reached the pages the theme
     styles on its own - the home page and the footer - because every component
     built since (product and category pages, O nama, kontakt, the mega menu,
     the configurators, the 3D journeys, the catalogue showcase) sets IBM Plex
     Sans for itself. The site ran two body faces and the HOME page was the odd
     one out, not kontakt (Sven, 2026-09-10). One token settles it.
     IBM Plex Sans had to be ADDED to the Google Fonts request in functions.php
     first: it was never loaded theme-wide, only via per-component @imports in
     the sandbox CSS. Switching this token alone would have fallen back to
     system-ui anywhere those components are absent - and document.fonts.check()
     does NOT catch that, because it answers true for a locally installed Plex.
     It looks correct on a designer's machine and is wrong for every visitor. */
  --poz-font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --poz-font-head:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --poz-track-head:   -0.02em;
  --poz-track-display: 0.02em;
}

/* Sora's cap height and side bearings run a touch wider than IBM Plex Sans
   at the same px, so body copy is nudged back to the design's rhythm. */
:root {
  --poz-body:     400 14px/1.7 var(--poz-font-body);
  --poz-body-sm:  400 12px/1.68 var(--poz-font-body);
}

/* Heading tracking, per the foundations table. Michroma titles keep their
   own positive tracking (set on .poz-head__title etc.); this only reaches
   the Sora-set headings. */
h1, h2, h3, h4, h5, h6 { letter-spacing: var(--poz-track-head); }

/* A hairline edge light — the identity's one emphasis device. */
.poz-edge-top    { box-shadow: inset 0 1px 0 var(--poz-edge-dark); }
.poz-edge-bottom { box-shadow: inset 0 -1px 0 var(--poz-edge-dark); }
.poz-spectrum-rule {
  height: 2px; border: 0; margin: 0;
  background: var(--poz-spectrum);
}

/* ===== PHONE TYPE FLOOR (2026-09-10) =====
   --poz-eyebrow and --poz-label are both 9px. At desktop density that reads as
   a deliberate micro-label; on a 375px phone it is simply too small, and it is
   not only decoration - .poz-btn takes --poz-label, so the site's PRIMARY
   buttons were setting "Pogledaj opremu" and "Zatrazi ponudu" at 9px. 41
   elements on the home page alone were under 11px, most of them buttons.
   Raising the two tokens fixes every eyebrow and every button label at once,
   rather than chasing components one by one. The buttons have fixed heights
   and generous side padding, so the wider text still fits - verified no
   horizontal overflow at 375px afterwards. */
@media (max-width: 600px) {
  :root {
    --poz-eyebrow: 400 11px/1.5 var(--poz-font-display);
    --poz-label:   400 11px/1.6 var(--poz-font-mono);
  }
  /* .poz-btn does NOT read --poz-label - it carries a literal
     `font: 400 9px/1 var(--poz-font-display)`, declared identically in this
     file and again in poz-components.css. Components is enqueued AFTER tokens,
     so an equal-specificity override here would lose on source order: hence
     :root .poz-btn (0,2,0). Only the size is raised; the shorthand's family,
     weight and line-height stand. */
  :root .poz-btn { font-size: 11px; }
  /* the last micro-labels still under the floor: brand-band roles and origins,
     footer micro-copy, the strip kicker. :root:root, not :root - several of these
     are authored as .pzb--grid .pzb__origin, which is also (0,2,0), and their
     files are enqueued after this one, so an equal-specificity override loses on
     source order. Doubling the pseudo-class takes it to (0,3,0). */
  :root:root .pzb__role,
  :root:root .pzb__origin,
  :root:root .pzb__origin2,
  :root:root .poz-brands2__foot,
  :root:root .poz-brands2__eyebrow,
  :root:root .pzk-m,
  :root:root .pzk-brands,
  :root:root .pzk-loc,
  :root:root .pzk-btn,
  :root:root .pzs3-kicker,
  :root:root .pzo2-identity { font-size: 11px; }
  /* Product and family page labels. These live in the sandbox component CSS,
     which is enqueued after the theme, hence :root:root again.
     DELIBERATELY NOT a blanket floor on small/dt/em inside .pztm/.pzfam: those
     pages also use 6-8px type for unit suffixes sitting beside a large numeral
     and for technical annotations on the drawings, where a 60% size jump would
     break the alignment it was tuned to. Those are listed in the audit instead.
     !important because the sandbox component CSS is enqueued after the theme AND
     authored at a deeper specificity than (0,3,0) - without it these stayed at
     7.7px. Kept to this short, unambiguous list rather than a blanket floor. */
  :root:root .pztm-eyebrow,
  :root:root .pztm-btn,
  :root:root .pzfam-kicker { font-size: 11px !important; }
  /* a breadcrumb is navigation - 7.4px is not a readable tap label */
  :root:root .pzfam-crumb,
  :root:root .pzfam-crumb a,
  :root:root .pzfam-crumb span { font-size: 11px !important; }
}