/* =========================================================
   U Jabka — public design foundation
   (UJ-PUBLIC-REDESIGN-COMPLETE-001)

   CANONICAL tokens only — exact names/values from the approved preview
   (u-jabka-homepage-preview-light.html). Source of truth for color,
   radius, spacing and ease across the whole public site. Every page
   (shell, homepage, catalog, detail, cart, checkout, informational
   pages via their page-scoped CSS files) consumes this set; the former
   TRANSITIONAL legacy token block (PRs #177-#181) lost its last
   consumer in this redesign and was removed — only the .container
   geometry pair (--container/--gutter) survives until a deliberate
   container-width migration to --max-w/--pad-x.
   ========================================================= */

:root {
    /* ---- CANONICAL (preview) — colors ---- */
    --bg: #FFFFFF;
    --bg-deep: #F6F6F4;
    --panel: #FFFFFF;
    --line: rgba(21, 20, 14, .11);
    --line-soft: rgba(21, 20, 14, .06);

    --ink: #17160F;
    --ink-70: rgba(23, 22, 15, .72);
    --ink-55: rgba(23, 22, 15, .64);
    /* Decorative/non-text use only (dividers, disabled-state fills) — at
       ~3.1:1 on --bg this token fails WCAG AA for body text. Use --ink-55
       (~7:1) or --ink-70 for any readable text. */
    --ink-38: rgba(23, 22, 15, .38);

    --leaf: #234B36;
    --leaf-2: #2F6B4A;
    --leaf-tint: rgba(35, 75, 54, .08);
    --leaf-line: rgba(35, 75, 54, .34);

    /* ---- CANONICAL (preview) — shape, spacing, motion ---- */
    --r-lg: 12px;
    --r-md: 10px;
    --r-sm: 6px;
    --r-pill: 999px; /* only small chips/segments — large components use --r-btn and smaller */
    --r-btn: 8px;
    --ease: cubic-bezier(.22, .65, .2, 1);
    --pad-x: clamp(20px, 4vw, 56px);
    --max-w: 1320px;

    /* ---- CANONICAL (preview) — self-hosted fonts, see @font-face below ---- */
    --font-sans: "Archivo", system-ui, sans-serif;
    --font-serif: "Fraunces", Georgia, serif;

    /* ---- .container geometry (poslední přeživší z legacy sady) ---- */
    --container: 1180px;    /* --max-w je canonical ekvivalent (1320px) pro budoucí migraci */
    --gutter: clamp(20px, 5vw, 48px);   /* --pad-x je canonical ekvivalent */
}

/* =========================================================
   Self-hosted fonts (Archivo, Fraunces) — no external CDN.
   Files + LICENSE-OFL.txt fetched from Google Fonts / the upstream
   google/fonts repository under the SIL Open Font License 1.1.
   Split latin / latin-ext per family so Czech diacritics (latin-ext)
   render correctly; both subsets are needed on every public page.
   Archivo and Fraunces are both variable fonts upstream — one file per
   subset covers every weight the shell/preview use via `font-weight: A B`.
   ========================================================= */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 650;
    font-display: swap;
    src: url("../fonts/fraunces-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 650;
    font-display: swap;
    src: url("../fonts/fraunces-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-serif); color: var(--ink); font-weight: 600; margin: 0; line-height: 1.15; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container {
    width: min(var(--container), calc(100% - 2 * var(--gutter)));
    margin-inline: auto;
}

/* Kotvy nepodjíždějí pod sticky header; zámek scrollu pro mobilní menu */
section[id] { scroll-margin-top: 96px; }
.no-scroll { overflow: hidden; }
.nav-scrim { display: none; }

/* Ikony */
.svg-sprite { position: absolute; } /* hidden defs-only sprite; was an inline style="" attribute, moved here for CSP (no unsafe-inline) */
.ico { width: 20px; height: 20px; flex: none; fill: none; }
.ico--sm { width: 15px; height: 15px; }

/* Accessibility */
.skip-link {
    position: absolute;
    left: 12px; top: -48px;
    background: var(--leaf); color: #fff;
    font-family: var(--font-sans);
    padding: 10px 16px; border-radius: var(--r-sm);
    z-index: 200; transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* Kept on the legacy accent for now: :focus-visible is a global rule that
   fires on every focusable element across every public page, not just the
   shell this PR redesigns. Moving to --leaf is deferred to whichever PR
   redesigns the page the ring shows up on, so this PR can't change a
   focus-visible color that content pages haven't opted into yet. */
:focus-visible {
    outline: 2.5px solid var(--leaf);
    outline-offset: 2px;
    border-radius: 4px;
}

/* =========================================================
   Tlačítka
   ========================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.95rem; font-weight: 600;
    padding: 13px 22px;
    border-radius: var(--r-btn);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn--sm { padding: 9px 16px; font-size: 0.875rem; }
.btn--primary { background: var(--leaf); color: #fff; }
.btn--primary:hover { background: var(--leaf-2); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--leaf-line); color: var(--leaf); background: var(--leaf-tint); }
.btn--outline { background: var(--panel); color: var(--ink); border-color: var(--line); border-radius: var(--r-btn); }
.btn--outline:hover { border-color: var(--leaf-line); color: var(--leaf); }
.btn--text {
    padding-inline: 0;
    background: transparent;
    border-color: transparent;
    color: var(--leaf);
}
.btn--text:hover { color: var(--leaf-2); background: transparent; }
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

/* =========================================================
   Top bar — canonical (preview) shell
   ========================================================= */
.topbar {
    background: var(--ink);
    color: rgba(251, 250, 246, .86);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(251, 250, 246, .08);
}
.topbar__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; min-height: 42px; flex-wrap: wrap;
    padding-block: 7px;
}
.topbar__item {
    display: inline-flex; align-items: center; gap: 8px;
    max-width: 100%;
    line-height: 1.25;
}
.topbar__item .ico { width: 16px; height: 16px; stroke: var(--leaf-2); }
.topbar__sep { width: 1px; height: 14px; background: rgba(251, 250, 246, .16); }

/* =========================================================
   Header — canonical (preview) shell
   ========================================================= */
.header {
    position: sticky; top: 0; z-index: 100;
    /* Preview uses backdrop-filter: blur(10px) here. Deliberately omitted:
       combined with the off-canvas .nav drawer's fixed+translateX(100%)
       resting state, it makes Chromium mis-measure document.scrollWidth
       (390 -> 710 at a 390px viewport, reproducibly toggled by this one
       property, verified against the pre-PR CSS which doesn't have it).
       Background kept translucent; revisit once the drawer itself changes
       (PR 2+) or the underlying engine behavior does. */
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line-soft);
}
.header__inner {
    display: flex; align-items: center; gap: 22px;
    min-height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__mark {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: var(--r-pill);
    background: var(--leaf-tint);
}
.brand__mark .ico { width: 30px; height: 30px; fill: var(--leaf); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.brand__sub { font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-55); margin-top: 3px; }

.nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); margin-inline: auto; }
.nav a {
    font-family: var(--font-sans);
    font-size: 0.94rem; font-weight: 500; color: var(--ink-70);
    padding: 8px 0; position: relative;
    transition: color .15s ease, opacity .15s ease;
}
.nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--leaf); border-radius: 2px;
    transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.nav a:hover,
.nav a.is-current { color: var(--ink); }
.nav a:hover::after,
.nav a.is-current::after { transform: scaleX(1); }

.header__actions {
    display: flex; align-items: center; gap: 4px;
    flex: none;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.62);
}
.icon-btn {
    display: grid; place-items: center;
    width: 40px; height: 40px;
    background: transparent; border: 0; border-radius: var(--r-pill);
    color: var(--ink); cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.icon-btn .ico { stroke: currentColor; }
.icon-btn:hover { background: var(--leaf-tint); color: var(--leaf); }
.icon-btn--cart { position: relative; }
.cart-badge {
    position: absolute; top: 2px; right: 1px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: grid; place-items: center;
    background: var(--leaf); color: #fff;
    font-size: 0.7rem; font-weight: 700; line-height: 1;
    border-radius: var(--r-pill);
}

.nav-toggle { display: none; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    content: ""; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-45deg) translateY(-1.5px) translateX(1px); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--leaf-2);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 18px;
}
.eyebrow .ico { width: 18px; height: 18px; fill: var(--leaf-2); }

/* =========================================================
   Sekce — obecné
   ========================================================= */
.section { padding-block: clamp(52px, 7vw, 92px); }
.section--tight { padding-block: clamp(28px, 4vw, 48px); }
.section--soft { background: var(--bg-deep); border-top: 1px solid var(--line-soft); }

.section__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 34px;
}
.section__title { font-size: 2rem; }
.section__title--center { text-align: center; margin-bottom: 48px; }

/* =========================================================
   Produktové karty
   ========================================================= */
.products {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.card {
    display: flex; flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -24px rgba(23, 22, 15, .24); border-color: var(--leaf-line); }

.card__media {
    position: relative;
    display: grid; place-items: center;
    padding: 26px 20px 20px;
    background: linear-gradient(180deg, #fafafa, #f2f2f1);
    border-bottom: 1px solid var(--line-soft);
}
.device { width: 116px; height: auto; filter: drop-shadow(0 14px 18px rgba(20, 40, 24, 0.16)); }
.card__image {
    width: 100%;
    max-width: 172px;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    filter: drop-shadow(0 14px 18px rgba(20, 40, 24, 0.16));
}

.badge {
    position: absolute; top: 12px; left: 12px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 5px 10px; border-radius: var(--r-pill); color: #fff;
}
.badge--new { background: var(--leaf); }             /* Nové zařízení */
.badge--used { background: var(--leaf-2); }          /* Ověřený použitý kus */
.badge--stock { background: #4f8a60; }                /* připraveno: Skladem / Dodání do 24 h */
.badge--order { background: #8a8f80; }                /* připraveno: Na objednávku */

.card__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
.card__title { font-size: 1.15rem; }
.card__spec { color: var(--ink-70); font-size: 0.9rem; }
.card__meta { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-55); font-size: 0.84rem; margin-top: 2px; }
.card__meta .ico { stroke: var(--leaf-2); }
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.price { font-size: 1.18rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.homepage-featured-empty {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    padding: 24px;
}

.homepage-featured-empty h3 {
    margin-bottom: 6px;
}

.homepage-featured-empty p {
    max-width: 560px;
    margin-bottom: 16px;
    color: var(--ink-70);
}

/* =========================================================
   Public homepage redesign MVP
   ========================================================= */
.home-showroom {
    background: #fdfbf6;
    border-bottom: 1px solid var(--line-soft);
}

.home-showroom .btn--primary,
.home-featured .btn--primary,
.home-products .btn--primary {
    background: #151515;
    color: #fff;
}

.home-showroom .btn--primary:hover,
.home-featured .btn--primary:hover,
.home-products .btn--primary:hover {
    background: #2b2b28;
}

.home-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
    gap: 56px;
    align-items: center;
    min-height: 600px;
    padding-block: 44px;
}

.home-hero__copy {
    display: grid;
    gap: 22px;
    max-width: 660px;
}

.home-hero h1 {
    max-width: 10.8em;
    font-size: 4.4rem;
    line-height: 0.98;
    letter-spacing: 0;
}

.home-hero__lead {
    max-width: 39em;
    color: var(--ink-70);
    font-size: 1.1rem;
    line-height: 1.7;
}

.home-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.home-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 0;
}

.home-proof div {
    min-width: 0;
    min-height: 94px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.home-proof dt {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 850;
}

.home-proof dd {
    margin: 5px 0 0;
    color: var(--ink-55);
    font-size: 0.78rem;
    line-height: 1.35;
}

.home-showroom__stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 28%),
        linear-gradient(145deg, #151615 0%, #242821 55%, #0f1110 100%);
    box-shadow: 0 28px 70px rgba(22, 31, 24, 0.18);
}

.home-showroom__surface {
    position: absolute;
    inset: auto 8% 12% 8%;
    height: 24%;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(180deg, rgba(247, 243, 234, 0.13), rgba(247, 243, 234, 0.02)),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transform: skewY(-3deg);
}

.home-showroom__device {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: min(70%, 350px);
    min-height: 390px;
}

.home-showroom__image,
.home-featured-card__image {
    width: 100%;
    max-width: 310px;
    max-height: 430px;
    object-fit: contain;
    filter: drop-shadow(0 26px 38px rgba(0, 0, 0, 0.36));
}

.home-showroom__label {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    display: grid;
    gap: 2px;
    max-width: min(300px, calc(100% - 44px));
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(23, 22, 15, 0.05);
}

.home-showroom__label span {
    color: var(--leaf);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-showroom__label strong {
    color: var(--ink);
    line-height: 1.25;
}

.home-device-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 210px;
    color: #243d2c;
}

.home-device-fallback--hero {
    min-height: 390px;
    color: #dfe8dc;
}

.home-device-fallback--hero .device {
    width: min(52vw, 218px);
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.42));
}

.home-featured {
    padding-block: 58px;
    background: #fff;
    border-bottom: 1px solid var(--line-soft);
}

.home-featured__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 34px;
    align-items: stretch;
}

.home-featured__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 560px;
}

.home-featured__copy h2 {
    margin-bottom: 16px;
    font-size: 2.45rem;
}

.home-featured__copy p {
    color: var(--ink-55);
    line-height: 1.7;
}

.home-featured-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.74fr) minmax(0, 1fr);
    min-height: 290px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafafa;
    box-shadow: 0 20px 36px -24px rgba(23, 22, 15, .24);
}

.home-featured-card--empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 28px;
}

.home-featured-card__media {
    position: relative;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        linear-gradient(180deg, #f8f5ec, #ebe5d6);
    border-right: 1px solid var(--line-soft);
}

.home-featured-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 28px;
}

.home-featured-card__body h3 {
    font-size: 1.75rem;
}

.home-featured-card__body p {
    color: var(--ink-70);
}

.home-featured-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--ink-55);
    font-size: 0.9rem;
}

.home-featured-card__meta .ico {
    stroke: var(--leaf-2);
}

.home-featured-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}

.home-featured-card__foot strong {
    color: var(--ink);
    font-size: 1.36rem;
    font-variant-numeric: tabular-nums;
}

.home-actions {
    padding-block: 58px;
    background: #f7f3ea;
    border-bottom: 1px solid var(--line-soft);
}

.home-actions__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.home-action-card {
    display: grid;
    gap: 12px;
    min-height: 220px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(23, 22, 15, 0.05);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.home-action-card:hover {
    transform: translateY(-3px);
    border-color: rgba(47, 90, 60, 0.34);
    box-shadow: 0 20px 36px -24px rgba(23, 22, 15, .24);
}

.home-action-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #151515;
    color: #fff;
}

.home-action-card__icon .ico {
    stroke: currentColor;
}

.home-action-card strong {
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.6rem;
    line-height: 1.1;
}

.home-action-card span:last-child {
    color: var(--ink-55);
    line-height: 1.55;
}

.home-products {
    background: #fafafa;
}

.home-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-products__grid > .card {
    border-radius: 8px;
}

.home-products__grid > .card .card__media {
    min-height: 250px;
}

.home-products__grid > .card .card__image {
    max-width: 205px;
    max-height: 230px;
}

.home-products__grid > .card .card__foot {
    align-items: flex-end;
}

/* Light treatment per the approved preview's "why" section — the previous
   full-width dark green band was explicitly retired with the old design. */
.home-verify {
    padding-block: 68px;
    background: var(--bg-deep);
    color: var(--ink);
}

.home-verify .eyebrow { color: var(--leaf); }

.home-verify h2,
.home-verify h3 {
    color: var(--ink);
}

.home-verify__head {
    display: grid;
    gap: 10px;
    max-width: 720px;
    margin-bottom: 32px;
}

.home-verify__head h2,
.home-local h2 {
    font-size: 2.55rem;
}

.home-verify__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.home-verify__grid article {
    min-height: 220px;
    padding: 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.home-verify__grid span {
    display: block;
    margin-bottom: 28px;
    color: var(--leaf-2);
    font-weight: 850;
}

.home-verify__grid h3 {
    margin-bottom: 10px;
    font-size: 1.15rem;
}

.home-verify__grid p {
    color: var(--ink-55);
    font-size: 0.92rem;
    line-height: 1.55;
}

.home-local {
    padding-block: 68px;
    background: #fff;
}

.home-local__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
    gap: 42px;
    align-items: center;
}

.home-local p {
    max-width: 58ch;
    margin-top: 14px;
    color: var(--ink-55);
    line-height: 1.7;
}

.home-local__list {
    display: grid;
    gap: 12px;
}

.home-local__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fafafa;
    color: var(--ink-70);
    font-weight: 750;
}

.home-local__list .ico {
    stroke: var(--leaf-2);
}

@media (max-width: 1080px) {
    .home-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 0.86fr);
        gap: 34px;
    }

    .home-hero h1 {
        font-size: 3.7rem;
    }

    .home-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-verify__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .home-hero__grid,
    .home-featured__inner,
    .home-local__grid {
        grid-template-columns: 1fr;
    }

    .home-hero__grid {
        min-height: 0;
    }

    .home-showroom__stage {
        min-height: 470px;
    }

    .home-featured-card {
        grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr);
    }

    .home-actions__grid,
    .home-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .home-hero__grid {
        padding-block: 38px;
    }

    .home-hero__copy {
        gap: 18px;
    }

    .home-hero h1 {
        font-size: 2.8rem;
    }

    .home-hero__lead {
        font-size: 1rem;
    }

    .home-actions__grid,
    .home-products__grid,
    .home-verify__grid {
        grid-template-columns: 1fr;
    }

    .home-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .home-proof div {
        min-height: 74px;
        padding: 10px;
    }

    .home-proof dt {
        font-size: 0.76rem;
    }

    .home-proof dd {
        font-size: 0.72rem;
    }

    .home-showroom__stage {
        min-height: 240px;
    }

    .home-showroom__device {
        width: min(62%, 220px);
        min-height: 190px;
    }

    .home-showroom__image {
        max-width: 170px;
        max-height: 220px;
    }

    .home-device-fallback--hero {
        min-height: 190px;
    }

    .home-device-fallback--hero .device {
        width: 130px;
    }

    .home-featured__copy h2,
    .home-verify__head h2,
    .home-local h2 {
        font-size: 2rem;
    }

    .home-featured-card {
        grid-template-columns: 1fr;
    }

    .home-featured-card__media {
        min-height: 260px;
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .home-featured-card__foot,
    .home-products__grid > .card .card__foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-featured-card__foot .btn,
    .home-products__grid > .card .card__foot .btn {
        width: 100%;
    }

    .home-action-card {
        min-height: 180px;
    }

    .home-verify__grid article {
        min-height: 0;
    }
}

@media (max-width: 460px) {
    .home-hero h1 {
        font-size: 2.35rem;
    }

    .home-hero__cta .btn {
        flex: 1 1 150px;
        padding-inline: 14px;
    }

    .home-showroom__stage {
        min-height: 120px;
    }

    .home-showroom__device,
    .home-device-fallback--hero {
        min-height: 100px;
    }

    .home-showroom__image {
        max-width: 110px;
        max-height: 118px;
    }

    .home-device-fallback--hero .device {
        width: 78px;
    }

    .home-showroom__label {
        display: none;
    }

    .home-actions .btn,
    .homepage-featured-empty .btn {
        width: 100%;
    }

    .home-showroom__label {
        right: 14px;
        bottom: 14px;
        max-width: calc(100% - 28px);
    }

    .home-featured-card__body,
    .home-featured-card--empty,
    .home-action-card,
    .home-verify__grid article {
        padding: 20px;
    }
}

/* =========================================================
   Shared commerce components (kept from the legacy Katalog
   section — still consumed by catalog.php / product-detail.php
   / cart.php after the UJ-PUBLIC-REDESIGN-COMPLETE-001 prune;
   retokened onto the canonical set)
   ========================================================= */
.battery-dot {
    width: 11px;
    height: 11px;
    flex: none;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--leaf-tint);
}

.battery-dot--green { background: #3d8a54; }
.battery-dot--yellow { background: #d5a83e; }
.battery-dot--orange { background: #c47a3c; }
.battery-dot--unknown { background: #9a9a8b; }

.cart-add-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.cart-add-form--inline {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cart-quantity-input {
    width: 72px;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    padding: 8px 10px;
}

@media (max-width: 680px) {
    .cart-add-form,
    .cart-add-form .btn {
        width: 100%;
    }
}
/* =========================================================
   Footer — canonical (preview) shell
   ========================================================= */
.footer {
    background: var(--ink);
    color: rgba(251, 250, 246, .7);
    font-family: var(--font-sans);
    border-top: 1px solid rgba(251, 250, 246, .12);
}
.footer__grid {
    display: grid; grid-template-columns: minmax(230px, 1.6fr) repeat(3, minmax(132px, 1fr)) minmax(220px, 1.25fr);
    gap: clamp(22px, 3vw, 46px);
    padding-block: clamp(44px, 5vw, 64px);
}
.brand--light .brand__name { color: #F7F7F6; }
.brand--light .brand__mark .ico { fill: var(--leaf-2); }
.footer__about { font-size: 0.9rem; line-height: 1.6; color: rgba(251, 250, 246, .7); margin: 16px 0 18px; max-width: 32ch; }

.footer__col, .footer__contact { display: flex; flex-direction: column; gap: 11px; }
.footer__heading { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F7F7F6; margin-bottom: 6px; }
.footer__col a, .footer__contact a, .footer__contact p {
    min-width: 0;
    font-size: 0.9rem; color: rgba(251, 250, 246, .7); display: inline-flex; align-items: center; gap: 9px;
    transition: color .15s ease;
}
.footer__col a:hover, .footer__contact a:hover { color: #fff; }
.footer__contact .ico { width: 17px; height: 17px; stroke: var(--leaf-2); }
.footer__contact {
    background: rgba(251, 250, 246, .06);
    border: 1px solid rgba(251, 250, 246, .08);
    border-radius: var(--r-sm);
    padding: 22px;
}

.footer__bar { border-top: 1px solid rgba(251, 250, 246, .08); }
.footer__bar-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding-block: 18px; font-size: 0.82rem; color: rgba(251, 250, 246, .42);
}
.heart { color: rgba(251, 250, 246, .7); }

/* =========================================================
   Responsivita
   ========================================================= */
/* Footer-specific fallback, deliberately independent of the nav breakpoint
   below (F1 correction). The base 5-column .footer__grid's minmax() floors
   (230 + 3*132 + 220 = 846px) plus its gaps don't fit the .container's
   available width from just above 980px up to roughly 1010-1020px — well
   above the 980/981 nav boundary, so a shared threshold regressed the
   footer even though the nav itself was fine. Restores the footer's own
   pre-consolidation ~1080px fallback so it clears that gap with margin,
   without moving the nav's 980/981 state boundary at all. */
@media (max-width: 1080px) {
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__contact { grid-column: span 3; }
}

/* Shared shell breakpoint for the nav, on the canonical 980px boundary (was
   a separate legacy nav off-canvas drawer breakpoint at 1024px — a
   shell-only consolidation). The 12 other legacy breakpoints scattered
   across content-page CSS are intentionally left alone in this PR — see
   docs/design/UJABKA_PUBLIC_DESIGN_SYSTEM.md.

   Off-canvas hiding below only ever activates under html.js-nav-enhanced,
   a class frontend.js adds as its first statement. Without JavaScript (or
   before it has run), .nav stays in normal document flow — see the
   :not(.js-nav-enhanced) block at the end of this query — so the primary
   navigation is never hidden before progressive enhancement is confirmed. */
@media (max-width: 980px) {
    .header__inner {
        gap: 14px;
    }

    .js-nav-enhanced .nav {
        position: fixed; inset: 0 0 0 auto;
        width: min(330px, 84vw);
        flex-direction: column; align-items: flex-start; justify-content: flex-start;
        gap: 4px; margin: 0; padding: 92px 28px 28px;
        background: var(--bg-deep); border-left: 1px solid var(--line);
        box-shadow: 0 18px 48px rgba(23, 22, 15, .18);
        transform: translateX(100%); visibility: hidden;
        transition: transform .25s ease, visibility .25s ease;
        overflow-y: auto;
        z-index: 120;
    }
    .js-nav-enhanced .nav.is-open { transform: translateX(0); visibility: visible; }
    .nav a { font-size: 1.05rem; padding: 11px 0; width: 100%; }
    .nav a::after { display: none; }
    .nav a.is-current {
        color: var(--ink);
        font-weight: 700;
    }
    .js-nav-enhanced .nav-toggle { display: grid; }
    .js-nav-enhanced .nav-scrim {
        display: block; position: fixed; inset: 0;
        background: rgba(23, 22, 15, .42);
        opacity: 0; visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
        z-index: 110;
    }
    .js-nav-enhanced .nav-scrim.is-open { opacity: 1; visibility: visible; }

    /* No-JS / pre-enhancement baseline: nav wraps onto its own full-width row
       below brand + actions, in normal flow — visible, ordered, focusable.
       .nav-toggle stays display:none (its unconditional base rule) because
       only .js-nav-enhanced .nav-toggle above switches it to display:grid. */
    html:not(.js-nav-enhanced) .header__inner {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    html:not(.js-nav-enhanced) .nav {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 8px 0 0;
        padding-top: 10px;
        border-top: 1px solid var(--line-soft);
    }
}

@media (max-width: 960px) {
    .products { grid-template-columns: repeat(2, 1fr); }
    .trust { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
}

@media (max-width: 760px) {
    .catalog-card__foot { align-items: flex-start; flex-direction: column; }
    .catalog-card__actions { justify-content: flex-start; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .footer__brand { grid-column: span 2; }
    .footer__contact { grid-column: span 2; }
}

@media (max-width: 640px) {
    /* Jen první (nejdůležitější) sdělení — tři položky se na úzkém displeji
       lámaly do tří řádků a zabíraly příliš mnoho místa nad hero sekcí. */
    .topbar__item:not(:first-child),
    .topbar__sep { display: none; }
    .topbar__inner { justify-content: center; }
}

@media (max-width: 480px) {
    .topbar__inner {
        gap: 8px 12px;
        font-size: 0.74rem;
    }
    .header__inner {
        min-height: 68px;
        gap: 10px;
    }
    .brand { gap: 8px; }
    .brand__mark {
        width: 34px;
        height: 34px;
    }
    .brand__mark .ico {
        width: 26px;
        height: 26px;
    }
    .brand__name { font-size: 1.28rem; }
    .brand__sub { display: none; }
    .header__actions {
        margin-left: auto;
        gap: 2px;
        padding: 3px;
    }
    .icon-btn {
        width: 36px;
        height: 36px;
    }
    .nav {
        width: min(320px, 88vw);
        padding: 84px 24px 24px;
    }
    .section__title { font-size: 1.55rem; }
    .products { grid-template-columns: 1fr; }
    .trust { grid-template-columns: 1fr; }
    .section__head { flex-direction: column; align-items: flex-start; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__brand,
    .footer__contact { grid-column: auto; }
    .footer__bar-inner { justify-content: center; text-align: center; }
}

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

/* =========================================================
   UJ-PUBLIC-REDESIGN-COMPLETE-001 — shared shell additions
   (brand logo image, footer company block)
   ========================================================= */
.brand__logo { display: block; height: 40px; width: auto; flex: none; }
.brand--light .brand__logo { filter: drop-shadow(0 0 1px rgba(251, 250, 246, .35)); }

.footer__company { display: grid; gap: 4px; margin-top: 16px; font-size: 0.9rem; line-height: 1.55; color: rgba(251, 250, 246, .7); }
.footer__company p { margin: 0; }
.footer__company p:first-child { color: #F7F7F6; }

/* =========================================================
   Homepage — fullscreen video intro (UJ-PUBLIC-REDESIGN-COMPLETE-001,
   owner correction: intro covers the whole viewport, shell + page content
   stay hidden and scroll stays locked until the video finishes).

   Replaceable seam: assets/video/hero-intro.mp4 + assets/img/hero-poster.jpg
   (first frame — shown while the video loads) + assets/img/hero-still.jpg
   (final frame — the completed-state background for every fallback).

   Class model:
     html.has-hero-intro       server-rendered on the homepage only —
                               geometry: shell-top becomes a fixed overlay,
                               hero fills 100dvh (no layout shift on reveal).
     html.hero-intro-pending   set by hero-boot.js BEFORE first paint when
                               the animated intro may run: only the video is
                               visible, everything else hidden, scroll locked.
     html.js-hero-enhanced     controller active: video shown, panel waits.
     .hero--done               video ended → reveal (panel + shell slide in
                               over the preserved final frame).
     .hero--static             any failure → completed state with the still.
     html.hero-intro-failsafe  boot watchdog fired → force completed state.
   No-JS: none of the JS classes exist → completed state immediately.
   ========================================================= */
.hero-intro {
    position: relative;
    height: 100vh;
    height: 100dvh;
    min-height: 480px;
    background: var(--bg-deep);
    overflow: hidden;
}
.hero-intro__video,
.hero-intro__still {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
}
.hero-intro__video { display: none; }
html.js-hero-enhanced .hero-intro__video { display: block; }
html.js-hero-enhanced .hero-intro:not(.hero--static) .hero-intro__still { visibility: hidden; }
html.js-hero-enhanced .hero-intro.hero--static .hero-intro__video { display: none; }
html.js-hero-enhanced .hero-intro.hero--static .hero-intro__still { visibility: visible; }

/* Homepage shell geometry: topbar+header overlay the hero instead of
   pushing it down — the video frame never moves when the shell reveals. */
html.has-hero-intro .shell-top {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    transition: transform .6s var(--ease), visibility .6s;
}

/* Intro lock: only the video layer is visible, nothing scrolls. */
html.hero-intro-pending,
html.hero-intro-pending body { overflow: hidden; }
html.hero-intro-pending .shell-top,
html.hero-intro-pending .skip-link {
    transform: translateY(-110%);
    visibility: hidden;
}
html.hero-intro-pending main > :not(.hero-intro),
html.hero-intro-pending .public-shell__footer,
html.hero-intro-pending .nav-scrim { visibility: hidden; }

/* Copy panel — opaque warm off-white, dark text, bottom-left quiet area of
   the final frame. Never pale text directly over the bright video. */
.hero-intro__overlay {
    position: absolute; inset: 0;
    display: flex; align-items: flex-end; justify-content: flex-start;
    padding: clamp(18px, 4vw, 56px);
    pointer-events: none;
    transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s, visibility .7s .15s;
}
.hero-intro__panel {
    pointer-events: auto;
    box-sizing: border-box;
    min-width: 0;
    max-width: min(500px, 100%);
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 48px rgba(23, 22, 15, .16);
    padding: clamp(22px, 3vw, 34px);
}
.hero-intro__panel h1 {
    font-family: var(--font-serif); font-weight: 600;
    font-size: clamp(26px, 3vw, 40px); line-height: 1.1;
    color: var(--ink); margin: 0 0 12px; text-wrap: balance;
}
.hero-intro__panel p { font-size: 1rem; color: var(--ink-70); margin: 0 0 20px; }
.hero-intro__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* During enhanced playback the panel waits for `ended`/failure. */
html.js-hero-enhanced .hero-intro:not(.hero--done):not(.hero--static) .hero-intro__overlay {
    opacity: 0; visibility: hidden; transform: translateY(18px);
}

/* Boot watchdog fired (frontend.js never settled the intro): force the
   completed presentation — never a locked or blank layer. */
html.hero-intro-failsafe .hero-intro__overlay {
    opacity: 1 !important; visibility: visible !important; transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html.js-hero-enhanced .hero-intro__video { display: none; }
    html.js-hero-enhanced .hero-intro .hero-intro__still { visibility: visible; }
    html.js-hero-enhanced .hero-intro .hero-intro__overlay {
        opacity: 1 !important; visibility: visible !important; transform: none !important; transition: none;
    }
    html.hero-intro-pending,
    html.hero-intro-pending body { overflow: auto; }
    html.hero-intro-pending .shell-top,
    html.hero-intro-pending .skip-link { transform: none; visibility: visible; }
    html.hero-intro-pending main > :not(.hero-intro),
    html.hero-intro-pending .public-shell__footer { visibility: visible; }
}

@media (max-width: 640px) {
    /* Mobile completed state: solid bottom sheet, composition stays above. */
    .hero-intro__video,
    .hero-intro__still { object-position: 50% 38%; }
    .hero-intro__overlay { padding: 0; }
    .hero-intro__panel {
        max-width: 100%;
        width: 100%;
        border-radius: var(--r-md) var(--r-md) 0 0;
        border-left: 0; border-right: 0; border-bottom: 0;
        background: rgba(255, 255, 255, .97);
        padding: 20px 20px 26px;
        box-shadow: 0 -14px 36px rgba(23, 22, 15, .12);
    }
    .hero-intro__panel h1 { font-size: clamp(24px, 6.6vw, 30px); }
    .hero-intro__cta { max-width: 100%; }
    .hero-intro__cta .btn { flex: 1 1 auto; min-width: 0; justify-content: center; }
}

/* 404 — designed public not-found page (router fallback) */
.not-found { padding: clamp(72px, 12vh, 140px) 0; background: var(--bg); }
.not-found__inner { max-width: 620px; }
.not-found h1 { font-family: var(--font-serif); font-size: clamp(34px, 5vw, 54px); color: var(--ink); margin: 0 0 14px; }
.not-found p { color: var(--ink-70); margin: 0 0 24px; }
.not-found__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* =========================================================
   Owner correction 002 — navigation: product-primary nav,
   service links in topbar (desktop) / drawer (mobile)
   ========================================================= */
.topbar__inner { justify-content: space-between; }
.topbar__facts { display: flex; align-items: center; gap: 18px; min-width: 0; flex-wrap: wrap; }
.topbar__links { display: flex; align-items: center; gap: 18px; }
.topbar__links a { color: rgba(251, 250, 246, .78); transition: color .15s ease; white-space: nowrap; }
.topbar__links a:hover,
.topbar__links a.is-current { color: #fff; }

/* Secondary (service) links live in the drawer only on mobile; desktop
   shows them in the topbar. Visible in plain flow on no-JS mobile too. */
.nav__secondary { display: none; }

@media (max-width: 980px) {
    .topbar__links { display: none; }
    .js-nav-enhanced .nav .nav__secondary { display: block; margin-top: 0; }
    .js-nav-enhanced .nav a.nav__secondary:nth-of-type(6) { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; width: 100%; }
    html:not(.js-nav-enhanced) .nav .nav__secondary { display: inline-block; }
}

/* =========================================================
   Shared category tiles (homepage + katalog) — jediná
   implementace, viz resources/views/frontend/partials/
   category-tiles.php
   ========================================================= */
.category-tiles {
    border-bottom: 1px solid var(--line-soft);
}

.category-tiles__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.2vw, 14px);
    padding-block: clamp(16px, 2.4vw, 26px);
    align-items: stretch;
}

.category-tiles__item { display: flex; }

.category-tile {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: clamp(14px, 1.6vw, 20px) 12px clamp(12px, 1.4vw, 16px);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--panel);
    color: var(--ink-70);
    text-align: center;
    transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease);
}

.category-tile__art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 68px;
    color: #2f4a38;
}

.category-tile__device {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 68px;
}

.category-tile__name {
    font-size: 0.92rem;
    font-weight: 600;
    color: inherit;
    line-height: 1.2;
}

.category-tile:hover {
    color: var(--leaf);
    border-color: var(--leaf-line);
    background: var(--leaf-tint);
}

/* Aktivní kategorie — decentně: tmavší text, leaf podtržení, jemný tint. */
.category-tile.is-active {
    color: var(--ink);
    border-color: var(--leaf-line);
    background: var(--leaf-tint);
    box-shadow: inset 0 -2px 0 0 var(--leaf);
}

@media (max-width: 980px) {
    .category-tiles__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .category-tiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .category-tile__art { height: 54px; }
    .category-tile__device { max-height: 54px; }
    .category-tile__name { font-size: 0.85rem; }
}