/*
 * ============================================================
 *  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
   ============================================================ */

.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;
}


/* ============================================================
   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; }
.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; } }
.information { background-color: blanchedalmond !important; }
.flag-new { background-color: #009901 !important; }
.homepage-box.welcome-wrapper { display: none !important; }


/* ============================================================
   14. FRONTPAGE LAYOUT (z butterflymagicstore.com frontpage.css)
   ============================================================
   Tyto tridy jsou pouzity v HTML kodech homepage butterflywonderland.cz.
   Bez techto stylu se bannery zobrazuji jako bloky misto 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: 0 !important; padding-right: 0 !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; }
}

.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; }
}

.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; 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; margin-bottom: 0px; }
  .infoIconsBanner img { margin-bottom: 0px; }
  .infoIconsBanner h4 { padding-top: 5px !important; font-size: 1.3em !important; margin-bottom: 15px !important; }
}

.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; }

.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. VLASTNI UPRAVY
   ============================================================
   Tato sekce je pro vase specificke zmeny.
*/

/* --- Vase upravy zacinaji zde --- */

.mailchimpNewsletterDesktop { background-color: #f1f3f7 !important; background-size: cover !important; }
.btnNewsletterSubscribe { color: #ffffff !important; padding: 0px 45px !important; }