/*
Theme Name: Stavivo Skin
Theme URI: https://stavivo.sk/
Author: AI Assistant (Gemini) & Developer
Author URI: https://google.com/
Description: Jednoduchá, rýchla a moderná téma pre WooCommerce/WordPress s podporou Dark/Light Mode.
Version: 1.0.0
*/


/* ========================================================================= */
/* 1. FAREBNÉ PREMENNÉ (TÉMY) */
/* ========================================================================= */

/* Nastavenie Dark Theme ako predvolené */
:root {
    /* Základné farby */
    --bg: #1A1E21; /* Tmavé pozadie */
    --card: #2A2D30; /* Farba kariet/panelov 1d1d23 */
    --border: #4d535e; /* Jemné ohraničenie #2c2c36 */
    --text: #e9eef5; /* Svetlý text */
    --muted: #a3aab7; /* Menej dôležitý text */
    --accent: #f0f3f7; /* Hlavné nadpisy, akcenty */

    /* Farby projektu */
    --brand: #CD7F32; /* bronzová CD7F32 */
    --brand-2: #80e0c1; /* Doplnková zelená (časová os, úspech) */
    --button: #d1203b; /*červená*/

    /* Stavy */
    --free: #29c26a; /* Skladom */
    --reserved: #ffb020; /* Rezervovaný */
    --sold: #964b4b; /* Predaný/Filtrovaný */
    
    /* Špeciálne farby (pre Dark Mode) */
    --input-bg: #0f1116;
}

/* Light Theme: Prepísanie premenných */
html.light-theme {
    --bg: #ffffff; /*#f9fafb*/
    --card: #f5f5f5; /*#ffffff*/
    --border: #e5e7eb; /*#e5e7eb*/
    --text: #111827; /*#111827*/
    --muted: #6b7280;/*#6b7280*/
    --accent: #111827;/*#111827*/
    --input-bg: #f3f4f6;/*#f3f4f6*/
}


/* ========================================================================= */
/* 2. ZÁKLADNÉ A GLOBÁLNE ŠTÝLY (RESET, TYPOGRAFIA, BUTTONS) */
/* ========================================================================= */

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
    margin: 0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--accent);
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
h1{font-size: 2.5rem;}
h2{font-size: 2rem;}

a {
    color: var(--brand);
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    color: color-mix(in srgb, var(--brand) 80%, var(--accent));
}

.wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 10px;
}

/* === BUTTONS === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* Tvoj ujednotený štýl */
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    
    padding: 10px 22px !important;
    border-radius: 4px !important;
    
    font-size: 0.75rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover efekt pre všetky tlačidlá */
.btn:hover {
    background: var(--border) !important; /* Mierne zosvetlenie pri hoveri */
    border-color: var(--brand) !important; /* Bronzový akcent pri hoveri */
    color: var(--accent) !important;
}

/* Ak chceš zachovať .primary ako výraznejšie (napr. červené ako máš v premenných) */
.btn.primary {
    background-color: var(--button) !important; /* Tvoja červená */
    border-color: var(--button) !important;
    color: #fff !important;
}

.btn.primary:hover {
    background-color: color-mix(in srgb, var(--button) 80%, black) !important;
    border-color: var(--brand) !important;
}

/* Menšia verzia tlačidla */
.btn.small {
    padding: 6px 14px !important;
    font-size: 0.7rem !important;
    min-height: auto;
}

/* === KARTY / POZADIA === */
.card {
    /*background-color: var(--card);*/
   /* padding: 10px;*/
    /*border: 1px solid var(--border);*/
    border-radius: 8px;
   
    transition: background-color 0.3s, border-color 0.3s;
}

/* ========================================================================= */
/* 3. HLAVIČKA (HEADER.PHP) A NAVIGÁCIA */
/* ========================================================================= */

.nav-wrap{
    border-bottom: 1px solid var(--border);
    background-color: var(--bg);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}
.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
}
.nav-tools {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* === Prepínače a Toggles (Dark/Light + Menu) === */
.icon-btn, .menu-toggle {
    /* Všeobecné nastavenie pre všetky tlačidlá */
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    padding: 0;
    line-height: 1;
    transition: all 0.2s ease;
}





/* Menu toggle */
#sidebar-toggle {
    font-size: 24px;
    width: 32px;
    height: 32px;
}


/* ========================================================================= */
/* X. TÉMA PREPÍNAČ (SWITCH STYLE) */
/* ========================================================================= */

#theme-toggle {
    position: relative;
    width: 60px; /* Šírka switcha */
    height: 30px; /* Výška switcha */
    border-radius: 15px;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, border-color 0.3s;
    
    /* DARK MODE (PREDVZATÁ NASTAVENÁ FARBA) */
    background: #113642; 
    border: 1px solid #113642; 
}

/* ========================================================================= */
/* X. TÉMA PREPÍNAČ (SWITCH STYLE) - OPRAVENÉ */
/* ========================================================================= */

#theme-toggle {
    position: relative;
    width: 60px; 
    height: 30px; 
    border-radius: 15px;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, border-color 0.3s;
    
    /* DARK MODE ZÁKLAD */
    background: #113642; 
    border: 1px solid #113642; 
}

/* ========================================================================= */
/* X. TÉMA PREPÍNAČ (SWITCH STYLE) - NOVÉ ROZMERY: 40x20px */
/* ========================================================================= */

#theme-toggle {
    position: relative;
    width: 40px; /* Šírka switcha: 40px */
    height: 20px; /* Výška switcha: 20px */
    border-radius: 10px; /* Polovica výšky pre pilulku */
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, border-color 0.3s;
    
    /* DARK MODE ZÁKLAD */
    background: #113642; 
    border: 1px solid #113642; 
}

/* Kruhový indikátor (TERAZ BEZ "content" - ikona bude VNÚTRI) */
#theme-toggle::before {
    position: absolute;
    width: 16px; /* Krúžok: 14px */
    height: 16px;
    top: 2px; /* Centrovanie: (20px - 14px) / 2 = 3px. Skúsime 2px */
    left: 2px; /* Padding zľava/sprava: 2px */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: transform 0.3s ease, background 0.3s ease;
    
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    
    content: ''; 
    background: var(--brand); /* Farba krúžku v Dark Mode */
    
    /* Prepočet: Celková šírka 40px - 2px (L padding) - 14px (krúžok) - 2px (R padding) = 22px
       Krúžok sa posúva z 2px (default left) o 20px na 22px. */
    transform: translateX(20px); /* Krúžok vpravo (Dark) */ 
}

/* Light Theme: Prepnutie pozadia pilulky */
html.light-theme #theme-toggle {
    background: #fdf5d6; 
    border-color: #fdf5d6;
}

/* Light Theme: Animácia krúžku a zmena farby */
html.light-theme #theme-toggle::before {
    transform: translateX(0px); /* Presun krúžku doľava (Light) */
    /* Presúva sa späť na pôvodnú pozíciu left: 2px, preto len 0px transform */
    background: #ffc83b; 
}

/* ---------------------------------------------------- */
/* CSS PRE SVG IKONY (PREKRYTIE KRÚŽKU) */
/* ---------------------------------------------------- */

#theme-toggle .dark-icon,
#theme-toggle .light-icon {
    position: absolute;
    width: 12px; /* Ikona: 12px */
    height: 12px;
    top: 4px; /* Centrovanie: (20px - 12px) / 2 = 4px */
    transition: opacity 0.3s, transform 0.3s;
    z-index: 2; 
    fill: white; 
}

/* DARK MODE: Zobrazenie ikony Mesiaca */
#theme-toggle .dark-icon {
    left: 25px; /* (20px transform + 2px left) + 3px (offset) = 25px. Skúsime 25px */
    opacity: 1; 
}

/* LIGHT MODE: Zobrazenie ikony Slnka */
#theme-toggle .light-icon {
    left: 4px; /* Vľavo od krúžku, 2px left + 2px (offset) = 4px */
    opacity: 0; 
}

/* APLIKÁCIA LOGIKY PREPNUTIA */

/* LIGHT MODE: Skryje Mesiac, Zobrazí Slnko */
html.light-theme #theme-toggle .dark-icon {
    opacity: 0;
}
html.light-theme #theme-toggle .light-icon {
    opacity: 1;
}




/* ========================================================================= */
/* 4. WOOCOMMERCE - ARCHIVE PAGE (LAYOUT & FILTRE) */
/* ========================================================================= */
/* ========================================================================= */
/* 4. WOOCOMMERCE - DOKONALÉ FILTRE S CHECKBOXMI */
/* ========================================================================= */

/* Hlavný layout obchodu (Sidebar + Produkty) */
.shop-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}



.shop-filter-widget .widget-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
}

/* ========================================================================= */
/* FINÁLNE STYLOVANIE FILTROV */
/* ========================================================================= */

.estv-with-checkboxes ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.estv-with-checkboxes li {
    position: relative !important;
    padding: 0 !important;
    margin: 0 0 10px 0 !important;
    display: block !important; /* Musí byť block, aby fungovalo position relative pre ::before */
}

/* Odkaz - posunieme ho doprava paddingom */
.estv-with-checkboxes li a {
    display: inline-flex !important; /* Zmenené z block na inline-flex */
    align-items: baseline;
    padding-left: 28px !important;
    color: var(--text) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    position: relative;
    z-index: 2;
}

/* Vykreslenie checkboxu */
.estv-with-checkboxes li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 2px !important; /* Fixné odsadenie zhora namiesto 50% centrovania */
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #ff6b00 !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    z-index: 1 !important;
}

/* Aktívny stav */
.estv-with-checkboxes li.chosen::before,
.estv-with-checkboxes li.woocommerce-widget-layered-nav-list__item--chosen::before {
    background-color: #ff6b00 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Odstránenie defaultných (x) od WooCommerce */
.estv-with-checkboxes li.chosen a::before,
.estv-with-checkboxes li.woocommerce-widget-layered-nav-list__item--chosen a::before {
    display: none !important;
}

/* Číslo v zátvorke */
.estv-with-checkboxes .count {
    font-size: 0.8em;
    color: var(--muted);
    margin-left: 5px;
}

/* Zvýraznenie vybratého textu */
.estv-with-checkboxes li.chosen a,
.estv-with-checkboxes li.woocommerce-widget-layered-nav-list__item--chosen a {
    font-weight: 700 !important;
}

/* Reset tlačidlo */
.widget_reset_filters a.button {
    display: block;
    /*width: 100%;*/
    text-align: center;
    background: #f0f0f0;
    color: #333;
    padding: 10px;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
}

/* --- AKTÍVNE FILTRE (CHIPS) --- */
.estv-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /*margin-top: 25px;
    margin-bottom: 10px;*/
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--border);
}

.estv-chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--card);
    border: 1px solid #ff6b00; /* Oranžový okraj pre čipy */
    color: var(--text);
    padding: 4px 10px;
    border-radius: 100px; /* Tabletka */
    font-size: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.estv-chip:hover {
    background-color: #ff6b00;
    color: white;
}

.estv-chip-remove {
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
}

/* ========================================================================= */
/* 5. WOOCOMMERCE - PRODUKTOVÁ KARTA (LIST VIEW) - ZALOŽENÉ NA CSS GRID (2x3) */
/* ========================================================================= */

/* Hlavný Grid kontajner (desktop > 768px) */
.estv-list-item.product {
    display: grid;
    /* 100px (Image) | dynamický (Info/Sklad) | 250px (Trust/Panel) */
    grid-template-columns: 100px 1fr 250px; 
    /* DÔLEŽITÉ: 1. riadok má minimálnu výšku 100px, 2. riadok sa prispôsobí */
    grid-template-rows: minmax(100px, auto) auto; 
    
    gap: 20px; 
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
    list-style: none;
    align-content: start; /* Zabezpečí, že sa obsah Gridu zarovná hore */
}


/* --- ZARADENIE PRVKOV DO GRIDU --- */

/* 1. stĺpec / 1. riadok: Image */
.estv-card__image {
    grid-area: 1 / 1 / 2 / 2; /* Riadok 1, Stĺpec 1 */
    width: 100px;
    height: 100px; 
}
.estv-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* 2. stĺpec / 1. riadok: Info (NAZOV + POPIS) */
.estv-card__info {
    grid-area: 1 / 2 / 2 / 3; /* Riadok 1, Stĺpec 2 */
    display: flex;
    flex-direction: column;
    /* KĽÚČOVÉ: Zarovná obsah k hornej hrane */
    align-self: start; 
    
    /* Váš kód: Zabezpečenie viditeľnej farby titulku */
    color: var(--text); /* Ak to nie je už definované inak */
}
.estv-card__title{font-size:18px;margin:0 0 6px 0;line-height:1.3;}
.estv-card__title a{
    color:var(--accent); /* Zabezpečenie viditeľnej farby textu */
    text-decoration:none;
    transition:color 0.2s;
}
.estv-card__title a:hover{color:var(--brand);}
.estv-sku {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 8px;
}
.estv-short-desc{
    font-size:14px;
    color:var(--muted);
    margin:0 0 10px 0;
    max-height: 40px;
    overflow:hidden;
} 

/* 3. stĺpec / 1. riadok: Trust Info */
.estv-trust-section{
    grid-area: 1 / 3 / 2 / 4; /* Riadok 1, Stĺpec 3 */
    margin-top: 5px; 
}
.estv-trust-list {
    list-style:none;padding:0;margin:0;
    display:flex;
    flex-direction:column; 
    gap: 8px; 
}


/* ========================================================================= */
/* FIX DESKTOP: Nový Wrapper pre Info a Action Panely */
/* ========================================================================= */
/* ========================================================================= */
/* FIX DESKTOP: Nový Wrapper pre Info a Action Panely */
/* ========================================================================= */
.estv-row-2-wrap { 
    grid-area: 2 / 2 / 3 / 4; /* Riadok 2, Rozpätie cez Stĺpec 2 a 3 */
    
    /* NOVÝ VIZUÁLNY OBAL PRE CELÝ RIADOK 2 (C2+C3) */
    padding: 5px 15px;
    background: var(--card);
    /*border: 1px solid var(--border);*/
    border-radius: 10px;
    
    display: grid; /* Vytvorí vnútorný Grid so správnym rozložením Riadku 2: 1fr a 250px */
    grid-template-columns: 1fr 250px; 
    gap: 20px; 
}

/* 2. stĺpec / 2. riadok: Info Panel (Sklad/Doručenie/Vernostný program) - Teraz vnútri wrappera */
.estv-panel-info {
    grid-column: 1 / 2; /* Umiestnenie v novom Grid Layout */
    /* Vnútorne Flex pre stĺpec */
    display: flex;
    flex-direction: column; 
    /*gap: 8px;*/ 
    font-size: 14px;
    /* Vizuálne oddelenie */
    /*padding: 10px 0;*/
    /*border-top: 1px dashed var(--border);*/
}

/* 3. stĺpec / 2. riadok: Akčný Panel (Cena + Tlačidlo) - Teraz vnútri wrappera */
.estv-action-panel {
    grid-column: 2 / 3; /* Umiestnenie v novom Grid Layout */
    /* Vizuálny obal (Panel) - ODSTRÁNENÝ, PRESUNUTÝ NA .estv-row-2-wrap */
    /* Vnútorne Flex pre stĺpec */
    display: flex;
    flex-direction: column; 
    justify-content: space-between;
    align-items: stretch; /* Natiahne gombík na 100% */
    gap: 15px;
}
/* ZLÚČENÉ CSS PRE RIADKY INFO PANELU (DESKTOP) */
.estv-info-row {
    /*display: flex;*/ 
    justify-content: space-between; 
    width: 100%;
}
.stock .in-stock { color: var(--free); font-weight: 600; }
.stock .out-of-stock { color: var(--sold); font-weight: 600; }
.estv-delivery__label,
.estv-pickup .muted {
    color: var(--muted);
    font-size: 13px;
}
.estv-delivery__eta {
    font-weight: 600;
}
.estv-loyalty .compact-link {
    font-size: 13px;
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}



.estv-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Cena vľavo hore */
    gap: 5px;
    margin-top: auto;
}
.estv-price {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.estv-price ins{text-decoration:none;} 
.estv-price del{font-size:14px; color:var(--muted); margin-right: 5px;}
.estv-price .amount{font-size:20px;} 
.estv-price small.woocommerce-price-suffix {
    font-size: 11px;
    margin-top: 0;
    color: var(--muted);
    font-weight: 400;
}

.estv-add-to-cart-wrap {
    margin-top: auto; /* Tlačí tlačidlo dole */
}

/* ========================================================================= */
/* 6. RESPONSIVE DESIGN (MOBIL) - PRISPÔSOBENIE NA GRID 3x2 (OPRAVA ŠÍROK) */
/* ========================================================================= */

@media (max-width: 768px) {
    
    /* === FIX 1: Vynútenie 100% šírky pre kartu produktu === */
    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100% !important; 
        margin: 0 0 1em 0 !important;
        padding-left: 0; 
        padding-right: 0;
    }

    /* === FIX 2: Zabezpečí, že Sidebar je nad List View a využije šírku === */
    .shop-container {
        display: flex;
        flex-direction: column;
    }
    .shop-sidebar {
        width: 100%; 
        order: -1;
       /* padding: 0 20px;*/ 
    }
    .shop-main-content {
        width: 100%;
        order: 1; 
    }
    
    /* === FIX 3: Úprava produktovej karty na Grid 3x2 (Optimalizované) === */
    
    .estv-list-item.product {
        display: grid;
        /* Riadok 1: 80px (Image) | 1fr (Info) */
        grid-template-columns: 80px 1fr; 
        /* Riadky: 1. auto (Obraz/Info), 2. auto (Row-2-Wrap), 3. auto (Trust) */
        grid-template-rows: auto auto auto;
        
        gap: 15px 15px;
        padding: 15px 20px;
        align-content: start;
        
    }
    
    /* --- ZARADENIE PRVKOV DO NOVÉHO MOBILNÉHO GRIDU --- */

    /* Riadok 1, Stĺpec 1: Image (70px) */
    .estv-card__image {
        grid-area: 1 / 1 / 2 / 2;
        width: 80px;
        height: 80px;
        align-self: start;
    }
    
    /* Riadok 1, Stĺpec 2: Info (NAZOV + KAT. ČÍSLO) */
    .estv-card__info {
        grid-area: 1 / 2 / 2 / 3;
        display: flex;
        flex-direction: column;
        align-self: start; 
        gap: 5px;
        z-index: 10;
        min-width: 0;
    }
    .estv-short-desc{
        display: none; 
    }
    
    
    /* === Riadok 2 WRAPPER: INFO PANEL A AKČNÝ PANEL (50/50 rozdelenie) === */
    
    .estv-row-2-wrap {
        grid-area: 2 / 1 / 3 / 3; /* Roztiahnutie cez 1. a 2. stĺpec (FULL WIDTH) */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 15px; /* Medzi Info a Action Panelom */
        padding-top: 10px; /* Pridá medzeru od Riadku 1 */
        /*border-top: 1px dashed var(--border); /* Jemná deliaca čiara */
    }

    /* Riadok 2, Stĺpec 1: Info Panel (Sklad/Doručenie) */
    .estv-panel-info {
        flex-basis: 50%; /* Dáme mu polovicu šírky */
        flex-shrink: 1;
        min-width: 0; 
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 14px;
        padding: 0;
        border: none; /* Reset desktop border */
    }
    
    /* ZLÚČENÉ CSS PRE RIADKY INFO PANELU (MOBIL) */
    .estv-info-row {
        flex-direction: row; /* Zabezpečí, že sklady/doručenie sú na jednom riadku */
        flex-wrap: nowrap; /* Tieto riadky by sa nemali lámať */
    }
    .estv-delivery__label, .estv-pickup .muted {
        white-space: nowrap; /* Zabezpečí, že text sa nezalomí */
    }
    
    /* Riadok 2, Stĺpec 2: Akčný Panel (Cena + Tlačidlo) */
    .estv-action-panel {
        flex-basis: 50%; /* Aj akčný panel dostane polovicu */
        flex-shrink: 0;
        
        display: flex;
        flex-direction: column; /* Cena nad Tlačidlom */
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
        
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
    }
    .estv-price-block {
        order: 1; 
        flex-direction: column;
        align-items: flex-start;
        margin-top: auto;
    }
    .estv-add-to-cart-wrap {
        order: 2;
        flex-shrink: 0; 
    }
    
    .estv-card__image img {
        max-width: 80px;
        max-height: 80px;
        width: 100%; /* Udrží 100% šírky obalu (80px) */
        height: 100%; /* Udrží 100% výšky obalu (80px) */
        object-fit: contain;
    }
    
    
    /* === FIX 4: Riadok 3: TRUST INFO (Stohovanie pre dlhší text) === */
    


    /* Vizuálne úpravy (veľkosti textu) */
    .estv-card__title a{
        font-size: 16px;
    }
    .estv-price { font-size: 20px; }
    .estv-price .amount{font-size: 20px;}
    .estv-price del{font-size:12px;}
    
}

/* ========================================================================= */
/* OPAVA AJAX: Skrytie defaultných WooCommerce obalov */
/* ========================================================================= */
.woocommerce-products-header {
    display: none; /* Skryje duplicitný titulok */
}

/* ========================================================================= */
/* OPAVA AJAX: Skrytie defaultných WooCommerce obalov */
/* ========================================================================= */
.woocommerce-products-header {
    display: none; /* Skryje duplicitný titulok */
}

/* ... (zbytok kódu pod 7. a 8. sekciou bez zmien) ... */


/* ========================================================================= */
/* 7. SIDEBAR OVERLAY A ZÁKAZ SCROLLU */
/* ========================================================================= */

/* OVERLAY (stmavenie pozadia, volané z theme-toggle.js) */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999; /* Nižší ako sidebar (1002) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* ZÁKAZ SCROLLU TELA pri otvorenom sidebare (aplikuje sa na <html>/root) */
html.no-scroll {
    overflow: hidden;
}


/* ========================================================================= */
/* 8. LOGO DARK/LIGHT PREPÍNANIA */
/* ========================================================================= */

.logo {
    display: block; /* Zabezpečí, že img bude mať veľkosť */
    line-height: 0; /* Odstráni zbytočné medzery pod obrázkom */
}

.logo-image {
    max-height: 40px; /* Nastav maximálnu výšku loga */
    width: auto;
    display: none; /* Štandardne skryjeme obe logá */
}

/* 1. Dark Mód (Predvolený stav - trieda .light-theme neexistuje) */

/* Zobraz logo pre Dark tému */
html:not(.light-theme) .logo-dark-theme {
    display: block;
}

/* Skry logo pre Light tému */
html:not(.light-theme) .logo-light-theme {
    display: none;
}


/* 2. Light Mód (Trieda .light-theme existuje) */

/* Skry logo pre Dark tému */
.light-theme .logo-dark-theme {
    display: none;
}

/* Zobraz logo pre Light tému */
.light-theme .logo-light-theme {
    display: block;
}


/* ========================================================================= */
/* 9. HEADER - AKČNÉ IKONY (ÚČET, KOŠÍK) */
/* ========================================================================= */

.estv-header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Priestor medzi ikonami */
}

.estv-action-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; 
    height: 24px;
    color: var(--text); /* Ikona prevezme farbu textu */
    transition: color 0.2s;
}

.estv-action-icon:hover {
    color: var(--brand); /* Farba po prechode myšou */
}

/* Štýl pre vložené SVG ikony */
.estv-action-icon svg {
    display: block;
    width: 24px;
    height: 24px;
    stroke: currentColor; /* Zabezpečí, že farba z .estv-action-icon sa aplikuje na ťahy */
}

/* Počet položiek v košíku */
.estv-cart-count {
    position: absolute;
    top: -5px;
    right: -8px; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    
    /* Vizuálne štýly */
    background: var(--brand); /* Použijeme farbu sold/chyba/červená */
    color: var(--text); 
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* Responsive: Zmenšenie ikon na mobile (ak je header menší) */
@media (max-width: 600px) {
    .estv-header-actions {
        gap: 10px;
    }
    .estv-action-icon,
    .estv-action-icon svg {
        width: 22px; 
        height: 22px;
    }
    .estv-cart-count {
        top: -4px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        font-size: 10px;
    }
}

/* ========================================================================= */
/* 7. MOBILNÝ SIDEBAR (OFF-CANVAS HAMBURGER) */
/* ========================================================================= */

/* --- TLAČIDLO PRE OTVORENIE (Zobrazené len na mobile) --- */
.estv-filter-open-btn {
    display: none; /* Štandardne skryté */
}

@media (max-width: 768px) {
    /* Tlačidlo na spustenie filtra - viditeľné nad produktmi na mobile */
    .estv-filter-open-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 30px); /* 100% šírka v rámci 15px wrapu */
        margin: 15px auto 0 auto; 
        
        /* Vizual */
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--text);
        padding: 12px 15px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
        
        /* Ikona */
        gap: 8px;
    }
    .estv-filter-open-btn:hover {
        background: var(--border);
    }
    .estv-filter-open-btn svg {
        width: 18px;
        height: 18px;
        stroke: currentColor;
    }
}


/* --- OFF-CANVAS SIDEBAR (FILTRE) --- */

.shop-sidebar {
    /* Desktop: Zabezpečíme, že sa zobrazí normálne */
    position: static;
    width: auto;
    background: transparent;
    z-index: 1; 
}

@media (max-width: 768px) {
    .shop-sidebar {
        /* Mobile: Skrytý off-canvas */
        position: fixed;
        top: 0;
        right: 0; /* Vysúvanie z pravej strany */
        height: 100%;
        width: 300px; /* Šírka sidebaru na mobile */
        max-width: 90%; 
        background: var(--bg); /* Použijeme hlavné pozadie, alebo --card */
        z-index: 1003; /* Musí byť nad overlay (1002) */
        overflow-y: auto;
        
        /* Inicializácia - skrytý */
        transform: translateX(100%); 
        transition: transform 0.3s ease-out;
    }
    
    /* Stav OTVORENÝ */
    .shop-sidebar.open {
        transform: translateX(0); /* Zobrazí sidebar */
    }
    
    /* Hlavička sidebaru (Titul + Zavrieť tlačidlo) */
    .estv-sidebar-header {
        display: none; /*flex*/
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid var(--border);
        position: sticky; /* Zabezpečíme, že hlavička bude fixed pri scrollovaní obsahu */
        top: 0;
        background: var(--bg); /* Musí mať pozadie pre sticky */
        z-index: 10;
    }
    .estv-sidebar-title {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--accent);
    }
    .estv-sidebar-inner {
        padding: 15px;
    }
    
    /* Zavrieť tlačidlo */
    .estv-filter-close-btn {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }
    .estv-filter-close-btn svg {
        width: 24px;
        height: 24px;
        stroke: var(--muted);
    }
}


/* --- OVERLAY (PREKRYTIE POZADIA) --- */
/* (Je v HTML, ak nie je, pridajte ho, pozri KROK 1) */
#sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1002; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Stav OTVORENÝ */
#sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* ZÁKAZ SCROLLU TELA pri otvorenom sidebare */
html.no-scroll {
    overflow: hidden;
}



/* ========================================================================= */
/* 5. HEADER (Vyhľadávanie) */
/* ========================================================================= */

#masthead.site-header {
    /* Nastaví Grid pre rozloženie Logo - Vyhľadávanie - Nástroje */
    display: grid;
    grid-template-columns: minmax(100px, auto) 1fr minmax(100px, auto); 
    align-items: center;
    /*gap: 30px; */
    padding-top: 15px; 
    padding-bottom: 15px; 
    
    background: var(--bg); 
    border-bottom: 1px solid var(--border);
}

/* Umiestnenie */
#masthead .logo {
    grid-column: 1 / 2; /* Ľavý stĺpec */
}

#masthead .header-center {
    grid-column: 2 / 3; /* Stredný stĺpec */
    justify-self: center; 
    width: 100%;
    max-width: 500px; 
}

#masthead .nav-tools {
    grid-column: 3 / 4; /* Pravý stĺpec */
    display: flex;
    justify-content: flex-end; /* Prvky vpravo */
    gap: 15px;
}

/* Štýl vyhľadávacieho poľa */
.woocommerce-product-search {
    display: flex;
    width: 100%;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--border);
}

.woocommerce-product-search .search-field {
    flex-grow: 1;
    padding: 10px 15px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    outline: none;
}

.woocommerce-product-search .search-field::placeholder {
    color: var(--muted);
}

.woocommerce-product-search .search-submit {
    /* Tlačidlo Lupa */
    background: transparent;
    border: none;
    color: var(--muted);
    padding: 0 15px;
    cursor: pointer;
    transition: color 0.2s;
}

.woocommerce-product-search .search-submit:hover {
    color: var(--text);
}



@media (max-width: 768px) {
    
    #masthead.site-header {
        /* Presunie vyhľadávanie do druhého riadku */
        display: grid;
        grid-template-columns: 1fr auto; /* Riadok 1: Logo | Nástroje */
        grid-template-rows: auto auto; /* Dva riadky: 1. Hlavička, 2. Vyhľadávanie */
        gap: 10px 15px; 
        padding-top: 10px; 
        padding-bottom: 10px; 
    }
    
    /* Umiestnenie Loga */
    #masthead .logo {
        grid-column: 1 / 2; 
        grid-row: 1 / 2;
    }
    
    /* Umiestnenie Nástrojov */
    #masthead .nav-tools {
        grid-column: 2 / 3; 
        grid-row: 1 / 2;
        align-self: center; /* Centrovať nástroje (košík, menu, theme-toggle) */
    }
    
    /* VYHĽADÁVANIE SA PRESUNIE NA DRUHÝ RIADOK CEZ CELÚ ŠÍRKU */
    #masthead .header-center {
        grid-column: 1 / 3; /* Tiahne sa cez oba stĺpce */
        grid-row: 2 / 3; /* Druhý riadok */
        justify-self: stretch; 
        max-width: none; 
        padding: 0; 
    }

    /* ... (ostatné mobilné štýly) ... */
}








/* --- ÚPRAVA PRE MOBILNÉ ROZLOŽENIE HLAVIČKY (estv-shop-loop-header) --- */
@media (max-width: 768px) {
    /* ... (ostatný kód media query) ... */

    .estv-shop-loop-header {
        /* Umožní elementom zalomiť sa na nový riadok */
        flex-wrap: wrap; 
        
        /* Zarovná obalené elementy (count, select, toggle) na stred */
        justify-content: right; 
        
        /* Dáme priestor medzi prvkami, ktoré sa obalili */
        gap: 10px 0; 
    }

    /* Vynulujeme šírku a dáme priestor prvkom, aby sa roztiahli na celú šírku, ak je to potrebné. */
    .woocommerce-result-count,
    .woocommerce-ordering{
        width: 100%; /* Každý element zaberie celý riadok */
        text-align: center; 
        justify-content: flex-end;
    }
    
    
    /* Zoradenie (Select box) - Zarovnanie select boxu na stred */
    .woocommerce-ordering {
        display: flex;
        justify-content: center;
    }
}


/* --- ŠTÝLOVANIE FORMULÁRA PRE ZORADENIE (SELECT BOX) --- */
.woocommerce-ordering {
    /* Ak je zobrazenie flex, zrušíme ho pre desktop, ak má byť zarovnaný len text (Select). */
    /* Ak bol flex len pre centrovanie na mobile, ponecháme ho len v media query. */
    /* Pre desktop, zabezpečíme len správne umiestnenie selectu */
    
    /* Vynúti, aby bol select box zarovnaný doľava, ak to nie je mobil */
    text-align: left; 
}

.woocommerce-ordering .orderby {
    /* ... (ostatné štýly zostávajú rovnaké: padding, fonty, farby) ... */
    box-sizing: border-box;
    display: inline-block;
    
    /* Vrátime štandardný padding pre selekt */
    padding: 8px 12px; 
    margin-top: 10px;
    
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background-color: var(--card);
    
    border: 1px solid var(--border);
    border-radius: 4px;

    
    
    
}

/* Hover a Focus (ponechané) */
.woocommerce-ordering .orderby:hover,
.woocommerce-ordering .orderby:focus {
    border-color: var(--brand); 
    outline: none;
}

/* --- ŠTÝLOVANIE SELECT BOXU PRE ZORADENIE (S IKONOU) --- */

/* --- ŠTÝLOVANIE SELECT BOXU PRE ZORADENIE (S PÔVODNOU ŠÍPKOU) --- */


/* ========================================================================= */
/* D. RESPONSIVE GRID ZOBRAZENIE (PRE MOBIL) */
/* ========================================================================= */
@media (max-width: 768px) {
    /* Selekt pre zoradenie - zabezpečí, že sa centruje na úzkom displeji (z kroku 6) */
    .woocommerce-ordering {
        display: flex; /* Vynúti flex pre centrovanie na mobile */
        justify-content: center;
        width: 100%; /* Zabezpečí, že zaberie celý riadok */
    }
    
    /* Na mobile obmedzíme max. šírku select boxu, aby nezaberal 100% šírky */
    .woocommerce-ordering .orderby {
        max-width: 90%; 
        width: 100%;
    }
}


/* ========================================================================= */
/* E. ŠTÝLY PRE SINGLE PRODUCT PAGE (single-product.php) */
/* ========================================================================= */

.product-page-container {
    /* Nastavenie Flexboxu pre rozloženie hlavný obsah + sidebar */
    display: flex;
    flex-direction: row; /* Predvolené pre desktop */
    gap: 30px; /* Medzi hlavným obsahom a bočným panelom */
    padding-top: 30px;
}

.product-main-content {
    /* Hlavný obsah produktu - na desktope bude zaberať väčšinu šírky */
    flex-grow: 1; /* Povoliť, aby zaberal voľné miesto */
    width: 70%; /* Typický pomer pre hlavný obsah */
}

.product-sidebar {
    /* Bočný panel - na desktope pevná/menšia šírka a STICKY pozícia */
    width: 300px; /* Pevná šírka, môžete použiť aj percentá */
    flex-shrink: 0; /* Zabráni zmenšeniu, ak sa zmenší šírka okna */
    position: sticky; 
    top: 50px; /* Upravte podľa výšky vašej fixnej hlavičky */
    align-self: flex-start;
}

/* Štýly pre bočný panel na produkte (použijeme triedu .card pre vizuálnu konzistenciu) */
.product-sidebar .widget {
    background-color: var(--card);
    /*border: 1px solid var(--border);*/
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px; /* Odstup medzi widgetmi */
}


/* ------------------------------------------------------------------------- */
/* RESPONSIVE: MOBILNÉ ZOBRAZENIE (Podobné List View) */
/* ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Zmenši medzeru pri prechode na menšie tablety/mobily */
    .product-page-container {
        gap: 20px;
    }
}


@media (max-width: 768px) {
    .product-page-container {
        /* Zalamovanie na mobilnom zariadení - položky sa zaradia pod seba */
        flex-direction: column; 
        gap: 0; /* Zmazať medzeru, budeme používať margin-bottom pre sekcie */
        padding-top: 20px;
    }

    .product-main-content {
        /* Hlavný obsah zaberie celú šírku */
        width: 100%;
        margin-bottom: 20px; /* Odstup pod hlavným obsahom */
    }

    .product-sidebar {
        /* Bočný panel zaberie celú šírku a presunie sa pod hlavný obsah */
        /*width: 100%;*/
        order: 1; /* Zabezpečí, že bočný panel sa zobrazí až pod hlavným obsahom */
        
        /* OPRAVA PRE VIDITEĽNOSŤ NA MOBILE */
        position: static; /* Vypne sticky pozíciu z desktopu */
        top: auto; /* Zruší fixnú pozíciu */
        display: block; /* Vynúti zobrazenie, ak ho iné pravidlo skrýva */
    }

    /* Pridanie odstupov okolo widgetov na bočnom paneli na mobile, aby neboli nalepené na okraje */
    .product-page-container .product-sidebar {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Štýly pre jednoradové zobrazenie informácií v sidebare (platné pre desktop aj mobile) */
.product-sidebar .estv-info-row {
    /* Umožní zarovnanie dvoch položiek (napr. Sklad + Doručenie) na jeden riadok */
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Odstup medzi riadkami */
}

/* Zabezpečíme, že sa obsah v rámci .estv-info-row nezalomí, aby bol vždy 1 riadok */
.product-sidebar .estv-info-row > div {
    white-space: nowrap; /* Zabráni zalomeniu obsahu vnútri bloku */
    overflow: hidden;
    text-overflow: ellipsis;
}

p.stock.in-stock,
span.estv-delivery__eta,
span.muted
{
    color: #0ea338;
    font-weight: 700; 
}

.estv-loyalty .compact-link
{
    color: #009ca6;
    font-weight: 600; 
}

/* Pridanie deliacej čiary pod INFO sekciu */
.product-sidebar .estv-panel-info {
    /* Jemná čiara na oddelenie od Trust sekcie */
    border-bottom: 1px solid var(--border);
    border-top: 1px solid var(--border);
    margin-top:5px;
     
}

 /*Upravíme trust sekciu, ak je to potrebné, aby nemala zbytočne veľký margin-top*/
.product-sidebar .estv-trust-section {
    margin-top: 20px; 
}

.estv-trust-list
{
   
    font-weight: 700; 
}

/* ------------------------------------------------------------------------- */
/* ŠTÝLOVANIE PRODUKTOVÝCH ZÁLOŽIEK (TABS) */
/* ------------------------------------------------------------------------- */

/* Hlavný kontajner záložiek - odstránenie predvolených okrajov */
.woocommerce-tabs {
    margin-bottom: 30px; /* Priestor pod obsahom záložiek */
}

/* Zoznam záložiek: UL (tabs wc-tabs) */
.wc-tabs {
    list-style: none;
    display: flex; /* Zarovnanie vedľa seba */
    padding: 0;
    margin: 0;
    /* Spodná línia pod celým pásom záložiek */
    border-bottom: 2px solid var(--border); 
}

/* Jednotlivá položka záložky: LI (tab-title-*) */
.wc-tabs li {
    margin: 0;
    padding: 0;
    flex-shrink: 0; /* Zabráni zmenšeniu pod 768px */
}

/* Link (A) v záložke: Vzhľad neaktívnej záložky */
.wc-tabs li a {
    display: block;
    padding: 12px 18px; /* Vertikálny a horizontálny priestor */
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--muted); /* Neaktívny text je tlmený */
    text-decoration: none;
    border: none;
    background-color: transparent;
    transition: color 0.2s;
    outline: none; /* Odstráni modrý focus */
}

/* Hover efekt pre neaktívne záložky */
.wc-tabs li a:hover {
    color: var(--text); /* Pri nabehnutí sa zosvetlí */
}

/* AKTÍVNA ZÁLOŽKA: LI.active (hlavný štýl) */
.wc-tabs li.active {
    position: relative;
}

/* AKTÍVNA ZÁLOŽKA: Vizuálne podčiarknutie a farba */
.wc-tabs li.active a {
    color: var(--brand); /* Farba textu značky (napr. bronzová) */
    font-weight: 700;
}

/* Vytvorenie hrubej farebnej čiary pod aktívnou záložkou */
.wc-tabs li.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Zarovná sa presne na spodný okraj .wc-tabs */
    left: 0;
    width: 100%;
    height: 3px; /* Hrúbka aktívnej čiary */
    background-color: var(--brand); /* Farba značky */
    z-index: 2; /* Zabezpečí, že prekryje spodnú čiaru kontajnera .wc-tabs */
}

/* MOBILNÁ REAKTIVITA (ak je málo miesta, povoliť zalomenie) */
@media (max-width: 600px) {
    .wc-tabs {
        flex-wrap: wrap;
        border-bottom: none; /* Odstránime spodnú čiaru, ak sa zalomí */
    }
    .wc-tabs li {
        width: 50%; /* Dve záložky vedľa seba na mobiloch */
        text-align: center;
        border-bottom: 1px solid var(--border); /* Jemné oddelenie medzi riadkami */
    }
    .wc-tabs li a {
        padding: 15px 10px;
        font-size: 0.9rem;
    }
    .wc-tabs li.active::after {
        /* Na mobiloch môžeme čiaru pod aktívnym prvkom zrušiť, alebo ju nechať, 
           ale zmeniť jej zarovnanie (pre zjednodušenie ju zrušíme) */
        content: none; 
    }
    .wc-tabs li.active {
        background-color: var(--card); /* Zmena pozadia aktívnej záložky na mobiloch */
        border-bottom: 1px solid var(--card); /* Aby sa nelepila spodná čiara */
    }
}

/* ------------------------------------------------------------------------- */
/* PÄTIČKA (FOOTER) */
/* ------------------------------------------------------------------------- */

.estv-footer {
    /* Používame farbu karty pre pozadie (tmavé, ale odlišné od hlavného pozadia --bg) */
    background-color: var(--card);
    color: var(--muted);
    padding: 40px 0 0 0;
    margin-top: 50px;
    border-top: 1px solid var(--border);
    /* Jemný tieň pre oddelenie od zvyšku obsahu */
    /*box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1); */
   
}

.estv-footer .wrap {
    /* Wrap by mal mať štandardnú maximálnu šírku */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.estv-footer-top {
    display: grid;
    /* Tri stĺpce */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px;
    padding-bottom: 40px;
}

/* Hlavičky */
.estv-footer .footer-title {
    color: var(--accent); /* Svetlá farba pre nadpis */
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    /* Hrubá čiara pod nadpisom farbou značky */
    border-bottom: 2px solid var(--brand); 
    display: inline-block;
    padding-bottom: 5px;
}

/* Text a odseky */
.estv-footer p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Odkazy (List) */
.estv-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.estv-footer .footer-links li {
    margin-bottom: 10px;
}

.estv-footer .footer-links a {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.4;
}

.estv-footer .footer-links a:hover {
    color: var(--brand); /* Farba značky pri hoveri */
    text-decoration: underline;
}

/* Ikonky sociálnych sietí */
.estv-social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.estv-social-icons .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    width: 32px;
    height: 32px;
    /* Kruhový rámik okolo ikony */
    border: 1px solid var(--muted); 
    border-radius: 50%;
    transition: all 0.2s ease;
}

.estv-social-icons .social-icon:hover {
    color: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px);
}

.estv-social-icons svg {
    /* Nastavená veľkosť ikony, FB ikona má viewBox 20x20 */
    width: 20px; 
    height: 20px;
}

/* Obrázok platobných metód */
.estv-footer-payment .payment-methods-img {
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    /* Svetlejší background pod obrázkom */
    background-color: var(--bg); 
}

/* Spodná lišta (Copyright) */
.estv-footer-bottom {
    border-top: 1px solid var(--border);
    padding: 15px 0;
    text-align: center;
    font-size: 15px;
    color: var(--muted);
}

.estv-footer-bottom p {
    margin: 0;
    line-height: 1;
}

/* ========================================================================= */
/* RESPONSIVITA */
/* ========================================================================= */

@media (max-width: 900px) {
    .estv-footer-top {
        /* Zmena na 2 stĺpce pre tablety */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .estv-footer-top {
        /* Zmena na 1 stĺpec pre mobilné telefóny */
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 30px;
    }
    
    .estv-footer {
        padding-top: 30px;
    }
}









/* ========================================================================= */
/* 6. VYHĽADÁVACÍ MODAL (CUSTOM SEARCH) - NOVÉ ŠTÝLY PRENESENÉ Z PHP */
/* ========================================================================= */

.search-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.search-pagination-controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.search-pagination-controls .prev-btn {
    justify-self: flex-start;
}
.search-pagination-controls .next-btn {
    justify-self: flex-end;
    margin-left: auto;
}
.search-view-all-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.view-all-button {
    background-color: var(--brand); 
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    text-decoration: none;
}
.view-all-button:hover {
    background-color: var(--brand-2); 
    color: #fff;
}
.view-all-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.search-key-selector {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333; /* Tento štýl sa prepíše špecifickým štýlom nižšie */
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
}

.search-key-selector label {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    color: var(--muted); /* Zabezpečí, že farba sa správne aplikuje */
    cursor: pointer;
}

.search-key-selector input[type="checkbox"] {
    accent-color: var(--brand); /* Použijeme farbu značky */
    transform: scale(1.1);
}
	
.search-product-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.search-product-link:hover {
    text-decoration: none;
    color: inherit;
}

/* 6. VYHĽADÁVACÍ MODAL (CUSTOM SEARCH) */

#e-stavivo-search-modal-desktop, 
#e-stavivo-search-modal-mobile {
    position: fixed;
    background: var(--bg); /* Farba pozadia */
    z-index: 1005; 
    opacity: 0;
    visibility: hidden;
    overflow-y: auto; /* Možnosť scrollovania obsahu */
    padding: 20px; /* Univerzálny padding */

    /* Animácia pre desktop: centrovanie a mierne zmenšenie/zväčšenie */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); 
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    
    /* DESKTOP VIZUÁLNE NASTAVENIA: Oddelené okno */
    max-width: 1900px; 
    width: calc(100% - 20px); /* 100% šírky mínus 2x30px odskok */
    height: 95vh; /* Aby nebol úplne full-screen */
    max-height: calc(100% - 20px); /* Max výška na 90vh, ale s odskokom 30px */
    border-radius: 12px; 
    
    /* Vytvorí tieň, ktorý simuluje overlay */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
}

/* Modal sa aktivuje triedou .active */
#e-stavivo-search-modal-desktop.active,
#e-stavivo-search-modal-mobile.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* HLAVIČKA MODALU (Logo, Input, Zavrieť tlačidlo) */
.modal-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 0px;
    padding: 5px 0; 
    border-bottom: 1px solid var(--border);
    max-width: var(--wrap-width, 1600px); 
    margin: 0 auto; 
}

/* Logo v modale */
.modal-logo {
    flex-shrink: 0; /* Zabezpečí, že logo zostane vo svojej veľkosti */
}

/* Centrálna vyhľadávacia lišta */
.header-search-bar {
    flex-grow: 1; /* Nechá vyhľadávací input zabrať čo najviac miesta */
    max-width: 600px; /* Obmedzenie maximálnej šírky pre input */
    margin: 0;
}

/* Vnútro vyhľadávacej lišty (Input + Button) */
.custom-search-inner {
    display: flex;
    width: 100%;
    /* Pridáme zaoblenie pre celú lištu */
    border-radius: 8px; 
    overflow: hidden; /* Skryje hrany, ak sú input a button rôznej výšky */
    border: 1px solid var(--border); /* Rámik pre celú lištu */
}

.custom-search-input {
    flex-grow: 1;
    padding: 10px 15px;
    font-size: 16px;
    /* Odstránime border a zaoblenie, keďže to má teraz .custom-search-inner */
    border: none; 
    border-radius: 0;
    background: var(--card);
    color: var(--text);
    outline: none;
}

.custom-search-button {
    background: var(--brand);
    border: none;
    padding: 10px 15px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Zabezpečí, že sa tlačidlo nezmenší */
}

.custom-search-button img {
    filter: brightness(0) invert(1); /* Ak je ikona čierna, zmení sa na bielu na bronzovom pozadí */
}

/* Zavrieť tlačidlo */
.search-close {
    flex-shrink: 0;
    cursor: pointer;
    color: var(--muted);
    font-size: 14px;
    text-align: right;
    padding: 5px 0px; /* Pre ľahšie kliknutie */
    transition: color 0.2s;
    margin-top: 5px
}
.search-close:hover {
    color: var(--accent);
}

/* ROZLOŽENIE VÝSLEDKOV PRE DESKTOP */
#search-layout-desktop {
    /* Udržujeme 2-stĺpcové rozloženie: Kategórie | Výsledky */
    display: grid;
    grid-template-columns: 200px 1fr; 
    gap: 30px;
    max-width: var(--wrap-width, 1600px); 
    margin: 30px auto 0;
}

/* SELEKTOR VYHĽADÁVACÍCH KĽÚČOV (generuje JS) */
/* V prenesenom kóde sa definícia triedy .search-key-selector opakuje.
   Ponechávame len špecifické štýly pre desktop layout. */
#search-layout-desktop .search-key-selector {
    /* Uistite sa, že je zarovnaný nad výsledkami */
    grid-column: 2; 
    display: flex;
    /*gap: 15px;*/
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    /* Farba textu a checkboxu pre desktop je už zadefinovaná v .search-key-selector */
}

.search-key-selector label {
    /* Špecifická farba pre text - prepisuje #333 z prvej definície */
    color: var(--muted);
}
.search-key-selector input[type="checkbox"]:checked + label {
    color: var(--text); 
}

/* ŠTÝLY PRE JEDNOTLIVÉ PRODUKTY (Auto-suggest) */
.search-product {
    padding: 15px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px; /* Pridaný margin pre oddelenie kariet */
    text-align: center;
}
.search-product-link {
    /*display: flex;*/
    gap: 20px;
    text-decoration: none;
    color: inherit;
    /*width: 100%;*/
    padding: 0 15px; /* Pridáme padding dovnútra linku */
}
.search-product img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    flex-shrink: 0;
    /*border: 1px solid var(--border);*/
    border-radius: 4px;
}
.search-product .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.search-product strong {
    font-size: 16px;
    margin-bottom: 4px;
}
.search-product .price {
    color: var(--brand);
    font-weight: 600;
    font-size: 14px;
}
.search-product .sku, .search-product .availability {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

/* OVERLAY (PREKRYTIE POZADIA) */
#e-stavivo-search-overlay-desktop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Mierne tmavé pozadie, ktoré je viditeľné */
    background: rgba(0, 0, 0, 0.6); 
    z-index: 1004;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#e-stavivo-search-overlay-desktop.active { 
    opacity: 1;
    visibility: visible;
}

/* ========================================================================= */
/* MOBILNÉ REAKTIVITA (VYHĽADÁVANIE) */
/* ========================================================================= */

@media (max-width: 768px) {
    /* Mobilné zobrazenie pre .search-key-selector */
    .search-key-selector {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: 0;
        margin-bottom: 6px;
    }

    /* Odstránenie zbytočnej medzery pod kategóriami na mobile */
    #search-categories-column-mobile {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #e-stavivo-search-modal-mobile {
        /* Vrátime na full-screen, ale s malým odskokom */
        top: 5px;
        left: 5px;
        transform: translate(0, 0) scale(1); /* Zruší centrovanie/škálovanie */

        /* Mobilné rozmery: 5px odskok od všetkých okrajov */
        width: calc(100% - 10px); 
        height: calc(100% - 10px); 
        max-height: calc(100% - 10px);
        
        border-radius: 8px; /* Menej zaoblené */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Jemnejší tieň */
    }

    #search-layout-mobile {
        display: block; /* V mobile bude viditeľný */
    }
    
    #search-layout-desktop{
        grid-template-columns: 1fr; /* Jeden stĺpec */
        gap: 0;
    }
    .modal-header-bar {
        flex-wrap: wrap; /* Umožní elementom preskočiť na nový riadok */
        justify-content: center;
        text-align: center;
        padding-top: 5px;
    }
    .modal-logo {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }
    .search-close {
        width: 100%;
        order: 3; /* Umiestni tlačidlo "Zavrieť" na koniec */
        /*text-align: center; /* Centrovanie zavrieť tlačidla */
    }
    .header-search-bar {
        order: 2;
        width: 100%;
    }
    #search-layout-desktop .search-key-selector {
        grid-column: 1; /* Musí byť v prvom stĺpci v mobile */
        justify-content: center;
        border-bottom: none; /* Odstránime hrubú čiaru pod selectormi v mobilnom layoute */
        padding-bottom: 0;
    }
    .search-product-link {
        gap: 10px;
    }
    
}

#search-results-grid-desktop {
    /* Nastaví kontajner ako CSS mriežku */
    display: grid; 
    
    /* Auto-fit: Vytvorí toľko stĺpcov, koľko sa zmestí. */
    /* Minmax(180px, 1fr): Každý stĺpec bude mať minimálnu šírku 180px. */
    /* Ak je miesta viac, rovnomerne vyplní priestor (1fr). */
    /*grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));*/
    grid-template-columns: repeat(auto-fill, minmax(160px, auto));
    /* Medzery medzi stĺpcami a riadkami (prispôsobte podľa potreby) */
    gap: 20px; 
}

#search-categories-column-desktop {
    /* Orámovanie: hrúbka 1px, plná čiara, svetlo šedá farba */
    border: 1px solid var(--border);
    
    /* Farba pozadia: napr. veľmi svetlo šedá pre zvýraznenie */
    background-color: var(--card);
    
    /* Zaoblenie rohov: 8px (môžete zmeniť hodnotu) */
    border-radius: 8px; 
    
    /* Odporúčané: pridanie vnútorného odsadenia pre lepší vzhľad obsahu */
    padding: 15px; 
    
   
}



/* ========================================================================= */
/* 7. SINGLE PRODUCT CUSTOM SECTIONS (USPs & HEUREKA) */
/* ========================================================================= */

/* Global Wrapper pre oddelenie sekcií od Related Products */
.estv-custom-info-sections {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* === USP Section (estavivo_product_usps) === */
.estv-usps {
    background-color: var(--card); /* Použije farbu kariet */
    border: 1px solid var(--border); /* Použije farbu ohraničenia */
    border-radius: 12px;
    padding: 24px 16px;
    margin: 32px auto 12px;
    color: var(--text); /* Základný text farba */
}

.estv-usps__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
    text-align: center;
}

.estv-usps__item {
    padding: 8px 6px;
}

.estv-usps__icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin: 0 auto 8px;
    display: block;
}

.estv-usps__title {
    font-size: 18px;
    line-height: 1.3;
    margin: 6px 0 6px;
    font-weight: 700;
    color: var(--accent); /* Pre titulok použijeme akcentnú farbu */
}

.estv-usps__text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted); /* Pre popis použijeme tlmenú farbu */
    margin: 0;
}

/* === HEUREKA Reviews Section (custom_insert_heureka_reviews) === */
.estv-custom-info-sections .custom_insert_heureka_reviews {
    /* Predpokladáme, že Heureka widget by mal mať vizuálny štýl ako card */
    margin-top: 30px;
    padding: 20px;
    background-color: var(--card); 
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* === Media Queries (Pôvodné z custom_additional_info.php) === */

/* Tablet */
@media (max-width: 1024px) {
    .estv-usps__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobil */
@media (max-width: 680px) {
    .estv-usps {
        padding: 20px 14px;
        margin: 20px auto 10px;
        border-radius: 8px;
    }
    .estv-usps__grid {
        gap: 20px;
    }
    .estv-usps__item {
        padding: 0;
    }
    .estv-usps__title {
        font-size: 16px;
    }
    .estv-usps__text {
        font-size: 13px;
    }
}

/* Umiestni badge relatívne voči karte produktu v archive / grid / list view */
.woocommerce ul.products li.product,
.woocommerce ul.products.grid-view li.product,
.estv-list-item.product,
.products.grid-view li.product {
  position: relative;      /* referenčný kontajner pre .custom-badge-container */
  overflow: visible;       /* aby sa badge nestratil, ak by karte chýbal priestor */
}

/* Ak chceš väčšiu prioritu (použi len ak iné pravidlá prepisujú) */
/* .woocommerce ul.products li.product { position: relative !important; } */


.estv-list-item.product .custom-badge-container {
    top: -20px; 
    left: 0px;
}


.grid-view .estv-list-item .custom-badge-container {
    top: 0px; 
    left: 0px;
}

/* ========================================================================= */
/* SHOP LAYOUT & FILTERS (Unified Version) */
/* ========================================================================= */

/* --- 1. GRID LAYOUT (Desktop) --- */
@media (min-width: 769px) {
    .shop-container {
        display: grid !important;
        grid-template-columns: 280px 1fr !important;
        gap: 40px;
        align-items: start;
    }

    .estv-filters-container {
        grid-column: 1 / 2;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }

    .shop-main-content {
        grid-column: 2 / 3;
    }
}

/* --- 2. MOBILE LAYOUT (Pod 768px) --- */
@media (max-width: 768px) {
    .shop-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
    }

    .estv-filters-container {
        width: 100% !important;
        order: 1;
    }

    .shop-main-content {
        width: 100% !important;
        order: 2;
    }
    
    .estv-accordion.is-open .estv-accordion-content {
        max-height: 300px; /* Trochu menšie na mobile */
    }
}

/* --- 3. ACCORDION (Spoločné štýly) --- */
.shop-filter-widget {
    width: 100% !important;
    margin-bottom: 15px !important;
    float: none !important;
    box-sizing: border-box;
    clear: both;
}

.estv-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.estv-accordion.is-open .estv-accordion-content {
    max-height: 500px;
    overflow-y: auto;
    padding-top: 10px;
}

/* Nadpis a interaktivita */
.shop-filter-widget .widget-title {
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    user-select: none;
}

/* Šípka (používame span pre lepšie ukotvenie) */
.shop-filter-widget .widget-title span {
    display: block;
    position: relative;
    /*width: 100%;*/
    padding-right: 25px;
}

.shop-filter-widget .widget-title span::after {
    content: '▼';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    transition: transform 0.3s;
}

.estv-accordion.is-open .widget-title span::after {
    transform: translateY(-50%) rotate(180deg);
}

/* --- 4. RESET SEKCIA --- */
.reset-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    width: 100%;
}

.reset-filters-btn {
    display: block;
    /*width: 100%;*/
    text-align: center;
    background: #ff6b00 !important;
    color: #fff !important;
    padding: 12px;
    border-radius: 6px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: opacity 0.2s;
}

.reset-filters-btn:hover {
    opacity: 0.9;
}

/* --- TOP 10 PRODUKTOV WIDGET --- */
/* --- TOP 10 PRODUKTOV WIDGET --- */
/* --- TOP 10 PRODUKTOV WIDGET --- */
/* ========================================================================= */
/* TOP 10 PRODUKTOV - MODERN CARDS STYLE (Oprava Slidera) */
/* ========================================================================= */

.estv-top-products {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Hlavný obal obsahu - VYPÍNAME SLIDER */
.estv-top-products .estv-accordion-content {
    max-height: 0;
    overflow: visible !important; /* Toto zruší slider */
    transition: max-height 0.5s ease-in-out;
}

/* Rozbalený stav - zväčšená výška pre 10 kariet */
.estv-top-products.is-open .estv-accordion-content {
    max-height: 2000px !important; /* Musí byť dosť veľké pre všetky karty */
    overflow: visible !important;
    padding-bottom: 20px;
}

.estv-top-products .widget-title {
    border-bottom: 2px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.estv-top-products ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Karta produktu */
.estv-top-products li {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    /*background: var(--card);*/
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

.estv-top-products li:hover {
    transform: translateY(-2px);
    border-color: var(--brand) !important;
}

/* Ranks */
.estv-top-products .rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    border-radius: 6px;
    margin-right: 15px;
    font-size: 12px;
    flex-shrink: 0;
    color: #fff !important;
}

.rank-1 { background: #FFD300; color: #000 !important; }
.rank-2 { background: #B5B5B5; color: #000 !important; }
.rank-3, .rank-4, .rank-5, .rank-6, .rank-7, .rank-8, .rank-9, .rank-10 { 
    background: var(--brand); 
}

/* Obrázok */
.estv-top-products .top-img-link {
    margin-right: 15px;
    background: #fff;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid #eee;
    display: flex;
    flex-shrink: 0;
}

.estv-top-products img {
    width: 45px;
    height: 45px;
    object-fit: cover;
}

/* Texty */
.top-products-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-products-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-products-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
}

/* Skrytie na mobile */
@media (max-width: 768px) {
    .estv-top-products { display: none !important; }
}

/* Hlavný obal obsahu TOP 10 */
.estv-top-products .estv-accordion-content {
    max-height: 0;
    /* DÔLEŽITÉ: Pri zatvorenom stave musí byť hidden, aby karty zmizli */
    overflow: hidden !important; 
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); /* Plynulejšia animácia */
    opacity: 0;
    pointer-events: none; /* Zabráni klikaniu na neviditeľné karty */
}

/* Rozbalený stav */
.estv-top-products.is-open .estv-accordion-content {
    max-height: 2500px !important; 
    opacity: 1;
    pointer-events: auto;
    /* Po rozbalení povolíme visible, aby vynikli tiene kariet */
    overflow: visible !important; 
    padding-bottom: 20px;
    padding-top: 10px;
    transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in;
}

/* Zabezpečenie, aby UL a LI rešpektovali rodiča */
.estv-top-products ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- TOP BAR --- */
.estv-top-bar {
    /* Používame premennú --card, ktorá je v Dark mode tmavosivá a v Light mode biela */
    background-color: var(--card); 
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    padding: 8px 0;
    color: var(--muted);
}

/* Ak by si chcel v Light móde úplne bielu a v Dark móde o niečo svetlejšiu ako čiernu, 
   takto to vynútiš cez tvoju triedu .light-theme: */
html.light-theme .estv-top-bar {
    background-color: #ffffff;
}

.estv-top-bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    gap: 20px;
}

.top-bar-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}

.top-bar-link:hover {
    color: var(--brand);
}

.top-bar-link .icon-svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.top-bar-right .top-bar-text {
    font-weight: 500;
    color: var(--brand-2); /* Zelená farba pre benefit */
}

/* Skrytie na malých mobiloch, ak je tam málo miesta */
@media (max-width: 480px) {
    .top-bar-right { display: none; }
}

/* Oprava pre pravú stranu Top Baru */
.top-bar-right {
    display: flex;       /* Toto zoradí ikony vedľa seba */
    gap: 15px;          /* Medzera medzi ikonami */
    align-items: center; /* Vertikálne zarovnanie na stred */
}

/* Uisti sa, že odkazy vpravo nemajú nechcené okraje */
.top-bar-right .top-bar-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* Zabezpečenie veľkosti ikon, ak by boli príliš veľké/malé */
.top-bar-right .icon-svg {
    width: 16px;
    height: 16px;
}

/* Skrytie Top Baru na mobiloch a tabletoch (pod 768px) */
@media (max-width: 768px) {
    .estv-top-bar {
        display: none !important;
    }
}






/* Container spodnej lišty */
/* Container spodnej lišty */
/* Container spodnej lišty */
/* Container spodnej lišty */
.header-nav-bottom {
    /*background: var(--card);*/
    border-bottom: 1px solid var(--border);
}

/* Skrytie Top Baru na mobiloch a tabletoch (pod 768px) */
@media (max-width: 768px) {
    .header-nav-bottom {
        display: none !important;
    }
}

.mega-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-menu-list > .menu-item {
    position: static; /* Dôležité pre Full-Width menu */
}

.mega-menu-list > .menu-item > a {
    display: block;
    padding: 15px 20px;
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.mega-menu-list > .menu-item:hover > a {
    color: var(--brand);
}

/* Skrytý panel mega menu */
.mega-menu-panel {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--bg); /* Tmavé pozadie témy */
    border-bottom: 2px solid var(--brand);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease;
    padding: 30px 0;
}

.menu-item:hover .mega-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.mega-grid .dyn_menu_subcategory-item {
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    /*text-align: center;*/
    text-decoration: none;
    /*background: var(--card);*/
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.mega-grid .dyn_menu_subcategory-item:hover {
    border-color: var(--brand);
    /*background: #32363a;*/
}

.mega-grid .dyn_menu_subcategory-item img {
    /*width: 60px;*/
    /*height: 60px;*/
    object-fit: contain;
    margin-bottom: 10px;
}

.mega-grid .dyn_menu_subcategory-item span {
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
}









/* Grid Container */
.dyn_menu_subcategory-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 30px;
    max-width: 1600px;
}

/* Individual Grid Item */
.dyn_menu_subcategory-item {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 250px;
    height: 60px;
    padding: 5px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    box-sizing: border-box; /* ensure proper sizing */
    min-width: 0; /* allow text ellipsis */
}

/* Thumbnail Image */
.dyn_menu_subcategory-item img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    margin-right: 10px;
    border-radius: 3px;
}

/* Category Name */
.dyn_menu_subcategory-item span {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    white-space: normal;   /* umožní zalomenie */
    overflow: visible;     /* povolí celý text */
    text-overflow: unset;  /* vypne tri bodky */
    line-height: 1.2;      /* aby riadky neboli natlačené */
}


/* Hover Effect */
.dyn_menu_subcategory-item:hover {
    /*background: #eee;*/
    transform: scale(1.02);
}

/* Mobile: 2 columns + vyššie boxy + zalomený text */
@media (max-width: 768px) {
    .dyn_menu_subcategory-list {
        flex-direction: row;
        align-items: stretch;
        width: 100%;
    }

    .dyn_menu_subcategory-item {
        flex: 0 1 calc(50% - 10px);     /* 2 stĺpce */
        max-width: calc(50% - 10px);
        width: calc(50% - 10px);
        min-height: 90px;               /* vyššia minimálna výška */
        height: auto;                   /* rast podľa obsahu */
        align-items: center;
        padding: 10px;                  /* viac priestoru */
        box-sizing: border-box;
    }

    .dyn_menu_subcategory-item img {
        width: 40px;                    /* mierne menšie na mobile */
        height: 40px;
        margin-right: 8px;
    }

    .dyn_menu_subcategory-item span {
        white-space: normal;            /* povolí zalomenie */
        overflow: visible;              /* bez skracovania */
        text-overflow: clip;            /* vypne … */
        line-height: 1.3;
    }
}


/* Link reset (keep) */
.dyn_menu_subcategory-item a {
    text-decoration: none;
}



/* Reset vplyvov témy v mega menu */
.estv-mega-reset ul, 
.estv-mega-reset li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Mriežka */
.mega-grid .dyn_menu_subcategory-list {
    /*display: grid !important;*/
    /*display: inline-flex;*/
    /*grid-template-columns: repeat(4, 1fr) !important; /* 4 stĺpce podľa nákresu */
    /*gap: 15px !important;*/
    margin-bottom: -20px;
    /*padding: 20px !important;*/
}

/* Biely zaoblený box (Položka) */
.mega-item-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out;
}

.mega-item-box:hover {
    border-color: var(--brand, #f15a24);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* Vnútorný odkaz - Flexbox pre zarovnanie ikony a textu */
.dyn_menu_subcategory-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 12px !important;
    text-decoration: none !important;
    height: 100%;
}

/* Ikonka vľavo */
.img-holder {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    margin-right: 12px;
}

.img-holder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Textová časť vpravo */
.text-holder {
    flex: 1;
    min-width: 0;
}

.cat-title {
    display: block;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #1a202c !important;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* Zoznam vnúčat (podkategórií) pod názvom */
.mega-child-links {
    margin-top: 5px !important;
}

.mega-child-links li {
    font-size: 12px !important;
    color: #718096 !important;
    line-height: 1.4 !important;
    margin-bottom: 2px !important;
}

.mega-item-box:hover .cat-title {
    color: var(--brand, #f15a24) !important;
}


/* Hlavný box položky */
.mega-grid .dyn_menu_subcategory-item {
    display: flex !important;
    align-items: flex-start !important; /* Zarovnanie na horný okraj kvôli zoznamu */
    /*background: var(--card);*/
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    transition: all 0.2s;
    gap: 12px;
}

/* Štýl pre obrázok */
.mega-img-link {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    display: block;
}

.mega-img-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Obsahová časť s textami */
.mega-text-content {
    display: flex;
    flex-direction: column;
}

/* Hlavný nadpis v boxe */
.mega-main-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 5px;
    line-height: 1.2;
}

.mega-main-title:hover {
    color: var(--brand);
}

/* Zoznam odkazov pod názvom */
.mega-grandchildren-list {
    display: flex;
    flex-direction: column; /* Podkategórie pod sebou */
    gap: 3px;
}

.grandchild-link {
    font-size: 12px;
    color: #888; /* Jemnejšia farba pre vnúčatá */
    text-decoration: none;
    transition: color 0.2s;
}

.grandchild-link:hover {
    color: var(--brand);
    text-decoration: underline;
}

/* Celkový hover boxu (voliteľné) */
.mega-grid .dyn_menu_subcategory-item:hover {
    border-color: var(--brand);
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/
}


/* RESPONSIVE GRID PRE MOBILE */

/* Tablet (2 stĺpce) */
@media (max-width: 991px) {
    .mega-grid .dyn_menu_subcategory-list {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 10px !important;
    }
}

/* Mobil (1 alebo 2 stĺpce podľa šírky) */
@media (max-width: 600px) {
    .mega-grid .dyn_menu_subcategory-list {
        /* Skúsime 2 stĺpce, ak je displej dostatočne široký, inak 1 */
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
        gap: 10px !important;
    }

    .mega-grid .dyn_menu_subcategory-item {
        padding: 10px !important;
        /* Na mobile zmenšíme medzeru medzi obrázkom a textom */
        gap: 8px !important;
    }

    /* Ak je box príliš úzky, obrázok a text môžu ísť pod seba (voliteľné) */
    /* Ak chceš striktne 1 stĺpec, zmeň auto-fill na: 1fr */
}





		.estv-custom-control-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px 10px 20px;
    /*background: var(--card);*/
    /*border: 1px solid var(--border);*/
    border-radius: 8px;
    /*margin-bottom: 25px;*/
    gap: 15px;
}

.control-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Reset WC defaultov, ktoré nás hnevali */
.estv-custom-control-bar .woocommerce-result-count,
.estv-custom-control-bar .woocommerce-ordering {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important; /* WC rád používa float, ten musíme zabiť */
}

/* Štýl pre dropdown (Najlacnejšie...) */
.woocommerce-ordering select {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
}

/* Prepínač ikoniek */
.estv-view-toggle {
    display: flex;
    gap: 5px;
    border-left: 1px solid var(--border);
    padding-left: 15px;
}

.estv-view-toggle button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 5px;
    transition: color 0.2s;
}

.estv-view-toggle button:hover, 
.estv-view-toggle button.active {
    color: var(--brand);
}

/* --- RESPONZIVITA (Tablet a Mobil) --- */
@media (max-width: 991px) {
    .estv-custom-control-bar {
        flex-direction: column; /* Naskladá prvky pod seba */
        align-items: stretch;   /* Prvky sa roztiahnu na celú šírku */
        gap: 15px;
        padding: 15px;
    }

    .control-left {
        order: 1; /* Count pôjde prvý */
        text-align: center;
    }

    .control-right {
        order: 2; /* Sorting a Toggles pôjdu pod to */
        flex-direction: column; /* Aj vnútri pravého bloku dáme sorting nad toggles */
        gap: 15px;
        width: 100%;
    }

    .estv-sorting-wrapper {
        order: 1; /* Sorting (Najlacnejšie...) */
        width: 100%;
    }

    .estv-sorting-wrapper select {
        width: 100%; /* Dropdown na celú šírku na mobile */
    }

    .estv-view-toggle {
        order: 2; /* Toggles (Grid/List) úplne naspodok */
        justify-content: center;
        border-left: none; /* Zrušíme bočnú čiaru, keďže už nie sú vedľa seba */
        border-top: 1px solid var(--border); /* Pridáme hornú čiaru pre oddelenie */
        padding-left: 0;
        padding-top: 10px;
        width: 100%;
    }
}

/* --- BREADCRUMBS STYLES --- */
.custom-breadcrumbs {
    padding: 10px 0 0 0;
    font-size: 13px;
    color: var(--muted);
}

.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1.4;
}

/* Odkazy v breadcrumbs */
.woocommerce-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.woocommerce-breadcrumb a:hover {
    color: var(--brand); /* Oranžová pri hoveri */
}

/* Separátor (lomka alebo šípka) */
/* Poznámka: WooCommerce niekedy vkladá separátor ako text, inokedy cez CSS */
.woocommerce-breadcrumb .breadcrumb-separator {
    color: var(--border);
    font-size: 11px;
    display: inline-block;
    padding: 0 2px;
}

/* Aktuálna stránka (posledný prvok) */
.woocommerce-breadcrumb span:last-child, 
.woocommerce-breadcrumb .current {
    color: var(--text);
    font-weight: 500;
}

/* Úprava pre mobil */
@media (max-width: 768px) {
    .custom-breadcrumbs {
        padding: 5px 0 15px 0;
    }
    
    .woocommerce-breadcrumb {
        font-size: 12px;
        gap: 5px;
    }
}

/* --- FIX PRE PRÍPAD, ŽE WOOCOMMERCE VKLADÁ SEPARÁTOR AKO TEXT --- */
/* Ak sa ti zobrazujú dve lomky, tento kód jednu skryje */
.woocommerce-breadcrumb {
    color: var(--muted);
}





/* ========================================================================= */
/* C. GRID VIEW ZOBRAZENIE - ČISTÉ STYLOVANIE ATRIBÚTOV */
/* ========================================================================= */

/* 1. HLAVNÉ GRID ROZLOŽENIE */
.woocommerce ul.products.grid-view {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    list-style: none !important;
}

/* Neutralizácia WC prvkov */
.woocommerce ul.products.grid-view::before,
.woocommerce ul.products.grid-view::after {
    content: none !important;
    display: none !important;
}

/* 2. KARTA PRODUKTU (.estv-product-card) */
.woocommerce ul.products.grid-view li.estv-product-card {
    /*background-color: var(--card) !important;*/
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 10px !important; /* Kompaktný padding */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease;
}

.woocommerce ul.products.grid-view li.estv-product-card:hover {
    border-color: var(--brand) !important;
}

/* 3. OBRÁZOK (.estv-product-image) */
.products.grid-view .estv-product-image {
    width: 100%;
    height: 160px; /* Fixná výška pre zarovnanie názvov */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    background: transparent;
}

.products.grid-view .estv-product-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 4. DETAILY PRODUKTU (.estv-product-details) */
.products.grid-view .estv-product-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Zabezpečí, že cena pôjde dole */
}

/* Názov produktu */
.products.grid-view .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text) !important; /* Farba textu */
    line-height: 1.2 !important;
    height: 36px; /* Výška pre 2 riadky */
    margin: 5px 0 !important;
    text-align: left !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 5. CENA (.estv-product-price a WC .price) */
.products.grid-view .estv-product-price {
    margin-top: auto; /* Prichytí cenu na spodok karty */
    padding-top: 5px;
}

/* Targetujeme priamo WooCommerce span.price */
.products.grid-view .price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text) !important; /* CENA MÁ ROVNAKÚ FARBU AKO NÁZOV */
    display: block !important;
    text-align: left !important;
}

/* Menšie "s DPH" */
.products.grid-view .price .woocommerce-price-suffix {
    font-size: 11px;
    font-weight: 400;
    color: var(--muted);
}

/* 6. RESPONZIVITA */
@media (max-width: 1024px) {
    .woocommerce ul.products.grid-view {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .woocommerce ul.products.grid-view {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* ========================================================================= */
/* ODSTRÁNENIE NEŽIADUCICH MARGINOV Z WOOCOMMERCE */
/* ========================================================================= */

/* 1. Zrušenie okraja na celom zozname */
.woocommerce ul.products.grid-view {
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Zrušenie okrajov na samotnej karte produktu */
.woocommerce ul.products.grid-view li.estv-product-card {
    margin: 0 !important; /* WooCommerce tu často pridáva margin-bottom alebo margin-right */
    padding: 10px !important; /* Držíme len ten padding, ktorý sme si dohodli */
}

/* 3. Zrušenie okraja pod odkazom (niektoré témy ho pridávajú) */
.woocommerce ul.products.grid-view li.estv-product-card a {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    text-decoration: none;
}

/* 4. Odstránenie marginu pod posledným prvkom v karte (napr. pod cenou) */
.woocommerce ul.products.grid-view li.estv-product-card .estv-product-price .price {
    margin-bottom: 0 !important;
}








/* ========================================================================= */
/* C. PREPÍNATEĽNÉ GRID ZOBRAZENIE (LARGE & COMPACT) */
/* ========================================================================= */

/* 1. SPOLOČNÉ NASTAVENIA PRE OBA GRIDY */
.woocommerce ul.products.grid-large,
.woocommerce ul.products.grid-compact {
    display: grid !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    list-style: none !important;
}

/* Odstránenie WC vplyvov */
.woocommerce ul.products.grid-large::before, .woocommerce ul.products.grid-large::after,
.woocommerce ul.products.grid-compact::before, .woocommerce ul.products.grid-compact::after {
    content: none !important;
    display: none !important;
}

.woocommerce ul.products.grid-large li.estv-product-card,
.woocommerce ul.products.grid-compact li.estv-product-card {
    /*background-color: var(--card) !important;*/
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important; /* Vynulovanie WC marginu */
    box-sizing: border-box !important;
    transition: border-color 0.3s ease;
}

/* 2. ŠPECIFICKÉ NASTAVENIA PRE GRID LARGE (4 stĺpce) */
.woocommerce ul.products.grid-large {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}

.woocommerce ul.products.grid-large li.estv-product-card {
    padding: 12px !important;
}

.grid-large .estv-product-image {
    height: 170px;
    margin-bottom: 10px;
}

.grid-large .woocommerce-loop-product__title {
    font-size: 15px !important;
    height: 48px;
}

/* 3. ŠPECIFICKÉ NASTAVENIA PRE GRID COMPACT (6 stĺpcov) */
.woocommerce ul.products.grid-compact {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
}

.woocommerce ul.products.grid-compact li.estv-product-card {
    padding: 8px !important;
}

.grid-compact .estv-product-image {
    height: 120px; /* Menší obrázok v kompaktnom režime */
    margin-bottom: 5px;
}

.grid-compact .woocommerce-loop-product__title {
    font-size: 13px !important;
    height: 58px; /* Menej miesta pre názov */
    line-height: 1.2 !important;
}

.grid-compact .price {
    font-size: 15px !important; /* Menšia cena v kompaktnom režime */
}

/* 4. SPOLOČNÉ PRVKY (OBRÁZOK, CENA, TEXT) */
.estv-product-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.estv-product-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.woocommerce-loop-product__title {
    font-weight: 600 !important;
    color: var(--text) !important;
    text-align: left !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 5px 0 !important;
}

.estv-product-price {
    margin-top: auto !important;
    padding-top: 5px;
}

.price {
    font-weight: 700 !important;
    color: var(--text) !important;
    display: block !important;
}


/* 5. RESPONZIVITA (Oprava rozbíjania na menších displejoch) */
@media (max-width: 1200px) {
    .woocommerce ul.products.grid-large { grid-template-columns: repeat(3, 1fr) !important; }
    .woocommerce ul.products.grid-compact { grid-template-columns: repeat(4, 1fr) !important; }
}

@media (max-width: 768px) {
    .woocommerce ul.products.grid-large { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .woocommerce ul.products.grid-compact { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
}

@media (max-width: 480px) {
    /* Na úplne malých mobiloch vrátime 2 stĺpce pre oba režimy */
    .woocommerce ul.products.grid-large,
    .woocommerce ul.products.grid-compact {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}



/* Reset WooCommerce default list behavior */
#products-archive-loop {
    display: grid !important;
    float: none !important;
    width: 100% !important;
}

#products-archive-loop li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Aktívne tlačidlo prepínača */
.estv-view-toggle button.active {
    color: var(--brand);
    border-color: var(--brand);
    background-color: var(--card);
}


/* Nastavenie veľkosti ceny v gride */
.products.grid-large .price, 
.products.grid-compact .price {
    font-size: 1em !important; /* Rovnaká veľkosť ako názov produktu */
    font-weight: 700 !important;
    color: var(--text) !important;
    display: block !important;
}

/* Úprava prípony "s DPH" aby nebola príliš veľká pri 1em cene */
.products.grid-large .price .woocommerce-price-suffix,
.products.grid-compact .price .woocommerce-price-suffix {
    font-size: 0.75em !important; 
    font-weight: 400;
    color: var(--muted);
    margin-left: 4px;
}

/* Zarovnanie bloku ceny */
.estv-product-price {
    margin-top: auto !important;
    padding-top: 4px;
    line-height: 1.2;
}










/* Sidebar základ */
.sidebar-navigation {
    position: fixed;
    top: 0; right: 0;
    width: 320px; max-width: 85%; height: 100%;
    background-color: var(--bg) !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.sidebar-navigation.open { transform: translateX(0); }

/* Zoznamy */
.sidebar-menu-list, .sidebar-menu-list ul.sub-menu {
    list-style: none !important;
    padding: 0 !important; margin: 0 !important;
    width: 100%;
}

.sidebar-navigation ul.sub-menu { display: none; }

.sidebar-navigation li.level-open > ul.sub-menu {
    display: block !important;
    animation: fadeInJMB 0.2s ease-out;
}

/* Položky menu */
.sidebar-navigation li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg);
}

.sidebar-navigation li a {
    flex: 1;
    display: flex !important;
    align-items: center !important;
    padding: 0px 5px !important;
    min-height: 48px;
    color: var(--text) !important;
    font-size: 14px !important;
    font-weight: 500;
    text-decoration: none !important;
}

/* Tlačidlo SPÄŤ - JMB Štýl */
.back-item {
    background-color: var(--card) !important;
    border-bottom: 2px solid var(--border) !important;
    padding: 15px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    color: var(--brand) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    width: 100% !important;
}

.back-item::before {
    content: '‹';
    font-size: 24px;
    margin-right: 12px;
    line-height: 0;
}

/* Trigger šípka */
.submenu-trigger {
    padding: 0px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border);
    min-height: 40px;
}

.menu-arrow {
    width: 7px; height: 7px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(-45deg);
    opacity: 0.6;
}

/* Ikony kategórií */
.lazy-category-icon {
    width: 30px !important; height: 30px !important;
    margin-right: 12px !important;
    background-color: var(--card); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; border: 1px solid var(--border);
}

.lazy-category-icon img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }


@keyframes fadeInJMB {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}



/* Hlavička sidebaru - JMB štýl */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px !important;
    min-height: 50px; /* O niečo vyššie ako položky pre vizuálnu hierarchiu */
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1010;
}

.sidebar-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--brand); /* Použijeme bronzovú pre názov menu */
    margin: 0;
}

.sidebar-close-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 20px;
    transition: transform 0.2s ease, opacity 0.2s ease;
    padding: 0;
    margin-right: -10px; /* Vycentrovanie opticky k okraju */
}

.sidebar-close-btn:hover {
    transform: scale(1.1);
    color: var(--brand);
}

.sidebar-close-btn:active {
    transform: scale(0.9);
}


/* ========================================================================= */
/* STICKY SIDE BANNERS - EFEKT "POD HEADEROM" S PODPOROU TÉM */
/* ========================================================================= */

.side-marketing-banners {
    display: block;
}

.sticky-banner {
    position: fixed;
    /* Umiestnenie pod úrovňou headeru */
    top: 200px; 
    
    /* Dynamická šírka podľa voľného miesta na bokoch */
    width: calc((100vw - 1280px) / 2);
    min-width: 45px; 
    height: 600px;
    
    /* Z-INDEX: Nižší ako Header (100), ale vyšší ako obsah webu */
    z-index: 5; 
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid var(--border);
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease, background-size 0.3s ease;

    /* NASTAVENIE OBRÁZKA NA POZADÍ */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    
    /* DEFAULT OBRÁZOK (Dark Theme) */
    background-image: url('https://mistyrose-fish-319013.hostingersite.com/wp-content/uploads/2026/01/banner-dark.png');
}

/* PREPNUTIE OBRÁZKA PRE LIGHT THEME */
.light-theme .sticky-banner {
    background-image: url('https://mistyrose-fish-319013.hostingersite.com/wp-content/uploads/2026/01/banner-light.png');
    border-color: #ddd;
}

/* Nastavenie strán bannerov */
.banner-left { 
    left: 0; 
    border-radius: 0 12px 12px 0; 
    border-left: none;
}

.banner-right { 
    right: 0; 
    border-radius: 12px 0 0 12px; 
    border-right: none;
}



/* HOVER EFEKT */
.sticky-banner:hover {
    border-color: var(--brand);
    background-size: 105%; /* Jemný zoom obrázka pri hoveri */
    background-color: rgba(0,0,0,0.1);
}

/* ========================================================================= */
/* FIX PRE PREKRÝVANIE (HEADER A FOOTER MUSIA BYŤ NAD BANNEROM) */
/* ========================================================================= */

header, .site-header, #masthead, .modal-header-bar {
    z-index: 100 !important;
    position: relative;
}

footer, .site-footer {
    z-index: 100 !important;
    position: relative;
}

/* SKRYTIE NA MENŠÍCH OBRAZOVKÁCH */
@media (max-width: 1350px) {
    .side-marketing-banners {
        display: none;
    }
}

/*


badges*/


/* Hlavná karta produktu */
.estv-product-card {
    position: relative; /* Toto je kľúčové pre badges */
}

/* Kontajner pre badges - poziciovaný v rámci CARD */
.custom-badge-container {
    position: absolute;
    top: 8px;  /* Odstup od horného okraja karty */
    left: 8px; /* Odstup od ľavého okraja karty */
    z-index: 20; /* Vyššie ako obrázok a linky */
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none; /* Kliknutia prepadnú na odkaz pod tým */
}

/* Samotný badge vzhľad */
.custom-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 11px !important;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 4px;
    color: #fff;
    width: fit-content;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    line-height: 1.2;
    height: 15px !important;
}

/* Farby badge (používame tvoje premenné) */
.free-shipping-badge { background-color: var(--brand); }
.stock-badge { background-color: var(--free); }
.box-badge { background-color: #3498db; }




/* Úprava kontajnera badge, aby v detaile produktu sedel na obrázku */
.estv-product-main-grid .custom-badge-container {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 99;
}




/* ========================================================================= */
/* SINGLE PRODUCT - CESTA B (FINAL UNIFIED CARD - NO SHADOW) */
/* ========================================================================= */

/* 1. HLAVNÝ GRID PRODUKTU */
.estv-product-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 340px;
    gap: 40px;
    margin-top: 20px;
    align-items: start;
}

/* 2. PLÁVAJÚCI SIDEBAR (STICKY) */
.estv-column-sidebar {
    position: sticky;
    top: 100px;
    z-index: 10;
}

/* 3. JEDNOTNÁ NÁKUPNÁ KARTA */
.estv-sticky-purchase-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Cenová sekcia */
.purchase-price-section .price {
    font-size: 32px !important;
    color: var(--accent) !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
    display: block;
    line-height: 1;
}

.purchase-price-section .price .woocommerce-Price-currencySymbol {
    font-size: 18px;
    vertical-align: super;
    margin-left: 4px;
    opacity: 0.8;
}

.price-excl-vat {
    font-size: 15px;
    color: var(--muted);
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.price-excl-vat small {
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* 4. SEKCIA DOSTUPNOSTI, ODBERU A REGISTRÁCIE (Unified Style) */
.availability-section {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.availability-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

/* Farby indikátorov */
.icon-delivery { background: var(--free); }
.icon-pickup   { background: #3498db; }
.icon-brand    { background: var(--brand); } /* Bronzová bodka pre registráciu */

.status-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.status-text .main-text {
    font-size: 14px;
    color: var(--accent);
    font-weight: 500;
}

/* Registračný link v hlavnej farbe textu, aby ladil so zoznamom */
.status-text .main-text a {
    color: var(--accent) !important;
    text-decoration: none;
}

.status-text .main-text a:hover {
    color: var(--brand) !important;
}

.status-text .sub-text {
    font-size: 12px;
    color: var(--muted);
}

/* Zvýraznenie kľúčových informácií */
.status-text .main-text strong { color: var(--free); font-weight: 700; }

.highlight-brand { 
    color: var(--brand) !important; 
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.store-popup-link {
    color: var(--brand);
    text-decoration: underline;
    font-weight: 700;
}

/* 5. QUANTITY A TLAČIDLO */
.purchase-actions form.cart {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.purchase-actions .quantity {
    display: flex !important;
    width: 100% !important;
    height: 48px;
    background: var(--input-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    overflow: hidden;
}

.qty-btn {
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.qty-btn:hover { 
    background: rgba(0, 0, 0, 0.05); 
    color: var(--accent); 
}

html:not(.light-theme) .qty-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.purchase-actions .quantity input.qty {
    flex: 1;
    background: var(--bg);
    border: none !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    color: var(--accent) !important;
    font-size: 16px !important;
    font-weight: 700;
    text-align: center;
}

.purchase-actions button.single_add_to_cart_button {
    width: 100% !important;
    height: 55px !important;
    background-color: var(--button) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.purchase-actions button.single_add_to_cart_button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* 6. RESPONZIVITA */
@media (max-width: 1200px) {
    .estv-product-main-grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 30px;
    }
}

@media (max-width: 1024px) {
    .estv-column-sidebar {
        grid-column: span 2;
        position: static;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .estv-product-main-grid { grid-template-columns: 1fr; }
    .estv-column-sidebar { grid-column: span 1; }
    .purchase-price-section .price { font-size: 28px !important; }
}

/* Farba pre Skladom (Zelená) */
.icon-delivery { background: var(--free) !important; }

/* Farba pre Odber (Modrá) */
.icon-pickup { background: #3498db !important; }

/* Farba pre Registráciu/Dodávateľa (Bronzová) */
.icon-brand { background: var(--brand) !important; }

.status-text .main-text {
    font-size: 14px;
    color: var(--accent);
    line-height: 1.2;
}

.status-text .sub-text {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.highlight-brand {
    color: var(--brand) !important;
    font-weight: 700;
}



/**
 * 1. KONTAJNER GALÉRIE A OBRÁZKOV
 */
.product-gallery-container,
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper {
    position: relative !important;
    /* overflow: visible zabezpečí, že lupa a badge nebudú orezané na hranách */
    overflow: visible !important; 
    border-radius: 12px;
}

/**
 * 2. BADGE (Doprava zdarma a pod.)
 */
.custom-badge-container {
    position: absolute !important;
    top: 15px;
    left: 15px;
    z-index: 100; /* Pod lupou, ale nad obrázkom */
}

/**
 * 3. TLAČIDLO LUPY (Trigger)
 */
.woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 9 !important; /* Najvyššia priorita, aby bola vždy viditeľná */
    
    /* Rozmery a Flex centrovanie */
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Vizuálny štýl */
    background: var(--card, #ffffff) !important;
    border: 1px solid var(--border, #e0e0e0) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    
    /* Skrytie pôvodnej ikony/textu */
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* Ikona lupy (SVG cez masku) */
.woocommerce-product-gallery__trigger::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    text-indent: 0 !important;
    
    width: 20px !important;
    height: 20px !important;
    background-color: var(--text, #333) !important;
    display: block !important;
    
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E") no-repeat center;
}

/* Hover stav lupy */
.woocommerce-product-gallery__trigger:hover {
    background: var(--brand, #b58e58) !important;
    transform: scale(1.08) !important;
    border-color: var(--brand) !important;
}

.woocommerce-product-gallery__trigger:hover::after {
    background-color: #ffffff !important;
}

/* Poistka pre niektoré témy */
.woocommerce-product-gallery__trigger img {
    display: none !important;
}

/**
 * 4. MINIATÚRY (Carousel pod obrázkom)
 */
.flex-control-thumbs {
    display: flex !important;
    gap: 10px !important;
    padding: 15px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

.flex-control-thumbs li {
    width: 80px !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
}

/* Zvýraznenie aktívnej miniatúry */
.flex-control-thumbs li img.flex-active {
    border-color: var(--brand) !important;
    opacity: 1 !important;
}

.flex-control-thumbs li img:not(.flex-active) {
    opacity: 0.7;
}

.flex-control-thumbs li:hover img {
    opacity: 1;
}

/**
 * 5. RESPONZIVITA
 */
@media (max-width: 768px) {
    .woocommerce-product-gallery__trigger {
        width: 36px !important;
        height: 36px !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .flex-control-thumbs li {
        width: 60px !important;
    }
}


/**
 * ULTRA-MINIMALIST CHECKOUT & CART (Integrated & Cleaned)
 */

/* --- 1. GLOBÁLNE & KONTAJNERY --- */
.woocommerce-cart .woocommerce, 
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce {
    max-width: 1400px !important;
    margin: 0 auto !important;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

.woocommerce-cart-form, #customer_details, #order_review, .woocommerce-thankyou-order-details {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 !important;
    margin-bottom: 20px;
}

/* --- 2. PRODUKTY & TABUĽKY --- */
.woocommerce-cart-form .product-name a, .woocommerce-checkout #order_review .product-name {
    color: var(--text) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    font-size: 0.9rem;
}

.woocommerce-cart-form .product-name a:hover { color: var(--brand) !important; }

table.shop_table { border-collapse: collapse !important; width: 100% !important; background: transparent !important; border: none !important; }
table.shop_table thead { display: none !important; }
table.shop_table td {
    padding: 12px 0 !important;
    font-size: 0.85rem;
    border-top: 1px solid var(--border) !important;
    color: var(--text);
    background: transparent !important;
}

/* --- 3. WOOCOMMERCE MESSAGES (Oprava ikon a paddingu) --- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
    background-color: var(--card) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-top: 3px solid var(--brand) !important;
    padding: 15px 20px 15px 60px !important;
    border-radius: 6px;
    margin-bottom: 25px !important;
    position: relative;
    line-height: 1.5;
    font-size: 0.85rem;
}

.woocommerce-error { border-top-color: var(--button) !important; }

.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
    font-family: 'dashicons' !important;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
}
.woocommerce-message::before { content: "\f147"; color: var(--brand-2); }
.woocommerce-info::before { content: "\f348"; color: var(--brand); }
.woocommerce-error::before { content: "\f158"; color: var(--button); }

/* --- 4. QUANTITY OVLÁDANIE --- */
.quantity-nav {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    height: 32px;
}

.quantity-nav .qty { 
    width: 40px !important; height: 30px !important;
    border: none !important; background: transparent !important;
    text-align: center; font-size: 0.9rem; color: var(--text); padding: 0 !important;
}

.quantity-nav .plus, .quantity-nav .minus {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1.1rem; color: var(--muted); transition: 0.2s;
}
.quantity-nav .plus:hover, .quantity-nav .minus:hover { color: var(--brand); }

/* --- 5. CART FOOTER & KONTAKTY --- */
.cart-collaterals, button[name="update_cart"] { display: none !important; }

.custom-cart-footer {
    margin-top: 25px; padding-top: 20px;
    border-top: 1px solid var(--border); text-align: right;
}

.total-with-tax { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.total-no-tax { font-size: 0.9rem; color: var(--muted); margin-top: 4px; }

.cart-checkout-action .checkout-button {
    background-color: var(--brand) !important;
    color: #fff !important;
    min-width: 250px;
    padding: 14px 30px !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px !important;
    display: inline-block !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.cart-help-section {
    margin-top: 40px; text-align: center; border-top: 1px solid var(--border); padding-top: 20px;
}

.help-title { display: block; font-size: 0.75rem; color: var(--muted); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.05em; }
.help-links { display: flex; justify-content: center; gap: 25px; flex-wrap: wrap; }
.help-links a { color: var(--text); text-decoration: none; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.help-links a:hover { color: var(--brand); }
.help-links i.dashicons { font-size: 18px; color: var(--brand); }

/* --- 6. CHECKOUT STEPS --- */
.checkout-steps-wrapper {
    display: flex !important; align-items: flex-start; justify-content: center;
    gap: 10px; margin: 20px auto 40px; max-width: 600px; padding: 0 10px;
}

.checkout-step {
    display: flex; flex-direction: column; align-items: center; flex: 1;
    text-decoration: none !important; color: inherit; transition: all 0.3s ease; text-align: center; opacity: 0.5;
}

.checkout-step.active { opacity: 1; }
.checkout-step.completed { opacity: 0.9; }

.step-number {
    width: 30px; height: 30px; border-radius: 50%; background: var(--card); border: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; transition: all 0.2s ease;
}

.step-label { font-size: 0.75rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }

.checkout-step.active .step-number { background: var(--brand); border-color: var(--brand); color: #fff; }
.checkout-step.active .step-label { color: var(--text); font-weight: 600; }
.checkout-step.completed .step-number { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }

.step-divider { flex: 0 0 30px; height: 2px; background: var(--border); margin-top: 15px; }

/* Hover efekty pre kroky */
a.checkout-step:hover { opacity: 1; }
a.checkout-step:hover .step-number { border-color: var(--brand); transform: translateY(-2px); }
a.checkout-step:hover .step-label { color: var(--brand); }

/* --- 7. FORMULÁRE --- */
.coupon { display: flex !important; align-items: center; gap: 8px; padding: 10px 0; }
.coupon input#coupon_code { width: 120px !important; height: 30px !important; background: transparent !important; border: 1px dashed var(--border) !important; color: var(--text) !important; }

.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea {
    background: var(--card) !important; border: 1px solid var(--border) !important; color: var(--text) !important; padding: 8px 10px !important; font-size: 0.85rem !important;
}

/* --- 8. RESPONZIVITA --- */
@media (max-width: 768px) {
    .custom-cart-footer { text-align: center; }
    
    .help-links { flex-direction: column; align-items: center; gap: 15px; }
    .step-label { font-size: 0.65rem; max-width: 70px; }
}

/* --- 8. CHECKOUT & CART SUPPORT BOX (S FOTKOU) --- */
.checkout-support-box {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 25px;
}

.support-photo img {
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Kruhový výrez */
    object-fit: cover;
    border: 2px solid var(--brand); /* Decentný bronzový lem okolo fotky */
    display: block;
}

.checkout-support-box .support-text {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.45;
}

.checkout-support-box .support-text strong {
    color: var(--text);
    font-size: 0.95rem;
}

.checkout-support-box .support-text a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s;
}

.checkout-support-box .support-text a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Responzivita pre menšie obrazovky */
@media (max-width: 480px) {
    .checkout-support-box {
        gap: 12px;
        padding: 12px;
    }
    .support-photo img {
        width: 40px;
        height: 40px;
    }
}


/* --- OPRAVA IKONY IBA V CHECKOUT SUPPORT BOXE --- */

/* 1. Zacielime presne na cestu k obrázku v tomto boxe */
.woocommerce .checkout-support-box .support-photo img, 
.woocommerce-page .checkout-support-box .support-photo img {
    width: auto !important; /* Toto vypne tých 100% len tu */
    max-width: 40px !important; /* Uprav si šírku podľa potreby */
    height: 40px !important;
    border-radius: 50% !important; /* Ak chceš kruh, inak daj 4px */
    object-fit: cover !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* 2. Zabezpečíme, aby kontajner fotky netlačil na text */
.checkout-support-box .support-photo {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important; /* Fixná šírka pre flexbox */
    margin-right: 15px;
}

/* 3. Samotný box (ak ho ešte nemáš nastavený na flex) */
.checkout-support-box {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    margin: 20px 0;
}


@media (max-width: 768px) {
    /* 1. Každý produkt zabalíme do jasného bloku s oddelením */
    .woocommerce-cart-form table.shop_table_responsive tr {
        position: relative !important;
        padding: 65px 15px 15px 15px !important; /* Väčší padding z každej strany */
        margin-bottom: 20px !important; /* Priestor MEDZI produktmi */
        background: rgba(255, 255, 255, 0.03) !important; /* Veľmi jemné podfarbenie bloku */
        border: 1px solid var(--border) !important; /* Rámček okolo celého produktu */
        border-radius: 8px !important;
        display: block !important;
    }

    /* 2. FOTKA - posunutá v rámci nového paddingu */
    .woocommerce-cart-form table.shop_table_responsive td.product-thumbnail {
        display: block !important;
        position: absolute !important;
        top: 15px;
        left: 15px; /* Zarovnané s vnútorným okrajom */
        width: auto !important;
        border: none !important;
        padding: 0 !important;
    }

    .woocommerce-cart-form td.product-thumbnail img {
        width: 45px !important;
        height: 45px !important;
        border-radius: 4px;
        object-fit: cover;
    }

    .woocommerce-cart-form td.product-thumbnail::before { display: none !important; }

    /* 3. KRÍŽIK (X) - posunutý v rámci nového paddingu */
    .woocommerce-cart-form table.shop_table_responsive td.product-remove {
        display: block !important;
        position: absolute !important;
        top: 15px;
        right: 15px; /* Zarovnané s vnútorným okrajom */
        border: none !important;
        padding: 0 !important;
        width: auto !important;
    }

    .woocommerce-cart-form td.product-remove::before { display: none !important; }

    /* 4. NÁZOV PRODUKTU - pod fotkou a krížikom */
    .woocommerce-cart-form td.product-name {
        padding: 0 !important;
        display: block !important;
        border: none !important;
        text-align: left !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
    }

    /* 5. CENA, MNOŽSTVO, SPOLU - vizuálne oddelené */
    .woocommerce-cart-form table.shop_table_responsive td.product-price,
    .woocommerce-cart-form table.shop_table_responsive td.product-quantity {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    

    .woocommerce-cart-form td.product-subtotal .woocommerce-Price-amount {
        text-align: right !important;
        font-weight: 700 !important;
        color: var(--text) !important; /* Návrat k pôvodnej farbe textu */
        font-size: 0.9rem !important;
    }

    /* Jemné doladenie labelov vľavo (Cena:, Spolu:) */
    .woocommerce-cart-form table.shop_table_responsive td::before {
        font-weight: 400 !important;
        color: var(--muted) !important;
        text-align: left !important;
        content: attr(data-title) ": "; /* Vloží text z data-title (Cena, Spolu...) */
    }
}
    
    
    
@media (max-width: 768px) {
    /* 1. Resetujeme štýl pre riadok s kupónom, aby nevyzeral ako produktová karta */
    .woocommerce-cart-form table.shop_table_responsive tr.cart_item + tr:not(.cart_item) {
        padding: 15px !important;
        background: transparent !important;
        border: none !important;
    }

    /* 2. Zarovnanie kupónu na stred/doľava bez extra miesta hore */
    .woocommerce-cart-form .actions {
        display: block !important;
        padding: 10px 0 !important;
    }

    .woocommerce-cart-form .coupon {
        display: flex !important;
        flex-direction: column; /* Vstup a tlačidlo pod sebou na malých mobiloch */
        gap: 10px;
        width: 100%;
        padding: 0 !important;
    }

    .woocommerce-cart-form .coupon input#coupon_code {
        width: 100% !important; /* Natiahne vstup na celú šírku */
        margin: 0 !important;
    }

    .woocommerce-cart-form .coupon button[name="apply_coupon"] {
        width: 100% !important;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }

    /* Skryjeme label "Akcie", ak ho tam WooCommerce pridáva cez ::before */
    .woocommerce-cart-form .actions::before {
        display: none !important;
    }
}

/* --- TLAČIDLÁ (Ujednotený štýl: Coupon, Checkout, Order) --- */
.woocommerce-cart .coupon button, 
.cart-checkout-action .checkout-button,
#place_order {
    background: var(--card) !important; /* Používa tvoju farbu panelov */
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    padding: 10px 22px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Hover efekt (Využíva tvoju --brand pre obe témy) */
.woocommerce-cart .coupon button:hover, 
.cart-checkout-action .checkout-button:hover,
#place_order:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background-color: transparent !important;
}

/* --- COUPON ERROR NOTICE (Upratanie hlásenia) --- */
.woocommerce-cart-form .coupon {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
}

.woocommerce-error {
    flex-basis: 100%;
    background: rgba(209, 32, 59, 0.08) !important; /* Využíva červenú s priehľadnosťou */
    color: var(--text) !important;
    border: 1px solid rgba(209, 32, 59, 0.2) !important;
    border-left: 3px solid var(--button) !important; /* Tvoja červená --button */
    padding: 12px 15px !important;
    font-size: 0.8rem !important;
    margin: 15px 0 !important;
    border-radius: 4px;
    list-style: none !important;
    box-sizing: border-box;
    text-align: left;
}

.woocommerce-error li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-error::before {
    display: none !important;
}

.woocommerce-error .button {
    display: none !important;
}

/* --- ŠPECIFICKÝ COUPON ERROR NOTICE (p#coupon-error-notice) --- */
p#coupon-error-notice.coupon-error-notice {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-left: 2px solid var(--button) !important;
    color: var(--text) !important;
    padding: 5px 0 5px 15px !important;
    margin: 15px 0 !important;
    font-size: 0.85rem !important;
    text-align: left !important;
    clear: both;
}

/* --- RESPONZÍVNA DOPRAVA (Mobile view) --- */
@media (max-width: 768px) {
    tr.woocommerce-shipping-totals.shipping {
        display: flex !important;
        flex-direction: column !important;
        border-bottom: 1px solid var(--border) !important;
        padding: 15px 0 !important;
    }

    tr.woocommerce-shipping-totals.shipping th {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 10px 0 !important;
        border: none !important;
        font-weight: 600 !important;
        color: var(--accent) !important;
    }

    tr.woocommerce-shipping-totals.shipping td {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        text-align: left !important;
    }

    tr.woocommerce-shipping-totals.shipping td::before {
        display: none !important;
    }

    ul#shipping_method {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    ul#shipping_method li {
        padding: 5px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px;
    }

    ul#shipping_method li label {
        margin: 0 !important;
        cursor: pointer;
        font-size: 0.9rem;
        color: var(--text);
    }
}

/* --- OPRAVA BORDEROV (Globálne pre tabuľky košíka a checkoutu) --- */
.woocommerce-cart table.shop_table, 
.woocommerce-checkout table.shop_table,
.woocommerce-cart table.shop_table tr, 
.woocommerce-checkout table.shop_table tr,
.woocommerce-cart table.shop_table td, 
.woocommerce-checkout table.shop_table td,
.woocommerce-cart table.shop_table th,
.woocommerce-checkout table.shop_table th {
    border-color: var(--border) !important;
}

tr.cart-subtotal, 
tr.shipping, 
tr.order-total,
.woocommerce-shipping-totals.shipping {
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
}

.woocommerce-cart-form .actions {
    border-top: 1px solid var(--border) !important;
}


/* --- LABEL PRE MOŽNOSTI PLATBY --- */
#payment ul.payment_methods::before {
    content: "Možnosti platby";
    display: block;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--accent);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

/* --- STYLING PLATOBNÝCH METÓD --- */
#payment ul.payment_methods {
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    list-style: none !important;
}

#payment ul.payment_methods li {
    padding: 12px 0 !important;
    border-bottom: 1px solid var(--border);
}

#payment ul.payment_methods li:last-child {
    border-bottom: none;
}

/* Skrytie šedých boxov s popisom (payment_box) a ich vyčistenie */
#payment .payment_box {
    background: var(--card) !important;
    color: var(--muted) !important;
    font-size: 0.85rem !important;
    padding: 15px !important;
    margin-top: 10px !important;
    border-radius: 4px;
    border: 1px solid var(--border);
}

/* Šípka nad popisom platby (ak ju téma pridáva) */
#payment .payment_box::before {
    display: none !important;
}

/* Úprava labelu a radio buttonu */
#payment ul.payment_methods li label {
    font-weight: 500 !important;
    color: var(--text) !important;
    cursor: pointer;
    margin-left: 8px !important;
}

#payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--brand); /* Zmení farbu bodky na bronzovú */
}

/* --- TEXT SÚKROMIA A TLAČIDLO --- */
.woocommerce-privacy-policy-text {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 20px;
}

.woocommerce-privacy-policy-text a {
    color: var(--brand);
    text-decoration: underline;
}



#place_order:hover {
    background: var(--brand) !important;
    color: #fff !important;
}

/* --- ODSTRÁNENIE POZADIA V SEKCIÍ PLATBY --- */
#add_payment_method #payment, 
.woocommerce-cart #payment, 
.woocommerce-checkout #payment {
    background: transparent !important; /* Odstránenie tej farby */
    padding: 0 !important;
    margin: 30px 0 !important;
}

/* --- OPRAVENÉ PRIDANIE LABELU (Cez hlavný kontajner) --- */
#payment::before {
    content: "Možnosti platby";
    display: block !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: var(--accent) !important;
    margin-bottom: 0px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--border) !important;
    width: 100%;
}

/* Zabezpečíme, aby kontajner nemal žiadny box-shadow alebo padding navyše */
.woocommerce-checkout #payment {
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
}

/* --- STYLING PLATOBNÝCH METÓD --- */
#payment ul.payment_methods {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

#payment ul.payment_methods li {
    padding: 0px 0 !important;
    border-bottom: 1px solid var(--border);
    background: transparent !important;
}

#payment ul.payment_methods li:last-child {
    border-bottom: none;
}

/* Úprava labelu a textu */
#payment ul.payment_methods li label {
    font-weight: 500 !important;
    color: var(--text) !important;
    cursor: pointer;
    margin-left: 10px !important;
}

/* Radio button farba (bronzová) */
#payment ul.payment_methods li input[type="radio"] {
    accent-color: var(--brand);
}

/* Box s detailmi platby (napr. číslo účtu), ktorý sa vyroluje */
#payment .payment_box {
    background: var(--card) !important; /* Tu necháme farbu karty, aby bol text čitateľný */
    color: var(--muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    padding: 15px !important;
    margin-top: 5px !important;
    font-size: 0.85rem !important;
}

#payment .payment_box::before {
    display: none !important; /* Odstránenie defaultnej šípky */
}

/* Odkaz na Privacy Policy */
.woocommerce-privacy-policy-text {
    margin: 20px 0 !important;
    font-size: 0.8rem;
    color: var(--muted);
}

/* --- CT FOOTER CUSTOM STYLING --- */
.ct-footer {
    /*background-color: var(--card); /* #2A2D30 podľa tvojich premenných */
    background-color: var(--card); 
    border-top: 1px solid var(--border);
    padding-top: 40px;
}

.ct-footer .ct-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 30px;
}

.footer-column {
    flex: 1;
    min-width: 250px;
}

.footer-widget-title {
    color: var(--brand);
    margin-bottom: 20px;
    font-size: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 4px;
}

.footer-links li a {
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.2s;
}

.footer-links li a:hover {
    opacity: 0.8;
}

.footer-links .highlight-orange {
    color: var(--brand) !important;
}

/* Kontakt List */
.ct-contact-info .contact-list {
    list-style: none;
    padding: 0;
}

.ct-contact-info .contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--text);
    font-size: 14px;
}

.ct-contact-info .contact-list svg {
    fill: var(--brand); /* Bronzová */
    margin-top: 3px;
}

.ct-contact-info .contact-list a {
    color: var(--text);
    text-decoration: none;
}

/* Footer Bottom */
.footer-bottom {
    background: rgba(0,0,0,0.2);
    padding: 30px 0;
    margin-top: 40px;
    border-top: 1px solid var(--border);
}

.footer-bottom .ct-container {
    justify-content: space-between;
    align-items: center;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials svg {
    fill: var(--border);
    transition: fill 0.3s;
}

.footer-socials a:hover svg {
    fill: var(--brand);
}

.footer-copyright {
    color: var(--muted);
    font-size: 13px;
}

.footer-payment-logo img {
    height: auto;
    /* Na mobile zabezpečí, že nepresiahne šírku displeja */
    max-width: 100%; 
    filter: brightness(0.9);
    display: block; /* Odstráni prípadnú medzeru pod obrázkom */
}

/* Nastavenie pre desktop (väčšie obrazovky) */
@media (min-width: 992px) {
    .footer-payment-logo img {
        /* Tu nastavíš presnú šírku pre desktop, napr. 600px alebo viac */
        width: 450px; 
        max-width: none; /* Umožní obrázku narásť nad 100% rodiča, ak je to potrebné */
    }
}

/* Voliteľné: Ak chceš logo na mobile vycentrovať, keďže sa zmenší */
@media (max-width: 768px) {
    .footer-payment-logo {
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    .footer-bottom .ct-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    

}




/* Nastavenie pre kompaktný grid v modale */
#search-results-grid-desktop.grid-compact,
#search-results-grid-mobile.grid-compact {
    display: grid !important;
    /* SEM patrí tvoj minmax: 
       Menšie číslo (120px) = viac produktov vedľa seba (hustejšie)
       Väčšie číslo (180px) = menej produktov (väčšie karty) */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
}

/* Musíme zrušiť fixnú šírku položiek li, ktorú tam vkladá WooCommerce/iné skripty */
#search-results-grid-desktop.grid-compact li.product,
#search-results-grid-mobile.grid-compact li.product {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}





/* ========================================================================= */
/* 1. SPOLOČNÝ ZÁKLAD (Desktop aj Mobile pred aktiváciou) */
/* ========================================================================= */
#e-stavivo-search-modal-desktop, 
#e-stavivo-search-modal-mobile {
    position: fixed !important;
    background: var(--bg) !important;
    z-index: 99999 !important;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    box-sizing: border-box !important;
    margin: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6) !important;
}

/* ========================================================================= */
/* 2. DESKTOP ŠPECIFIKÁCIA (Okno v strede) */
/* ========================================================================= */
@media (min-width: 769px) {
    #e-stavivo-search-modal-desktop {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) scale(0.95) !important;
        width: calc(100% - 20px) !important;
        max-width: 1900px !important;
        height: 90vh !important;
        max-height: calc(100% - 20px) !important;
        border-radius: 12px !important;
        padding: 10px !important;
    }

    #e-stavivo-search-modal-desktop.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }
}

/* ========================================================================= */
/* 3. MOBILE ŠPECIFIKÁCIA (Full-screen bez okrajov) */
/* ========================================================================= */
@media (max-width: 768px) {
    #e-stavivo-search-modal-mobile {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 10px 8px !important; /* Minimálne bočné odstupy */
        transform: none !important; /* Žiadne centrovanie cez transform */
    }

    #e-stavivo-search-modal-mobile.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    /* Úprava gridu na mobile pre maximálne využitie plochy */
    #search-results-grid-mobile.grid-compact {
        gap: 8px !important;
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)) !important;
    }
}
/* ========================================================================= */
/* 4. MODAL SEARCH - GLOBÁLNE A DESKTOP */
/* ========================================================================= */

.modal-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--border) !important;
    max-width: 1600px !important;
    margin: 0 auto 0 auto !important;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px 0;
}

/* Fix pre zobrazenie produktov */
#search-results-grid-desktop.grid-compact li.product {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Predvolene skryť mobilné prvky na desktope */
.mobile-filter-trigger, 
.mobile-category-toggle {
    display: none !important;
}

/* ========================================================================= */
/* 5. MODAL SEARCH - MOBILE (Bottom Sheet Logic) */
/* ========================================================================= */

@media (max-width: 768px) {
    /* Skryjeme nepotrebné elementy */
    .desktop-only { 
        display: none !important; 
    }

    /* Úprava hlavného kontajnera modalu na mobil */
    #e-stavivo-search-modal-desktop {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        border-radius: 0 !important;
        padding: 10px !important;
        display: block;
    }

    /* Layout pod sebou */
    #search-layout-desktop {
        display: block !important;
        padding-bottom: 50px !important;
    }

    /* Transformácia kategórií na vysúvací Bottom Sheet */
    #search-categories-column-desktop {
        position: fixed !important;
        bottom: -100%; /* Schované pod obrazovkou */
        
        /* CENTROVANIE */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 20px) !important; /* Rovnaká šírka ako má tvoj modal */
        
        max-width: 1580px; /* Aby na tabletoch nebol príliš široký */
        height: 75vh;
        background: var(--card) !important;
        z-index: 100020 !important;
        padding: 30px 20px !important;
        
        /* Zaoblenie všetkých horných rohov pre efekt karty */
        border-radius: 25px 25px 0 0 !important; 
        box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
        transition: bottom 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        overflow-y: auto;
        display: block !important;
    }

    /* Aktívny stav - vysunie sa nad spodný okraj */
    #search-categories-column-desktop.active {
        /* Ak chceš, aby "lícoval" so spodkom, daj 0. 
           Ak chceš, aby plával ako okno, daj napr. 10px */
        bottom: 0 !important; 
    }

    /* Aktivácia plávajúceho tlačidla */
    .mobile-filter-trigger,
    .mobile-category-toggle {
        display: block !important;
        position: fixed !important;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100021 !important;
    }

    /* Štýl tlačidla */
    #toggle-mobile-categories {
        /*background: var(--brand) !important;*/
        /*color: #fff !important;*/
        border: none;
        padding: 14px 28px;
        border-radius: 50px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 12px;
        /*box-shadow: 0 5px 25px rgba(0,0,0,0.5);*/
        cursor: pointer;
        white-space: nowrap;
    }
}
@media (max-width: 768px) {
    /* 1. Hlavička zostáva relatívna, aby nebránila ostatným prvkom */
    .modal-header-bar {
        position: relative !important;
        /*padding-right: 45px !important; /* Rezerva v inpute, aby text neliezol pod X */
    }

    /* 2. Zmena na FIXED - tlačidlo ostane na mieste pri scrollovaní */
    .search-close {
        position: fixed !important; /* Toto ho zafixuje na displeji */
        top: 20px !important;       /* Vzdialenosť od horného okraja */
        right: 15px !important;     /* Vzdialenosť od pravého okraja */
        z-index: 100030 !important; /* Musí byť vyššie ako všetko ostatné (aj ako modal) */
        
        /* Tvoj zachovaný vizuál */
        width: 35px !important;
        /*height: 35px !important;*/
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--border) !important; 
        border-radius: 50%;
        cursor: pointer;
    }

    /* 3. Skrytie textu (zachované) */
    .search-close .desktop-only {
        display: none !important;
    }
}








/* Styling pre dropdown výber odtieňa */
.odtien-field {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px; /* Prispôsob podľa potreby */
}

.odtien-field label {
    font-size: 14px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.odtien-field select {
    appearance: none; /* Odstráni natívny vzhľad */
    -webkit-appearance: none;
    background-color: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 40px 12px 15px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Vlastná šípka pomocou SVG */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23CD7F32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 18px;
}

/* Hover a Focus stavy */
.odtien-field select:hover {
    border-color: var(--brand);
}

.odtien-field select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(205, 127, 50, 0.2);
}

/* Styling pre možnosti v dropdowne (limitované možnosti prehliadačom) */
.odtien-field select option {
    background-color: var(--card);
    color: var(--text);
    padding: 10px;
}

/* Responzivita */
@media (max-width: 768px) {
    .odtien-field {
        max-width: 100%;
    }
    .odtien-field select {
        font-size: 14px;
        padding: 10px 35px 10px 12px;
    }
}



/* Celkový kontajner meta informácií */
.product_meta {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    font-size: 13px; /* O niečo menšie, technickejšie */
    color: var(--muted);
    text-transform: uppercase; /* Všetko uppercase */
    letter-spacing: 0.05em;
}

/* Riadkovanie pre jednotlivé bloky (SKU, Kategórie, Jednotka) */
.product_meta > span {
    display: block;
    margin-bottom: 10px;
}

/* Nadpisy a statické texty */
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .selling-unit {
    font-weight: 600;
    color: var(--accent); /* Svetlejšia farba pre "titulky" */
}

/* Hodnoty (čísla a odkazy) */
.product_meta .sku,
.product_meta a {
    font-weight: 400;
    color: var(--muted); /* Žiadny brand, zostávame v šedej */
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Hover stav pre kategórie - jemné zvýraznenie na bielu/svetlošedú */
.product_meta a:hover {
    color: var(--text);
    text-decoration: none;
}

/* Úprava pre dynamickú "Internetovú cenu" (z tvojho scriptu) */
.internetova-cena-nadpis {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: -5px; /* Pritiahnutie k cene */
    font-weight: bold;
}

/* Jednotka / ks za cenou */
.woocommerce-price-suffix {
    font-size: 0.8em;
    color: var(--muted);
    /*text-transform: lowercase; /* Jednotky ako ks, m2 sú lepšie lowercase */
}

/* Skladovosť - ak si ju skriptom upravil */
.summary.entry-summary .stock.in-stock {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    color: var(--free); /* Tu môžeme nechať zelenú pre stav, alebo var(--muted) pre raw vzhľad */
}

/* Kontajner pre celú sekciu */
.reviews-section {
    padding: 40px 0;
    width: 100%;
}

/* Grid systém - 3 stĺpce na desktope, 1 na mobile */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
}

/* Karta recenzie */
.review-card {
    /*background-color: var(--card); /* #2A2D30 */
    border: 1px solid var(--border); /* #4d535e */
    padding: 15px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.review-card:hover {
    border-color: var(--muted);
}

/* Meno zákazníka */
.review-name {
    font-weight: 700;
    color: var(--accent); /* #f0f3f7 - takmer biela */
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
}

/* Hviezdičky */
.review-stars {
    /*color: var(--accent); /* Zostávame v čistom monochromatickom štýle */
    color: #ffcc00;
    font-size: 14px;
    letter-spacing: 2px;
}

/* Text recenzie */
.review-text {
    color: var(--muted); /* #a3aab7 - jemnejšia šedá */
    font-size: 14px;
    line-height: 1.6;
    font-style: italic; /* Recenziám svedčí jemná kurzíva */
}

/* Responzivita pre menšie displeje */
@media (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr; /* Na mobile pod sebou */
        gap: 15px;
    }
    
    .review-card {
        padding: 20px;
    }
}

/* Skryje nadpisy a odseky, ktoré majú nastavené font-size: 0px priamo v HTML */
.hero-text h1 {
    display: none !important;
}


/* Základný styling pre oznámenie, aby vyzeralo moderne */
.woocommerce-store-notice {
    margin: 0;
    padding: 15px 0;
    background-color: var(--brand) !important; /* Použije tvoju bronzovú */
    color: #fff;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100090; /* Vyššie ako tvoj header */
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.05em;
}

/* Kľúčová časť: Posunutie celého webu nadol */
body.woocommerce-demo-store {
    padding-top: 60px; /* Uprav podľa reálnej výšky oznámenia */
}



/* Styling odkazu na zavretie (Dismiss) */
.woocommerce-store-notice__dismiss-link {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    margin-left: 20px;
    border: 1px solid rgba(255,255,255,0.5);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}


.estv-custom-notice {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    padding: 10px 0;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 999;
    text-align: center;
}

.estv-custom-notice .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.notice-text {
    transition: opacity 0.5s ease-in-out;
}

.notice-close {
    position: absolute;
    right: 0;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    padding: 5px;
}

.notice-close:hover {
    color: var(--brand);
}




/* ========================================================================= */
/* THANK YOU PAGE - FINÁLNA ÚPRAVA */
/* ========================================================================= */

/* 1. Hlavný text poďakovania - Výrazný a centrovaný */
.woocommerce-order-received .woocommerce-thankyou-order-received {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    padding: 40px 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

/* 2. Sumár objednávky (Číslo obj., Dátum, Cena, Platba) */
ul.woocommerce-thankyou-order-details {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: var(--card);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid var(--border);
    list-style: none !important;
    margin: 0 0 50px 0 !important;
    clear: both; /* Zabezpečí, že nič zhora netlačí na prvú bunku */
}

ul.woocommerce-thankyou-order-details li {
    flex: 1;
    min-width: 150px;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important; /* KRITICKÉ: Odstráni "dieru" v prvom riadku */
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

ul.woocommerce-thankyou-order-details li strong {
    display: block;
    color: var(--text);
    font-size: 16px;
    margin-top: 5px;
    text-transform: none;
    letter-spacing: 0;
}

/* 3. Mobilná optimalizácia - Všetko pod seba */
@media (max-width: 768px) {
    .woocommerce-order-received .woocommerce-thankyou-order-received {
        font-size: 1.5rem;
        padding: 30px 15px;
    }

    ul.woocommerce-thankyou-order-details {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        padding: 20px;
    }

    ul.woocommerce-thankyou-order-details li {
        width: 100%;
        min-width: auto;
        padding-bottom: 15px !important;
        border-bottom: 1px solid var(--border) !important;
    }

    ul.woocommerce-thankyou-order-details li:last-child {
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
}


/* =============================================================
   1. OPRAVA GALÉRIE A PRETEKANIA (MOBILE & DESKTOP)
   ============================================================= */

/* Globálna poistka proti horizontálnemu scrollu */
html, body {
    overflow-x: hidden !important;
    position: relative;
}

/* Hlavný obal produktu */
.estv-single-product-wrap {
    /*max-width: 100% !important;*/
    overflow: hidden !important; 
    padding: 0 15px;
    box-sizing: border-box;
}

/* Galéria a Zoom lúpa */
.estv-product-gallery {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto;
}

.woocommerce-product-gallery__wrapper {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Skrotenie lúpy - Zoom */
.zoomImg {
    max-width: none !important;
}

/* Miniatúry - Vynútené zalamovanie */
.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: wrap !important; /* Povinné pre viac riadkov */
    gap: 8px !important;
    padding: 15px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    transform: none !important; /* Niektoré témy tu dávajú translate, čo posúva galériu */
}

.flex-control-nav.flex-control-thumbs li {
    width: calc(20% - 8px) !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.flex-control-nav.flex-control-thumbs li img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1/1;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* =============================================================
   2. TABUĽKA VARIÁCIÍ (V TABOCH) - FIX PRE DYNAMICKÝ OBSAH
   ============================================================= */

/* Zacielenie na tabuľku bez ohľadu na to, či je v tabe alebo nie */
.related-variations-table, 
#tab-variations_tab .related-variations-table {
    display: table !important; /* Vynúti zobrazenie ako tabuľka */
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 20px 0 !important;
    /*background: var(--card) !important;*/
    border: 1px solid var(--border) !important;
    border-radius: 12px;
    overflow: hidden;
}

.related-variations-table tr {
    display: table-row !important;
}

.related-variations-table td {
    display: table-cell !important;
    padding: 15px !important;
    border-bottom: 1px solid var(--border) !important;
    vertical-align: middle !important;
    background: transparent !important;
}

.related-variations-table tr:last-child td {
    border-bottom: none !important;
}

/* Bunky */
.related-variations-table .variation-image { width: 80px; }
.related-variations-table .variation-image img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover;
    border-radius: 6px;
}

.related-variations-table .variation-title a {
    color: var(--text) !important;
    text-decoration: none !important;
    font-weight: 500;
}

.related-variations-table .variation-price {
    color: var(--text) !important;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

/* Skrytie košíka */
.related-variations-table .variation-cart {
    display: none !important;
}

/* =============================================================
   3. RESPONZIVITA (MOBIL)
   ============================================================= */

@media (max-width: 768px) {
    /* Mriežka produktu */
    .estv-product-main-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Galéria na celú šírku */
    .estv-product-gallery, 
    .estv-product-summary {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Miniatúry na mobile: 4 v riadku */
    .flex-control-nav.flex-control-thumbs li {
        width: calc(25% - 8px) !important;
    }

    /* Tabuľka variácií na mobile */
    .related-variations-table td {
        padding: 10px 5px !important;
        font-size: 13px !important;
    }
}



/* --- MINIMALISTICKÝ STYL PRE DOPRAVU (KOŠÍK/POKLADŇA) --- */

.woocommerce-shipping-methods li {
    display: flex !important;
    flex-wrap: wrap !important; /* Povolí popisu skočiť do nového riadku */
    align-items: center;
    margin-bottom: 15px !important;
    padding: 10px 0;
}

/* Štýl pre Radio Button */
.woocommerce-shipping-methods li input[type="radio"] {
    margin-right: 12px !important;
    flex: 0 0 auto; /* Radio button sa nezmenšuje */
}

/* Štýl pre Label (Názov dopravy a Cena) */
.woocommerce-shipping-methods li label {
    flex: 1; /* Label zaberie zvyšok šírky v prvom riadku */
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    font-size: 0.95rem;
}

/* Štýl pre Popis - ten chceme pod labelom */
.shipping-description {
    flex: 0 0 100%; /* Vynúti 100% šírku, čím skočí pod label a input */
    margin: 5px 0 0 28px !important; /* 28px je odsadenie, aby to lícovalo s textom labelu, nie pod bodkou */
    padding: 0 !important;
    border: none !important; /* Odstránime linky, v zozname by pôsobili rušivo */
    font-size: 0.8rem !important;
    color: var(--muted);
    line-height: 1.4;
    letter-spacing: 0.01em;
}

/* Responzivita pre mobil */
@media (max-width: 768px) {
    .woocommerce-shipping-methods li {
        margin-bottom: 12px !important;
    }
    
    .shipping-description {
        margin-left: 28px !important; /* Držíme líniu s labelom aj na mobile */
        font-size: 0.75rem !important;
    }
}

/* Skrytie riadku s akciami v detaile objednávky */
.woocommerce-table--order-details tfoot tr .order-actions--heading,
.woocommerce-table--order-details tfoot tr .order-actions-button {
    display: none !important;
}

/* Odstránenie prípadného prázdneho riadku/bunky, ak by zostali viditeľné */
.woocommerce-table--order-details tfoot tr:last-child {
    display: none !important;
}