/* ==========================================================================
   SolidusTech katalog — vizuální jazyk převzatý z firemního webu
   solidustech.cz (/website/css/styles.css). Katalog běží na subdoméně,
   takže musí být na první pohled poznat, že jde o tentýž dům:
     · barvy z korporátní palety (--hlavni_barva #084266, --druha_barva #3D73FA)
       plus modrá a šedá přímo z logotypu (#2b6ab3 / #757474),
     · pilulková tlačítka, která se při najetí „zalomí" z r=39px na r=13px,
     · karty s modrou deskou, která vyjede o 7 px zpod obsahu,
     · motiv plošných spojů (tahy + prokovy) v pozadí sekcí.
   ========================================================================== */
:root {
    /* --- Korporátní paleta (1:1 s hlavním webem) --- */
    --brand: #2b6ab3;          /* modrá z logotypu */
    --brand-grey: #757474;     /* šedá z logotypu */
    --deep: #084266;           /* --hlavni_barva */
    --primary: #3D73FA;        /* --druha_barva, akční modrá */
    --primary-dark: #0061C7;
    --navy: #00024C;           /* konec patičkového gradientu */
    --primary-soft: #EAF0FE;
    --teal: #084266;           /* zachováno kvůli starším pravidlům */
    --accent: #3D73FA;
    --accent-ink: #ffffff;

    --bg: #ffffff;
    --bg-alt: #F4F4F4;         /* main.bg z hlavního webu */
    --bg-soft: #F3F4F6;        /* --submenu_background-hover */
    --card: #ffffff;
    --card-hover: #F3F4F6;
    --border: #E5E5E5;         /* rámečky karet na hlavním webu */
    --border-strong: #DFDFDF;  /* --menu_dropdown_line_color */
    --text: #212121;           /* --text */
    --heading: #0B122E;        /* --nadpisy */
    --muted: #797981;          /* --subtext */
    --light: #7B7B7B;
    --marker: #C4C4C4;
    --pcb: #cecdcb;            /* barva plošných spojů v dekoracích */
    /* Síla motivu plošných spojů na jednom místě, ať se dá ladit najednou:
       --pcb-raster = jemný rastr pod fotkami, --pcb-decor = velké rohové kresby. */
    --pcb-raster: .15;
    --pcb-decor: .28;
    /* Hlavní web má v patičce #6F8EB2, tam ale leží na tmavší ploše. Náš gradient
       je vpravo světlejší, takže odkazy o stupeň prosvětlujeme kvůli čitelnosti. */
    --footer-link: #CBDCEF;

    /* --- Teplý akcent -------------------------------------------------
       Katalog je celý modro-šedý, takže v něm nic nevystoupí dopředu — všechno
       je stejně důležité a stránka působí přeplácaně. Jediná teplá barva
       (jantar) je proto vyhrazená JEDNOMU prvku: proužku s odkazem do aplikace
       MySolidusTech nad nadpisem. Používat ji kdekoli jinde znamená vzít mu
       účinek — na to pozor při dalších úpravách.
       Odstín je záměrně tlumený (ne sytě žlutý), aby vedle korporátní modré
       nepůsobil jako varování. --amber-ink je tmavá varianta pro text: samotný
       --amber má na bílé kontrast jen ~2:1, takže se na písmo nehodí. */
    --amber: #E9A23B;
    --amber-ink: #8A5B0E;
    --amber-soft: #FDF4E4;
    --amber-line: #EFDCB6;

    --warn: #C2700B;
    --danger: #DC2626;
    --success: #68C52B;        /* zelená zaškrtávátka z hlavního webu */

    /* --- Tvarosloví --- */
    --radius: 26px;            /* karty (hlavní web 32px, tady o něco střídměji) */
    --radius-sm: 14px;
    --radius-xs: 10px;
    --radius-pill: 39px;       /* klidový stav tlačítka */
    --radius-morph: 13px;      /* tlačítko po najetí */
    --radius-header: 30px;     /* zaoblení spodku hlavičky */
    --lift: 7px;               /* posun modré desky pod kartou */
    /* Sloupec obsahu je od 24. 8. 2026 užší (1200 → 1140). Vedle 334px panelu
       vyplňoval starých 1200 px skoro celou zbylou plochu, takže obsah neměl
       kolem sebe vzduch a stránka působila „nalepená" k panelu. Užší sloupec
       se dá vycentrovat a je z něj zřetelný střed stránky. */
    /* Míra obsahu. 1140 → 1180 → 1560 px: zastropovaný obsah nechával i po
       zúžení bočního panelu na běžném monitoru pruh prázdna po obou stranách —
       při 1600px okně skončil o 130 px dřív, než musel, a na širších o mnohem
       víc. Při 1560 px se container na 1600px okně roztáhne na celou volnou
       šířku a teprve nad ~1830 px začne zase nechávat okraje.

       DLOUHÉHO TEXTU se to netýká: prosa, FAQ, uvození sekcí i patičkový sloupec
       mají vlastní, mnohem užší stropy (.prose 760 px, .faq-section 860 px,
       .solution-lead 62ch, .page-hero-sub 640 px …), takže se řádky
       neroztáhnou do nečitelné délky. Široká míra se projeví jen na mřížkách —
       vertikálách, výpisu produktů, patičce — kde je prostor k užitku. */
    --maxw: 1560px;

    /* Hlavní web stíny skoro nepoužívá — držíme je sotva znatelné. */
    --shadow: 0 8px 26px rgba(8, 66, 102, .09);
    --shadow-sm: 0 2px 10px rgba(8, 66, 102, .06);
    --shadow-lg: 0 18px 48px rgba(8, 66, 102, .13);

    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .54, 1);
    --ease-corp: ease-in-out;  /* hlavní web jede all .3s ease-in-out */

    /* Elza je firemní písmo (Adobe Fonts). Když kit subdoménu nepovolí,
       spadne se na Archivo — grotesk s podobně vysokou střední výškou. */
    --font-display: 'elza', 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: var(--font-display);
    --w-light: 300;
    --w-regular: 400;
    --w-medium: 500;
    --w-semibold: 600;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
/* Hlavní web sází nadpisy v mediu (500), ne v black — díky tomu působí
   technicky, ne „marketingově". Držíme se toho i tady. */
h1, h2, h3, h4 { line-height: 1.15; font-weight: var(--w-medium); margin: 0 0 .5em; color: var(--heading); font-family: var(--font-display); }
h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.3rem, 1.8vw, 1.8rem); }
h3 { font-size: clamp(1.05rem, 1.25vw, 1.25rem); }
strong, b { font-weight: var(--w-semibold); }
.muted { color: var(--muted); }
.mono, .sku { font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace; font-size: .85em; letter-spacing: .01em; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* Horní odsazení sekce je proměnná, ne pevné číslo: stránky, které mají
   začínat hned pod okrajem (detail produktu, dokumentace), si ho přepíšou
   jedním řádkem místo vlastního `padding-top` navíc. Modifikátor
   `.section--tight` je hotová varianta pro nejčastější případ. */
.section { padding: var(--section-pad-top, 80px) 24px 80px; }
.section--tight { --section-pad-top: 28px; }

/* Nadpis sekce nese „S" z logotypu (stejný prvek jako ikona podnadpisu na
   hlavním webu) — levnější a čitelnější podpis značky než barevný proužek. */
.section-title {
    font-size: clamp(1.45rem, 2.5vw, 2.1rem); margin-bottom: 36px;
    display: flex; align-items: center; gap: 14px;
}
.section-title::before {
    content: ""; flex: 0 0 auto; width: .62em; height: 1em;
    background: url("/assets/img/s-mark.svg") left center/contain no-repeat;
}
/* Uvnitř karet (např. .tech-card h2) by se značka opakovala až moc. */
.card .section-title::before, .tech-card .section-title::before { display: none; }

hr { border: 0; border-top: 1px solid var(--deep); opacity: .25; margin-block: 10px; }
img { max-width: 100%; display: block; }
/* Fotka, která se nenačetla (třídu doplní app.js). visibility místo display,
   aby se nerozsypala mřížka — zůstane jen podklad výřezu.
   !important je tu záměrně: skrytí rozbité fotky nesmí přebít žádná stavová
   třída (např. .is-active u střídačky) ani pořadí pravidel v souboru. */
img.is-broken { visibility: hidden !important; }
::selection { background: var(--primary); color: #fff; }

/* === Plošné spoje — rohové dekorace ===
   Kresby přebrané z hlavního webu (doplnek_A / doplnek_B). Držíme je zásadně
   jen v rozích: řídké tahy působí decentně, kdežto motiv rozprostřený přes
   celou plochu je na obsah příliš agresivní. */
.pcb-corner {
    position: absolute; z-index: 0; pointer-events: none;
    background: no-repeat; opacity: var(--pcb-decor);
}
.pcb-corner-a {
    left: 0; bottom: 0; width: clamp(150px, 17vw, 280px); aspect-ratio: 392/626;
    background-image: url("/assets/img/pcb-corner-a.svg"); background-size: contain;
    background-position: bottom left;
}
/* Zrcadlení přes obě osy udělá z levého dolního rohu pravý horní — kresba
   se tak i po otočení „vlévá" do rohu a nezasahuje doprostřed sekce. */
.pcb-corner-a.top-right {
    left: auto; right: 0; bottom: auto; top: 0;
    transform: scale(-1);
}
.pcb-corner-b {
    right: 0; bottom: 0; width: clamp(160px, 18vw, 300px); aspect-ratio: 1/1;
    background-image: url("/assets/img/pcb-corner-b.svg"); background-size: contain;
    background-position: bottom right;
}

/* Kolečka z procesního schématu (vývoj/výroba) byla z úvodního pásu
   odebrána na přání zadavatele — pás teď nese jen text a monitor
   s náhledem aplikace. Soubory foto-vyvoj.png / foto-vyroba.png
   zůstávají v assets, kdyby se dekorace někdy vracela. */

/* === Scroll reveal === */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
html.js .reveal-stagger.in > * { opacity: 1; transform: none; }
html.js .reveal-stagger.in > *:nth-child(1) { transition-delay: .03s; }
html.js .reveal-stagger.in > *:nth-child(2) { transition-delay: .11s; }
html.js .reveal-stagger.in > *:nth-child(3) { transition-delay: .19s; }
html.js .reveal-stagger.in > *:nth-child(4) { transition-delay: .27s; }
html.js .reveal-stagger.in > *:nth-child(5) { transition-delay: .35s; }
html.js .reveal-stagger.in > *:nth-child(6) { transition-delay: .43s; }
html.js .reveal-stagger.in > *:nth-child(n+7) { transition-delay: .5s; }

/* === Tlačítka ===
   Podpis hlavního webu: v klidu pilulka (r=39px), po najetí se roh „zalomí"
   na 13px a barvy se prohodí. Žádné zvedání ani gradienty — tvar dělá práci. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    padding: .78em 1.9em; border-radius: var(--radius-pill);
    border: 2px solid var(--primary); background: #fff; color: var(--primary);
    font-family: var(--font-display); font-weight: var(--w-medium); font-size: .95rem;
    line-height: 1.35; cursor: pointer; text-align: center;
    transition: background .3s var(--ease-corp), color .3s var(--ease-corp),
                border-color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.btn:hover, .btn:focus-visible { background: var(--primary); color: #fff; border-radius: var(--radius-morph); }
.btn:active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

/* Plná varianta jede stejnou choreografii, jen pozpátku. */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: #fff; color: var(--primary); border-radius: var(--radius-morph); }
.btn-primary:active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

/* Sekundární tón — hlubší korporátní modrá místo akční. */
.btn-ghost { background: #fff; border-color: var(--deep); color: var(--deep); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--deep); border-color: var(--deep); color: #fff; border-radius: var(--radius-morph); }

/* Neutrální tlačítko (zrušit, zpět) — šedá z logotypu. */
.btn-muted { border-color: var(--marker); color: var(--brand-grey); }
.btn-muted:hover, .btn-muted:focus-visible { background: var(--brand-grey); border-color: var(--brand-grey); color: #fff; border-radius: var(--radius-morph); }

.btn-sm { padding: .45em 1.2em; font-size: .82rem; border-width: 1.5px; }
.btn-lg { padding: .95em 2.4em; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn .btn-arrow { display: inline-block; transition: transform .3s var(--ease-corp); }
.btn:hover .btn-arrow { transform: translateX(4px); }
.add-to-cart.added,
.add-to-cart.added:hover { background: var(--success); border-color: var(--success); color: #fff; border-radius: var(--radius-morph); }

/* Když je tlačítko uvnitř karty, reaguje i na najetí na celou kartu —
   stejně jako dlaždice produktů na solidustech.cz. */
.product-card:hover .btn-primary,
.vertical-tile:hover .btn-primary { background: #fff; color: var(--primary); border-radius: var(--radius-morph); }

/* === BOČNÍ NAVIGAČNÍ PANEL ==================================================
   Navigace stávala nahoře přes celou šířku: brala obsahu výšku, zatímco po
   stranách zůstávalo volné místo. Od 20. 8. 2026 je celý panel VLEVO a nese
   všechno — značku, hledání, rozcestník, jazyky i poptávku.

   Odsazení obsahu drží jediné pravidlo (.has-sidenav .site-shell), takže se
   šířka panelu ladí na jednom místě: --sidenav-w.

   Na úzkých obrazovkách (≤1100 px) se panel vysouvá zpod levého okraje a nad
   obsahem zůstane jen úzká lišta .topbar — viz responzivní blok níž. */
/* 264 → 226 px (cca 1 cm). Panel se musel držet široký kvůli značkám
   technologií — nejširší z nich (LoRaWAN) potřebovala celý sloupec. Značky
   odešly nad nadpis úvodní stránky (views/partials/tech_marks.php), takže
   panel drží už jen navigace a ta se do 226 px vejde s rezervou. */
:root { --sidenav-w: 226px; }

.side-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: var(--sidenav-w);
    display: flex; flex-direction: column; gap: 18px;
    /* Vnitřní odsazení 18 → 14 px spolu se zúžením panelu: nejdelší položka
       nabídky („Časté dotazy") potřebuje i s ikonou a pilulkou kolem 170 px
       a do zbylých 198 px se tak vejde s rezervou. */
    padding: 26px 14px 22px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--border);
    box-shadow: 6px 0 22px rgba(8, 66, 102, .05);
    /* Podnabídka vertikál vyjíždí VEN z panelu — jakýkoli overflow jiný než
       visible by ji uřízl. Položek je málo, takže se panel na výšku vejde. */
    overflow: visible;
}
.site-shell { display: flex; flex-direction: column; min-height: 100vh; }
.has-sidenav .site-shell { margin-left: var(--sidenav-w); }
.site-shell > main { flex: 1 0 auto; }

.logo { display: flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 44px; width: auto; transition: transform .3s var(--ease-corp); }
.logo:hover img { transform: scale(1.04); }
.side-logo { padding: 0 6px; justify-content: center; }
.side-logo img { height: 52px; }

/* Odkaz pro klávesnici a odečítače — vidět je až po zaostření tabulátorem. */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--deep); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* Cesta zpátky na firemní web (dřív ji nesl pruh nad hlavičkou). */
.side-main-link {
    display: inline-flex; align-items: center; gap: 5px; padding: 0 8px;
    color: var(--muted); font-size: .78rem; font-weight: var(--w-medium);
    transition: color .2s var(--ease-out);
}
.side-main-link:hover { color: var(--primary); }
.side-main-link svg { transition: transform .2s var(--ease-out); }
.side-main-link:hover svg { transform: translate(2px, -2px); }

/* Spodní blok panelu: poptávka a jazyky drží u dolního okraje. */
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.side-foot .cart-link { width: 100%; justify-content: center; }

/* Horní lišta se ukazuje jen na úzkých obrazovkách (viz responzivní blok). */
.topbar { display: none; }
.side-nav-backdrop { display: none; }

.main-nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
/* Podtržítko v barvě logotypu místo obarvené pilulky — decentnější a bližší
   hlavnímu webu, kde je menu čistě textové. */
.main-nav > a, .main-nav .nav-dropdown-toggle {
    position: relative; color: var(--deep); font-weight: var(--w-medium); font-size: .9rem;
    padding: 10px 11px; white-space: nowrap;
    transition: color .3s var(--ease-corp);
}
.main-nav > a::after, .main-nav .nav-dropdown-toggle::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
    background: var(--brand); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease-corp);
}
.main-nav > a:hover, .main-nav .nav-dropdown-toggle:hover,
.nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--primary); }
.main-nav > a:hover::after, .main-nav .nav-dropdown-toggle:hover::after,
.nav-dropdown:focus-within .nav-dropdown-toggle::after { transform: scaleX(1); }
.nav-partner { color: var(--primary) !important; }
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { display: inline-flex; align-items: center; gap: 5px; }
.nav-dropdown-toggle .caret { font-size: .7em; transition: transform .25s var(--ease-out); }
.nav-dropdown:hover .caret, .nav-dropdown:focus-within .caret { transform: rotate(180deg); }
/* Neviditelný můstek přes mezeru, aby menu nezmizelo při přejezdu myší. */
.nav-dropdown::after { content: ""; position: absolute; top: 100%; left: 0; right: -20px; height: 18px; }
.nav-dropdown-menu {
    position: absolute; top: calc(100% + 14px); left: -8px;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: 20px;
    box-shadow: var(--shadow-lg); padding: 8px; min-width: 260px;
    display: flex; flex-direction: column; gap: 2px; z-index: 60;
    opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: top left;
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-spring), visibility 0s linear .28s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-spring), visibility 0s;
}
.nav-dropdown-menu a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; color: var(--deep); font-size: .92rem; transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-radius .3s var(--ease-corp); }
.nav-dropdown-menu a:hover { background: var(--bg-soft); color: var(--primary); border-radius: var(--radius-morph); }
.nav-dd-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--primary-soft); color: var(--brand); flex: 0 0 auto; transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-radius .3s var(--ease-corp); }
.nav-dropdown-menu a:hover .nav-dd-icon { background: var(--primary); color: #fff; border-radius: var(--radius-morph); }

/* --- Svislá podoba nabídky v bočním panelu ---------------------------------
   Přebíjí vodorovná pravidla výš. Ta zůstávají, protože je pořád používá
   rozbalená nabídka na mobilu.

   Položky jsou VYSTŘEDĚNÉ: dvojice ikona+text sedí uprostřed pilulky
   (justify-content: center) a .nav-text se proto nesmí roztahovat
   (flex: 0 0 auto), jinak by text tlačil ikonu k levému okraji.
   Šipka rozcestníku je vytažená z toku k pravému okraji, aby „Produkty“
   bylo ve středu stejně jako položky bez šipky. */
.side-main-nav { flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; flex: 1 1 auto; }
.side-main-nav > a,
.side-main-nav .nav-dropdown-toggle {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    position: relative;
    /* Odsazení po stranách 30 → 22 px: pilulka je v užším panelu (226 px)
       jinak širší než sloupec a nejdelší položka by se uřízla. Šipka
       rozcestníku sedí absolutně u pravého okraje, jí se to netýká. */
    padding: 11px 22px; border-radius: 999px; font-size: .95rem; white-space: nowrap;
    transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
/* Animované podtržítko dává smysl jen ve vodorovné liště — tady podbarvení. */
.side-main-nav > a::after,
.side-main-nav .nav-dropdown-toggle::after { content: none; }
.side-main-nav > a:hover,
.side-main-nav .nav-dropdown-toggle:hover,
.side-main-nav .nav-dropdown:focus-within .nav-dropdown-toggle {
    background: var(--bg-soft); color: var(--primary); border-radius: var(--radius-morph);
}
.side-main-nav .nav-text { flex: 0 0 auto; }
.nav-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; flex: 0 0 auto; color: var(--brand);
    transition: color .3s var(--ease-corp);
}
.side-main-nav > a:hover .nav-ico,
.side-main-nav .nav-dropdown-toggle:hover .nav-ico { color: var(--primary); }

.side-main-nav .nav-dropdown { position: relative; width: 100%; }
/* Neviditelný můstek VPRAVO od položky, aby nabídka nezmizela při přejezdu myší. */
.side-main-nav .nav-dropdown::after {
    content: ""; position: absolute; top: 0; bottom: -10px; left: 100%; width: 24px; height: auto;
}
.side-main-nav .nav-dropdown-toggle .caret {
    position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
    font-size: .95em; color: var(--marker);
}
.side-main-nav .nav-dropdown:hover .caret,
.side-main-nav .nav-dropdown:focus-within .caret { transform: translate(3px, -50%); color: var(--primary); }
/* Rozcestník vyjíždí do strany, ne dolů — vedle panelu je na něj místa dost. */
.side-main-nav .nav-dropdown-menu {
    top: -10px; left: calc(100% + 16px); right: auto;
    transform-origin: left top; transform: translateX(-10px) scale(.98);
}
.side-main-nav .nav-dropdown:hover .nav-dropdown-menu,
.side-main-nav .nav-dropdown:focus-within .nav-dropdown-menu,
.side-main-nav .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1; visibility: visible; transform: translateX(0) scale(1);
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-spring), visibility 0s;
}

/* Hledání v panelu je na celou šířku — na rozdíl od úsporného pole v liště.
   Placeholder je dlouhý („Hledat produkt, SKU, parametr…", německy dokonce
   „Produkt, SKU, Parameter suchen…"), takže se v poli uřezával už za třetím
   písmenem: formulář nese OBĚ třídy (header-search side-search) a pravidlo
   `.header-search input { width: 128px }` níž v souboru má stejnou specifičnost
   jako `.side-search input`, takže vyhrávalo — pole zůstalo úzké jako v liště
   a lupa se odlepila k pravému okraji panelu.
   Proto je selektor složený z obou tříd: má specifičnost o třídu vyšší a nedá
   se přebít pořadím. K tomu panel o vlastní šířce (--sidenav-w), menší písmo a
   užší vnitřní odsazení — vpravo jen tolik, kolik zabere lupa (28px tlačítko
   + 5px odsazení), vlevo 13 px. text-overflow je poslední pojistka pro ještě
   delší překlady: místo tvrdého uříznutí se ukáže výpustka. */
.side-search { width: 100%; }
.header-search.side-search input {
    width: 100%; padding: 11px 34px 11px 13px; font-size: .78rem;
    letter-spacing: -.005em;
    text-overflow: ellipsis;
}
.side-search input::placeholder { opacity: 1; }

/* === Vyhledávání === */
.header-search { position: relative; display: flex; align-items: center; }
.header-search input {
    width: 128px; padding: 8px 34px 8px 13px; font-size: .85rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--bg-alt);
    transition: border-color .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.header-search input:hover { border-color: var(--border-strong); }
.header-search input:focus { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: none; }
.header-search button {
    position: absolute; right: 5px; width: 28px; height: 28px; border: none; border-radius: 50%;
    background: transparent; color: var(--muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color .15s var(--ease-out), background .15s var(--ease-out);
}
.header-search button:hover { color: #fff; background: var(--primary); }
.search-page-form { display: flex; gap: 10px; max-width: 560px; margin-top: 18px; }
.search-page-form input { flex: 1; }
.search-count { margin-bottom: 22px; }
.lang-switch { display: flex; gap: 2px; border: 1px solid var(--border-strong); border-radius: 999px; overflow: hidden; background: #fff; flex: 0 0 auto; padding: 2px; }
.lang-switch a { padding: 4px 8px; border-radius: 999px; font-size: .76rem; color: var(--brand-grey); font-weight: var(--w-medium); transition: background .3s var(--ease-corp), color .3s var(--ease-corp); }
.lang-switch a:hover { color: var(--primary); background: var(--bg-soft); }
.lang-switch a.active { background: var(--deep); color: #fff; }
/* Košík je hlavní akce v liště — nese proto stejné tvarosloví jako .btn. */
.cart-link {
    display: inline-flex; align-items: center; gap: .5em; font-weight: var(--w-medium); font-size: .9rem;
    padding: 8px 18px; border: 2px solid var(--deep); border-radius: var(--radius-pill);
    color: var(--deep); background: #fff; white-space: nowrap;
    transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.cart-link:hover { background: var(--deep); color: #fff; border-radius: var(--radius-morph); }
.cart-icon { flex: 0 0 auto; color: var(--brand); transition: color .3s var(--ease-corp); }
.cart-link:hover .cart-icon { color: #fff; }
.cart-count { background: var(--bg-alt); color: var(--muted); border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; padding: 0 6px; transition: background .2s var(--ease-out), color .2s var(--ease-out), transform .25s var(--ease-spring); }
.cart-count.has-items { background: var(--primary); color: #fff; }
.cart-count.bump { transform: scale(1.35); }
.nav-toggle { display: none; background: none; border: none; color: var(--heading); cursor: pointer; padding: 0; }
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

/* Postupné nabíhání dlaždic nad foldem (bez čekání na IntersectionObserver). */
html.js .hero-stagger > * { opacity: 0; transform: translateY(18px); animation: hero-up .7s var(--ease-out) forwards; }
html.js .hero-stagger > *:nth-child(1) { animation-delay: .05s; }
html.js .hero-stagger > *:nth-child(2) { animation-delay: .16s; }
html.js .hero-stagger > *:nth-child(3) { animation-delay: .27s; }
html.js .hero-stagger > *:nth-child(4) { animation-delay: .38s; }
html.js .hero-stagger > *:nth-child(5) { animation-delay: .49s; }
html.js .hero-stagger > *:nth-child(n+6) { animation-delay: .6s; }
@keyframes hero-up { to { opacity: 1; transform: none; } }

/* === Hero slider (vlastní bannery z adminu) === */
.hero-slider {
    position: relative; overflow: hidden; width: 100%;
    aspect-ratio: 3 / 1; max-height: 70vh;
    background: var(--heading); border-bottom: 1px solid var(--border);
}
.hero-slide {
    position: absolute; inset: 0; display: grid; align-items: center;
    opacity: 0; visibility: hidden; z-index: 1;
    transition: opacity .7s var(--ease-out), visibility 0s linear .8s;
}
.hero-slide.active { opacity: 1; visibility: visible; z-index: 2; transition: opacity .7s var(--ease-out), visibility 0s; }
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.active .hero-slide-img { animation: slide-zoom 7s var(--ease-out) forwards; }
@keyframes slide-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(11, 18, 46, .68) 0%, rgba(11, 18, 46, .35) 50%, rgba(11, 18, 46, .05) 100%);
}
.hero-slide-content { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); }
.hero-slide-title { color: #fff; font-size: clamp(1.6rem, 3.6vw, 2.8rem); letter-spacing: -.02em; margin: 0 0 .35em; max-width: 620px; text-shadow: 0 2px 18px rgba(11, 18, 46, .45); }
.hero-slide-sub { color: rgba(255, 255, 255, .88); font-size: clamp(.95rem, 1.6vw, 1.15rem); max-width: 540px; margin: 0 0 1.4em; text-shadow: 0 1px 10px rgba(11, 18, 46, .45); }
.hero-slide.active .hero-slide-content > * { opacity: 0; transform: translateY(16px); animation: hero-up .65s var(--ease-out) forwards; }
.hero-slide.active .hero-slide-content > *:nth-child(1) { animation-delay: .15s; }
.hero-slide.active .hero-slide-content > *:nth-child(2) { animation-delay: .28s; }
.hero-slide.active .hero-slide-content > *:nth-child(3) { animation-delay: .41s; }
.hero-slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(11, 18, 46, .3); backdrop-filter: blur(6px); color: #fff;
    font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-spring);
}
.hero-slider-arrow:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-50%) scale(1.07); }
.hero-slider-arrow.prev { left: 18px; }
.hero-slider-arrow.next { right: 18px; }
.hero-slider-dots { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5; display: flex; justify-content: center; gap: 9px; }
.hero-dot {
    width: 10px; height: 10px; border-radius: 999px; border: none; padding: 0; cursor: pointer;
    background: rgba(255, 255, 255, .45);
    transition: background .25s var(--ease-out), width .3s var(--ease-out);
}
.hero-dot:hover { background: rgba(255, 255, 255, .75); }
.hero-dot.active { background: #fff; width: 26px; }
/* Tablet — o něco nižší poměr, ať hero nedominuje */
@media (max-width: 1024px) {
    .hero-slider { aspect-ratio: 5 / 2; max-height: 60vh; }
}
@media (max-width: 768px) {
    .hero-slider { aspect-ratio: auto; height: 340px; max-height: 56vh; }
    .hero-slider-arrow { display: none; }
    .hero-slide-overlay { background: linear-gradient(180deg, rgba(11, 18, 46, .25), rgba(11, 18, 46, .65)); }
    .hero-slide-title { font-size: clamp(1.4rem, 6vw, 2rem); }
}
@media (max-width: 480px) {
    .hero-slider { height: 280px; }
}

/* === Mřížky a karty ===
   Signaturní pohyb hlavního webu: pod kartou vyjede o 7 px modrá deska.
   Řeší se box-shadow s nulovým rozostřením — kopíruje zaoblení rámečku,
   nepotřebuje pseudoprvek a nekoliduje s overflow:hidden u fotek. */
.grid { display: grid; gap: 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Výpisy produktů (kategorie, /produkty/, hledání) stojí na .grid-3. Od
   roztažení míry obsahu (--maxw 1180 → 1560 px) by tři karty na širokém
   monitoru byly přes 480 px široké — fotka produktu se v takové ploše utopí
   a řádek popisu se protáhne přes celou obrazovku. Nad 1400 px proto čtyři
   sloupce, nad 1760 px pět: karta tak zůstane v pásmu 300–380 px, kde ji
   návrh má. */
@media (min-width: 1400px) { .grid-3 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1760px) { .grid-3 { grid-template-columns: repeat(5, 1fr); } }
.card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 24px; box-shadow: 0 0 0 0 var(--primary);
    transition: border-color .3s var(--ease-corp), box-shadow .3s var(--ease-corp);
}
/* Desku nese vždycky ten prvek, který má rámeček a zaoblení — box-shadow totiž
   kopíruje border-radius svého prvku a kreslí se těsně pod jeho spodní hranu.
   U vertikál je tím prvkem .vertical-col (od sloučení štítku s dlaždicí), NE
   .vertical-tile: ta je uvnitř karty, nemá zaoblení a končí nad tečkami
   rotátoru, takže z desky býval hranatý modrý pruh uprostřed karty. */
.plate-hover, a.card, .vertical-card, .product-card, .vertical-col,
.top-item, .faq-item, .doc-item, .stat, .tech-card {
    box-shadow: 0 0 0 0 var(--primary);
    transition: border-color .3s var(--ease-corp), box-shadow .3s var(--ease-corp),
                border-radius .3s var(--ease-corp), color .3s var(--ease-corp);
}
.plate-hover:hover, a.card:hover, .vertical-card:hover, .product-card:hover, .vertical-col:hover,
.top-item:hover, .faq-item:hover, .faq-item[open], .doc-item:hover, .stat:hover, .tech-card:hover {
    box-shadow: 0 var(--lift) 0 0 var(--primary);
}

/* === Úvodní katalog: vertikály s fotkou hlavního produktu ===
   Nahrazuje hero banner — návštěvník vidí produkty hned, bez rolování. */
/* Horní pás úvodní stránky: světlý podklad + plošné spoje, aby první obrazovka
   nesla firemní rukopis i bez hero banneru. Obsah leží nad dekorací (z-index). */
.catalog-top {
    position: relative; overflow: hidden;
    background: linear-gradient(168deg, #F4F4F4 0%, #FFFFFF 78%);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.catalog-top > .container, .catalog-top > section { position: relative; z-index: 1; }

/* Nadpis je první, co v pásu stojí — proužek s aplikací nad ním 26. 8. 2026
   odešel (aplikace má vlastní kartu v řadě vertikál), takže si tenhle blok
   musí odsadit i shora sám.
   Celý úvod je od 24. 8. 2026 na střed: nadpis i podnadpis stojí na jedné
   svislé ose uprostřed sloupce. Zarovnání vlevo tlačilo obsah k bočnímu
   panelu a vpravo zbýval pruh prázdna. */
/* Odsazení sekce je nižší než dřív (30 → 16 px), protože svůj vnitřní prostor
   si teď drží deska .catalog-hero. Bez toho by se obojí sečetlo a úvod stránky
   by narostl — zadání znělo přidat rám, ne zvětšit hlavičku. */
.catalog-intro { padding: 16px 24px 4px; text-align: center; }

/* --- Hero banner katalogu -------------------------------------------------
   Deska kolem nadpisu a podnadpisu. Volně vysazený text nad řadou orámovaných
   karet působil jako popiska pásu, ne jako začátek stránky.

   SAZBA SE NEMĚNÍ: velikost ani řez písma zůstávají, přibyl jen rám, podklad
   a dekorace. Vnitřní odsazení je proto úsporné a část si vzalo ze sekce nad
   ním, aby hlavička nenarostla do výšky. */
/* Deska je od 26. 8. 2026 dvousloupcová: vlevo kaskáda značek podporovaných
   technologií (dřív v bočním panelu), vpravo nadpis s podnadpisem. Sazba
   hlavičky se nemění — jen dostala vedle sebe souseda a zbytek šířky si dělí
   s ním. Značky stojí PŘED nadpisem i v HTML, ne jen opticky. */
.catalog-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: 34px;
    padding: 26px 42px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    /* Podklad světlá s nádechem do korporátní modré — nadpis je tmavě modrý
       text, na sytém podkladu by ztratil čitelnost. */
    background: linear-gradient(112deg, #FFFFFF 0%, #F5F8FD 52%, #E9F0FB 100%);
    box-shadow: 0 2px 14px rgba(8, 66, 102, .05);
}
/* Hlavička si bere zbytek řádku a zůstává vystředěná sama v sobě (text-align
   dědí z .catalog-intro) — kaskáda značek ji o svou šířku posune, ale nadpis
   ani podnadpis se kvůli tomu nezalomí jinak než dřív. */
.catalog-hero-text { flex: 1 1 auto; min-width: 0; }

/* --- Kaskáda značek podporovaných technologií ----------------------------
   Značky putovaly z pásu nad patičkou do bočního panelu a odtud sem. V panelu
   držely sloupec navigace zbytečně široký (nejširší LoRaWAN si brala celý);
   tady zaplní prázdno po levici vystředěné hlavičky a panel se o centimetr
   zúžil (--sidenav-w).

   Sazba je mřížka 2 × 2: NB-IoT a LoRaWAN vedle sebe na prvním řádku (obojí
   je rádiová síť pro dálkový přenos), Wireless M-Bus sám pod nimi na středu —
   je to sběrnice měřidel, jiná kategorie, a jako dvouřádkový lockup potřebuje
   víc místa. Na pořadí značek v HTML proto záleží.

   Schodovitá kaskáda tu byla mezikrok a neosvědčila se: tři značky pod sebou
   posunuté doprava vypadaly jako rozsypaný seznam, ne jako sada. */
.hero-tech {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 11px;
    padding-right: 30px; border-right: 1px solid var(--border);
}
/* Popiska stojí na středu NAD mřížkou, ne u jejího levého okraje: mřížka je
   širší než popiska a zarovnané vlevo z toho byly dva bloky vedle sebe místo
   jednoho. */
.hero-tech-label {
    font-size: .66rem; font-weight: var(--w-semibold); letter-spacing: .1em;
    line-height: 1; text-transform: uppercase; color: var(--light); text-align: center;
}
.hero-tech-marks {
    display: grid; grid-template-columns: auto auto;
    gap: 14px 20px; align-items: center; justify-items: center;
}
/* Ztlumené, dokud na ně nemíří myš — je to podpis, ne poutač. */
.hero-tech .tech-logo { opacity: .8; transition: opacity .3s var(--ease-corp); }
.hero-tech:hover .tech-logo { opacity: 1; }
/* Výšky NEJSOU odhad — vycházejí ze změřených souborů. Slovní značka leží
   v každém z nich jinde: v tech-nbiot.png zabírá y 208–450 z 531 (nad textem je
   koule s anténou), v tech-lorawan.png y 134–434 z 639 (vlny jsou nad i pod).
   Rámečky souborů se proto na společnou velikost PÍSMA nesmí srovnat na
   shodnou výšku: při 34 : 33 px vyjde slovní značka u obou na 15,5 px.

   translateY srovná obě značky na společnou účtovací linku. align-items: center
   totiž srovná RÁMEČKY souborů, kdežto střed písma leží u NB-IoT na 0,620 výšky
   a u LoRaWANu na 0,444 — při 34 : 33 px se tím texty rozejdou o 5,9 px, což je
   přesně ten viditelný úskok. Každá značka proto jde o půlku rozdílu proti
   druhé. Když se výšky změní, přepočítat z týchž poměrů.

   Nejširší značka: LoRaWAN 2000 : 639 ≈ 3,13, při 33 px ≈ 103 px; mřížka i
   s mezerou 20 px tedy zabere kolem 220 px a hlavičce zbyde zbytek řádku. */
.hero-tech .tech-logo-nbiot { height: 34px; transform: translateY(-2.95px); }
.hero-tech .tech-logo-lora  { height: 33px; transform: translateY(2.95px); }
/* M-Bus přebírá celý druhý řádek a stojí na jeho STŘEDU — pod mezerou mezi
   oběma značkami nad sebou. Zarovnaný vlevo by vypadal, jako by k mřížce
   nepatřil a druhý sloupec někdo zapomněl doplnit. */
.hero-tech .tech-logo-mbus  { grid-column: 1 / -1; justify-self: center; height: 37px; transform: none; }

/* Rastr plošných spojů táhne motiv z pásu i do desky, ale jen při pravém
   okraji a slabě — přes celou plochu by kreslil pod text. */
.catalog-hero::before {
    content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
    background: url("/assets/img/pcb-tile.svg") right -40px center/200px 200px repeat-y;
    opacity: .22;
    -webkit-mask-image: linear-gradient(90deg, transparent 55%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 55%, #000 100%);
}
/* Tenký akcentní proužek u horní hrany — dělá z desky banner, ne jen rámeček. */
.catalog-hero::after {
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--navy) 62%, transparent 100%);
}

/* Strop 2,15 → 2,55 rem spolu s roztaženou mírou obsahu: v desce přes celou
   šířku okna vypadal dosavadní nadpis jako popiska. Spodní mez i vw složka
   zůstávají, takže na telefonu se sazba nemění. */
.catalog-intro h1 {
    font-size: clamp(1.5rem, 2.6vw, 2.55rem); margin: 0 0 12px;
    letter-spacing: -.015em; font-weight: var(--w-medium);
    text-wrap: balance;
}
/* Vlaječka roste s nadpisem. Tenký rámeček drží bílý pruh čitelný i na světlém
   podkladu, jinak by horní polovina vlajky splynula s pozadím. */
.flag-cz {
    display: inline-block; height: .62em; width: auto; margin-left: .45em;
    vertical-align: baseline; position: relative; top: .02em;
    border: 1px solid rgba(11, 18, 46, .14); border-radius: 2px;
}
/* margin: 0 auto + užší míra řádku (68 → 60 znaků) drží podnadpis na téže ose
   jako nadpis a zároveň ho udrží čitelný — vycentrovaný text přes celou šířku
   sloupce se čte špatně, oko nenajde začátek dalšího řádku. */
.catalog-intro-sub {
    margin: 0 auto; color: var(--muted); font-size: 1.1rem;
    max-width: 64ch; text-wrap: pretty;
}

/* --- Značky rádiových standardů ---------------------------------------
   Řada pod nadpisem úvodní stránky zrušena — značky nese boční panel
   (.hero-tech). Zůstávají jen výšky a posuny samotných log, protože
   je používá i kaskáda v hlavičce. */
.tech-marks { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.tech-logo { width: auto; display: block; }

/* Výšky jsou dopočítané tak, aby SLOVNÍ ZNAČKA v každém logu měla shodných
   ~12 px, ne aby se rovnaly rámečky souborů (viz komentář v home.php):
        NB-IoT   12 / 0.452 ≈ 26      LoRaWAN  12 / 0.461 ≈ 26
        M-Bus    12 / 0.492 ≈ 24
   Posun translateY srovná středy písmen na jednu linku: -(střed − 0.5) × výška. */
.tech-logo-nbiot { height: 26px; transform: translateY(-3px); }
.tech-logo-lora  { height: 26px; transform: translateY(1.5px); }
/* M-Bus je dvouřádkový lockup („M-Bus" + podtitulek „wireless"), takže na shodnou
   výšku hlavního řádku potřebuje vyšší rámeček než jednořádkové značky. */
.tech-logo-mbus  { height: 28px; transform: translateY(3px); }
.verticals-section { padding: 26px 24px 56px; }

/* Jedna řada přes celou šířku; níž se rozpadá po sloupcích, ne na jeden dlouhý sloupec. */
/* Pět sloupců, ne čtyři: k vertikálám přibyla 26. 8. 2026 karta MySolidusTech
   a při čtyřech by zůstala viset sama na druhém řádku. Pět se do řady vejde
   díky zúženému bočnímu panelu (--sidenav-w 290 → 264 px).

   align-items: stretch (výchozí, dřív tu stálo start): od chvíle, kdy je sloupec
   jedna ohraničená karta, se musí všechny srovnat na společnou spodní
   hranu. Karty s jediným produktem nemají tečky rotátoru a byly by o kus nižší
   než zbytek řady — a nedorovnaná řada je přesně ten neklid, který stránku
   dělal přeplácanou. Přebytek pohltí .vertical-tile { flex: 1 }. */
.vertical-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
/* Sloupec je od 24. 8. 2026 JEDNA karta, ne dva samostatné útvary nad sebou.
   Dřív stál tmavě modrý štítek kategorie odděleně 10 px nad dlaždicí, takže
   v řadě plavalo osm objektů místo čtyř — a čtyři sytě modré pilulky navíc
   přebíjely nadpis stránky. Rámeček a ořez si proto bere sloupec a štítek
   dosedá na dlaždici jako její záhlaví. */
.vertical-col {
    display: flex; flex-direction: column; height: 100%;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    transition: border-color .3s var(--ease-corp), box-shadow .3s var(--ease-corp);
}
/* Modrou desku pod kartou řeší společné pravidlo .plate-hover výš — tady
   zbývá jen ztmavení rámečku. Vlastní box-shadow by desku přebil. */
.vertical-col:hover { border-color: var(--border-strong); }

/* Název vertikály stojí v barevném záhlaví karty a při střídání produktů
   se nemění — je to pevný štítek kategorie, ne součást rotujícího obsahu. */
.vertical-head { margin: 0; font-size: 1.06rem; line-height: 1.25; }
/* Gradient leží ve vlastní vrstvě a při najetí se odkrývá plná modrá pod ním.
   Přímý přechod `background: gradient` → `background: barva` totiž nejde
   animovat: background-image (gradient) se přepne skokem na none, zatímco
   background-color teprve najíždí z průhledné — na okamžik prosvitne stránka
   a tlačítko problikne. Krytí se naopak interpoluje hladce. */
.vertical-head a {
    position: relative; isolation: isolate;
    display: flex; align-items: center; gap: 12px;
    padding: 15px 20px;
    background: var(--deep);
    color: #fff; text-decoration: none;
}
.vertical-head a::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: linear-gradient(251deg, var(--primary-dark) 0%, var(--navy) 100%);
    transition: opacity .3s var(--ease-corp);
}
/* Poloměr se při najetí už nezalamuje — záhlaví je přirostlé ke kartě, takže
   by se zaoblovalo do prázdna. Zůstává odkrytí plné modré pod gradientem. */
.vertical-head a:hover::before { opacity: 0; }
.vertical-head-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .22);
    display: flex; align-items: center; justify-content: center; color: #9DBBFF;
    transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.vertical-head a:hover .vertical-head-icon { background: var(--primary); color: #fff; border-radius: var(--radius-morph); }
.vertical-head-text { display: flex; flex-direction: column; min-width: 0; }
.vertical-head-name {
    font-weight: var(--w-semibold); letter-spacing: -.01em; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vertical-head .vertical-kw {
    margin-top: 1px; font-size: .76rem; font-weight: 500;
    color: rgba(255, 255, 255, .7); letter-spacing: .01em; text-transform: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rámeček i ořez si bere .vertical-col (viz výš) — dlaždice je uvnitř karty
   jen svislý tok obsahu. */
.vertical-tile {
    display: flex; flex-direction: column; background: var(--card); flex: 1;
    color: inherit; text-decoration: none;
}

/* Fotka produktu — contain, ať senzory nejsou oříznuté.
   max-height je strop pro širokou kartu: při dvou sloupcích (≤1024 px) je
   dlaždice přes 450 px široká a poměr 4:3 z výřezu udělal 340 px vysokou
   plochu, ve které se malý senzor ztrácel uprostřed prázdna. Na pěti
   sloupcích se strop neuplatní — tam výřez vychází kolem 190 px.

   Výřez NEMÁ vlastní podklad ani rastr plošných spojů: od 26. 8. 2026 zařízení
   plave rovnou na bílé kartě, jak to má předloha. Šedý blok s kresbou dělal
   z fotky ohraničené okno uvnitř karty — v řadě pěti karet z toho byla mřížka
   rámečků v rámečcích a produkt, kvůli kterému tam dlaždice je, se v ní ztrácel.
   Poměr povyrostl na 5:4, takže má zařízení víc plochy než dřív. */
/* Poměr 5/4 → 10/9 a strop 250 → 320 px (26. 8. 2026): karty se s uvolněným
   pruhem po zúženém panelu a s roztaženou mírou obsahu (--maxw 1180 → 1560 px)
   rozšířily a prodloužily, tak ať z toho má nejvíc zařízení, kvůli kterému
   dlaždice je. Na pěti sloupcích a 1600px okně vyroste výřez ze zhruba 162 na
   270 px, tedy na dvojnásobek plochy. Strop drží fotku v mezích i tam, kde se
   řada zlomí na tři sloupce a dlaždice je přes 400 px široká. */
.vertical-shot {
    position: relative; aspect-ratio: 10/9; max-height: 320px; background: transparent;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    /* Ohraničí míchání barev na výřez — jinak by fotky prosakovaly do karty. */
    isolation: isolate;
}
/* MĚKKÝ PŘECHOD DO BÍLÉ JEN NAHOŘE A DOLE
   ---------------------------------------
   Fotka se v dlaždici zvětšuje adaptivním měřítkem (transform: scale, viz níž).
   Fade proto NESMÍ sedět na ní: maska se transformuje spolu s prvkem, takže při
   měřítku 2,6× odjede daleko za hranu výřezu — a to, co návštěvník uvidí, je
   ostrý řez fotky o okraj výřezu, ne žádný přechod. Přesně tak to vypadalo do
   26. 8. 2026, kdy tu maska byla na `.vertical-shot img`.

   Fade proto leží na VÝŘEZU, který se netransformuje, a není to maska, ale
   překryv v barvě karty. Oproti masce má tu výhodu, že vodoznaky s piktogramy
   se dají nechat NAD ním (mají z-index 2), takže zůstanou čitelné i u kraje,
   kde je fotka už skoro v bílé.

   BOKY ZŮSTÁVAJÍ OSTRÉ (změna 27. 8. 2026)
   Do té doby se rozostřovaly všechny čtyři strany. Fotka tím ale ztratila
   šířku karty: uprostřed pruhu plavala scéna a od okraje karty ji dělil bílý
   závoj, takže dlaždice vypadala rozpitá do stran, ne usazená. Svislý pruh má
   naopak jediný úkol — spojit modré záhlaví nad výřezem s bílým popisem pod
   ním. Přechod proto zůstal jen nahoře a dole; tam ho karta potřebuje, aby
   fotka do modré vplynula a dole se rozpustila do bílého těla, kdežto do stran
   dosedá na hranu rámečku a řez o ni je čitelný jako záměr.

   Funguje to díky tomu, že podklad karty je bílý (--card) — proto je barva
   v gradientech přímo bílá a ne průhledná černá: `transparent` je rgba(0,0,0,0)
   a interpolace k němu by udělala z okrajů šedý závoj.

   Průběh je záměrně NELINEÁRNÍ. Prostý přechod bílá → průhledná má v místě, kde
   končí, viditelnou hranu; sedm uzlů ji rozpustí. Krytí padá rychle (v 11 %
   výšky je z bílé necelá polovina) a poslední desetina je jen jemný doběh.
   Doběh je delší než u zrušených bočních gradientů (26 % místo 20 %): dvě
   strany teď nesou celý přechod samy a na krátké dráze by z něj byl pruh, ne
   přechod. Zařízení uprostřed výřezu zůstává nezastíněné — adaptivní měřítko
   níž mu drží rezervu právě na tohle. */
.vertical-shot::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.92) 4%, rgba(255,255,255,.72) 8%, rgba(255,255,255,.45) 11%, rgba(255,255,255,.20) 17%, rgba(255,255,255,.06) 21%, rgba(255,255,255,0) 26%),
        linear-gradient(to top,    #fff 0%, rgba(255,255,255,.92) 4%, rgba(255,255,255,.72) 8%, rgba(255,255,255,.45) 11%, rgba(255,255,255,.20) 17%, rgba(255,255,255,.06) 21%, rgba(255,255,255,0) 26%);
}

/* Fotky produktů mají bílé pozadí zapečené v souboru. `multiply` ho pohltí —
   vynásobení bílou nechá podklad beze změny — takže zařízení splyne s bílou
   kartou i tehdy, když má soubor okraj o odstín jiný. Zůstává i po zrušení
   šedého podkladu: bez něj by se ty rozdíly odstínů teprve ukázaly.
   Odsazení je jen 2 px (dřív 14, pak 4): zařízení má vyplnit plochu, kterou
   dostalo — a od zvětšení výřezu jí dostalo ještě víc.

   ADAPTIVNÍ MĚŘÍTKO
   -----------------
   object-fit: contain vepíše do výřezu celý SOUBOR, ne zařízení na něm. Fotky
   ale mají bílého okolí každá jinak: velký přístroj vyplní snímek od kraje ke
   kraji, drobné čidlo plave uprostřed v pětinásobku prázdna — a v řadě karet
   z toho byl jednou obr a vedle něj trpaslík. Skutečný obsah proto po načtení
   dopočítá JS (initAdaptiveShots v app.js) a uloží ho do --shot-scale
   a --shot-x/--shot-y; transform pak fotku zvětší a posune tak, aby zařízení
   vyplnilo výřez a bylo v něm na středu.

   Výchozí hodnoty jsou neutrální (1 a 0), takže bez JS nebo než doběhne
   výpočet vypadá fotka přesně jako dřív — nic nebliká a nic nezmizí.

   MĚKKÝ HORNÍ A DOLNÍ OKRAJ
   -------------------------
   Některé fotky nemají bílé pozadí, ale vlastní scénu (stůl, zeď, rozvaděč).
   Ta nahoře a dole končila ostrým řezem, který v kartě rozsekl modré záhlaví
   od bílého popisu. Přechod do bílé na těchto dvou stranách proto nese
   .vertical-shot::after — pravidlo stojí hned nad tímhle blokem a je tam
   i vysvětlené, včetně toho, proč boky zůstávají ostré. Na fotce samé být nesmí:
   transform: scale níž by ho odsunul za hranu výřezu. Adaptivní měřítko drží
   obsahu rezervu právě proto, aby fade ukusoval z prázdna, ne ze zařízení. */
.vertical-shot img:not(.shot-mark) {
    width: 100%; height: 100%; object-fit: contain; padding: 2px;
    mix-blend-mode: multiply;
    --shot-scale: 1; --shot-x: 0px; --shot-y: 0px; --shot-hover: 1;
    transform: translate(var(--shot-x), var(--shot-y)) scale(calc(var(--shot-scale) * var(--shot-hover)));
    /* Plynulé přiblížení při najetí myší. Dřív tenhle přechod fotka dědila
       z pravidla pro .vertical-slide, protože značkou snímku byla ona sama;
       od chvíle, kdy je snímkem obalující odkaz, ho musí mít vlastní. */
    transition: transform .45s var(--ease-out);
}
/* Přiblížení se váže na všechny fotky ve výřezu, ne jen na .is-active. Kdyby
   viselo na .is-active, tak by při přepnutí produktu odcházející fotka skokem
   zmenšila a nastupující skokem zvětšila — druhá půlka toho probliknutí.

   Mění se JEN --shot-hover, ne celý transform: adaptivní měřítko a posun
   z JS musí zůstat, jinak by fotka při najetí myší skočila zpátky do
   původního (mrňavého) rozměru. */
.vertical-tile:hover .vertical-shot img:not(.shot-mark) { --shot-hover: 1.05; }
/* Fotka je odkaz na právě zobrazený produkt — <a> musí vyplnit celý výřez
   a vycentrovat obsah (dřív to obstarávalo pravidlo pro náhradní ikonu). */
.vertical-shot-link { display: flex; align-items: center; justify-content: center; }
.vertical-shot-fallback { color: var(--primary); opacity: .5; }
/* Štítek s počtem produktů ve vertikále (.vertical-count) stával vlevo dole
   nad fotkou. Zrušen 26. 8. 2026 — viz komentář ve views/home.php. */

/* === PIKTOGRAMY MĚŘENÝCH VELIČIN JAKO VODOZNAK ============================
   Návštěvník má z dlaždice poznat, CO zařízení měří, ještě než začne číst
   popis. Piktogramy se u produktu zaškrtávají v administraci (Piktogramy +
   formulář produktu) a rozmístění po krajích fotky počítá server —
   pictogramWatermarks() v src/bootstrap.php. Je „náhodné", ale odvozené z id
   produktu, takže při přenačtení ani při střídání produktů nikam neposkočí.

   Vrstva leží PŘES fotku, ne pod ní: pod ní by ji zakryl zvětšený produkt
   (adaptivní měřítko výš fotku roztahuje přes celý výřez) a z vodoznaku by
   zbyly rohy. Nahoře je proto s nízkým krytím a bez odchytávání kliků —
   celá plocha výřezu má zůstat odkazem na produkt.

   position: absolute, ne fixed rozestupy: souřadnice chodí ze serveru jako
   procenta výřezu (--mx/--my), natočení a velikost jako --mr/--ms. Translate
   −50 % vystředí piktogram na spočítaný bod, takže se souřadnice chová jako
   střed značky, ne jako její levý horní roh. */
.shot-marks {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    /* Vlastní vrstva míchání: fotka pod tím má mix-blend-mode: multiply
       a bez isolation by se do něj vodoznaky zamíchaly taky a zešedly by
       dvakrát — jednou barvou, podruhé násobením. */
    isolation: isolate;
    /* Barvu vestavěných kreseb (stroke="currentColor") řídí tenhle odstín.
       Nahraný rastr si barvu nese v souboru, na ten se neuplatní. */
    color: #64748B;
}
.vertical-shot .shot-mark {
    position: absolute; left: var(--mx, 50%); top: var(--my, 50%);
    width: calc(30px * var(--ms, 1)); height: calc(30px * var(--ms, 1));
    /* Vodoznak je podpis, ne poutač — přebít fotku produktu nesmí. */
    opacity: .22;
    transform: translate(-50%, -50%) rotate(var(--mr, 0deg));
    transition: opacity .35s var(--ease-out);
}
/* Při najetí myší zesílí: dlaždici si návštěvník prohlíží a v tu chvíli je
   informace „co to měří" užitečnější než klid obrázku. */
.vertical-tile:hover .shot-mark { opacity: .38; }

/* Na úzkých kartách (dvě a jedna řada) je výřez malý a osm značek by se do něj
   nevešlo, aniž by přelezly přes zařízení. Zmenší se s ním. */
@media (max-width: 900px) {
    .vertical-shot .shot-mark { width: calc(24px * var(--ms, 1)); height: calc(24px * var(--ms, 1)); }
}

/* === Střídání produktů ===
   Všechny varianty jsou v HTML nad sebou; vidět je vždy jen .is-active.
   Bez JS zůstane viditelná první — proto se nic neschová nenávratně.

   visibility: hidden tu není navíc: díky němu se skryté varianty neúčastní
   klikání. Odkaz na produkt tak vede jen ten snímek, který je právě vidět. */
.vertical-shot .vertical-slide,
.vertical-text .vertical-slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity .5s var(--ease-out), visibility .5s;
}
.vertical-shot .vertical-slide.is-active,
.vertical-text .vertical-slide.is-active { opacity: 1; visibility: visible; }

.vertical-body { display: flex; flex-direction: column; padding: 16px 20px 20px; flex: 1; }
/* Pevná výška textu, aby dlaždice při střídání produktů nepodskakovaly.
   108 → 138 → 152 px: po odchodu CTA „Prozkoumat" zbyl dole v kartě pruh
   a popis produktu ho dostal celý; se širší kartou pak přibral ještě řádek,
   aby se do čtyř řádků vešel i delší název produktu nad nimi. */
.vertical-text { position: relative; min-height: 152px; flex: 1; }
/* justify-content: flex-end drží text u DOLNÍ hrany jeho boxu. Snímky jsou
   uvnitř .vertical-text absolutně vysazené přes celou plochu (inset: 0), takže
   se text jinak lepí nahoru k fotce a volné místo po CTA zůstává dole prázdné.
   Takhle se posune dolů a mezera zůstane mezi fotkou a popisem, kde vzdušnost
   kartě sluší. */
.vertical-text .vertical-slide { display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; }
.vertical-prod-name {
    font-size: 1rem; font-weight: var(--w-semibold); color: var(--heading); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vertical-desc {
    color: var(--muted); font-size: .88rem; line-height: 1.55;
    /* Popisy se délkou liší — ořez drží karty v řadě stejně vysoké.
       Řádky 3 → 4: prodloužená karta unese o řádek víc a popis se tak dřív
       neuřízne uprostřed věty (richTextPlain pouští 140 znaků, což na šířku
       sloupce vychází zhruba na pět řádků). */
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* Z produktových dlaždic CTA „Prozkoumat" 26. 8. 2026 odešlo — na vertikálu
   vede modré záhlaví karty i štítek s počtem kusů, takže odkaz byl třetí
   cestou na totéž a bral spodní pruh, který teď patří popisu. Pravidlo
   zůstává kvůli kartě MySolidusTech: ta na aplikaci jiné tlačítko nemá.
   Odkaz se musí umět zvýraznit sám za sebe — fotka a text v dlaždici vedou
   jinam než on. */
.vertical-tile .card-link { margin-top: 14px; font-size: .9rem; align-self: flex-start; }
.vertical-tile:hover .card-link .arr,
.vertical-tile .card-link:hover .arr { transform: translateX(5px); }
.vertical-tile .card-link:hover { text-decoration: underline; text-underline-offset: .25em; }
/* Název produktu se podtrhne, až když míří myš opravdu na něj — jinak by
   nebylo poznat, který ze tří odkazů v dlaždici se právě chystá otevřít. */
.vertical-text a.vertical-slide:hover .vertical-prod-name { text-decoration: underline; text-underline-offset: .2em; }

/* ==========================================================================
   KARTA MYSOLIDUSTECH V ŘADĚ VERTIKÁL
   Aplikace mívala na úvodu dvě vlastní místa — proužek s monitorem nahoře
   a široký pás níž. Obojí odešlo a MySolidusTech stojí v řadě vertikál jako
   šestá dlaždice: je to další vertikála, jen softwarová.

   Karta záměrně dědí VŠECHNO z .vertical-col a přepisuje jen to, čím se snímek
   grafu liší od fotky produktu. Kdyby měla vlastní rozměry, v řadě by
   nedosedla na společnou spodní hranu.
   ========================================================================== */
/* Odstín odliší softwarovou kartu od hardwarových, aniž by z řady vypadla.
   Návrh ji měl výrazně fialovou; na světlém webu by taková plocha přebila
   nadpis stránky, proto jen posun gradientu do fialova. */
.vertical-col-app .vertical-head a::before {
    background: linear-gradient(251deg, #4B3A9E 0%, var(--navy) 100%);
}
.vertical-col-app .vertical-head-icon { color: #C4B5FD; }
.vertical-col-app .vertical-head a:hover .vertical-head-icon { background: #6D4AEF; }

/* Snímek z aplikace NENÍ fotka produktu: mix-blend-mode se u něj ruší. Fotky
   produktů mají bílé pozadí zapečené v souboru a multiply ho pohltí; graf má
   ale vlastní barevné plochy, které by vynásobením podkladem zešedly a ztratily
   čitelnost. Zaoblení odsadí ostré hrany snímku obrazovky od bílé karty. */
.vertical-col-app .vertical-shot img:not(.shot-mark) {
    mix-blend-mode: normal; padding: 6px; border-radius: 8px;
}

/* Popis karty stojí mimo rotátor (viz komentář v views/home.php), takže na
   rozdíl od .vertical-text není absolutně vysazený a nepotřebuje pevnou výšku
   — roste podle obsahu a přebytek pohltí flex: 1 na dlaždici. */
.vertical-app-text { display: flex; flex-direction: column; gap: 5px; flex: 1; }

/* Tři body místo popisu produktu. Odrážky jsou vlastní (list-style: none
   + ::before), aby držely tutéž barvu a odstup jako zbytek karty. */
.vertical-app-points {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: grid; gap: 4px;
}
.vertical-app-points li {
    position: relative; padding-left: 15px;
    color: var(--muted); font-size: .86rem; line-height: 1.5;
}
.vertical-app-points li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--primary);
}

/* Tečky ukazují, kolik produktů se střídá a kde jsme. Doplňuje je JS, který je
   vkládá do .vertical-col — od chvíle, kdy je sloupec ořezaná karta, tedy
   leží UVNITŘ ní a potřebují vlastní odsazení místo dřívějšího odstupu. */
.vertical-dots { display: flex; gap: 5px; justify-content: center; margin: 0 0 14px; }
.vertical-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); transition: background .3s var(--ease-out), transform .3s var(--ease-out); }
.vertical-dot.is-active { background: var(--primary); transform: scale(1.25); }

/* Rozhoduje ŠÍŘKA OBSAHU, ne šířka okna: nad 1100 px stojí vedle obsahu boční
   panel a ubere mu --sidenav-w (226 px), pod 1100 px se panel schová a obsah
   dostane celé okno.

   Pod dlaždicí se název kategorie nesmí uříznout na „Smart Met…“, což vychází
   zhruba na 200 px na sloupec. Pět sloupců proto potřebuje ~1080 px obsahu:
   1080 + panel 226 + odsazení kontejneru 48 ≈ 1354 px okna. Mez se posunula
   z 1392 px právě o ten centimetr, o který se panel zúžil — pět sloupců se
   proto udrží na o kus užších obrazovkách než dřív. Níž se řada láme na tři
   a pak na dvě. Když se šířka panelu změní, přepočítat i tyhle meze. */
/* Mezistupeň: pět sloupců se ještě vejde, ale jsou užší, než na kolik je
   zvětšená sazba karty stavěná. Vrací se proto na úspornější míru — jinak by
   se název kategorie v záhlaví uřízl na „Smart Agricu…". Nad 1520 px je
   sloupec přes 240 px široký a zvětšená sazba se do něj vejde celá. */
@media (max-width: 1520px) {
    .vertical-head { font-size: 1rem; }
    .vertical-head a { padding: 13px 15px; gap: 10px; }
    .vertical-head-icon { width: 34px; height: 34px; }
    .vertical-body { padding: 14px 16px 18px; }
    .vertical-prod-name { font-size: .94rem; }
    .vertical-desc { font-size: .83rem; }
    .vertical-text { min-height: 140px; }
}
@media (max-width: 1354px) {
    .vertical-row { grid-template-columns: repeat(3, 1fr); }
    /* Na třech sloupcích je dlaždice zase přes 340 px široká — zvětšená sazba
       se do ní vejde a mezistupeň výš by ji tu zbytečně držel drobnou. */
    .vertical-head { font-size: 1.06rem; }
    .vertical-head a { padding: 15px 20px; gap: 12px; }
    .vertical-head-icon { width: 38px; height: 38px; }
    .vertical-body { padding: 16px 20px 20px; }
    .vertical-prod-name { font-size: 1rem; }
    .vertical-desc { font-size: .88rem; }
    .vertical-text { min-height: 152px; }
}
@media (max-width: 900px) {
    .vertical-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px)  { .vertical-row { gap: 14px; } }
@media (max-width: 480px)  {
    .vertical-row { grid-template-columns: 1fr; }
    .catalog-intro { padding-top: 14px; }
    /* Na telefonu je sloupec sotva 400 px široký — 34 px odsazení po stranách
       by ubralo pětinu míry řádku a nadpis by se lámal po dvou slovech. */
    .catalog-hero { padding: 18px 16px 16px; }
    .verticals-section { padding-bottom: 40px; }
    .vertical-text { min-height: 120px; }
}

/* Deska hlavičky se pod 620 px rozpadá na dva řádky: kaskáda značek nahoře,
   nadpis pod ní. Vedle sebe by na telefonu zbylo nadpisu pár desítek pixelů
   a lámal by se po slabikách. */
@media (max-width: 620px) {
    .catalog-hero { flex-direction: column; align-items: stretch; gap: 14px; }
    .hero-tech {
        border-right: none; border-bottom: 1px solid var(--border);
        padding-right: 0; padding-bottom: 12px;
    }
    /* Na jednom sloupci sedí mřížka na střed jako celek — zarovnaná vlevo by
       se pod vystředěným nadpisem tvářila jako cizí prvek. */
    .hero-tech { align-items: center; }
    .hero-tech-label { text-align: center; }
}

.vertical-card { display: flex; flex-direction: column; gap: 10px; position: relative; }
.vertical-icon {
    width: 54px; height: 54px; border-radius: 50%; background: var(--primary-soft);
    display: flex; align-items: center; justify-content: center; color: var(--brand); font-size: 1.4rem;
    transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.vertical-card:hover .vertical-icon { background: var(--primary); color: #fff; border-radius: var(--radius-morph); }
.vertical-kw { margin: -2px 0 2px; font-size: .82rem; font-weight: var(--w-medium); color: var(--brand); letter-spacing: .01em; }
.card-link { color: var(--primary); font-weight: var(--w-medium); font-size: .9rem; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; }
.card-link .arr { transition: transform .3s var(--ease-corp); display: inline-block; }
.vertical-card:hover .card-link .arr, a.card:hover .card-link .arr { transform: translateX(5px); }

/* === Karta produktu === */
.product-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.product-card:hover { border-color: var(--border-strong); }
.product-thumb { position: relative; aspect-ratio: 4/3; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out); }
.product-card:hover .product-thumb img { transform: scale(1.05); }
/* Rastr plošných spojů pod fotkou — prosvítá u produktů bez obrázku
   a dává i prázdné dlaždici firemní charakter. */
.product-thumb::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: url("/assets/img/pcb-tile.svg") center/240px 240px repeat;
    opacity: var(--pcb-raster);
}
.product-thumb img, .product-thumb .thumb-placeholder { position: relative; z-index: 1; }
.thumb-placeholder { font-size: 3rem; color: var(--marker); transition: color .3s var(--ease-corp); }

/* Lišty pro přepínání fotek přímo na kartě (objeví se po najetí myší) */
.card-nav {
    position: absolute; top: 0; bottom: 0; width: 46px; z-index: 3; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; opacity: 0; transition: opacity .2s var(--ease-out);
}
.card-nav-prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, rgba(11,18,46,.3), rgba(11,18,46,0)); }
.card-nav-next { right: 0; justify-content: flex-end; background: linear-gradient(270deg, rgba(11,18,46,.3), rgba(11,18,46,0)); }
.product-card:hover .card-nav, .card-nav:focus-visible { opacity: 1; }
.card-nav span {
    display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 6px;
    border-radius: 50%; background: rgba(255,255,255,.92); color: var(--heading); font-size: 1.25rem; line-height: 1;
    box-shadow: var(--shadow-sm); transition: background .15s, color .15s, transform .15s;
}
.card-nav:hover span { background: var(--primary); color: #fff; transform: scale(1.1); }
@media (hover: none) { .card-nav { opacity: 1; } }
.product-card:hover .thumb-placeholder { color: var(--brand); }
.thumb-placeholder.large { font-size: 6rem; }
.tech-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border: 1px solid var(--border); color: var(--brand); padding: 4px 11px; border-radius: 999px; font-size: .72rem; font-weight: var(--w-semibold); letter-spacing: .02em; }
.product-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-body h3 { font-size: 1.05rem; margin: 0; font-weight: var(--w-semibold); }
.product-body h3 a { transition: color .2s var(--ease-corp); }
.product-body h3 a:hover { color: var(--primary); }
.product-short { font-size: .88rem; flex: 1; color: var(--muted); }
/* SKU bývá dlouhé (MU-TMP-DS18B20-ADV-IP65-LORA-) a na úzké kartě zabralo
   celou řadu, takže se cena lámala na „3 450“ + „Kč“. flex-wrap ji pustí na
   vlastní řádek vcelku, margin-left: auto ji tam drží vpravo. */
.product-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; }
.product-foot .sku { min-width: 0; overflow-wrap: anywhere; }
.price { color: var(--deep); font-weight: var(--w-semibold); white-space: nowrap; margin-left: auto; }
.price-request { color: var(--muted); font-size: .85rem; }

/* === Nejprodávanější === */
.top-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; counter-reset: top; }
.top-item { display: flex; align-items: center; gap: 16px; padding: 12px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); }
.top-item:hover { border-color: var(--border-strong); border-radius: var(--radius-sm); }
.top-rank { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--deep); font-weight: var(--w-semibold); font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease-corp), color .3s var(--ease-corp); }
.top-item:hover .top-rank { background: var(--primary); color: #fff; }
.top-thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.top-thumb img { width: 100%; height: 100%; object-fit: cover; }
.top-thumb .thumb-placeholder { font-size: 1.5rem; }
/* min-width:0 je nutné — bez něj flexová položka neumí zmenšit pod šířku
   nejdelšího slova a dlouhý název produktu vystrčí cenu mimo obrazovku. */
.top-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: var(--w-medium); color: var(--heading); font-size: .95rem; line-height: 1.3; transition: color .2s var(--ease-corp); }
.top-name:hover { color: var(--primary); }
.top-tech { flex: 0 0 auto; font-size: .72rem; font-weight: var(--w-medium); color: var(--deep); background: var(--bg-soft); padding: 3px 11px; border-radius: 999px; }
.top-price { flex: 0 0 auto; font-weight: var(--w-semibold); color: var(--deep); white-space: nowrap; }

/* === Nové ucelené řešení (úvodní stránka) ===
   Sekce se teprve rozvíjí — zatím nadpis s uvedením. */
.solution-lead { max-width: 62ch; font-size: 1.02rem; }

/* === Osa úvodní stránky ====================================================
   Úvod je od 24. 8. 2026 stavěný na STŘED: nadpisy sekcí i jejich uvedení
   stojí na jedné svislé ose uprostřed sloupce, obsah pod nimi (karty, tabulka,
   pás s aplikací) zůstává zarovnaný vlevo — vycentrovat i ten by znamenalo
   číst odstavce na střed, což se čte špatně.
   Pravidla jsou schválně zúžená na dvě sekce úvodu; .section-title používá
   celý web a na podstránkách má zůstat vlevo u drobečků. */
.solution-section > .section-title,
.technology-home > .section-title { justify-content: center; text-align: center; }
.solution-section > .solution-lead,
.technology-home > .solution-lead { margin-inline: auto; text-align: center; text-wrap: pretty; }

/* === Záhlaví stránky / drobečky ===
   Světlý pás s rohovou kresbou plošných spojů vpravo nahoře — stejná decentní
   dekorace jako na úvodu, ne rastr přes celou plochu. */
.page-hero {
    position: relative; overflow: hidden; padding: 56px 0 44px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(160deg, #F4F4F4 0%, #FBFBFB 70%);
}
.page-hero::before {
    content: ""; position: absolute; top: 0; right: 0; pointer-events: none;
    width: clamp(120px, 15vw, 240px); aspect-ratio: 392/626;
    background: url("/assets/img/pcb-corner-a.svg") bottom left/contain no-repeat;
    transform: scale(-1);
    opacity: var(--pcb-decor);
}
.page-hero .container { position: relative; z-index: 1; }
/* Záhlaví podstránek drží tutéž osu jako úvodní stránka — drobečky, nadpis
   i uvedení stojí na středu sloupce. Zarovnání vlevo tlačilo celý web k
   bočnímu panelu a vpravo zbýval pruh prázdna; obsah SEKCÍ pod záhlavím
   zůstává vlevo, protože delší text se na střed čte špatně. */
.page-hero .container { text-align: center; }
.page-hero .page-hero-sub { margin-inline: auto; text-wrap: pretty; }
/* Pole hledání v záhlaví /hledat/ se musí vycentrovat taky — má vlastní
   max-width, takže samotné text-align: center na něj nestačí. */
.page-hero .search-page-form { margin-inline: auto; }
.page-hero h1 { margin-bottom: .35em; }
.page-hero-sub { max-width: 640px; font-size: 1.05rem; color: var(--muted); }
.breadcrumb { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.breadcrumb a { transition: color .2s var(--ease-corp); }
.breadcrumb a:hover { color: var(--primary); }

/* === Filters === */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.filter-label { color: var(--muted); font-size: .85rem; }
.chip {
    /* inline-flex kvůli odkazům: .chip visí i na <a> (filtr dokumentace),
       a inline element by svislé odsazení nedržel. */
    display: inline-flex; align-items: center;
    padding: 7px 17px; border: 1.5px solid var(--border-strong); border-radius: 999px;
    font-size: .85rem; color: var(--brand-grey); background: #fff;
    transition: border-color .3s var(--ease-corp), color .3s var(--ease-corp), background .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.chip:hover { border-color: var(--primary); color: #fff; background: var(--primary); border-radius: var(--radius-morph); }
.chip.active { background: var(--deep); color: #fff; border-color: var(--deep); font-weight: var(--w-medium); border-radius: var(--radius-morph); }

/* === Product detail === */
/* Detail začíná výš: 80px shora dělalo nad drobečkovou navigací prázdný pás
   a fotka s názvem se odsouvaly hluboko pod okraj okna. Dolů odsazení
   zůstává — odděluje detail od bloků pod ním. */
.product-detail { --section-pad-top: 28px; }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 14px 0 56px; }
.gallery-main { position: relative; aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out); }
.gallery-main:hover img { transform: scale(1.04); }
/* flex-wrap je nutné: čtyři náhledy po 88 px se na 360px displeji do řady
   nevejdou (4×88 + 3×10 = 382 px) a bez zalomení se poslední z nich uřízl za
   okrajem — bez posuvníku, tedy nedostupný. */
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.gallery-thumb { flex: 0 0 auto; width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1.5px solid var(--border); cursor: pointer; transition: border-color .3s var(--ease-corp), border-radius .3s var(--ease-corp); }
.gallery-thumb:hover { border-color: var(--primary); border-radius: var(--radius-morph); }
.gallery-thumb.active { border-color: var(--deep); border-radius: var(--radius-morph); }

/* Navigační lišty na okrajích hlavního obrázku (objeví se po najetí myší) */
.gallery-nav {
    position: absolute; top: 0; bottom: 0; width: 64px; z-index: 3; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; opacity: 0; transition: opacity .2s var(--ease-out);
}
.gallery-nav-prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, rgba(11,18,46,.28), rgba(11,18,46,0)); }
.gallery-nav-next { right: 0; justify-content: flex-end; background: linear-gradient(270deg, rgba(11,18,46,.28), rgba(11,18,46,0)); }
.gallery-main:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
.gallery-nav span {
    display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 8px;
    border-radius: 50%; background: rgba(255,255,255,.92); color: var(--heading); font-size: 1.6rem; line-height: 1;
    box-shadow: var(--shadow-sm); transition: background .15s, color .15s, transform .15s;
}
.gallery-nav:hover span { background: var(--primary); color: #fff; transform: scale(1.08); }
@media (hover: none) { .gallery-nav { opacity: 1; } }

.product-info h1 { font-size: 2rem; }
/* Krátký popis je od zavedení editoru formátovaný blok (odstavce, odrážky),
   ne jeden řádek — proto se sazba řídí .rich-text a tady zůstává jen barva
   a velikost, aby text pod názvem produktu dál působil jako perex. */
.product-short-lead { color: var(--muted); font-size: 1.1rem; margin: 0 0 4px; }
.product-short-lead p { margin-bottom: .55em; }
.product-short-lead ul, .product-short-lead ol { margin-bottom: .55em; }
.product-short-lead h2, .product-short-lead h3, .product-short-lead h4 { font-size: 1.15rem; margin: .9em 0 .35em; color: var(--heading); }
.sku-line { font-size: .9rem; color: var(--muted); }
/* Cenový box drží stejný rám jako karty; plošné spoje uvnitř ho odlišují
   od běžného „boxíku s pozadím". */
.price-box {
    position: relative; overflow: hidden; margin: 24px 0; padding: 20px 24px;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
}
.price-box::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("/assets/img/pcb-tile.svg") right -60px bottom -70px/240px 240px repeat;
    opacity: var(--pcb-decor);
    -webkit-mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 35%, #000 100%);
}
.price-box > * { position: relative; z-index: 1; }
.price-label { display: block; color: var(--muted); font-size: .85rem; }
.price-big { font-size: 2rem; font-weight: var(--w-semibold); color: var(--deep); font-family: var(--font-display); letter-spacing: -.01em; }
.price-big.price-request { color: var(--text); font-size: 1.4rem; }
.qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qty-row input { width: 90px; }
/* Poptávka + stažení datasheetu vedle sebe; na úzkých displejích pod sebou. */
.product-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.product-actions > .btn { flex: 1 1 auto; }
.datasheet-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; white-space: nowrap; }
.datasheet-btn svg { flex-shrink: 0; }
@media (max-width: 480px) { .product-actions > .btn { flex-basis: 100%; } }
.downloads { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.download-link { display: inline-flex; align-items: center; gap: .5em; padding: 10px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .9rem; transition: border-color .18s var(--ease-out), color .18s var(--ease-out), background .18s var(--ease-out), transform .2s var(--ease-spring), box-shadow .2s var(--ease-out); }
.download-link:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.product-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
/* Sazba .rich-text (odstavce, nadpisy, odrážky) je v assets/css/rich-text.css —
   sdílí ji web i administrace, aby náhled v editoru odpovídal výsledku. */
.param-table { width: 100%; border-collapse: collapse; }
.param-table th, .param-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: .9rem; }
.param-table th { color: var(--muted); font-weight: 500; width: 45%; }
.param-table tr { transition: background .15s var(--ease-out); }
.param-table tr:hover { background: var(--bg-soft); }

/* === Výzva k akci ===
   Tmavý pás s firemním gradientem patičky + plošnými spoji. */
.cta-band .cta-inner {
    /* 720 → 1000 px spolu s roztaženou mírou obsahu: úzká deska uprostřed
       široké stránky vypadala jako vystřižená z jiného layoutu. Text uvnitř
       zůstává čitelný, protože h2 i odstavec jsou vystředěné a krátké. */
    position: relative; overflow: hidden; text-align: center; max-width: 1000px; margin: 0 auto; padding: 64px 56px;
    background: linear-gradient(251deg, var(--primary-dark) 0%, var(--navy) 100%);
    border-radius: 32px;
}
.cta-band .cta-inner::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("/assets/img/pcb-tile-light.svg") center/260px 260px repeat;
    opacity: var(--pcb-decor);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 18%, #000 85%);
    mask-image: radial-gradient(ellipse at 50% 50%, transparent 18%, #000 85%);
}
.cta-band .cta-inner > * { position: relative; z-index: 1; }
.cta-band .cta-inner h2, .cta-band .cta-inner p { color: #fff; }
.cta-band .cta-inner p.muted { color: rgba(255, 255, 255, .78); }
.cta-band h2 { font-size: 1.8rem; }
.cta-band .btn-primary { background: #fff; color: var(--primary-dark); border-color: #fff; }
.cta-band .btn-primary:hover { background: transparent; color: #fff; border-color: #fff; border-radius: var(--radius-morph); }

/* === Antispam honeypot — mimo obrazovku, ne display:none (boti to kontrolují) === */
.hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* === Forms === */
label { display: block; font-size: .9rem; font-weight: var(--w-medium); margin-bottom: 6px; color: var(--deep); }
input, select, textarea {
    width: 100%; padding: 13px 18px; background: #fff; border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: .95rem;
    transition: border-color .3s var(--ease-corp), box-shadow .3s var(--ease-corp), background .3s var(--ease-corp);
}
input:hover, select:hover, textarea:hover { border-color: var(--brand); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233D73FA' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
select:focus { background-color: var(--bg-soft); }
select option { font-family: var(--font-body); }
.form-row { margin-bottom: 18px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.req { color: var(--primary); }
.field-error { color: var(--danger); font-size: .82rem; margin-top: 5px; display: block; }

/* === Poptávkový režim: doprovodné texty u cen a u odesílacího tlačítka ===
   Web je poptávkový katalog, ne objednávkový eshop (viz src/legal.php).
   Cena na stránce je proto vždy jen orientační a formulář nesmí vzbudit dojem
   závazné objednávky — tyhle dva prvky to říkají návštěvníkovi nahlas. */
.price-note {
    color: var(--muted); font-size: .78rem; line-height: 1.45;
    margin: 8px 0 0; max-width: 46ch;
}
.price-note[hidden] { display: none; }
.product-foot + .price-note { margin-bottom: 10px; }
/* Blok nad tlačítkem „Odeslat nezávaznou poptávku". Vizuálně oddělený, ale ne
   jako varování — je to vysvětlení procesu, ne chybová hláška. */
.legal-notice {
    margin: 22px 0 18px; padding: 14px 16px;
    background: var(--bg-soft); border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    color: var(--text); font-size: .86rem; line-height: 1.6;
}
.form-hint { font-size: .82rem; margin-top: 5px; display: block; }
/* Kontrolní otázka (antispam) — zúžené pole, ať nepůsobí jako hlavní údaj. */
.captcha-row input[name="captcha"] { max-width: 160px; }

/* === ZAŠKRTÁVACÍ CAPTCHA („Nejsem robot") ==================================
   Vlastní obdoba Turnstile pro případ, kdy nejsou klíče Cloudflare. Rámeček
   je schválně střídmý a v šířce pole formuláře — má vypadat jako součást
   formuláře, ne jako cizí reklamní blok.

   POLÍČKO JE DO PŘÍCHODU SKRIPTU SCHOVANÉ
   Bez JavaScriptu nemá zaškrtnutí co spustit a návštěvník by odeslal formulář,
   který server odmítne. Blok se proto zobrazí až tehdy, když mu captcha.js
   přidá .is-ready; do té doby je vidět slovní příklad z <noscript>.
   ========================================================================== */
.cap-box {
    display: none; align-items: center; gap: 11px;
    max-width: 340px; padding: 13px 16px;
    background: var(--card); border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
}
.cap-box.is-ready { display: flex; }
.cap-box.is-done { border-color: var(--success); background: #F1FAEC; }
.cap-check { width: auto; flex: 0 0 auto; margin: 0; accent-color: var(--success); cursor: pointer; }
.cap-check:disabled { cursor: default; }
.cap-label { margin: 0; font-size: .92rem; color: var(--text); cursor: pointer; user-select: none; }
.cap-box.is-done .cap-label { cursor: default; }
/* Stav („Ověřuji…", „Ověřeno") stojí vpravo a nesmí posouvat text políčka,
   proto margin-left: auto místo mezery za popiskem. */
.cap-state { margin-left: auto; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.cap-box.is-done .cap-state { color: #3F7A18; font-weight: var(--w-medium); }
/* Průběh hledání trvá desetiny sekundy — jemné pulzování dá najevo, že se
   něco děje, aniž by to strhávalo pozornost. */
.cap-box.is-working .cap-state { animation: cap-pulse 1s ease-in-out infinite; }
@keyframes cap-pulse { 50% { opacity: .45; } }
/* Náhrada bez JavaScriptu — chová se jako původní kontrolní otázka. */
.cap-noscript input[name="captcha"] { max-width: 160px; }
.checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: var(--w-regular); color: var(--text); cursor: pointer; }
.checkbox input { width: auto; margin-top: 4px; accent-color: var(--success); }
.checkbox-group { display: flex; gap: 24px; flex-wrap: wrap; margin: 8px 0 20px; }
.alert { padding: 13px 20px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: .9rem; }
.alert-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; }
.alert-success { background: #F1FAEC; border: 1px solid #C9E9B4; color: #3F7A18; }

/* === Inquiry / cart === */
.inquiry-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 12px; }
.cart-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .3s var(--ease-corp), box-shadow .3s var(--ease-corp); animation: cart-in .3s var(--ease-out); }
@keyframes cart-in { from { opacity: 0; transform: translateY(8px); } }
.cart-row:hover { border-color: var(--border-strong); box-shadow: 0 4px 0 0 var(--primary); }
.cart-row-info { flex: 1; display: flex; flex-direction: column; }
.cart-row-info .sku { color: var(--muted); }
.cart-row-qty { display: flex; align-items: center; gap: 4px; }
.qty-btn { width: 32px; height: 32px; border: 1px solid var(--border-strong); background: #fff; border-radius: 50%; color: var(--deep); cursor: pointer; font-size: 1.1rem; transition: border-color .3s var(--ease-corp), color .3s var(--ease-corp), background .3s var(--ease-corp), border-radius .3s var(--ease-corp); }
.qty-btn:hover { border-color: var(--primary); color: #fff; background: var(--primary); border-radius: 9px; }
.qty-btn:active { transform: scale(.92); }
.qty-input { width: 56px; text-align: center; padding: 7px; }
.cart-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; border-radius: 7px; padding: 6px 8px; transition: color .15s var(--ease-out), background .15s var(--ease-out); }
.cart-remove:hover { color: var(--danger); background: #FEF2F2; }

/* === Documents === */
/* Hledání a filtr stojí mezi hlavičkou a seznamem ve vlastním pásu: seznam pod
   ním si proto ubere horní odsazení (.section--tight ve šabloně), aby mezi
   ovládáním a prvním dokumentem nezůstala díra přes půl obrazovky. */
.doc-tools { padding-top: 34px; }
.doc-search { margin-top: 0; }
.doc-filter { margin: 18px 0 0; }
/* Číslo v tlačítku domény — kolik dokumentů pod ní je. Průhledné pozadí,
   aby fungovalo i na aktivním (tmavém) chipu bez druhého pravidla. */
.chip-count { margin-left: 5px; padding: 1px 6px; border-radius: 999px; background: rgba(0, 0, 0, .07); font-size: .75em; font-variant-numeric: tabular-nums; }
.chip.active .chip-count { background: rgba(255, 255, 255, .22); }
.doc-count { font-size: .85rem; margin: 0 0 18px; }
/* Odkaz „zrušit filtr" — v řádku s počtem i v hlášce o prázdném výsledku.
   Bez zvýraznění splyne s tlumeným textem kolem a nevypadá jako odkaz. */
.doc-count a, [data-doc-filter] .empty-state a {
    color: var(--primary); text-decoration: underline;
}

/* [hidden] musí mít vlastní pravidlo: .doc-item i .doc-list jsou flex,
   a `display: flex` by samotný atribut přebil. Schovává je živý filtr. */
.doc-item[hidden], .doc-list[hidden] { display: none; }
.doc-list { display: flex; flex-direction: column; gap: 12px; }
/* position: relative kvůli .doc-open::after — neviditelná vrstva odkazu, která
   z celé karty dělá jedno klikací místo (otevře čtečku). */
.doc-item { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 24px; }
.doc-item:hover { border-color: var(--border-strong); }
.doc-icon { background: #FEF2F2; color: #DC2626; font-weight: var(--w-semibold); padding: 8px 13px; border-radius: 999px; font-size: .8rem; }
.doc-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.doc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
.doc-cat { font-size: .75rem; color: var(--brand); }
/* Doména je štítek, kategorie holý text — na první pohled je vidět, že jde
   o dvě různé věci (čem to je vs. kam to patří). */
.doc-domain { font-size: .72rem; color: var(--deep); background: var(--primary-soft); padding: 2px 9px; border-radius: 999px; }
/* Karta = dva odkazy: .doc-open (otevřít ke čtení) a .doc-dl (stáhnout).
   Vnořit je do sebe nejde — HTML odkaz v odkazu nedovolí, a klik by si obojí
   přebíralo. Proto .doc-open roztáhne přes kartu neviditelnou vrstvu a kolečko
   se stažením leží nad ní (z-index), takže si každý klik najde svůj cíl. */
.doc-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; color: inherit; }
.doc-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.doc-dl {
    position: relative; z-index: 1; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 999px;
    color: var(--primary); background: var(--primary-soft);
    transition: transform .3s var(--ease-corp), background .2s var(--ease-out), color .2s var(--ease-out);
}
.doc-item:hover .doc-dl { transform: translateY(3px); }
.doc-dl:hover { background: var(--primary); color: #fff; }

/* === Čtečka dokumentu (plovoucí okno nad stránkou) ===
   Datasheet se po kliknutí nejdřív ČTE a teprve pak případně stahuje: PDF se
   otevře v okně, které se vznáší nad seznamem — stránka zůstává vidět kolem
   dokola, takže je pořád jasné, kde člověk je, a klik vedle okno zavře.
   Ikona stažení je po celou dobu v liště okna. Okno staví app.js
   (initDocumentViewer), tady jsou jen jeho šaty. Bez JavaScriptu se nic z toho
   nepoužije — odkaz vede rovnou na PDF. */
.doc-viewer {
    position: fixed; inset: 0; z-index: 150;
    display: flex; align-items: center; justify-content: center; padding: 34px;
    background: rgba(11, 18, 46, .62);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
/* .doc-viewer je flex, takže samotný atribut [hidden] by display přebil. */
.doc-viewer[hidden] { display: none; }
/* Vlastní okno. overflow: hidden ořízne lištu i rám do zaoblených rohů. */
.doc-viewer-panel {
    display: flex; flex-direction: column;
    width: min(1080px, 100%); height: min(900px, 100%);
    background: var(--card); border-radius: var(--radius); overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
    animation: doc-viewer-in .26s var(--ease-out) both;
}
@keyframes doc-viewer-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .doc-viewer-panel { animation: none; }
}
/* Pod otevřenou čtečkou se stránka nesmí rolovat — jinak se pod ní „ztratí“
   pozice v seznamu, na kterou se po zavření vracíme. */
body.doc-viewer-open { overflow: hidden; }
.doc-viewer-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 18px; color: #fff;
    background: var(--deep);
    box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.doc-viewer-badge { background: rgba(255, 255, 255, .15); color: #fff; }
.doc-viewer-title {
    flex: 1; min-width: 0; font-weight: var(--w-semibold); font-size: .98rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-viewer-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.doc-viewer-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08);
    color: #fff; border-radius: var(--radius-pill); padding: 9px 17px;
    font-family: inherit; font-size: .88rem; font-weight: var(--w-medium); cursor: pointer;
    transition: background .2s var(--ease-out), border-color .2s var(--ease-out),
                border-radius .3s var(--ease-corp);
}
.doc-viewer-btn:hover { background: rgba(255, 255, 255, .2); border-radius: var(--radius-morph); }
.doc-viewer-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Stažení je hlavní akce lišty — jediné plné tlačítko, ať je vidět na první pohled. */
.doc-viewer-dl { background: var(--primary); border-color: var(--primary); }
.doc-viewer-dl:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.doc-viewer-icon { width: 40px; height: 40px; padding: 0; border-radius: 999px; }
.doc-viewer-icon:hover { border-radius: 999px; }
.doc-viewer-close { font-size: 1.35rem; line-height: 1; }
/* Šedé pozadí plochy je barva, kterou má prohlížečová čtečka PDF kolem stránky —
   než se dokument načte, nebliká mezitím bílá. */
.doc-viewer-stage { flex: 1; min-height: 0; position: relative; background: #525659; }
.doc-viewer-frame { width: 100%; height: 100%; border: 0; display: block; }
.doc-viewer-frame[hidden] { display: none; }
.doc-viewer-fallback {
    position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center;
    padding: 28px; text-align: center; color: #fff; font-size: .95rem;
}
.doc-viewer-fallback[hidden] { display: none; }
@media (max-width: 900px) {
    /* Na malém displeji nemá okno kam „plavat" — nechá se mu jen úzký lem,
       aby bylo pořád poznat, že stránka pod ním nezmizela. */
    .doc-viewer { padding: 12px; }
    .doc-viewer-panel { width: 100%; height: 100%; border-radius: var(--radius-sm); }
    .doc-viewer-bar { padding: 10px 12px; gap: 10px; }
    .doc-viewer-title { font-size: .9rem; }
    /* Na úzké liště zbude z tlačítek jen ikona — popisek nese title/aria-label. */
    .doc-viewer-btn { padding: 9px; width: 40px; height: 40px; border-radius: 999px; }
    .doc-viewer-btn span { display: none; }
}

/* === FAQ accordion === */
.faq-section { max-width: 860px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden;
}
.faq-item[open] { border-color: var(--border-strong); }
.faq-item summary {
    list-style: none; cursor: pointer; padding: 20px 26px; font-weight: var(--w-medium); color: var(--deep);
    font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    transition: color .2s var(--ease-corp);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--primary); }
.faq-chevron { flex: 0 0 auto; color: var(--primary); font-size: .9rem; transition: transform .3s var(--ease-corp); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 24px 22px; }
.faq-answer p { margin: 0; color: var(--muted); font-size: .96rem; line-height: 1.7; }
.faq-item[open] .faq-answer { animation: faq-reveal .35s var(--ease-out); }
@keyframes faq-reveal { from { opacity: 0; transform: translateY(-6px); } }

/* === Technology guide === */
.tech-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tech-card { display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; scroll-margin-top: 100px; }
/* Plošné spoje v rohu karty místo barevného proužku nahoře. */
.tech-card::after {
    content: ""; position: absolute; right: -30px; bottom: -40px; width: 190px; height: 190px;
    background: url("/assets/img/pcb-corner-b.svg") bottom right/contain no-repeat;
    opacity: 0; transition: opacity .4s var(--ease-corp); pointer-events: none;
}
.tech-card:hover { border-color: var(--border-strong); }
.tech-card:hover::after { opacity: var(--pcb-decor); }
.tech-card > * { position: relative; z-index: 1; }
.tech-card-badge {
    align-self: flex-start; font-family: var(--font-display); font-weight: var(--w-medium); font-size: .8rem;
    letter-spacing: .06em; color: var(--brand); background: var(--primary-soft);
    padding: 5px 15px; border-radius: 999px;
}
/* h3 kvůli tomu, že se karty vykreslují i uvnitř úvodní stránky, kde nadpis
   sekce už h2 je — sazba musí zůstat stejná v obou případech. */
.tech-card h2, .tech-card h3 { font-size: 1.3rem; margin: 0; }
.tech-card p { margin: 0; font-size: .94rem; line-height: 1.65; }
.table-scroll { overflow-x: auto; }
/* separate + spacing 0 kvůli zaoblení — s border-collapse se rohy neořežou.
   table-layout: fixed drží srovnávané technologie ve stejně širokých sloupcích;
   bez toho si první sloupec vezme 45 % z .param-table a poslední se zmáčkne. */
.compare-table { min-width: 640px; border: 1px solid var(--border); border-radius: var(--radius-sm); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare-table th, .compare-table td { border-bottom: 1px solid var(--border); width: auto; }
.compare-table th:first-child, .compare-table td:first-child { width: 19%; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
/* Rohy se zaoblují na krajních buňkách — overflow:hidden tabulku neořízne. */
.compare-table thead th:first-child { border-top-left-radius: calc(var(--radius-sm) - 1px); }
.compare-table thead th:last-child { border-top-right-radius: calc(var(--radius-sm) - 1px); }
.compare-table tbody tr:last-child > *:first-child { border-bottom-left-radius: calc(var(--radius-sm) - 1px); }
.compare-table tbody tr:last-child > *:last-child { border-bottom-right-radius: calc(var(--radius-sm) - 1px); }
.compare-table thead th { background: var(--deep); color: #fff; font-weight: var(--w-medium); font-family: var(--font-display); font-size: .92rem; }
.compare-table thead th:first-child { color: rgba(255, 255, 255, .65); }
.compare-table tbody th { color: var(--deep); font-weight: var(--w-medium); background: var(--bg-soft); }
.compare-table td { color: var(--text); }
.compare-table tbody tr:hover { background: var(--primary-soft); }

/* === About / contact === */
.prose { max-width: 760px; }
.prose p { color: var(--text); font-size: 1.05rem; }

/* === Právní stránky (VOP, GDPR, reklamační řád) === */
.legal-page h2 { font-size: 1.25rem; margin: 2em 0 .6em; }
.legal-page h2:first-child { margin-top: 0; }
.legal-page ul, .legal-page ol { padding-left: 1.4em; line-height: 1.7; }
.legal-page li { margin-bottom: .5em; }
/* Kroky nákupu: poptávka → nabídka → potvrzení → faktura. Číslování je součást
   sdělení, proto výrazněji než u běžného seznamu. */
.legal-steps { counter-reset: legal-step; list-style: none; padding-left: 0; }
.legal-steps li {
    position: relative; padding-left: 44px; margin-bottom: 14px;
    font-size: 1.02rem; line-height: 1.6;
}
.legal-steps li::before {
    counter-increment: legal-step; content: counter(legal-step);
    position: absolute; left: 0; top: -1px;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary);
    font-weight: var(--w-semibold); font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}
.legal-contact { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.legal-contact h2 { font-size: 1.1rem; margin: 0 0 .5em; }
.about-stats { margin-top: 40px; }
.stat { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.stat:hover { border-color: var(--border-strong); }
/* Bez gradientního textu — plná korporátní modrá čte líp a nekopíruje
   zaběhnutý „AI hero" vzhled. */
.stat-num {
    font-size: 2.6rem; font-weight: var(--w-medium); font-family: var(--font-display);
    color: var(--deep); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: stretch; }
.map-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.map-frame { width: 100%; flex: 1; min-height: 340px; border: 0; display: block; }
.map-link { display: block; text-align: center; padding: 14px; font-weight: var(--w-medium); color: var(--primary); border-top: 1px solid var(--border); transition: background .3s var(--ease-corp), color .3s var(--ease-corp); }
.map-link:hover { background: var(--primary); color: #fff; }

/* === Auth === */
.auth-page { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 430px; position: relative; overflow: hidden; padding-top: 30px; }
/* Plošné spoje v rohu přihlašovací karty místo barevného proužku. */
.auth-card::before {
    content: ""; position: absolute; right: -24px; top: -30px; width: 160px; height: 250px;
    background: url("/assets/img/pcb-corner-a.svg") top right/contain no-repeat;
    opacity: var(--pcb-decor); pointer-events: none; transform: scaleY(-1);
}
.auth-card > * { position: relative; z-index: 1; }
.auth-card label { margin-top: 16px; }
.auth-card .btn { margin-top: 22px; }

/* === Partner === */
.partner-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.partner-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* === Tables === */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { text-align: left; padding: 12px 14px; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--border); }
.data-table td { padding: 14px; border-bottom: 1px solid var(--border); }
.data-table tbody tr { transition: background .15s var(--ease-out); }
.data-table tbody tr:hover { background: var(--bg-soft); }
.status { padding: 4px 13px; border-radius: 999px; font-size: .78rem; font-weight: var(--w-medium); }
.status-new { background: var(--primary-soft); color: var(--primary-dark); }
.status-in_progress { background: #FEF3E2; color: var(--warn); }
.status-closed { background: #F1FAEC; color: #3F7A18; }

/* === Misc === */
.thanks-page, .error-page { text-align: center; padding: 100px 24px; }
.thanks-page .section-title, .error-page .section-title { justify-content: center; }
.thanks-page p { max-width: 62ch; margin-inline: auto; }
/* Číslo poptávky je to hlavní, co si má zákazník ze stránky odnést — odkazuje
   se na ně celá další korespondence, ve které teprve vzniká smlouva. */
.thanks-number {
    display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    justify-content: center; margin: 0 auto 14px; padding: 10px 20px;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-pill);
}
.thanks-number strong { font-size: 1.15rem; font-weight: var(--w-semibold); color: var(--deep); letter-spacing: .02em; }
.thanks-page .legal-notice { text-align: left; max-width: 62ch; margin: 26px auto; }
.thanks-icon { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; background: var(--success); color: #fff; font-size: 2.5rem; display: flex; align-items: center; justify-content: center; animation: thanks-pop .5s var(--ease-spring); }
@keyframes thanks-pop { from { transform: scale(.4); opacity: 0; } }
.error-page { position: relative; overflow: hidden; }
.error-page::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: url("/assets/img/pcb-tile.svg") center/280px 280px repeat; opacity: var(--pcb-decor);
    -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, transparent 22%, #000 78%);
    mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, transparent 22%, #000 78%);
}
.error-page > * { position: relative; }
.error-page h1 {
    font-size: clamp(5rem, 16vw, 8.5rem); letter-spacing: -.04em; margin-bottom: .1em;
    font-weight: var(--w-light); color: var(--deep);
}
.error-page h1::before { display: none; }
.empty-state { padding: 40px; text-align: center; color: var(--muted); }

/* === Patička ===
   Firemní gradient (linear-gradient 251deg, #0061C7 → #00024C) plus zaoblený
   horní okraj a plošné spoje vpravo dole — přesně jako na solidustech.cz. */
.site-footer {
    position: relative; overflow: hidden; margin-top: 56px; padding: 60px 0 26px;
    background: linear-gradient(251deg, var(--primary-dark) 0%, var(--navy) 100%);
    border-radius: var(--radius-header) var(--radius-header) 0 0;
    color: rgba(255, 255, 255, .85);
}
.site-footer::before {
    content: ""; position: absolute; right: 0; bottom: 0; z-index: 0; pointer-events: none;
    width: clamp(220px, 34vw, 520px); aspect-ratio: 1/1; opacity: .16;
    background: url("/assets/img/pcb-corner-b.svg") bottom right/contain no-repeat;
    /* Dekorace je kreslená v #cecdcb — na tmavém podkladu ji přesvětlíme. */
    filter: brightness(3);
}
.site-footer .container { position: relative; z-index: 1; }
/* Pátý sloupec (Právní informace) přibyl s poptávkovým režimem — dokumenty
   musí být dostupné z každé stránky. */
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
/* Logotyp je modrošedý — na tmavém pozadí by zanikl, proto se vybílí. */
.footer-logo img { height: 44px; width: auto; margin-bottom: 12px; filter: brightness(0) invert(1); opacity: .95; }
.site-footer .muted { color: rgba(255, 255, 255, .78); }
.footer-grid h4 { color: #fff; font-size: .95rem; font-weight: var(--w-medium); margin-bottom: 14px; }
.footer-grid a { display: block; color: var(--footer-link); font-size: .9rem; padding: 4px 0; transition: color .3s var(--ease-corp), transform .3s var(--ease-corp); }
.footer-grid a:hover { color: #fff; transform: translateX(4px); }
.site-footer p a { color: var(--footer-link); transition: color .3s var(--ease-corp); }
.site-footer p a:hover { color: #fff; }
.footer-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .85rem; text-align: center; }
.footer-bottom.muted, .footer-bottom a { color: rgba(255, 255, 255, .7); }
.footer-bottom a:hover { color: #fff; }
/* Odkaz zpět na hlavní firemní web (katalog běží na subdoméně). */
.footer-main-note { font-size: .85rem; margin: 12px 0 12px; max-width: 42ch; }
.footer-main-link {
    display: inline-flex !important; align-items: center; gap: 7px;
    color: #fff !important; font-weight: var(--w-medium); font-size: .9rem;
    padding: 9px 20px !important; border: 2px solid rgba(255, 255, 255, .45);
    border-radius: var(--radius-pill); background: transparent;
    transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.footer-main-link:hover { background: #fff; color: var(--primary-dark) !important; border-color: #fff; border-radius: var(--radius-morph); transform: none !important; }
.footer-external { font-weight: var(--w-medium); }

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    html.js .reveal, html.js .reveal-stagger > *, html.js .hero-stagger > * { opacity: 1; transform: none; }
}

/* === Responsive === */
body { overflow-x: hidden; }  /* pojistka proti horizontálnímu posuvníku */

/* Patička má pět bloků a při 1fr sloupcích jim zbývá (šířka − mezery) / 6.
   Aby se nadpis „Právní informace“ vešel na řádek, potřebuje sloupec ~150 px,
   tedy obsah ≥ 1030 px. S bočním panelem (334 px) to je okno od 1410 px, bez
   panelu od 1080 px — pod tím se pětisloupec láme na tři a značka jde přes
   celou šířku nad ně. Užší okna řeší pravidla níž (1024 → dva, 560 → jeden). */
@media (max-width: 1409px) {
    .footer-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-grid > div:first-child { grid-column: 1 / -1; }
}

/* Reflow mřížek na tabletu */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .product-layout, .product-detail-grid, .inquiry-layout, .contact-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    /* Značka už přes celou šířku být nemusí — ve dvousloupci je sama sloupcem. */
    .footer-grid > div:first-child { grid-column: auto; }
    .top-list { grid-template-columns: 1fr; }
}

/* === Boční panel na úzkých obrazovkách =====================================
   Pod 1100 px už panel nemá vedle obsahu co ukrojit — schová se za levý okraj
   a vysouvá se tlačítkem v úzké horní liště. */
@media (max-width: 1100px) {
    .has-sidenav .site-shell { margin-left: 0; }
    .side-nav {
        width: min(var(--sidenav-w), 86vw); transform: translateX(-100%);
        transition: transform .3s var(--ease-out);
        overflow-y: auto; overscroll-behavior: contain;
    }
    .side-nav.open { transform: none; box-shadow: var(--shadow-lg); }
    /* Vysunutý panel je úzký — rozcestník se v něm rozbaluje pod položku,
       ne do strany, kde by pro něj nezbylo místo. */
    .side-main-nav .nav-dropdown-menu {
        position: static; display: flex; margin: 4px 0 6px; border: none; box-shadow: none;
        padding: 0 0 0 10px; min-width: 0; background: transparent; backdrop-filter: none;
        opacity: 1; visibility: visible; transform: none;
    }
    .side-main-nav .nav-dropdown::after { content: none; }
    .side-main-nav .nav-dropdown-toggle .caret { transform: translateY(-50%) rotate(90deg); }
    .nav-dropdown-menu a { padding: 10px 12px; }

    .topbar {
        display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 50;
        padding: 8px 16px; min-height: 62px;
        background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--border);
        border-radius: 0 0 var(--radius-header) var(--radius-header);
        box-shadow: 0 6px 22px rgba(8, 66, 102, .07);
    }
    .topbar-logo { margin-left: 4px; }
    .topbar-logo img { height: 38px; }
    .topbar-cart { margin-left: auto; }
    .nav-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; color: var(--deep);
        transition: background .3s var(--ease-corp), color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
    }
    .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--deep); color: #fff; border-radius: var(--radius-morph); }

    .side-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(11, 18, 46, .42); }
    .side-nav-backdrop[hidden] { display: none; }
    body.nav-open { overflow: hidden; }
}

/* === Mobil === */
@media (max-width: 768px) {
    .section { padding: 48px 20px; }
    .section-title { margin-bottom: 28px; }
    .cart-link { padding: 9px 13px; }
    /* Zmenšit velké nadpisy na mobilu */
    .product-info h1, .price-big { font-size: 1.6rem; }
}

/* === Malý mobil === */
@media (max-width: 560px) {
    .grid-4, .grid-3, .grid-auto, .form-grid-2, .stat-cards { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .container { padding: 0 16px; }
    .section { padding: 40px 16px; }
    .cart-link { font-size: .85rem; padding: 8px 12px; }
    /* Na úzkém mobilu je v horní liště jen ikona košíku a počet; v bočním
       panelu ale popisek zůstává — tam je na něj místa dost. */
    .topbar-cart .cart-label { display: none; }
    .btn-lg { padding: .8em 1.8em; font-size: 1rem; }
    .site-footer, .topbar { border-radius: 0; }
    /* Na úzkém mobilu se řádek žebříčku zlomí: technologie a cena jdou pod název. */
    .top-item { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; border-radius: var(--radius-sm); }
    .top-name { flex: 1 1 120px; }
    .top-tech { order: 3; }
    .top-price { order: 4; margin-left: auto; }
}

/* === Množství (stepper) na detailu + souhrn košíku === */
.qty-stepper { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); overflow: hidden; transition: border-color .3s var(--ease-corp), border-radius .3s var(--ease-corp); }
.qty-stepper:focus-within { border-color: var(--primary); border-radius: var(--radius-morph); }
.qty-stepper .qty-btn { width: 44px; height: 42px; border: none; border-radius: 0; background: #fff; color: var(--deep); font-size: 1.2rem; cursor: pointer; transition: background .3s var(--ease-corp), color .3s var(--ease-corp); }
.qty-stepper .qty-btn:hover { background: var(--primary); color: #fff; border-radius: 0; }
.qty-stepper .qty-input { width: 70px; height: 42px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0; text-align: center; font-size: 1rem; -moz-appearance: textfield; }
.qty-stepper .qty-input:focus { box-shadow: none; }
.qty-stepper .qty-input::-webkit-outer-spin-button, .qty-stepper .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-row-price { display: block; margin-top: 4px; font-size: .85rem; color: var(--muted); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--deep); font-size: 1.05rem; }
.cart-total strong { font-size: 1.35rem; font-weight: var(--w-semibold); color: var(--deep); }

/* === Cookie consent === */
.cookie-consent {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1000;
    width: calc(100% - 36px); max-width: 460px;
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: 24px;
    box-shadow: 0 20px 60px rgba(8, 66, 102, .26);
    animation: cc-in .4s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.cookie-consent[hidden] { display: none; }
@keyframes cc-in { from { opacity: 0; transform: translateX(-50%) translateY(24px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.cookie-consent-inner { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.cookie-consent-head { display: flex; gap: 14px; align-items: flex-start; }
.cookie-consent-icon { font-size: 1.7rem; line-height: 1; flex-shrink: 0; }
.cookie-consent-head h3 { margin: 0 0 5px; font-size: 1.08rem; letter-spacing: -.01em; }
.cookie-consent-head p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--muted, #64748b); }

.cookie-consent-options { display: flex; flex-direction: column; gap: 4px;
    padding-top: 16px; border-top: 1px solid var(--border);
    animation: cc-reveal .35s var(--ease-out, ease) both; }
@keyframes cc-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cookie-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 0; }
.cookie-opt + .cookie-opt { border-top: 1px solid var(--border); }
.cookie-opt-text { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.cookie-opt-text small { color: var(--muted, #64748b); font-weight: 400; font-size: .8rem; }

/* Toggle switch */
.cookie-switch { position: relative; flex-shrink: 0; width: 42px; height: 24px; }
.cookie-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cookie-switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--marker);
    transition: background .22s var(--ease-out, ease); }
.cookie-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .22s var(--ease-spring, cubic-bezier(.34,1.56,.64,1)); }
.cookie-switch input:checked + .cookie-switch-track { background: var(--success); }
.cookie-switch input:checked + .cookie-switch-track::after { transform: translateX(18px); }
.cookie-switch.is-locked .cookie-switch-track { background: var(--success); opacity: .5; }
.cookie-switch input:disabled { cursor: not-allowed; }

.cookie-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cookie-consent-actions .btn { flex: 1 1 auto; }
.cookie-consent-actions [data-cc="all"], .cookie-consent-actions [data-cc="save"] { flex: 2 1 auto; }
@media (max-width: 480px) {
    .cookie-consent { bottom: 12px; width: calc(100% - 20px); }
    .cookie-consent-inner { padding: 18px; }
}

/* ==========================================================================
   ZNAČKY TECHNOLOGIÍ — kde byly a kde jsou
   Nejdřív široký pás nad patičkou na každé stránce, pak mřížka 2 × 2 v bočním
   panelu. Obojí zrušeno: v panelu si nejširší značka (LoRaWAN) vynucovala
   sloupec 264 px, i když navigace sama vystačí s 226. Od 26. 8. 2026 stojí
   kaskádovitě nad nadpisem úvodní stránky — pravidla jsou u .hero-tech
   v oddílu hero banneru katalogu, výšky a posuny log u .tech-logo-*.
   ========================================================================== */

/* ==========================================================================
   VÝBĚR TECHNOLOGIE U PRODUKTU (LoRa / NB-IoT)
   Volba je POVINNÁ: bez ní app.js produkt do poptávky nepřidá a server řádek
   bez platné technologie stejně zahodí (resolveCartItems v src/pages.php).
   ========================================================================== */
.tech-choice {
    display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-alt);
    transition: border-color .25s var(--ease-out), background .25s var(--ease-out);
}
/* Chybějící volba se zvýrazní až ve chvíli, kdy zákazník klikne na „Přidat" —
   předem svítící červený rámeček by vypadal jako chyba, kterou udělal on. */
.tech-choice.is-missing { border-color: var(--danger); background: #FEF2F2; }
.tech-choice-label {
    font-size: .74rem; font-weight: var(--w-semibold); letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}
.tech-choice-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.tech-opt {
    flex: 1 1 auto; min-width: 96px; cursor: pointer;
    padding: 9px 16px; font-family: var(--font-display); font-size: .9rem; font-weight: var(--w-medium);
    color: var(--deep); background: #fff;
    border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
    transition: background .3s var(--ease-corp), color .3s var(--ease-corp),
                border-color .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.tech-opt:hover { border-color: var(--primary); color: var(--primary); border-radius: var(--radius-morph); }
.tech-opt.is-selected {
    background: var(--deep); border-color: var(--deep); color: #fff; border-radius: var(--radius-morph);
}
.tech-opt:focus-visible { outline: 3px solid var(--primary-soft); outline-offset: 2px; }
.tech-choice-hint { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--danger); }
.tech-choice-hint[hidden] { display: none; }
/* V kartě produktu je místa málo — menší sazba, ale stejná pravidla. */
.tech-choice-sm { margin: 0; padding: 10px 12px; gap: 6px; }
.tech-choice-sm .tech-choice-label { font-size: .66rem; letter-spacing: .06em; }
.tech-choice-sm .tech-opt { min-width: 0; padding: 7px 12px; font-size: .82rem; }
.tech-choice-sm .tech-choice-hint { font-size: .76rem; }

/* Zvolená technologie v řádku košíku. */
.cart-row-tech { display: block; margin-top: 3px; font-size: .82rem; color: var(--deep); }
.cart-row-tech strong { font-weight: var(--w-semibold); }
.cart-row-tech.is-missing { color: var(--danger); }

/* ==========================================================================
   NAŠEPTÁVAČ POD POLEM HLEDÁNÍ
   Nabídka se otevře od druhého znaku; data dodává /api/naseptavac.
   ========================================================================== */
.has-suggest { position: relative; }
.search-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
    max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
    background: rgba(255, 255, 255, .98); backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: 18px;
    box-shadow: var(--shadow-lg); padding: 6px;
}
.search-suggest[hidden] { display: none; }
/* V bočním panelu je pole úzké — nabídka se roztáhne, ať se název produktu
   vejde na řádek a nemusí se lámat po slabikách. */
.side-search .search-suggest { min-width: 320px; }
.suggest-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    border-radius: 999px; color: var(--deep);
    transition: background .2s var(--ease-out), border-radius .2s var(--ease-out);
}
.suggest-item:hover, .suggest-item.is-active { background: var(--bg-soft); border-radius: var(--radius-morph); }
.suggest-thumb {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; overflow: hidden;
    background: var(--bg-alt); display: flex; align-items: center; justify-content: center;
}
.suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.suggest-thumb-fallback { color: var(--marker); font-size: 1.1rem; }
.suggest-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.suggest-name {
    font-size: .9rem; font-weight: var(--w-medium); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest-sku { font-size: .76rem; color: var(--muted); font-family: ui-monospace, monospace; }
.suggest-more {
    display: block; margin-top: 4px; padding: 10px; text-align: center;
    font-size: .84rem; font-weight: var(--w-medium); color: var(--primary);
    border-top: 1px solid var(--border);
    transition: background .2s var(--ease-out);
}
.suggest-more:hover, .suggest-more.is-active { background: var(--primary-soft); }
.suggest-empty { margin: 0; padding: 14px 12px; font-size: .86rem; color: var(--muted); text-align: center; }

/* ==========================================================================
   FOTKY NA PLNOU PLOCHU SVÉHO RÁMEČKU
   Obrázky dřív seděly ve výřezu s odsazením (a hlavní fotka produktu ve čtverci),
   takže z přiděleného místa využily jen část. Nově vyplní celý rámeček —
   `contain` proto, aby se ze senzoru nic neuřízlo, a rámečky samotné jsou větší.
   ========================================================================== */
/* Detail produktu: širší sloupec s galerií a fotka bez odsazení. */
.product-layout { grid-template-columns: 1.15fr .85fr; }
.gallery-main { aspect-ratio: 4 / 3; }
.gallery-main img { object-fit: contain; padding: 0; }
.gallery-thumb { width: 88px; height: 88px; }

/* Dlaždice vertikál na úvodu — zrušené vnitřní odsazení fotky. */
.vertical-shot img:not(.shot-mark) { padding: 0; }

/* Karta produktu ve výpisu: výřez je vyšší (4:3 → 1:1), takže fotka dostane
   o třetinu víc plochy. `cover` zůstává — fotka výřez vyplní beze zbytku.
   Náhledy v žebříčku jsou kolečka 52 px, ty se nemění. */
.product-thumb { aspect-ratio: 1 / 1; }

@media (max-width: 1024px) {
    /* Pod tabletem je galerie nad textem přes celou šířku — čtverec by ji
       zbytečně natáhl na celou obrazovku. Jednosloupcové rozložení se tu musí
       zopakovat: pravidlo z responzivního bloku výš by přebilo .product-layout
       o pár řádků nad tímhle komentářem (stejná specificita, rozhoduje pořadí). */
    .product-layout { grid-template-columns: 1fr; }
    .gallery-main { aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   PRŮVODCE TECHNOLOGIEMI NA ÚVODNÍ STRÁNCE
   Tentýž obsah jako stránka /technologie/ (společný partial), jen zasazený
   do úvodu — nadpis sekce je tu h2, karty proto nesou h3.
   ========================================================================== */
.technology-home .solution-lead { max-width: 74ch; margin-bottom: 34px; }
.tech-compare-title { font-size: 1.25rem; margin: 56px 0 20px; }
/* Mezinadpis nad srovnávací tabulkou drží na úvodní stránce tutéž osu jako
   nadpisy sekcí nad ním. Na samostatné /technologie/ zůstává vlevo. */
.technology-home .tech-compare-title { text-align: center; }

/* --- Srovnávací tabulka na telefonu ---------------------------------------
   Čtyři sloupce se na 360px displej nevejdou ani zdaleka. Obalka .table-scroll
   sice umí posun do stran, jenže na dotykovém displeji o tom nic nenapoví —
   vypadá to prostě jako uříznutá tabulka (a půlka technologií je pryč).
   Pod 720 px se proto tabulka rozpadne na kartičky: jeden parametr = jedna
   karta, uvnitř tři hodnoty popsané názvem technologie z data-tech.
   Hlavička se skrývá, protože ji nahradily právě ty popisky. */
@media (max-width: 720px) {
    .table-scroll { overflow-x: visible; }
    .compare-table {
        min-width: 0; display: block; border: 0; border-radius: 0;
        table-layout: auto;
    }
    .compare-table thead { display: none; }
    .compare-table tbody { display: block; }
    .compare-table tbody tr {
        display: block; margin-bottom: 12px;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        overflow: hidden;
    }
    .compare-table tbody tr:hover { background: transparent; }
    /* :first-child v selektoru je tu kvůli specificitě, ne kvůli výběru:
       základní pravidlo `.compare-table th:first-child { width: 19% }` má
       (0,2,1) a bez něj by přebilo prosté `.compare-table tbody th` (0,1,2) —
       záhlaví kartičky by pak byl úzký tmavý špalík místo pruhu přes šířku. */
    .compare-table tbody th,
    .compare-table tbody td,
    .compare-table tbody th:first-child,
    .compare-table tbody td:first-child { display: block; width: auto; border-bottom: 0; }
    /* Název parametru je záhlaví kartičky. */
    .compare-table tbody th {
        background: var(--deep); color: #fff;
        font-weight: var(--w-semibold); font-size: .92rem;
        border-radius: 0;
    }
    .compare-table tbody td { padding: 10px 14px; }
    .compare-table tbody td + td { border-top: 1px solid var(--border); }
    .compare-table tbody td::before {
        content: attr(data-tech); display: block; margin-bottom: 2px;
        font-size: .68rem; font-weight: var(--w-semibold); letter-spacing: .08em;
        text-transform: uppercase; color: var(--muted);
    }
    /* Zaoblení rohů si na kartičce řeší samotný <tr> přes overflow: hidden. */
    .compare-table tbody tr:last-child th,
    .compare-table tbody tr:last-child td,
    .compare-table tbody tr:last-child > *:first-child,
    .compare-table tbody tr:last-child > *:last-child { border-radius: 0; }
}
@media (max-width: 900px) {
    .tech-cards { grid-template-columns: 1fr; }
}

/* === SDĚLENÍ V BOČNÍM PANELU ==============================================
   Reklamní banner nebo textová zpráva v mezeře mezi navigací a spodním blokem.
   Plní se v administraci (Sdělení v panelu); bez aktivního sdělení se
   nevykreslí vůbec nic a panel vypadá jako dřív.

   PROČ MÁ VLASTNÍ POSUVNÍK
   Panel má `overflow: visible` — musí, jinak by uřízl vyjíždějící podnabídku
   vertikál. Dlouhé sdělení by z něj proto vyteklo přes spodní blok
   s Poptávkou. Blok si tedy hlídá výšku sám: `min-height: 0` mu dovolí se
   v pružném sloupci srazit a přebytek se odroluje uvnitř něj.
   ========================================================================== */
.side-promos {
    display: flex; flex-direction: column; gap: 12px;
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    /* Zarovnat s odsazením položek navigace, ať blok nevisí u samé hrany. */
    padding: 0 4px;
}
.side-promo {
    display: flex; flex-direction: column; gap: 9px;
    padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
/* Obrázek vyplní šířku panelu; poměr stran si drží podle souboru. */
.side-promo-img { display: block; border-radius: 7px; overflow: hidden; }
.side-promo-img img { display: block; width: 100%; height: auto; }
a.side-promo-img { transition: opacity .2s var(--ease-out); }
a.side-promo-img:hover { opacity: .88; }
/* Text je v úzkém sloupci — menší stupeň a užší proklad, ať se vejde. */
.side-promo-text { font-size: .82rem; line-height: 1.5; color: var(--text); }
.side-promo-text > :first-child { margin-top: 0; }
.side-promo-text > :last-child { margin-bottom: 0; }
.side-promo-text p { margin: 0 0 6px; }
.side-promo-text ul, .side-promo-text ol { margin: 0 0 6px; padding-left: 17px; }
.side-promo-text h2, .side-promo-text h3, .side-promo-text h4 {
    font-size: .88rem; margin: 0 0 5px; color: var(--deep); line-height: 1.3;
}
.side-promo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 14px; border-radius: var(--radius-pill);
    background: var(--primary); color: #fff;
    font-size: .8rem; font-weight: var(--w-medium); text-align: center;
    transition: background .3s var(--ease-corp), border-radius .3s var(--ease-corp);
}
.side-promo-btn:hover { background: var(--primary-dark); border-radius: var(--radius-morph); }