/*
 * ============================================================
 *  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; }
h3 { 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;
  }
}


/* ============================================================
   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 */
    }
    /* Menší obrázek pro úzké sloupce (~180px):
       63px výška → 45px šířka (poměr 0.722); padding-left = 13 + 45 + 8 = 66px */
    .subcategories a[href="/karty-butterfly/"],
    .subcategories a[href="/standardni-karty/"] {
        padding: 7px 40px 7px 66px !important;
        background-size: auto 63px !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;
}