/*
 * ============================================================
 *  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
     right: 230px !important → pravý okraj nav = viewport−230px
     width: auto             → šířka = viewport − 225 − 230 = viewport − 455px
       Při 1440px: 985px > 854px (7 položek) ✓
       Zlomový bod 7 položek: ~1310px

   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.
*/
@media (min-width: 1024px) {
  nav#navigation {
    left: 225px !important;
    margin-left: 0 !important;
    right: 230px !important;
    width: auto !important;
  }
}


/* ============================================================
   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ázKk 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;
}

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

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


/* ============================================================
   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í konkretní ho prvku:
   .newsletter-banner { display: none; }

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

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