/* ==========================================================================
   MotorHub.sk – verejný web
   Tmavý "garage / motorsport" dizajn: čierna, off-white, oranžová z loga,
   masívne Anton písmo a rám s vertikálnym logom podľa merchu MotorHub.
   ========================================================================== */

@layer reset, base, layout, components, sections, utilities;

@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
    img, video { display: block; max-width: 100%; height: auto; }
    svg { flex-shrink: 0; }
    input, button, textarea, select { font: inherit; color: inherit; }
    button { cursor: pointer; }
    [hidden] { display: none !important; }
}

@layer base {
    :root {
        --bg: #0a0a0a;
        --bg-2: #111110;
        --surface: #151514;
        --surface-2: #1c1c1a;
        --line: rgb(244 241 234 / .12);
        --line-2: rgb(244 241 234 / .26);
        --text: #f4f1ea;
        --muted: rgb(244 241 234 / .66);
        --dim: rgb(244 241 234 / .44);
        --danger: #ff6b61;

        --container: 88rem;
        --gutter: clamp(1.125rem, 4vw, 3rem);
        --header-h: 4.75rem;
        --radius: 14px;
        --radius-lg: 22px;

        --fs-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
        --fs-lg: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
        --fs-xl: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
        --fs-3xl: clamp(3.25rem, 1.6rem + 6.6vw, 8.5rem);
        --fs-hero: clamp(4.5rem, 1.25rem + 13.5vw, 15rem);
        /* riadkovanie viacriadkových nadpisov v Antone: verzálky majú 0,86 em, diakritika nad nimi
           (Ť, Č, Á) siaha do 1,10 em – pod 1,1 by mäkčeň zasahoval do riadku nad ním */
        --lh-display: 1.12;

        --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --tread: repeating-linear-gradient(118deg, transparent 0 18px, rgb(244 241 234 / .035) 18px 30px);

        color-scheme: dark;
        scrollbar-color: var(--orange) var(--bg);
    }

    html {
        scroll-padding-top: calc(var(--header-h) + 1rem);
    }

    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
        @view-transition { navigation: auto; }
    }

    body {
        min-height: 100svh;
        background: var(--bg);
        color: var(--text);
        font-family: var(--ff-body);
        font-size: var(--fs-base);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow-x: clip;
    }

    /* Jemné filmové zrno cez celý web */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 100;
        pointer-events: none;
        background-image: var(--noise);
        opacity: .055;
    }

    body.menu-open { overflow: hidden; }

    h1, h2, h3, h4 { text-wrap: balance; }
    p, li { text-wrap: pretty; }
    a { color: inherit; }

    ::selection { background: var(--orange); color: var(--on-orange); }

    :focus-visible {
        outline: 2px solid var(--orange);
        outline-offset: 3px;
        border-radius: 4px;
    }

    main:focus { outline: none; }
}

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

    .section { padding-block: clamp(4.5rem, 10vw, 9rem); }
    .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4.5rem, 8vw, 7rem); }

    .section__header {
        display: grid;
        gap: 1.25rem;
        max-width: 62rem;
        margin-bottom: clamp(2rem, 5vw, 3.75rem);
    }

    .section__header--row {
        display: flex;
        flex-wrap: wrap;
        align-items: end;
        justify-content: space-between;
        gap: 1rem 2rem;
        max-width: none;
    }

    .section__lead {
        max-width: 40ch;
        color: var(--muted);
        font-size: var(--fs-lg);
    }
}

/* -------------------------------------------------------------- components */
@layer components {
    .skip-link {
        position: fixed;
        top: .75rem;
        left: .75rem;
        z-index: 200;
        padding: .75rem 1.25rem;
        border-radius: 999px;
        background: var(--orange);
        color: var(--on-orange);
        font-weight: 700;
        text-decoration: none;
        transform: translateY(-200%);
        transition: transform .3s var(--ease);
    }
    .skip-link:focus { transform: none; }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-family: var(--ff-mono);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--muted);
    }

    .live-dot {
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: var(--orange);
        box-shadow: 0 0 0 0 rgb(237 108 5 / .7);
    }
    @media (prefers-reduced-motion: no-preference) {
        .live-dot { animation: pulse 2s infinite; }
    }

    /* Sekčný nadpis (01) NÁZOV */
    .section-heading {
        display: flex;
        align-items: flex-start;
        gap: .9rem;
    }
    .section-heading__index {
        padding-top: .55em;
        font-family: var(--ff-mono);
        font-size: .8rem;
        color: var(--orange);
        letter-spacing: .08em;
    }
    .section-heading__title {
        font-family: var(--ff-display);
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Á, Š, Č, Ť) */
        font-size: var(--fs-3xl);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }

    /* Tlačidlá */
    .btn {
        --btn-bg: transparent;
        --btn-fg: var(--text);
        --btn-bd: var(--line-2);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        min-height: 2.875rem;
        padding: .75rem 1.35rem;
        border: 1px solid var(--btn-bd);
        border-radius: 999px;
        background: var(--btn-bg);
        color: var(--btn-fg);
        font: 650 .9375rem/1 var(--ff-body);
        letter-spacing: .01em;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s, transform .3s var(--ease);
    }
    .btn svg { width: 1.15em; height: 1.15em; transition: transform .45s var(--ease); }
    .btn:hover svg { transform: translate(2px, -2px); }
    .btn:active { transform: scale(.97); }

    .btn--primary { --btn-bg: var(--orange); --btn-fg: var(--on-orange); --btn-bd: var(--orange); }
    .btn--primary:hover { --btn-bg: var(--orange-2); --btn-bd: var(--orange-2); box-shadow: 0 12px 34px -12px rgb(237 108 5 / .8); }
    .btn--outline:hover { --btn-bd: var(--text); --btn-bg: rgb(244 241 234 / .06); }
    .btn--lg { min-height: 3.5rem; padding: 1rem 1.8rem; font-size: 1rem; }
    .btn--sm { min-height: 2.5rem; padding: .55rem 1rem; font-size: .875rem; }
    .btn--block { width: 100%; }
    .btn[disabled], .btn.is-loading { opacity: .7; pointer-events: none; }

    .icon-btn {
        display: inline-grid;
        place-items: center;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        background: transparent;
        color: var(--text);
        text-decoration: none;
        transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease);
    }
    .icon-btn svg { width: 1.1rem; height: 1.1rem; }
    .icon-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }

    .link-arrow {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-family: var(--ff-mono);
        font-size: .8rem;
        font-weight: 500;
        letter-spacing: .12em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text);
        padding-block: .35rem;
        background: linear-gradient(var(--orange) 0 0) 0 100% / 0 2px no-repeat;
        transition: background-size .45s var(--ease), color .25s;
    }
    .link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .45s var(--ease); }
    .link-arrow:hover { background-size: 100% 2px; color: var(--orange); }
    .link-arrow:hover svg { transform: translateX(4px); }

    /* Omrvinky */
    .breadcrumbs ol {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        padding: 0;
        list-style: none;
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--dim);
    }
    .breadcrumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--line-2); }
    .breadcrumbs a { text-decoration: none; color: var(--muted); }
    .breadcrumbs a:hover { color: var(--orange); }
    .breadcrumbs [aria-current] { color: var(--text); }

    /* Stránkovanie */
    .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .75rem;
        margin-top: clamp(3rem, 6vw, 5rem);
    }
    .pagination ol { display: flex; gap: .35rem; padding: 0; list-style: none; }
    .pagination__page, .pagination__gap {
        display: grid;
        place-items: center;
        min-width: 2.75rem;
        height: 2.75rem;
        padding-inline: .5rem;
        border-radius: 999px;
        font-family: var(--ff-mono);
        font-size: .85rem;
        text-decoration: none;
        color: var(--muted);
    }
    .pagination__page:hover { color: var(--text); background: var(--surface-2); }
    .pagination__page.is-current { background: var(--orange); color: var(--on-orange); font-weight: 700; }
    .pagination__arrow {
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        color: var(--text);
    }
    .pagination__arrow:hover { background: var(--text); color: var(--bg); }
    .pagination__arrow svg { width: 1.1rem; height: 1.1rem; }

    .empty {
        display: grid;
        gap: .5rem;
        justify-items: center;
        padding: clamp(3rem, 8vw, 6rem) 1rem;
        border: 1px dashed var(--line-2);
        border-radius: var(--radius-lg);
        text-align: center;
        color: var(--muted);
    }
    .empty__title {
        font-family: var(--ff-display);
        font-size: clamp(2rem, 5vw, 3.25rem);
        line-height: var(--lh-display);
        text-transform: uppercase;
        color: var(--text);
    }

    .preview-bar {
        position: fixed;
        bottom: 1rem;
        left: 50%;
        z-index: 90;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: .5rem .5rem .5rem 1.25rem;
        border-radius: 999px;
        background: var(--orange);
        color: var(--on-orange);
        font-weight: 650;
        font-size: .9rem;
        box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7);
        translate: -50% 0;
        white-space: nowrap;
    }
    .preview-bar a {
        padding: .5rem 1rem;
        border-radius: 999px;
        background: var(--bg);
        color: var(--text);
        text-decoration: none;
    }

    .toast-inline {
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--orange);
    }
}

/* ------------------------------------------------------------------ header */
@layer components {
    .site-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 50;
        height: var(--header-h);
        border-bottom: 1px solid transparent;
        transition: background-color .35s, border-color .35s;
    }

    .site-header.is-scrolled {
        background: rgb(10 10 10 / .82);
        border-bottom-color: var(--line);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        backdrop-filter: blur(16px) saturate(1.4);
    }
    /* Pri otvorenom menu bez backdrop-filter – inak by hlavička bola containing block pre fixed menu */
    .site-header.is-open {
        background: var(--bg);
        border-bottom-color: var(--line);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    @supports (animation-timeline: scroll()) {
        .site-header:not(.is-open) {
            animation: header-solid linear both;
            animation-timeline: scroll(root);
            animation-range: 0 140px;
        }
    }

    .site-header__inner {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        height: 100%;
    }

    .site-header__logo { flex: none; }
    .site-header__logo img { display: block; width: clamp(122px, 11vw, 150px); height: auto; }

    .site-nav { margin-inline: auto; }
    .site-nav__list { display: flex; gap: .25rem; padding: 0; list-style: none; }
    .site-nav__link {
        display: flex;
        align-items: baseline;
        gap: .45rem;
        padding: .6rem .95rem;
        border-radius: 999px;
        color: var(--muted);
        font-size: .9375rem;
        font-weight: 600;
        text-decoration: none;
        transition: color .25s, background-color .25s;
    }
    .site-nav__index { font-family: var(--ff-mono); font-size: .64rem; color: var(--orange); }
    .site-nav__link:hover { color: var(--text); background: rgb(244 241 234 / .06); }
    .site-nav__link.is-active { color: var(--text); background: rgb(244 241 234 / .08); }

    .site-header__actions { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
    .site-header__ig svg { width: 1rem; height: 1rem; }

    .nav-toggle {
        position: relative;
        display: grid;
        place-items: center;
        width: 2.875rem;
        height: 2.875rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        background: transparent;
    }
    .nav-toggle__bars,
    .nav-toggle__bars::before {
        display: block;
        width: 1.1rem;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
        transition: transform .4s var(--ease), background-color .2s;
    }
    .nav-toggle__bars { transform: translateY(-3px); }
    .nav-toggle__bars::before { content: ''; transform: translateY(6px); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(-90deg); }

    @media (max-width: 63.99rem) {
        .site-nav { display: none; }
        .site-header__ig span { display: none; }
        .site-header__ig { width: 2.875rem; padding: 0; }
    }
    @media (min-width: 64rem) {
        .site-header__actions { margin-left: 0; }
        .nav-toggle, .mobile-menu { display: none !important; }
    }

    .mobile-menu {
        position: fixed;
        inset: 0;
        z-index: -1;
        overflow-y: auto;
        padding-top: calc(var(--header-h) + 1.5rem);
        background: var(--bg);
        background-image: var(--tread);
    }
    .mobile-menu__list { padding: 0; list-style: none; }
    .mobile-menu__link {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        padding-block: .2em;
        border-bottom: 1px solid var(--line);
        font-family: var(--ff-display);
        font-size: clamp(2.75rem, 12vw, 4.75rem);
        line-height: 1.05;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text);
    }
    .mobile-menu__link span { font-family: var(--ff-mono); font-size: .8rem; color: var(--orange); }
    .mobile-menu__link:hover, .mobile-menu__link.is-active { color: var(--orange); }
    .mobile-menu__footer {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 1.5rem;
        padding-block: 2rem 3rem;
        font-family: var(--ff-mono);
        font-size: .8rem;
        text-transform: uppercase;
        letter-spacing: .08em;
    }
    .mobile-menu__footer a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; color: var(--muted); }
    .mobile-menu__footer svg { width: 1em; height: 1em; }

    @media (prefers-reduced-motion: no-preference) {
        .mobile-menu:not([hidden]) { animation: fade-in .35s var(--ease) both; }
        .mobile-menu:not([hidden]) li { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 60ms); }
    }
}

/* -------------------------------------------------------------------- hero */
@layer sections {
    .hero {
        position: relative;
        display: grid;
        align-items: end;
        min-height: 100svh;
        padding-block: calc(var(--header-h) + 2.5rem) clamp(3.5rem, 7vw, 5.5rem);
        overflow: clip;
        isolation: isolate;
    }

    .hero__media { position: absolute; inset: 0; z-index: -2; }
    .hero__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) contrast(1.18) brightness(.55);
    }
    @media (prefers-reduced-motion: no-preference) {
        .hero__img { animation: slow-zoom 16s var(--ease) both; }
    }

    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(70% 55% at 12% 100%, rgb(237 108 5 / .22), transparent 70%),
            linear-gradient(180deg, rgb(10 10 10 / .7) 0%, rgb(10 10 10 / .1) 38%, rgb(10 10 10 / .94) 100%);
    }

    /* Bez fotky: stopy pneumatík a obrysové písmo */
    .hero__tracks {
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
            radial-gradient(55% 45% at 82% 18%, rgb(237 108 5 / .26), transparent 72%),
            var(--tread);
        -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
        mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
    }
    .hero__tracks::before {
        content: 'MOTORHUB';
        position: absolute;
        top: 12%;
        right: -2vw;
        font-family: var(--ff-display);
        font-size: 26vw;
        line-height: .8;
        color: transparent;
        -webkit-text-stroke: 1px rgb(244 241 234 / .09);
        white-space: nowrap;
    }

    .hero__inner { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

    /* Rám s medzerou na ľavej strane – motív z MotorHub merchu */
    .hero__frame {
        --frame: 2px;
        --frame-color: var(--text);
        position: relative;
        padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem) clamp(1.5rem, 3.5vw, 2.75rem) clamp(2.75rem, 7vw, 5.5rem);
        background:
            linear-gradient(var(--frame-color) 0 0) top left / 100% var(--frame) no-repeat,
            linear-gradient(var(--frame-color) 0 0) bottom left / 100% var(--frame) no-repeat,
            linear-gradient(var(--frame-color) 0 0) top right / var(--frame) 100% no-repeat,
            linear-gradient(var(--frame-color) 0 0) top left / var(--frame) 36% no-repeat,
            linear-gradient(var(--frame-color) 0 0) bottom left / var(--frame) 14% no-repeat;
    }
    @media (prefers-reduced-motion: no-preference) {
        .hero__frame { animation: frame-in 1.2s var(--ease) both; }
    }

    .hero__side {
        position: absolute;
        left: 0;
        bottom: 17%;
        translate: -50% 0;
        writing-mode: vertical-rl;
        rotate: 180deg;
        padding-block: .75rem;
        font-family: var(--ff-mono);
        font-size: clamp(.7rem, 1.2vw, .85rem);
        font-weight: 600;
        letter-spacing: .3em;
        text-transform: uppercase;
        color: var(--orange);
        white-space: nowrap;
    }

    .hero__eyebrow { margin-bottom: clamp(.75rem, 2vw, 1.5rem); }

    .hero__title {
        font-family: var(--ff-display);
        font-size: var(--fs-hero);
        font-weight: 400;
        line-height: var(--lh-display);
        letter-spacing: -.004em;
        text-transform: uppercase;
    }
    .hero__line { display: block; overflow: clip; padding-block: .14em .1em; margin-block: -.14em -.1em; }
    .hero__title { padding-top: .14em; } /* prvý riadok: miesto pre diakritiku, ktorú by clip odrezal */
    .hero__line > span { display: inline-block; }
    .hero__line:nth-child(even) > span { color: var(--orange); }
    @media (prefers-reduced-motion: no-preference) {
        .hero__line > span { animation: line-up 1.1s var(--ease) both; animation-delay: calc(var(--i) * 130ms + 200ms); }
    }

    .hero__bottom {
        display: grid;
        gap: 1.75rem;
        align-items: end;
    }
    @media (min-width: 56rem) {
        .hero__bottom { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }
    }

    .hero__text {
        max-width: 46ch;
        color: var(--muted);
        font-size: var(--fs-lg);
        line-height: 1.5;
    }
    .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

    .hero__scroll {
        position: absolute;
        right: var(--gutter);
        bottom: 1.5rem;
        display: none;
        align-items: center;
        gap: .75rem;
        font-family: var(--ff-mono);
        font-size: .68rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--dim);
        writing-mode: vertical-rl;
    }
    .hero__scroll::after {
        content: '';
        width: 1px;
        height: 3.5rem;
        background: linear-gradient(var(--orange), transparent);
    }
    @media (min-width: 80rem) { .hero__scroll { display: flex; } }

    /* ---------------------------------------------------------- tapes */
    .tapes {
        position: relative;
        z-index: 2;
        display: grid;
        place-items: center;
        height: clamp(8.5rem, 15vw, 12.5rem);
        margin-top: -2.5rem;
        overflow: clip;
    }
    .tape {
        position: absolute;
        left: -4%;
        right: -4%;
        padding-block: clamp(.7rem, 1.4vw, 1rem);
        overflow: clip;
    }
    .tape--a {
        z-index: 2;
        background: var(--orange);
        color: var(--on-orange);
        rotate: -3deg;
        box-shadow: 0 24px 50px -18px rgb(0 0 0 / .8);
    }
    .tape--b {
        background: var(--text);
        color: var(--bg);
        rotate: 2.4deg;
    }
    .tape__track { display: flex; width: max-content; }
    .tape__list { display: flex; padding: 0; list-style: none; }
    .tape__list li {
        display: flex;
        align-items: center;
        gap: 2.25rem;
        padding-inline: 1.125rem;
        font-family: var(--ff-display);
        font-size: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .tape__list li::after { content: '✦'; font-size: .55em; }
    @media (prefers-reduced-motion: no-preference) {
        .tape__track { animation: marquee 42s linear infinite; }
        .tape--b .tape__track { animation-duration: 52s; animation-direction: reverse; }
        .tapes:hover .tape__track { animation-play-state: paused; }
    }

    /* -------------------------------------------------------- pillars */
    .pillars__grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(.75rem, 1.4vw, 1.25rem);
        padding: 0;
        list-style: none;
    }
    .pillar { grid-column: span 12; }
    @media (min-width: 44rem) { .pillar { grid-column: span 6; } }
    @media (min-width: 64rem) {
        .pillar--1, .pillar--4 { grid-column: span 7; }
        .pillar--2, .pillar--3 { grid-column: span 5; }
    }

    .pillar__link {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 100%;
        min-height: clamp(21rem, 36vw, 31rem);
        padding: clamp(1.25rem, 2.5vw, 2.25rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        background-image: var(--tread);
        color: inherit;
        text-decoration: none;
        overflow: clip;
        isolation: isolate;
        transition: border-color .45s var(--ease);
    }
    .pillar__link:hover, .pillar__link:focus-visible { border-color: rgb(237 108 5 / .65); }

    .pillar__media { position: absolute; inset: 0; z-index: -1; }
    .pillar__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgb(10 10 10 / .1) 20%, rgb(10 10 10 / .88) 100%);
    }
    .pillar__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(1) contrast(1.1) brightness(.62);
        transition: filter .8s var(--ease), transform 1.3s var(--ease);
    }
    .pillar__link:hover .pillar__img { filter: grayscale(0) brightness(.72); transform: scale(1.06); }

    .pillar__ghost {
        position: absolute;
        right: -.04em;
        bottom: -.2em;
        font-family: var(--ff-display);
        font-size: clamp(12rem, 24vw, 21rem);
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--line-2);
        transition: -webkit-text-stroke-color .5s, translate .9s var(--ease);
    }
    .pillar__link:hover .pillar__ghost { -webkit-text-stroke-color: var(--orange); translate: 0 -4%; }

    .pillar__index {
        position: absolute;
        top: clamp(1.25rem, 2.5vw, 2rem);
        left: clamp(1.25rem, 2.5vw, 2.25rem);
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .14em;
        color: var(--muted);
    }
    .pillar__arrow {
        position: absolute;
        top: clamp(1rem, 2vw, 1.75rem);
        right: clamp(1rem, 2vw, 1.75rem);
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        transition: background-color .3s, border-color .3s, color .3s, rotate .5s var(--ease);
    }
    .pillar__arrow svg { width: 1.2rem; height: 1.2rem; }
    .pillar__link:hover .pillar__arrow { background: var(--orange); border-color: var(--orange); color: var(--on-orange); rotate: 45deg; }

    .pillar__title {
        font-family: var(--ff-display);
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Á, Š, Č, Ť) */
        font-size: clamp(2.75rem, 1.5rem + 4vw, 5.25rem);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .pillar__text { max-width: 38ch; margin-top: .85rem; color: var(--muted); }

    /* ---------------------------------------------------------- about */
    .about {
        background: var(--text);
        color: var(--bg);
        --line: rgb(10 10 10 / .14);
    }
    .about ::selection { background: var(--bg); color: var(--text); }
    .about__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
    @media (min-width: 64rem) {
        .about__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    }
    /* Veľkosť písma podľa šírky stĺpca (container query), aby "MOTOR" nikdy nepretieklo */
    .about__side {
        display: flex;
        flex-direction: column;
        container-type: inline-size;
        font-family: var(--ff-display);
        line-height: .8;
        text-transform: uppercase;
        user-select: none;
    }
    .about__side span { font-size: min(36cqi, 12rem); }
    .about__side span:first-child { color: transparent; -webkit-text-stroke: 2px var(--bg); }
    .about__side span:last-child { color: var(--orange); }
    @media (min-width: 64rem) {
        .about__side { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
    }
    .about .section-heading__index { color: #b95300; }

    .about__statement {
        margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem);
        font-size: clamp(1.625rem, 1.05rem + 2.3vw, 3.1rem);
        font-weight: 620;
        line-height: 1.16;
        letter-spacing: -.018em;
    }
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .reveal-word {
                animation: word-reveal linear both;
                animation-timeline: view();
                animation-range: entry 10% cover 40%;
            }
        }
    }

    .stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-bottom: 2.5rem;
    }
    .stats__item { display: flex; flex-direction: column-reverse; gap: .35rem; padding-top: 1rem; border-top: 2px solid var(--bg); }
    .stats dt { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(10 10 10 / .6); }
    .stats dd { font-family: var(--ff-display); font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: .9; }
    .about .link-arrow { color: var(--bg); }
    .about .link-arrow:hover { color: #b95300; }

    /* ---------------------------------------------------------- články */
    .latest__grid { display: grid; gap: clamp(1rem, 1.8vw, 1.5rem); }
    @media (min-width: 64rem) {
        .latest__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
        .latest__grid .card--featured { grid-row: span 2; }
        .latest__grid .card:not(.card--featured) .card__link { flex-direction: row; }
        .latest__grid .card:not(.card--featured) .card__media { flex: 0 0 42%; aspect-ratio: auto; }
    }

    .articles-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
        gap: clamp(1rem, 1.8vw, 1.5rem);
    }
    .articles-grid .card--featured { grid-column: 1 / -1; }
    @media (min-width: 64rem) {
        .articles-grid .card--featured .card__link { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
        .articles-grid .card--featured .card__media { aspect-ratio: 16 / 10; }
        .articles-grid .card--featured .card__body { justify-content: flex-end; padding: clamp(1.5rem, 3vw, 3rem); }
    }

    .card { position: relative; }
    .card__link {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: inherit;
        text-decoration: none;
        overflow: clip;
        transition: border-color .4s var(--ease), translate .5s var(--ease);
    }
    .card__link:hover { border-color: var(--line-2); translate: 0 -4px; }
    .card__media { aspect-ratio: 16 / 10; background: var(--surface-2); overflow: clip; }
    .card--featured .card__media { aspect-ratio: 16 / 11; }
    .card__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(.8);
        transition: scale 1.1s var(--ease), filter .6s;
    }
    .card__link:hover .card__img { scale: 1.05; filter: saturate(1.05); }

    .card__placeholder {
        display: grid;
        place-items: end start;
        height: 100%;
        min-height: 12rem;
        padding: clamp(1rem, 2vw, 1.5rem);
        background:
            radial-gradient(80% 90% at 100% 0%, rgb(237 108 5 / .28), transparent 60%),
            var(--tread),
            var(--surface-2);
    }
    .card__placeholder span {
        font-family: var(--ff-display);
        font-size: clamp(3.5rem, 8vw, 7.5rem);
        line-height: .8;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--line-2);
        transition: -webkit-text-stroke-color .4s;
    }
    .card__link:hover .card__placeholder span { -webkit-text-stroke-color: var(--orange); }

    .card__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: .8rem;
        padding: clamp(1.25rem, 2vw, 1.75rem);
    }
    .card__meta {
        display: flex;
        gap: .6rem;
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--dim);
    }
    .card__title {
        font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
        font-weight: 760;
        line-height: 1.15;
        letter-spacing: -.02em;
    }
    .card--featured .card__title {
        font-family: var(--ff-display);
        font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.75rem);
        font-weight: 400;
        line-height: var(--lh-display);
        letter-spacing: 0;
        text-transform: uppercase;
    }
    .card__excerpt {
        display: -webkit-box;
        overflow: hidden;
        color: var(--muted);
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
    .card__cta {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-top: auto;
        padding-top: .5rem;
        font-family: var(--ff-mono);
        font-size: .72rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--orange);
    }
    .card__cta svg { width: 1em; height: 1em; transition: translate .4s var(--ease); }
    .card__link:hover .card__cta svg { translate: 3px -3px; }

    /* ------------------------------------------------------ instagram */
    .ig-cta { border-top: 1px solid var(--line); overflow: clip; }
    .ig-cta__link {
        position: relative;
        display: grid;
        justify-items: center;
        gap: clamp(1.25rem, 3vw, 2rem);
        padding-block: clamp(4.5rem, 11vw, 9rem);
        color: inherit;
        text-decoration: none;
        isolation: isolate;
    }
    .ig-cta__link::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(50% 60% at 50% 55%, rgb(237 108 5 / .28), transparent 70%);
        opacity: .5;
        transition: opacity .6s;
    }
    .ig-cta__link:hover::before { opacity: 1; }
    .ig-cta__eyebrow svg { width: 1rem; height: 1rem; color: var(--orange); }
    .ig-cta__handle {
        font-family: var(--ff-display);
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Á, Š, Č, Ť) */
        font-size: clamp(3.25rem, 12.5vw, 13rem);
        line-height: .86;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .ig-cta__row {
        display: inline-block;
        color: transparent;
        -webkit-text-stroke: 2px var(--text);
        transition: color .5s, -webkit-text-stroke-color .5s;
    }
    .ig-cta__link:hover .ig-cta__row { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .ig-cta__row { animation: drift-x linear both; animation-timeline: view(); }
        }
    }

    /* ---------------------------------------------------- page / article */
    .page-hero {
        padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 6rem));
        padding-bottom: clamp(2rem, 5vw, 3.5rem);
        border-bottom: 1px solid var(--line);
    }
    .page-hero__title {
        margin-top: 1.25rem;
        font-family: var(--ff-display);
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Á, Š, Č, Ť) */
        font-size: var(--fs-3xl);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .page-hero__count {
        margin-left: .3em;
        font-family: var(--ff-mono);
        font-size: .95rem;
        color: var(--orange);
        vertical-align: super;
    }
    .page-hero__lead { max-width: 52ch; margin-top: 1.25rem; color: var(--muted); font-size: var(--fs-lg); }

    .read-progress {
        position: fixed;
        inset: 0 0 auto;
        z-index: 60;
        height: 3px;
        background: var(--orange);
        transform: scaleX(0);
        transform-origin: 0 50%;
    }
    @supports (animation-timeline: scroll()) {
        .read-progress { animation: progress linear both; animation-timeline: scroll(root); }
    }

    .article__header {
        max-width: 72rem;
        padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
        padding-bottom: clamp(2rem, 5vw, 3.5rem);
    }
    .article__meta {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem 1.25rem;
        margin-block: 1.75rem 1.25rem;
        font-family: var(--ff-mono);
        font-size: .75rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
    }
    .article__meta > * + *::before { content: '●'; margin-right: 1.25rem; font-size: .5em; vertical-align: middle; color: var(--orange); }
    .article__title {
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Ú, Š, Ľ) */
        font-family: var(--ff-display);
        font-size: clamp(2.75rem, 1.2rem + 6vw, 7.25rem);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .article__perex {
        max-width: 44ch;
        margin-top: 1.5rem;
        font-size: var(--fs-xl);
        font-weight: 480;
        line-height: 1.35;
        color: var(--muted);
    }

    .article__cover {
        width: min(100% - 2 * var(--gutter), calc(var(--container) + 8rem));
        margin-inline: auto;
    }
    .article__cover-img {
        width: 100%;
        aspect-ratio: 21 / 9;
        object-fit: cover;
        border-radius: var(--radius-lg);
    }
    @media (max-width: 48rem) {
        .article__cover { width: 100%; }
        .article__cover-img { aspect-ratio: 4 / 3; border-radius: 0; }
    }

    .article__layout {
        display: grid;
        gap: 2rem;
        padding-block: clamp(2.5rem, 6vw, 5rem);
    }
    @media (min-width: 64rem) {
        .article__layout { grid-template-columns: 4rem minmax(0, 46rem); justify-content: center; gap: 4rem; }
        .article__share { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; flex-direction: column; }
    }
    .article__share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .article__share-label { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

    .article-nav {
        display: grid;
        gap: 1rem;
        padding-bottom: clamp(3rem, 6vw, 5rem);
    }
    @media (min-width: 48rem) { .article-nav { grid-template-columns: 1fr 1fr; } }
    .article-nav__item {
        display: grid;
        gap: .75rem;
        padding: clamp(1.25rem, 3vw, 2rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        text-decoration: none;
        transition: border-color .3s, background-color .3s;
    }
    .article-nav__item:hover { border-color: var(--orange); background: var(--surface); }
    .article-nav__item--right { text-align: right; justify-items: end; }
    .article-nav__label { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
    .article-nav__label svg { width: 1em; height: 1em; }
    .article-nav__title { padding-top: .12em; font-family: var(--ff-display); font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: var(--lh-display); text-transform: uppercase; }

    .related { border-top: 1px solid var(--line); }

    /* prose (text z editora) je v prose.css – zdieľa ho aj editor v administrácii */

    /* ---------------------------------------------------------- contact */
    .contact {
        display: grid;
        gap: clamp(2.5rem, 6vw, 5rem);
        padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
        padding-bottom: clamp(4rem, 8vw, 7rem);
    }
    @media (min-width: 64rem) {
        .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
        .contact__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
    }
    .contact__title {
        margin-top: 1.25rem;
        font-family: var(--ff-display);
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Á, Š, Č, Ť) */
        font-size: clamp(4.75rem, 2rem + 10vw, 11rem);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .contact__title-accent { color: var(--orange); }
    .contact__lead { max-width: 42ch; margin-top: 1.5rem; color: var(--muted); font-size: var(--fs-lg); }

    .contact-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        gap: .75rem;
        margin-top: 2.5rem;
        padding: 0;
        list-style: none;
    }
    .contact-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: .9rem;
        align-items: center;
        padding: 1rem 1.15rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
    }
    .contact-card__icon {
        display: grid;
        grid-row: span 2;
        place-items: center;
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 10px;
        background: rgb(237 108 5 / .13);
        color: var(--orange);
    }
    .contact-card__icon svg { width: 1.15rem; height: 1.15rem; }
    .contact-card__label { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
    .contact-card__value { overflow: hidden; font-weight: 650; text-overflow: ellipsis; text-decoration: none; color: var(--text); }
    a.contact-card__value:hover { color: var(--orange); }

    .contact-form {
        display: grid;
        gap: 1rem;
        padding: clamp(1.5rem, 4vw, 3rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }
    .contact-form__title { padding-top: .12em; margin-bottom: .5rem; font-family: var(--ff-display); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .contact-form__row { display: grid; gap: 1rem; }
    @media (min-width: 40rem) { .contact-form__row { grid-template-columns: 1fr 1fr; } }

    /* Plávajúce popisky */
    .ff { position: relative; }
    .ff__input {
        width: 100%;
        padding: 1.6rem 1rem .6rem;
        border: 1px solid var(--line-2);
        border-radius: 12px;
        background: var(--bg-2);
        font-size: 1rem;
        line-height: 1.4;
        color: var(--text);
        appearance: none;
        transition: border-color .2s, box-shadow .2s, background-color .2s;
    }
    textarea.ff__input { min-height: 10rem; resize: vertical; }
    .ff__input:hover { border-color: rgb(244 241 234 / .4); }
    .ff__input:focus { outline: none; border-color: var(--orange); background: var(--bg); box-shadow: 0 0 0 4px rgb(237 108 5 / .18); }
    .ff__label {
        position: absolute;
        top: 1.1rem;
        left: 1rem;
        font-size: 1rem;
        line-height: 1.2;
        color: var(--dim);
        pointer-events: none;
        transform-origin: 0 0;
        transition: transform .22s var(--ease), color .2s;
    }
    .ff__label.required::after { content: ' *'; color: var(--orange); }
    .ff__input:focus + .ff__label,
    .ff__input:not(:placeholder-shown) + .ff__label { transform: translateY(-.64rem) scale(.75); color: var(--muted); }
    .ff__input:focus + .ff__label { color: var(--orange); }
    .ff--error .ff__input { border-color: var(--danger); }
    .ff__error { margin: .45rem 0 0 .25rem; font-size: .85rem; color: var(--danger); }

    .ff-check__label { display: flex; align-items: flex-start; gap: .8rem; font-size: .92rem; color: var(--muted); cursor: pointer; }
    .ff-check__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .ff-check__box {
        display: grid;
        flex: none;
        place-items: center;
        width: 1.35rem;
        height: 1.35rem;
        margin-top: .1rem;
        border: 1.5px solid var(--line-2);
        border-radius: 6px;
        transition: background-color .2s, border-color .2s;
    }
    .ff-check__box::after {
        content: '';
        width: .38rem;
        height: .7rem;
        margin-top: -.15rem;
        border: solid var(--on-orange);
        border-width: 0 2.5px 2.5px 0;
        rotate: 45deg;
        scale: 0;
        transition: scale .25s var(--ease);
    }
    .ff-check__input:checked + .ff-check__box { background: var(--orange); border-color: var(--orange); }
    .ff-check__input:checked + .ff-check__box::after { scale: 1; }
    .ff-check__input:focus-visible + .ff-check__box { outline: 2px solid var(--orange); outline-offset: 2px; }
    .ff-check__text a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: .2em; }
    .ff-check .ff__error { margin-left: 2.15rem; }

    .field-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

    .form-alert { padding: .9rem 1.1rem; border: 1px solid rgb(255 107 97 / .4); border-radius: 12px; background: rgb(255 107 97 / .1); color: #ffb3ad; }

    .form-success {
        display: grid;
        justify-items: center;
        gap: 1.1rem;
        padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        text-align: center;
    }
    .form-success:focus { outline: none; }
    .form-success__icon {
        display: grid;
        place-items: center;
        width: 4.75rem;
        height: 4.75rem;
        border-radius: 50%;
        background: var(--orange);
        color: var(--on-orange);
    }
    .form-success__icon svg { width: 2.2rem; height: 2.2rem; }
    @media (prefers-reduced-motion: no-preference) {
        .form-success__icon { animation: pop .7s var(--ease) both; }
    }
    .form-success__title { padding-top: .12em; font-family: var(--ff-display); font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .form-success p { max-width: 40ch; color: var(--muted); }

    /* ------------------------------------------------------------ error */
    .error-page {
        display: grid;
        align-content: center;
        justify-items: start;
        gap: 1.25rem;
        min-height: 88svh;
        padding-top: calc(var(--header-h) + 3rem);
        padding-bottom: 4rem;
    }
    .error-page__code {
        display: flex;
        font-family: var(--ff-display);
        font-size: clamp(9rem, 32vw, 26rem);
        font-weight: 400;
        line-height: .78;
    }
    .error-page__code--small { display: block; font-size: clamp(4rem, 13vw, 10rem); text-transform: uppercase; }
    .error-page__zero { color: transparent; -webkit-text-stroke: 3px var(--orange); }
    .error-page__title { padding-top: .12em; font-family: var(--ff-display); font-size: clamp(2.25rem, 5vw, 4rem); line-height: var(--lh-display); text-transform: uppercase; }
    .error-page__text { max-width: 44ch; color: var(--muted); font-size: var(--fs-lg); }
    .error-page__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

    /* ----------------------------------------------------------- footer */
    .site-footer { position: relative; border-top: 1px solid var(--line); overflow: clip; }
    .footer-cta {
        display: grid;
        justify-items: start;
        gap: 1.5rem;
        padding-block: clamp(4rem, 9vw, 7.5rem);
        border-bottom: 1px solid var(--line);
    }
    .footer-cta__title {
        display: flex;
        flex-wrap: wrap;
        gap: 0 .22em;
        font-family: var(--ff-display);
        padding-top: .12em; /* miesto pre diakritiku nad veľkými písmenami (Á, Š, Č, Ť) */
        font-size: var(--fs-3xl);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .footer-cta__outline { color: transparent; -webkit-text-stroke: 2px var(--orange); }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
        gap: 2.5rem;
        padding-block: clamp(3rem, 6vw, 5rem);
    }
    @media (min-width: 64rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
    .footer-grid__logo { width: 170px; height: auto; }
    .footer-grid__tagline { margin-top: 1.25rem; font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
    .footer-grid__text { max-width: 34ch; margin-top: .6rem; color: var(--muted); }
    .footer-grid__heading { margin-bottom: 1rem; font-family: var(--ff-mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
    .footer-grid ul { display: grid; gap: .65rem; padding: 0; list-style: none; }
    .footer-grid a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--text); transition: color .2s; }
    .footer-grid a:hover { color: var(--orange); }
    .footer-grid a svg { width: 1rem; height: 1rem; }

    .footer-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        padding-block: 1.5rem;
        border-top: 1px solid var(--line);
        font-size: .85rem;
        color: var(--dim);
    }
    .footer-bottom__links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
    .footer-bottom a, .footer-bottom__button { display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none; text-decoration: none; color: var(--muted); }
    .footer-bottom a:hover, .footer-bottom__button:hover { color: var(--orange); }
    .no-js .footer-bottom__button { display: none; }
    .footer-bottom svg { width: 1em; height: 1em; }

    .footer-wordmark {
        margin-bottom: -.13em;
        font-family: var(--ff-display);
        font-size: 24vw;
        line-height: .78;
        text-align: center;
        text-transform: uppercase;
        white-space: nowrap;
        color: transparent;
        -webkit-text-stroke: 1px var(--line-2);
        user-select: none;
        /* Písmená presahujú nad riadok a inak prekrývajú odkazy v pätičke */
        pointer-events: none;
    }
    .footer-wordmark__hub { color: var(--orange); -webkit-text-stroke: 0; }
}

/* --------------------------------------------------------------- utilities */
@layer utilities {
    .visually-hidden {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
}

/* -------------------------------------------------------------- keyframes */
@keyframes header-solid {
    to {
        background: rgb(10 10 10 / .82);
        border-bottom-color: rgb(244 241 234 / .12);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
        backdrop-filter: blur(16px) saturate(1.4);
    }
}
/* ------------------------------------------------------- cookie lišta (Klaro)
   Mimo @layer – CSS knižnice je bez vrstvy a inak by prebilo naše pravidlá. */
.klaro {
    --font-family: var(--ff-body);
    --title-font-family: var(--ff-display);
    --font-size: 15px;
    --border-radius: var(--radius-lg);
    --border-style: solid;
    --border-width: 1px;
    --dark1: var(--surface);
    --dark2: var(--surface-2);
    --dark3: var(--line-2);
    --light1: var(--text);
    --light2: var(--muted);
    --light3: var(--dim);
    --green1: var(--orange);
    --green2: var(--orange-2);
    --green3: var(--orange-2);
    --blue1: var(--orange);
    --blue2: var(--orange-2);
    --white2: var(--text);
    --white3: var(--muted);
    --button-text-color: var(--on-orange);
    --box-shadow-color: rgb(0 0 0 / .8);
    color-scheme: dark;
}
.klaro .cookie-modal .cm-bg { background: rgb(10 10 10 / .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.klaro .cookie-modal .cm-modal.cm-klaro {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 40px 100px -30px rgb(0 0 0 / .9);
    max-width: 40rem;
}
.klaro .cookie-modal .cm-modal .cm-header { border-bottom-color: var(--line); }
.klaro .cookie-modal .cm-modal .cm-header .title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
}
.klaro .cookie-modal .cm-modal .cm-footer { border-top-color: var(--line); }
.klaro .cookie-modal a, .klaro .cookie-notice a { color: var(--text); text-decoration: underline; text-underline-offset: .2em; }
.klaro .cookie-modal a:hover, .klaro .cookie-notice a:hover { color: var(--orange); }
.klaro .cookie-modal .cm-btn, .klaro .cookie-notice .cn-buttons .cm-btn {
    padding: .7rem 1.25rem;
    border-radius: 999px;
    font-weight: 650;
    font-size: .9375rem;
}
.klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success { background: var(--orange); color: var(--on-orange); }
.klaro .cookie-modal .cm-btn.cm-btn-success:hover, .klaro .cookie-notice .cm-btn.cm-btn-success:hover { background: var(--orange-2); }
.klaro .cookie-modal .cm-btn.cm-btn-danger, .klaro .cookie-modal .cm-btn.cm-btn-info,
.klaro .cookie-notice .cm-btn.cm-btn-danger, .klaro .cookie-notice .cm-btn.cm-btn-info {
    background: transparent;
    border: 1px solid var(--line-2);
    color: var(--text);
}
.klaro .cookie-modal .cm-btn.cm-btn-danger:hover, .klaro .cookie-modal .cm-btn.cm-btn-info:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover, .klaro .cookie-notice .cm-btn.cm-btn-info:hover { border-color: var(--text); background: var(--surface-2); }
.klaro .cookie-modal .cm-list-title { font-weight: 650; }
.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider { background: var(--orange); }
.klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider { background: rgb(237 108 5 / .45); }
.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider { outline: 2px solid var(--orange); outline-offset: 3px; }
.klaro .cookie-modal .cm-powered-by { display: none; }

@keyframes line-up { from { transform: translateY(108%); } to { transform: none; } }
@keyframes frame-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes slow-zoom { from { scale: 1.12; } to { scale: 1.02; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes word-reveal { from { opacity: .15; } to { opacity: 1; } }
@keyframes drift-x { from { transform: translateX(10%); } to { transform: translateX(-10%); } }
@keyframes progress { to { transform: scaleX(1); } }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgb(237 108 5 / .7); }
    70% { box-shadow: 0 0 0 .6rem rgb(237 108 5 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(237 108 5 / 0); }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes pop { 0% { scale: 0; } 60% { scale: 1.12; } 100% { scale: 1; } }

/* ------------------------------------------------------------------ e-shop */
@layer components {
    /* Karta produktu – použije sa aj v hotovom katalógu */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(.75rem, 2vw, 1.5rem);
        padding: 0;
        list-style: none;
    }
    @media (min-width: 48rem) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (min-width: 72rem) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

    .product-card {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: clip;
    }
    .product-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--surface-2); overflow: clip; }
    .product-card__img { width: 100%; height: 100%; object-fit: cover; }
    .product-card__badge {
        position: absolute;
        top: .75rem;
        left: .75rem;
        padding: .35rem .7rem;
        border-radius: 999px;
        background: var(--orange);
        color: var(--on-orange);
        font: 700 .75rem/1 var(--ff-mono);
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .product-card__body { display: grid; gap: .35rem; padding: 1rem 1rem 1.1rem; }
    .product-card__category { font: 500 .7rem/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
    .product-card__name { font-weight: 650; line-height: 1.25; }
    .product-card__price { display: flex; align-items: baseline; gap: .5rem; font-family: var(--ff-mono); font-weight: 600; }
    .product-card__price-old { color: var(--dim); font-weight: 400; font-size: .85em; }
    .product-card__cta { margin-top: .5rem; width: 100%; }
}

@layer sections {
    /* „Chystáme pre vás“ – v popredí text a tlačidlá, na pozadí rozmazaný čiernobiely e-shop */
    .teaser {
        position: relative;
        display: grid;
        align-items: center;
        min-height: 100svh;
        padding-block: calc(var(--header-h) + 2rem) 4rem;
        overflow: clip;
        isolation: isolate;
    }

    .teaser__bg {
        position: absolute;
        inset: -2%;
        z-index: -2;
        overflow: clip;
        pointer-events: none;
        user-select: none;
        filter: grayscale(1) blur(3px) brightness(.8) contrast(1.05);
    }
    .teaser__shop {
        display: grid;
        gap: 1.5rem;
        padding-top: calc(var(--header-h) + 3rem);
        transform-origin: 50% 0;
    }
    @media (prefers-reduced-motion: no-preference) {
        .teaser__shop { animation: teaser-drift 40s linear infinite alternate; }
    }

    .teaser__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
    .teaser__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
    .teaser__chip {
        padding: .55rem 1rem;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        font: 650 .875rem/1 var(--ff-body);
        color: var(--muted);
    }
    .teaser__chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
    .teaser__search {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        min-width: 16rem;
        padding: .7rem 1rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--surface);
        color: var(--dim);
        font-size: .9375rem;
    }
    .teaser__search svg { width: 1.1em; height: 1.1em; }

    /* Tmavý závoj – stred svetlejší, aby bol panel čitateľný a okraje „utopené“ */
    .teaser::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(60% 60% at 50% 50%, rgb(10 10 10 / .35), rgb(10 10 10 / .7) 100%),
            linear-gradient(180deg, rgb(10 10 10 / .8) 0%, transparent 22%, transparent 78%, rgb(10 10 10 / .92) 100%);
    }

    .teaser__inner { display: grid; justify-items: center; }
    .teaser__panel {
        --frame: 2px;
        position: relative;
        display: grid;
        justify-items: center;
        gap: 1.25rem;
        width: min(100%, 44rem);
        padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
        text-align: center;
        background:
            linear-gradient(var(--text) 0 0) top left / 100% var(--frame) no-repeat,
            linear-gradient(var(--text) 0 0) bottom right / 100% var(--frame) no-repeat,
            linear-gradient(var(--text) 0 0) top left / var(--frame) 40% no-repeat,
            linear-gradient(var(--text) 0 0) bottom right / var(--frame) 40% no-repeat,
            rgb(10 10 10 / .72);
        backdrop-filter: blur(14px) saturate(1.1);
        -webkit-backdrop-filter: blur(14px) saturate(1.1);
        box-shadow: 0 40px 120px -40px rgb(0 0 0 / .9);
    }
    @media (prefers-reduced-motion: no-preference) {
        .teaser__panel { animation: fade-in .9s var(--ease) both; }
    }
    .teaser__eyebrow { color: var(--text); }
    .teaser__title {
        font-family: var(--ff-display);
        font-size: clamp(3.25rem, 11vw, 7.5rem);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
        text-wrap: balance;
    }
    .teaser__line { display: block; overflow: clip; padding-block: .14em .08em; margin-block: -.14em -.08em; }
    .teaser__title { padding-top: .14em; }
    .teaser__line--accent { color: var(--orange); }
    @media (prefers-reduced-motion: no-preference) {
        .teaser__line { animation: line-up 1.1s var(--ease) both; }
        .teaser__line--accent { animation-delay: 140ms; }
    }
    .teaser__lead { max-width: 42ch; color: var(--muted); font-size: var(--fs-lg); text-wrap: pretty; }
    .teaser__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .25rem; }
    .teaser__note { font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
}

@keyframes teaser-drift { from { transform: translateY(0) scale(1.02); } to { transform: translateY(-6%) scale(1.06); } }

/* ---------------------------------------------------- e-shop: hlavička, spoločné */
@layer components {
    /* Hlavička e-shopu: logo + „shop“, kategórie, hľadanie, košík, odkaz na web */
    .site-header--shop .site-header__logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
    .site-header__shop-tag {
        padding: .25rem .45rem;
        border: 1px solid var(--orange);
        border-radius: 6px;
        font: 600 .6rem/1 var(--ff-mono);
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--orange);
    }
    .shop-nav__sale { color: var(--orange) !important; }
    .shop-nav__sale .live-dot { margin-right: .4rem; }
    .shop-header__actions { gap: .5rem; }

    .shop-search {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .15rem .35rem .15rem .9rem;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        background: rgb(244 241 234 / .04);
        transition: border-color .25s, background-color .25s;
    }
    .shop-search:focus-within { border-color: var(--text); background: rgb(244 241 234 / .07); }
    .shop-search__icon { width: 1rem; height: 1rem; color: var(--dim); }
    .shop-search__input {
        flex: 1;
        min-width: 0;
        padding: .5rem 0;
        border: 0;
        background: transparent;
        color: var(--text);
        font-size: .9375rem;
        -webkit-appearance: none;
        appearance: none;
    }
    .shop-search__input::placeholder { color: var(--dim); }
    .shop-search__input:focus { outline: none; }
    .shop-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
    .shop-search__submit {
        padding: .45rem .8rem;
        border: 0;
        border-radius: 999px;
        background: var(--orange);
        color: var(--on-orange);
        font: 650 .8125rem/1 var(--ff-body);
    }

    .shop-cart {
        position: relative;
        display: inline-grid;
        place-items: center;
        width: 2.875rem;
        height: 2.875rem;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        color: var(--text);
        text-decoration: none;
        transition: border-color .25s, background-color .25s;
    }
    .shop-cart:hover { border-color: var(--text); background: rgb(244 241 234 / .06); }
    .shop-cart svg { width: 1.15rem; height: 1.15rem; }
    .shop-cart__count {
        position: absolute;
        top: -.2rem;
        right: -.2rem;
        display: grid;
        place-items: center;
        min-width: 1.25rem;
        height: 1.25rem;
        padding-inline: .3rem;
        border-radius: 999px;
        background: var(--orange);
        color: var(--on-orange);
        font: 700 .68rem/1 var(--ff-mono);
    }
    .shop-header__web svg { width: .9rem; height: .9rem; }

    @media (max-width: 63.99rem) {
        .shop-header__web { display: none; }
        .shop-search {
            position: absolute;
            inset: var(--header-h) 0 auto;
            display: none;
            margin: 0;
            padding: .75rem var(--gutter);
            border: 0;
            border-bottom: 1px solid var(--line);
            border-radius: 0;
            background: var(--bg);
        }
        .shop-search.is-open, .no-js .shop-search { display: flex; }
        .shop-search__input { padding: .6rem 0; font-size: 1rem; }
        .no-js .shop-header__search-toggle { display: none; }
    }
    @media (min-width: 64rem) {
        .site-header--shop .site-nav { margin-inline: 1rem auto; }
        .site-header--shop .site-nav__link { padding-inline: .8rem; }
        .shop-search { width: clamp(11rem, 16vw, 17rem); }
        .shop-search__submit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
        .shop-header__search-toggle { display: none; }
    }
    @media (min-width: 64rem) and (max-width: 79.99rem) {
        .shop-header__web span, .shop-header__web { font-size: .8rem; }
    }

    .mobile-menu__sub {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem 1.25rem;
        padding: .6rem 0 1rem 2.6rem;
        list-style: none;
        border-bottom: 1px solid var(--line);
    }
    .mobile-menu__sub a { font: 500 .8rem/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
    .mobile-menu__sub a:hover { color: var(--orange); }
    .mobile-menu__link--sale { color: var(--orange); }

    /* Flash správy e-shopu */
    .shop-toasts {
        position: fixed;
        top: calc(var(--header-h) + .75rem);
        right: var(--gutter);
        z-index: 95;
        display: grid;
        gap: .5rem;
        width: min(24rem, calc(100vw - 2 * var(--gutter)));
    }
    .shop-toast {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        padding: .85rem .75rem .85rem 1rem;
        border: 1px solid var(--line-2);
        border-left: 3px solid var(--orange);
        border-radius: var(--radius);
        background: var(--surface-2);
        box-shadow: 0 20px 50px -20px rgb(0 0 0 / .8);
        font-size: .9375rem;
        transition: opacity .3s, translate .3s var(--ease);
    }
    .shop-toast > svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--orange); }
    .shop-toast--error { border-left-color: var(--danger); }
    .shop-toast--error > svg { color: var(--danger); }
    .shop-toast span { flex: 1; }
    .shop-toast__close { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dim); }
    .shop-toast__close:hover { background: rgb(244 241 234 / .08); color: var(--text); }
    .shop-toast__close svg { width: .9rem; height: .9rem; }
    .shop-toast.is-leaving { opacity: 0; translate: 0 -6px; }
    @media (prefers-reduced-motion: no-preference) {
        .shop-toast { animation: rise .45s var(--ease) both; }
    }

    /* Chips (podkategórie, použité filtre, rýchle rozsahy) */
    .chip {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        padding: .55rem .95rem;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        font: 600 .875rem/1 var(--ff-body);
        color: var(--muted);
        text-decoration: none;
        transition: border-color .25s, color .25s, background-color .25s;
    }
    .chip:hover { border-color: var(--text); color: var(--text); }
    .chip.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }
    .chip--sm { padding: .4rem .75rem; font-size: .8rem; }
    .chip--remove { background: rgb(237 108 5 / .12); border-color: rgb(237 108 5 / .4); color: var(--text); }
    .chip--remove:hover { border-color: var(--orange); }
    .chip--remove svg { width: .85em; height: .85em; color: var(--orange); }

    /* Rad dôvery */
    .trust { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; padding: 0; list-style: none; font-size: .875rem; color: var(--muted); }
    .trust li { display: inline-flex; align-items: center; gap: .55rem; }
    .trust svg { flex: none; width: 1.15rem; height: 1.15rem; color: var(--orange); }
    .trust--strip { justify-content: center; padding-block: 1.25rem; }
    .trust--compact { display: grid; gap: .55rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .8125rem; }
    .shop-trust { border-bottom: 1px solid var(--line); }
    @media (min-width: 48rem) { .trust--strip { justify-content: space-between; } }

    /* Karta produktu – rozšírenie základu z „Chystáme“ */
    .product-card { position: relative; transition: border-color .4s var(--ease), translate .5s var(--ease); }
    .product-card:hover { border-color: var(--line-2); translate: 0 -4px; }
    .product-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
    .product-card__link:focus-visible { outline-offset: -3px; border-radius: var(--radius-lg); }
    .product-card__media .product-card__img { position: absolute; inset: 0; transition: scale 1.1s var(--ease), opacity .5s; }
    .product-card:hover .product-card__img { scale: 1.04; }
    .product-card__img--alt { opacity: 0; }
    .product-card.has-alt:hover .product-card__img--alt { opacity: 1; }
    .product-card__placeholder {
        display: grid;
        place-items: end start;
        height: 100%;
        padding: clamp(.9rem, 2vw, 1.4rem);
        background:
            radial-gradient(80% 90% at 100% 0%, rgb(237 108 5 / .28), transparent 60%),
            var(--tread),
            var(--surface-2);
        overflow: clip;
    }
    .product-card__placeholder span {
        max-width: 100%;
        overflow: hidden;
        font-family: var(--ff-display);
        font-size: clamp(2.4rem, 6vw, 4.75rem);
        line-height: .85;
        text-transform: uppercase;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--line-2);
        transition: -webkit-text-stroke-color .4s;
    }
    .product-card:hover .product-card__placeholder span { -webkit-text-stroke-color: var(--orange); }
    .product-card__badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; }
    .product-card__badges .product-card__badge { position: static; }
    .product-card__badge--new { background: var(--text); color: var(--bg); }
    .product-card__badge--out { background: rgb(10 10 10 / .8); border: 1px solid var(--line-2); color: var(--muted); }
    .is-sold-out .product-card__img, .is-sold-out .product-card__placeholder { opacity: .55; filter: grayscale(.7); }
    .product-card__name { text-wrap: pretty; }
    .product-card__price { flex-wrap: wrap; margin-top: .15rem; }
    .product-card__from { font: 500 .72rem/1 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
    .product-card__price-now.is-sale { color: var(--orange); }
    .product-card__stock { display: inline-flex; align-items: center; gap: .4rem; font: 500 .68rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
    .product-card__stock::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
    .product-card__stock--in_stock { color: #7ed8a4; }
    .product-card__stock--low { color: var(--orange); }
    .product-card__sizes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; }
    .product-card__size {
        padding: .25rem .45rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        font: 500 .66rem/1 var(--ff-mono);
        color: var(--muted);
    }
    .product-card__size.is-out { border-style: dashed; color: var(--dim); text-decoration: line-through; }
    .product-grid.is-loading { opacity: .5; pointer-events: none; transition: opacity .2s; }
    @media (max-width: 30rem) {
        .product-card__body { padding: .75rem .75rem .9rem; }
        .product-card__badge { padding: .3rem .55rem; font-size: .66rem; }
    }
    @media (prefers-reduced-motion: reduce) {
        .product-card, .product-card__img, .product-card__placeholder span, .shop-toast, .chip { transition: none; }
    }
}

/* -------------------------------------------------- e-shop: úvod, katalóg, produkt */
@layer sections {
    .page-shop .shop { padding-top: calc(var(--header-h) + clamp(1.25rem, 3vw, 2.5rem)); }
    .page-shop-home .shop { padding-top: 0; }

    /* Úvod – kompaktný hero s rámom */
    .shop-hero {
        position: relative;
        padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)) clamp(2.5rem, 5vw, 4rem);
        overflow: clip;
        isolation: isolate;
        border-bottom: 1px solid var(--line);
    }
    .shop-hero .hero__tracks::before { content: 'SHOP'; }
    .shop-hero__inner { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
    .shop-hero__frame { max-width: 60rem; }
    .shop-hero__eyebrow { margin-bottom: clamp(.75rem, 2vw, 1.25rem); }
    .shop-hero__title {
        padding-top: .14em;
        font-family: var(--ff-display);
        font-size: clamp(2.75rem, 1rem + 7.5vw, 7.5rem);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .shop-hero__line { display: block; overflow: clip; padding-block: .14em .1em; margin-block: -.14em -.1em; }
    .shop-hero__line > span { display: inline-block; }
    .shop-hero__line:nth-child(even) > span { color: var(--orange); }
    @media (prefers-reduced-motion: no-preference) {
        .shop-hero__line > span { animation: line-up 1.1s var(--ease) both; }
        .shop-hero__line:nth-child(2) > span { animation-delay: 130ms; }
    }
    .shop-hero__bottom { display: grid; gap: 1.5rem; align-items: end; }
    @media (min-width: 56rem) { .shop-hero__bottom { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
    .shop-hero__text { max-width: 46ch; color: var(--muted); font-size: var(--fs-lg); line-height: 1.5; }
    .shop-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
    .shop-hero__actions .live-dot { margin-right: .2rem; }

    /* Dlaždice kategórií */
    .category-tiles {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(.75rem, 2vw, 1.5rem);
        padding: 0;
        list-style: none;
    }
    @media (min-width: 64rem) { .category-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .category-tile__link {
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: inherit;
        text-decoration: none;
        overflow: clip;
        transition: border-color .4s var(--ease), translate .5s var(--ease);
    }
    .category-tile__link:hover { border-color: var(--line-2); translate: 0 -4px; }
    .category-tile__media { aspect-ratio: 4 / 3; background: var(--surface-2); overflow: clip; }
    .category-tile__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: scale 1.1s var(--ease); }
    .category-tile__link:hover .category-tile__img { scale: 1.05; }
    .category-tile__placeholder {
        display: grid;
        place-items: end start;
        height: 100%;
        padding: 1rem;
        background:
            radial-gradient(70% 80% at 100% 0%, rgb(237 108 5 / .3), transparent 60%),
            var(--tread),
            var(--surface-2);
    }
    .category-tile__placeholder span {
        font-family: var(--ff-display);
        font-size: clamp(3rem, 8vw, 6rem);
        line-height: .8;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--line-2);
        transition: -webkit-text-stroke-color .4s;
    }
    .category-tile__link:hover .category-tile__placeholder span { -webkit-text-stroke-color: var(--orange); }
    .category-tile__body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem .75rem; padding: 1rem 1.1rem 1.1rem; }
    .category-tile__name { font-size: 1.125rem; font-weight: 760; letter-spacing: -.01em; }
    .category-tile__count { font: 500 .72rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

    /* Výpis katalógu */
    .catalog { padding-bottom: clamp(3rem, 6vw, 5rem); }
    .catalog__header { display: grid; gap: 1.1rem; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); }
    .catalog__title-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
    .catalog__title {
        padding-top: .12em;
        font-family: var(--ff-display);
        font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5rem);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .catalog__count { margin-left: .3em; font-family: var(--ff-mono); font-size: .9rem; text-transform: none; color: var(--orange); vertical-align: super; white-space: nowrap; }
    .catalog__search { display: flex; gap: .5rem; width: min(100%, 26rem); }
    .catalog__search input {
        flex: 1;
        min-width: 0;
        padding: .6rem 1rem;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        background: var(--surface);
        color: var(--text);
        -webkit-appearance: none;
        appearance: none;
    }
    .catalog__lead { max-width: 56ch; color: var(--muted); font-size: var(--fs-lg); }
    .catalog__lead.prose { font-size: var(--fs-base); }
    .catalog__subcats { display: flex; flex-wrap: wrap; gap: .5rem; }

    .catalog__layout { display: grid; gap: 2rem; padding-top: clamp(1.25rem, 3vw, 2rem); }
    @media (min-width: 64rem) {
        .catalog__layout { grid-template-columns: 16.5rem minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
    }
    .catalog__results { display: grid; gap: 1.25rem; min-width: 0; }
    .catalog__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
    .catalog__filters-toggle svg { width: 1rem; height: 1rem; }
    .catalog__filters-badge { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding-inline: .3rem; border-radius: 999px; background: var(--orange); color: var(--on-orange); font: 700 .7rem/1 var(--ff-mono); }
    @media (min-width: 64rem) { .catalog__filters-toggle { display: none; } .catalog__toolbar { justify-content: flex-end; } }
    .catalog__sort { display: flex; align-items: center; gap: .6rem; margin-left: auto; font-size: .875rem; color: var(--muted); }
    .catalog__sort select {
        padding: .55rem 2.3rem .55rem 1rem;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f4f1ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .85rem center / .85rem;
        color: var(--text);
        font: 600 .875rem/1 var(--ff-body);
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
    }
    .catalog__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .catalog__reset { margin-left: .25rem; font: 500 .78rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .catalog__reset:hover { color: var(--orange); }
    .catalog__empty { margin-top: .5rem; }
    .catalog__empty-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .75rem; }

    /* Filtre: desktop bočný panel, mobil spodný <dialog> */
    .filters { color: var(--text); }
    .filters__form { display: flex; flex-direction: column; }
    .filters__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
    .filters__title { padding-top: .1em; font-family: var(--ff-display); font-size: 1.5rem; font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .filters__close { width: 2.5rem; height: 2.5rem; }
    .filters__body { display: grid; }
    .filters__group { margin: 0; padding: 1.1rem 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
    .filters__group:first-child { border-top: 0; padding-top: 0; }
    .filters__group-title { display: block; margin-bottom: .75rem; padding: 0; font: 500 .68rem/1 var(--ff-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
    .filters__tree, .filters__tree-sub { display: grid; gap: .1rem; padding: 0; list-style: none; }
    .filters__tree-sub { padding-left: .9rem; margin-top: .1rem; }
    .filters__tree-link {
        display: block;
        padding: .45rem .65rem;
        border-radius: 8px;
        font-weight: 600;
        font-size: .9375rem;
        text-decoration: none;
        color: var(--muted);
        transition: background-color .2s, color .2s;
    }
    .filters__tree-sub .filters__tree-link { font-weight: 500; font-size: .875rem; }
    .filters__tree-link:hover { background: rgb(244 241 234 / .06); color: var(--text); }
    .filters__tree-link.is-open { color: var(--text); }
    .filters__tree-link.is-current { background: rgb(237 108 5 / .14); color: var(--orange); }
    .filters__price { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; color: var(--dim); }
    .filters__price label { display: block; min-width: 0; }
    .filters__price input {
        width: 100%;
        min-width: 0;
        padding: .55rem .7rem;
        border: 1px solid var(--line-2);
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        font: 500 .9375rem/1.2 var(--ff-mono);
        -moz-appearance: textfield;
        appearance: textfield;
    }
    .filters__price input::-webkit-outer-spin-button, .filters__price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .filters__price input:focus { border-color: var(--text); outline: none; }
    .filters__quick { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
    .filters__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
    .filter-chip { position: relative; }
    .filter-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
    .filter-chip span {
        display: inline-flex;
        align-items: center;
        min-width: 2.6rem;
        justify-content: center;
        padding: .5rem .8rem;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        font: 600 .875rem/1 var(--ff-body);
        color: var(--muted);
        transition: border-color .2s, color .2s, background-color .2s;
    }
    .filter-chip:hover span { border-color: var(--text); color: var(--text); }
    .filter-chip input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
    .filter-chip input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
    .filters__check { display: flex; align-items: center; gap: .65rem; font-weight: 600; cursor: pointer; }
    .filters__check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--orange); cursor: pointer; }
    .filters__foot { display: grid; gap: .6rem; justify-items: center; }
    .filters__reset { font: 500 .78rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .filters__foot [data-shop-filters-target="count"].is-loading { opacity: .5; }

    /* Desktop (a bez JS): obyčajný blok namiesto dialógu */
    @media (min-width: 64rem) {
        .filters {
            position: sticky;
            top: calc(var(--header-h) + 1rem);
            display: block;
            inset-inline: auto;
            width: auto;
            max-width: none;
            height: auto;
            max-height: calc(100svh - var(--header-h) - 2rem);
            margin: 0;
            padding: 0 .25rem 0 0;
            border: 0;
            background: transparent;
            overflow: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
        }
        .filters__head { margin-bottom: 1rem; }
        .filters__close { display: none; }
        .js .filters__foot { display: none; }
        .filters__foot { padding-top: 1rem; border-top: 1px solid var(--line); }
    }
    @media (max-width: 63.99rem) {
        .no-js .filters { display: block; position: static; width: auto; max-width: none; margin: 0; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
        .no-js .filters__close { display: none; }
        .no-js .filters__foot { margin-top: 1rem; }
        .filters[open] {
            position: fixed;
            inset: auto 0 0;
            width: 100%;
            max-width: none;
            max-height: 90svh;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            background: var(--surface);
            box-shadow: 0 -30px 80px -30px rgb(0 0 0 / .9);
            overflow: hidden;
        }
        .filters[open] .filters__form { max-height: 90svh; }
        .filters[open] .filters__head { padding: 1rem var(--gutter) .9rem; border-bottom: 1px solid var(--line); }
        .filters[open] .filters__head::before {
            content: '';
            position: absolute;
            top: .5rem;
            left: 50%;
            width: 2.5rem;
            height: 4px;
            border-radius: 2px;
            background: var(--line-2);
            translate: -50% 0;
        }
        .filters[open] .filters__body { flex: 1; padding: .25rem var(--gutter); overflow: auto; overscroll-behavior: contain; }
        .filters[open] .filters__foot {
            padding: .9rem var(--gutter) calc(.9rem + env(safe-area-inset-bottom));
            border-top: 1px solid var(--line);
            background: var(--surface);
        }
        .filters::backdrop { background: rgb(0 0 0 / .65); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
        @media (prefers-reduced-motion: no-preference) {
            .filters[open] { animation: sheet-up .4s var(--ease) both; }
        }
    }
    body.filters-open { overflow: hidden; }

    /* Detail produktu */
    .product { padding-bottom: clamp(3rem, 6vw, 5rem); }
    .product__layout { display: grid; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 1.25rem; }
    @media (min-width: 64rem) {
        .product__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
        .product__gallery { position: sticky; top: calc(var(--header-h) + 1rem); }
    }
    .gallery { display: grid; gap: .75rem; }
    .gallery__stage {
        position: relative;
        aspect-ratio: 4 / 5;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface-2);
        overflow: clip;
        cursor: zoom-in;
    }
    .gallery--empty .gallery__stage { cursor: default; }
    .gallery__slide { position: absolute; inset: 0; }
    .gallery__slide:not([hidden]) { display: block; }
    @media (prefers-reduced-motion: no-preference) { .gallery__slide.is-active { animation: fade-in .35s var(--ease) both; } }
    .gallery__img { width: 100%; height: 100%; object-fit: cover; }
    .gallery__placeholder { padding: clamp(1.25rem, 3vw, 2.5rem); }
    .gallery__placeholder span { font-size: clamp(3.5rem, 10vw, 9rem); }
    .gallery__badge { top: 1rem; left: 1rem; font-size: .85rem; }
    .gallery__zoom {
        position: absolute;
        right: .9rem;
        bottom: .9rem;
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: rgb(10 10 10 / .7);
        color: var(--text);
        opacity: 0;
        transition: opacity .25s;
    }
    .gallery__zoom svg { width: 1rem; height: 1rem; }
    .gallery__stage:hover .gallery__zoom, .gallery__stage:focus-visible .gallery__zoom { opacity: 1; }
    .gallery__thumbs { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .25rem; }
    .gallery__thumb {
        flex: none;
        width: 4.25rem;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-2);
        overflow: clip;
        opacity: .65;
        transition: opacity .25s, border-color .25s;
    }
    .gallery__thumb img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
    .gallery__thumb:hover { opacity: 1; }
    .gallery__thumb.is-active { opacity: 1; border-color: var(--orange); }

    .lightbox {
        width: 100vw;
        max-width: none;
        height: 100svh;
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgb(10 10 10 / .97);
        color: var(--text);
    }
    .lightbox[open] { display: grid; place-items: center; }
    .lightbox::backdrop { background: rgb(0 0 0 / .8); }
    .lightbox__img { max-width: 100vw; max-height: 100svh; object-fit: contain; }
    .lightbox__close { position: absolute; top: 1rem; right: 1rem; }
    .lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; }
    .lightbox__nav--prev { left: 1rem; }
    .lightbox__nav--next { right: 1rem; }
    .lightbox__counter { position: absolute; bottom: 1rem; left: 50%; translate: -50% 0; font: 500 .78rem/1 var(--ff-mono); letter-spacing: .12em; color: var(--muted); }

    .product__panel { display: grid; gap: 1.25rem; align-content: start; }
    .product__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .product__eyebrow a { color: inherit; text-decoration: none; }
    .product__eyebrow a:hover { color: var(--text); }
    .product__sku { color: var(--dim); }
    .product__title {
        padding-top: .12em;
        font-family: var(--ff-display);
        font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4rem);
        font-weight: 400;
        line-height: var(--lh-display);
        text-transform: uppercase;
    }
    .product__short { color: var(--muted); font-size: var(--fs-lg); line-height: 1.5; }
    .product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; font-family: var(--ff-mono); }
    .product__price-now { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem); font-weight: 700; line-height: 1; }
    .product__price-now.is-sale { color: var(--orange); }
    .product__price-old { font-size: 1.05rem; color: var(--dim); }
    .product__savings { flex-basis: 100%; font-size: .85rem; color: var(--orange); }
    .product__promo-ends { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    .product__vat { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }

    .buy { display: grid; gap: 1.25rem; }
    .buy__options { display: grid; gap: 1rem; }
    .variant-group { margin: 0; padding: 0; border: 0; min-width: 0; }
    .variant-group__legend { padding: 0; margin-bottom: .6rem; font: 500 .72rem/1 var(--ff-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
    .variant-group__legend span { color: var(--text); }
    .variant-group__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
    .variant-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        min-width: 3rem;
        min-height: 2.75rem;
        padding: .55rem .95rem;
        border: 1px solid var(--line-2);
        border-radius: 10px;
        background: transparent;
        color: var(--text);
        font: 600 .9375rem/1 var(--ff-body);
        transition: border-color .2s, box-shadow .2s, background-color .2s, color .2s;
    }
    .variant-btn:hover { border-color: var(--text); }
    .variant-btn__check { width: .95rem; height: .95rem; display: none; color: var(--orange); }
    .variant-btn[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: rgb(244 241 234 / .06); }
    .variant-btn[aria-pressed="true"] .variant-btn__check { display: block; }
    .variant-btn.is-out {
        color: var(--dim);
        border-style: dashed;
        text-decoration: line-through;
        background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(244 241 234 / .04) 6px 8px);
    }
    .variant-btn.is-out[aria-pressed="true"] { border-color: var(--line-2); box-shadow: inset 0 0 0 1px var(--line-2); }

    .buy__availability { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; font-size: .9rem; }
    .buy__stock { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; }
    .buy__stock::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
    .buy__stock--in_stock { color: #7ed8a4; }
    .buy__stock--low { color: var(--orange); }
    .buy__stock--out { color: var(--dim); }
    .buy__dispatch { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); }
    .buy__dispatch svg { width: 1rem; height: 1rem; color: var(--orange); }
    .buy__row { display: flex; flex-wrap: wrap; gap: .75rem; }
    .buy__submit { flex: 1; min-width: 12rem; }
    .qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 999px; overflow: clip; }
    .qty__btn { display: grid; place-items: center; width: 3rem; border: 0; background: transparent; color: var(--text); }
    .qty__btn:hover { background: rgb(244 241 234 / .08); }
    .qty__btn svg { width: 1rem; height: 1rem; }
    .qty__input {
        width: 3.25rem;
        padding: .6rem 0;
        border: 0;
        border-inline: 1px solid var(--line);
        background: transparent;
        color: var(--text);
        font: 600 1rem/1 var(--ff-mono);
        text-align: center;
        -moz-appearance: textfield;
        appearance: textfield;
    }
    .qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .qty__input:focus { outline: none; background: rgb(244 241 234 / .05); }

    .buy-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 60;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
        border-top: 1px solid var(--line-2);
        background: rgb(10 10 10 / .9);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        translate: 0 110%;
        transition: translate .4s var(--ease);
    }
    .buy-bar.is-visible { translate: 0 0; }
    .buy-bar__info { display: grid; min-width: 0; }
    .buy-bar__name { overflow: hidden; font-weight: 650; font-size: .9rem; white-space: nowrap; text-overflow: ellipsis; }
    .buy-bar__price { font: 700 1rem/1.2 var(--ff-mono); color: var(--orange); }
    .buy-bar__btn { flex: none; }
    @media (min-width: 64rem) { .buy-bar { display: none; } }
    @media (prefers-reduced-motion: reduce) { .buy-bar { transition: none; } }

    .product__details { display: grid; gap: clamp(2rem, 4vw, 3rem); margin-top: clamp(2.5rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
    @media (min-width: 56rem) { .product__details { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; } }
    .product__h2 { margin-bottom: 1rem; padding-top: .12em; font-family: var(--ff-display); font-size: 1.75rem; font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .product__description .prose { max-width: 62ch; }
    .product__muted { color: var(--muted); }
    .product__aside { display: grid; gap: 1.5rem; }
    .params { display: grid; }
    .params > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
    .params dt { color: var(--muted); }
    .params dd { margin: 0; font-family: var(--ff-mono); font-size: .9rem; overflow-wrap: anywhere; }
    .params dd a { color: var(--text); }
    .accordion { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
    .accordion summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .9rem 1.1rem;
        font-weight: 650;
        cursor: pointer;
        list-style: none;
    }
    .accordion summary::-webkit-details-marker { display: none; }
    .accordion summary svg { width: 1.1rem; height: 1.1rem; color: var(--orange); transition: rotate .3s var(--ease); }
    .accordion[open] summary svg { rotate: 180deg; }
    .accordion__body { display: grid; gap: .9rem; padding: 0 1.1rem 1.1rem; color: var(--muted); font-size: .9375rem; }
    .accordion__body ul { display: grid; gap: .45rem; padding-left: 1.1rem; }
    .accordion__body strong { color: var(--text); }
    .product__related { margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }

    /* Informačné stránky (Doprava a platba) */
    .info { padding-bottom: clamp(3rem, 6vw, 5rem); }
    .info__header { display: grid; gap: 1rem; margin-top: 1.25rem; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); }
    .info__title { padding-top: .12em; font-family: var(--ff-display); font-size: clamp(2.5rem, 1.4rem + 4.5vw, 5rem); font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .info__lead { max-width: 56ch; color: var(--muted); font-size: var(--fs-lg); }
    .info__grid { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
    @media (min-width: 56rem) { .info__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    .info__card {
        display: grid;
        gap: .9rem;
        align-content: start;
        padding: clamp(1.25rem, 2.5vw, 1.75rem);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        color: var(--muted);
        font-size: .9375rem;
    }
    .info__card h2 { font-size: 1.35rem; font-weight: 760; letter-spacing: -.01em; color: var(--text); }
    .info__card ul { display: grid; gap: .5rem; padding-left: 1.1rem; }
    .info__card strong, .info__card dt { color: var(--text); }
    .info__card .params > div { grid-template-columns: minmax(0, 1fr) auto; }
    .info__card a { color: var(--text); }
    .info__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgb(237 108 5 / .14); color: var(--orange); }
    .info__icon svg { width: 1.25rem; height: 1.25rem; }
    .info__note { margin-top: 1.5rem; color: var(--muted); font-size: .9rem; }
    .info__note a { color: var(--text); }
}

@keyframes sheet-up { from { translate: 0 100%; } to { translate: 0 0; } }

/* ---------------------------------------------------------- e-shop: partneri */
@layer components {
    /* Riadok partnera na karte produktu (logo 16 px + názov) */
    .product-card__partner { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
    .product-card__partner img { width: 1rem; height: 1rem; border-radius: 50%; object-fit: cover; }

    /* Karta partnera – ako karta produktu, ale s krycím obrázkom 16:10 a logom v kruhu cez okraj */
    .partner-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(.75rem, 2vw, 1.5rem);
        padding: 0;
        list-style: none;
    }
    @media (min-width: 40rem) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 64rem) { .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
    .partner-card {
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        background: var(--surface);
        overflow: clip;
        transition: border-color .4s var(--ease), translate .5s var(--ease);
    }
    .partner-card:hover { border-color: var(--line-2); translate: 0 -4px; }
    .partner-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
    .partner-card__link:focus-visible { outline-offset: -3px; border-radius: var(--radius-lg); }
    .partner-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); }
    .partner-card__cover { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: scale 1.1s var(--ease); }
    .partner-card:hover .partner-card__cover { scale: 1.04; }
    .partner-card__placeholder {
        display: grid;
        place-items: end start;
        height: 100%;
        padding: 1rem;
        background:
            radial-gradient(70% 80% at 100% 0%, rgb(237 108 5 / .3), transparent 60%),
            var(--tread),
            var(--surface-2);
    }
    .partner-card__placeholder span {
        font-family: var(--ff-display);
        font-size: clamp(3rem, 8vw, 5rem);
        line-height: .8;
        color: transparent;
        -webkit-text-stroke: 1.5px var(--line-2);
        transition: -webkit-text-stroke-color .4s;
    }
    .partner-card:hover .partner-card__placeholder span { -webkit-text-stroke-color: var(--orange); }
    .partner-card__logo {
        position: absolute;
        left: 1rem;
        bottom: -1.5rem;
        display: grid;
        place-items: center;
        width: 3.5rem;
        height: 3.5rem;
        border: 3px solid var(--surface);
        border-radius: 50%;
        background: var(--bg);
        color: var(--text);
        font: 700 .95rem/1 var(--ff-mono);
        letter-spacing: .04em;
        overflow: clip;
        box-shadow: 0 10px 30px -12px rgb(0 0 0 / .8);
    }
    .partner-card__logo img { width: 100%; height: 100%; object-fit: cover; }
    .partner-card__logo--empty { background: var(--orange); color: var(--on-orange); }
    .partner-card__body { display: grid; gap: .3rem; padding: 2.1rem 1rem 1.1rem; }
    .partner-card__name { font-size: 1.125rem; font-weight: 760; letter-spacing: -.01em; line-height: 1.2; }
    .partner-card__tagline { color: var(--muted); font-size: .9rem; line-height: 1.45; }
    .partner-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .75rem; margin-top: .35rem; }
    .partner-card__count { font: 500 .7rem/1.4 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
    .partner-card__handle { display: inline-flex; align-items: center; gap: .3rem; font: 500 .75rem/1.4 var(--ff-mono); color: var(--orange); }
    .partner-card__handle svg { width: .9rem; height: .9rem; }
    @media (prefers-reduced-motion: reduce) { .partner-card, .partner-card__cover, .partner-card__placeholder span { transition: none; } }
}

@layer sections {
    .partners__empty { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
    .partners .partner-grid { margin-top: clamp(1.25rem, 3vw, 2rem); }

    /* Hlavička stránky partnera vo výpise katalógu */
    .catalog__partner-cover { aspect-ratio: 16 / 5; border-radius: var(--radius-lg); background: var(--surface-2); overflow: clip; }
    .catalog__partner-cover-img { width: 100%; height: 100%; object-fit: cover; }
    .catalog__partner { display: grid; gap: 1rem; }
    @media (min-width: 48rem) { .catalog__partner { grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; } }
    .catalog__partner-logo {
        display: grid;
        place-items: center;
        width: 5rem;
        height: 5rem;
        border: 3px solid var(--surface);
        border-radius: 50%;
        background: var(--bg);
        color: var(--text);
        font: 700 1.35rem/1 var(--ff-mono);
        overflow: clip;
    }
    .catalog__partner-cover + .catalog__partner .catalog__partner-logo { margin-top: -3.5rem; }
    .catalog__partner-logo img { width: 100%; height: 100%; object-fit: cover; }
    .catalog__partner-logo--empty { background: var(--orange); color: var(--on-orange); }
    .catalog__partner-body { display: grid; gap: .75rem; }
    .catalog__partner-tagline { max-width: 56ch; color: var(--muted); font-size: var(--fs-lg); line-height: 1.45; }
    .catalog__partner-links { display: flex; flex-wrap: wrap; gap: .5rem; }
    .catalog__partner-links svg { width: 1rem; height: 1rem; }

    /* Zoznam checkboxov vo filtri (partneri) */
    .filters__list { display: grid; gap: .55rem; }

    /* „Od partnera“ v nákupnom paneli produktu */
    .product__partner {
        display: flex;
        align-items: center;
        gap: .9rem;
        padding: .9rem 1rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: inherit;
        text-decoration: none;
        transition: border-color .3s var(--ease);
    }
    .product__partner:hover { border-color: var(--orange); }
    .product__partner-logo {
        flex: none;
        display: grid;
        place-items: center;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: var(--bg);
        font: 700 .9rem/1 var(--ff-mono);
        overflow: clip;
    }
    .product__partner-logo img { width: 100%; height: 100%; object-fit: cover; }
    .product__partner-logo--empty { background: var(--orange); color: var(--on-orange); }
    .product__partner-body { display: grid; gap: .1rem; min-width: 0; }
    .product__partner-eyebrow { font: 500 .66rem/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
    .product__partner-name { font-weight: 700; }
    .product__partner-tagline { color: var(--muted); font-size: .85rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .product__partner-arrow { flex: none; margin-left: auto; width: 1.1rem; height: 1.1rem; color: var(--orange); }
}

/* ------------------------------------------- e-shop: košík, pokladňa, objednávka */
@layer components {
    /* Oznámenie „pridané do košíka“ s ponukou pokračovať alebo ísť do košíka */
    .shop-toast--cart { align-items: flex-start; }
    .shop-toast__body { display: grid; gap: .6rem; }
    .shop-toast__text { font-weight: 650; }
    .shop-toast__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
    .shop-toast__link {
        padding: 0;
        border: 0;
        background: none;
        color: var(--muted);
        font-size: .875rem;
        text-decoration: underline;
        text-decoration-color: var(--line-2);
        text-underline-offset: .25em;
    }
    .shop-toast__link:hover { color: var(--text); }

    /* „Do košíka“ na karte produktu – mimo odkazu na detail */
    .product-card__actions { padding: 0 1rem 1.1rem; margin-top: auto; }
    .product-card__actions form { display: contents; }
    .product-card__cta { width: 100%; justify-content: center; }

    /* Oznámenia o zmenách v košíku (CartNotice) */
    .cart-notices { display: grid; gap: .6rem; padding: 0; margin-bottom: 1.75rem; list-style: none; }
    .cart-notice {
        display: flex;
        align-items: flex-start;
        gap: .7rem;
        padding: .85rem 1.1rem;
        border: 1px solid var(--line-2);
        border-left: 3px solid var(--orange);
        border-radius: 12px;
        background: var(--surface);
        font-size: .9375rem;
    }
    .cart-notice svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--orange); }
    .cart-notice--error { border-left-color: var(--danger); }
    .cart-notice--error svg { color: var(--danger); }
    .cart-notice--info { border-left-color: var(--line-2); }
    .cart-notice--info svg { color: var(--muted); }

    /* Súčtová tabuľka – košík, pokladňa aj objednávka */
    .totals { display: grid; margin-top: 1.25rem; }
    .totals__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; font-size: .9375rem; }
    .totals__row dt { color: var(--muted); }
    .totals__row dd { margin: 0; font-family: var(--ff-mono); font-weight: 600; }
    .totals__row--muted dd, .totals__row--muted dt { color: var(--dim); font-weight: 400; }
    .totals__row--savings dt, .totals__row--savings dd { color: #7ed8a4; }
    .totals__note { display: block; font-size: .75rem; color: #7ed8a4; }

    /* zľavový kód (košík aj pokladňa) */
    .coupon { margin-bottom: 1rem; }
    .coupon__form { display: flex; gap: .5rem; }
    .coupon__input {
        flex: 1 1 auto;
        min-width: 0;
        padding: .6rem .8rem;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--text);
        font: inherit;
        font-family: var(--ff-mono);
        font-size: .9rem;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
    .coupon__input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
    .coupon__apply { flex: 0 0 auto; }
    .coupon__applied { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .9rem; }
    .coupon__applied svg { width: 1.1rem; height: 1.1rem; color: #7ed8a4; }
    .coupon__code { font-family: var(--ff-mono); font-weight: 700; letter-spacing: .06em; }
    .coupon__label { color: #7ed8a4; }
    .coupon__remove {
        margin-left: auto;
        padding: 0;
        border: 0;
        background: none;
        color: var(--muted);
        font: inherit;
        font-size: .8125rem;
        text-decoration: underline;
        text-underline-offset: .2em;
        cursor: pointer;
    }
    .coupon__remove:hover { color: var(--text); }

    /* prehľad zľavového kódu pre jeho majiteľa (shop/coupon/stats.html.twig) */
    .affiliate { max-width: 44rem; }
    .affiliate__validity { margin-top: .75rem; color: var(--dim); font-size: .875rem; }
    .affiliate__summary { margin-bottom: 1.5rem; }
    .affiliate__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
    .affiliate__stats dt { color: var(--muted); font-size: .8125rem; }
    .affiliate__stats dd { margin-top: .25rem; font-family: var(--ff-display); font-size: 1.75rem; line-height: 1; }
    .affiliate__stat--accent dd { color: var(--orange); }
    .affiliate__table-wrap { overflow-x: auto; }
    .affiliate__table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
    .affiliate__table th, .affiliate__table td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; }
    .affiliate__table th { color: var(--muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
    .affiliate__table .num { text-align: right; font-variant-numeric: tabular-nums; }
    .totals__row--total {
        margin-top: .35rem;
        padding-top: .9rem;
        border-top: 1px solid var(--line-2);
        font-size: 1.05rem;
    }
    .totals__row--total dt { color: var(--text); font-weight: 650; }
    .totals__row--total dd { font-size: 1.35rem; color: var(--orange); }
    .totals--vat { margin-top: 0; }
    .totals--vat .totals__row { padding: .2rem 0; font-size: .8125rem; }
    .totals__vat { margin-top: .5rem; color: var(--dim); font-size: .8125rem; }

    /* Doprava zadarmo – ukazovateľ pokroku */
    .free-shipping {
        display: grid;
        gap: .55rem;
        padding: .9rem 1rem;
        border: 1px dashed var(--line-2);
        border-radius: 12px;
        background: var(--bg-2);
    }
    .free-shipping.is-reached { border-style: solid; border-color: rgb(126 216 164 / .5); }
    .free-shipping__text { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted); }
    .free-shipping__text svg { width: 1.05rem; height: 1.05rem; color: var(--orange); }
    .free-shipping.is-reached .free-shipping__text { color: #7ed8a4; }
    .free-shipping.is-reached .free-shipping__text svg { color: #7ed8a4; }
    .free-shipping__bar { height: 4px; border-radius: 999px; background: rgb(244 241 234 / .12); overflow: clip; }
    .free-shipping__bar span { display: block; height: 100%; border-radius: 999px; background: var(--orange); transition: width .4s var(--ease); }
    .free-shipping.is-reached .free-shipping__bar span { background: #7ed8a4; }

    /* Súhrn položiek v pokladni a na objednávke */
    .summary-lines { display: grid; gap: .65rem; padding: 0; margin: 0; list-style: none; }
    .summary-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: baseline; font-size: .9rem; }
    .summary-line__qty { font-family: var(--ff-mono); color: var(--dim); }
    .summary-line__name { min-width: 0; }
    .summary-line__sku { display: block; color: var(--dim); font-family: var(--ff-mono); font-size: .75rem; }
    .summary-line__price { font-family: var(--ff-mono); font-weight: 600; white-space: nowrap; }
    .summary-lines--order { gap: 1rem; }

    /* Karty výberu (doprava, platba) */
    .choice-cards { display: grid; gap: .65rem; }
    .choice-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .9rem;
        align-items: center;
        padding: 1rem 1.15rem;
        border: 1px solid var(--line-2);
        border-radius: var(--radius);
        background: var(--surface);
        cursor: pointer;
        transition: border-color .2s, background-color .2s;
    }
    .choice-card:hover { border-color: rgb(244 241 234 / .4); }
    .choice-card:has(input:checked) { border-color: var(--orange); background: rgb(237 108 5 / .07); }
    .choice-card:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
    .choice-card__input { width: 1.15rem; height: 1.15rem; accent-color: var(--orange); }
    .choice-card__body { display: grid; gap: .2rem; min-width: 0; }
    .choice-card__name { font-weight: 650; }
    .choice-card__note { color: var(--muted); font-size: .85rem; }
    .choice-card__flag {
        justify-self: start;
        margin-top: .15rem;
        padding: .2rem .5rem;
        border-radius: 999px;
        background: rgb(126 216 164 / .16);
        color: #7ed8a4;
        font: 650 .7rem/1.4 var(--ff-mono);
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .choice-card__price { font-family: var(--ff-mono); font-weight: 650; white-space: nowrap; }

    /* Rozbaľovací zoznam v plávajúcom popisku (krajina) */
    select.ff__input { padding-block: 1.55rem .55rem; cursor: pointer; }
    .ff:has(select.ff__input) .ff__label { transform: translateY(-.64rem) scale(.75); color: var(--muted); }
}

@layer sections {
    /* ——— KOŠÍK ——— */
    .cart { padding-block: calc(var(--header-h) + 1.5rem) clamp(4rem, 8vw, 7rem); }
    .cart__header { margin-bottom: 1.75rem; }
    .cart__title { padding-top: .1em; font-family: var(--ff-display); font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .cart__count { color: var(--muted); font-family: var(--ff-mono); font-size: .875rem; }
    .cart__layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
    @media (min-width: 60rem) { .cart__layout { grid-template-columns: minmax(0, 1fr) 22rem; } }
    .cart__layout.is-loading { opacity: .55; pointer-events: none; }
    .cart__continue { margin-top: 1.75rem; }
    .cart__checkout { margin-top: 1.25rem; }
    .cart__blocked { margin-top: 1.25rem; color: var(--danger); font-size: .875rem; }

    .cart-lines { display: grid; gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
    .cart-line {
        display: grid;
        grid-template-columns: 5rem minmax(0, 1fr) auto;
        gap: .75rem 1rem;
        align-items: center;
        padding: 1.1rem 0;
        border-bottom: 1px solid var(--line);
    }
    @media (min-width: 48rem) {
        .cart-line { grid-template-columns: 5.5rem minmax(0, 1fr) auto auto auto; gap: 1.25rem; }
    }
    .cart-line__media { display: block; border-radius: 12px; background: var(--surface-2); overflow: clip; }
    .cart-line__media img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
    .cart-line__media .product-card__placeholder { display: grid; place-items: center; aspect-ratio: 4 / 5; }
    .cart-line__body { display: grid; gap: .2rem; min-width: 0; }
    .cart-line__name { font-weight: 650; text-decoration: none; }
    .cart-line__name:hover { color: var(--orange); }
    .cart-line__variant { color: var(--muted); font-size: .85rem; }
    .cart-line__unit { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; font-family: var(--ff-mono); font-size: .85rem; }
    .cart-line__unit-price.is-sale { color: var(--orange); }
    .cart-line__unit s { color: var(--dim); }
    .cart-line__unit-note { color: var(--dim); }
    .cart-line__stock { color: var(--orange); font-size: .8125rem; }
    .cart-line__qty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; grid-column: 2; }
    .cart-line__total { font-family: var(--ff-mono); font-weight: 650; white-space: nowrap; text-align: right; }
    .cart-line__total-old { display: block; color: var(--dim); font-weight: 400; font-size: .8rem; }
    .cart-line__remove { justify-self: end; }
    @media (min-width: 48rem) {
        .cart-line__qty { grid-column: auto; }
    }
    .qty--sm .qty__btn { width: 2.25rem; }
    .qty--sm .qty__input { width: 3rem; padding-block: .45rem; }

    .cart-empty {
        display: grid;
        justify-items: center;
        gap: .75rem;
        padding: clamp(3rem, 8vw, 5rem) 1.5rem;
        border: 1px dashed var(--line-2);
        border-radius: var(--radius-lg);
        text-align: center;
    }
    .cart-empty__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--surface); color: var(--orange); }
    .cart-empty__icon svg { width: 1.5rem; height: 1.5rem; }
    .cart-empty__title { font-family: var(--ff-display); font-size: 2rem; font-weight: 400; text-transform: uppercase; }
    .cart-empty__text { max-width: 36ch; color: var(--muted); }
    .cart-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: .5rem; }

    .cart__summary, .checkout__summary-inner {
        display: grid;
        gap: 1rem;
        padding: clamp(1.25rem, 3vw, 1.75rem);
        border: 1px solid var(--line-2);
        border-radius: var(--radius-lg);
        background: var(--surface);
    }
    .cart__summary-title, .checkout__summary-title {
        font-family: var(--ff-display);
        font-size: 1.5rem;
        font-weight: 400;
        text-transform: uppercase;
    }

    /* ——— POKLADŇA ——— */
    .checkout { padding-block: calc(var(--header-h) + 1.5rem) clamp(6rem, 10vw, 8rem); }
    .checkout__header { margin-bottom: 1.75rem; }
    .checkout__title { padding-top: .1em; font-family: var(--ff-display); font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .checkout__lead { max-width: 48ch; color: var(--muted); }
    .checkout__layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
    @media (min-width: 64rem) { .checkout__layout { grid-template-columns: minmax(0, 1fr) 23rem; } }
    .checkout__main { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
    @media (min-width: 64rem) { .checkout__summary { position: sticky; top: calc(var(--header-h) + 1rem); } }
    .checkout__submit { margin-top: .25rem; }
    .checkout__submit-note { color: var(--dim); font-size: .8125rem; text-align: center; }
    .checkout__recalculate { justify-self: start; margin-top: .5rem; }
    .checkout__blocked { color: var(--danger); font-size: .9375rem; }

    .checkout-section { display: grid; gap: 1rem; }
    .checkout-section__title {
        display: flex;
        align-items: baseline;
        gap: .7rem;
        font-family: var(--ff-display);
        font-size: 1.5rem;
        font-weight: 400;
        text-transform: uppercase;
    }
    .checkout-section__title span { color: var(--orange); font-family: var(--ff-mono); font-size: .8rem; }
    .checkout-section__note { color: var(--muted); font-size: .875rem; margin-top: -.5rem; }
    .checkout-subsection { display: grid; gap: 1rem; padding-top: .5rem; }
    .checkout-subsection__title { font-size: 1rem; font-weight: 650; }
    .checkout-grid { display: grid; gap: 1rem; }
    @media (min-width: 40rem) {
        .checkout-grid { grid-template-columns: 1fr 1fr; }
        .checkout-grid--zip { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); }
    }

    /* Mobilná lišta so sumou a tlačidlom – ako na detaile produktu */
    .checkout-bar { z-index: 60; }
    @media (min-width: 64rem) { .checkout-bar { display: none; } }

    /* ——— OBJEDNÁVKA ——— */
    .order { padding-block: calc(var(--header-h) + 1.5rem) clamp(4rem, 8vw, 7rem); }
    .order__header { display: grid; justify-items: start; gap: .5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
    .order__badge { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .5rem; border-radius: 50%; background: var(--orange); color: var(--on-orange); }
    .order__badge--muted { background: var(--surface); color: var(--orange); border: 1px solid var(--line-2); }
    .order__badge svg { width: 1.5rem; height: 1.5rem; }
    .order__title { padding-top: .1em; font-family: var(--ff-display); font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 400; line-height: var(--lh-display); text-transform: uppercase; }
    .order__status { padding: .3rem .75rem; border-radius: 999px; background: var(--surface); color: var(--orange); font: 650 .75rem/1.4 var(--ff-mono); text-transform: uppercase; letter-spacing: .08em; }
    .order__next { max-width: 52ch; color: var(--muted); }
    .order__layout { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
    @media (min-width: 60rem) { .order__layout { grid-template-columns: minmax(0, 1fr) 21rem; } }
    .order__h2 { margin-bottom: .75rem; font-family: var(--ff-display); font-size: 1.35rem; font-weight: 400; text-transform: uppercase; }
    .order__items { padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
    .order__meta { display: grid; gap: 1rem; }
    .order-card { padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
    .order-card__value { font-weight: 650; }
    .order-card__note { color: var(--muted); font-size: .875rem; }
    .order-card__address { margin-top: .5rem; font-style: normal; color: var(--muted); font-size: .9375rem; line-height: 1.5; }
    .order__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }

    .order-pay {
        display: grid;
        gap: 1rem;
        padding: clamp(1.25rem, 3vw, 2rem);
        margin-bottom: clamp(2rem, 4vw, 3rem);
        border: 1px solid var(--orange);
        border-radius: var(--radius-lg);
        background: rgb(237 108 5 / .07);
    }
    .order-pay__title { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 400; text-transform: uppercase; }
    .order-pay__lead { max-width: 56ch; color: var(--muted); }
    .order-pay__body { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
    @media (min-width: 48rem) { .order-pay__body { grid-template-columns: minmax(0, 1fr) auto; } }
    .order-pay__rows dd { font-weight: 600; }
    .order-pay__qr { display: grid; justify-items: center; gap: .6rem; }
    .order-pay__qr img { border-radius: 12px; background: #fff; padding: .5rem; }
    .order-pay__qr figcaption { max-width: 22ch; color: var(--dim); font-size: .8125rem; text-align: center; }

    .order--lookup { max-width: 34rem; }
    .order-lookup { display: grid; gap: 1rem; }
    .order-lookup__hint { margin-top: 1rem; color: var(--dim); font-size: .875rem; }
}

/* akcie a zákaznícky účet */
@layer components {
    .btn--danger-soft { border: 1px solid rgb(255 107 97 / .4); background: rgb(255 107 97 / .1); color: #ffb3ad; }
    .btn--danger-soft:hover { background: rgb(255 107 97 / .18); }
}

@layer sections {
    .section__title { margin: clamp(2rem, 4vw, 3rem) 0 1rem; font-family: var(--ff-display); font-size: 1.35rem; font-weight: 400; text-transform: uppercase; }

    .auth-form { max-width: 28rem; }
    .auth-form__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.25rem; color: var(--muted); font-size: .9375rem; }
    .auth-form__links a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: .2em; }

    .account-nav { margin-top: clamp(1.25rem, 3vw, 1.75rem); }
    .account-nav__list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
    .account-nav__link { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .9375rem; text-decoration: none; transition: border-color .2s, background-color .2s; }
    .account-nav__link svg { width: 1rem; height: 1rem; color: var(--orange); }
    .account-nav__link:hover { border-color: var(--orange); }
    .account-nav__link.is-active { border-color: var(--orange); background: rgb(237 108 5 / .12); }
    .account-nav__link--muted { color: var(--muted); }
    .account-nav__link--muted svg { color: currentColor; }
    .page-account [id] { scroll-margin-top: 6rem; }

    .registration-list { display: grid; gap: .6rem; }
    .registration-list__item a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .75rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); }
    .registration-list__item a small { color: var(--muted); }
    .registration-list__item--muted a { opacity: .7; }

    .event-registration { display: grid; gap: .75rem; max-width: 28rem; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
    .event-registration__occupancy { color: var(--muted); font-size: .9375rem; }
    .event-registration__status { font-weight: 600; }

    .danger-zone { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 1.75rem); border: 1px solid rgb(255 107 97 / .35); border-radius: var(--radius-lg); }
    .danger-zone__title { font-family: var(--ff-display); font-size: 1.1rem; font-weight: 400; text-transform: uppercase; }

    .site-header__account span { display: none; }
    @media (min-width: 60rem) { .site-header__account span { display: inline; } }
}

/* akcie: chat (event/chat.html.twig, assets/controllers/event_chat_controller.js) */
@layer sections {
    .chat { position: relative; display: grid; gap: 1rem; max-width: 46rem; }

    .chat__pinned { display: grid; gap: .6rem; padding: 1rem; border: 1px solid rgb(237 108 5 / .45); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgb(237 108 5 / .12), var(--surface) 60%); }
    .chat__pinned-title { display: flex; align-items: center; gap: .4rem; font-family: var(--ff-mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
    .chat__pinned-title svg { width: 1rem; height: 1rem; }
    .chat__pinned-list { display: grid; gap: .4rem; }

    /* Pripnutý oznam: iba text (najviac 2 riadky), odkaz na plnú správu s reakciami v zozname */
    .chat-pin { display: flex; align-items: flex-start; gap: .5rem; padding: .55rem .75rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--bg-2); color: var(--text); line-height: 1.45; text-decoration: none; transition: border-color .15s; }
    .chat-pin:hover, .chat-pin:focus-visible { border-color: rgb(237 108 5 / .45); }
    .chat-pin__icon { flex: none; width: .95rem; height: .95rem; margin-top: .2rem; color: var(--orange); }
    .chat-pin__body { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: pre-line; overflow-wrap: anywhere; }

    .chat__log {
        display: flex;
        flex-direction: column;
        gap: .75rem;
        max-height: min(68vh, 44rem);
        padding: .25rem .25rem .25rem 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .chat__log:focus-visible { outline-offset: 4px; }
    .chat__empty { margin: auto 0; padding: 2rem 1rem; color: var(--muted); text-align: center; }

    .chat__more, .chat__back { font-size: .9375rem; }
    .chat__more a, .chat__back a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text); text-decoration-color: var(--orange); text-underline-offset: .2em; }
    .chat__more svg, .chat__back svg { width: 1rem; height: 1rem; }
    .chat__back { margin-top: 1.5rem; }

    .chat__new { position: sticky; bottom: 1rem; justify-self: center; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .45); }
    .chat__status { padding: .75rem 1rem; border: 1px solid rgb(255 107 97 / .4); border-radius: var(--radius); background: rgb(255 107 97 / .08); color: #ffb3ad; font-size: .9375rem; }
    .chat__status a { color: var(--text); }

    .chat-message { display: grid; gap: .45rem; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
    .chat-message.is-pinned { border-color: rgb(237 108 5 / .45); }
    .chat-message:target { outline: 2px solid var(--orange); outline-offset: 2px; }
    .chat-message__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; font-size: .8125rem; color: var(--muted); }
    .chat-message__author { color: var(--text); font-size: .9375rem; }
    .chat-message__badge { padding: .1rem .45rem; border-radius: 999px; background: rgb(237 108 5 / .16); color: var(--orange); font-family: var(--ff-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; }
    .chat-message__flag { display: inline-flex; align-items: center; gap: .25rem; font-style: italic; }
    .chat-message__flag svg { width: .85rem; height: .85rem; }
    .chat-message__flag--pinned { color: var(--orange); font-style: normal; }
    .chat-message__body { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; }

    .chat-message__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

    .chat-message__report-button {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .2rem 0;
        border: none;
        background: none;
        color: var(--muted);
        font: 600 .8125rem/1 var(--ff-body);
        cursor: pointer;
    }
    .chat-message__report-button:hover { color: var(--text); }

    .chat-message__tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; margin-left: auto; }
    /* „Odpovedať“ vyzerá ako tlačidlá reakcií, aby bolo zrejmé, že sa naň dá kliknúť; počet = odpovede vo vlákne */
    .chat-message__reply { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .2rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--text); font: 600 .8125rem/1 var(--ff-body); text-decoration: none; transition: border-color .15s, transform .15s; }
    .chat-message__reply:hover { border-color: var(--orange); }
    .chat-message__reply:active { transform: scale(.96); }
    .chat-message__reply svg { width: 1rem; height: 1rem; color: var(--orange); }
    .chat-message__reply-count { font-family: var(--ff-mono); color: var(--muted); }
    .chat-message__reply-count:empty { display: none; }

    /* Vlákna: koreň a pod ním odpovede (jedna úroveň) */
    .chat-thread { display: grid; gap: .5rem; }
    .chat-thread__replies { display: grid; gap: .5rem; margin-left: clamp(.6rem, 3vw, 1.5rem); padding-left: clamp(.6rem, 2vw, 1rem); border-left: 2px solid var(--line); }
    .chat-thread__replies .chat-message { padding: .7rem .9rem; }
    .chat-thread__more { justify-self: start; padding: .15rem 0; border: 0; background: none; color: var(--muted); font: 600 .8125rem/1.3 var(--ff-body); cursor: pointer; }
    .chat-thread__more:hover { color: var(--text); }

    .chat__replying { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .6rem; color: var(--muted); font-size: .875rem; }
    .chat__replying svg { width: .9rem; height: .9rem; color: var(--orange); }
    .chat__replying strong { color: var(--text); }
    .chat__replying a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: .2em; }
    .chat-message__report-button svg { width: .85rem; height: .85rem; }

    .chat__compose { margin-top: .25rem; }
    .chat__compose .ff__input { min-height: 6rem; }
    .chat__compose > .btn { margin-top: .6rem; }

    .chat-reactions { display: flex; flex-wrap: wrap; gap: .35rem; }
    .chat-reaction {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        min-width: 2.75rem;
        min-height: 2.25rem;
        padding: .2rem .6rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: var(--bg-2);
        color: var(--text);
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition: border-color .15s, background-color .15s, transform .15s;
    }
    .chat-reaction:hover { border-color: var(--line-2); }
    .chat-reaction:active { transform: scale(.94); }
    .chat-reaction[aria-pressed="true"] { border-color: var(--orange); background: rgb(237 108 5 / .16); }
    .chat-reaction__count { font-family: var(--ff-mono); font-size: .8125rem; color: var(--muted); }
    .chat-reaction__count:empty { display: none; }
    .chat-reaction[aria-pressed="true"] .chat-reaction__count { color: var(--text); }

    .chat-unread { display: inline-block; margin-left: .35rem; padding: .15rem .5rem; border-radius: 999px; background: var(--orange); color: var(--on-orange); font-size: .75rem; font-weight: 700; }

    .event-registration__chat { justify-self: start; }
    .registration-list__item { display: grid; gap: .35rem; }
    .registration-list__chat { display: inline-flex; align-items: center; gap: .35rem; justify-self: start; padding-left: 1.1rem; color: var(--text); font-size: .875rem; text-decoration-color: var(--orange); text-underline-offset: .2em; }
    .registration-list__chat svg { width: 1rem; height: 1rem; color: var(--orange); }
}

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