/* =========================================
   IMPORT GOOGLE FONTŮ
   ========================================= */
@import url('https://font.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Stack+Sans+Headline:wght@400;500;600;700&display=swap');

/* =========================================
   BARVY
   ========================================= */
:root {
    /* BG */
    --color-bg1: #FDFCF9;
    --color-bg2: #F4F1EA;

    /* Brand */
    --color-brand: #6F4E37;
    --color-accent: #CC9601;
    /* Text */
    --color-text: #2A1D13;
    --color-text2: #4A3B2F;
    /* Action */
    --color-action-green: #468c2c;
    --color-action-red: #C73225;
    --color-action-orange: #DEC30F;

    --color-border-light: #0000001a; /* 10% průhledná černá pro jemné stíny

    /* Přepsané barvy */
    --colors-surface-primary: var(--color-bg1);
    --colors-surface-secondary: var(--color-bg2);
    --colors-surface-tertiary: #ccc;
    --colors-surface-disabled: #d1d1d1;
    --colors-surface-overlay: #ffffffa6;
    --colors-surface-white: var(--color-bg1);
    --colors-surface-black: var(--color-text);
    --colors-surface-rating: var(--color-accent);
    --colors-focus-primary: var(--color-brand);
    --colors-focus-secondary: var(--color-bg1);
    --colors-foregrounds-headlines-primary: var(--color-text);
    --colors-foregrounds-content-primary: #1f1f1f;
    --colors-foregrounds-content-secondary: #4d4d4d;
    --colors-foregrounds-content-tertiary: #767676;
    --colors-foregrounds-content-inverted: var(--color-bg1);
    --colors-foregrounds-icons-primary: #7b7575;
    --colors-foregrounds-borders-primary: #919191;
    --colors-foregrounds-borders-secondary: #dadada;
    --colors-forms-background: var(--color-bg1);
    --colors-forms-border: #919191;
    --colors-forms-activated: #3f7e88;
    --colors-forms-informative: #3531ff;
    --colors-forms-positive: #2a5c0a;
    --colors-forms-warning: #c75300;
    --colors-forms-critical: #d33a36;
    --colors-forms-disabled: #ebebeb;
    --colors-state-danger: #d33a36;
    --colors-state-warning: #c75300;
    --colors-state-informative: #3531ff;
    --colors-state-success: #3a800e;
    --colors-tags-green: #3a800e;
    --colors-tags-pink: #d34343;
    --colors-tags-red: #d00000;
    --colors-tags-yellow: #ffc702;
    --colors-tags-blue: #086df7;
    --colors-tags-turquoise: #008392;

}

/* =========================================
   TYPOGRAFIE A FONT-FAMILY
   ========================================= */
:root {
    --font-heading: 'Stack Sans Headline', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* Základní text e-shopu (Inter) */
body, p, span, a, div, input, button, select, textarea, .menu-level-2 {
    font-family: var(--font-body) !important;
}

/* Nadpisy a dominantní prvky (Stack Sans Headline) */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6, 
.product-name a, 
.category-title, 
.box-heading, 
.price-final,
.cart-count {
    font-family: var(--font-heading) !important;
}

/* Hlavní menu - Tady obvykle vypadá lépe nadpisový font */
#navigation .menu-level-1 > li > a {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
}

/* Specifické ladění čitelnosti pro Sambu */
body {
    line-height: 1.6 !important; /* Provzdušnění odstavců */
    -webkit-font-smoothing: antialiased; /* Hezčí vyhlazování na Macu/iOS */
    -moz-osx-font-smoothing: grayscale;
}

/* Zvětšení názvů produktů v kartách, aby Stack Sans vynikl */
.product .product-name a {
    /* font-size: 16px !important; */
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}

/* =========================================
   TYPOGRAFIE - SPACING A LINE HEIGHT
   ========================================= */

/* H1 - Největší nadpisy (Hlavní titulek stránky/produktu) 
   Stack Sans je výrazný, nepotřebuje moc prostoru mezi písmeny, ale potřebuje pevný řádek */
h1, .h1 {
    letter-spacing: -0.02em !important; /* Lehké stažení působí u velkých nadpisů prémiověji */
    line-height: 1.1 !important;
}

/* H2 - Sekundární nadpisy (Názvy sekcí, boxů) */
h2, .h2 {
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
}

/* H3 - Názvy produktů ve výpisu, menší nadpisy sekcí */
h3, .h3, .product-name a {
    letter-spacing: 0em !important; /* Neutrální */
    line-height: 1.3 !important;
}

/* H4, H5, H6 - Malé nadpisy (Často se používají nad tabulkami nebo malými bloky) */
h4, .h4, h5, .h5, h6, .h6 {
    letter-spacing: 0.01em !important; /* U menších nadpisů lehce roztáhneme pro čitelnost */
    line-height: 1.4 !important;
}

/* Body text - Běžné odstavce a popisky (Font Inter) */
body, p, span, div {
    letter-spacing: 0em !important; /* Inter je navržen perfektně, nepotřebuje úpravy letter-spacingu */
    line-height: 1.6 !important; /* Ideální hodnota pro čitelnost delších textů (např. v popisu produktu) */
}

/* Tučný text v body (Bold / Strong) */
b, strong {
    letter-spacing: 0em !important;
    line-height: inherit !important; /* Přebírá line-height od rodiče (odstavce), aby nenarušil rytmus */
}

/* Logo - site name zmenšení, zarovnání atd*/
.site-name {
    width:fit-content !important;
}

.overall-wrapper {
    padding-top: 0 !important;
}

/* =========================================
   HEADER - FIXED A BARVA
   ========================================= */
#header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;

    
    /* TADY VYUŽÍVÁME NAŠI PŘEPSANOU PROMĚNNOU
    background-color: var(--color-header-background) !important; */
    
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;*/
    border-bottom: var(--color-border-light) 1px solid !important; /* Jemný oddělovač od obsahu */
    /*padding-bottom: 8px 0 !important;*/ /* Lehké provzdušnění hlavičky */
}

/* Mezera mezi položkami hlavního menu */
ul.menu-level-1 {
    gap: 8px !important;
}

ul.menu-level-1 > li > a {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 8px !important;
    padding-top: 8px !important;
    margin-bottom: 8px !important;
}

/* =========================================
   PRODUKTOVÝ VÝPIS - MŘÍŽKA (3 na PC, 2 na tabletu, 1 na mobilu)
   ========================================= */

/* 1. Základní nastavení pro mobil (1 produkt na řádek) */
.products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 1 sloupec pro malé displeje */
    gap: 8px !important; /* Mezera mezi produkty pod sebou */
}

/* 2. Tablet (2 produkty vedle sebe) */
/* Jakmile má displej šířku alespoň 768px, mřížka se přepne na 2 sloupce */
@media (min-width: 768px) {
    .products {
        grid-template-columns: repeat(2, 1fr) !important; 
    }
}

/* 3. Desktop (4 produkty vedle sebe) */
/* Jakmile má displej šířku alespoň 992px, mřížka se přepne na 4 sloupce */
@media (min-width: 992px) {
    .products {
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 16px !important; /* Větší mezera mezi produkty na desktopu */
    }
}

@media (min-width: 1200px) {
    .products {
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 16px !important; /* Větší mezera mezi produkty na desktopu */
    }
}

/* 3. Vyčištění Shoptet stylů (zrušíme list-view zobrazení) */
.products .product {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important; /* Vynulování případných plovoucích prvků ze šablony */
    display: flex !important;
    padding: 0 !important;
}

/* 4. Pojistka pro stejnou výšku karet (kdyby měl nějaký produkt delší název) */
.products .product > .p {
    width: 100% !important;
    height: 100% !important; /* Karta se natáhne podle nejvyšší v řádku */
    display: flex !important;
    flex-direction: column !important; /* Obsah karty se skládá pěkně pod sebe */
}

/* =========================================
   PRODUKTOVÁ KARTA - ROZLOŽENÍ A OBRÁZEK
   ========================================= */

/* 1. Obal obrázku (odkaz <a>) */
.products .product .image {
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: 1/1  !important; /* Nastaví poměr stran 3:4, aby se karty hezky zarovnávaly */
    height: auto !important; 
    flex: 0 0 auto !important; 
    margin: 0 0 16px 0 !important; 
    padding: 0 !important;
    display: block !important;
    border-radius: 8px !important; /* Tvoje zakulacení z minula */
    overflow: hidden !important; /* Zajistí, že rohy obrázku nepřetečou */
}

/* 2. Samotný obrázek (přebije pevné rozměry z HTML) */
.products .product .image img {
    width: 100% !important; /* Ignoruje šířku 423px z HTML */
    height: auto !important; /* Ignoruje výšku 317px z HTML */
    max-width: 100% !important;
    display: block !important;
    
    /* Vzhledem k tomu, že jsi minule vypnul zapékání bílých okrajů,
       můžeme tady nechat bezpečný contain, ať je vidět celá tinktura */
    object-fit: contain !important;
    transition: transform 0.3s ease !important; /* Plynulý přechod, klidně změň 0.3s na méně/více */
}

/* =========================================
   PRODUKTOVÁ KARTA - HOVER ZOOM EFEKT
   ========================================= */

/* Když najedeš myší na kartu (.product), zvětši obrázek uvnitř */
.products .product:hover .image img {
    /* transform: scale(1.05) zvětší obrázek o 5 % (1 = 100%) */
    transform: scale(1.05) !important; 
}

/* 3. Textová část (.p-in) se musí poskládat pěkně pod obrázek */
.products .product .p-in {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important; /* Zaručí, že se textová část natáhne až dolů */
    padding: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important; /* Zarovnání textu doleva */
    gap: 16px !important; /* Mezera mezi názvem, cenou a dalšími informacemi */ 
    justify-content: space-between !important; /* Rozprostře obsah karty, aby tlačítko bylo vždy dole */
}

.products .product .p-in-in .name {
    padding: 0 !important;
}

.products .product .p-in-in {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important
}


/* =========================================
   PRODUKTOVÁ KARTA - SPODNÍ ČÁST (Cena a tlačítko)
   ========================================= */

/* 1. Obal pro cenu a tlačítko (změna z řádku na sloupeček) */
.products .product .offers {
    flex-direction: column !important; /* Prvky se poskládají pod sebe */
    align-items: flex-start !important; /* Zarovnání doleva podle tvého zadání */
    gap: 8px !important; /* Přidá čistou mezeru mezi cenu a tlačítko */
    justify-content: flex-end !important; /* Zarovnání obsahu k dolnímu okraji karty */
    width: 1fr !important; /* Obal zabere celou šířku karty */
    height: fit-content !important; /* Výška se přizpůsobí obsahu */
}

.products .product .p-bottom {
    width: 100% !important; /* Obal zabere celou šířku karty */
}

/* =========================================
   PRODUKTOVÁ KARTA - RÁMEČEK (Card Design)
   ========================================= */

/* 1. Stylování hlavního vnitřního obalu karty */
.products .product > .p {
    /* Vzhled (Pozadí, Rámeček, Zakulacení) */
    background-color: #FFFFFF !important;
    border: 1px solid var(--color-border-light) !important; /* Později změníš proměnnou podle potřeby */
    border-radius: 16px !important;
    height: 100% !important; /* Výška se přizpůsobí obsahu */
    
    /* Vnitřní odsazení (16px ze všech stran) */
    padding: 16px !important;
    
    /* Zajištění správného přetékání (aby fotka nepřetekla zakulacené rohy) */
    overflow: hidden !important;
}

/* =========================================
   PRODUKTOVÁ KARTA - TLAČÍTKO DETAIL/KOŠÍK
   ========================================= */

/* 1. Obal tlačítka musí mít prostor přes celou kartu */
.products .product .p-tools {
    width: 100% !important;
    gap: 4px !important; /* Mezera mezi tlačítkem a cenou */
}

/* 2. Samotné tlačítko na celou šířku a zaoblení rohů */
.products .product .p-tools .btn {
    width: 100% !important;
    border-radius: 8px !important;
    text-align: center !important; /* Jistota, že text "Detail" nebo "Do košíku" bude hezky uprostřed */
    display: block !important;
    line-height: unset !important; /* Zruší defaultní line-height, aby tlačítko mělo pevnou výšku podle paddingu */
    
    /* Lehká úprava vnitřního prostoru, ať tlačítko působí prémiověji */
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
}

/* =========================================
   HEADER - DROPDOWN MENU (Odstranění stínu)
   ========================================= */
@media (min-width: 992px) {
   #navigation .menu-level-2 {
    box-shadow: none !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    }
}

/* =========================================
   DOMOVSKÁ STRÁNKA - 3 BANNERY (Bento Grid 120vh)
   ========================================= */

/* 1. Obal bannerů - mobil (3 řádky pod sebou) */
.next-to-carousel-banners {
    display: grid !important;
    height: 125vh !important; /* Celková výška přesně podle zadání */
    grid-template-columns: repeat(2, 1fr) !important; 
    grid-template-rows: repeat(5, 1fr) !important; /* 5 řádků celkem */
    gap: 8px !important; /* Větší mezera mezi bannery na větších obrazovkách */
    width: 100% !important;
    margin: 0 !important
}

/* 2. Vyčištění výchozích Shoptet stylů u jednotlivých bannerů */
.next-to-carousel-banners .banner-wrapper {
    width: 100% !important;
    height: 100% !important; /* Musí vyplnit svou část mřížky */
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important; 
}

/* 3. Samotné obrázky uvnitř bannerů */
.next-to-carousel-banners .banner-wrapper img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important; /* Zajistí, že se obrázek nezkreslí, ale vyplní celý svůj vyhrazený box */
    transition: transform 0.4s ease !important;
}

/* 4. Hover efekt (zoom obrázku) */
.next-to-carousel-banners .banner-wrapper:hover img {
    transform: scale(1.03) !important; 
}

.carousel-wrapper {
    display: block !important; /* Vypne problematický flexbox */
    width: calc(100% - 16px) !important; /* 100% šířka obrazovky mínus 16px zleva a 16px zprava */
    max-width: none !important;
    margin: 8px auto 0 auto !important; /* Tímto se obal dokonale vycentruje */
}

/* 1. Hlavní banner nahoře: roztáhneme přes oba sloupce a zabere 3 řádky */
.next-to-carousel-banners .banner-wrapper:first-child {
    grid-column: 1 / -1 !important; 
    grid-row: 1 / 4 !important; /* Od 1. linky do 4. linky = 3 řádky */
    overflow: hidden !important; /* Zajistí, že se obrázek nepřeteče přes zakulacené rohy */
}

/* Zarovnání obrázku v prvním (hlavním) banneru navrch */
.next-to-carousel-banners .banner-wrapper:first-child img {
    object-position: top !important; /* Zabrání oříznutí horní části fotky */
}

/* 2. Zbylé dva bannery dole: každý zabere 1 sloupec, ale natáhnou se na 2 řádky */
.next-to-carousel-banners .banner-wrapper:not(:first-child) {
    grid-row: 4 / 6 !important; /* Od 4. linky do 6. linky = 2 řádky */
}

@media (min-width: 992px) {
    .next-to-carousel-banners {
    gap: 16px !important; /* Větší mezera mezi bannery na větších obrazovkách */
    }
    .carousel-wrapper {
    width: calc(100% - 32px) !important; /* 100% šířka obrazovky mínus 16px zleva a 16px zprava */
    margin: 16px auto 0 auto !important; /* Tímto se obal dokonale vycentruje */
    }
}

.homepage-group-title {
    padding-top: 0 !important; /* Vlevo a vpravo 8px, nahoře a dole žádné */
    margin-top: 96px !important; /* Velká mezera nad názvem sekce, aby se oddělil od bannerů */
    }
    
.products-wrapper {
    margin-bottom: 96px !important; /* Velká mezera pod produkty, aby se oddělily od další sekce */
    }