/*
 * ============================================================
 *  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 CSSleft = ‒110px, poté margin-left posouáí 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=990pc, 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 561px
   ── */
@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: těsněji za logem (text začíná x=170px, logo končí x=150px → 20px gap) */
  #navigation .menu-level-1 > li:first-child > a {
    padding-left: 5px !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
   ============================================================
   Struktura:
   .products.products-block
     .product
       .p
         a.image       ← obrázek produktu
         .p-in
           .p-in-in
             a.name        ← název produktu
             .availability ← dostupnost
           .p-bottom.single-button
             .prices
               .price.price-final  ← cena
             .p-tools
               a.btn.btn-primary   ← tlačítko "Detail"
             .p-desc               ← krátký popis
*/

.products-block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.product {
  transition: transform var(--prechod), box-shadow var(--prechod);
}

.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.product .p {
  background: #ffffff;
  border: 1px solid var(--barva-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Obrázek produktu */
.product a.image {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--barva-pozadi-svetla);
}

.product a.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product:hover a.image img {
  transform: scale(1.04);
}

/* Název produktu */
.product .name {
  font-family: var(--font-nadpisy);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--barva-text);
  line-height: 1.4;
  display: block;
  margin-bottom: 6px;
}

.product .name:hover {
  color: var(--barva-hlavni);
}

/* Info sekce */
.product .p-in {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product .p-in-in {
  flex: 1;
}

/* Cena */
.product .price-final {
  font-family: var(--font-nadpisy);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--barva-zvyrazneni);
}

/* Dostupnost */
.product .availability {
  font-size: 0.8rem;
  color: var(--barva-text-svetla);
}

/* Spodní část karty */
.product .p-bottom {
  margin-top: auto;
}

.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é (zvyraznħ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
   ============================================================ */

[class*="banner"],
[lass*="banners-row"] {
  margin-bottom: 30px;
}

[class*="banner"] 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ÁNPA 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;
  }
}


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