/* pozornice.hr — mega menu, v2 design
   ===================================================================
   Loads AFTER poz-chrome.css and therefore may override it. Every
   override lives in the OVERRIDES section at the foot of this file and
   carries the reason it exists; nothing above that section overrides.

   Requires poz-tokens.css. No literal colour, font, spacing, radius,
   duration or easing value appears here — where no token fits, the
   closest one is used and the original is noted as `was:`.
   Percentages, ratios, gradient stops and media-query breakpoints stay
   literal by design; they are commented where non-obvious. A bare `1px`
   is the hairline weight — --poz-border is a shorthand and cannot be
   reused when the colour differs, which is the same compromise
   poz-chrome.css makes.

   Structure (markup in inc/chrome-mega.php, behaviour in poz-nav.js):

     .poz-mega                       fixed full-width panel
       .poz-mega__panel              3 columns, hairline separated
         .poz-mega__rail             27%  category list (buttons)
         .poz-mega__subs             42%  second level, 2-col grid
         .poz-mega__preview          31%  plate, title, specs, CTAs
       .poz-mega__band               light grey band, configurator cards

   Tracking note: --poz-track-eyebrow is 0.16em, which is the tracking
   the design uses for every uppercase label in this panel — Michroma
   and mono alike. It is used below for both.
   =================================================================== */


/* ——————————————————————————————————————————————————————————
   PANEL SHELL
   —————————————————————————————————————————————————————————— */

/* 27 / 42 / 31 — the column split from the design. Percentages stay
   literal; minmax(0,1fr) on the middle track keeps long names from
   forcing the grid wider than the panel. */
.poz-mega__panel {
    grid-template-columns: 27% minmax(0, 1fr) 31%;
    max-width: var(--poz-max);
}

@media (max-width: 1560px) {
    .poz-mega__panel { grid-template-columns: 30% minmax(0, 1fr) 31%; }
}
@media (max-width: 1320px) {
    /* The preview drops under the other two and spans both. */
    .poz-mega__panel { grid-template-columns: 32% minmax(0, 1fr); }
    .poz-mega__preview {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: var(--poz-border);
    }
    .poz-mega__stage { max-width: 520px; }   /* was: 520px — keeps the plate from stretching full-bleed */
}


/* ——————————————————————————————————————————————————————————
   SHARED COLUMN HEADER
   A label on the left, a link or readout on the right, hairline under.
   Used by the middle and the right column.
   —————————————————————————————————————————————————————————— */

.poz-mega__colhead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--poz-5);
    padding-bottom: var(--poz-4);
    border-bottom: var(--poz-border);
}

.poz-mega__colhead-label {
    font: var(--poz-eyebrow);
    letter-spacing: var(--poz-track-eyebrow);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--poz-text-3);
}

.poz-mega__colhead-link {
    font: var(--poz-eyebrow);
    letter-spacing: var(--poz-track-eyebrow);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--poz-text);
    transition: color var(--poz-dur-hover) var(--poz-ease);
}
.poz-mega__colhead-link:hover { color: var(--acc-ink); }
.poz-mega__colhead-link .poz-mega__arrow {
    display: inline-block;
    margin-left: var(--poz-2);
    transition: transform var(--poz-dur-hover) var(--poz-ease);
}
.poz-mega__colhead-link:hover .poz-mega__arrow { transform: translateX(var(--poz-1)); }


/* ——————————————————————————————————————————————————————————
   LEFT COLUMN — category rail
   —————————————————————————————————————————————————————————— */

.poz-mega__rail-label {
    margin: 0;
    padding: 0 var(--poz-4) var(--poz-4);   /* was: 0 14px 16px */
    border-bottom: var(--poz-border);
    font: var(--poz-eyebrow-mono);
    letter-spacing: var(--poz-track-mono);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--poz-text-3);
}

.poz-mega__rail-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--poz-2);
}

.poz-mega__cat-name {
    font: var(--poz-card-title);            /* was: 400 11px/1.5 Michroma */
    letter-spacing: var(--poz-track-title);
}


/* ——————————————————————————————————————————————————————————
   MIDDLE COLUMN — second level
   —————————————————————————————————————————————————————————— */

.poz-mega__sub-name {
    font: var(--poz-card-title);
    letter-spacing: var(--poz-track-title);
}


/* ——————————————————————————————————————————————————————————
   RIGHT COLUMN — preview
   —————————————————————————————————————————————————————————— */

/* Crop marks. Four L-shaped corners on the plate, drawn from two
   borders each. Graphic furniture, so the muted-dark hairline token is
   wrong here (light ground) — the structural hairline reads correctly. */
.poz-mega__crop {
    position: absolute;
    width: var(--poz-4);
    height: var(--poz-4);
    pointer-events: none;
    border: 0 solid var(--poz-text-3);
}
.poz-mega__crop--tl { left: var(--poz-3); top: var(--poz-3); border-top-width: var(--poz-spine); border-left-width: var(--poz-spine); }
.poz-mega__crop--tr { right: var(--poz-3); top: var(--poz-3); border-top-width: var(--poz-spine); border-right-width: var(--poz-spine); }
.poz-mega__crop--bl { left: var(--poz-3); bottom: var(--poz-3); border-bottom-width: var(--poz-spine); border-left-width: var(--poz-spine); }
.poz-mega__crop--br { right: var(--poz-3); bottom: var(--poz-3); border-bottom-width: var(--poz-spine); border-right-width: var(--poz-spine); }

/* Manufacturer badge, top right of the plate. One per category; only
   the .is-active one is shown (poz-nav.js toggles them via
   data-poz-subs, the same switch that drives the middle column). */
.poz-mega__badge {
    position: absolute;
    right: var(--poz-3);
    top: var(--poz-3);
    display: none;
    align-items: center;
    gap: var(--poz-2);
    padding: var(--poz-1) var(--poz-3);
    background: var(--poz-page);
    border: var(--poz-border);
    border-radius: var(--poz-radius-structural);
    font: var(--poz-eyebrow-mono);
    letter-spacing: var(--poz-track-mono);
    text-transform: uppercase;
    color: var(--poz-text-2);
}
.poz-mega__badge.is-active { display: inline-flex; }

/* Square accent swatch — a graphic, so the pure hue is correct. */
.poz-mega__badge-swatch {
    display: block;
    flex: 0 0 auto;
    width: var(--poz-1);
    height: var(--poz-1);
    background: var(--acc);
}

/* Short accent rule under the plate — graphic, pure hue. */
.poz-mega__rule {
    display: block;
    width: var(--poz-6);                    /* was: 34px */
    height: var(--poz-spine);
    margin-top: var(--poz-5);
    background: var(--acc);
    transition: background var(--poz-dur-hover) var(--poz-ease);
}

/* Category families line — accent-coloured TEXT, so the ink twin. */
.poz-mega__families {
    margin: var(--poz-3) 0 0;
    font: var(--poz-label);
    letter-spacing: var(--poz-track-eyebrow);
    text-transform: uppercase;
    color: var(--acc-ink);
    transition: color var(--poz-dur-hover) var(--poz-ease);
}

/* Per-category block: spec table plus the two CTAs. Switched by
   poz-nav.js through data-poz-subs, exactly like the middle column. */
.poz-mega__metaset { display: none; }
.poz-mega__metaset.is-active { display: block; }

/* Three-cell bordered table. The 1px grid gaps are drawn by the
   container's own background showing through. */
.poz-mega__specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;                               /* hairline gap, drawn by the ground below */
    margin-top: var(--poz-5);
    background: var(--poz-line-soft);
    border: 1px solid var(--poz-line-soft);
}
.poz-mega__spec-cell {
    display: block;
    padding: var(--poz-3);
    background: var(--poz-page);
}
.poz-mega__spec-key {
    display: block;
    font: var(--poz-eyebrow-mono);
    letter-spacing: var(--poz-track-mono);
    text-transform: uppercase;
    color: var(--poz-text-3);
}
.poz-mega__spec-val {
    display: block;
    margin-top: var(--poz-2);
    font: var(--poz-card-title);            /* was: 400 11px/1 Michroma */
    letter-spacing: var(--poz-track-title);
    color: var(--poz-text);
    overflow-wrap: anywhere;
}

.poz-mega__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--poz-5);
    margin-top: var(--poz-5);
}
/* Ghost only — a category hue is never a CTA fill. */
.poz-mega__ctas .poz-btn--ghost {
    font: var(--poz-label);
    letter-spacing: var(--poz-track-btn);   /* was: 0.14em */
    text-transform: uppercase;
}


/* ——————————————————————————————————————————————————————————
   BOTTOM BAND
   —————————————————————————————————————————————————————————— */

.poz-mega__band {
    background: var(--poz-panel);
    border-top: var(--poz-border);
}
.poz-mega__band-inner {
    max-width: var(--poz-max);
    margin: 0 auto;
    padding: var(--poz-4) var(--poz-gutter) var(--poz-5);
}

.poz-mega__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--poz-3) var(--poz-6);         /* was: 10px 28px */
    padding-bottom: var(--poz-4);
}

.poz-mega__tab {
    display: flex;
    align-items: center;
    gap: var(--poz-3);
    font: var(--poz-eyebrow);
    letter-spacing: var(--poz-track-eyebrow);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--poz-text-2);
    transition: color var(--poz-dur-hover) var(--poz-ease);
}
.poz-mega__tab:hover { color: var(--poz-text); }
.poz-mega__tab.is-active { color: var(--poz-text-3); }

/* Short accent rule in front of the active tab — graphic, pure hue. */
.poz-mega__tab-rule {
    display: block;
    flex: 0 0 auto;
    width: var(--poz-5);                    /* was: 18px */
    height: var(--poz-spine);
    background: var(--acc);
}

.poz-mega__tabs-all {
    margin-left: auto;
    padding-bottom: var(--poz-1);
    border-bottom: 1px solid var(--poz-text);
    font: var(--poz-eyebrow);
    letter-spacing: var(--poz-track-eyebrow);
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--poz-text);
    transition: color var(--poz-dur-hover) var(--poz-ease),
                border-color var(--poz-dur-hover) var(--poz-ease);
}
.poz-mega__tabs-all:hover { color: var(--acc-ink); border-color: var(--acc-ink); }


/* ——————————————————————————————————————————————————————————
   CONFIGURATOR CARDS — dark, blueprint ground, isometric line art
   —————————————————————————————————————————————————————————— */

/* Index top left, arrow top right. */
.poz-conf__head {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--poz-3);
}

.poz-conf__desc {
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--poz-2);
    font: var(--poz-body-sm);               /* was: 400 11px/1.6 IBM Plex Sans */
    color: var(--poz-text-3);
}

.poz-conf__chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: var(--poz-1);
    margin-top: var(--poz-3);
}
.poz-conf__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--poz-1) var(--poz-2);
    border: var(--poz-border-dark);
    border-radius: var(--poz-radius-structural);
    background: var(--poz-ink);
    font: var(--poz-eyebrow-mono);
    letter-spacing: var(--poz-track-mono);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--poz-text-3);
}

/* The isometric illustration. Inline SVG in the markup; sizing,
   colour and motion belong here. */
.poz-conf__ill {
    position: absolute;
    right: var(--poz-4);
    top: var(--poz-5);
    width: 46%;                              /* scales with the card */
    max-width: 132px;                        /* was: 132px — the design's drawn width */
    pointer-events: none;
    transition: transform var(--poz-dur-slide) var(--poz-ease);
}
.poz-conf__ill svg { display: block; width: 100%; height: auto; }
.poz-conf:hover .poz-conf__ill,
.poz-conf:focus-visible .poz-conf__ill { transform: translateY(calc(-1 * var(--poz-1))); }

/* Decorative geometry on a dark ground — this is exactly what the
   muted-dark token exists for. Never used for text. */
.poz-conf__ill .poz-ill__ln {
    fill: none;
    stroke: var(--poz-text-muted-dark);
    stroke-width: 1.25;                      /* hairline weight, ratio to the 132-unit viewBox */
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* Accent stroke — a graphic, so the pure hue is correct. */
.poz-conf__ill .poz-ill__hi {
    fill: none;
    stroke: var(--acc);
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
}


/* ——————————————————————————————————————————————————————————
   REDUCED MOTION
   —————————————————————————————————————————————————————————— */
@media (prefers-reduced-motion: reduce) {
    .poz-conf__ill,
    .poz-mega__colhead-link .poz-mega__arrow { transition: none; }
}


/* ==========================================================
   OVERRIDES OF poz-chrome.css
   Each one is here because the v2 design inverts or moves
   something the earlier build styled. Nothing else is touched.
   ========================================================== */

/* 1. The rail is white in v2, not a grey inset; the ACTIVE row carries
      the grey. chrome.css has these the other way round. */
.poz-mega__rail {
    background: transparent;
    padding: var(--poz-6) var(--poz-5) var(--poz-7) var(--poz-gutter);  /* was: 32px 20px 40px */
}
.poz-mega__cat {
    padding: var(--poz-3) var(--poz-4);     /* was: 13px 14px */
}
.poz-mega__cat:hover { background: var(--poz-panel-2); }
.poz-mega__cat.is-active { background: var(--poz-panel); }

/* 2. The second level is an explicit TWO-column grid in v2, not an
      auto-fit track list, and each row carries its own hairline. */
.poz-mega__subs {
    padding: var(--poz-6) var(--poz-6) var(--poz-7);   /* was: 32px 40px 40px */
    border-right: var(--poz-border);
}
.poz-mega__subgroup.is-active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--poz-7);                    /* was: 0 40px */
    align-content: start;
    margin-top: var(--poz-3);
}
.poz-mega__sub {
    grid-template-columns: var(--poz-5) 1fr;
    gap: var(--poz-4);
    padding: var(--poz-4) 0;                /* was: 15px 0 */
    border-bottom: var(--poz-border);
}
/* Index in mono grey — chrome.css already sets a mono token; v2 uses
   the eyebrow tracking rather than 0.1em. */
.poz-mega__sub-num { letter-spacing: var(--poz-track-eyebrow); }
/* v2 does not slide the row on hover; only the colour changes. */
.poz-mega__sub:hover { padding-left: 0; }

/* 3. The preview column: no search bar above it any more, so it starts
      at the top of the panel and owns its own hairline. */
.poz-mega__preview {
    padding: var(--poz-6) var(--poz-gutter) var(--poz-6) var(--poz-6);  /* was: 30px … 34px 40px */
    border-left: 0;   /* the middle column now draws the divider */
}

/* 4. The plate is a very light gradient ground in v2, not flat white,
      and the shot sits centred on it. */
.poz-mega__stage {
    margin-top: var(--poz-5);
    background: linear-gradient(160deg, var(--poz-page) 0%, var(--poz-plate) 100%);
    border: var(--poz-border);
}

/* 5. The category title is the big Michroma line in v2 (~28px), not a
      13px caption, and it no longer shares a flex row with the count. */
.poz-mega__title {
    display: block;
    margin: var(--poz-4) 0 0;
    font: 400 var(--poz-h3)/1.3 var(--poz-font-display);
    letter-spacing: var(--poz-track-title);
    color: var(--poz-text);
}
.poz-mega__count { letter-spacing: var(--poz-track-eyebrow); }

/* 6. The configurator grid now sits inside the light band, so it needs
      a full border rather than a top hairline, and it is no longer a
      child of the panel grid. */
.poz-conf-grid {
    grid-column: auto;
    border: 1px solid var(--poz-line-dark);
}

/* 7. v2 puts the index and the arrow at the TOP of the card and draws
      the hover rule along the top edge; chrome.css pins both to the
      bottom via .poz-conf__foot, which v2 does not use. */
.poz-conf__rule {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--poz-spine);
    transition: width var(--poz-dur-slide) var(--poz-ease);
}
.poz-conf__arrow { color: var(--poz-text-3); }
.poz-conf:hover .poz-conf__arrow,
.poz-conf:focus-visible .poz-conf__arrow { color: var(--poz-text-on-dark); }
/* Clears the illustration. */
.poz-conf__name { margin-top: var(--poz-8); }   /* was: 62px */
.poz-conf { padding: var(--poz-4) var(--poz-5) var(--poz-5); }

/* ============================================================================
   R2-J — Asortiman overlay: full-window glass wash + right sheet, nine
   category rows with staggered fluid reveal. Opened by [data-poz-cats-open].
   ========================================================================== */
.poz-cats { position: fixed; inset: 0; z-index: 140; }
.poz-cats[hidden] { display: none; }
.poz-cats__wash {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(10, 11, 14, 0.44);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  opacity: 0; transition: opacity 0.45s ease;
}
.poz-cats.is-open .poz-cats__wash { opacity: 1; }
.poz-cats__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(760px, 94vw);
  display: flex; flex-direction: column;
  background: rgba(248, 249, 251, 0.94);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: -40px 0 120px rgba(4, 6, 10, 0.5);
  transform: translateX(102%);
  transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.poz-cats.is-open .poz-cats__sheet { transform: translateX(0); }
.poz-cats__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 34px 20px; border-bottom: 1px solid rgba(22, 23, 27, 0.08);
}
.poz-cats__eyebrow {
  font: var(--poz-eyebrow, 600 10px/1 sans-serif); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--poz-text-2, #4a4e55);
}
.poz-cats__x {
  width: 40px; height: 40px; border: 1px solid rgba(22, 23, 27, 0.12); border-radius: 50%;
  background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--poz-text, #16171b);
  transition: background-color 0.25s, transform 0.25s;
}
.poz-cats__x:hover { background: rgba(22, 23, 27, 0.06); transform: rotate(90deg); }
.poz-cats__list { flex: 1 1 auto; overflow-y: auto; padding: 10px 0; }
.poz-cats__row {
  display: grid; grid-template-columns: 44px 1fr auto 28px; gap: 16px; align-items: center;
  padding: 19px 34px; text-decoration: none; position: relative;
  border-bottom: 1px solid rgba(22, 23, 27, 0.06);
  opacity: 0; transform: translateY(18px);
  transition: background-color 0.25s;
}
.poz-cats.is-open .poz-cats__row {
  animation: pozCatsIn 0.6s cubic-bezier(0.22, 0.8, 0.24, 1) forwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
@keyframes pozCatsIn { to { opacity: 1; transform: translateY(0); } }
.poz-cats__row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc, transparent); opacity: 0; transition: opacity 0.25s;
}
.poz-cats__row:hover { background: rgba(255, 255, 255, 0.85); }
.poz-cats__row:hover::before { opacity: 1; }
.poz-cats__num {
  font: var(--poz-label, 600 10px/1 sans-serif); font-size: 11px; letter-spacing: 0.12em;
  color: var(--acc-ink, var(--poz-text-3, #7c828c));
}
.poz-cats__name {
  display: block;
  font: 400 clamp(17px, 2vw, 22px)/1.25 var(--poz-font-display, sans-serif);
  color: var(--poz-text, #16171b); letter-spacing: 0.01em;
}
.poz-cats__sub { display: block; margin-top: 4px; font: 400 12.5px/1.5 var(--poz-font-body, sans-serif); color: var(--poz-text-3, #7c828c); }
.poz-cats__spec {
  font: 400 11px/1.4 var(--poz-font-mono, monospace); color: var(--poz-text-3, #7c828c);
  text-align: right; max-width: 200px;
}
.poz-cats__arrow {
  font-size: 17px; color: var(--acc-ink, var(--poz-text-3, #7c828c));
  transform: translateX(-6px); opacity: 0; transition: transform 0.3s, opacity 0.3s;
}
.poz-cats__row:hover .poz-cats__arrow { transform: translateX(0); opacity: 1; }
.poz-cats__foot {
  display: flex; gap: 12px; justify-content: flex-end;
  padding: 20px 34px 26px; border-top: 1px solid rgba(22, 23, 27, 0.08);
}
body.poz-cats-lock { overflow: hidden; }
@media (max-width: 700px) {
  .poz-cats__row { grid-template-columns: 34px 1fr 24px; padding: 16px 22px; }
  .poz-cats__spec { display: none; }
  .poz-cats__head, .poz-cats__foot { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .poz-cats__wash, .poz-cats__sheet { transition: none; }
  .poz-cats__sheet { transform: none; }
  .poz-cats.is-open .poz-cats__row { animation: none; opacity: 1; transform: none; }
}

/* ============================================================================
   R2-J2 — Asortiman slider reworked as an accordion (Sven, 2026-08-01):
   rows become expanding items carrying the home-strip elements — category
   photo under its accent tint, subgroup list, colour-coded number and bar.
   Also styles the new header trigger. Overrides parts of the R2-J block.
   ========================================================================== */
.poz-nav__trigger--cats { display: inline-flex; align-items: center; gap: 8px; }
.poz-nav__stack { display: inline-flex; flex-direction: column; gap: 3px; }
.poz-nav__stack i { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.poz-nav__stack i:nth-child(2) { width: 10px; }
.poz-nav__stack i:nth-child(3) { width: 12px; }

.poz-cats__item {
  border-bottom: 1px solid rgba(22, 23, 27, 0.06);
  opacity: 0; transform: translateY(18px);
  position: relative;
}
.poz-cats.is-open .poz-cats__item {
  animation: pozCatsIn 0.6s cubic-bezier(0.22, 0.8, 0.24, 1) forwards;
  animation-delay: calc(0.12s + var(--i, 0) * 0.05s);
}
.poz-cats__item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc, transparent); opacity: 0; transition: opacity 0.25s;
}
.poz-cats__item:hover::before, .poz-cats__item.is-open::before { opacity: 1; }
/* the row is now a plain button head — undo the R2-J link styling */
.poz-cats__row {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  grid-template-columns: 44px 1fr auto 28px;
  opacity: 1; transform: none; animation: none !important;
  border-bottom: 0;
}
.poz-cats__item.is-open .poz-cats__row, .poz-cats__row:hover { background: rgba(255, 255, 255, 0.85); }
.poz-cats__num { color: var(--acc-ink, var(--poz-text-3, #7c828c)); }
.poz-cats__chev {
  width: 9px; height: 9px; justify-self: center;
  border-right: 1.6px solid var(--poz-text-3, #7c828c);
  border-bottom: 1.6px solid var(--poz-text-3, #7c828c);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.24, 1), border-color 0.25s;
}
.poz-cats__item.is-open .poz-cats__chev {
  transform: rotate(225deg) translateY(-1px);
  border-color: var(--acc-ink, var(--poz-text, #16171b));
}
.poz-cats__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 0.8, 0.24, 1);
}
.poz-cats__item.is-open .poz-cats__panel { grid-template-rows: 1fr; }
.poz-cats__panel-clip { overflow: hidden; min-height: 0; }
.poz-cats__panel-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 18px; padding: 6px 34px 24px 34px;
}
.poz-cats__media {
  position: relative; display: block; overflow: hidden; border-radius: 10px;
  aspect-ratio: 16 / 10; background: #E8EAED;
}
.poz-cats__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.poz-cats__item.is-open .poz-cats__media:hover img { transform: scale(1.06); }
.poz-cats__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 17, 0.42) 100%);
}
.poz-cats__tint {
  position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.28;
  background: var(--acc, transparent);
}
.poz-cats__subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.poz-cats__subs a {
  display: block; padding: 6px 0;
  font: 400 12.5px/1.45 var(--poz-font-body, sans-serif);
  color: var(--poz-text-2, #4a4e55); text-decoration: none;
  transition: color 0.2s, padding-left 0.25s;
}
.poz-cats__subs a:hover { color: var(--acc-ink, var(--poz-text, #16171b)); padding-left: 6px; }
.poz-cats__openlink {
  display: inline-block; margin-top: 12px; padding-bottom: 4px; width: max-content;
  font: var(--poz-label, 600 10px/1 sans-serif); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--poz-text, #16171b); text-decoration: none;
  border-bottom: 1px solid var(--acc, var(--poz-line, #D8DAD6));
}
.poz-cats__openlink span { display: inline-block; transition: transform 0.25s; }
.poz-cats__openlink:hover span { transform: translateX(4px); }
@media (max-width: 700px) {
  .poz-cats__row { grid-template-columns: 34px 1fr 24px; }
  .poz-cats__panel-in { grid-template-columns: 1fr; padding: 4px 22px 20px; }
  .poz-nav__trigger--cats > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .poz-cats.is-open .poz-cats__item { animation: none; opacity: 1; transform: none; }
  .poz-cats__panel { transition: none; }
  .poz-cats__chev { transition: none; }
}

/* ============================================================================
   R2-J3 — Asortiman overlay carries the home strip itself (Sven, 2026-08-01):
   full-screen frosted-glass layer, horizontal accordion identical to početna.
   Overrides the R2-J sheet geometry; the R2-J2 accordion styles are dormant.
   ========================================================================== */
.poz-cats__sheet--full {
  left: 0; width: 100%;
  background: rgba(245, 247, 250, 0.62);
  -webkit-backdrop-filter: blur(28px) saturate(1.25);
  backdrop-filter: blur(28px) saturate(1.25);
  border-left: 0;
}
.poz-cats__stripwrap {
  flex: 1 1 auto; min-height: 0; display: flex;
  padding: 0 clamp(14px, 2vw, 36px);
  overflow-y: auto;
}
/* the strip fills the layer and lets the glass read through */
.poz-cats__stripwrap .poz-strip {
  flex: 1 1 auto; width: 100%;
  height: auto; min-height: 100%;
  background: transparent; border-top: 0; border-bottom: 0;
}
.poz-cats__stripwrap .poz-strip__panel {
  background: rgba(255, 255, 255, 0.34);
  border-right-color: rgba(22, 23, 27, 0.08);
}
.poz-cats__stripwrap .poz-strip__veil {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.42) 42%, rgba(255, 255, 255, 0.9) 100%);
}
/* the strip panels stagger in with the sheet */
.poz-cats__stripwrap .poz-strip__panel { opacity: 0; transform: translateY(22px); }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel {
  animation: pozCatsIn 0.65s cubic-bezier(0.22, 0.8, 0.24, 1) forwards;
}
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(1) { animation-delay: 0.10s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(2) { animation-delay: 0.15s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(3) { animation-delay: 0.20s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(4) { animation-delay: 0.25s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(5) { animation-delay: 0.30s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(6) { animation-delay: 0.35s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(7) { animation-delay: 0.40s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(8) { animation-delay: 0.45s; }
.poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel:nth-child(9) { animation-delay: 0.50s; }
@media (max-width: 820px) {
  /* the strip's own mobile grid applies; let the layer scroll */
  .poz-cats__stripwrap .poz-strip { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .poz-cats__stripwrap .poz-strip__panel,
  .poz-cats.is-open .poz-cats__stripwrap .poz-strip__panel { animation: none; opacity: 1; transform: none; }
}

/* ============================================================================
   R2-J4 — stronger frozen glass (Sven, 2026-08-01): the whole layer goes
   partly transparent and the page behind is properly blurred. The dark wash
   stands down — the sheet's own backdrop blur does all the glass work.
   ========================================================================== */
.poz-cats__wash {
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.poz-cats__sheet--full {
  background: rgba(248, 250, 252, 0.32);
  -webkit-backdrop-filter: blur(36px) saturate(1.35);
  backdrop-filter: blur(36px) saturate(1.35);
}
.poz-cats__stripwrap .poz-strip__panel { background: rgba(255, 255, 255, 0.15); }
.poz-cats__stripwrap .poz-strip__img { opacity: 0.85; }
.poz-cats__stripwrap .poz-strip__veil {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.28) 42%, rgba(255, 255, 255, 0.75) 100%);
}
.poz-cats__head { border-bottom-color: rgba(22, 23, 27, 0.1); }
.poz-cats__foot { border-top-color: rgba(22, 23, 27, 0.1); }

/* ============================================================================
   R2-J5 — edge-to-edge accordion + floating close (Sven, 2026-08-01): no head
   bar, no foot, no padding — only the strip on glass; and the open panel goes
   translucent like the rest so the glass reads through category one as well.
   ========================================================================== */
.poz-cats__stripwrap--edge { padding: 0; }
.poz-cats__stripwrap--edge .poz-strip__panel:last-child { border-right: 0; }
/* the open / hovered panel was the one opaque surface left — let it breathe */
.poz-cats__stripwrap .poz-strip__panel:hover .poz-strip__img,
.poz-cats__stripwrap .poz-strip__panel:focus-visible .poz-strip__img,
.poz-cats__stripwrap .poz-strip__panel.is-open .poz-strip__img { opacity: 0.62; }
/* floating close — clearly visible over any panel */
.poz-cats__x--float {
  position: absolute; top: 20px; right: 20px; z-index: 6;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(22, 23, 27, 0.92); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 0 14px 36px rgba(4, 6, 10, 0.42);
  transition: background-color 0.25s, transform 0.25s;
}
.poz-cats__x--float:hover { background: #000; transform: rotate(90deg); }
@media (max-width: 700px) {
  .poz-cats__x--float { top: 12px; right: 12px; width: 44px; height: 44px; }
}

/* ============================================================================
   R2-M — header pass (Sven, 2026-08-01): bigger logo wordmark; the Asortiman
   launcher moves to the right of "Zatraži ponudu" as an attention-catching
   pill with a travelling sheen. The old nav-trigger styles go dormant.
   ========================================================================== */
:root {
  --poz-logo-h: 60px;
  --poz-logo-h-sm: 38px;
  --poz-header-h: 124px;
}
.poz-cats-launch {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 21px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(120deg, #16171b, #2b303a 46%, #16171b);
  color: #fff;
  font: 500 12px/1 var(--poz-font-display, sans-serif);
  letter-spacing: 0.08em; text-transform: uppercase;
  box-shadow: 0 12px 28px -12px rgba(22, 23, 27, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.2s, box-shadow 0.3s;
}
.poz-cats-launch .poz-nav__stack i { background: #fff; }
.poz-cats-launch::after {
  content: ''; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(75deg, transparent 44%, rgba(255, 255, 255, 0.25) 50%, transparent 56%);
  transform: translateX(-70%);
  animation: pozLaunchSheen 4.4s ease-in-out infinite;
}
@keyframes pozLaunchSheen {
  0%, 55% { transform: translateX(-70%); }
  85%, 100% { transform: translateX(70%); }
}
.poz-cats-launch:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -12px rgba(22, 23, 27, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
@media (max-width: 700px) {
  .poz-cats-launch { padding: 12px 14px; }
  .poz-cats-launch > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .poz-cats-launch::after { animation: none; }
  .poz-cats-launch, .poz-cats-launch:hover { transform: none; }
}


/* ============================================================================
   MEGA v6 — glass, two columns, no scroll, and a proper motion layer.

   The panel is transparent: the sections column is frozen glass, the contents
   pane is the same glass with a tint, so the two levels read as depth rather
   than as two flat colours.

   MOTION IS PART OF THE DESIGN HERE, not decoration. Three things move:
     1. the glass itself materialises — blur and tint ramp from nothing, so the
        panel condenses out of the page rather than being switched on;
     2. the section rows slide in from the left, staggered;
     3. the category cards rise in a diagonal wave — PHP writes --i as
        (row * 2 + column), so both columns lift together with a slight lead on
        the left. The same wave replays on every tab switch, because the groups
        crossfade in place instead of being display:none'd.
   Everything uses cubic-bezier(.16, 1, .3, 1) — fast out, long settle. Do not
   mix easings in here; the whole panel reads as one gesture or it reads cheap.

   NOTHING IN THE PANE MAY SCROLL. The category grid has a definite height and
   ceil(n / 2) rows (PHP writes --pzm-rows), each card is sized by its row, and
   the picture is sized by WIDTH in a fixed track — so a longer list shrinks the
   rows and the pictures with them. Do not give the pane overflow-y: auto "just
   in case"; that hides the failure instead of showing it.

   The v1/v2 rules further up still target .poz-mega__* and are dead — the
   markup in inc/chrome-mega.php emits none of those classes. Left in place so
   a rollback is a one-file revert.
   ========================================================================= */
:root { --pzm-ease: cubic-bezier(.16, 1, .3, 1); }

.pzm {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--poz-header-h, 124px);
	bottom: 0;
	z-index: 150;
	opacity: 0;
	pointer-events: none;
	transition: opacity .34s ease;
}
.pzm[hidden] { display: none !important; }
.pzm.is-open { opacity: 1; pointer-events: auto; transition-duration: .3s; }

/* 38 / 62. The left column is a short list and wants air around it far more
   than it wants width; the right column is doing the actual work. */
.pzm__in {
	display: grid;
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	height: 100%;
	background: transparent;
}

/* ----------------------------------------------------------------- sections
   Level one: frozen glass. Near-white, heavily blurred, saturated a little so
   whatever is behind keeps its colour instead of going grey. */
.pzm__nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	padding: clamp(24px, 3.2vw, 56px) clamp(20px, 3vw, 52px);
	overflow-y: auto;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(30px) saturate(150%);
	backdrop-filter: blur(30px) saturate(150%);
	transition: background-color .6s var(--pzm-ease), -webkit-backdrop-filter .6s var(--pzm-ease), backdrop-filter .6s var(--pzm-ease);
}
.pzm__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 18px 22px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--poz-text, #16171B);
	box-sizing: border-box;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font: 400 clamp(19px, 1.7vw, 26px)/1.25 var(--poz-font-display, inherit);
	letter-spacing: 0.005em;
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity .5s var(--pzm-ease), transform .5s var(--pzm-ease), background-color .3s ease;
}
.pzm.is-open .pzm__row {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 38ms + 90ms), calc(var(--i, 0) * 38ms + 90ms), 0s;
}
.pzm__row-l { min-width: 0; }
.pzm__chev {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	opacity: .5;
	transition: opacity .3s ease, transform .45s var(--pzm-ease);
}
.pzm__row:hover { background: rgba(255, 255, 255, .62); }
.pzm__row:hover .pzm__chev { opacity: .9; transform: translateX(4px); }
/* The selected section is a lift in the glass, not a rule or a colour. */
.pzm__row.is-active { background: rgba(255, 255, 255, .84); }
.pzm__row.is-active .pzm__chev { opacity: .9; transform: translateX(3px); }
.pzm__row:focus-visible { outline: 2px solid var(--poz-accent, #dc2626); outline-offset: 2px; }

/* Pinned to the foot of the column. */
.pzm__foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 22px;
	border-radius: 12px;
	color: var(--poz-text, #16171B);
	text-decoration: none;
	font: 400 clamp(15px, 1.15vw, 18px)/1.3 var(--poz-font-display, inherit);
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity .5s var(--pzm-ease), transform .5s var(--pzm-ease), background-color .3s ease;
}
.pzm.is-open .pzm__foot {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 6) * 38ms + 90ms), calc(var(--i, 6) * 38ms + 90ms), 0s;
}
.pzm__foot .pzm__row-l { flex: 1 1 auto; }
.pzm__foot-i { width: 22px; height: 22px; flex: 0 0 auto; opacity: .7; }
.pzm__foot:hover { background: rgba(255, 255, 255, .62); }
.pzm__foot:hover .pzm__chev { opacity: .9; transform: translateX(4px); }

/* -------------------------------------------------------------------- pane
   Level two: the same glass, tinted. Cooler and a shade darker than the
   sections column, which is what makes the two levels read as depth.

   A single grid cell that every group is stacked into, so switching tabs is a
   crossfade in place rather than a display swap. That is also what lets the
   card wave replay on each switch. */
.pzm__pane {
	position: relative;
	display: grid;
	grid-template-areas: 'stack';
	grid-template-rows: minmax(0, 1fr);
	overflow: hidden;
	background: rgba(228, 232, 238, .58);
	-webkit-backdrop-filter: blur(36px) saturate(150%);
	backdrop-filter: blur(36px) saturate(150%);
	border-left: 1px solid rgba(255, 255, 255, .5);
	padding: clamp(18px, 2.2vw, 38px) clamp(20px, 2.6vw, 52px);
	transition: background-color .6s var(--pzm-ease), border-color .6s ease, -webkit-backdrop-filter .6s var(--pzm-ease), backdrop-filter .6s var(--pzm-ease);
}

/* Closed: the glass has not condensed yet. The transition above runs from
   here, which is what makes the panel materialise rather than switch on. */
.pzm:not(.is-open) .pzm__nav {
	background-color: rgba(255, 255, 255, 0);
	-webkit-backdrop-filter: blur(0px) saturate(100%);
	backdrop-filter: blur(0px) saturate(100%);
}
.pzm:not(.is-open) .pzm__pane {
	background-color: rgba(228, 232, 238, 0);
	border-left-color: rgba(255, 255, 255, 0);
	-webkit-backdrop-filter: blur(0px) saturate(100%);
	backdrop-filter: blur(0px) saturate(100%);
}

.pzm__group {
	grid-area: stack;
	display: block;
	min-width: 0;
	min-height: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.pzm__group.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .45s var(--pzm-ease), visibility 0s;
}

/* No backdrop-filter (older Firefox, forced-colors): fall back to opaque, so
   the panel is never unreadable type over live page content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pzm__nav, .pzm:not(.is-open) .pzm__nav { background-color: #fff; }
	.pzm__pane, .pzm:not(.is-open) .pzm__pane { background-color: #EEF1F5; }
}

/* ---------------------------------------------------------- the two columns
   Filled top-to-bottom: items 1..rows in the left column, the rest in the
   right. --pzm-rows comes from PHP as ceil(count / 2); the row count and the
   marked column-tops are computed from the same number, so the category count
   can change without touching this file. */
.pzm__group--cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--pzm-rows, 5), minmax(0, 1fr));
	grid-auto-flow: column;
	column-gap: clamp(24px, 2.8vw, 52px);
}

/* One category: name and its line on the left, the picture on the right. */
.pzm-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(112px, 11.5vw, 156px);
	align-items: center;
	gap: 0 clamp(12px, 1.2vw, 22px);
	min-width: 0;
	min-height: 0;
	border-top: 1px solid rgba(22, 23, 27, .10);
	text-decoration: none;
	color: var(--poz-text, #16171B);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s var(--pzm-ease), transform .55s var(--pzm-ease), border-color .3s ease;
}
/* The wave. --i is (row * 2 + column) from PHP, so the two columns lift
   together with the left leading by half a step. */
.pzm.is-open .pzm__group.is-active .pzm-card {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 28ms + 120ms);
}
/* The first card of either column: no rule above it. PHP marks these. */
.pzm-card--coltop { border-top: 0; }
.pzm-card__t { min-width: 0; overflow: hidden; }
.pzm-card__name {
	display: block;
	font: 400 clamp(14.5px, 1vw, 18px)/1.25 var(--poz-font-display, inherit);
	letter-spacing: 0.005em;
}
.pzm-card__sub {
	display: block;
	margin-top: 4px;
	font: 400 clamp(11.5px, .8vw, 14px)/1.4 var(--poz-font-body, inherit);
	color: var(--poz-text-2, #5F6772);
}
/* Sized by WIDTH in a definite track. Sizing it by height in an auto track is
   what made the pictures collapse to 62–94px in the first two-column build:
   the transferred width never won against the track's fit-content sizing. */
.pzm-card__shot {
	display: block;
	justify-self: end;
	margin: 0;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	max-height: 82%;
}
.pzm-card__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .6s var(--pzm-ease);
}
.pzm-card:hover { border-top-color: rgba(22, 23, 27, .2); }
.pzm-card:hover .pzm-card__shot img { transform: scale(1.06); }
.pzm-card:hover .pzm-card__name { color: var(--poz-text, #16171B); }
.pzm-card:focus-visible { outline: 2px solid var(--poz-accent, #dc2626); outline-offset: 3px; }

/* Configurators: no picture, so they are lines rather than cards, and there
   are only four — an ordinary stack, on the same wave. */
.pzm-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	text-decoration: none;
	color: var(--poz-text, #16171B);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s var(--pzm-ease), transform .55s var(--pzm-ease);
}
.pzm.is-open .pzm__group.is-active .pzm-line {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 34ms + 120ms);
}
.pzm-line + .pzm-line { border-top: 1px solid rgba(22, 23, 27, .10); }
.pzm-line__n { display: block; font: 400 clamp(16px, 1.25vw, 20px)/1.3 var(--poz-font-display, inherit); }
.pzm-line__s { display: block; margin-top: 6px; font: 400 13px/1.5 var(--poz-font-body, inherit); color: var(--poz-text-2, #5F6772); }
.pzm-line:hover .pzm__chev { opacity: .9; transform: translateX(4px); }

/* Reduced motion: the panel still appears and still crossfades, but nothing
   travels and nothing is staggered. */
@media (prefers-reduced-motion: reduce) {
	.pzm, .pzm__nav, .pzm__pane, .pzm__row, .pzm__foot, .pzm__chev,
	.pzm-card, .pzm-line, .pzm-card__shot img {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.pzm__row, .pzm__foot, .pzm-card, .pzm-line { transform: none !important; }
}

@media (max-width: 1100px) {
	/* One column of categories again — two would be 200px each. Here the pane
	   IS allowed to scroll, because the alternative is illegible. */
	.pzm__pane { overflow-y: auto; overscroll-behavior: contain; }
	.pzm__group--cats {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
	}
	.pzm-card { padding: 14px 0; }
	.pzm-card--coltop { border-top: 0; }
	.pzm-card:first-child { border-top: 0; }
	.pzm-card__shot { height: auto; width: 128px; max-width: 40%; max-height: none; }
}

@media (max-width: 900px) {
	/* The sections first, the pane under them, both scrolling with the panel
	   rather than each on their own. */
	.pzm__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.pzm__nav { padding: 14px 16px 8px; gap: 0; overflow: visible; }
	.pzm__row { padding: 12px 14px; font-size: 18px; }
	.pzm__foot { margin-top: 6px; padding: 12px 14px; }
	.pzm__pane { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .5); padding: 10px 16px 32px; }
	.pzm-card { padding: 12px 0; }
	.pzm-card__shot { width: 108px; }
	.pzm-card__sub { margin-top: 3px; }
}


/* ============================================================================
   R2-J6 — Asortiman drops as a band under the menu bar (Sven, 2026-08-02).

   Was: a full-window overlay, the nine-panel accordion at its natural
   400–600px height filling the whole viewport. Now: the same accordion, at
   about half that height, in a sheet that drops from the underside of the
   header — the same footprint language as the mega panel, so the two things
   the header opens behave alike.

   Nothing about the accordion component changes. poz-accordion.css is
   untouched and the strip still works identically on the home page; every
   rule here is scoped to .poz-cats__sheet--band so it cannot leak.

   IT ALSO UNDOES MOST OF R2-J4/J5's TRANSPARENCY, and that is deliberate.
   Those blocks pushed the panels to rgba(255,255,255,.15) with the photo at
   opacity .85 (and .5 again on the receding ones) because the layer covered
   the whole viewport, where the wash read as "frosted glass over the page".
   In a 420px band over a light hero the same numbers leave nine invisible
   panels — the first build of this block rendered as a blank white strip with
   only the close button in it. Glass belongs to the SHEET here; the panels
   inside it are photographs and have to read as photographs.
   ========================================================================= */

/* The wash starts below the header, so the bar itself stays live — you can
   close the band with the same button that opened it, and reach the rest of
   the nav without closing first. */
.poz-cats__wash { top: var(--poz-header-h, 124px); }
/* ...and the ROOT must not swallow clicks over the bar. .poz-cats is
   position: fixed; inset: 0, so once the wash was pulled below the header the
   root was still covering it: pressing Asortiman while the band was down hit
   .poz-cats, not the launcher, and the toggle never ran. Only the wash and the
   sheet are interactive; the root is a positioning box, nothing else. */
.poz-cats { pointer-events: none; }
.poz-cats__wash,
.poz-cats__sheet { pointer-events: auto; }

.poz-cats__sheet--band {
	top: var(--poz-header-h, 124px);
	bottom: auto;
	left: 0;
	width: 100%;
	height: clamp(300px, 44vh, 440px);
	max-height: calc(100vh - var(--poz-header-h, 124px));
	background: rgba(250, 251, 253, .78);
	border-bottom: 1px solid rgba(22, 23, 27, .1);
	box-shadow: 0 26px 60px -28px rgba(4, 6, 10, .38);
	/* Drops, rather than sliding in from the right. */
	transform: translateY(-14px);
	opacity: 0;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .34s ease;
}
.poz-cats.is-open .poz-cats__sheet--band { transform: translateY(0); opacity: 1; }

/* At band height the strip must fill exactly, not overflow: its own
   clamp(400px, 52vh, 600px) is taller than the sheet. */
.poz-cats__sheet--band .poz-cats__stripwrap { overflow: hidden; }
.poz-cats__sheet--band .poz-strip { height: 100%; min-height: 0; }

/* --- the panels read as photographs again (see the note above) --- */
.poz-cats__sheet--band .poz-strip__panel {
	background: rgba(255, 255, 255, .5);
	border-right-color: rgba(22, 23, 27, .1);
}
.poz-cats__sheet--band .poz-strip__img { opacity: 1; }
.poz-cats__sheet--band .poz-strip__veil {
	background: linear-gradient(180deg,
		rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .48) 42%, rgba(255, 255, 255, .94) 100%);
}
/* R2-J5 dimmed the open panel's photo to .62 so the glass could read through
   it; in the band the open panel is the whole point. */
.poz-cats__sheet--band .poz-strip__panel:hover .poz-strip__img,
.poz-cats__sheet--band .poz-strip__panel:focus-visible .poz-strip__img,
.poz-cats__sheet--band .poz-strip__panel.is-open .poz-strip__img { opacity: 1; }
/* The eight that recede still recede — but stay visible while doing it. */
.poz-cats__sheet--band .poz-strip:hover .poz-strip__panel:not(:hover) .poz-strip__img,
.poz-cats__sheet--band .poz-strip:focus-within .poz-strip__panel:not(:focus-visible) .poz-strip__img,
.poz-cats__sheet--band .poz-strip:not(:hover) .poz-strip__panel:not(.is-open) .poz-strip__img {
	filter: grayscale(.85) contrast(1) brightness(1.06) opacity(.8);
}

/* Half the height means half the air. Everything below is the same type at a
   tighter rhythm — no element is dropped, because a shorter panel that says
   less is just a worse panel. */
.poz-cats__sheet--band .poz-strip__num { left: 13px; top: 13px; }
.poz-cats__sheet--band .poz-strip__vert { bottom: 20px; letter-spacing: .17em; }
.poz-cats__sheet--band .poz-strip__open { padding: 0 17px 20px; }
.poz-cats__sheet--band .poz-strip__title {
	margin-top: 9px;
	font-size: clamp(14px, 1.12vw, 19px);
	max-width: 16ch;
}
.poz-cats__sheet--band .poz-strip__spec { margin-top: 9px; }
.poz-cats__sheet--band .poz-strip__cta { margin-top: 13px; }

/* Small, quiet, inside the band. The full-screen version needed a 52px puck
   because it was the only way out; here Escape, the wash and the launcher all
   close it too. */
.poz-cats__sheet--band .poz-cats__x--float {
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	font-size: 19px;
	background: rgba(22, 23, 27, .82);
	box-shadow: 0 8px 22px rgba(4, 6, 10, .3);
}

@media (max-width: 820px) {
	/* The strip's own mobile grid takes over — every panel permanently open,
	   two per row, so the band has to grow and scroll rather than crush nine
	   cards into 300px. */
	.poz-cats__sheet--band { height: auto; max-height: calc(100vh - var(--poz-header-h, 124px)); }
	.poz-cats__sheet--band .poz-cats__stripwrap { overflow-y: auto; overscroll-behavior: contain; }
	.poz-cats__sheet--band .poz-strip { height: auto; }
	.poz-cats__sheet--band .poz-strip__title { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.poz-cats__sheet--band { transition: opacity .01ms; transform: none; }
	.poz-cats.is-open .poz-cats__sheet--band { transform: none; }
}


/* ============================================================================
   R2-M2 — the Asortiman launcher, quiet (Sven, 2026-08-02).

   R2-M made it a gradient pill with a sheen that travelled across it every
   4.4 seconds, forever. That was the right instinct in a plainer header; now
   that the bar opens two sheets of glass, a permanently animating button is
   the loudest and least considered thing on the page. It is still the only
   filled element in the header — that is where its weight comes from, not from
   movement.

   It also has a STATE now. The launcher toggles the band (poz-wp.js), so the
   three bars rotate into a cross while the band is down, and aria-expanded
   carries the same fact to assistive tech. A control that opens something and
   closes it must look different in the two cases.
   ========================================================================= */
.poz-cats-launch {
	position: relative;
	overflow: visible;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 13px 22px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: #16171B;
	background-image: none;
	color: #fff;
	font: 500 12px/1 var(--poz-font-display, sans-serif);
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: 0 10px 24px -14px rgba(22, 23, 27, .85);
	transition: background-color .28s ease, box-shadow .32s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}
/* R2-M's travelling sheen. Off. */
.poz-cats-launch::after { content: none; }

.poz-cats-launch:hover {
	background: #000;
	transform: translateY(-1px);
	box-shadow: 0 16px 30px -14px rgba(22, 23, 27, .95);
}
.poz-cats-launch:active { transform: translateY(0); }
.poz-cats-launch:focus-visible { outline: 2px solid #16171B; outline-offset: 3px; }

/* ------------------------------------------------------------------- the mark
   Three bars in a fixed 15 × 12 box, absolutely placed so they can rotate
   about their own centres. Unequal widths closed — it reads as a list, not a
   hamburger; equal on hover and when open, because a cross with unequal arms
   looks like a mistake. */
.poz-cats-launch .poz-nav__stack {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 15px;
	height: 12px;
}
.poz-cats-launch .poz-nav__stack i {
	position: absolute;
	left: 0;
	height: 1.6px;
	border-radius: 2px;
	background: #fff;
	transition: width .34s cubic-bezier(.16, 1, .3, 1),
	            transform .4s cubic-bezier(.16, 1, .3, 1),
	            opacity .18s ease;
}
.poz-cats-launch .poz-nav__stack i:nth-child(1) { top: 0; width: 15px; }
.poz-cats-launch .poz-nav__stack i:nth-child(2) { top: 5.2px; width: 10px; }
.poz-cats-launch .poz-nav__stack i:nth-child(3) { top: 10.4px; width: 12.5px; }
.poz-cats-launch:hover .poz-nav__stack i { width: 15px; }

/* open → cross */
.poz-cats-launch[aria-expanded="true"] .poz-nav__stack i { width: 15px; }
.poz-cats-launch[aria-expanded="true"] .poz-nav__stack i:nth-child(1) {
	transform: translateY(5.2px) rotate(45deg);
}
.poz-cats-launch[aria-expanded="true"] .poz-nav__stack i:nth-child(2) {
	opacity: 0;
	transform: scaleX(.2);
}
.poz-cats-launch[aria-expanded="true"] .poz-nav__stack i:nth-child(3) {
	transform: translateY(-5.2px) rotate(-45deg);
}

@media (max-width: 700px) {
	.poz-cats-launch { padding: 12px 14px; gap: 0; }
	.poz-cats-launch > span:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.poz-cats-launch,
	.poz-cats-launch:hover { transform: none; }
	.poz-cats-launch .poz-nav__stack i { transition-duration: .01ms; }
}


/* ============================================================================
   R2-M3 — the Asortiman launcher, direction C (Sven, 2026-08-02).

   Chosen from a six-up. Not a button any more: the word itself, larger and
   more widely spaced than the nav beside it, with a rule that draws underneath
   on hover and stays drawn while the band is down. The mark is a 3 × 3 grid of
   cells whose middle cross fades and whose four corners draw inward when it
   opens — a grid collapsing, rather than a hamburger becoming a cross.

   This supersedes R2-M (gradient pill + looping sheen) and R2-M2 (solid ink
   pill + bar mark). Both are left above so a rollback is a deletion, but note
   that they are now UNDONE property by property here — background, shadow,
   radius, colour, padding and the ::after. If you add anything to them it will
   need undoing here too; better to edit this block.

   The markup changed with it: the launcher no longer carries .poz-nav__stack
   with three <i>, it carries .pzl__mark with nine. header.php.
   ========================================================================= */
.poz-cats-launch {
	position: relative;
	overflow: visible;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 14px 2px 15px;
	border: 0;
	border-radius: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	color: var(--poz-text, #16171B);
	font: 500 13px/1 var(--poz-font-display, sans-serif);
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .28s ease;
}
/* R2-M used ::after for the travelling sheen and R2-M2 switched it off. Here
   it is the rule. */
.poz-cats-launch::after {
	content: '';
	position: absolute;
	inset: auto 0 6px 0;
	height: 2px;
	background: currentColor;
	pointer-events: none;
	animation: none;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.poz-cats-launch:hover::after,
.poz-cats-launch[aria-expanded="true"]::after { transform: scaleX(1); }
/* undo the pill's hover */
.poz-cats-launch:hover,
.poz-cats-launch:active {
	background: none;
	box-shadow: none;
	transform: none;
}
.poz-cats-launch:focus-visible {
	outline: 2px solid var(--poz-text, #16171B);
	outline-offset: 4px;
}

/* ------------------------------------------------------------------- the mark
   Nine 3px cells on a 3px gutter — 15px square, the same optical size the bar
   mark had. Corners translate by exactly one cell + one gutter, so they land
   on the centre cell's edges rather than at an arbitrary offset. */
.pzl__mark {
	display: grid;
	grid-template-columns: repeat(3, 3px);
	grid-template-rows: repeat(3, 3px);
	gap: 3px;
	flex: 0 0 auto;
}
.pzl__mark i {
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 1px;
	background: currentColor;
	transition: opacity .3s cubic-bezier(.16, 1, .3, 1),
	            transform .4s cubic-bezier(.16, 1, .3, 1);
}
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(2),
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(4),
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(6),
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(8) { opacity: 0; }
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(1) { transform: translate(3px, 3px); }
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(3) { transform: translate(-3px, 3px); }
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(7) { transform: translate(3px, -3px); }
.poz-cats-launch[aria-expanded="true"] .pzl__mark i:nth-child(9) { transform: translate(-3px, -3px); }

@media (max-width: 700px) {
	/* R2-M and R2-M2 hid the word on a phone because the pill was too wide.
	   Without a pill it fits, and an unlabelled 15px dot grid does not read as
	   a category browser — keep the word, shrink it. */
	.poz-cats-launch { padding: 12px 2px; gap: 9px; font-size: 11px; letter-spacing: .13em; }
	.poz-cats-launch > span:last-child { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
	.poz-cats-launch::after,
	.pzl__mark i { transition-duration: .01ms; }
}


/* ============================================================================
   MEGA v7 — the configurator lines carry their clip (Sven, 2026-08-02).

   The 3D konfiguratori tab was the one pane in this menu with no imagery at
   all. Each line now gets the tool's own clip in the same picture column the
   category cards use, so the two tabs read as one system.

   WEIGHT IS THE WHOLE PROBLEM HERE. These are 8–11MB files and this is a menu:
   four of them preloading would be indefensible. So the video ships
   preload="none" behind a numbered slate, and poz-wp.js only calls play()
   after a deliberate hover (see the intent delay there). Nothing is fetched
   for someone who opens the tab and reads it.
   ========================================================================= */
.pzm-line.has-shot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(128px, 13vw, 186px);
	align-items: center;
	gap: 0 clamp(14px, 1.4vw, 26px);
	padding: clamp(12px, 1.4vh, 20px) 0;
}
.pzm-line__t { min-width: 0; }

.pzm-line__shot {
	position: relative;
	display: block;
	justify-self: end;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 3px;
	background: #14161A;
}
/* Until you hover: a slate with the tool's number. Better than an empty box
   and better than a poster we do not have — there is no still for these. */
.pzm-line__slate {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font: 400 12px/1 var(--poz-font-mono, ui-monospace, monospace);
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .42);
	background:
		radial-gradient(120% 90% at 30% 22%, rgba(255,255,255,.10), transparent 62%);
	transition: opacity .35s ease;
}
.pzm-line__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
/* Fades in when decoded, so a slow image resolves out of the slate rather
   than popping. .pzm-line__still is opacity 0 until then. */
.pzm-line__still[data-ready] { opacity: 1; }
.pzm-line.has-shot:hover .pzm-line__still { transform: scale(1.04); }
.pzm-line.has-shot:hover .pzm-line__shot { box-shadow: 0 0 0 1px rgba(22, 23, 27, .16); }
.pzm-line.has-shot:hover .pzm-line__n { color: var(--poz-text, #16171B); }

@media (max-width: 1100px) {
	.pzm-line.has-shot { grid-template-columns: minmax(0, 1fr) 116px; }
}
@media (max-width: 900px) {
	.pzm-line.has-shot { grid-template-columns: minmax(0, 1fr) 96px; }
}
@media (prefers-reduced-motion: reduce) {
	.pzm-line__clip, .pzm-line__slate { transition-duration: .01ms; }
}


/* ============================================================================
   MEGA v8 — two panels (Sven, 2026-08-02).

   PROIZVODI is now only products. Nine category names on the left as a quiet
   rail — only the one under the pointer is fully lit — and on the right one
   large product picture per category, crossfading in place.

   The twist on the right is the index: set enormous and HOLLOW in that
   category's hue behind the product, with an accent rule that draws across
   beneath it on every change. Both take var(--acc) from the poz-acc--* class
   PHP writes on .pzm__view, so the whole right half re-tints per category
   without a line of JavaScript.

   3D KONFIGURATORI is its own panel: the four planner stills at full size in a
   2×2, each with its name and one line of description laid over the picture.

   WHAT THIS SUPERSEDES: v6 still supplies the glass (.pzm__nav / .pzm__pane
   backdrop-filter, the materialise-from-nothing transition, the @supports
   fallback) and that is deliberate — the two levels of frozen glass were the
   brief and have not changed. v6's LAYOUT rules (.pzm__row, .pzm__foot,
   .pzm__group--cats, .pzm-card, .pzm-line) target classes the markup no longer
   emits and are dead; left in place so a rollback is a one-file revert.

   The panels are a BAND under the header, not a full-window takeover — v6 had
   them running to the viewport floor, which at 1440p left half a screen of
   empty glass under the content.
   ========================================================================= */

.pzm--prod,
.pzm--conf {
	bottom: auto;
	height: min(72vh, 700px);
}
.pzm--conf .pzm__in { display: block; height: 100%; background: transparent; }

/* ------------------------------------------------------------------ rail
   34 / 66. The names are a list of nine short strings; the picture is what
   the panel is for. */
.pzm--prod .pzm__in { grid-template-columns: minmax(0, 29fr) minmax(0, 71fr); }

.pzm--prod .pzm__nav {
	justify-content: center;
	gap: 0;
	padding: clamp(16px, 2vw, 36px) clamp(16px, 1.6vw, 30px) clamp(16px, 2vw, 36px) clamp(18px, 2.6vw, 50px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.pzm--prod .pzm__nav::-webkit-scrollbar { width: 6px; }
.pzm--prod .pzm__nav::-webkit-scrollbar-thumb { background: rgba(22, 23, 27, .18); border-radius: 999px; }

.pzm__cat {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 clamp(10px, .85vw, 15px);
	box-sizing: border-box;
	padding: clamp(5px, .6vh, 9px) clamp(12px, 1vw, 18px);
	border-radius: 10px;
	text-decoration: none;
	color: var(--poz-text, #16171B);
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity .5s var(--pzm-ease), transform .5s var(--pzm-ease), background-color .3s ease;
}
.pzm.is-open .pzm__cat {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 34ms + 80ms), calc(var(--i, 0) * 34ms + 80ms), 0s;
}
/* The active marker is a hairline in the category's own hue, drawn from the
   middle out. It is the only coloured thing in the left column. */
.pzm__cat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 16%;
	bottom: 16%;
	width: 2px;
	border-radius: 2px;
	background: var(--acc, #16171B);
	transform: scaleY(0);
	transition: transform .5s var(--pzm-ease);
}
.pzm__cat.is-active::before { transform: scaleY(1); }
.pzm__cat-n {
	font: 500 9.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .12em;
	color: var(--poz-text-2, #5F6772);
	opacity: .45;
	transition: opacity .3s ease, color .3s ease;
}
/* Unlit by default. The whole point of the rail: nine names, one of them on. */
.pzm__cat-l {
	min-width: 0;
	font: 400 clamp(13px, 1.02vw, 16.5px)/1.3 var(--poz-font-display, inherit);
	letter-spacing: .008em;
	opacity: .44;
	transition: opacity .35s var(--pzm-ease);
}
.pzm__cat .pzm__chev {
	width: 15px;
	height: 15px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .35s ease, transform .45s var(--pzm-ease);
}
.pzm__cat:hover .pzm__cat-l { opacity: .78; }
.pzm__cat.is-active { background: rgba(255, 255, 255, .70); }
.pzm__cat.is-active .pzm__cat-l { opacity: 1; }
.pzm__cat.is-active .pzm__cat-n { opacity: 1; color: var(--acc-ink, #16171B); }
.pzm__cat.is-active .pzm__chev { opacity: .55; transform: none; }
.pzm__cat:focus-visible { outline: 2px solid var(--poz-accent, #dc2626); outline-offset: 2px; }

/* ------------------------------------------------------------------ views
   v6 already made .pzm__pane a single grid cell named `stack`; every view is
   placed into it, so switching category is a crossfade in place and the
   entrance animations replay each time. */
.pzm--prod .pzm__pane { padding: 0; }

.pzm__view {
	grid-area: stack;
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	padding: clamp(18px, 2.2vw, 40px) clamp(22px, 2.8vw, 56px) clamp(20px, 2.2vw, 40px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.pzm__view.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity .45s var(--pzm-ease), visibility 0s;
}

/* The hollow index. Bottom-left, bled off both edges, stroked not filled so it
   reads as a watermark rather than as a second headline. */
.pzm__ghost {
	position: absolute;
	right: clamp(10px, 1.8vw, 40px);
	bottom: clamp(4px, .8vw, 16px);
	z-index: 0;
	pointer-events: none;
	font: 700 clamp(120px, 13.5vw, 220px)/.76 var(--poz-font-display, inherit);
	letter-spacing: -.05em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--acc, #16171B);
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--pzm-ease), transform .9s var(--pzm-ease);
}
.pzm__view.is-active .pzm__ghost {
	opacity: .28;
	transform: none;
	transition-delay: 60ms;
}
/* No text-stroke (older Firefox): fall back to a very light fill rather than
   leaving a transparent glyph, which would render as nothing at all. */
@supports not ((-webkit-text-stroke: 1px red)) {
	.pzm__ghost { color: var(--acc, #16171B); }
	.pzm__view.is-active .pzm__ghost { opacity: .10; }
}

.pzm__shot {
	position: relative;
	z-index: 1;
	display: block;
	min-width: 0;
	min-height: 0;
	width: 100%;
	height: 100%;
}
.pzm__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 50% 50%;
	mix-blend-mode: multiply;
	opacity: 0;
	transform: translateY(30px) scale(.965);
	transition: opacity .6s var(--pzm-ease), transform .85s var(--pzm-ease);
}
.pzm__view.is-active .pzm__shot img {
	opacity: 1;
	transform: none;
	transition-delay: 90ms;
}

.pzm__meta {
	position: relative;
	z-index: 2;
	max-width: 46ch;
}
.pzm__rule {
	display: block;
	width: clamp(44px, 5.5vw, 92px);
	height: 2px;
	border-radius: 2px;
	background: var(--acc, #16171B);
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform .75s var(--pzm-ease);
}
.pzm__view.is-active .pzm__rule { transform: scaleX(1); transition-delay: 140ms; }

.pzm__sub,
.pzm__spec,
.pzm__go {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .5s var(--pzm-ease), transform .55s var(--pzm-ease);
}
.pzm__view.is-active .pzm__sub,
.pzm__view.is-active .pzm__spec,
.pzm__view.is-active .pzm__go { opacity: 1; transform: none; }
.pzm__view.is-active .pzm__sub { transition-delay: 170ms; }
.pzm__view.is-active .pzm__spec { transition-delay: 220ms; }
.pzm__view.is-active .pzm__go { transition-delay: 270ms; }

.pzm__sub {
	margin: clamp(12px, 1.2vw, 20px) 0 0;
	font: 400 clamp(19px, 1.9vw, 33px)/1.14 var(--poz-font-display, inherit);
	letter-spacing: -.012em;
	color: var(--poz-text, #16171B);
	text-wrap: balance;
}
.pzm__spec {
	margin: 7px 0 0;
	font: 400 clamp(12.5px, .9vw, 15px)/1.5 var(--poz-font-body, inherit);
	color: var(--poz-text-2, #5F6772);
}
.pzm__go {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: clamp(13px, 1.3vw, 22px);
	font: 500 11.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--acc-ink, #16171B);
	text-decoration: none;
}
.pzm__go-a { transition: transform .45s var(--pzm-ease); }
.pzm__go:hover .pzm__go-a { transform: translateX(5px); }

/* ---------------------------------------------------------- configurators
   Four stills at full size, 2×2, with a 2px gap so the glass shows through as
   a hairline between them rather than a border being drawn on each tile. */
.pzm-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 2px;
	height: 100%;
	background: rgba(255, 255, 255, .40);
	-webkit-backdrop-filter: blur(30px) saturate(150%);
	backdrop-filter: blur(30px) saturate(150%);
	transition: background-color .6s var(--pzm-ease), -webkit-backdrop-filter .6s var(--pzm-ease), backdrop-filter .6s var(--pzm-ease);
}
.pzm:not(.is-open) .pzm-grid {
	background-color: rgba(255, 255, 255, 0);
	-webkit-backdrop-filter: blur(0px) saturate(100%);
	backdrop-filter: blur(0px) saturate(100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.pzm-grid, .pzm:not(.is-open) .pzm-grid { background-color: #fff; }
}

.pzm-tile {
	position: relative;
	display: block;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: #0B0C0F;
	color: #fff;
	text-decoration: none;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s var(--pzm-ease), transform .6s var(--pzm-ease);
}
.pzm.is-open .pzm-tile {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 70ms + 90ms);
}
.pzm-tile.is-bare { background: linear-gradient(145deg, #14161B 0%, #0B0C0F 100%); }

.pzm-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	filter: saturate(.94) contrast(1.02);
	transform: scale(1.07);
	transition: transform 1.3s var(--pzm-ease), filter .6s ease;
}
.pzm.is-open .pzm-tile__img { transform: scale(1); transition-delay: calc(var(--i, 0) * 70ms + 90ms); }
.pzm-tile:hover .pzm-tile__img,
.pzm-tile:focus-visible .pzm-tile__img { transform: scale(1.05); filter: saturate(1) contrast(1.04); }

/* Two gradients, both needed: the vertical one carries the type, the
   left-to-right one keeps the name off a bright patch of render. */
.pzm-tile__wash {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(8, 9, 12, .90) 0%, rgba(8, 9, 12, .56) 32%, rgba(8, 9, 12, .12) 66%, rgba(8, 9, 12, 0) 100%),
		linear-gradient(to right, rgba(8, 9, 12, .40) 0%, rgba(8, 9, 12, 0) 55%);
}
/* The accent draws along the foot on hover — the only colour on the tile. */
.pzm-tile::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 3px;
	background: var(--acc, #fff);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .6s var(--pzm-ease);
}
.pzm-tile:hover::after,
.pzm-tile:focus-visible::after { transform: scaleX(1); }
.pzm-tile:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

.pzm-tile__copy {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: block;
	box-sizing: border-box;
	padding: clamp(18px, 2vw, 38px) clamp(20px, 2.2vw, 42px) clamp(20px, 2vw, 36px);
}
.pzm-tile__n {
	display: block;
	margin-bottom: clamp(7px, .8vw, 14px);
	font: 500 11px/1 var(--poz-font-body, inherit);
	letter-spacing: .22em;
	color: rgba(255, 255, 255, .55);
}
.pzm-tile__name {
	display: block;
	font: 400 clamp(21px, 2vw, 35px)/1.08 var(--poz-font-display, inherit);
	letter-spacing: -.018em;
	color: #fff;
	text-wrap: balance;
}
.pzm-tile__desc {
	display: block;
	margin-top: 8px;
	max-width: 34ch;
	font: 400 clamp(12.5px, .9vw, 15px)/1.5 var(--poz-font-body, inherit);
	color: rgba(255, 255, 255, .68);
}
/* Always in flow — only its paint animates, so the name never shifts. */
.pzm-tile__go {
	display: block;
	margin-top: clamp(10px, 1vw, 18px);
	font: 500 11px/1 var(--poz-font-body, inherit);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .42);
	transform: translateY(2px);
	transition: color .4s ease, transform .5s var(--pzm-ease);
}
.pzm-tile:hover .pzm-tile__go,
.pzm-tile:focus-visible .pzm-tile__go { color: #fff; transform: none; }

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
	.pzm__cat, .pzm__cat::before, .pzm__cat-l, .pzm__cat .pzm__chev,
	.pzm__view, .pzm__ghost, .pzm__shot img, .pzm__rule,
	.pzm__sub, .pzm__spec, .pzm__go, .pzm__go-a,
	.pzm-grid, .pzm-tile, .pzm-tile::after, .pzm-tile__img, .pzm-tile__go {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.pzm__cat, .pzm__ghost, .pzm__shot img, .pzm__sub, .pzm__spec, .pzm__go,
	.pzm-tile, .pzm-tile__go { transform: none !important; }
	.pzm-tile__img { transform: scale(1) !important; }
}

/* ------------------------------------------------------------- narrow/short */
@media (max-height: 720px) {
	.pzm--prod, .pzm--conf { height: min(84vh, 620px); }
	.pzm__cat { padding-top: 5px; padding-bottom: 5px; }
	.pzm__cat-l { font-size: clamp(12.5px, .95vw, 15px); }
	.pzm__ghost { font-size: clamp(96px, 11vw, 165px); }
}

@media (max-width: 1100px) {
	.pzm--prod .pzm__in { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); }
	.pzm__cat-l { font-size: clamp(12.5px, 1.2vw, 15px); }
	.pzm__ghost { font-size: clamp(90px, 12vw, 150px); }
	.pzm__sub { font-size: clamp(17px, 2.2vw, 24px); }
}

@media (max-width: 900px) {
	/* One column: the names above, the picture under them. The rail scrolls
	   with the panel rather than on its own. */
	.pzm--prod, .pzm--conf { height: min(86vh, 720px); }
	.pzm--prod .pzm__in { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
	.pzm--prod .pzm__nav {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 10px 14px;
		gap: 4px;
	}
	.pzm__cat { flex: 0 0 auto; grid-template-columns: auto auto; padding: 8px 12px; }
	.pzm__cat::before { top: auto; bottom: 0; left: 12px; right: 12px; width: auto; height: 2px; transform: scaleX(0); }
	.pzm__cat.is-active::before { transform: scaleX(1); }
	.pzm__cat .pzm__chev { display: none; }
	.pzm__cat-l { font-size: 15px; }
	.pzm__view { padding: 16px 18px 22px; }
	.pzm-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0, 1fr)); }
	.pzm-tile__name { font-size: 20px; }
	.pzm-tile__desc { font-size: 12.5px; }
}


/* ============================================================================
   MEGA v8.1 — the left column: gutter + anchors (Sven, 2026-08-02).

   Sven picked B + D off the four live mock-ups, so this is both: the numbers
   sit in a fixed gutter behind ONE continuous hairline (D), and the column
   gets a kicker head and a pinned "Svi proizvodi" foot (B).

   THE ROWS HAVE TO FILL THE COLUMN. That is not a third direction sneaking
   in — it is what makes the gutter line work. Stack nine 33px rows in a 700px
   column and the rule stops a third of the way down with nothing under it,
   which reads as a rendering fault rather than as air. flex: 1 1 0 divides
   whatever is left between the head and the foot, so the line runs the whole
   way and the row rhythm sets itself from the panel height.

   The active row is TWO signals, not four: the gutter segment thickens to 2px
   and takes the category hue, and the index goes to the ink twin. The white
   pill, the left bar and the always-on chevron from v8 are all gone.
   ========================================================================= */
.pzm--prod .pzm__nav {
	justify-content: flex-start;
	padding: clamp(16px, 2vw, 34px) clamp(18px, 1.8vw, 34px);
}

/* ------------------------------------------------------------------- head */
.pzm__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0 14px;
	flex: 0 0 auto;
	padding-bottom: clamp(12px, 1.3vw, 20px);
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity .5s var(--pzm-ease), transform .5s var(--pzm-ease);
}
.pzm.is-open .pzm__head { opacity: 1; transform: none; transition-delay: 60ms; }
.pzm__head-k {
	font: 500 10px/1 var(--poz-font-body, inherit);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--poz-text-2, #5F6772);
}
.pzm__head-r { height: 1px; background: rgba(22, 23, 27, .14); }
.pzm__head-n {
	font: 500 10px/1 var(--poz-font-body, inherit);
	letter-spacing: .16em;
	color: var(--poz-text-2, #5F6772);
	opacity: .6;
}

/* ------------------------------------------------------------------- rows */
.pzm__cat {
	flex: 1 1 0;
	min-height: 0;
	grid-template-columns: var(--pzm-gut, 34px) minmax(0, 1fr) auto;
	column-gap: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
}
/* Not a marker any more — a segment of one continuous rule. */
.pzm__cat::before {
	left: var(--pzm-gut, 34px);
	top: 0;
	bottom: 0;
	width: 1px;
	height: auto;
	border-radius: 0;
	background: rgba(22, 23, 27, .13);
	transform: none;
	transition: background-color .4s ease, width .45s var(--pzm-ease);
}
.pzm__cat.is-active { background: transparent; }
.pzm__cat.is-active::before { width: 2px; background: var(--acc, #16171B); }
.pzm__cat-n { opacity: .4; }
.pzm__cat.is-active .pzm__cat-n { opacity: 1; color: var(--acc-ink, #16171B); }
.pzm__cat-l { padding-left: clamp(14px, 1.2vw, 20px); }
.pzm__cat .pzm__chev { opacity: 0; }
.pzm__cat.is-active .pzm__chev { opacity: .45; transform: none; }
.pzm__cat:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------------- foot */
.pzm__all {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: clamp(12px, 1.3vw, 20px);
	padding-top: clamp(12px, 1.3vw, 20px);
	border-top: 1px solid rgba(22, 23, 27, .14);
	text-decoration: none;
	font: 500 10.5px/1 var(--poz-font-body, inherit);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--poz-text, #16171B);
	opacity: 0;
	transform: translateX(-14px);
	transition: opacity .5s var(--pzm-ease), transform .5s var(--pzm-ease);
}
.pzm.is-open .pzm__all { opacity: 1; transform: none; transition-delay: 420ms; }
.pzm__all-a { transition: transform .45s var(--pzm-ease); }
.pzm__all:hover .pzm__all-a { transform: translateX(5px); }
.pzm__all:focus-visible { outline: 2px solid var(--poz-accent, #dc2626); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.pzm__head, .pzm__all, .pzm__all-a, .pzm__cat::before {
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.pzm__head, .pzm__all { transform: none !important; }
}

/* A short viewport divides the same height between the same nine rows, so the
   rhythm looks after itself — only the gutter needs to narrow. */
@media (max-height: 720px) {
	.pzm--prod .pzm__nav { --pzm-gut: 30px; padding-top: 14px; padding-bottom: 14px; }
	.pzm__head { padding-bottom: 10px; }
	.pzm__all { margin-top: 10px; padding-top: 10px; }
}

/* Below 900px the rail is a horizontal scroller (see v8): none of the above
   applies, and the head/foot would eat two rows of a 720px-tall panel. */
@media (max-width: 900px) {
	.pzm__head, .pzm__all { display: none; }
	.pzm__cat {
		flex: 0 0 auto;
		grid-template-columns: auto auto;
		column-gap: 8px;
		padding: 8px 12px;
	}
	.pzm__cat::before {
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 0;
		width: auto;
		height: 2px;
		transform: scaleX(0);
		transition: transform .45s var(--pzm-ease);
	}
	.pzm__cat.is-active::before { width: auto; transform: scaleX(1); }
	.pzm__cat-l { padding-left: 0; }
}

/* ============================================================================
   HEADER FIT — the band between the nav breakpoint and a comfortable desktop.

   The header is flex, space-between, and its three children are all intrinsic
   width: logo + nav + actions. .poz-nav only hides at 1180px, so between 1181
   and roughly 1240 the three of them already did not fit and the ASORTIMAN
   button was clipped — this predates the logo change, it was just a 4px
   overflow nobody had hit.

   Cropping the empty canvas out of the wordmark took the logo from 258px wide
   to 348px at the same optical weight, which widened that window to ~1330.
   So: step the logo down and tighten both gaps for the whole band, rather
   than leaving a range where the header overflows its own padding.

   Measured at 1181px, the tightest point above the breakpoint:
     244 (logo) + ~446 (nav) + 351 (actions) + 40 (gaps) = 1081 < 1096 avail.
   ========================================================================= */
@media (max-width: 1440px) {
	:root { --poz-logo-h: 42px; }
	.poz-header { gap: 20px; }
	.poz-nav { gap: clamp(13px, 1.5vw, 26px); }
}


/* ============================================================================
   R9 · LANGUAGE PILL  (Sven, 2026-08-03)

   HR|EN used to live in the utility bar, set in 8px mono at .22em with a
   literal "|" between the two. That bar is gone, so the picker moved into the
   header proper — and at header scale a bare text pair reads as two more nav
   links, which is exactly what it must not read as.

   So it is a segmented control: one pill, two cells, the current language
   filled in ink. The state is NOT a class — it is [aria-current="true"], which
   is what Polylang's own permalinks give us and what the old bar highlighted
   too. These are real links; nothing here is a JS toggle.

   No sliding indicator. The two cells only ever change state by navigating, so
   an animated slider would be a transition that no one is present to see. What
   does animate is the hover: the inactive cell takes a faint fill, so the
   control answers the pointer before it is clicked.

   Hidden below --poz-bp-nav (1180px), where the burger takes over: the drawer
   foot carries .pzl-lang--drawer, and the header at that width is already
   fighting for room — see "HEADER FIT" below.
   ========================================================================= */
.pzl-lang {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border: 1px solid rgba(22, 23, 27, .13);
	border-radius: 999px;
	background: rgba(255, 255, 255, .5);
	flex: 0 0 auto;
}

.pzl-lang__opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 24px;
	padding: 0 9px;
	border-radius: 999px;
	font: 500 10px/1 var(--poz-font-body, inherit);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--poz-text-2, #5F6772);
	white-space: nowrap;
	transition: color .28s ease, background-color .28s ease;
}
.pzl-lang__opt:hover { color: var(--poz-ink, #0C0D10); background: rgba(22, 23, 27, .06); }
.pzl-lang__opt:focus-visible { outline: 2px solid var(--acc-truss, #17B26A); outline-offset: 2px; }

/* The current language. Ink fill, not an accent: the picker is chrome, and an
   accent here would compete with the CTA two elements to its right. */
.pzl-lang__opt[aria-current="true"] {
	color: #FFFFFF;
	background: var(--poz-ink, #0C0D10);
	box-shadow: 0 1px 2px rgba(12, 13, 16, .18);
}
.pzl-lang__opt[aria-current="true"]:hover {
	color: #FFFFFF;
	background: var(--poz-ink, #0C0D10);
}

@media (prefers-reduced-motion: reduce) {
	.pzl-lang__opt { transition-duration: .01ms !important; }
}

/* The drawer copy. Same control, its own row under the two buttons.

   THE DRAWER FOOT IS A GRID, not a flex column — align-self alone leaves the
   pill stretched to the full 419px of the panel, because in a grid that is the
   BLOCK axis. justify-self is the one that matters here, and width:max-content
   keeps it honest whichever the foot becomes. */
.pzl-lang--drawer {
	justify-self: start;
	align-self: start;
	width: max-content;
	margin-top: 4px;
	background: rgba(22, 23, 27, .04);
}

@media (max-width: 1180px) {   /* --poz-bp-nav */
	.poz-header__actions .pzl-lang { display: none; }
}


/* ============================================================================
   HEADER FIT, SECOND TIER — paying for the language pill

   The pill costs 110px in the actions group, and the header had ~15px of slack
   at 1181px before it arrived (see HEADER FIT above). So it does not fit, and
   hiding the pill in that band is not an option: between 1181 and 1360 the nav
   is still the desktop one, the burger is still hidden, and the drawer that
   carries the other copy of the picker cannot be opened. No pill there means
   no way to change language at all.

   So the whole header steps down once more. Nothing is dropped; every part
   gives up a few pixels — logo height, both header gaps, the nav's own gap,
   the actions gap, and the pill itself, which loses its cell padding and a
   half-point of type.

   Measured at 1185px of usable width, the tightest point above the nav
   breakpoint:
     221 (logo) + 432 (nav) + 431 (actions) + 28 (gaps) + 56 (padding) = 1168.
   If anything is ever added to the nav or the actions, this is the sum that
   has to be re-checked — the header is flex with three intrinsic-width
   children and it does not wrap, it clips.
   ========================================================================= */
@media (max-width: 1360px) {
	:root { --poz-logo-h: 38px; }
	.poz-header {
		gap: 14px;
		padding-left: clamp(16px, 2.2vw, 40px);
		padding-right: clamp(16px, 2.2vw, 40px);
	}
	.poz-nav { gap: clamp(10px, 1.1vw, 18px); }
	.poz-header__actions { gap: 10px; }

	.pzl-lang { padding: 2px; gap: 0; }
	.pzl-lang__opt {
		min-width: 27px;
		height: 22px;
		padding: 0 6px;
		font-size: 9.5px;
		letter-spacing: .1em;
	}
}

/* ============================================================================
   R9-C · FLAG + CODE  (Sven, 2026-09-15)

   The pill's cells carry a 12px flag disc in front of the two letters. The
   disc is decorative (aria-hidden); the letters and the title still carry the
   meaning, so nothing about the link contract above changes. Same ink fill
   for the current cell — the disc simply sits on it.

   Below 1360px the header is at its measured limit (HEADER FIT, SECOND TIER:
   1168 of 1185px), so the code is hidden there and the disc alone fills the
   cell at exactly today's 27px cost. The title keeps the name on hover.
   ========================================================================= */
.pzl-lang__opt { gap: 6px; min-width: 44px; padding: 0 8px; }
.pzl-lang__flag {
	display: block;
	width: 12px;
	height: 12px;
	flex: 0 0 auto;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(12, 13, 16, .10);
}
.pzl-lang__opt[aria-current="true"] .pzl-lang__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
.poz-header.is-over-dark .pzl-lang__opt .pzl-lang__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.poz-header.is-over-dark .pzl-lang__opt[aria-current="true"] .pzl-lang__flag { box-shadow: 0 0 0 1px rgba(12, 13, 16, .12); }

@media (max-width: 1360px) {
	.poz-header__actions .pzl-lang__opt { min-width: 27px; padding: 0 6px; gap: 0; }
	.poz-header__actions .pzl-lang__code { display: none; }
	.poz-header__actions .pzl-lang__flag { width: 13px; height: 13px; }
}