/* ═══════════════════════════════════════════════════════════════════════════════════════
   DESKTOP v2 (8. 10. 2026): okna uprostřed, animace oken a posouvání. JEN ≥ 900 px, mobil beze změny.
   Načítá se jako poslední styl (po glass.css) → „html body …“ a !important přebíjí starší vrstvy.
   1. Na co se u nás dá spolehnout: bez rámečku
   2. Překryv pod okny: ztmavení + rozmazání
   3. Detail produktu: široké okno, fotka vlevo, text vpravo, cena a tlačítko vždy vidět
   4. Košík: okno uprostřed, položky vlevo (bez malého posuvníku), shrnutí vpravo
   5. Podstránky, recenze, objednávky (pravý panel): plynulé vyjetí, obsah se usadí
   6. Doručovací údaje: obsah se usadí
   7. Animace podle posouvání (karty, recenze, O nás, spolehnutí, patička, úvodní fotka)
   8. Najetí myší
   ═══════════════════════════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  :root {
    --dk-out: cubic-bezier(.16, 1, .3, 1);     /* otevření: rychlý start, měkký dojezd */
    --dk-in: cubic-bezier(.55, 0, .75, .25);   /* zavření: rozjezd */
    --dk-win-w: min(1060px, calc(100vw - 64px));
    --dk-win-h: min(720px, calc(100vh - 56px));
  }

  /* ── 0. Otevřené okno zamkne stránku a posuvník zmizí → desk2.js vyrovná jeho šířku (inline odsazení stránky a lišty),
     ať web pod oknem neposkočí. Okno a ztmavení pak sahají přes celou šířku. ── */

  /* ── Úvod (8. 10.): široká fotka bez zapečeného textu, celá vidět na první obrazovce (statická), text vlevo jako HTML.
     Fotka = schválená úvodní fotka (správné logo na vialkách) rozšířená doleva; vialky leží mezi 36 a 98 % šířky
     → text se drží v levé třetině. Mobil má dál svůj obrázek s textem. ── */
  html body .hero-photo {
    aspect-ratio: 2560 / 1086; height: auto; min-height: 400px; max-height: calc(100vh - 64px - 44px);
    background: #0d1724 url('assets/4330b1a49b.jpg') 100% 60% / cover no-repeat;   /* r1: schválená fotka rozšířená doleva; ořez jen zleva (vialky vpravo) */
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 0 0 max(40px, 4.6vw); overflow: hidden;
  }
  html body .hero-photo::before {   /* ztmavení zleva (čitelný text), vialky vpravo zůstanou jasné */
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(8,14,24,.80) 0%, rgba(8,14,24,.66) 20%, rgba(8,14,24,.34) 34%, rgba(8,14,24,.06) 50%, rgba(8,14,24,0) 60%),
      linear-gradient(0deg, rgba(8,14,24,.22), rgba(8,14,24,.08) 40%, rgba(8,14,24,.14));
  }
  html body .hero-photo > * { position: relative; z-index: 2; }
  html body .hero-photo .hero-photo-inner {
    position: relative !important; display: block; width: min(560px, 31vw); height: auto; max-width: none;
    margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; text-align: left;
  }
  html body .hero-photo .hero-news {   /* na tmavé části fotky tmavé sklo s bílým textem (světlé sklo tu šedlo) */
    position: relative; left: auto; top: auto; transform: none; margin: 0 0 26px; z-index: 2;
    font-size: 13.5px; font-weight: 600; padding: 9px 17px 9px 14px; color: #fff;
    background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.26) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 24px rgba(0,0,0,.18) !important;
    transition: background .2s ease, border-color .2s ease;
  }
  html body .hero-photo .hero-news:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45) !important; }
  html body .hero-photo .hero-eyebrow {
    display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0; border-radius: 0;
    margin: 0 0 18px; color: #CFF3E6; font-size: 12px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  }
  html body .hero-photo .hero-eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; margin: 0; opacity: 1; background: linear-gradient(90deg, #B8EED9, #A6E0F8); }
  html body .hero-photo .hero-eyebrow::after { content: none; }
  html body .hero-photo .hero-h1 {
    font-size: clamp(36px, 3.9vw, 78px); line-height: .98; letter-spacing: -.035em; max-width: none; margin: 0;
    text-shadow: none; text-wrap: nowrap;
  }
  html body .hero-photo .hh-white { color: #fff; }
  html body .hero-photo .hh-lime {
    background: linear-gradient(90deg, #B8EED9 0%, #EAF7F5 48%, #A6E0F8 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  html body .hero-photo .hero-photo-sub {
    margin: 22px 0 0; max-width: 430px; font-size: clamp(15px, 1.15vw, 18.5px); line-height: 1.5; font-weight: 500; text-wrap: balance;
    color: rgba(255,255,255,.86); text-shadow: 0 1px 12px rgba(0,0,0,.35); opacity: 1;
  }
  html body .hero-photo .hero-photo-sub .hps-2 { display: block; white-space: nowrap; }   /* 8.10.: druhá věta vždy na vlastním řádku (mobil beze změny) */
  html body .hero-photo .hero-badges { display: none; }   /* 8.10.: štítky „99 % čistota / Rychlá doprava“ na počítači pryč (mobil je má dál) */
  html body .hero-photo .hero-badge {
    font-size: 13px; padding: 8px 15px; background: rgba(10,16,24,.42); border: 1px solid rgba(255,255,255,.22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  html body .hero-photo .lab-hero-cta {
    display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 30px 12px 0 0;
    padding: 16px 28px; font-size: 15.5px; font-weight: 700; border-radius: 14px; color: #0b0c0d;
    background: linear-gradient(100deg, #B8EED9 0%, #E3F8F0 22%, #FFFFFF 46%, #FFFFFF 56%, #CDF1F2 80%, #A6E0F8 100%);
    box-shadow: inset 0 1px 1px #fff, 0 10px 30px rgba(120, 220, 210, .22), 0 4px 14px rgba(0,0,0,.18) !important;
    transition: transform .25s var(--dk-out), box-shadow .25s ease;
  }
  html body .hero-photo .lab-hero-cta:hover { transform: translateY(-2px); }
  html body .hero-photo .lab-hero-cta2 {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding: 15px 22px; border-radius: 14px;
    color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,.38); background: rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s ease, border-color .2s ease;
  }
  html body .hero-photo .lab-hero-cta2:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
  /* text naběhne po načtení (jednou); fotka stojí */
  html body .hero-photo > .hero-news, html body .hero-photo .hero-photo-inner > * { animation: dkUp .9s var(--dk-out) both; }
  html body .hero-photo > .hero-news { animation-delay: .05s; }
  html body .hero-photo .hero-eyebrow { animation-delay: .12s; }
  html body .hero-photo .hero-h1 { animation-delay: .2s; }
  html body .hero-photo .hero-photo-sub { animation-delay: .3s; }
  html body .hero-photo .hero-badges { animation-delay: .38s; }
  html body .hero-photo .lab-hero-cta, html body .hero-photo .lab-hero-cta2 { animation-delay: .46s; }
  @media (max-width: 1100px) {
    html body .hero-photo .hero-badges { display: none; }
    html body .hero-photo .hero-news { margin-bottom: 18px; font-size: 12.5px; }
    html body .hero-photo .hero-photo-sub { margin-top: 16px; }
    html body .hero-photo .lab-hero-cta { margin-top: 22px; padding: 13px 20px; font-size: 14px; }
    html body .hero-photo .lab-hero-cta2 { display: none; }
  }

  /* ── 1. Na co se u nás dá spolehnout: bez rámečku (nadpis a karty zůstávají) ── */
  html body .lab-band {
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }

  /* ── 2. Překryv pod okny: jemné ztmavení a rozmazání stránky ── */
  html body :is(.modal-overlay, .cart-overlay, .contact-overlay) {
    background: rgba(18, 20, 24, .30) !important;
    backdrop-filter: blur(7px) saturate(115%); -webkit-backdrop-filter: blur(7px) saturate(115%);
    transition: opacity .45s ease;
  }

  /* ── 3. Detail produktu ─────────────────────────────────────────────────────────────── */
  html body #product-modal {
    top: 50%; left: 50%; right: auto; bottom: auto;
    width: var(--dk-win-w); height: var(--dk-win-h); max-width: none; max-height: none;
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); grid-template-rows: minmax(0, 1fr);
    padding: 0; overflow: hidden !important; overflow: clip !important; border-radius: 28px;   /* clip = okno samo nejde posunout (jen sloupec s textem) */
    background: rgba(250, 250, 249, .985) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 0 50px 120px rgba(16, 18, 24, .30), 0 10px 30px rgba(16, 18, 24, .10), inset 0 1px 0 #fff !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, -50%) translateY(28px) scale(.965);
    transition: opacity .22s ease, transform .3s var(--dk-in), visibility 0s linear .3s;
  }
  html body #product-modal.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: opacity .32s ease, transform .75s var(--dk-out), visibility 0s;
  }
  /* levý sloupec: fotka přes celou výšku okna */
  html body #product-modal .modal-hero {
    grid-column: 1; grid-row: 1; height: 100%; min-height: 0; overflow: hidden;
    background: #E9ECEE !important; border-radius: 0;
  }
  html body #product-modal .modal-hero img {
    width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 42%;
    transform-origin: 50% 55%;
  }
  html body #product-modal .modal-cat { top: 22px; left: 22px; font-size: 11px; padding: 7px 13px; }
  /* pravý sloupec: text se posouvá, cena a tlačítko drží dole */
  html body #product-modal .modal-body {
    grid-column: 2; grid-row: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; padding: 44px 44px 0;
    scrollbar-width: thin; scrollbar-color: rgba(26, 27, 29, .18) transparent;
  }
  html body #product-modal .modal-body > * { flex-shrink: 0; }   /* jinak sloupec smáčkne poslední kartu (COA) a ta se schová za lištu s cenou */
  html body #product-modal .modal-body::-webkit-scrollbar { width: 8px; }
  html body #product-modal .modal-body::-webkit-scrollbar-thumb { background: rgba(26, 27, 29, .16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
  html body #product-modal .modal-title { font-size: 40px; line-height: 1; letter-spacing: -.025em; padding-right: 44px; }
  html body #product-modal .modal-title .mt-v { font-size: 20px; }
  html body #product-modal .modal-desc { font-size: 14.5px; }
  html body #product-modal .modal-footer {
    position: sticky; bottom: 0; z-index: 3;
    margin: auto -44px 0; padding: 22px 44px 26px; border-top: 0;
    background: linear-gradient(to bottom, rgba(250, 250, 249, 0), rgba(250, 250, 249, .97) 26%);
  }
  html body #product-modal .modal-footer::before {
    content: ""; position: absolute; left: 44px; right: 44px; top: 18px; height: 1px; background: rgba(26, 27, 29, .08);
  }
  html body #product-modal .modal-footer .mp-kc { font-size: 26px; letter-spacing: -.01em; }
  html body #product-modal .modal-footer .btn-add-modal { padding: 16px 30px; font-size: 15.5px; min-width: 220px; }
  /* zavírací křížek: světlé sklo vpravo nahoře */
  html body #product-modal .modal-close {
    top: 18px; right: 18px; width: 40px; height: 40px; color: #1a1b1d;
    background: rgba(255, 255, 255, .92); border: 1px solid rgba(26, 27, 29, .10);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .10); backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: background .15s ease, transform .2s ease;
  }
  html body #product-modal .modal-close:hover { background: #fff; transform: rotate(90deg); }
  /* obsah se při otevření usadí: fotka se doostří z přiblížení, text najíždí po řádcích */
  html body #product-modal.open .modal-hero img { animation: dkImg 1.15s var(--dk-out) both; }
  html body #product-modal.open .modal-cat { animation: dkFade .6s ease .25s both; }
  html body #product-modal.open .modal-body > * { animation: dkUp .7s var(--dk-out) both; }
  html body #product-modal.open .modal-body > :nth-child(1) { animation-delay: .1s; }
  html body #product-modal.open .modal-body > :nth-child(2) { animation-delay: .16s; }
  html body #product-modal.open .modal-body > :nth-child(3) { animation-delay: .22s; }
  html body #product-modal.open .modal-body > :nth-child(n+4) { animation-delay: .28s; }
  html body #product-modal.open .modal-body > .modal-footer { animation-delay: .3s; }
  /* fotka letí z karty (desk2.js): skutečná fotka v okně je do doletu schovaná, po doletu už bez vlastní animace */
  html body #product-modal.dk-flip .modal-hero img { opacity: 0; animation: none; }
  html body #product-modal.dk-flown .modal-hero img { animation: none; }

  /* ── 4. Košík: okno uprostřed ─────────────────────────────────────────────────────── */
  html body #cart-panel {
    top: 50%; left: 50%; right: auto; bottom: auto;
    width: min(1060px, calc(100vw - 64px)); height: auto; max-height: var(--dk-win-h);
    padding: 30px 34px 32px; border-radius: 28px;
    background: rgba(248, 248, 246, .985) !important;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    box-shadow: 0 50px 120px rgba(16, 18, 24, .30), 0 10px 30px rgba(16, 18, 24, .10), inset 0 1px 0 #fff !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, -50%) translateY(28px) scale(.965);
    transition: opacity .22s ease, transform .3s var(--dk-in), visibility 0s linear .3s;
  }
  html body #cart-panel.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: opacity .32s ease, transform .75s var(--dk-out), visibility 0s;
  }
  html body #cart-panel .cart-header { margin: 0 0 20px; }
  html body #cart-panel .cart-header h2 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
  html body #cart-panel .cart-close { width: 40px; height: 40px; transition: transform .2s ease, background .15s ease; }
  html body #cart-panel .cart-close:hover { transform: rotate(90deg); background: #fff; }
  /* dva sloupce: položky (+ pod nimi ujištění) | shrnutí */
  html body #cart-panel .cart-scroll {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto 1fr;
    column-gap: 28px; align-items: start; min-height: 0; overflow: visible;
  }
  html body #cart-panel .cart-items {
    grid-column: 1; grid-row: 1;
    max-height: calc(var(--dk-win-h) - 210px); overflow-y: auto; padding: 6px 20px;
    border-radius: 20px; scrollbar-width: thin;
  }
  html body #cart-panel .cart-item { padding: 14px 0; gap: 14px; }
  html body #cart-panel .cart-item-img { width: 60px; height: 60px; border-radius: 14px; }
  html body #cart-panel .cart-item-left { flex: 0 0 236px; gap: 14px; }
  html body #cart-panel .cart-item-controls { width: 96px; }
  html body #cart-panel .qty-btn { width: 30px; height: 30px; }
  html body #cart-panel .cart-item-name { font-size: 15px; }
  html body #cart-panel .cart-item-variant { font-size: 12.5px; }
  html body #cart-panel .cart-footer { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; gap: 10px; display: flex; flex-direction: column; }
  /* prázdný košík: jeden sloupec */
  html body #cart-panel:has(.cart-empty) { width: 520px; }
  html body #cart-panel .cart-scroll:has(.cart-empty) { grid-template-columns: 1fr; }
  html body #cart-panel .cart-scroll:has(.cart-empty) .cart-footer { display: none; }
  html body #cart-panel .cart-empty { padding: 48px 0; font-size: 16px; }
  /* obsah se usadí */
  html body #cart-panel.open .cart-header { animation: dkUp .6s var(--dk-out) .08s both; }
  html body #cart-panel.open .cart-items { animation: dkUp .7s var(--dk-out) .14s both; }
  html body #cart-panel.open .cart-footer > * { animation: dkUp .7s var(--dk-out) both; }
  html body #cart-panel.open .cart-footer > :nth-child(1) { animation-delay: .18s; }
  html body #cart-panel.open .cart-footer > :nth-child(2) { animation-delay: .22s; }
  html body #cart-panel.open .cart-footer > :nth-child(3) { animation-delay: .26s; }
  html body #cart-panel.open .cart-footer > :nth-child(n+4) { animation-delay: .3s; }

  /* ── 5. Pravý panel (podstránky, recenze, objednávky): plynulé vyjetí a usazení obsahu ── */
  html body :is(#page-panel, #reviews-panel, #reviewform-panel, #orders-panel) {
    transition: transform .34s var(--dk-in), box-shadow .3s ease;
  }
  html body :is(#page-panel, #reviews-panel, #reviewform-panel, #orders-panel).open {
    transition: transform .8s var(--dk-out), box-shadow .3s ease;
  }
  html body #page-panel #page-frame { opacity: 0; transition: opacity .3s ease; }
  html body #page-panel.loaded #page-frame { opacity: 1; }
  html body #page-panel.open.loaded #page-frame { animation: dkUp .7s var(--dk-out) .05s both; }
  html body :is(#reviews-panel, #reviewform-panel, #orders-panel).open > :not(.cart-handle) { animation: dkUp .65s var(--dk-out) .1s both; }
  html body :is(#reviews-panel, #reviewform-panel, #orders-panel).open > :nth-child(3) { animation-delay: .16s; }
  html body :is(#reviews-panel, #reviewform-panel, #orders-panel).open > :nth-child(n+4) { animation-delay: .22s; }

  /* ── 6. Doručovací údaje (okno uprostřed): obsah se usadí ── */
  html body #contact-panel.open > * { animation: dkUp .6s var(--dk-out) .1s both; }

  /* ── Katalog: dlaždice „Množstevní sleva“ v neúplném posledním řádku (vkládá desk2.js) ── */
  html body #product-grid > .dk-tile {
    display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 34px 32px; border-radius: 18px;
    background: linear-gradient(140deg, rgba(184,238,217,.55) 0%, rgba(255,255,255,.75) 48%, rgba(166,224,248,.55) 100%);
    border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 1px #fff, 0 10px 30px rgba(20,24,30,.06);
    color: var(--text);
  }
  html body #product-grid > .dk-tile.ap-pre { opacity: 1; transform: none; }
  html body .dk-tile-eb { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  html body .dk-tile-h { font-size: 30px; line-height: 1.08; font-weight: 700; letter-spacing: -.02em; }
  html body .dk-tile-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html body .dk-tile-steps span {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 12px;
    background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); font-size: 15px; font-weight: 700; color: #1E493F;
  }
  html body .dk-tile-steps span b { font-weight: 600; color: var(--muted); font-size: 13px; }
  html body .dk-tile-steps span.max { grid-column: 1 / -1; background: rgba(26,27,29,.92); color: #EAF7F5; border-color: transparent; }
  html body .dk-tile-steps span.max b { color: rgba(234,247,245,.7); }
  html body .dk-tile-p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

  /* ── 8. Najetí myší ─────────────────────────────────────────────────────────────────── */
  html body .product-card .card-img-wrap { overflow: hidden; }
  html body .product-card .card-img-wrap img { transition: transform .9s var(--dk-out); }
  html body .product-card:hover .card-img-wrap img { transform: scale(1.05); }
  html body .product-card .btn-add { transition: transform .25s var(--dk-out), box-shadow .2s ease; }
  html body .product-card .btn-add:hover { transform: scale(1.1); }
  html body .product-card .btn-add:active { transform: scale(.94); }
  html body .lab-nav a, html body .lab-nav button { position: relative; }
  html body .lab-nav a::after, html body .lab-nav button::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, #B8EED9, #A6E0F8); transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--dk-out);
  }
  html body .lab-nav a:hover::after, html body .lab-nav button:hover::after { transform: scaleX(1); }
}

/* Katalog na mobilu (8. 10.): dlaždice „Množstevní sleva“ ve volném místě vedle posledního produktu (2 sloupce, vkládá desk2.js) */
@media (max-width: 899px) {
  html body #product-grid > .dk-tile {
    display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 14px 12px; border-radius: var(--radius);
    background: linear-gradient(140deg, rgba(184,238,217,.55) 0%, rgba(255,255,255,.75) 48%, rgba(166,224,248,.55) 100%);
    border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 1px #fff, 0 6px 18px rgba(20,24,30,.06);
    color: var(--text);
  }
  html body .dk-tile-eb { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  html body .dk-tile-h { font-size: 16px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; }
  html body .dk-tile-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  html body .dk-tile-steps span {
    display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 6px 7px; border-radius: 9px;
    background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.95); font-size: 11.5px; font-weight: 700; color: #1E493F; white-space: nowrap;
  }
  html body .dk-tile-steps span b { font-weight: 600; color: var(--muted); font-size: 10px; }
  html body .dk-tile-steps span.max { grid-column: 1 / -1; background: rgba(26,27,29,.92); color: #EAF7F5; border-color: transparent; }
  html body .dk-tile-steps span.max b { color: rgba(234,247,245,.7); }
  html body .dk-tile-p { font-size: 10.5px; line-height: 1.4; color: var(--muted); }
}
@media (max-width: 340px) {   /* nejužší telefony: čipy „2 ks −3 %“ se jinak nevejdou */
  html body .dk-tile-steps span { padding: 6px 5px; font-size: 10.5px; gap: 3px; }
  html body .dk-tile-steps span b { font-size: 9.5px; }
}
@keyframes dkUp { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes dkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dkImg { from { scale: 1.1; filter: blur(6px); } to { scale: 1; filter: blur(0); } }

/* ── 7. Animace podle posouvání (desktop). Prvek se zjevuje podle posunu stránky, běží mimo hlavní vlákno.
   Prohlížeč bez podpory (starší Safari, Firefox) = dosavadní nájezd z reveal.js. ── */
@media (min-width: 900px) {
  @supports (animation-timeline: view()) {
    /* běžný nájezd (reveal.js) vypnout, ať se nepere se scroll animací; karty „Na co se spolehnout“ mají vlastní kroky.
       Karty katalogu zvlášť: posun po najetí myší (transform) jim zůstává, scroll animace jede přes translate/scale. */
    html body .ap-pre:not(.product-card) { opacity: 1; transform: none !important; transition: none !important; }
    html body #product-grid > .product-card.ap-pre { opacity: 1; transform: none; transition: transform .35s var(--dk-out), box-shadow .35s ease, border-color .35s ease; }
    html body #product-grid > .product-card.ap-pre:hover { transform: translateY(-6px); }
    html body .lab-band-item .lab-band-ic, html body .lab-band-item h3, html body .lab-band-item p, html body .lab-band-more { opacity: 1 !important; transform: none !important; transition: none !important; }
    html body .lab-band-grid::before { transform: scaleX(1) !important; }
    html body .lab-band-item + .lab-band-item::before { transform: scaleY(1) !important; }


    /* nadpisy sekcí: vyjedou z linky */
    html body #lab-katalog, html body .rv-showcase-head, html body .lab-band-head, html body .lab-about-text > .lab-eyebrow, html body .lab-about-text > h2 {
      animation: dkWipe linear both; animation-timeline: view(); animation-range: entry 0% cover 28%;
    }
    /* katalog: karty najíždí ve vlnách po řádcích, fotka se v nich doostří */
    html body #product-grid > .product-card { animation: dkCard linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
    html body #product-grid > .product-card:nth-child(3n+2) { animation-range: entry 6% cover 38%; }
    html body #product-grid > .product-card:nth-child(3n) { animation-range: entry 12% cover 42%; }
    html body #product-grid > .dk-tile { animation: dkCard linear both; animation-timeline: view(); animation-range: entry 12% cover 42%; }
    html body #product-grid > .product-card .card-img-wrap img { animation: dkCardImg linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    html body #product-grid > .product-card.ca-now, html body #product-grid > .product-card.ca-now .card-img-wrap img { animation: none !important; }
    /* recenze: pás přiklouže zprava */
    html body .rv-showcase { overflow-x: clip; }
    html body .rv-showcase-wrap { animation: dkGlide linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    html body .rv-showcase-all { animation: dkSoft linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    /* O nás: text najede, fotka přijede zprava (bez zvětšování a bez ořezu karty, takže stín zůstane celý) */
    html body .lab-about-pas { overflow-x: clip; }   /* obal přes celou šířku: nájezd zprava nesmí udělat stránku posuvnou do strany */
    html body .lab-about-text > p, html body .lab-about-blk { animation: dkSoft linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    html body .lab-about-car { animation: dkFromRight linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
    /* Na co se u nás dá spolehnout: karty vyjíždí jedna po druhé, ikona se vytočí na místo */
    html body .lab-band-grid > a { animation: dkCard linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    html body .lab-band-grid > a:nth-child(2) { animation-range: entry 5% cover 34%; }
    html body .lab-band-grid > a:nth-child(3) { animation-range: entry 10% cover 38%; }
    html body .lab-band-grid > a:nth-child(4) { animation-range: entry 15% cover 42%; }
    html body .lab-band-grid > a .lab-band-ic { animation: dkSpin linear both; animation-timeline: view(); animation-range: entry 25% cover 40%; }
    /* patička: sloupce najedou (dokončí se, než element celý vjede — patička je na konci stránky, dál se posunout nedá) */
    html body .lab-footer-in > * { animation: dkSoft linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes dkWipe { 0% { clip-path: inset(0 -6% 100% -6%); translate: 0 28px; } 100% { clip-path: inset(-12% -6% -18% -6%); translate: 0 0; } }
@keyframes dkCard { 0% { opacity: 0; translate: 0 70px; scale: .96; } 55% { opacity: 1; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes dkCardImg { from { scale: 1.12; } to { scale: 1; } }
@keyframes dkSoft { 0% { opacity: 0; translate: 0 40px; } 60% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@keyframes dkGlide { 0% { opacity: 0; translate: 120px 0; } 55% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@keyframes dkFromRight { 0% { opacity: 0; translate: 200px 0; animation-timing-function: cubic-bezier(.35, .45, .45, 1); } 28% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@keyframes dkSpin { 0% { scale: .45; rotate: -80deg; opacity: 0; } 100% { scale: 1; rotate: 0deg; opacity: 1; } }

/* Omezení pohybu v systému = bez animací a přechodů oken (okna se jen ukážou) */
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  html body :is(#product-modal, #cart-panel, #page-panel, #reviews-panel, #reviewform-panel, #orders-panel, .contact-panel) { transition: none !important; }
  html body :is(#product-modal, #cart-panel, #page-panel, #reviews-panel, #reviewform-panel, #orders-panel, .contact-panel) *,
  html body :is(#lab-katalog, .rv-showcase-head, .rv-showcase-wrap, .rv-showcase-all, .lab-band-head, .lab-about-car, .lab-footer-in > *),
  html body :is(#product-grid > .product-card, #product-grid .card-img-wrap img, .lab-about-text > *, .lab-about-blk, .lab-about-car .car-slides img, .lab-band-grid > a, .lab-band-grid > a .lab-band-ic),
  html body :is(#product-grid > .dk-tile, .hero-photo > .hero-news, .hero-photo .hero-photo-inner > *) {
    animation: none !important;
  }
  html body .product-card:hover .card-img-wrap img { transform: none; }
}

/* Mobil (12.10.2026): fotka „O nás“ přijede zprava jako na počítači (kratší dráha). Ořez do stran dělá obal .lab-about-pas.
   Prohlížeč bez scroll animací (starší iOS) = dosavadní nájezd zespodu z reveal.js. */
@media (max-width: 899px) {
  @supports (animation-timeline: view()) {
    html body .lab-about-pas { overflow-x: clip; }
    html body .lab-about > .lab-about-car.ap-pre, html body .lab-about > .lab-about-car.ap-pre.ap-in { opacity: 1; transform: none; transition: none; }
    html body .lab-about-car { animation: dkFromRightM linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes dkFromRightM { 0% { opacity: 0; translate: 140px 0; animation-timing-function: cubic-bezier(.35, .45, .45, 1); } 28% { opacity: 1; } 100% { opacity: 1; translate: 0 0; } }
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { html body .lab-about-car { animation: none !important; } }