/*
* ============================================================
* BUTTERFLYWONDERLAND.CZ — Vlastní CSS vrstva
* Verze: 1.0 | Datum: 2026-05-19
* ============================================================
*
* TENTO SOUBOR JE VÁŠ HLAVNÍ EDITOVATELNÝ SOUBOR.
* Načítá se jako POSLEDNÍ — přebíjí vše ostatní.
*
* Struktura:
* 01. Proměnné (barvy, fonty, rozměry)
* 02. Základní typografie
* 03. Layout a obálky
* 04. Hlavička (header)
* 05. Navigace
* 06. Produktové karty
* 07. Tlačítka
* 08. Bannery a slider
* 09. Patička (footer)
* 10. Stránka produktu
* 11. Košík a pokladna
* 12. Mobilní zařízení
* 13. Vlastní úpravy (vaše sekce)
*
* ============================================================
*/

/* ============================================================
01. PROMĚNNÉ (BARVY, FONTY, ROZMĚRY)
============================================================
Změna hodnoty zde = změna na celém e-shopu.
*/

:root {
/* --- Barvy --- */
--barva-hlavni: #239ceb; /* Modrá: tlačítka, odkazy, aktivní prvky */
--barva-hlavni-hover: #1a7fcc; /* Modrá tmavší: hover efekt */
--barva-sekundarni: #15c8f9; /* Světle modrá: sekundární akcenty */
--barva-zvyrazneni: #ffc807; /* Žlutá: ceny, hvězdičky, highlights */
--barva-zvyrazneni-hover:#e6b400; /* Žlutá tmavší: hover */
--barva-text: #222222; /* Základní text */
--barva-text-svetla: #666666; /* Vedlejší text, popisky */
--barva-pozadi: #ffffff; /* Pozadí stránky */
--barva-pozadi-svetla: #f8f8f8; /* Světlé pozadí sekcí */
--barva-border: #e0e0e0; /* Ohraničení prvků */
--barva-header: #ffffff; /* Pozadí hlavičky */
--barva-footer: #1a1a2e; /* Pozadí patičky */
--barva-footer-text: #cccccc; /* Text v patičce */
--barva-cookies: #1A1937; /* Lišta cookies */

/* --- Fonty --- */
--font-nadpisy: 'Exo 2', sans-serif; /* Nadpisy h1–h6 */
--font-text: 'Source Sans 3', sans-serif; /* Základní text */
--velikost-textu: 14px;
--radkovani: 1.6;

/* --- Rozměry --- */
--sirka-obsahu: 1200px; /* Maximální šířka obsahu */
--padding-sekce: 40px; /* Svislé odsazení sekcí */
--border-radius: 4px; /* Zaoblení rohů */
--border-radius-btn: 4px; /* Zaoblení tlačítek */

/* --- Přechody --- */
--prechod: 0.2s ease; /* Rychlost hover animací */
}

/* ============================================================
02. ZÁKLADNÍ TYPOGRAFIE
============================================================ */

body {
font-family: var(--font-text);
font-size: var(--velikost-textu);
color: var(--barva-text);
line-height: var(--radkovani);
background-color: var(--barva-pozadi);
}

h1, h2, h3, h4, h5, h6 {
font-family: var(--font-nadpisy);
color: var(--barva-text);
line-height: 1.3;
margin-bottom: 0.5em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }


/* Filtry - move clear filters button to the right */
.sidebar-left h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.sidebar-left h3 button {
    margin-left: auto;
} font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

a {
color: var(--barva-hlavni);
text-decoration: none;
transition: color var(--prechod);
}

a:hover {
color: var(--barva-hlavni-hover);
}

p {
margin-bottom: 1em;
}

/* ============================================================
03. LAYOUT A OBÁLKY
============================================================ */

.overall-wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.container {
max-width: var(--sirka-obsahu);
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}

.content-wrapper {
flex: 1;
padding-top: var(--padding-sekce);
padding-bottom: var(--padding-sekce);
}

/* ============================================================
04. HLAVIČKA (HEADER)
============================================================
POZOR: .navigation-wrapper, .logo img a .search záměrně
nepřepisujeme — šablona má vlastní flex layout, který
správně rozmísťuje logo, navigaci a utility ikony (košík,
přihlášení). Přepsání display/gap/flex by zhroutilo
absolutní pozicování přihlašovacího tlačítka.
*/

header {
background-color: var(--barva-header);
border-bottom: 1px solid var(--barva-border);
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Vyhledávání — pouze border/focus styly, NE flex vlastnosti */
.search input[type="text"],
.search input[type="search"] {
border: 1px solid var(--barva-border);
border-radius: var(--border-radius);
padding: 8px 12px;
font-family: var(--font-text);
font-size: var(--velikost-textu);
transition: border-color var(--prechod);
}

.search input:focus {
border-color: var(--barva-hlavni);
outline: none;
}

/* ============================================================
05. NAVIGACE
============================================================ */

.top-navigation-bar {
background-color: var(--barva-hlavni);
}

.top-navigation-bar a {
color: #ffffff;
font-family: var(--font-text);
font-size: var(--velikost-textu);
font-weight: 600;
padding: 10px 14px;
display: inline-block;
transition: background-color var(--prechod);
}

.top-navigation-bar a:hover,
.top-navigation-bar a.active {
background-color: var(--barva-hlavni-hover);
color: #ffffff;
}

/* Podmenu (dropdown) */
.top-navigation-bar .dropdown-menu {
background-color: #ffffff;
border: 1px solid var(--barva-border);
border-top: 3px solid var(--barva-hlavni);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.top-navigation-bar .dropdown-menu a {
color: var(--barva-text);
padding: 8px 16px;
}

.top-navigation-bar .dropdown-menu a:hover {
background-color: var(--barva-pozadi-svetla);
color: var(--barva-hlavni);
}

/* Rozšíření hlavní navigace — využití nevyužitého prostoru
-------------------------------------------------------
nav je position:absolute uvnitř .navigation-wrapper (position:relative,
full-width). Polohu a šířku nav řídí kombinace left + right, nikoliv width.
Shoptetův "fitted" JS čte offsetWidth nav a do ní vejde položky —
čím širší nav, tím více položek před hamburgerem.

Skutečná struktura (ověřeno JS, 1440px viewport):
Ext. CSS: nav CSS left = −110px, poté margin-left posouvá na finální pozici
.site-name-wrapper (logo): x=60 → x=210px (šířka 150px)
Nav MUSÍ začínat za x=210px, jinak "Pokerové karty" leží pod logem.

Naše řešení — přepsání left + margin-left:
left: 225px !important → nav začíná na x=225px (15px za logem)
margin-left: 0 → resetujeme ext. margin-left
width: auto → šířka řízena left + right

Responsive right hodnoty (dvě media-query):
─────────────────────────────────────────────
.header-top (ikony) má max-width:1320px, auto-centering:
• W < 1320px: header-top = plná šířka (0…W), leva marg = 0
ikona search = W − 130px od levého okraje (right:100px v h-t + šířka 30px)
mh right:145px → mhRight = W−145 → gap = (W−130)−(W−145) = 15px ✓ (konstantní)
T = W − 145 − 20 − 225 = W − 390px
5 položek celkem ≈ 501px → všechny viditelné do W=891px ✓
• W ≥ 1320px: header-top centrujem (leva marg = (W−1320)/2)
ikona search.left = (W−1320)/2 + 1190px
Pro gap=15px: mh right = W/2 − 515px = calc(50vw − 515px) ← sleduje ikonu přesně
T = W − (50vw−515) − 20 − 225 = W/2 + 270px
Při 1440px: T=990px, při 1320px: T=930px (plynulý přechod z 1319px→930)

Selector nav#navigation (specifičnost 0,1,0,1) přebíjí developer's
#navigation (0,1,0,0) z externího honzabartos.myshoptet.com stylesheetu.
*/

/* ── 700px+: desktop nav — ikony jsou konstantně ~130px od pravého okraje (W<1320px)
nav.left=165px (logo ~150px + 15px mezera), mh.right=145px → T = W − 330px
Padding 15px → 5 položek (≈401px) viditelné do viewport 731px, 4 do ~572px
── */
@media (min-width: 700px) {
nav#navigation {
left: 165px !important;
margin-left: 0 !important;
right: 155px !important;
width: auto !important;
}

/* gap k search = 15px (konstantní pro W<1320px); T = W − 330px */
.navigation-wrapper .menu-helper {
right: 145px !important;
}

/* Menší padding → více položek se vejde při užších viewportech */
#navigation .menu-level-1 > li > a {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* První položka: 15px gap od loga (text začíná x=180px, logo končí x=150px → 30px gap) */
#navigation .menu-level-1 > li:first-child > a {
padding-left: 15px !important;
}
}

/* ── 1024px+: zvětšit padding pro pohodlnější čtení na širších viewportech
nav pozice zděděna z 700px bloku (left=165, right=155, T = W−330px)
Při W=1024: T=694px → 5 položek (≈501px) ✓ (rezerva 193px)
── */
@media (min-width: 1024px) {
#navigation .menu-level-1 > li > a {
padding-left: 25px !important;
padding-right: 25px !important;
}
/* text začíná x=190px, logo končí x=150px → 40px gap */
#navigation .menu-level-1 > li:first-child > a {
padding-left: 15px !important;
}
}

/* ── 1320px+: header-top získává centrovací marži → sledujeme posun ikonou calc(50vw) ── */
@media (min-width: 1320px) {
nav#navigation {
left: calc(50vw - 495px) !important; /* při 1440px: 225px */
right: calc(50vw - 505px) !important; /* při 1440px: 215px */
}
/* gap k search = 15px při jakémkoliv W≥1320px; T = W/2+270px */
.navigation-wrapper .menu-helper {
right: calc(50vw - 515px) !important; /* při 1440px: 205px */
}
}

/* ============================================================
06. PRODUKTOVÉ KARTY
============================================================
PRAVIDLO: Nikdy neměnit strukturální vlastnosti (display, flex,
grid, overflow, aspect-ratio, width, height) na Shoptet nativních
prvcích bez předchozí inspekce skutečného DOM. Pouze vizuální CSS.

BEZPEČNÉ: color, font-*, border-color, background-color,
box-shadow, transform (hover), transition
ZAKÁZANÉ bez DOM inspekce: display, flex-*, grid-*, overflow,
aspect-ratio, width, height, position, padding, margin
(výjimka: velmi jemné hodnoty jako margin-bottom)
*/

/* Hover efekt karty — pouze vizuální shadow + lift */
.product:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Cena — barva a tučnost, žádná layout změna */
.product .price-final {
color: var(--barva-zvyrazneni);
font-weight: 700;
}

/* Název produktu hover — pouze barva */
.product .name:hover {
color: var(--barva-hlavni);
}

/* Dostupnost — pouze barva a velikost písma */
.product .availability {
font-size: 0.8rem;
color: var(--barva-text-svetla);
}

.product .p-desc {
font-size: 0.82rem;
color: var(--barva-text-svetla);
margin-top: 6px;
}

/* ============================================================
07. TLAČÍTKA
============================================================ */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 20px;
border-radius: var(--border-radius-btn);
font-family: var(--font-text);
font-size: var(--velikost-textu);
font-weight: 600;
cursor: pointer;
transition: background-color var(--prechod), color var(--prechod), border-color var(--prechod);
border: 2px solid transparent;
text-decoration: none;
line-height: 1;
}

/* Primární tlačítko (modré) */
.btn-primary {
background-color: var(--barva-hlavni);
border-color: var(--barva-hlavni);
color: #ffffff;
}

.btn-primary:hover {
background-color: var(--barva-hlavni-hover);
border-color: var(--barva-hlavni-hover);
color: #ffffff;
}

/* Sekundární tlačítko (obrys) */
.btn-secondary {
background-color: transparent;
border-color: var(--barva-hlavni);
color: var(--barva-hlavni);
}

.btn-secondary:hover {
background-color: var(--barva-hlavni);
color: #ffffff;
}

/* Žluté (zvýrazněné) tlačítko */
.btn-warning,
.btn-highlight {
background-color: var(--barva-zvyrazneni);
border-color: var(--barva-zvyrazneni);
color: #222222;
}

.btn-warning:hover,
.btn-highlight:hover {
background-color: var(--barva-zvyrazneni-hover);
border-color: var(--barva-zvyrazneni-hover);
}

/* Tlačítko "Přidat do košíku" */
.btn-cart,
[class*="add-to-cart"] {
background-color: var(--barva-zvyrazneni);
border-color: var(--barva-zvyrazneni);
color: #222222;
width: 100%;
}

.btn-cart:hover,
[class*="add-to-cart"]:hover {
background-color: var(--barva-zvyrazneni-hover);
border-color: var(--barva-zvyrazneni-hover);
}

/* ============================================================
08. BANNERY A SLIDER
============================================================
POZOR: [class*="banner"] v Chrome matchuje case-insensitivně →
zachytí i .infoIconsBannerGrid, .infoIconsBanner, .newsBannerWrapper atd.
Proto NEPOUŽÍVÁME broad [class*="banner"] img { width:100% }.
Custom třídy (customBanner, infoIconsBanner, atd.) jsou styled
v sekci 14 (frontpage layout).
*/

/* Shoptet nativní slider bannery — jen .normal-banners-line */
.normal-banners-line {
margin-bottom: 30px;
}

.normal-banners-line img {
width: 100%;
height: auto;
display: block;
border-radius: var(--border-radius);
}

/* ============================================================
09. PATIČKA (FOOTER)
============================================================ */

footer,
.footer {
background-color: var(--barva-footer);
color: var(--barva-footer-text);
padding: 40px 0 20px;
margin-top: auto;
}

footer a,
.footer a {
color: var(--barva-footer-text);
transition: color var(--prechod);
}

footer a:hover,
.footer a:hover {
color: #ffffff;
}

footer h3,
footer h4,
.footer h3,
.footer h4 {
color: #ffffff;
font-size: 1rem;
margin-bottom: 15px;
}

/* ============================================================
10. STRÁNKA PRODUKTU (DETAIL)
============================================================ */

.product-detail h1 {
font-size: 1.8rem;
margin-bottom: 10px;
}

.product-detail .price-final {
font-size: 1.8rem;
color: var(--barva-zvyrazneni);
font-weight: 700;
}

.product-detail .btn-cart {
font-size: 1rem;
padding: 12px 28px;
}

/* Šablona nastavuje žluté pozadí přes --color-tertiary (#ffc807) na .add-to-cart — odstranit */
.product-top .add-to-cart {
background-color: transparent !important;
}

/* ============================================================
11. KOŠÍK A POKLADNA
============================================================ */

[class*="cart-table"] th {
background-color: var(--barva-hlavni);
color: #ffffff;
font-family: var(--font-nadpisy);
}

[class*="cart-total"],
[class*="order-total"] {
font-size: 1.2rem;
font-weight: 700;
color: var(--barva-zvyrazneni);
}

/* ============================================================
12. MOBILNÍ ZAŘÍZENÍ
============================================================ */

@media (max-width: 768px) {
:root {
--padding-sekce: 24px;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }

.products-block {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

/* .navigation-wrapper a .logo img — nepřepisujeme, viz sekce 04 */
}

@media (max-width: 480px) {
.products-block {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}

.btn {
padding: 8px 14px;
}
}

/* ── <768px: mobilní nav overlay ─────────────────────────────────────────
Šablona skrývá nav pomocí left:-322px a zobrazuje ho přidáním třídy
.navigation-window-visible na body (ne přes .visible na nav elementu!).
splitMenu() přidá .visible na nav při každém načtení → .visible nelze
použít jako trigger — způsobuje trvalé zobrazení nav na mobilu.
Oprava: používáme .navigation-window-visible stejně jako šablona;
pouze přepisujeme šířku na 100% (šablona používá 320px sidebar).
──────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
.navigation-window-visible nav#navigation {
width: 100% !important;
right: 0 !important;
margin-left: 0 !important;
bottom: auto !important; /* nezakotvit spodní hranu — nav se smrskne na výšku obsahu */
height: auto !important; /* přepsat height:100% z Opal šablony */
z-index: 100 !important; /* nav position:fixed má z-index:auto → header (z-index:99) by ho překrýval;
z-index:100 zajistí, že nav (a X tlačítko) je nad headerem */
}
/* .navigation-in má height:100% — bez přepsání by výška zůstala cirkulárně nulová */
.navigation-window-visible nav#navigation .navigation-in {
height: auto !important;
}
/* X tlačítko — absolutní pozice, 6px od pravého okraje (iOS zachytává swipe
gesto v posledních ~15px, takže right:0 ztrácí část klikatelné plochy).
touch-action:manipulation odstraní 300ms tap-delay bez flex-layout hacků
(display:flex na span rozbíjí iOS touch-dispatch a vyžaduje dvojité klepnutí). */
.navigation-window-visible nav#navigation .navigation-close {
position: absolute !important;
right: 6px !important;
top: 0 !important;
z-index: 1001 !important;
touch-action: manipulation !important;
cursor: pointer !important;
}
/* Skrýt tmavý overlay zcela — nav je full-width, overlay není potřeba */
.navigation-window-visible .overall-wrapper::after {
display: none !important;
}
/* Skrýt košík a hamburger button když je full-screen nav otevřen.
Košík má z-index:999 a probublává nad nav; hamburger zachytává ghost click
po zavření (viz JS fix). visibility:hidden zachovává layout, ale element
není viditelný ani klikatelný přes pointer-events. */
.navigation-window-visible .navigation-buttons,
.navigation-window-visible a[data-target="navigation"] {
visibility: hidden !important;
pointer-events: none !important;
}
}

/* ============================================================
13. SITE-WIDE LAYOUT FIXES (z butterflymagicstore.com website.css)
============================================================ */

.breadcrumbs-wrapper {
max-width: 1400px !important;
}

.navigation-wrapper {
max-width: 1400px !important;
}

.content-wrapper {
max-width: 1400px !important;
}

.type-post #content-wrapper {
max-width: 760px !important;
}

/* Stránkování */
.prev.pagination-link {
order: 0 !important;
}

.next.pagination-link {
order: 0 !important;
}

@media (max-width: 960px) {
.pagination-wrapper .pagination {
justify-content: center !important;
}
}

html {
scroll-behavior: smooth !important;
}

@media (min-width: 768px) {
.normal-banners-line {
margin: 0 !important;
}
}

/* Informační lišta — meruňková barva jako na butterflymagicstore.com */
.information {
background-color: blanchedalmond !important;
}

/* Štítek novinka — zelený */
.flag-new {
background-color: #009901 !important;
}

/* Skrytí uvítacího boxu na homepage */
.homepage-box.welcome-wrapper {
display: none !important;
}

/* ============================================================
14. FRONTPAGE LAYOUT (z butterflymagicstore.com frontpage.css)
============================================================
Tyto třídy jsou použity v HTML kódech homepage butterflywonderland.cz.
Bez těchto stylů se bannery zobrazují jako bloky místo gridu.
*/

.frontpageWrapper {
max-width: 1400px;
width: 100%;
}

.normal-banners-line {
padding-top: 0px !important;
}

.banner-wrapper {
overflow: visible !important;
}

.customBanner {
border-radius: 11px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.customBanner:hover {
transform: scale(1.015);
transition: .3s;
box-shadow: 3px 3px 11px rgba(0, 0, 0, 0.4);
}

.sectionHeader {
font-family: Futura, Trebuchet MS, Arial, sans-serif !important;
text-align: center;
margin-bottom: 15px;
padding-top: 15px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}

.imgFillFit {
width: 100%;
height: 100% !important;
border-radius: 10px;
}

@media (max-width: 768px) {
.frontpageWrapper {
padding-top: 70px;
}

.customBanner {
border-radius: 7px;
}

.customBanner:hover {
transform: scale(0.98);
}

.imgFillFit {
border-radius: 6px;
}
}

/* Novinky — flex layout levý a pravý sloupec */
.newsBannerWrapper {
display: flex;
gap: 10px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
}

.rightColNewsBanner {
flex-basis: 37%;
display: flex;
flex-direction: column;
gap: 10px;
}

.leftColNewsBanner {
flex-basis: 64%;
display: flex;
flex-direction: column;
gap: 10px;
}

.leftColUpperNewsBanner {
flex-basis: 50%;
}

.leftColLowerNewsBanner {
display: flex;
gap: 10px;
}

.leftColLowerNewsBanner > div {
flex-basis: 33.33%;
}

.rightColNewsBanner > div {
flex-basis: 50%;
}

@media (max-width: 768px) {
.newsBannerWrapper {
flex-direction: column;
gap: 7px;
padding-top: 0px;
}

.rightColNewsBanner {
flex-direction: row;
gap: 7px;
}

.leftColNewsBanner {
gap: 7px;
}

.leftColLowerNewsBanner {
gap: 7px;
}
}

/* Proč nakupovat u nás — ikony */
.infoIconsBanner {
background-color: #ffebcda1;
border-radius: 10px;
margin-top: 15px;
margin-bottom: 0px;
padding: 10px 40px;
margin-right: auto;
margin-left: auto;
}

.infoIconsBannerGrid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
column-gap: 20px;
grid-template-areas:
"infoIcon1 infoIcon2 infoIcon3 infoIcon4"
"infoIcon1Desc infoIcon2Desc infoIcon3Desc infoIcon4Desc";
}

.infoIconImg {
max-width: 125px !important;
}

.infoIconDesc {
max-width: 250px !important;
}

.infoIconsBanner img {
width: auto !important;
margin: 0px auto 10px auto;
}

.infoIconsBanner span {
text-align: center;
font-family: Futura, Trebuchet MS, Arial, sans-serif !important;
font-weight: bold;
margin: 0px auto 20px auto;
line-height: normal !important;
}

#infoIcon1 { grid-area: infoIcon1; }
#infoIcon2 { grid-area: infoIcon2; }
#infoIcon3 { grid-area: infoIcon3; }
#infoIcon4 { grid-area: infoIcon4; }
#infoIcon1Desc { grid-area: infoIcon1Desc; }
#infoIcon2Desc { grid-area: infoIcon2Desc; }
#infoIcon3Desc { grid-area: infoIcon3Desc; }
#infoIcon4Desc { grid-area: infoIcon4Desc; }

@media (max-width: 768px) {
.infoIconsBanner {
padding: 20px 15px 30px;
font-size: 13px !important;
}

.infoIconsBannerGrid {
grid-template-columns: repeat(2, auto);
grid-template-rows: max-content;
column-gap: 15px;
row-gap: 10px;
align-items: center; /* vertikálně centruje ikonu i text v každém řádku */
grid-template-areas:
"infoIcon1 infoIcon1Desc"
"infoIcon2 infoIcon2Desc"
"infoIcon3 infoIcon3Desc"
"infoIcon4 infoIcon4Desc";
}

.infoIconImg {
max-width: 65px !important;
}

.infoIconDesc {
max-width: 270px !important;
}

.infoIconsBanner span {
font-weight: normal;
text-align: left;
display: block; /* bylo: flex — flex rozděluje text+linky do samostatných flex items vedle sebe */
margin-bottom: 0px;
}

.infoIconsBanner img {
margin-bottom: 0px;
}

.infoIconsBanner h4 {
padding-top: 5px !important;
font-size: 1.3em !important;
margin-bottom: 15px !important;
}
}

/* Kategorie — CSS grid (stejné ID jako butterflymagicstore.com) */
.categBannerWrapper {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
gap: 10px;
grid-template-areas:
"playingcards playingcards mentalism stagemagic"
"magictheory butterflycards butterflycards stagemagic"
"magictheory clipsandsleeves cardmagic cardmagic";
}

@media (max-width: 768px) {
.categBannerWrapper {
grid-template-areas:
"butterflycards butterflycards"
"playingcards playingcards"
"clipsandsleeves mentalism"
"cardmagic cardmagic"
"stagemagic magictheory"
"stagemagic magictheory";
}
}

#cardmagic { grid-area: cardmagic; }
#mentalism { grid-area: mentalism; }
#stagemagic { grid-area: stagemagic; }
#butterflycards { grid-area: butterflycards; }
#magictheory { grid-area: magictheory; }
#playingcards { grid-area: playingcards; }
#clipsandsleeves { grid-area: clipsandsleeves; }

/* YouTube embed */
.iframeContainer {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin-bottom: 15px;
}

.iframeContainer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.yt-thumb-clip {
background-color: #ffebcda1;
}

.yt-thumb-clip img {
border-radius: 50% !important;
}

.latestYtVideo {
border-radius: 10px;
background-color: #ffebcda1;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 20px;
padding-bottom: 15px;
}

.latestYtVideo h4 {
font-size: 1.3em !important;
}

/* ============================================================
15. VLASTNÍ ÚPRAVY
============================================================
Tato sekce je pro vaše specifické změny.
Příklady použití:

Změna barvy všech tlačítek na zelenou:
.btn-primary { background-color: #28a745; border-color: #28a745; }

Skrytí konkrétního prvku:
.newsletter-banner { display: none; }

Změna velikosti nadpisu kategorie:
h1 { font-size: 2.5rem; }
*/

/* --- Vaše úpravy začínají zde --- */

/* ── Newsletter subscribe sekce — sjednocení s ButterflyMagicStore.com ─────
BMS má: světlé pozadí rgb(241,243,247), bílý text na tlačítku, padding 0 45px.
BW inline CSS nastavuje background-image bez background-color → pozadí je průhledné.
Oprava: přidáme světlé pozadí + background-size:cover + bílý text + větší padding.
───────────────────────────────────────────────────────────────────────────── */
.mailchimpNewsletterDesktop {
background-color: #f1f3f7 !important; /* světlé pozadí jako na BMS */
background-size: cover !important; /* floral pattern pokryje celou sekci */
}

.btnNewsletterSubscribe {
color: #ffffff !important; /* bílý text — na BMS je white, BW má černý */
padding: 0px 45px !important; /* širší tlačítko jako na BMS (bylo 25px) */
}
/* NOTE: banner inline <style> má color:black !important a přebíjí výše uvedené.
Skutečná oprava je JS v HTML kódy zápatí (fixNewsletterBtn), který nastaví
inline style přes setProperty s !important — to má nejvyšší prioritu. */

/* ============================================================
16. PODKATEGORIE — THUMBNAIL OBRÁZKY
============================================================
Obrázky jsou uloženy v:
/user/documents/upload/opal-sablona/subcat-*.jpg (420×240 px, JPEG)

Přidání nové podkategorie:
1. Nahrát obrázek (420×240px) do opal-sablona/
2. Přidat blok .subcategories a[href="/url-podkategorie/"] níže

Technický princip:
- Výchozí .subcategories li a má display:flex, height:65px, padding:7px 40px 7px 13px
- Pro položky s obrázkem: background-image na <a> + padding-top:130px pro rezervaci místa
- ::before šablony je position:absolute, nelze použít pro layout
- Položky bez obrázku zůstávají beze změny
============================================================ */

/* Sdílené layout styly — přidat href pro každou položku s obrázkem
Technicky: background-image přímo na <a>, obrázek vlevo (13px od kraje), text vpravo.
Výška obrázku: 53px (65px tlačítko − 2px bordery − 5px mezera nahoře − 5px dole); poměr 275:381=0.722 → šířka 38px.
padding-left = 13 (původní) + 38 (šířka) + 8 (mezera) = 59px
(::before šablony má position:absolute !important — nejde spolehlivě přepsat)
height: auto + min-height: 65px — zabrání ořezu textu i obrázku při zalamování

Přidání nové podkategorie (nový layout):
1. Nahrát obrázek na server (ideálně ~420×240px nebo podobný poměr)
2. Přidat blok níže v sekci "Konkrétní podkategorie"
3. Přidat href také do selektoru sdíleného bloku níže */
.subcategories a[href="/karty-butterfly/"],
.subcategories a[href="/standardni-karty/"] {
padding: 7px 40px 7px 59px !important; /* 59 = 13 + 38 + 8; 38px = šířka obr. při výšce 53px */
background-size: auto 53px !important;
background-repeat: no-repeat !important;
background-position: 13px center !important;
height: auto !important; /* roste s textem — žádný ořez */
min-height: 65px !important; /* zachovává výšku ostatních položek (box-sizing: border-box) */
align-items: center !important; /* explicitní vertikální centrování — span.text je display:block */
}

/* Text vedle obrázku — zalomení při dlouhém názvu */
.subcategories a[href="/karty-butterfly/"] span.text,
.subcategories a[href="/standardni-karty/"] span.text {
white-space: normal;
line-height: 1.3;
padding: 0 !important; /* přepsat starý padding z top-image layoutu (byl 8px 13px 9px 13px) */
max-height: none !important; /* šablona má max-height:40px; overflow:hidden — klipuje 2. řádek na mobilu */
overflow: visible !important;
}

/* ── Mobilní 2-sloupec (≤480px) ────────────────────────────── */
/* Šablona má pod 480px: width:100%; padding:0 0 7px → 1 sloupec. Přepíšeme na 2 sloupce. */
@media (max-width: 480px) {
.subcategories li {
width: 50% !important;
padding: 6px !important; /* obnovit standardní padding */
}
/* Stejné rozměry obrázku jako na desktopu — jinak je obrázek těsně u rámečku.
53px výška → 38px šířka (poměr 0.722); padding-left = 13 + 38 + 8 = 59px */
.subcategories a[href="/karty-butterfly/"],
.subcategories a[href="/standardni-karty/"] {
padding: 7px 40px 7px 59px !important;
background-size: auto 53px !important;
}
}

/* ── Konkrétní podkategorie — obrázky ──────────────────────── */

/* /karty-butterfly/ — Karty Butterfly Playing Cards */
.subcategories a[href="/karty-butterfly/"] {
background-image: url(https://www.butterflywonderland.cz/user/documents/upload/opal-sablona/subcat-karty-butterfly2.png) !important;
}

/* /standardni-karty/ — Standardní karty */
.subcategories a[href="/standardni-karty/"] {
background-image: url(https://www.butterflywonderland.cz/user/documents/upload/opal-sablona/subcat-standardni-karty-20260520-2231.png) !important;
}

/* ============================================================
17. FILTRY — SKRYTÍ SEKCÍ
============================================================
POZOR: #category-filter-hover je wrapper pro VŠECHNY rozbalené
filtry (značky + 6 parametrických). Neschovávat #category-filter-hover!
Správný selektor pro skrytí pouze Značky: #manufacturer-filter
============================================================ */

/* Skrytí filtru Značky (výrobci) — pouze #manufacturer-filter, NE celý wrapper */
#manufacturer-filter {
display: none !important;
}

/* ============================================================
18. LEVÁ NAVIGACE — SJEDNOCENÍ FONTU S BUTTERFLYMAGICSTORE.COM
============================================================
BMS referenční hodnoty (z /playing-cards/):
- Nadpis: font-family Source Sans 3, 16.8px, weight 600
- Rodičovský odkaz: 14px, weight 500, letter-spacing 0.1px
- Podkategorie (.bw-catmenu__sub): 12.6px, weight 500, letter-spacing 0.1px
BW rozdíly před opravou:
- Nadpis: Exo 2 místo Source Sans 3, 17.6px
- Podkategorie: weight 400, 13.6px, letter-spacing normal
============================================================ */

/* Nadpis levého panelu — Source Sans 3 místo Exo 2 */
.sidebar-left h4 {
font-family: var(--font-text) !important;
font-size: 1.05rem !important;
}

/* Podkategorie — sjednocení s BMS */
.sidebar-left a.bw-catmenu__sub {
font-weight: 500 !important;
font-size: 12.6px !important;
letter-spacing: 0.1px !important;
}

/* Rodičovský/aktivní odkaz — letter-spacing */
.sidebar-left a.bw-catmenu__parent {
letter-spacing: 0.1px !important;
}

/* ============================================================
19. SIDEBAR UX — VYLEPŠENÍ FILTROVACÍHO PANELU
============================================================
Vylepšení:
- Sticky sidebar pro desktop (≥700px): panel zůstane viditelný při scrollování
- Výchozí rozbalení klíčových filtrů (Značka/Designér, Výrobce)
- Count numbers: menší, šedé, nenápadné
- Checkbox řádky: větší touch targets (min 34px)
- Disabled filter labels: vizuálně neaktivní (opacity 0.35)
- Filtry h4: flex layout pro inline reset button
- Reset button (vložen přes JS v zápatí HTML kódy)
============================================================ */

/* --- Sticky sidebar (jen desktop, ≥700px) ---
align-self: flex-start zabrání roztažení sidebar na výšku sousedního sloupce,
což je podmínka pro funkčnost position:sticky uvnitř flex containeru. */
@media (min-width: 700px) {
    .sidebar-left {
        position: sticky !important;
        top: 20px !important;
        align-self: flex-start !important;
    }
}

/* --- Scroll cutoff: posledná viditeľná položka ořezaná napůl → vizuální hint scrollu ---
Selektor :not(.rolled) zajistí, že max-height platí POUZE v otevřeném stavu.
Ve zavřeném stavu (.rolled) šablona nastaví max-height:0 (vyšší specificita) → funguje toggle.
154px = 5.5 × 28px (výška položky na desktopu) → přesně 5 celých + polovina 6. položky. */
.filter-section-parametric:not(.rolled) form {
    max-height: 154px !important;
    overflow-y: auto !important;
}

/* --- Filter count numbers: menší + šedé ---
Výchozí styl má count ve stejné velikosti a barvě jako label → splývají.
Zmenšení na 11px + šedá #aaa vizuálně oddělí počet od názvu filtru. */
span.filter-count {
    font-size: 11px !important;
    color: #aaa !important;
    font-weight: 400 !important;
    margin-left: 3px !important;
}

/* --- Checkbox řádky: touch targets + menší font jako BMS ---
Mobil: min-height 34px pro dotykové použití.
Desktop (≥700px): min-height 28px + font 13px → kompaktnější jako BMS. */
.filter-section-boolean label.filter-label,
.filter-section-parametric label.filter-label {
    min-height: 34px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    cursor: pointer !important;
}
@media (min-width: 700px) {
    .filter-section label.filter-label {
        font-size: 13px !important;
        min-height: 28px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }
}

/* --- Disabled filter labels: jasně neaktivní ---
Filtry s count=0 mají třídu .disabled ale nejsou vizuálně dostatečně odlišeny.
opacity: 0.35 + pointer-events: none zabrání matoucím kliknutím. */
label.filter-label.disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* --- Filtry h4 — flex pro zarovnání s reset buttonem ---
JS vloží .bw-filter-reset-btn jako poslední child; flex + space-between ho zarovná vpravo. */
.filters-wrapper > h4 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* --- Reset filters button (vložen přes JS v HTML kódy zápatí) --- */
button.bw-filter-reset-btn {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #999 !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-family: var(--font-text) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
button.bw-filter-reset-btn:hover {
    color: #333 !important;
    text-decoration: none !important;
}


/* ============================================================
20. SKRYTI REDUNDANTNIHO RESET TLACITKA "ZRUSIT FILTRY"
============================================================
Skryje vlastni button.bw-filter-reset-btn u nadpisu Filtry.
Nativni Shoptet odkaz "Vymazat filtry" (a.close-after) zustava.
============================================================ */
button.bw-filter-reset-btn { display: none !important; }