/* ═══════════════════════════════════════════════════════════════════════
STYLE-SECTIONS.CSS — sdílené utility a block komponenty společné všem page-typům
Načítá: globálně z hlavičky šablony (2. v pořadí PDU CSS: global.css → SECTIONS →
blog → category → pages → products); navíc @import v paste-html — viz meta/manual.md kap. 4
Prefix tříd: různé — viz mapa (.pdu-sec-* + přestyl šablon); .pdu-ai-* = sections/ai/style-ai.css
───────────────────────────────────────────────────────────────────────
MAPA SEKCÍ (Ctrl+F na "SEKCE N."):
1. SKRÝVÁNÍ PRVKŮ — .pdu-sec-hide-element-* (visibility podle šířky displeje)
2. SIDEBAR NAV — .pdu-sec-snav-* (3 barevná CTA v bílé kartě, sidebar banner)
3. TOPBAR — .pdu-sec-topbar-* (banner + bonus CTA nad obsahem) — NENASAZENO
4. COUNTER — .pdu-sec-counter-* (animovaný countup box)
5. DOPRAVA — .pdu-sec-doprava-* (cenová pásma dopravy, karta do sidebaru)
6. SLEVOVÝ INFORMAČNÍ PROUŽEK — .pdu-sec-sleva* (pruh v obsahu) — NENASAZENO
7. SLEVOVÁ HORNÍ LIŠTA — .pdu-sec-promobar* (tmavý pruh nad obsahem) — NENASAZENO
8. REŽIM AI — PŘESUNUTO do sections/ai/style-ai.css (2026-08-20); číslování sekcí se nemění
9. VÝPIS ČLÁNKŮ /radce-pro-vyber-vhodneho-oploceni/ — přestyl na mřížku nástrojů
10. SHOPTET NADPISY — přestyl .homepage-group-title / .category-title / titulku stránky
11. HP NOVÉ ČLÁNKY — přestyl .in-index .homepage-blog-wrapper (karty jako blog listing)
12. PATIČKA — .pdu-sec-foot-* (redesign 2026-07-23, v2 one-banner)
13. CLS REZERVACE — rezervace místa pro pozdě dorenderované prvky (logo, košík, HP widget)
═══════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────
SEKCE 1. SKRÝVÁNÍ PRVKŮ
Truly-shared visibility utility (manuál kap. 11) — schová prvek pod/nad hranicí
mobilního zobrazení Shoptetu (991/992 px).
STAV: NENASAZENO v obsahu — 0× v záloze e-shopu (stránky/články/produkty,
2026-07-27) i v pdu-code; drží se záměrně jako sdílená utilita.
─────────────────────────────────────────────────────────────────────── */
/* Skrýt prvek při šířce displeje menší než 61.9375em */
@media screen and (max-width: 61.9375em) {
.pdu-sec-hide-element-max991 {
display: none;
}
}
/* Skrýt prvek při šířce displeje větší než 62em */
@media screen and (min-width: 62em) {
.pdu-sec-hide-element-min992 {
display: none;
}
}
/* ───────────────────────────────────────────────────────────────────────
SEKCE 2. SIDEBAR NAV (.pdu-sec-snav-*)
Tři barevná CTA tlačítka ve svislém stacku v bílé kartě — sidebar banner,
použitelné na kterékoliv stránce (homepage, kategorie, blog, info-page).
───────────────────────────────────────────────────────────────────────
Popis:
- Vertikální stack 3 CTA buttonů v bílé kartě s 1px gray rámečkem
(radius xl, padding 1.125em) — wrapper se chová jako hero karta
- Per-button:
* radial-gradient overlay v pravém horním rohu (subtle highlight)
* 1px gray ring (box-shadow) jako jemný rámeček
* 0.125em colored border (matches bg color v default stavu)
- Modifikátory barev: .is-primary (zelená akcent), .is-accent (žlutá CTA),
.is-dark (tmavomodrá). Hover ve všech 3 → bílé bg + zelený gradient
(jako dekovaci hero karta) + tmavý border + translateY(-1px)
- Šipka uvnitř buttonu se posune o 3 px doprava na hover
- Font: inherit ze Shoptet šablony (žádný hardcode font-family)
- Vhodné pro sidebar na kterékoliv stránce (homepage, kategorie, blog, info-page)
HTML:
─────────────────────────────────────────────────────────────────────── */
.pdu-sec-snav-card {
display: flex;
flex-direction: column;
gap: 0.625em;
margin: 1.125em 0;
padding: 1.125em;
background: var(--pdu-barva-bila);
border: 1px solid var(--pdu-barva-okraj-jemny);
border-radius: var(--pdu-radius-xl);
}
/* Flex centered group — label + arrow jako jeden celek centered v buttonu.
Konzistentní visual napříč všemi labely (krátký "Kalkulátor" i delší
"Pobočky a kontakty") — arrow drží blízko textu jako jeden vizuální blok.
Selektor pro snav používá nav.pdu-sec-snav-card a.pdu-sec-snav (specifity 0,2,2)
aby přebil Shoptet base, který má `nav a { display: block }` na anchor uvnitř