/* ==========================================================================
   WAIANA.SK - KOMPLETNÝ PREHĽADNÝ DIZAJN NA MIERU
   ========================================================================== */

#header .site-name a img {
    display: block;
    margin: 0 auto;
    max-height: 90px !important;
}

@media (min-width: 768px) {
    .header-top {
        display: flex;
        flex-wrap: wrap;
        height: 95px;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   1. HORIZONTÁLNE POSÚVACIE MENU KATEGÓRIÍ (POD BANNEROM)
   -------------------------------------------------------------------------- */


.custom-kruhove-menu-wrapper {
    position: relative !important;
    max-width: 1400px !important;
    margin: 25px auto !important;
    padding: 0 40px !important;
}

.custom-kruhove-menu {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    cursor: grab !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Skrytie posuvníka pre čistý vzhľad */
.custom-kruhove-menu::-webkit-scrollbar {
    display: none !important;
}
.custom-kruhove-menu {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.custom-kruhove-menu.active-drag {
    cursor: grabbing !important;
}

.kruhove-menu-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    padding: 10px 5px !important;
}

.kruhove-menu-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    width: 90px !important;
    flex-shrink: 0 !important;
}

.kruhove-menu-img-wrapper {
    width: 80px !important; 
    height: 80px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background-color: #f3efe9 !important; /* Základná krémová */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    padding: 16px !important;
    box-shadow: 0 2px 6px rgba(74, 70, 60, 0.04) !important;
}

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

/* Hover efekt pre kruhy - tvoja olivová zelená */
.kruhove-menu-item:hover .kruhove-menu-img-wrapper {
    background-color: #a3b19b !important;
    transform: scale(1.05) !important;
}

.kruhove-menu-title {
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #4a463c !important; /* Tmavohnedá */
    font-weight: 500 !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Šípky posúvania na desktope */
.menu-scroll-btn {
    position: absolute !important;
    top: 50px !important; 
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    color: #4a463c !important;
    display: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    padding: 10px !important;
    transition: opacity 0.25s ease !important;
    opacity: 0 !important;
}

.btn-left { left: 5px !important; }
.btn-right { right: 5px !important; }

.custom-kruhove-menu-wrapper.has-scroll:hover .menu-scroll-btn {
    display: block !important;
    opacity: 0.5 !important;
}
.custom-kruhove-menu-wrapper.has-scroll .menu-scroll-btn:hover {
    opacity: 1 !important;
}

/* Úprava kruhového menu pre mobilné telefóny */
@media (max-width: 768px) {
    .custom-kruhove-menu-wrapper { 
        margin: 15px auto !important; 
        padding: 0 10px !important; 
    }
    .kruhove-menu-item { width: 75px !important; }
    .kruhove-menu-img-wrapper { width: 65px !important; height: 65px !important; padding: 12px !important; }
    .kruhove-menu-title { margin-top: 6px !important; font-size: 11px !important; }
    .kruhove-menu-container { gap: 12px !important; }
    .menu-scroll-btn { display: none !important; }
}

/* --------------------------------------------------------------------------
   2. HLAVNÉ MENU (OLIVOVO ZELENÉ)
   -------------------------------------------------------------------------- */
#navigation .navigation-in, 
#menu .menu-in, 
nav .menu-navigation {
    background-color: #a3b19b !important;
    border: none !important;
}

#header, .header-top, .header-inner {
    background-color: #ffffff !important;
}

#navigation .menu-navigation > li, 
#menu .menu-navigation > li {
    border: none !important;
    box-shadow: none !important;
}

#navigation .menu-navigation > li > a, 
#menu .menu-navigation > li > a {
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    display: inline-block !important;
}

#navigation .menu-navigation > li:hover > a, 
#menu .menu-navigation > li:hover > a {
    background-color: #b3c1ab !important;
}

/* --------------------------------------------------------------------------
   3. MODERNÉ VYHĽADÁVACIE POLE S DELIACOU ČIAROU
   -------------------------------------------------------------------------- */
/* --- MODERNÉ VYHĽADÁVACIE POLE (VLASTNÉ SVG + RESET KRÍŽIK) --- */

/* 1. Zaoblenie celého formulára a jemný zemitý ráfik */
form.search-form.js-search-main {
    border-radius: 25px !important;
    border: 1px solid #e2ded5 !important;
    background-color: #fcfbfa !important;
    overflow: hidden !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    box-shadow: none !important;
}

form.search-form.js-search-main fieldset {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* 2. Textové pole, kam zákazník píše */
form.search-form .search-input.js-search-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    padding-right: 80px !important; /* Väčší priestor vpravo pre krížik, čiaru aj lupu */
    color: #4a463c !important;
    font-size: 14px !important;
    height: 100% !important;
    width: 100% !important;
}

form.search-form .search-input.js-search-input::placeholder {
    color: #b1aa99 !important;
}

/* 3. TLAČIDLO S VLASTNOU SVG LUPOU */
form.search-form button[data-testid="searchBtn"].btn {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 50px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    font-size: 0 !important; /* Schová starý text Hľadať */
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Načítanie tvojej vlastnej ikony lupa.svg zo servera */
form.search-form button[data-testid="searchBtn"].btn::after {
    content: "" !important;
    display: block !important;
    width: 18px !important; /* Presná jemná veľkosť lupy */
    height: 18px !important;
    background-image: url('/user/documents/Waiana.sk/ikony/lupa.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: transform 0.2s ease !important;
}

/* Jemný efekt plynulého zväčšenia lupy pri hoveri */
form.search-form button[data-testid="searchBtn"].btn:hover::after {
    transform: scale(1.08) !important;
}

/* 4. 3/4 DELIACA ČIARA PRED LUPOU */
form.search-form button[data-testid="searchBtn"].btn::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 12.5% !important;
    height: 75% !important; /* Presne 3/4 výšky */
    width: 1px !important;
    background-color: #e2ded5 !important;
}

/* 5. DIZAJN PRE MALÉ ČERVENÉ RESETOVACIE X */
.search-reset-btn {
    position: absolute !important;
    right: 58px !important; /* Umiestnenie presne vľavo pred deliacu čiaru */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    background-color: transparent !important; /* Veľmi jemný červenkastý podklad */
    color: #ca0000 !important; /* Krásna tlmená červená pre krížik */
    border-radius: 50% !important;
    border: none !important;
    font-size: 15px !important;
    /*font-weight: 700 !important;*/
    cursor: pointer !important;
    display: none; /* Predvolene je úplne skrytý, kým sa nezačne písať */
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    z-index: 5 !important;
}

.search-reset-btn:hover {
    background-color: #ca0000 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   4. NOVÁ PARÁDNA PÄTKA (3 STĹPCE)
   ========================================================================== */

#custom-modern-footer {
    background-color: #fcfbfa !important; /* Jemné, čisté krémové boho pozadie */
    border-top: 1px solid #e2ded5 !important; /* Jemná zemitá linka nad pätkou */
    padding: 60px 0 !important;
    width: 100% !important;
    display: block;
}

.footer-3-columns-wrapper {
    max-width: 1400px !important; /* Zosúladené s tvojou šírkou webu */
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important; /* Rozostup medzi stĺpcami */
}

/* Všeobecný štýl pre stĺpce */
.footer-col {
    flex: 1 !important; /* Každý stĺpec dostane rovnaký základný priestor */
    min-width: 250px !important;
}

/* Nadpisy v pätke */
.footer-col h3 {
    color: #4a463c !important; /* Tvoja elegantná tmavohnedá farba */
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-bottom: 25px !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

/* --- 1. STĹPEC: KONTAKT (FOTKA VĽAVO, TEXT VPRAVO) --- */
.footer-col-contact {
    flex: 2 !important; /* Prvý stĺpec bude teraz 2x širší ako ostatné dva stĺpce! */
    display: flex !important;
    flex-direction: column !important;
}

/* Obal, ktorý drží fotku a texty vedľa seba */
.footer-col-contact .footer-contact-img + .footer-contact-info,
.footer-col-contact {
    display: block !important;
}

/* Nový flexbox kontajner pre usporiadanie fotky a textu */
.footer-col-contact {
    position: relative !important;
}

/* Vytvoríme horizontálne vedľa seba usporiadanie pre fotku a info */
.footer-col-contact {
    display: block !important;
}

/* Tu natvrdo povieme obalu s fotkou a textom, aby sa dali vedľa seba */
.footer-col-contact {
    display: flex !important;
    flex-direction: column !important;
}

/* OPRAVENÝ FLEXBOX PRE OBSAH KONTAKTU */
.footer-col-contact {
    display: block !important; /* reset */
}

/* Spoločný flex obal pre obrázok a textové informácie */
.footer-col-contact {
    display: flex !important;
    flex-direction: column !important;
}

/* Prepíšme priamo vnútornú štruktúru prvého stĺpca pre horizontálny layout */
.footer-3-columns-wrapper .footer-col-contact {
    flex: 1.8 !important; /* Výrazne rozšíri ľavý stĺpec */
}

/* Toto je ten kľúčový kontajner: */
.footer-col-contact {
    /* Ponecháme flex, ale pre usporiadanie vnútra použijeme toto: */
}

/* Aby sme nemuseli meniť HTML v administrácii, prepojíme fotku a info cez flexbox priamo na ich spoločnom rodičovi */
.footer-col-contact {
    display: block !important;
}

/* --- FINÁLNY PREHĽADNÝ ZÁPIS PRE ŠIROKÝ KONTAKT --- */
.footer-3-columns-wrapper .footer-col-contact {
    flex: 1.8 !important; /* Rozšírenie stĺpca */
}

.footer-col-contact .footer-contact-img {
    float: left !important; /* Pustí fotku na ľavú stranu */
    width: 240px !important; /* Fixná šírka fotky */
    height: 160px !important; /* Príjemná výška */
    margin-right: 25px !important; /* Rozostup medzi fotkou a textom */
    margin-bottom: 0 !important; /* Zrušíme spodný rozostup */
}

.footer-col-contact .footer-contact-info {
    overflow: hidden !important; /* Krásne zarovná texty vedľa fotky */
    display: block !important;
}

/* Upratanie čistého ukončenia floatu */
.footer-col-contact::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}


/* --- 2. STĹPEC: INFORMÁCIE PRE VÁS --- */
.footer-links-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-links-list li {
    margin-bottom: 12px !important;
}

.footer-links-list li a {
    color: #6e685a !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
}

/* Po prejdení myšou odkaz zozelenie zhodne s menu */
.footer-links-list li a:hover {
    color: #a3b19b !important;
    padding-left: 3px !important; /* Jemný interaktívny posun */
}

/* --- 3. STĹPEC: NEWSLETTER --- */
.newsletter-desc {
    color: #6e685a !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
}

.footer-newsletter-form {
    width: 100% !important;
    max-width: 320px !important;
}

.newsletter-input-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Prvky pod sebou pre čistý dizajn */
}

/* Input pre e-mail - zaoblené rohy zhodné s vyhľadávaním */
.newsletter-email-input {
    width: 100% !important;
    height: 42px !important;
    border-radius: 20px !important;
    border: 1px solid #e2ded5 !important;
    background-color: #ffffff !important;
    padding: 0 20px !important;
    color: #4a463c !important;
    font-size: 14px !important;
    box-shadow: none !important;
    outline: none !important;
}

.newsletter-email-input::placeholder {
    color: #b1aa99 !important;
}

/* Tlačidlo Odoberať - tvoja nádherná olivovo zelená */
.newsletter-submit-btn {
    width: 100% !important;
    height: 42px !important;
    background-color: #a3b19b !important; /* Olivovo zelená */
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-shadow: none !important;
}

.newsletter-submit-btn:hover {
    background-color: #92a08a !important; /* Tmavšia zelená pri hoveri */
}

/* ==========================================================================
   RESPONSIVE ÚPRAVA PRE MOBILNÉ TELEFÓNY
   ========================================================================== */
@media (max-width: 768px) {
    #custom-modern-footer {
        padding: 40px 0 !important;
    }
    
    .footer-3-columns-wrapper {
        flex-direction: column !important; /* Na mobile sa stĺpce zoradia pod seba */
        gap: 35px !important;
        padding: 0 25px !important;
    }
    
    .footer-col {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    .footer-col h3 {
        margin-bottom: 15px !important;
        border-bottom: 1px solid #e2ded5 !important; /* Jemné vizuálne oddelenie sekcií na mobile */
        padding-bottom: 8px !important;
    }
    
    .footer-contact-img {
        max-width: 100% !important; /* Fotka predajne sa roztiahne na šírku mobilu */
        height: 160px !important;
    }
    
    .footer-newsletter-form {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   5. NASADENIE FONTU 'OPEN SANS' PRE CELÝ E-SHOP
   ========================================================================== */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, input, button, .menu-navigation a, .kruhove-menu-title {
    font-family: 'Open Sans', sans-serif !important;
}


/* ==========================================================================
   6. BEZPEČNÁ ÚPRAVA KOŠÍKA V HLAVIČKE (PRESNÉ ZACIELENIE)
   ========================================================================== */

/* Zaoblenie a prefarbenie Výhradne hlavného tlačidla košíka v hlavičke */
a[data-testid="headerCart"].btn-icon {
    background-color: #a3b19b !important; /* Tvoja olivovo zelená */
    border-radius: 20px !important; /* Elegantný tvar pilulky */
    height: 42px !important; /* Výška presne zladená s novým vyhľadávaním! */
    padding: 0 18px !important; /* Vzdušný rozostup vnútri tlačidla */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(74, 70, 60, 0.04) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    text-decoration: none !important;
}

/* Nastavenie bielej farby pre cenu vnútri zeleného košíka */
a[data-testid="headerCart"].btn-icon .cart-price {
    color: #ffffff !important; /* Biele čisté písmo */
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-right: 8px !important;
}

/* Úprava ikonky tašky/košíka, aby bola čisto biela */
a[data-testid="headerCart"].btn-icon::before,
a[data-testid="headerCart"].btn-icon i.ico,
a[data-testid="headerCart"].btn-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Jemný efekt pri nabehnutí myšou (hover) - plynulé stmavnutie */
a[data-testid="headerCart"].btn-icon:hover {
    background-color: #92a08a !important; /* Kontrastná tmavšia olivová */
    transform: scale(1.02) !important;
}

/* Číslo s počtom kusov v košíku (tá jednotka v i) - zladíme do elegantnej hnedo-zemitej */
a[data-testid="headerCart"].btn-icon i[data-testid="headerCartCount"] {
    background-color: #5f3d66 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin-left: 18px !important;
}

/* ZABEZPEČENIE: Uistíme sa, že rozbaľovacie okienko pri hoveri (widget) zostane čisto biele a nezdedí zelenú */
#cart-widget, .cart-widget, [id*="cart-widget"], [class*="cart-widget"] {
    background-color: #ffffff !important;
    color: #4a463c !important;
}

.header-top .btn.cart-count .cart-price {
    letter-spacing: 1.2px !important;
}

.btn.btn-cart:hover, .btn.btn-conversion:hover, a.btn.btn-cart:hover, a.btn.btn-conversion:hover {
    opacity: 0.8;
}
.btn.btn-cart, .btn.btn-conversion, a.btn.btn-cart, a.btn.btn-conversion {
    background-color: #92a08a !important;
    border-color: var(--color-secondary);
    color: var(--colors-foregrounds-content-inverted);
}


/* ==========================================================================
   8. CELOPLOŠNÝ BOHO PÁS PRE BENEFIT BANNER (PRESNÝ ZÁPIS)
   ========================================================================== */

/* 1. Vytvorenie celoplošného jemného hnedkastého pásu cez CELÚ šírku obrazovky */
.benefitBanner.position--benefitHomepage,
.benefitBanner {
    background-color: #f7f4ee !important; /* Tvoja prekrásna jemná boho hnedkastá/krémová farba */
    width: 100% !important;
    max-width: 100% !important; /* Roztiahne pás na 100% šírky monitora */
    margin: 30px 0 40px 0 !important; /* Presný odstup od kruhov hore a produktov dole */
    padding: 25px 0 !important; /* Výška a vzdušnosť hnedastého pásu */
    border: none !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. Vnútorný kontajner, ktorý udrží 4 výhody v našej šírke 1400px */
.benefitBanner .benefitBanner__item,
.benefitBanner > div,
.benefitBanner__link {
    /* Reset starých Shoptet tabuľkových rozložení */
    float: none !important;
    display: flex !important;
}

/* Hlavný obal pre 4 stĺpce vnútri pásu */
.benefitBanner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

/* Aby Shoptet tabuľky nebránili flexboxu, zacielime priamo na položky benefitov */
#waiana-benefit-banner, 
.benefitBanner {
    /* Vynútenie flexboxu na najvyššej úrovni */
}

/* --- FINÁLNY NEPRIESTRELNÝ ZÁPIS PRE VNÚTRO PÁSU --- */
.benefitBanner {
    display: flex !important;
    justify-content: center !important;
}

/* Jednotlivá položka benefitu vnútri pásu */
.benefitBanner__item {
    background: transparent !important; /* Zrušíme biele pozadie boxov, aby vynikol hnedastý pás */
    border: none !important;
    box-shadow: none !important;
    padding: 0 30px !important; /* Rozostup medzi výhodami */
    flex: 1 !important;
    max-width: 320px !important;
    display: flex !important;
    align-items: center !important;
}

.benefitBanner__link {
    display: flex !important;
    align-items: center !important; /* Vycentruje ikonu a text vedľa seba */
    text-decoration: none !important;
    width: 100% !important;
}

/* 3. NÁVRAT A OPRAVA IKONIEK (Zabezpečíme, aby plynule naskočili) */
.benefitBanner__picture {
    width: 40px !important; /* Kompaktná a čistá veľkosť ikony z návrhu */
    height: 40px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
}

.benefitBanner__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

/* 4. PREFARBENIE TEXTOV PODĽA TVOJEJ GRAFIKY */
.benefitBanner__content {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

/* Hlavný nadpis výhody - tvoja elegantná tmavohnedá */
.benefitBanner__title {
    color: #4a463c !important; 
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 2px !important;
    font-family: 'Open Sans', sans-serif !important;
    display: block !important;
}

/* Popis pod nadpisom - jemnejší zemitý podtón */
.benefitBanner__data {
    color: #7a7265 !important; 
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-family: 'Open Sans', sans-serif !important;
    white-space: normal !important;
    display: block !important;
}

/* Jemný interaktívny efekt pri hoveri - texty mierne ožijú */
.benefitBanner__link:hover .benefitBanner__title {
    color: #a3b19b !important; /* Nadpis pri hoveri plynule zozelenie zhodne s menu */
}

/* ==========================================================================
   RESPONSIVE ROZLOŽENIE HNEDASTÉHO PÁSU PRE MOBILY
   ========================================================================== */
@media (max-width: 992px) {
    .benefitBanner.position--benefitHomepage, .benefitBanner {
        padding: 20px 15px !important;
    }
    .benefitBanner__item {
        flex: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        margin-bottom: 15px !important;
    }
}

@media (max-width: 550px) {
    .benefitBanner__item {
        flex: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }
    .benefitBanner__item:last-child {
        margin-bottom: 0 !important;
    }
}