/* ============================================================
   CATEGORY PAGE — v5  (dvojstĺpcové porovnanie)
   Video hero  →  frame-family cards (L1)  →  speed pills (L2)
              →  divider  →  product gallery

   Layout matches the approved mockup:
   - full-bleed video header, 460px tall, big centered title + sub
   - family cards overlap the bottom edge of the hero
   - speed pills sit left-aligned under the family row
   - black rule, then the product gallery
   ============================================================ */

.cat-page {
    --cat-ink:      #172124;
    --cat-muted:    #888780;
    --cat-mint:     #dbfaf2;
    --cat-gold:     #bd8c00;
    --cat-line:     #eeece4;
    --cat-chip:     #efefec;
    --cat-hero-h:   460px;
    --cat-overlap:  140px;

    font-family: 'Barlow Condensed', sans-serif;
    color: var(--cat-ink);
    background: #fff;
}

.cat-body {
    max-width: 80vw;          /* +20% — roomier cards mean bigger bike art */
    margin: 0 auto;
    padding: 0 24px 70px;
}

/* ============================================================
   1. VIDEO HERO
   ============================================================ */

.cat-hero {
    position: relative;
    height: var(--cat-hero-h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* bottom padding reserves the strip the family cards overlap into */
    padding: 40px 24px calc(var(--cat-overlap) + 60px);
    overflow: hidden;
    background: #9b9b9b;           /* placeholder until a video/poster is set */
    text-align: center;
}

.cat-hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* "stretch to view" */
    z-index: 0;
}

/* Legibility scrim over the video */
.cat-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 33, 36, 0.38) 0%, rgba(23, 33, 36, 0.18) 55%, rgba(23, 33, 36, 0.28) 100%);
    z-index: 1;
    pointer-events: none;
}

.cat-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.cat-heading {
    font-size: clamp(3.2rem, 8vw, 7rem);
    line-height: 0.95;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    margin: 0 0 14px;
}

.cat-sub {
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
    font-weight: 400;
    line-height: 1.35;
    color: #fff;
    margin: 0;
}

.cat-sub:empty { display: none; }

/* --- next/previous category chevrons --- */
.cat-next,
.cat-prev {
    position: absolute;
    top: calc((var(--cat-hero-h) - var(--cat-overlap)) / 2);
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}

.cat-next { right: clamp(16px, 3vw, 48px); }
.cat-prev { left: clamp(16px, 3vw, 48px); }

.cat-next:hover {
    color: #fff;
    transform: translateY(-50%) translateX(4px);
}

.cat-prev:hover {
    color: #fff;
    transform: translateY(-50%) translateX(-4px);
}

.cat-next svg,
.cat-prev svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.6;
    fill: none;
}

.cat-next[hidden],
.cat-prev[hidden] { display: none; }

/* ============================================================
   2. LEVEL 1 — frame family cards (overlap the hero)
   ============================================================ */

.cat-families {
    position: relative;
    z-index: 4;
    margin-top: calc(var(--cat-overlap) * -1);
}

/* Flat-grid categories (no frame families) have no cards to overlap with,
   so the gallery just starts below the hero. */
.cat-page--flat .cat-families { display: none; }
.cat-page--flat .cat-divider { margin-top: 40px; }

/* The card track */
.cat-tabs-l1 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
}

.cat-fam-cell {
    /* How many families a category has comes from the feed, so the row has
       to cope with 1 or 8. Cells share the width and only wrap once they'd
       get narrower than 200px. The speed pills live INSIDE the cell, so
       they are centred on the card they belong to. */
    flex: 1 1 200px;
    max-width: 410px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.cat-fam-card {
    font-family: inherit;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    padding: 0 0 6px;
    cursor: pointer;
    text-align: center;
    /* Every card is at full strength — the mint podium under the active
       bike is what marks the selection, so fading the others is redundant
       and only made the uploaded artwork look washed out. */
    opacity: 1;
    transition: transform 0.25s ease;
}

/* Product shot sitting on its podium */
.cat-fam-img {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* per-category podium art, set with data-podium on .cat-page */
    background-image: var(--cat-podium, none);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 92% auto;
    /* Room for the cylinder: the bike is bottom-aligned, so without this it
       would stand in front of the side wall rather than on the top. Tuned so
       the wheels meet the middle of the top ellipse, not its back edge —
       any less and the bike hovers above the podium. */
    padding-bottom: 4%;
}
/* --- Podium under the bike ---
   ../images/families/family-podium.png, a white disc shot from slightly
   above. It sits in its own element rather than as a background on
   .cat-fam-img so the active card can tint it without touching the bike
   above it.

   NOTE THE "../" — it is not a typo. A url() in CSS resolves against THIS
   STYLESHEET's location, not against the page that loaded it. An href or
   src in the HTML does the opposite: those resolve against the page. This
   file moved into engine/ while images/ stayed at the docroot, so every
   url() in here has to climb one level, even though category.html sitting
   at the docroot writes the same path with no "../" at all.

   TWO IMAGE FOLDERS. Liberty and MAYO each keep their own images/ — they
   are NOT one shared folder — so this one stylesheet, served to both from
   engine/, resolves to a different file per site. That works because the
   path is relative: on liberty it finds liberty's copy, on mayo it finds
   mayo's. It also means family-podium.png has to EXIST IN BOTH. If the
   podium ever vanishes on one site only, that is the missing copy. */
.cat-fam-podium {
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: 3%;
    /* The file is 800x262; the ratio keeps the disc undistorted at any card
       width without having to guess a height. */
    aspect-ratio: 800 / 262;
    background: url('../images/families/family-podium.png') center bottom / 100% auto no-repeat;
}

/* Selected family: mint over the disc. multiply keeps the artwork's own
   shading — white turns exactly #dbfaf2, the shaded edge turns a deeper
   mint — and the mask confines the tint to the disc's silhouette so no
   rectangle shows in the corners. */
.cat-fam-card.active .cat-fam-podium::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--cat-mint);
    mix-blend-mode: multiply;
    -webkit-mask: url('../images/families/family-podium.png') center bottom / 100% auto no-repeat;
    mask: url('../images/families/family-podium.png') center bottom / 100% auto no-repeat;
}

/* A podium IMAGE was set for this category via data-podium — that one wins. */
.cat-page[data-podium] .cat-fam-podium { display: none; }

/* No frame-family PNG uploaded yet — the podium stays, the picture just
   isn't there. Set by the scraper when the image 404s. */
.cat-fam-img--empty { opacity: 0.9; }

.cat-fam-img img {
    position: relative;
    z-index: 1;
    max-width: 92%;
    max-height: 88%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 6%;
    filter: drop-shadow(0 6px 10px rgba(23, 33, 36, 0.14));
}

/* Small in-card label — mobile carousel only */
.cat-fam-label {
    display: none;
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 2;
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--cat-ink);
}

.cat-fam-name {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin-top: 14px;
    padding: 0 6px 3px;
    border-bottom: 3px solid transparent;
    transition: border-color 0.2s;
}

.cat-fam-card.active .cat-fam-name { border-bottom-color: var(--cat-mint); }

/* ---- speed pills, rolled out under their own family card -------------- */
.cat-fam-speeds {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    /* collapsed until the family is picked */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-fam-cell.active .cat-fam-speeds {
    max-height: 200px;
    opacity: 1;
    padding: 14px 0 4px;
}

.cat-fam-price {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--cat-ink);
    margin-top: 10px;
}

/* Active family name/price shown under the carousel — mobile only */
.cat-fam-active { display: none; text-align: center; }

.cat-fam-active-name {
    font-size: 2.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 16px 0 0;
}

.cat-fam-active-price {
    font-size: 1.15rem;
    margin: 4px 0 0;
    color: var(--cat-ink);
}

/* Carousel dots — mobile only */
.cat-fam-dots {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 0 4px;
}

.cat-fam-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #d4d4d0;
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.cat-fam-dot.active {
    width: 46px;
    background: var(--cat-mint);
}

/* ============================================================
   3. LEVEL 2 — speed variant pills
   ============================================================ */

.cat-tab-l2 {
    font-family: inherit;
    border: none;
    background: var(--cat-chip);
    color: var(--cat-ink);
    cursor: pointer;
    padding: 9px 18px;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: background 0.15s;
}

.cat-tab-l2.active { background: var(--cat-mint); }

.cat-tab-l2:hover:not(.active) { background: #e3e3df; }

/* ============================================================
   4. DIVIDER + PRODUCT ROLLOUT + PARAMETRE + GALLERY
   ============================================================ */

.cat-divider {
    border: none;
    border-top: 1px solid var(--cat-ink);
    margin: 0 0 21px;
}

/* --- the product panel that rolls out under the speed tabs --- */
.cat-product {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 34px;
    /* stretch, not start: the info column has to span the panel's full
       height so .cat-p-meta can be pushed to its bottom edge */
    align-items: stretch;
    padding-bottom: 26px;
    scroll-margin-top: 90px;
    animation: cat-rollout 0.28s ease;
}

.cat-product[hidden] { display: none; }

@keyframes cat-rollout {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

.cat-p-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 340px;
}

.cat-p-media img {
    max-width: 100%;
     max-height: 630px;
    object-fit: contain;
}

.cat-p-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 8px;
}

.cat-p-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cat-p-title {
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    margin: 0;
}

.cat-p-nav { display: flex; gap: 8px; flex: none; }

.cat-p-nav button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--cat-ink);
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.cat-p-nav button:hover { background: var(--cat-gold); }

/* ── the caption on the ‹ › arrows ───────────────────────────────────────
   The arrows page through sibling products in one family — where the motor
   sits on an e-bike, the size on everything else. Two unlabelled circles
   said none of that, so the panel now names it: once by itself when the
   product opens (JS adds .is-shown for ~3.4 s), and again on hover or
   keyboard focus, which is also what a phone visitor gets on tap.
   The bubble is aria-hidden; the same words are folded into the buttons'
   own aria-labels so it is not announced twice. */
.cat-p-nav { position: relative; }

.cat-p-navhint {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    z-index: 3;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--cat-ink);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;          /* never eat a click meant for an arrow */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
}

/* the tail, pointed at the gap between the two arrows */
.cat-p-navhint::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 30px;
    border: 5px solid transparent;
    border-top-color: var(--cat-ink);
}

.cat-p-navhint.is-shown,
.cat-p-nav:hover .cat-p-navhint,
.cat-p-nav:focus-within .cat-p-navhint {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease;
}

@media (max-width: 560px) {
    .cat-p-navhint {
        font-size: 0.72rem;
        padding: 4px 8px;
        max-width: 60vw;
        white-space: normal;       /* rather than run off the left edge */
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat-p-navhint,
    .cat-p-navhint.is-shown,
    .cat-p-nav:hover .cat-p-navhint,
    .cat-p-nav:focus-within .cat-p-navhint { transform: none; }
}

.cat-p-price {
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    font-weight: 700;
    margin: 0;
}

.cat-p-price small {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--cat-muted);
}

.cat-p-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cat-p-label {
    font-size: 1.1rem;
    font-weight: 600;
}

.cat-p-opts {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cat-p-size {
    font-family: inherit;
    border: 1px solid var(--cat-line);
    background: #fff;
    color: var(--cat-ink);
    font-size: 1.05rem;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.cat-p-size.active { background: var(--cat-mint); border-color: var(--cat-ink); }
.cat-p-size:hover:not(.active) { border-color: var(--cat-ink); }

.cat-p-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(23, 33, 36, 0.25);
    padding: 0;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}

.cat-p-color.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cat-ink);
    transform: scale(1.05);
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* --- Modifikácie --- */
.cat-p-mod { display: flex; flex-direction: column; gap: 4px; }

.cat-p-mod .cat-p-label { margin: 0 0 2px; }

.cat-p-modopt {
    font-family: inherit;
    text-align: left;
    border: none;
    background: var(--cat-chip);
    color: var(--cat-ink);
    font-size: 1.02rem;
    font-weight: 500;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.cat-p-modopt.active { background: var(--cat-mint); font-weight: 700; }
.cat-p-modopt:hover:not(.active) { background: #e3e3df; }

/* --- quantity + add to cart --- */
.cat-p-buy {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-top: 6px;
}

.cat-p-qty {
    display: flex;
    align-items: stretch;
    background: var(--cat-mint);
}

.cat-p-qtyval {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    font-size: 1.15rem;
    font-weight: 600;
}

.cat-p-qtybtns { display: flex; flex-direction: column; }

.cat-p-qtybtns button {
    font-family: inherit;
    width: 34px;
    flex: 1;
    border: none;
    background: var(--cat-ink);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.cat-p-qtybtns button:hover { background: var(--cat-gold); }

.cat-p-cart {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;          /* only as wide as the label inside it */
    padding: 12px 20px;
    background: var(--cat-mint);
    color: var(--cat-ink);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 600;
    transition: background 0.15s;
}

.cat-p-cart:hover { background: #c4f0e4; }

.cat-p-cart svg { width: 26px; height: 26px; flex: none; }

.cat-p-meta {
    text-align: right;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--cat-muted);
    /* auto top margin drops it to the bottom of the info column, which
       stretches to the panel height — so it lands bottom-right of the
       whole .cat-product block, level with the foot of the photo. */
    margin: auto 0 0;
}

/* --- TECHNICKE PARAMETRE (specs/specs.css) — page-local fit ---
   The card grid itself is styled by specs/specs.css so the standalone
   spec page and this one stay identical. Only the things that depend on
   sitting inside .cat-body are set here. */
.cat-body .bike-specs {
    margin-bottom: 26px;
    padding: 0 0 4px;
    background: none;                       /* page is white here, no gradient */
}

.cat-body .bike-specs[hidden] { display: none; }

/* The Parametre bar IS the section heading, so the <button> lives inside
   the h2 — the heading stays a heading and the control stays a button.
   specs.css styles .bike-specs__title as the big centred display title;
   here it is only a wrapper for the bar. */
.cat-body .bike-specs__title {
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    line-height: normal;
    /* The rule sits UNDER the button — button first, then the line that
       closes the section off. The h2 is full width, so the line is too. */
    border-bottom: 1px solid var(--cat-ink);
    padding-bottom: 14px;
    /* Parametre and Popis sit side by side as two tabs. */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Reads as a button, like the speed pills: grey at rest, mint when open.
   No rule under it — the grey block is the shape, a border-bottom only
   made it look like a half-finished heading. */
.cat-body .bike-specs__bar {
    font-family: inherit;
    display: block;
    width: 100%;
    max-width: 320px;
    flex: 0 1 320px;
    text-align: left;
    border: none;
    background: var(--cat-chip);
    color: var(--cat-ink);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: none;
    padding: 12px 18px;
    cursor: pointer;
    transition: background 0.25s ease;
}

.cat-body .bike-specs__bar:hover[aria-expanded="false"] { background: #e3e3df; }

/* open → mint, same cue the speed pills give */
.cat-body .bike-specs__bar[aria-expanded="true"] { background: var(--cat-mint); }

/* specs.css sets display:grid on the grid, which would defeat the plain
   [hidden] attribute — this two-class selector outranks it. */
.cat-body .bike-specs__grid[hidden] { display: none; }

.cat-body .bike-specs__grid {
    margin-top: 22px;
    animation: cat-rollout 0.28s ease;
}

/* A bar is hidden when its product has nothing for it (no parameter list,
   or no description) — display:block above would otherwise defeat [hidden]. */
.cat-body .bike-specs__bar[hidden] { display: none; }

/* --- POPIS — the prose from the feed's DESCRIPTION, before the parameters.
   Plain paragraphs at a readable measure, same rollout as the card grid. */
.cat-body .bike-popis {
    margin-top: 22px;
    max-width: 75ch;
    font-size: 1.12rem;
    line-height: 1.55;
    color: var(--cat-ink);
    animation: cat-rollout 0.28s ease;
}

.cat-body .bike-popis[hidden] { display: none; }

.cat-body .bike-popis p { margin: 0 0 0.8em; }
.cat-body .bike-popis p:last-child { margin-bottom: 0; }

/* A section subheading inside the description (see renderPopis). */
.cat-body .bike-popis p.bike-popis__head {
    font-weight: 700;
    margin: 1.2em 0 0.3em;
}
.cat-body .bike-popis p.bike-popis__head:first-child { margin-top: 0; }

/* Comparing is about parameters, lined up card by card across both
   columns — the right-hand bike has no Popis, so the left one hides its
   tab too while the comparison is open. */
.cat-split.is-comparing .bike-specs__bar--popis,
.cat-split.is-comparing .bike-popis { display: none; }

/* ============================================================
   STRÁNKA MODELU (/produkt/<slug>/) — generuje engine/generate.php
   ============================================================
   Statická stránka bez scrapera: fotky, cena, varianty a parametre sú
   priamo v HTML. Košík sa nerieši tu — tlačidlo vedie na kategóriu
   s otvoreným práve týmto bicyklom (#p=<referencia>), kde už všetko
   funguje. Jedna objednávková logika, nie dve.

   Triedy .bike-specs / .spec-card sú zo specs.css, takže tabuľka
   parametrov vyzerá rovnako ako na kategórii. */
.pr-main { padding-top: 24px; }

.pr-crumbs {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    color: var(--cat-muted);
    margin-bottom: 18px;
}

.pr-crumbs a { color: var(--cat-muted); text-decoration: none; }
.pr-crumbs a:hover { color: var(--cat-ink); text-decoration: underline; }
.pr-crumbs span { margin: 0 6px; }

.pr {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 40px;
    align-items: start;
    margin-bottom: 40px;
}

.pr-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.pr-shot {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--cat-line);
}

/* Prvá fotka je hlavná — cez celý stĺpec galérie. */
.pr-shot--main { grid-column: 1 / -1; aspect-ratio: 8 / 6; }

.pr-info { font-family: 'Barlow Condensed', sans-serif; }

.pr-title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.pr-price { font-size: 1.9rem; font-weight: 700; margin: 0 0 4px; }

.pr-avail { font-size: 1.05rem; color: var(--cat-muted); margin: 0 0 18px; }

.pr-variants { font-size: 1.05rem; margin: 0 0 8px; }
.pr-variants b { font-weight: 600; }

.pr-buy {
    display: inline-block;
    margin: 18px 0 8px;
    padding: 13px 30px;
    background: var(--cat-ink);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}

.pr-buy:hover { background: var(--cat-mint); color: var(--cat-ink); }

.pr-intro { margin-top: 20px; font-size: 1.05rem; line-height: 1.55; max-width: 60ch; }
.pr-intro p { margin: 0 0 0.7em; }

.pr-specs { margin-bottom: 50px; }
.pr-specs .bike-specs__title { font-size: 1.6rem; text-align: left; margin-bottom: 18px; }

/* Statická tabuľka nemá ikony (tie dopĺňa specs-loader.js z JS), takže
   karta nesmie držať miesto po prázdnom koliesku. */
.pr-specs .spec-card { padding: 14px 16px; }

@media screen and (max-width: 900px) {
    .pr { grid-template-columns: 1fr; gap: 24px; }
    .pr-shot--main { aspect-ratio: 8 / 5; }
}

/* ============================================================
   STATICKÝ ZOZNAM Z GENERÁTORA (.cat-seo)
   ============================================================
   Vygenerované stránky (/mestske-bicykle-28/) nesú produkty priamo v HTML
   — to je to, čo indexuje vyhľadávač. Len čo category-scraper.js vykreslí
   rodiny, blok sa schová a stránku preberie plná JS verzia s filtrami.

   Keď feed nedorazí, blok ostane viditeľný. Je to teda zároveň to, čo
   návštevník uvidí namiesto prázdnej stránky.

   Na stránke s ?cat= tento blok vôbec nie je. */
.cat-seo {
    margin: 0 0 30px;
}

.cat-seo[hidden] { display: none; }

.cat-seo__copy:empty { display: none; }

.cat-seo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-seo__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 18px 14px;
    border: 1px solid var(--cat-line);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.cat-seo__link:hover {
    border-color: #d5d3ca;
    box-shadow: 0 6px 18px rgba(23, 33, 36, 0.07);
}

.cat-seo__img {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: contain;
}

.cat-seo__name {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.15;
}

.cat-seo__price { font-size: 1.2rem; font-weight: 700; }

.cat-seo__avail { font-size: 0.95rem; color: var(--cat-muted); }

.cat-seo__empty { padding: 30px 0; color: var(--cat-muted); }

@media screen and (max-width: 768px) {
    .cat-seo__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .cat-seo__name { font-size: 1.05rem; }
}

/* --- family gallery ---
   One row, however many photos there are: the row scrolls sideways rather
   than wrapping into a second line, so the gallery keeps a fixed height no
   matter how many pictures a family has. */
/* The row and its two arrows share this box, so the arrows can be pinned to
   the middle of the photos rather than sitting under them. */
.cat-gal-wrap {
    position: relative;
    margin-top: 26px;
}

.cat-gal-wrap[hidden] { display: none; }

.cat-gallery {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

/* Firefox only. Chrome honours scrollbar-width/-color INSTEAD of the
   ::-webkit-scrollbar rules below when both are present, and its version of
   "thin" is a fatter bar with stepper arrows at each end — so those two
   properties are kept away from every browser that has the pseudo-elements. */
@supports not selector(::-webkit-scrollbar) {
    .cat-gallery {
        scrollbar-width: thin;
        scrollbar-color: #c9c9c4 transparent;
    }
}

.cat-gallery::-webkit-scrollbar { height: 4px; }

/* Chrome draws stepper buttons at both ends of a styled scrollbar. They
   are tiny, ugly and can't be moved, and hovering the ends of the row
   scrolls it anyway. */
.cat-gallery::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.cat-gallery::-webkit-scrollbar-track { background: transparent; }
.cat-gallery::-webkit-scrollbar-thumb {
    background: #c9c9c4;
    border-radius: 999px;
}

.cat-gallery[hidden] { display: none; }

.cat-gal-item {
    display: block;             /* it is a <button>; block keeps aspect-ratio honest */
    flex: 0 0 260px;            /* fixed tile — the row scrolls, tiles don't shrink */
    aspect-ratio: 4 / 3;
    background: #f5f5f0;
    border-radius: 10px;
    overflow: hidden;
    scroll-snap-align: start;
    border: none;
    padding: 0;
    cursor: zoom-in;
}

.cat-gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.cat-gal-item:hover img { transform: scale(1.04); }

/* Closing the viewer hands focus back to the thumbnail that opened it, and
   after an Escape the browser counts that as keyboard focus and rings it.
   No ring on these tiles at all — the hover zoom is the only cue. */
.cat-gal-item:focus,
.cat-gal-item:focus-visible { outline: none; }

.cat-scraper-msg { grid-column: 1 / -1; }

/* --- fullscreen viewer ---
   Lives on <body>, not inside .cat-body: a fixed element inside a
   transformed or clipped ancestor stops being fixed to the viewport, and
   the page has both. category-scraper.js appends it once and reuses it. */
.cat-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cat-lb-bg, #dbfaf2);
    font-family: 'Barlow Condensed', sans-serif;
    animation: cat-lb-in 0.18s ease;
}

.cat-lightbox[hidden] { display: none; }

@keyframes cat-lb-in { from { opacity: 0; } to { opacity: 1; } }

.cat-lightbox img {
    max-width: 86vw;
    max-height: 86vh;
    object-fit: contain;
    display: block;
    border-radius: 6px;
}

/* Arrows and close share one look: ink on the mint ground, no chrome. */
.cat-lb-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #172124;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.75;
}

.cat-lb-btn:hover { opacity: 1; }
.cat-lb-btn[hidden] { display: none; }

.cat-lb-prev,
.cat-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    font-size: 4rem;
}

.cat-lb-prev { left: clamp(8px, 3vw, 48px); }
.cat-lb-next { right: clamp(8px, 3vw, 48px); }

.cat-lb-prev:hover { transform: translateY(-50%) translateX(-4px); }
.cat-lb-next:hover { transform: translateY(-50%) translateX(4px); }

.cat-lb-close {
    top: clamp(10px, 2vw, 28px);
    right: clamp(10px, 2vw, 28px);
    width: 48px;
    height: 48px;
    font-size: 2.6rem;
}

@media screen and (max-width: 768px) {
    .cat-lightbox img { max-width: 92vw; max-height: 78vh; }

    /* Under the photo rather than over it — 64px arrows on top of a
       portrait shot cover the bike. */
    .cat-lb-prev,
    .cat-lb-next {
        top: auto;
        bottom: 24px;
        transform: none;
        width: 56px;
        height: 56px;
        font-size: 3rem;
    }

    .cat-lb-prev { left: 18%; }
    .cat-lb-next { right: 18%; }
    .cat-lb-prev:hover { transform: none; }
    .cat-lb-next:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-lightbox { animation: none; }
    .cat-gal-item:hover img { transform: none; }
}


/* ============================================================
   5. MOBILE — hero stays 460px, family cards become a carousel
   ============================================================ */

@media screen and (max-width: 768px) {

    .cat-page {
        --cat-overlap: 70px;
    }

    /* Full width on a phone. The 80vw of the desktop layout left 10vw dead
       on each side, which is exactly the space the neighbouring family cards
       need to peek in — the carousel below bleeds back out through negative
       margins, everything else keeps the 16px gutter. */
    .cat-body {
        max-width: none;
        padding: 0 16px 50px;
    }

    .cat-hero { padding: 30px 18px calc(var(--cat-overlap) + 40px); }

    /* The chevrons used to be hidden here, which left a phone with no way
       at all to reach the next category. Smaller and tucked to the edges
       instead — the hero swipe in category.html does the same job for
       anyone who tries that first. */
    .cat-next,
    .cat-prev {
        width: 38px;
        height: 38px;
        top: calc((var(--cat-hero-h) - var(--cat-overlap)) / 2 - 10px);
    }

    .cat-next { right: 4px; }
    .cat-prev { left: 4px; }

    /* Horizontal snap carousel with a peek of the next family */
    .cat-tabs-l1 {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        /* Out through the body's gutter to the screen edges. The side padding
           is what centres the first and last card while still leaving their
           neighbours visible — it has to match the slack around a cell. */
        margin: 0 -16px;
        padding: 0 13%;
    }

    .cat-tabs-l1::-webkit-scrollbar { display: none; }

    .cat-fam-cell {
        flex: 0 0 74%;
        max-width: none;
        scroll-snap-align: center;
    }

    .cat-fam-card {
        opacity: 1;                 /* the carousel position is the selection cue */
        position: relative;
    }

    /* No label on the card — the name and price under the carousel say it
       once, and the cards are wide enough now that a second copy on top of
       the bike was just clutter. */
    .cat-fam-label,
    .cat-fam-name,
    .cat-fam-price { display: none; }

    .cat-fam-active { display: block; }
    .cat-fam-dots   { display: flex; }

    .cat-fam-cell.active .cat-fam-speeds {
        padding: 12px 0 4px;
        gap: 8px;
    }

    .cat-tab-l2 {
        font-size: 1.05rem;
        padding: 8px 14px;
    }

    /* product panel stacks: photo on top, everything else under it */
    .cat-product {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cat-p-media { min-height: 0; }
    .cat-p-media img { max-height: 300px; }
    .cat-p-meta { text-align: left; }

    .cat-p-buy { flex-wrap: wrap; }
    .cat-p-cart { justify-content: center; }

    .cat-body .bike-specs { padding: 0 0 4px; }
    .cat-body .bike-specs__grid { margin-top: 18px; }
    .cat-body .bike-specs__bar { max-width: none; flex: 1 1 0; }

    .cat-gallery { gap: 10px; }

    /* Just under three-quarters of the screen: the next photo always peeks in
       from the right, which is what tells you the row scrolls. */
    .cat-gal-item { flex-basis: 72vw; }
}

@media (prefers-reduced-motion: reduce) {
    .cat-fam-card,
    .cat-fam-speeds,
    .cat-card,
    .cat-next,
    .cat-prev { transition: none; }
}
/* ── Dostupnosť ────────────────────────────────────────────────────
   Jediný zdroj je DELIVERY_DATE vo feede: 0 = skladom, 7 = komponenty
   sú a bicykel treba zmontovať, chýbajúca hodnota = nedá sa objednať
   (vtedy sa riadok s košíkom vôbec nevykreslí — pozri
   availabilityOf() v category-scraper.js).

   Bodka pred textom nesie farbu, takže význam nie je LEN vo farbe:
   text vedľa nej hovorí to isté slovami. */
.cat-p-avail {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 4px;
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.cat-p-avail::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}

.cat-p-avail.is-stock { color: #1f7a3d; }   /* na sklade */
.cat-p-avail.is-build { color: #a86a00; }   /* treba zmontovať */
.cat-p-avail.is-none  { color: #a12b2b; }   /* nedostupné */

/* ── Zdieľanie ─────────────────────────────────────────────────────
   Tlačidlo sedí pod cenou, NIE pri šípkach ‹ › — nad tými už býva
   bublina s popisom, čím sa šípky líšia, a dve veci na jednom mieste
   by si zavadzali.

   Farby idú z existujúcich custom properties, takže obe značkové
   skiny fungujú bez vetvenia; v tomto súbore nesmie byť nič, čo platí
   len pre jeden web — MAYO ho vidí cez ten istý symlink. */
.cat-p-share {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 2px 0 12px;
    padding: 7px 14px;
    border: 1px solid var(--cat-line, #d8d6cf);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.cat-p-share svg { width: 16px; height: 16px; flex: none; }

.cat-p-share:hover  { background: var(--cat-mint, #dbfaf2); }
.cat-p-share:focus-visible {
    outline: 2px solid var(--cat-gold, #bd8c00);
    outline-offset: 2px;
}

/* Toast. position:fixed, takže roztiahnutie panelu nič neposunie —
   pri rozbalení produktu nevzniká žiadny layout shift. */
.cat-share-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 60;
    margin: 0;
    padding: 11px 20px;
    border-radius: 999px;
    background: #172124;
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.cat-share-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
    .cat-p-share, .cat-share-toast { transition: none; }
}

@media screen and (max-width: 768px) {
    .cat-p-share { font-size: .82rem; padding: 8px 13px; }
    .cat-share-toast { bottom: 16px; font-size: .84rem; padding: 10px 16px; }
}

/* ── Detail + porovnanie vedľa seba ────────────────────────────────
   .cat-split je jeden riadok mriežky. Kým je porovnanie zavreté, má
   jediný stĺpec a .cat-detail je na celú šírku — teda presne to, čo
   stránka robila predtým, žiadna zmena vzhľadu.

   Po kliknutí na Porovnať dostane .cat-split triedu is-comparing:
   stĺpce sa rozdelia na polovice a .cat-compare sa vysunie vpravo.
   Šírka sa animuje cez grid-template-columns, takže sa to vysunie,
   neobjaví sa to skokom.

   Galéria je MIMO tohto bloku a zostáva na celú šírku — patrí
   k rodine, nie ku konkrétnemu kusu. */
.cat-split {
    display: grid;
    grid-template-columns: 1fr 0fr;
    gap: 0;
    align-items: start;
    transition: grid-template-columns .38s cubic-bezier(.25, 1, .5, 1), gap .38s ease;
}

.cat-split.is-comparing {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.cat-detail { min-width: 0; }

/* Tenká deliaca čiara medzi stĺpcami. Kreslí ju pseudo-prvok .cat-split,
   nie border niektorého stĺpca: pri 1fr 1fr je stred medzery presne na
   50 %, čiara siaha cez celý riadok (teda po ten vyšší z oboch stĺpcov)
   a hlavne NEZABERÁ miesto — border s paddingom by musel byť súčasťou
   animácie šírky a pri zavretom porovnaní by stĺpec nebol nulový. */
.cat-split { position: relative; }

.cat-split::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: #d8d6cf;
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}

.cat-split.is-comparing::after { opacity: 1; }

/* Polovičný stĺpec je na fotku VEDĽA popisu úzky — a je jedno, aké
   široké je okno, lebo šírku určuje rozdelenie, nie displej. Oba
   panely preto počas porovnania stoja na výšku: fotka hore, zvyšok
   pod ňou. (Rovnako to robí breakpoint 1023px, len ten sa riadi
   displejom a tu by sa nechytil.) */
.cat-split.is-comparing .cat-product {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.cat-split.is-comparing .cat-p-media { min-height: 0; }
.cat-split.is-comparing .cat-p-media img { max-height: 300px; }
.cat-split.is-comparing .cat-p-meta { text-align: left; }

/* .cat-cmp-product a .cat-cmp-specs tu naschvál nemajú ani jedno
   pravidlo: sú to úchyty pre querySelector, nie pre štýl. Panel sedí
   v .cat-body a vo vnútri .cat-split.is-comparing, takže naň platí
   presne to isté, čo na stránku — a to je zámer. */

/* Zatvorené porovnanie nezaberá ani pixel: nulový stĺpec + overflow,
   takže sa obsah neroztiahne a nevytlačí detail. */
.cat-compare {
    min-width: 0;
    overflow: hidden;
}

.cat-compare[hidden] { display: none; }

/* Hlavička panelu leží NAD fotkou, nie nad ňou v toku: fotka bicykla má
   okolo seba dosť bieleho miesta a takto oba .cat-product začínajú na
   tej istej výške — inak by pravý sedel o hlavičku nižšie ako ľavý.
   Preto absolútne, preto bez vlastnej výšky. */
.cat-compare { position: relative; }

.cat-cmp-float {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    /* Kliknutia patria tlačidlám vo vnútri, nie prázdnemu pruhu — inak
       by neviditeľný obdĺžnik cez pol fotky bral kliky obrázku. */
    pointer-events: none;
    /* Mäkký biely spodok, nie plná plocha: na bielom ho nevidno vôbec,
       a keby fotka siahala vyššie, text nad ňou aj tak zostane čitateľný
       a bez ostrej hrany. */
    background: linear-gradient(180deg,
                #ffffff 0%, #ffffff 62%, rgba(255, 255, 255, 0) 100%);
    padding-bottom: 10px;
}

.cat-cmp-float > * { pointer-events: auto; }

/* Na užšom displeji sa vedľa seba nič nezmestí — stĺpce idú pod seba
   a porovnanie sa vysunie POD detail, nie vedľa neho. */
@media screen and (max-width: 900px) {
    .cat-split,
    .cat-split.is-comparing {
        grid-template-columns: 1fr;
    }
    .cat-split.is-comparing { gap: 18px; }

    /* Pod sebou nie je čo deliť zvislou čiarou — a hlavička sa nemá nad
       čím vznášať, keď panel začína vlastným nadpisom. */
    .cat-split::after { display: none; }

    .cat-cmp-float {
        position: static;
        background: none;
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cat-split { transition: none; }
}

/* ── Tlačidlá Zdieľať / Porovnať ───────────────────────────────────
   Stoja vedľa seba, pol na pol — Zdieľať preto už nie je na celú
   šírku, ako bolo predtým. */
.cat-p-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 2px 0 12px;
}

.cat-p-actions .cat-p-share { margin: 0; width: 100%; justify-content: center; }

/* Vo vloženom paneli stojí Zdieľať samo — Porovnať tam nie je čo. Riadok
   preto drží jeden stĺpec namiesto dvoch, ale DRŽÍ SA: keby sa vynechal
   celý, pravý panel by bol o riadok nižší a parametre oboch stĺpcov by
   si prestali sedieť. Presne to bolo vidno, kým tam tlačidlo chýbalo. */
.cat-cmp-product .cat-p-actions { grid-template-columns: 1fr; }

.cat-p-compare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--cat-line, #d8d6cf);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}

.cat-p-compare svg { width: 16px; height: 16px; flex: none; }
.cat-p-compare:hover { background: var(--cat-mint, #dbfaf2); }
.cat-p-compare.is-on { background: var(--cat-mint, #dbfaf2); border-color: var(--cat-gold, #bd8c00); }
.cat-p-compare:focus-visible,
.cat-p-share:focus-visible {
    outline: 2px solid var(--cat-gold, #bd8c00);
    outline-offset: 2px;
}

/* ── Panel porovnania (vnútro .cat-compare) ────────────────────────
   Vyhľadávacie pole NEMÁ vlastný štýl: použije sa .site-search /
   .site-search__input zo search.css, ktoré už na tejto stránke beží
   v hlavičke. Jeden vzhľad poľa na celom webe. */
.cat-compare__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cat-compare__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    flex: 1;
    min-width: 0;
}

.cat-compare__x {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    flex: none;
}
.cat-compare__x:hover { background: #f0efe9; }

/* Pole na hľadanie: rovnaké ako v hlavičke, len vždy otvorené a na
   celú šírku panelu. */
/* Pole má v hlavičke webu BIELY text na tmavom podklade — tu stojí na
   bielom, takže sa doň nedalo vidieť, čo človek píše. Prefarbuje sa
   preto text, kurzor aj placeholder; tvar a správanie zostávajú tie
   isté, len sa pole otvorí natrvalo a na celú šírku. */
.cat-compare .site-search {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    margin: 0;
}

.cat-compare .site-search__input {
    width: 100%;
    height: 42px;
    padding: 0 42px 0 14px;
    opacity: 1;
    pointer-events: auto;
    color: var(--cat-ink);
    caret-color: var(--cat-ink);
    background: #ffffff;
    border: 1px solid #d8d6cf;
    border-radius: 8px;
}

.cat-compare .site-search__input::placeholder {
    color: #9a9a9a;
    font-weight: 400;
}

.cat-compare .site-search__input:focus {
    border-color: var(--cat-gold);
    background: #ffffff;
}

.cat-compare .site-search__btn {
    height: 42px;
    color: var(--cat-muted);
}

.cat-cmp-near { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }

.cat-cmp-near__b {
    padding: 5px 11px;
    border: 1px solid var(--cat-line, #d8d6cf);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}
.cat-cmp-near__b:hover { background: var(--cat-mint, #dbfaf2); }

.cat-cmp-res {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.cat-cmp-card {
    display: grid;
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--cat-line, #d8d6cf);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.cat-cmp-card.is-picked { cursor: default; border-color: var(--cat-gold, #bd8c00); }
.cat-cmp-card:not(.is-picked):hover { background: var(--cat-mint, #dbfaf2); }

.cat-cmp-card__img { display: block; height: 80px; text-align: center; }
.cat-cmp-card__img img { max-height: 80px; max-width: 100%; object-fit: contain; }
.cat-cmp-card__name  { font-weight: 700; font-size: .9rem; line-height: 1.25; }
.cat-cmp-card__price { font-weight: 700; }

.cat-cmp-chip {
    display: inline-block;
    margin: 2px 4px 0 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f0efe9;
    font-size: .72rem;
}

.cat-cmp-change {
    flex: none;
    padding: 5px 12px;
    border: 1px solid var(--cat-line, #d8d6cf);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

/* ── Rozdiely v parametroch ────────────────────────────────────────
   Porovnanie NIE je tabuľka: vpravo stojí celý druhý produkt aj so
   svojou sekciou Parametre, a rozdiel sa značí priamo na kartách —
   v oboch stĺpcoch naraz, na tom istom riadku.

   Sekcia Parametre v paneli si vzhľad neberie odtiaľto: aside sedí
   v .cat-body, takže na ňu platia tie isté pravidlá .cat-body
   .bike-specs ako na sekciu na stránke. Nič sa nekopíruje. */
.cat-cmp-only {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
}
.cat-cmp-only__n { font-weight: 400; opacity: .6; }

/* Rozdiel nesie zlatý pruh, rámček AJ farbu textu — nie iba farbu,
   inak by ho nerozoznal nikto s poruchou farbocitu. */
.cat-body .spec-card.is-diff {
    border-color: var(--cat-gold, #bd8c00);
    background: #fffdf6;
    box-shadow: inset 4px 0 0 var(--cat-gold, #bd8c00);
}

.cat-body .spec-card.is-diff .spec-card__label { color: var(--cat-gold, #bd8c00); }
.cat-body .spec-card.is-diff .spec-card__icon { background: #f6eccd; }

/* Pri prejdení myšou sa OTOČÍ vlastné zvýraznenie karty — zlatá plocha,
   svetlá ikona. Bez tohto by platil bežný .spec-card:hover zo specs.css
   a zlato označená karta by pod kurzorom zmintovatela ako každá iná —
   teda by práve pod kurzorom prestala byť označená. */
.cat-body .spec-card.is-diff:hover { border-color: var(--cat-gold); }

.cat-body .spec-card.is-diff:hover .spec-card__icon {
    background: var(--cat-gold);
    color: #fffdf6;
}

/* Parameter, ktorý ten bicykel vôbec nemá. Karta zostáva na mieste —
   bez nej by sa riadky oboch stĺpcov posunuli a porovnávalo by sa
   krížom — ale je zjavne prázdna. */
.cat-body .spec-card.is-missing { background: #fbfbfa; }
.cat-body .spec-card.is-missing .spec-card__value {
    color: #b6b6b0;
    font-weight: 500;
}
.cat-body .spec-card.is-missing .spec-card__icon { opacity: .35; }

.cat-body .spec-card.is-missing:hover { border-color: #eceeef; }
.cat-body .spec-card.is-missing:hover .spec-card__icon {
    background: var(--cat-chip);
    color: #b6b6b0;
}

.cat-cmp-none { color: #9a9a9a; }
.cat-cmp-load { padding: 24px 0; text-align: center; color: #9a9a9a; }

@media (prefers-reduced-motion: reduce) {
    .cat-p-compare { transition: none; }
}

@media screen and (max-width: 768px) {
    .cat-p-actions { gap: 6px; }
    .cat-p-compare { font-size: .82rem; padding: 8px 10px; }
    .cat-cmp-res { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}