/* ==========================================================================
   JUHTPLOKK: FONT JA UUED VÄRVID
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* --- PÕHIVÄRVID --- */
    --brand-petrol: #007791;        /* Sügav ookeanisinine */
    --brand-mustard: #00B4D8;       /* Ergas helesinine nupp */
    --brand-dark: #005B70;          /* Tugev tekst */
    --brand-bg: #ffffff;            
    
    /* --- ÄÄRED JA TAUSTAD --- */
    --brand-border: #E6E2DD;        
    --brand-hover-mustard: #0096B4; 
    --brand-light-mustard: #F4F1EE; /* Mõnus soe hall taustadele */

    /* --- PÄIS JA JALUS --- */
    --header-footer-bg: #F4F1EE;    /* Hall taust */
    --header-footer-text: #4A4A4A;  
    --header-footer-line: #E6E2DD;  
}

/* ==========================================================
   FINAL PRECISION ALIGNMENT (Logo, Menüü ja Dropdown)
   ========================================================== */

@media (min-width: 1200px) {
    /* 1. ÜHTNE KONTEINER KÕIGILE (1320px) */
    .container, 
    #header .header-nav .container, 
    #header .header-top .container, 
    #wrapper, 
    .footer-container .container {
        max-width: 1320px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        display: block;
    }

    /* 2. LOGO JOONDAMINE (Serv täpselt paika) */
    #_desktop_logo {
        padding: 0 !important;
        margin: 0 !important;
    }
    #_desktop_logo a {
        display: block;
    }

    /* 3. PEAMENÜÜ TEKSTI JOONDAMINE LOGOGA */
    /* Eemaldame esimeselt menüüpunktilt sisevaru, et tekst algaks täpselt logo alt */
    #_desktop_top_menu {
        padding: 0 !important;
        margin-top: 15px !important;
    }

    .top-menu > li:first-child > a {
        padding-left: 0 !important; /* Esimene link ("KÖÖK...") algab 0-punktist */
    }

    /* 4. DROPDOWN (MEGAMENÜÜ) PARANDUS - EI LÄHE ENAM PEITU */
    /* Et dropdown oleks täpselt konteineri laiune, peab selle parent olema "static" */
    #header .header-top {
        position: relative !important;
    }
    
    #_desktop_top_menu {
        position: static !important;
    }

    .top-menu .sub-menu {
        width: calc(1320px - 30px) !important; /* Konteiner miinus paddingud */
        left: 15px !important; /* Joondub täpselt konteineri siseserva joonele */
        right: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        visibility: hidden;
        opacity: 0;
        display: block !important; /* Hoiame DOM-is, aga peidame visuaalselt */
        transition: opacity 0.2s ease;
    }

    .top-menu li:hover > .sub-menu {
        visibility: visible;
        opacity: 1;
    }

    /* 5. SISU JA TOOTEGRIDI JOONDUS */
    #content-wrapper {
        padding: 0 !important;
    }
}

/* 6. OTSINGUKASTI JA OSTUKORVI JOONDUS PAREMAL SERVAS */
@media (min-width: 1200px) {
    #_desktop_cart {
        padding-right: 0 !important; /* Ostukorv lõppeb täpselt paremal servas */
    }
}

/* 1. RAKENDA MULISH FONT JA ÜLDISED VÄRVID */
body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, a, span, div, input, button, select, textarea, .btn {
    font-family: 'Mulish', sans-serif !important;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
}

body, #wrapper, #main, #content { background-color: var(--brand-bg) !important; color: var(--brand-dark) !important; }

/* Päis ja lingid */
#header { box-shadow: 0 4px 20px rgba(0, 109, 119, 0.08) !important; }
a { color: var(--brand-petrol) !important; transition: color 0.2s ease; text-decoration: none; }
a:hover { color: var(--brand-mustard) !important; text-decoration: underline; }
.product-title a, .h1, h1, h2, h3, h4 { color: var(--brand-dark) !important; font-weight: 800 !important; }

/* Päise ja footeri hall taust */
.header-nav, .footer-container { background-color: var(--header-footer-bg) !important; border-bottom: 1px solid var(--header-footer-line) !important; }
.header-nav a, .header-nav span, .footer-container a { color: var(--header-footer-text) !important; }

/* ==========================================================================
   1. ÜLDINE DISAIN (VANA TÖÖTAV STRUKTUUR + UUED VÄRVID)
   ========================================================================== */
body, #wrapper, #main, #content {
    background-color: var(--brand-bg) !important;
    color: var(--brand-dark) !important;
}

#wrapper {
    box-shadow: none !important;
    padding-top: 0 !important; 
}

/* Päisele õrn ookeanisinine vari */
#header {
    box-shadow: 0 4px 20px rgba(0, 109, 119, 0.08) !important;
    position: relative;
    z-index: 100;
}

/* Lingid */
a { color: var(--brand-petrol) !important; transition: color 0.2s ease; }
a:hover { color: var(--brand-mustard) !important; text-decoration: underline; }
.product-title a, .h1, h1, h2, h3, h4 { color: var(--brand-dark) !important; }
.product-title a:hover { color: var(--brand-petrol) !important; }

/* ==========================================================================
   2. TOOTEKAARDID (GRID) - VANA STRUKTUUR!
   ========================================================================== */
.product-miniature {
    background: #fff !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 12px !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease;
    overflow: hidden; 
}

.product-miniature:hover {
    box-shadow: 0 12px 25px rgba(10, 92, 122, 0.15) !important; /* Petrol kuma */
    border-color: #dcdcdc !important;
    transform: translateY(-2px);
}

/* MOBIIL - VANA TÖÖTAV LOOGIKA */
@media (max-width: 767px) {
    .products, #products .products, .featured-products .products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px 4px !important;
        padding: 0 5px 20px 5px !important;
    }
    .products article.product-miniature { display: flex !important; flex-direction: column !important; height: 100% !important; background: #fff; }
    .product-miniature .product-description { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; padding: 5px 8px 4px 8px !important; }
    
    /* TOOTENIMI MOBIILIS: suurus 12px ja paksus 600 */
    .product-miniature .product-title a { font-size: 12px !important; line-height: 1.3 !important; height: 48px !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 3px !important; color: var(--brand-dark); font-weight: 600 !important; -webkit-font-smoothing: antialiased; letter-spacing: 0.1px; }
    
    .product-price-and-shipping { margin-top: auto !important; padding: 2px 0 0 0 !important; font-weight: bold; }
    .product-miniature .thumbnail-container { margin-bottom: 2px !important; }
    /* Peidame üleliigse info mobiilis */
    .product-miniature .highlighted-informations, .product-miniature .product-description-short, .product-flags { display: none !important; }
}

/* DESKTOP - VANA TÖÖTAV LOOGIKA */
@media (min-width: 992px) {
    .products article.product-miniature {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        margin-bottom: 30px !important;
    }
    .product-miniature .product-description {
        display: flex !important;
        flex-direction: column !important;
        flex-grow: 1 !important; /* See hoiab hinna all! */
        padding: 15px 15px 10px 15px !important; 
    }
    
    /* TOOTENIMI DESKTOPIS: suurus 14px ja paksus 600 */
    .product-miniature .product-title a {
        font-size: 14px !important;
        line-height: 1.3 !important;
        height: 54px !important; 
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 4px !important;
        color: var(--brand-dark);
        font-weight: 600 !important;
        -webkit-font-smoothing: antialiased;
        letter-spacing: 0.1px;
    }
    
    .product-miniature .thumbnail-container { margin-bottom: 4px !important; }
    .product-price-and-shipping { margin-top: auto !important; padding-bottom: 5px !important; }
}


/* ==========================================================================
   3. AADRESSIVÄLJAD & OTSING (VANA STRUKTUUR + UUS DISAIN)
   ========================================================================== */
.form-control-label::after { content: "" !important; }
.custom-field-container { position: relative !important; }
.text-hidden { color: transparent !important; }
.fake-placeholder {
    position: absolute; top: 12px; left: 25px;
    color: #999; pointer-events: none; font-size: 0.9rem; z-index: 5;
    font-family: 'Mulish', sans-serif !important;
}
input:not([value=""]):not([value="."]) + .fake-placeholder { display: none !important; }

/* Vormiväljad fookuses - PETROL */
input.form-control:focus, textarea.form-control:focus {
    outline: none;
    border-color: var(--brand-petrol) !important;
    box-shadow: 0 0 0 3px rgba(10, 92, 122, 0.1) !important;
}

/* Otsingukast */
#search_widget form input[type=text] {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 30px !important; 
    padding: 12px 20px 12px 80px !important; 
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
#search_widget form button[type=submit] {
    position: absolute; left: 15px; right: auto; top: 50%; transform: translateY(-50%);
    width: 50px; background: none; border: none; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--brand-petrol) !important; z-index: 20;
}


/* ==========================================================================
   4. PÄIS JA MENÜÜ (VANA STRUKTUUR + SINEPI JOON)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. PAIGUTUS (LAYOUT) */
    .header-top .row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; width: 100% !important; margin: 0 !important; }
    .header-top { padding-bottom: 0 !important; }
    .header-top .col-md-2, .header-top .col-md-10 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; display: contents !important; }
    
    #_desktop_logo { order: 1; margin-right: 30px; margin-top: 0 !important; padding-top: 5px; }
    #search_widget { order: 2; flex-grow: 1 !important; margin: 0 5px 0 30px !important; max-width: 100%; }
    #_desktop_cart { order: 3; }
    
    #_desktop_top_menu {
        order: 4; flex-basis: 100% !important;
        margin-top: 10px !important; margin-bottom: 0 !important;
        width: 100% !important; max-height: 1140px !important; margin-left: auto !important; margin-right: auto !important;
    }

    /* 2. MENÜÜ LINGID JA SINEPI JOON (HOVER) */
    .top-menu .category > a {
        font-weight: 700 !important;
        color: var(--brand-dark) !important;
        text-transform: uppercase;
        border-bottom: 2px solid transparent !important; 
        transition: all 0.2s ease;
        padding-bottom: 0px; 
    }

    .top-menu .category > a:hover {
        color: var(--brand-petrol) !important;
        border-bottom: 2px solid var(--brand-mustard) !important; 
    }
}
/* Ostukorv - PETROL */
#_desktop_cart .blockcart, .blockcart.cart-preview, .header .cart-preview {
    background: var(--brand-petrol) !important;
    background-color: var(--brand-petrol) !important;
    color: #ffffff !important;
    border-radius: 3px;
}
#_desktop_cart .blockcart a, .header .cart-preview .shopping-cart, .header .cart-preview .cart-products-count { 
    color: #ffffff !important; 
}
#_desktop_cart .material-icons { color: #ffffff !important; }


/* ==========================================================================
   5. ALAMKATEGOORIAD (LEGACY CLEANUP - "KILL BLUE")
   Seda osa hoiame alles, et puhastada vanad sinised kastid,
   kuid uus disain faili lõpus kirjutab selle kujunduse üle.
   ========================================================================== */
#subcategories ul { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; list-style: none !important; padding: 0 !important; }
#subcategories ul li { background: transparent !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 180px !important; margin: 10px !important; }

/* Pildi kast */
#subcategories ul li .subcategory-image {
    background: #fff !important;
    border: 1px solid var(--brand-border) !important; 
    padding: 5px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    height: 210px !important; width: 100% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin-bottom: 10px !important; overflow: hidden !important;
    border-radius: 12px !important;
    position: relative !important;
}

#subcategories ul li .subcategory-image img {
    max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; display: block !important;
}

/* --- "KILL BLUE" SEKTSIOON (Tapame sinise kasti igaveseks) --- */
#subcategories a::before, 
#subcategories a::after, 
#subcategories .subcategory-image::before, 
#subcategories .subcategory-image::after { 
    display: none !important; 
    content: none !important; 
    background: transparent !important;
}

#subcategories a, #subcategories a:hover, #subcategories a:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* --- UUS HOVER (Sinu Sinep) --- */
#subcategories ul li:hover .subcategory-image,
#subcategories ul li a:hover .subcategory-image {
    border-color: var(--brand-mustard) !important; /* Sinep raam */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px);
    background-color: #fff !important; 
}

/* Tekst - Petrol */
#subcategories ul li .subcategory-name {
    color: var(--brand-petrol) !important;
    font-weight: 700 !important;
    margin-top: auto !important; display: block !important; text-align: center !important;
}

@media (max-width: 767px) {
    #subcategories ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 15px !important; margin: 0 !important; padding: 0 5px !important; }
    #subcategories ul li { width: 100% !important; margin: 0 !important; }
    #subcategories ul li .subcategory-image { height: 170px !important; }
}

/* ==========================================================================
   6. NUPUD JA HINNAD (SINEP & PETROL)
   ========================================================================== */
/* Peamised nupud - SINEP */
.btn-primary, .btn-primary.add-to-cart, button.add-to-cart, #add-to-cart-or-refresh .add-to-cart {
    background: var(--brand-mustard) !important;
    background-color: var(--brand-mustard) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}
/* Hover - TUME SINEP */
.btn-primary:hover, .btn-primary.add-to-cart:hover, button.add-to-cart:hover {
    background: var(--brand-hover-mustard) !important;
    background-color: var(--brand-hover-mustard) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(33, 158, 188, 0.4) !important;
}
.btn-primary .material-icons { color: #ffffff !important; }

/* Hinnad - PETROL */
.price, .product-price, .current-price { color: var(--brand-petrol) !important; font-weight: 700 !important; font-size: 1.15rem; }

/* Sildid (New/Sale) - SINEP */
.product-flags .product-flag.new,
.product-flags .product-flag.on-sale,
.product-flags .product-flag.discount { 
    background: var(--brand-mustard) !important; color: #ffffff !important; 
    border-radius: 4px;
}


/* --- 7. CHECKOUT PARANDUSED --- */

/* 1. VALITUD VALIKUD */
.address-item.selected, 
body#checkout section.checkout-step .delivery-options input[type="radio"]:checked + label,
.payment-options .payment-option input[type="radio"]:checked + label,
.payment-option.selected {
    border-color: var(--brand-mustard) !important;
    background-color: var(--brand-light-mustard) !important; 
    box-shadow: 0 0 0 1px var(--brand-mustard) inset !important;
}

/* 2. HOVER */
.address-item:hover,
body#checkout section.checkout-step .delivery-options .delivery-option:hover,
.payment-options .payment-option:hover {
    border-color: var(--brand-mustard) !important; 
    background-color: #ffffff !important;           
    box-shadow: 0 0 0 1px var(--brand-mustard) inset !important;
    cursor: pointer;
}
/* Vaikimisi kastid */
.address-item, 
body#checkout section.checkout-step .delivery-options .delivery-option, 
.payment-options .payment-option {
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    margin-bottom: 10px;
    padding: 15px;
    transition: all 0.2s ease;
    background: #fff;
}


/* ==========================================================================
   8. MENÜÜ DISAIN (Ilusad alamlingid)
   ========================================================================== */
/* 1. Tase 1 (MEN) */
.top-menu .sub-menu ul[data-depth="1"] > li > a {
    font-weight: 700 !important; text-transform: uppercase !important; color: #000 !important;
    border-bottom: 1px solid #eee; margin-bottom: 5px; padding-bottom: 5px;
}
/* 2. Tase 2 (Test9) */
.top-menu .sub-menu ul[data-depth="2"] li a {
    font-weight: 400 !important; text-transform: none !important; color: #555 !important;
    font-size: 13px !important; padding: 3px 0 !important; transition: all 0.2s;
}
/* Hover */
.top-menu .sub-menu ul[data-depth="2"] li a:hover {
    color: var(--brand-mustard) !important; padding-left: 5px !important;
}


/* ==========================================================================
   9. ILUSAD JOONED (Pealkirjad & Footer)
   ========================================================================== */
.products-section-title {
    position: relative; text-align: center; padding-bottom: 25px !important; margin-bottom: 40px !important;
}
/* Hall joon aktsendiga */
.products-section-title::before {
    content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 200px; height: 1px; background-color: var(--brand-border);
}
.products-section-title::after {
    content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 40px; height: 3px; background-color: var(--brand-mustard); border-radius: 2px;
}

/* Footer joon - KUULIKINDEL (ei kao enam ära) */
.footer-container { 
    position: relative !important; 
    margin-top: 60px !important; 
}

.footer-container::before {
    content: "" !important; 
    display: block !important;
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 3px !important;
    /* Uus gradient, mis sobib halli taustaga (#f5f5f5 = rgb 245,245,245) */
    background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(10,92,122,1) 35%, rgba(33,158,188,1) 50%, rgba(10,92,122,1) 65%, rgba(245,245,245,1) 100%) !important;
    opacity: 1 !important; 
    z-index: 99 !important;
}


/* ==========================================================================
   10. KÜPSISTE MOODUL (COOKIE) - ÜHTLUSTATUD DISAIN
   ========================================================================== */
.cookie-overlay {
    position: fixed; 
    bottom: 20px;    /* Toob bänneri alla serva */
    left: 20px;      /* Toob bänneri vasakule */
    width: auto;     /* Ei kata enam kogu laiust */
    height: auto;    /* Ei kata enam kogu kõrgust */
    background: transparent; /* Kaotame tumeda tausta */
    backdrop-filter: none;   /* Kaotame udu */
    z-index: 999999 !important; 
    display: none; 
    align-items: flex-end; 
    justify-content: flex-start;
}

.cookie-modal {
    background: #ffffff !important; 
    padding: 25px;   /* Veidi kompaktsem */
    max-width: 400px; /* Teeme kasti kitsamaks, et see ei segaks liiga palju */
    width: 90%;
    border-radius: 12px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* Tugevam vari, et paistaks valgel taustal silma */
    text-align: center;
}

.cookie-modal {
    background: #ffffff !important; padding: 35px; max-width: 550px; width: 95%;
    border-radius: 12px !important; box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; text-align: center;
}

/* NUPPUDE ÜHTNE DISAIN (Kõrgus, font, ümarus) */
.btn-cookie-primary, 
.btn-cookie-secondary {
    border: none !important;
    padding: 0 25px !important;      /* Külgmine polsterdus */
    height: 48px !important;         /* SUNNIME SAMA KÕRGUSE */
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease;
    margin: 5px;
    min-width: 180px;                /* Tagab, et nupud on visuaalselt tasakaalus */
}

/* NÕUSTUN NUPP (SINEP) */
.btn-cookie-primary {
    background-color: var(--brand-mustard) !important; 
    color: #fff !important;
}
.btn-cookie-primary:hover {
    background-color: var(--brand-hover-mustard) !important;
}

/* VALIKUTE NUPP (PETROL) */
.btn-cookie-secondary {
    background-color: var(--brand-petrol) !important; 
    color: #fff !important;
}
.btn-cookie-secondary:hover {
    filter: brightness(1.1);
}

/* Lüliti ja valikute list jäävad samaks */
.cookie-switch { position: relative; display: inline-block; width: 44px; height: 22px; flex-shrink: 0; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }

input:checked + .slider { background-color: var(--brand-mustard) !important; }
input:checked + .slider:before { transform: translateX(22px); }

.cookie-options-list { text-align: left; margin: 20px 0; max-height: 300px; overflow-y: auto; }
.cookie-option-item { display: flex; align-items: flex-start; gap: 15px; padding: 15px 0; border-bottom: 1px solid #eee; }
/* ==========================================================================
   TOOTELEHE PISIPILDID: ASENDA SININE RAAM SINEPIKOLLASEGA
   ========================================================================== */
.product-images img.thumb.selected,
.product-images img.thumb:hover,
.product-images img.thumb:focus,
.product-images .js-qv-product-images img.selected {
    outline: none !important;
    box-shadow: none !important;
    border: 2px solid var(--brand-petrol) !important;
    transition: all 0.2s ease;
}

/* ==========================================================================
   FIX: MOBIILI OSTUKORVI NUMBER VALGEKS
   ========================================================================== */
#_mobile_cart .cart-products-count {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   TOOTELEHE PUHASTUS JA TARNEINFO DISAIN
   ========================================================================== */

/* 1. PEIDA "MAKSUDEGA" TEKST */
.product-prices .tax-shipping-delivery-label {
    display: none !important;
}

/* 2. TARNEINFO DISAIN (KOLLANE JA SOLIIDNE) */
#product-availability {
    display: flex !important;
    align-items: center !important;
    background-color: var(--brand-light-mustard) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
    margin-top: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#product-availability span,
#product-availability {
    color: var(--brand-dark) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

#product-availability i.material-icons,
#product-availability .material-icons {
    color: var(--brand-petrol) !important;
    margin-right: 10px !important;
    font-size: 20px !important;
    margin-top: -2px !important;
}

#product-availability .product-last-items {
     color: var(--brand-mustard) !important;
     font-weight: 700;
}

/* ==========================================================================
   TOOTELEHT: OSTUKORV JA KOGUS (SAFE MODE - ABSOLUUTNE POSITSIOON)
   ========================================================================== */

/* 1. Üldkonteiner: Hoiab nupu ja koguse reas */
.product-add-to-cart .product-quantity {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    height: 50px !important;
    margin-bottom: 0 !important;
}

/* 2. KOGUSE KAST (Raamistik) */
.product-add-to-cart .qty {
    flex: 0 0 90px !important;
    width: 90px !important;
    height: 100% !important;
    margin: 0 !important;
}

.product-add-to-cart .qty .input-group {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: #fff !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 8px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* 3. NUMBER (Sisestusväli) */
.product-add-to-cart #quantity_wanted {
    height: 100% !important;
    width: 100% !important;
    padding-right: 30px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    z-index: 1 !important;
}

/* 4. NOOLED (Parem tulp) */
.product-add-to-cart .input-group-btn-vertical {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 30px !important;
    height: 100% !important;
    z-index: 2 !important;
    border-left: 1px solid #eee !important;
    display: flex !important;
    flex-direction: column !important;
}

.product-add-to-cart .input-group-btn-vertical .btn {
    flex: 1 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: #f9f9f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.product-add-to-cart .input-group-btn-vertical .btn:last-child {
    border-top: 1px solid #eee !important;
}

.product-add-to-cart .input-group-btn-vertical .btn i {
    font-size: 14px !important;
    color: #555 !important;
    margin: 0 !important;
    position: static !important;
}

/* 5. LISA OSTUKORVI NUPP */
.product-add-to-cart .add {
    flex-grow: 1 !important;
    height: 100% !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
}

.product-add-to-cart .add .add-to-cart {
    width: 100% !important;
    height: 50px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    background-color: var(--brand-mustard) !important;
    border: none !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.product-add-to-cart .add .add-to-cart:hover {
    background-color: var(--brand-hover-mustard) !important;
}

.product-add-to-cart .add .add-to-cart .material-icons {
    margin-right: 8px !important;
}

/* ==========================================================================
   2. OSTUKORV: TARNEINFO (ÜKS KAST, HIND ÜLEVAL, TEKST ALL)
   ========================================================================== */

/* 1. Teeme keskmise tulba Flexboxiks, et sisu järjekorda muuta */
.product-line-grid-body {
    display: flex !important;
    flex-direction: column !important;
}

/* Nimi esimeseks */
.product-line-grid-body .product-line-info:first-child {
    order: 1 !important;
}

/* ÜHIKUHIND: Teiseks (Nime alla) */
.product-line-grid-body .product-price {
    order: 2 !important;
    margin-top: 5px !important;
    margin-bottom: 2px !important;
}

/* TARNEINFO: Kolmandaks (Hinna alla) */
.product-line-grid-body .availability {
    order: 3 !important;
    /* KAOTAME VÄLISE KASTI ÄRA: */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* TEKST ITEISEL KASTIS: See on see "väike kollane kast" */
.product-availability-real {
    display: inline-block !important;
    background-color: var(--brand-light-mustard) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 4px !important;
    padding: 2px 6px !important;
    
    /* Väiksem tekst seaded */
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #444 !important;
    line-height: 1.2 !important;
}

/* Peidame vana "fake" teksti igaveseks */
.cart-items .product-line-grid-body::after {
    display: none !important;
    content: none !important;
}

/* Hall ühikuhind nime all */
.product-line-grid-body .price {
    color: #999 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   3. OSTUKORV: MOBIILI PAIGUTUS (KOGUS, HIND, PRÜGIKAST) - SIRGE JOONDUS
   ========================================================================== */
@media (max-width: 991px) {
    
    /* PEAMINE KONTEINER: Sunnime kõik asjad täpselt ühele horisontaalsele joonele */
    .product-line-grid-right {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important; /* JOONDAB ASJAD KESKELE (Kaotab "astme") */
        justify-content: space-between !important;
        
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 15px !important;
        padding: 10px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
    }

    /* KOGUSE VALIJA (Vasakul) */
    .cart-items .input-group {
        display: flex !important;
        align-items: center !important;
        width: 105px !important; 
        min-width: 105px !important;
        height: 40px !important;
        margin: 0 !important;
    }

    /* HIND JA PRÜGIKASTI GRUPP (Paremal) */
    .product-line-grid-right .product-price,
    .product-line-grid-right .price {
        display: flex !important;
        align-items: center !important; /* Hoiab hinna teksti keskel */
        margin-left: auto !important;
        margin-right: 15px !important; 
        font-size: 17px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        color: var(--brand-petrol) !important; /* Petrol roheline */
    }

    /* PRÜGIKAST (Täiesti paremas nurgas) */
    .product-line-grid-right .cart-line-product-actions {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }
}
/* TOOTELEHE TARNEINFO LÜHENDAMINE (-15px paremalt) */
#product-availability {
    width: calc(100% - 15px) !important;
    max-width: calc(100% - 15px) !important;
}
/* ==========================================================================
   OSTUKORVI JOONDUS: NIMI, HIND JA TARNEINFO ÜLES (AINULT DESKTOP)
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Võtame keskmiselt tulpalt igasuguse ülemise õhu ära */
    .cart-items .product-line-grid-body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* 2. Eemaldame "selektsiooni tühiku" nime kohalt */
    .cart-items .product-line-info:first-child {
        line-height: 1 !important; /* See tõmbab selektsiooni kasti täpselt ümber tähtede */
        margin-bottom: 2px !important;
    }

    /* 3. TÕSTAME KOGU BLOKI (Nimi + Hind + Tarne) */
    .cart-items .product-line-info:first-child a.label {
        display: inline-block !important;
        line-height: 1 !important;
        margin-top: -14px !important; /* Jõuline tõste, et joonduks kasti ülaservaga */
        vertical-align: top !important;
    }

    /* 4. Tõmbame ühikuhinna ja tarneinfo koomale, et nad tuleksid nimele järgi */
    .product-line-grid-body .product-price {
        margin-top: 2px !important; /* Vähendame vahet nimega */
    }

    .product-line-grid-body .availability {
        margin-top: 2px !important; /* Vähendame vahet hinnaga */
    }
}
/* ==========================================================================
   NUPPUDE HOVERI PARANDUS (VALGE TEKST JA IKOONID)
   ========================================================================== */

/* Sunnime teksti valgeks kõikidel peamistel nuppudel hoveri ajal */
.btn-primary:hover, 
.add-to-cart:hover, 
button.add-to-cart:hover, 
#add-to-cart-or-refresh .add-to-cart:hover,
.btn-cookie-primary:hover {
    color: #ffffff !important; /* Hoiab teksti valgena */
    text-decoration: none !important; /* Eemaldab võimaliku joone nime alt */
}

/* Veendume, ka nupu sees olevad ikoonid (ostukorvi märk jne) jäävad valgeks */
.btn-primary:hover i,
.btn-primary:hover .material-icons,
.add-to-cart:hover i,
.add-to-cart:hover .material-icons {
    color: #ffffff !important;
}
/* ==========================================================================
   TOOTE KAARDI HOVER: HINNA MUUTUS (PETROL -> SINEP)
   ========================================================================== */

/* 1. Määrame baasvärvile sujuva ülemineku, et värv ei "hüppaks" */
.product-miniature .price {
    transition: color 0.3s ease !important;
}

/* 2. Kui hiir läheb toote kasti peale, muutub hind sinepikarva */
.product-miniature:hover .price {
    color: var(--brand-mustard) !important; /* Sinu sinepikarva kuldne */
}

/* 3. Sama efekt ka ostukorvi nuppudele, et pilt oleks terviklik */
.product-miniature:hover .add-to-cart {
    /* Kui soovid ka nuppu sel hetkel veidi esile tõsta */
    filter: brightness(1.05) !important;
}
/* ==========================================================================
   TOOTE KAART ÜLENI KLIKITAVAKS (LINK)
   ========================================================================== */

/* 1. Teeme toote kasti "konteineriks" */
.product-miniature {
    position: relative !important;
}

/* 2. Laiendame toote nime lingi üle kogu kasti */
.product-miniature .product-title a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; /* See kiht katab nüüd kogu kasti */
}

/* 3. TOOME NUPUD "PINNALE" */
/* Et "Lisa ostukorvi" nupp ja muud ikoonid ikka töötaksid, tõstame nad sellest kihist ettepoole */
.product-miniature .highlighted-informations,
.product-miniature .add-to-cart,
.product-miniature .quick-view,
.product-miniature .product-actions {
    position: relative !important;
    z-index: 2 !important;
}

/* 4. Visuaalne tagasiside (vabatahtlik) */
.product-miniature:hover {
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; /* Lisab õrna varju, kui peale minna */
}
/* ==========================================================================
   ÜLDPILDI TUUNIMINE: PÄISE JA KATEGOORIAPUU JOONDUS
   ========================================================================== */

/* 1. VÄHENDAME ÕHKU PEAMENÜÜ ALL (Päise ja sisu vahe) */
#header {
    margin-bottom: 5px !important; /* PrestaShopi tavapärane 25px+ on liiga palju */
}

.breadcrumb {
    margin-bottom: 10px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 2. KATEGOORIAPUU (SIDEBAR) ILU-FIX */
@media (min-width: 992px) {
    #left-column {
        padding-left: 25px !important;  /* Toob kategooriad servast ilusamini eemale */
        margin-top: -15px !important;   /* Tõstab kogu puud ülespoole, et tühimik kaoks */
    }

    #search_filters {
        background: #fdfdfd !important; /* Lisame õrna tausta, et puu eristuks */
        padding: 15px !important;
        border: 1px solid #f0f0f0 !important;
        border-radius: 8px !important;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.02) !important;
    }

    /* Toote nime ja kategooria puu pealkirja kõrguse klapitamine */
    #left-column .h6 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        font-weight: 700 !important;
        color: #333 !important;
    }
}

/* 3. MOBIILIS HOIAME ASJAD LIHTSAD */
@media (max-width: 991px) {
    #header {
        margin-bottom: 10px !important;
    }
}
/* 1. MÄÄRAME TAUSTAVÄRVI (KASUTADES UUET ROOT MUUTUJAT) */
.header-nav,          /* Kõige ülemine peenike riba */
.footer-container {   /* Jalus */
    background-color: var(--header-footer-bg) !important;
    border-bottom: 1px solid var(--header-footer-line) !important; 
}

/* 2. MÄÄRAME TEKSTI TUMEDAKS (KASUTADES UUET ROOT MUUTUJAT) */
.header-nav, 
.header-nav a, 
.header-nav span, 
.header-nav i,
.footer-container, 
.footer-container a {
    color: var(--header-footer-text) !important; 
}

/* 3. OSTUKORVI TEKSTI PARANDUS (TAGASI VALGEKS) */
/* See on see kriitiline rida: ütleme, et ükskõik mis värvi taust on,
   OSTUKORVI nupu sees peab tekst olema ALATI valge. */
#_desktop_cart .blockcart a,
#_desktop_cart .blockcart span,
#_desktop_cart .cart-products-count,
#_desktop_cart .material-icons {
    color: #ffffff !important;
}
/* ==========================================================================
   14. OSTUKORVI HÜPIKAKEN (MODAL): TOOTE NIMI PETROLIKS
   ========================================================================== */

/* Hüpikakna toote nimi */
#blockcart-modal .product-name {
    color: var(--brand-petrol) !important; /* Muudame roheliseks */
    font-family: 'Mulish', sans-serif !important;
    font-weight: 700 !important; /* Teeme veidi paksemaks */
}

/* Hind nime all */
#blockcart-modal .product-price {
    color: var(--brand-dark) !important; /* Hind olgu tume või soovi korral ka --brand-petrol */
}

/* "Jätka ostlemist" nupp - teeme selle ka ilusaks */
#blockcart-modal .btn-secondary {
    background-color: #f3f3f3 !important;
    color: var(--brand-dark) !important;
    border: 1px solid #ddd !important;
}

#blockcart-modal .btn-secondary:hover {
    background-color: #e6e6e6 !important;
    color: #000 !important;
}
/* ==========================================================================
   16. TOOTEKAARTIDE ERALDAMINE JA TUMEDAM VARI (FIX)
   ========================================================================== */

/* 1. ÜLDINE DISAIN (Varjud ja Ääred) */
.product-miniature {
    /* Eemaldame halli joone, vari on ilusam eraldaja */
    border: none !important;
    
    /* Tumedam ja konkreetsem vari (nüüd paistab paremini välja) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12) !important;
    
    /* Teeme ülemineku sujuvaks */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* 2. HOVER EFEKT (Kui hiirega peale minna) */
.product-miniature:hover {
    /* Tõstame toodet natuke kõrgemale */
    transform: translateY(-5px) !important;
    
    /* Veel tumedam vari hoveri ajal */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2) !important;
}

/* 3. AINULT DESKTOP (Eraldame kastid üksteisest) */
@media (min-width: 992px) {
    .products article.product-miniature {
        /* Lisame alla ruumi, et nad ei istuks üksteise seljas */
        margin-bottom: 35px !important;
        
        /* Lisame külgedele väikse "õhu", et vari paistaks välja */
        margin-left: 5px !important;
        margin-right: 5px !important;
        
        /* Arvutame laiuse natuke väiksemaks, et marginaalid ära mahuksid 
           (muidu võib rida katki minna) */
        width: calc(100% - 10px) !important; 
    }
}
/* ==========================================================================
   17. TOOTENIMED LÄBIVALT SUURTEKS TÄHTEDEKS
   ========================================================================== */

/* Muudab nimed suurteks tähtedeks nii kategooria vaates kui avalehel */
.product-miniature .product-title a,
.product-miniature .product-title {
    text-transform: uppercase !important;
    letter-spacing: 0.5px; /* Lisab veidi õhku tähtede vahele, et oleks kergem lugeda */
}
/* ==========================================================================
   18. KIIRVAATE (SUURENDUSKLAASI) PEITMINE KUNI HOVERINI
   ========================================================================== */

/* 1. Peidame info vaikimisi */
.product-miniature .highlighted-informations {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    /* Hoiame positsiooni, et see ei hüppaks ilmudes */
    bottom: 0; 
}

/* 2. Näitame infot ainult siis, kui hiirega liigutakse tootekaardi peale */
.product-miniature:hover .highlighted-informations {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. Mobiilis võiks see jääda siiski peitu, et pilt oleks puhas, 
   kuna mobiilis "hoverit" ei ole. Kui soovid mobiilis näha, eemalda see osa: */
@media (max-width: 767px) {
    .product-miniature .highlighted-informations {
        display: none !important;
    }
}
/* ==========================================================================
   LÕPLIK JA KORRASTATUD DISAIN: KLEEPEKAD, HINNAD JA TOOTELEHE SOODUS
   ========================================================================== */

/* 1. MÄRKIDE KONTEINER (Pildi peal vasakul) */
/* Reastab sildid üksteise alla ja lükkab servast veidi üle */
.product-flags {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    position: absolute !important;
    top: 1px !important;
    left: -5px !important; /* Lükkab 5px üle vasaku ääre */
    z-index: 10 !important;
    width: auto !important;
}

/* 2. MÄRKIDE STIIL PILDI PEAL (UUS, -15% jne) */
/* Suurem tekst, täpne tsentreerimine ja "kleepeka" kuju */
.product-flags .product-flag {
    background-color: var(--brand-mustard) !important;
    color: #ffffff !important;
    
    /* Teksti suurus ja stiil */
    font-size: 12px !important; 
    font-weight: 800 !important;
    text-transform: uppercase !important;
    
    /* Täpne tsentreerimine (Flexbox) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Mõõdud ja kuju */
    height: 26px !important;          /* Fikseeritud kõrgus */
    min-width: 65px !important;       /* Ühtlane laius */
    padding: 0 10px !important;
    
    border-radius: 0 4px 4px 0 !important; /* Sirge vasak serv, ümar parem */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important;
    
    line-height: 1 !important;
    margin: 0 !important;
}

/* 3. TOOTELEHE SOODUS-SILT (Hinna kõrval) - SEE ON NÜÜD NÄHTAV! */
/* See toob tagasi "SALVESTA" või "-15%" sildi ainult tootelehel hinna kõrvale */
.product-prices .discount-percentage,
.product-prices .discount {
    display: inline-flex !important;  /* Teeb nähtavaks */
    align-items: center !important;
    justify-content: center !important;
    
    background-color: var(--brand-mustard) !important;
    color: #ffffff !important;
    
    padding: 4px 10px !important;
    border-radius: 4px !important;    /* Siin kasutame tavalist ümarat nurka */
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    
    margin-left: 10px !important;     /* Vahe hinnaga */
    height: auto !important;
    line-height: 1.2 !important;
}

/* 4. PUHASTUS: KATEGOORIA VAATES PEIDAME HINNA KÕRVALT SILDI */
/* Et kataloogis pildi all oleks ainult hinnad, mitte topelt märke */
.product-miniature .product-price-and-shipping .discount-percentage,
.product-miniature .product-price-and-shipping .discount-product,
.product-line-grid-right .discount-percentage { 
    display: none !important; 
}

/* 5. HINDADE VIIMISTLUS KATEGOORIAS */
.product-description .product-price-and-shipping {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Vana hind (hall ja maha tõmmatud) */
.product-miniature .regular-price {
    font-size: 14px !important;
    color: #999 !important;
    text-decoration: line-through !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* Uus hind (suur ja Petrol) */
.product-miniature .price {
    font-size: 18px !important;
    color: var(--brand-petrol) !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* 6. TARNEINFO BOX (TOOTELEHEL) */
#product-availability {
    display: flex !important;
    align-items: center !important;
    background-color: var(--brand-light-mustard) !important;
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
    margin-top: 7px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#product-availability span {
    color: var(--brand-dark) !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

#product-availability .material-icons {
    color: var(--brand-petrol) !important;
    margin-right: 8px !important;
}
/* ==========================================================================
   7. OSTUKORVI ALLAHINDLUSE SILDID (PARANDUS)
   ========================================================================== */

/* Siin on spetsiifiline reegel ainult ostukorvi vaate jaoks (.cart-items) */
.cart-items .product-line-grid-body .discount-percentage,
.cart-items .discount-percentage {
    display: inline-block !important;       /* Toome sildi kindlasti nähtavale */
    background-color: var(--brand-mustard) !important; /* Sinepikollane */
    color: #ffffff !important;              /* Valge tekst */
    
    /* Kujundus: Väike ja ümar */
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;            /* Kompaktne sisu */
    border-radius: 12px !important;         /* Täiesti ümarad nurgad */
    
    /* Paigutus */
    margin-left: 6px !important;            /* Väike vahe vana hinnaga */
    vertical-align: middle !important;      /* Joondub hinnaga kenasti keskele */
    line-height: 1 !important;
    
    /* Nullime "kleepeka" efektid, et see ei käituks nagu pildi peal olev silt */
    position: static !important; 
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    text-align: center !important;
}
/* ==========================================================================
   ETTEVAATLIK FIX: SILTIDE RUUM JA MOBIILI "2 KÕRVUTI" GARANTII
   ========================================================================== */

/* 1. TEKITAME PILD KASTI ÜLASERVA RUUMI (See kehtib igal pool) */
/* See 40px padding lükkab pildi alla, et Sinu sinepikollased sildid mahuksid ära */
.product-miniature .thumbnail-container {
    padding-top: 40px !important; 
    padding-left: 5px !important;
    padding-right: 5px !important;
    padding-bottom: 0 !important;
    
    height: auto !important; 
    min-height: 100px !important;
    overflow: visible !important;
    /* Järgmine rida on kriitiline: see ütleb, et padding on laiuse SEES */
    box-sizing: border-box !important; 
}

/* Pilt olgu alati ilusasti keskel */
.product-miniature .thumbnail-container img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   TUUMALAHENDUS: SUNNIME 2 KÕRVUTI (EEMALDAME TAKISTUSED)
   ========================================================================== */

/* 1. MÄRKIDE RUUM (See jääb samaks, sest see töötas) */
.product-miniature .thumbnail-container {
    padding-top: 40px !important; 
    padding-left: 5px !important;
    padding-right: 5px !important;
    height: auto !important; 
    overflow: visible !important;
    box-sizing: border-box !important;
}
/* ==========================================================================
   AINULT MOBIIL: ROHKEM RUUMI ÜLES, VÄHEM ALLA
   ========================================================================== */

@media (max-width: 767px) {
    .product-miniature .thumbnail-container {
        /* 1. ÜLES ROHKEM RUUMI (oli 45px -> nüüd 55px) */
        /* See lükkab pildi veel allapoole, et sildid mahuksid ideaalselt */
        padding-top: 55px !important; 
        
        /* 2. ALLA VÄHEM RUUMI (Nullime ära) */
        /* See tõmbab toote nime pildile lähemale */
        padding-bottom: 0 !important;
        
        /* 3. Tehniline ohutus (et pilt ei kaoks) */
        height: auto !important;
        min-height: 120px !important;
        overflow: visible !important;
    }
}
/* ==========================================================================
   VÄIKSEMAD VAHED TOODETE VAHEL (DESKTOP JA MOBIIL)
   ========================================================================== */

/* 1. KONTEINER: Tõmbame terve toodete rea servadest laiemaks */
/* Tavaliselt on see -15px, meie paneme -5px, et kompenseerida väiksemat vahet */
.products.row, 
.featured-products .products, 
#products .products {
    margin-left: -5px !important;
    margin-right: -5px !important;
}

/* 2. TOOTED: Vähendame külgedel olevat tühja ruumi */
/* See teebki tooted suuremaks, sest ruumi ei raisata tühimikele */
.products .col-xs-12, 
.products .col-xs-6, 
.products .col-6,
.products .col-md-3,
.products .col-lg-3,
.products .col-xl-3,
.product-miniature {
    padding-left: 5px !important;  /* Oli enne u 15px */
    padding-right: 5px !important;
}
/* ==========================================================================
   MUUDA "UUS" SILT PETROL VÄRVIKS (Heledam toon)
   ========================================================================== */

.product-flags .product-flag.new {
    background-color: var(--brand-mustard) !important; /* Heledam Petrol */
    color: #ffffff !important;
    box-shadow: 2px 2px 5px rgba(10, 92, 122, 0.2) !important; /* Vari petroli tooniga */
}
/* Väga minimalistlik ja viisakas kasutustingimuste kast */
#conditions-to-approve {
    background-color: var(--brand-light-mustard) !important; /* Väga hele, "soe" kollane */
    border: 1px solid var(--brand-border) !important; /* Pehme piirjoon */
    border-radius: 8px !important;        /* Viisakalt ümarad nurgad */
    padding: 6px 12px !important;         /* Napilt tekstist veidi laiem/kõrgem */
    display: block !important;            /* Tagab, et taust ilmub teksti taha */
    margin-bottom: 10px !important;       /* Väike vahe järgmise elemendiga */
}
/* ==========================================================================
   CHECKOUT: SAMMUDE NUMBRID JA LINNUKESED (PETROL)
   ========================================================================== */

/* 1. Sammude numbrid (nii aktiivne kui läbitud) */
.checkout-step .step-number,
body#checkout section.checkout-step.-reachable.-current .step-number {
    background-color: var(--brand-petrol) !important;
    color: #ffffff !important;
}

/* 2. Lõpetatud sammude linnukesed (teksti kõrval) */
/* See muudab need rohelised linnukesed Petrol-karva */
#checkout .checkout-step .step-title i.done {
    color: var(--brand-petrol) !important;
}

/* 3. Lõpetatud sammu pealkiri (valikuline, kui soovid sümmeetriat) */
#checkout .checkout-step.-complete .step-title {
    color: var(--brand-petrol) !important;
}


/* ==========================================================================
   CHECKOUT: RAADIONUPPUDE VALIK (SINEPIKOLLANE)
   ========================================================================== */

/* Muudame raadionupu "täpi" või "linnukese", mis tekib valimisel */
/* See sihib nii tarnet kui ka makseviise */

body#checkout input[type="radio"]:checked + span.custom-radio,
body#checkout .custom-radio input[type="radio"]:checked + span,
.delivery-option input[type="radio"]:checked + label .custom-radio {
    background-color: var(--brand-mustard) !important;
}

/* See osa tagab, et raadionupu sisemine täpp oleks valge ja selge */
body#checkout .custom-radio i {
    background-color: var(--brand-mustard) !important;
}

/* Kui teema kasutab pseudo-elemente (levinud Classic teemas) */
body#checkout .custom-radio input[type="radio"]:checked + span::after {
    background-color: var(--brand-mustard) !important;
}

/* Raadionupu raam (kui hiirega peale minna või on valitud) */
.custom-radio:hover,
input[type="radio"]:checked + .custom-radio {
    border-color: var(--brand-mustard) !important;
}
/* PARANDATUD: Konteineri laiune desktopis, servast servani mobiilis */
.brand-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 tulpa desktopis */
    gap: 15px;
    width: 100%; /* Võtab täpselt sisuploki laiuse */
    max-width: 100%;
    margin: 30px 0;
    box-sizing: border-box;
}

.brand-grid-item {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    aspect-ratio: 1 / 1; /* Hoiab pildid ruuduna, et sümmeetria säiliks */
    line-height: 0;
}

.brand-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover efekt - sujuv suum ja Petrol kuma */
.brand-grid-item:hover {
    transform: scale(1.03);
    z-index: 2;
    box-shadow: 0 10px 25px rgba(10, 92, 122, 0.2);
    filter: brightness(90%);
}

/* --- 1. ÜLDISED SEADED --- */
#index .brand-grid-container {
    display: grid;
    box-sizing: border-box;
    /* VÄHEM VALGET RUUMI (Oli 30px, nüüd 15px) */
    margin-top: 15px; 
    margin-bottom: 15px;
    max-width: none !important;
}

#index .ps-customtext { padding: 0 !important; }

/* Piltide kastid */
.brand-grid-item {
    display: block;
    overflow: hidden;
    background: #fff;
    /* Hoiab pildid ALATI ruuduna */
    aspect-ratio: 1 / 1; 
    line-height: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

.brand-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* HOVER EFEKT (Kehtib nüüd nii desktopis kui mobiilis vajutades) */
.brand-grid-item:hover {
    transform: translateY(-5px);
    z-index: 2;
    box-shadow: 0 10px 25px rgba(10, 92, 122, 0.2); /* Sinu Petrol vari */
    filter: brightness(92%);
}
.brand-grid-item:hover img {
    transform: scale(1.05); /* Pilt suumib sisse */
}

/* --- 2. DESKTOP VAADE (Alates 768px) --- */
@media (min-width: 768px) {
    #index .brand-grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        
        margin-left: -50px !important;
        margin-right: -50px !important;
        width: calc(100% + 100px) !important;
    }

    .brand-grid-item {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* --- 3. MOBIILI VAADE (Kuni 767px) --- */
@media (max-width: 767px) {
    #index .brand-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Suurendasin vahet veidi, et ümarad nurgad oleks ilusamad */
        gap: 6px !important; 
        
        /* BREAKOUT TEHNIKA (Servast servani) */
        width: 100vw !important;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        
        /* Väike polsterdus servadesse, et ümarad nurgad ei lõikaks ekraani äärtesse sisse */
        padding: 0 4px !important; 
    }
    
    .brand-grid-item {
        /* LISATUD: Ümarad nurgad ka mobiilis */
        border-radius: 8px !important; 
        /* LISATUD: Vaikimisi vari ka mobiilis */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; 
    }

    body { overflow-x: hidden !important; }
}

/* ==========================================================================
   AVALEHE BÄNNER: OHUTUD ÜMARAD NURGAD
   ========================================================================== */

/* 1. Eemaldame väljast vana raami ja varju, aga EI PUUTU joondust ega marginaale! */
#homepage-slider,
#carousel {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 2. Teeme sisemise pildiosa ümaraks ja lõikame üle ulatuvad nurgad ära */
#carousel .carousel-inner,
.homeslider-container .carousel-inner {
    border-radius: 12px !important;
    overflow: hidden !important;
    
    /* Uus õrn vari otse pildile */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    
    /* Aitab hoida lõikejooned puhtana */
    position: relative;
    z-index: 1;
}

/* 3. Mobiilis muudame nurgad õrnemaks (8px), et sobiks alumiste piltidega */
@media (max-width: 767px) {
    #carousel .carousel-inner,
    .homeslider-container .carousel-inner {
        border-radius: 8px !important;
    }
}
/* Peidab kolmanda ja sügavamad kategooriate tasemed */
.top-menu[data-depth="3"],
.top-menu[data-depth="4"] {
    display: none !important;
}
/* --- LOGO FORCE RESIZE --- */

/* 1. Sunnime logo väiksemaks (targetime nii konteinerit, linki kui pilti) */
#_desktop_logo, 
#_desktop_logo a, 
#_desktop_logo img {
    max-width: 225px !important; /* See määrab logo laiuse desktopis */
    height: auto !important;
    margin: 0 auto; /* Hoiab logo keskel */
    display: block;
}

/* 2. Eemaldame liigse tühimiku logo ümbert */
#header .header-top {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* --- MOBIILIVAATE PÄISE JA JOONE PARANDUS --- */

@media (max-width: 991px) {
    /* 1. Muudame kogu päise pealmise kesta valgeks ja paneme kindla joone */
    #header {
        background-color: var(--brand-bg) !important;
        border-bottom: 1px solid var(--header-footer-line) !important; /* Puhas katkematu joon muutujast */
        position: relative;
        z-index: 1000;
    }
/* ... edasi läheb vana kood samamoodi ... */

    /* 2. Teeme kõik siseelemendid taustast puhtaks, et joon paistaks välja */
    .header-nav, 
    .header-top, 
    #mobile_menu_wrapper,
    .menu-icon,
    .blockcart {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* 3. Parandame "katkendliku" joone vea (eemaldame negatiivsed marginaalid) */
    .header-top .container, 
    .header-top .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 4. Logo asetus ja suurus */
    #_mobile_logo {
        padding: 10px 0 !important;
    }

    #_mobile_logo img {
        max-width: 130px !important;
        height: auto !important;
    }

    /* 5. Menüü avanemise parandus: et menüü ei kataks joont ära */
    #mobile_menu_wrapper {
        border-top: 1px solid #f0f0f0 !important; /* Valikuline: õrn joon menüü sees */
        margin-top: 0 !important;
    }
}

/* 2. AVALEHE MOODULITE VAHED (KOHANDATUD)   */
body#index #content > * {
    margin-top: 40px !important;    
    margin-bottom: 40px !important; 
    padding-top: 0 !important;      
    padding-bottom: 0 !important;
}

body#index #content > *:first-child { margin-top: 0 !important; }
body#index #content > *:last-child { margin-bottom: 0 !important; }

body#index .featured-products,
body#index .carousel {
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
}

/* --- Toote piltide nurgad ümaraks kategooria vaates --- */
.product-miniature .thumbnail img {
    border-radius: 15px; 
    overflow: hidden;    
}
.product-miniature .thumbnail-container .product-flag {
    border-top-left-radius: 15px; 
}

/* --- TOOTE PILDI VAHETUS + ÄGE EFEKT (PARANDATUD) --- */
@keyframes softAppear {
    0% { opacity: 0; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

.product-miniature .thumbnail img { border-radius: 15px !important; }
.product-miniature .product-flag { border-top-left-radius: 15px; }
.product-miniature .second-img { display: none !important; }

.product-miniature:has(.second-img):hover .thumbnail picture { display: none !important; }
.product-miniature:hover .second-img {
    display: block !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    animation: softAppear 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* --- MENÜÜ PARANDUS (FAST & CLEAN) --- */
.top-menu .sub-menu {
    border-radius: 0 0 15px 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12) !important;
    border: none !important;
    background: #fff !important;
}

.top-menu .sub-menu ul li a {
    display: block; 
    transition: transform 0.2s ease; 
}
.top-menu .sub-menu ul li a:hover {
    color: #2fb5d2; 
    transform: translateX(7px); 
    text-decoration: none;
    font-weight: 600; 
}

/* --- PRESTASHOP 8 TOOTEPILDID --- */
.product-cover img { border-radius: 15px !important; }
.product-images .thumb { border-radius: 10px !important; }
.product-cover .layer { border-radius: 15px !important; }

/* ==========================================================
   MIU KIDS: FINAL SUBCATEGORY DESIGN (FIX: MOBIILI FONT)
   ========================================================== */

/* 1. KATEGOORIA SAAR */
body#category .subcategories-grid {
    background-color: #F3F2ED !important;
    padding: 18px 8px !important; 
    border-radius: 10px !important;
    margin: 20px 0 50px 0 !important;
    
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; 
    gap: 12px !important; 
    
    border: 1px solid #e9ecef !important;
    box-sizing: border-box !important;
    clear: both;
}

/* 2. KATEGOORIA KAART - MUUDETUD 3 PEALE */
body#category .subcategory-item {
    background: #ffffff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 10px !important;
    padding: 12px 4px !important; 
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
    transition: all 0.3s ease !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    
    /* 3 KASTI LAIUS (100 / 3 = 33.33) */
    flex: 0 0 calc(20% - 12px) !important; 
    
    min-width: 140px !important; 
    max-width: 400px !important; /* Tõstsin seda, et 3tk täidaksid ekraani ära */
    
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 7. MOBIIL JA TAHVEL PARANDUS */
/* Eemalda või muuda ka see rida kohe peale eelmist plokki, et 1200px juures ei hüppaks 4 peale */
@media (max-width: 1200px) {
    body#category .subcategory-item { flex: 0 0 calc(33.33% - 12px) !important; }
}

/* 3. PILDI KONTEINER - MUUDETUD RUUDUKS */
body#category .subcategory-img-wrapper {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* See teeb konteinerist täpse ruudu */
    height: auto !important;         /* Eemaldame fikseeritud kõrguse */
    overflow: hidden !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body#category .custom-cover-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}

/* 4. PEALKIRI */
body#category .subcategory-title {
    color: #2c7d91 !important; 
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    
    letter-spacing: -0.5px !important; 
    
    /* --- POOLITAMISE REEGLID --- */
    word-break: break-word !important; 
    overflow-wrap: break-word !important; 
    hyphens: auto !important;
    
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    
    border-top: 1px solid #f0f0f0 !important; 
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    line-height: 1.2 !important;
}

/* 5. HOVER */
body#category .subcategory-item:hover {
    border-color: var(--brand-hover-mustard) !important; 
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 15px rgba(33, 158, 188, 0.2) !important;
    z-index: 10;
}

body#category .subcategory-item:hover .subcategory-title {
    color: var(--brand-hover-mustard) !important;
    border-top-color: var(--brand-hover-mustard) !important; 
}

/* 6. LINK */
.subcategory-link, .subcategory-link:hover {
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

/* 7. MOBIIL JA TAHVEL */
@media (max-width: 1200px) {
    body#category .subcategory-item { flex: 0 0 calc(25% - 12px) !important; }
}

@media (max-width: 991px) {
    body#category .subcategory-item { flex: 0 0 calc(33.33% - 12px) !important; }
}

@media (max-width: 767px) {
    body#category .subcategories-grid { 
        padding: 10px !important; 
        gap: 8px !important; 
    }
    body#category .subcategory-item { 
        flex: 0 0 calc(50% - 6px) !important; 
        min-width: 0 !important;
        padding: 10px 2px !important; 
    }
    
    /* --- SIIN ON MUUDATUS --- */
    body#category .subcategory-title {
        font-size: 13px !important; /* SUURENDATUD (oli 0.75rem ehk ~12px) */
        margin-top: 8px !important;
        padding-top: 8px !important;
    }
}
/* ==========================================================
   VASAKU TULBA (SIDEBAR) PARANDUS
   Pikad nimed, reavahed ja kattuvus ikooniga
   ========================================================== */

/* 1. KATEGOORIA NIMI */
#left-column .block-categories .category-sub-menu li a {
    font-size: 13px !important;       /* Teeme kirja grammi võrra väiksemaks (oli u 14px) */
    line-height: 1.4 !important;      /* Anname ridadele õhku, et need ei oleks pusas */
    
    padding-right: 30px !important;   /* KRIITILINE: Jätame paremale 30px tühja ruumi pluss-märgi jaoks */
    padding-top: 5px !important;      /* Natuke ruumi üles */
    padding-bottom: 5px !important;   /* Natuke ruumi alla */
    
    display: block !important;        /* Käitub nagu plokk, et padding töötaks */
    white-space: normal !important;   /* Lubab tekstil minna mitmele reale */
    width: 100% !important;           /* Kasutab kogu vaba ruumi */
    box-sizing: border-box !important; /* Padding ei lõhu laiust */
}

/* 2. PLUSS/MIINUS MÄRGI POSITSIOON */
/* Veendume, et ikoon püsiks kindlalt paremas servas ega sõidaks tekstile sisse */
#left-column .block-categories .collapse-icons {
    position: absolute !important;
    right: 0 !important;
    top: 5px !important; /* Sätime ikooni teksti esimese reaga kohakuti */
    cursor: pointer !important;
    z-index: 10 !important;
}

/* 3. MENÜÜ REA KONTEINER */
/* Vajalik, et 'absolute' ikoon püsiks õige rea sees */
#left-column .block-categories .category-sub-menu li {
    position: relative !important;
    margin-bottom: 2px !important; /* Väike vahe iga kategooria vahele */
}

/* 4. AKTIIVNE KATEGOORIA (Bold) */
/* Kui oled selles kategoorias, on tekst paks */
#left-column .block-categories .category-sub-menu li a.active {
    font-weight: 700 !important;
    color: var(--brand-petrol) !important; /* Sinu Petrol toon */
}
/* ============================================================
   1. ÜLDINE DISAIN (ARVUTI JA AVALEHT)
   ============================================================ */

/* Suure mooduli konteiner */
.ets_block_latest {
    background-color: #F3F2ED !important;
    padding: 40px 20px 20px 20px !important;
    border-radius: 20px;
    margin: 30px 0 !important;
    overflow: hidden;
    position: relative;
}

/* Pealkiri "BLOGI" */
.ets_block_latest .title_blog {
    margin-bottom: 25px !important;
    padding-left: 10px;
    font-size: 20px;
    text-transform: uppercase;
    color: #0A1214;
    font-weight: 700;
}

/* --- TERVE KAST KLIKITAVAKS --- */
.ets_block_latest .owl-item li {
    background-color: #ffffff;
    border: 2px solid var(--brand-border, #ebebeb);
    border-radius: 15px; 
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    transition: all 0.3s ease;
    position: relative !important;
}

/* Klikitav kiht */
.ets_block_latest .ets_item_img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
}

/* Tõstame tekstid kihina kõrgemale */
.ets_block_latest .ets_title_block,
.ets_block_latest .read_more,
.ets_block_latest .blog_description,
.view_all_link { 
    position: relative;
    z-index: 2;
    pointer-events: none; 
}

/* Nupud peavad olema ise klikitavad */
.view_all_link, .read_more, .btn {
     pointer-events: auto !important;
}

/* Hover efekt - Tumedam sinine (Petrol) */
.ets_block_latest .owl-item li:hover {
    border-color: #084C66 !important; 
    box-shadow: 0 10px 20px rgba(0, 69, 84, 0.15);
    transform: translateY(-5px);
}

/* --- PILTIDE SEADISTUS (SIRGED NURGAD) --- */
.ets_block_latest .ets_item_img {
    height: 180px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    margin-bottom: 15px;
    flex-shrink: 0;
    padding: 0 !important;
    overflow: hidden;
}

.ets_block_latest .ets_item_img img {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border-radius: 0 !important;
}

/* Tekstid */
.ets_block_latest .ets_title_block {
    color: var(--brand-petrol) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin-bottom: 10px !important;
    line-height: 1.3;
}

.ets_block_latest .read_more {
    color: var(--brand-petrol) !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    margin-top: auto !important;
    display: block;
    width: 100%;
}

/* Lingi hover - Tumedam sinine */
.ets_block_latest .read_more:hover {
    color: #063D52 !important; 
}

/* Tehnilised parandused */
.ets_block_latest .owl-stage { display: flex !important; padding: 10px 0 20px 0; }
.ets_block_latest .owl-item { display: flex !important; flex: 1 0 auto; padding: 0 10px !important; }
.ets_block_latest .ets-blog-latest-post-content { display: flex !important; flex-direction: column !important; flex-grow: 1 !important; }
.ets_block_latest .blog_description { margin-bottom: 15px; flex-grow: 1; }


/* ============================================================
   2. NUPUD JA OTSING (PETROL VÄRV)
   ============================================================ */

.view_all_link, 
.ets_block_search .btn {
    background-color: var(--brand-petrol) !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    border: none !important;
    padding: 10px 15px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
    font-size: 12px !important;
    transition: background-color 0.3s ease;
}

/* Nupu hover - Tumedam sinine */
.view_all_link:hover, 
.ets_block_search .btn:hover {
    background-color: #084C66 !important;
    color: #ffffff !important;
}

.ets_block_search input[type="text"] {
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 10px !important;
    height: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-bottom: 5px !important;
}


/* ============================================================
   3. VASAKU TULBA (SIDEBAR) PARANDUS ARVUTIS
   ============================================================ */

@media (min-width: 992px) {
    
    /* Disainime ilusa sidebar-vaate ainult seal, kus see töötab (Kategooriad) */
    
    #left_column .ets_block_latest,
    #right_column .ets_block_latest {
        padding: 15px !important;
        margin: 0 0 20px 0 !important;
        background-color: #F3F2ED !important;
        border-radius: 15px !important;
        border: none !important;
    }

    /* Pildi suurus sidebaris */
    #left_column .ets_item_img {
        height: 140px !important; 
        background-color: transparent !important;
    }

    /* Peidame sidebaris liigse müra */
    #left_column .blog_description, 
    #left_column .read_more, 
    #left_column .owl-nav { 
        display: none !important; 
    }

    /* Pealkiri sidebaris */
    #left_column .ets_title_block {
        font-size: 14px !important;
        text-align: center !important;
        margin-top: 5px !important;
    }
    
    /* Postituse kaart sidebaris */
    #left_column .owl-item li {
        padding: 10px !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    }
}


/* ============================================================
   4. PEIDAME BLOGI KATKISTEL LEHTEDEL (ARVUTI + MOBIIL)
   ============================================================ */
/* See on Sinu soovitud peitmine: kaotame "Uued tooted" jt lehtedelt KÕIK blogiplokid ära */

/* UUED TOOTED */
body#new-products .ets_block_latest,
body#new-products .ets_block_search,
body#new-products .ets_block_archive,       /* See on "EELNEVAD POSTITUSED" */
body#new-products .ets_block_categories,    /* See on "HOOAEG" */

/* ENIM MÜÜDUD */
body#best-sales .ets_block_latest,
body#best-sales .ets_block_search,
body#best-sales .ets_block_archive,
body#best-sales .ets_block_categories,

/* SOODUSHINNAD */
body#prices-drop .ets_block_latest,
body#prices-drop .ets_block_search,
body#prices-drop .ets_block_archive,
body#prices-drop .ets_block_categories {
    display: none !important;
}


/* ============================================================
   5. MOBIILI VAADE - NÄITAME AINULT AVALEHEL
   ============================================================ */

@media (max-width: 991px) {
    
    /* 1. SAMM: Peidame vaikimisi blogi KÕIKJAL mobiilis */
    .ets_block_latest,      /* Piltidega moodul */
    .ets_block_search,      /* Otsing */
    .ets_block_categories,  /* "Hooaeg" */
    .ets_block_archive,     /* "Eelnevad postitused" */
    .ets_block_tags,
    .ets_blog_ltr_mode {
        display: none !important;
    }

    /* 2. SAMM: Teeme erandi AINULT avalehele */
    body#index .ets_block_latest,
    .page_home .ets_block_latest {
        display: block !important;
    }
}
/* ============================================================
   6. TOOTELEHE PARANDUS (BRÄNDI PEITMINE)
   ============================================================ */

.product-manufacturer-footer {
    display: none !important;
}
/* ============================================================
   LISA SEE LÕPPU: TEEB TERVE BLOGI KASTI KLIKITAVAKS
   ============================================================ */

/* 1. Määrame kaardi peamiseks raamiks */
.ets_block_latest .owl-item li {
    position: relative !important;
    cursor: pointer; /* Näitab käekest kasti kohal */
}

/* 2. See on trikk: sunnime pildi enda staatiliseks, 
   et tema sees olev link saaks venida välja kuni kaardi ääreteni */
.ets_block_latest .ets_item_img {
    position: static !important; 
}

/* 3. Venitame pildi lingi nähtamatu kihina üle terve kasti */
.ets_block_latest .ets_item_img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* See kiht katab nüüd tervet kaarti */
}

/* 4. Tõstame "Loe edasi" nupu kihina peale, et see jääks visuaalselt korrektne */
.ets_block_latest .read_more {
    position: relative;
    z-index: 2;
    pointer-events: none; /* Klikk läheb läbi nupu suurele kaardile */
}
/* ============================================================
   LISA SEE LÕPPU: PEIDAB BLOGIPOSTITUSE AUTORI (By Marti S)
   ============================================================ */

.author-block {
    display: none !important;
}
/* ============================================================
   LISA SEE LÕPPU: MOBIILIS BLOGIPOSTITUS LAIEMAKS (SERVAST SERVANI)
   ============================================================ */

@media (max-width: 767px) {
    /* Vähendame blogipostituse konteineri sisemisi ääri */
    body#ets_blog_page .ets-blog-wrapper-detail {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Vähendame ka lehe üldise konteineri ääri, et ruumi maksimeerida */
    body#ets_blog_page .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Kui tekst on ikka liiga kitsas, vähendame veergude polsterdust */
    body#ets_blog_page #content-wrapper .col-xs-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* Peidab "Leave a comment" vormi täielikult kõikides seadmetes */
.ets-blog-wrapper-content .ets_comment_form_blog {
    display: none !important;
}

/* ============================================================
   KATEGOORIATE MENÜÜ MINIMAALNE PARANDUS
   ============================================================ */

/* 1. Ainult peamise kategooria tekst (BEEBITOOTED jne) */
#left-column .block-categories .category-top-menu li > a {
    font-size: 15px !important; /* Veidi väiksem, aga loetav */
    color: var(--brand-petrol) !important; /* MIU Petrol värv */
}

/* 2. Asendame plussmärgi linnukese/noolega (Material Icons) */
#left-column .block-categories .collapse-icons .add::before {
    content: "\e5cf" !important; /* Nool alla (expand_more) */
    font-family: 'Material Icons' !important;
    font-size: 22px !important;
    color: var(--brand-petrol) !important;
    line-height: 1 !important;
}

/* 3. Asendame miinusmärgi, kui menüü on lahti (Material Icons) */
#left-column .block-categories .collapse-icons .remove::before {
    content: "\e5ce" !important; /* Nool üles (expand_less) */
    font-family: 'Material Icons' !important;
    font-size: 22px !important;
    color: var(--brand-petrol) !important;
    line-height: 1 !important;
}

/* Peidame PrestaShopi vaikimisi + ja - tekstid märgi seest */
#left-column .block-categories .collapse-icons i {
    font-size: 0 !important;
    color: transparent !important;
}

/* Peidame vanad tekstid märgi seest (et ei jääks + ja nool segamini) */
#left-column .block-categories .collapse-icons i {
    font-size: 0 !important;
}
@media (min-width: 992px) {
    #mobile_top_menu_wrapper {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }
}
/* ==========================================================
   MIU KIDS: TOODETE GRID (FINAL FIX - PESASTATUD KASTID)
   ========================================================== */

/* 1. VÕRGUSTIK (DESKTOP: 4 TULPA) */
@media (min-width: 1200px) {
    #products .products, 
    .featured-products .products, 
    .category-products .products,
    .product-accessories .products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* 4 TULPA */
        
        /* VAHED: Ridade vahel 30px, külgedel minimaalne 2px */
        row-gap: 30px !important;    
        column-gap: 2px !important;  
        
        margin-top: 20px !important;
        padding: 0 !important;
    }
    
    /* VÄGA TÄHTIS: Tühistame teema vanad laiused */
    #products .products > div, 
    #products .products > article,
    .featured-products .products > div,
    .product-accessories .products > article {
        width: 100% !important; 
        max-width: 100% !important; 
        margin: 0 !important; 
        padding: 0 !important; 
        flex: 0 0 100% !important;
    }
}

/* 2. SÜLEARVUTID (992px - 1199px) -> 4 TULPA (Kitsam vahe) */
@media (min-width: 992px) and (max-width: 1199px) {
    #products .products, .featured-products .products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 10px !important;
    }
}

/* 3. MOBIIL JA TAHVEL (Alla 991px) -> 2 TULPA */
@media (max-width: 991px) {
    #products .products, 
    .featured-products .products,
    .category-products .products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 2 TULPA */
        
        row-gap: 15px !important;
        column-gap: 4px !important; 
        
        margin-top: 15px !important;
    }
    
    #products .products > div, .featured-products .products > div {
        width: 100% !important; padding: 0 !important;
    }
}

/* ==========================================================
   MIU KIDS: FINAL FIX V7 (SUUREM PILT + NIMI JA HIND KOOS PÕHJAS)
   ========================================================== */

/* 1. VÕRGUSTIK (GRID) */
@media (min-width: 1200px) {
    #products .products, 
    .featured-products .products, 
    .category-products .products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 12px !important; 
        margin-top: 30px !important;
        padding: 0 !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #products .products, .featured-products .products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; 
        gap: 10px !important;
    }
}
@media (max-width: 991px) {
    #products .products, .featured-products .products, .category-products .products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 8px !important; 
        margin-top: 15px !important;
    }
}

/* --- KRIITILINE: SUURUSTE BETONEERIMINE --- */
#products .products > div, 
#products .products > article,
.featured-products .products > div,
.category-products .products > div {
    width: 100% !important;      
    min-width: 100% !important;  
    max-width: 100% !important;
    grid-column: span 1 !important; 
    margin: 0 !important;        
    padding: 0 !important; 
    flex: 0 0 100% !important;   
    float: none !important;      
}

/* 2. TOOTEKAARDI SISEMINE PAIGUTUS */

.products article.product-miniature {
    /* MUUDATUS: Kast on nüüd piisavalt kõrge (420px), et pilt ja tekst mahuksid ära */
    height: 420px !important; 
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.product-miniature .thumbnail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-grow: 1 !important;
    position: static !important;
}

/* A) PILDI ÜMBRIS (SUURENDATUD) */
.product-miniature .thumbnail-top {
    /* MUUDATUS: Andsime pildile rohkem ruumi (220px -> 260px) */
    flex: 0 0 260px !important; 
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 10px !important; 
    overflow: hidden !important;
    position: relative !important;
}

.product-miniature .thumbnail-top img {
    /* Pilt saab nüüd olla suurem ilma, et tausta taha peitu jääks */
    max-height: 240px !important; 
    max-width: 95% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* B) SISU ALA (NIMI JA HIND KOKKU LÜKATUD) */
.product-miniature .product-description {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    width: 100% !important;
    padding: 5px 10px !important;
    background: transparent !important;
    
    /* MUUDATUS: See lükkab nime ja hinna kasti põhja kokku */
    justify-content: flex-end !important; 
    
    position: static !important;
}

/* TOOTE NIMI */
.product-miniature .product-title {
    width: 100% !important;
    text-align: center !important;
    
    /* MUUDATUS: Väike vahe hinna kohal, et nad oleksid koos */
    margin-top: 0 !important; 
    margin-bottom: 5px !important;
}

/* Hind (Põhjas) */
.product-miniature .product-price-and-shipping {
    /* MUUDATUS: Eemaldasime margin-top: auto, et nimi ja hind ei läheks lahku */
    margin-top: 0 !important;
    text-align: center !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    display: block !important;
}

/* 3. KIIRVAADE */
.product-miniature .quick-view {
    display: block !important;
    position: absolute !important;
    top: 130px !important; /* Pildi keskel */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100 !important;
    opacity: 0; 
    visibility: hidden;
    transition: all 0.2s ease !important;
}
.products article.product-miniature:hover .quick-view {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. SILTIDE (UUS) DISAIN */
.product-miniature .product-flags {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    pointer-events: none !important;
}

.product-miniature .product-flags li.product-flag {
    margin: 0 0 5px 0 !important;
    display: flex !important;      
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important; 
    padding: 4px 8px !important;   
    border-radius: 4px !important; 
    font-size: 11px !important;    
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1 !important;     
    text-align: center !important;
}

.product-miniature .highlighted-informations {
    display: none !important;
}
#js-product-list-header .category-cover {
    display: none;
}
/* Sunnib bold teksti olema tume ja paks */
strong, b {
    font-weight: bold !important;
    color: #212121 !important; /* Võid siia panna ka #000000, kui tahad täismusta */
}
@media (max-width: 767px) {
    #category-description {
        display: none !important;
    }
}
/* Rakendame muudatused AINULT arvutivaates (desktop) */
@media (min-width: 992px) {
    
    /* 1. Menüü algseis - tekst on paigal, aga kardin on ees */
    .header-top .top-menu .sub-menu, 
    .header-top .menu-dropdown {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        
        /* "Kardin" on täiesti üleval kinni */
        clip-path: inset(0 0 100% 0); 
        
        /* Väike nihe ülespoole, et tekiks kukkumise efekt ilma venitamata */
        transform: translateY(-5px);
        
        /* Ülikiire üleminek (0.2 sekundit) */
        transition: 
            clip-path 0.2s ease-out, 
            transform 0.2s ease-out, 
            opacity 0.15s linear !important;
        
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        z-index: 999;
    }

    /* 2. Menüü avanemine - kardin rullub alla, tekst ei veni */
    .header-top .top-menu .category:hover > .sub-menu,
    .header-top .top-menu .category:hover > .menu-dropdown {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        
        /* Kardin avaneb täielikult */
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
        
        /* Väike turvaviivitus (80ms), et hiirega üle libistades ei tõmbleks */
        transition-delay: 80ms !important;
    }

    /* 3. Menüü sulgumine - kaob sekundipealt */
    .header-top .top-menu .category > .sub-menu {
        transition-delay: 0s !important;
        transition: opacity 0.1s linear, clip-path 0.1s ease-in !important;
    }

    /* Tagame, et sisu ei hüppaks rullimise ajal */
    .header-top .top-menu .sub-menu * {
        transform: none !important; 
    }
}

/* Mobiilivaate parandus - igaks juhuks nullime üleliigse, kui teema on kangekaelne */
@media (max-width: 991px) {
    .header-top .top-menu .sub-menu {
        clip-path: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible;
    }
}

/* ==========================================================================
   OSTUKORVI HÜPIKAKNA MUUTMINE VÄIKESEKS "TOAST" TEAVITUSEKS (PARANDATUD)
   ========================================================================== */

/* 1. Peidame algse Bootstrap eraldiseisva tausta */
.modal-backdrop { display: none !important; }

/* UUS: TAASTAME tumeda tausta kõikidele TEISTELE hüpikakendele (toote pildi zoom jne), andes neile endale tumeda värvi */
.modal:not(#blockcart-modal) {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* UUS: Lubame lehel taustal kerida AINULT ostukorvi teavituse ajal. 
   Pildi suumimisel jääb leht korrektselt paigale lukku. */
body:has(#blockcart-modal.show),
body:has(#blockcart-modal.in) { 
    overflow: auto !important; 
    padding-right: 0 !important; 
}

/* 2. Eemaldame ostukorvi modalilt blokeerimise, et klient saaks taustal edasi klikkida/kerida */
#blockcart-modal {
    background: transparent !important;
    pointer-events: none !important; 
    z-index: 99999 !important;
}

/* 3. Paigutame valge kasti üles paremale nurka */
#blockcart-modal .modal-dialog {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    margin: 0 !important;
    width: 320px !important;
    max-width: 90vw !important;
    pointer-events: auto !important; /* Kasti ennast saab vajutada */
    
    /* Animatsioon: kast libiseb ekraanile väljastpoolt */
    transform: translateX(120%) !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#blockcart-modal.show .modal-dialog,
#blockcart-modal.in .modal-dialog {
    transform: translateX(0) !important;
}

/* 4. Vormindame sisu puhtaks ja pisikeseks */
#blockcart-modal .modal-content {
    border-radius: 8px !important;
    border: 1px solid #ebebeb !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
}

#blockcart-modal .modal-header {
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 12px 15px !important;
    background: #fff !important;
}

/* "Toode lisatud" tekst roheliseks ja väiksemaks */
#blockcart-modal .modal-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #28a745 !important; 
    display: flex !important;
    align-items: center !important;
}
#blockcart-modal .modal-title i {
    margin-right: 8px !important;
    font-size: 18px !important;
}

#blockcart-modal .modal-body {
    padding: 15px !important;
    background: #fff !important;
}

/* 5. PEIDAME KOGU PAREMAPOOLSE BLOKI (summad, maksud ja tüütud nupud) */
#blockcart-modal .modal-body > .row > div:nth-child(2) {
    display: none !important;
}

/* Teeme vasakpoolse (toote pildi ja nime osa) täislaiuseks */
#blockcart-modal .modal-body > .row > div:nth-child(1) {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-right: none !important;
}

/* Kohandame toote pildi ja teksti asukohta teavituses */
#blockcart-modal .product-name {
    font-size: 14px !important;
    margin-bottom: 5px !important;
}
#blockcart-modal .product-price {
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--brand-red) !important;
}

/* ==========================================================================
   OSTUKORVI TEAVITUSE (TOAST) MOBIILI KOMPAKTNE VAADE
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Kasti positsioon: ülal ääres, pisikese vahega */
    #blockcart-modal .modal-dialog {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        margin: 0 !important;
    }
    
    /* 2. Teeme vahed (paddingud) väiksemaks */
    #blockcart-modal .modal-header {
        padding: 8px 12px !important;
    }
    #blockcart-modal .modal-title {
        font-size: 12px !important;
    }
    #blockcart-modal .modal-title i {
        font-size: 16px !important;
    }
    #blockcart-modal .modal-body {
        padding: 10px !important;
    }
    
    /* 3. Pilt ja tekst: Sunnime nad flexboxiga kõrvuti! */
    #blockcart-modal .modal-body > .row > div:nth-child(1) > .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        margin: 0 !important;
    }
    
    /* Pildi konteiner */
    #blockcart-modal .modal-body > .row > div:nth-child(1) > .row > div:nth-child(1) {
        flex: 0 0 70px !important; /* Anname pildile täpselt 70px ruumi */
        max-width: 70px !important;
        padding: 0 10px 0 0 !important;
    }
    
    /* PILT ISE - Teeme hästi pisikeseks! */
    #blockcart-modal .modal-body img.product-image {
        width: 100% !important;
        max-width: 60px !important;
        max-height: 60px !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }
    
    /* Teksti konteiner */
    #blockcart-modal .modal-body > .row > div:nth-child(1) > .row > div:nth-child(2) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }
    
    /* Tekstid kompaktsemaks */
    #blockcart-modal .product-name {
        font-size: 13px !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }
    #blockcart-modal .product-price {
        font-size: 15px !important;
        margin: 0 !important;
    }
}
/* ==========================================================================
   MIU KIDS: STOCK STATUS BADGE (FORCE DISPLAY)
   ========================================================================== */

/* Sunnime konteineri positsiooni */
.thumbnail-top {
    position: relative !important;
}

.miu-stock-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    display: flex !important; /* Sunnib nähtavale, isegi kui parent on peidus */
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important; /* Kõige pealmine kiht */
    
    background: #ffffff !important;
    padding: 5px 12px !important;
    border-radius: 25px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
    
    /* Teksti stiil - Mulish font (sinu CSS-ist) */
    font-family: 'Mulish', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #333 !important;
    white-space: nowrap !important;
}

/* Täpi disain */
.miu-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    margin-right: 8px !important;
    display: inline-block !important;
}

.miu-green { 
    background-color: #28a745 !important; 
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.2) !important;
}

.miu-red { 
    background-color: #dc3545 !important; 
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

/* Mobiili kohandus, et ei oleks pildi peal liiga suur */
@media (max-width: 767px) {
    .miu-stock-badge {
        top: 8px !important;
        right: 8px !important;
        padding: 4px 8px !important;
        font-size: 9px !important;
    }
}
/* Eemaldame igasugused tühjad "ghost" kastid nurgast */
.miu-stock-badge:empty {
    display: none !important;
}

/* Uute märkide positsioneerimine */
.thumbnail-top {
    position: relative !important;
}

.miu-stock-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 10 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #414141 !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    border: 1px solid #f0f0f0 !important;
    letter-spacing: 0.2px;
}

/* Täpi stiil */
.miu-dot {
    height: 8px !important;
    width: 8px !important;
    border-radius: 50% !important;
    margin-right: 6px !important;
    display: inline-block !important;
}

.dot-green {
    background-color: #28a745 !important;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
}

.dot-red {
    background-color: #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

/* Kui su teemal on seal mingi vaikimisi tühi nupp, siis see peidab selle */
.thumbnail-top .some-default-class-that-might-be-empty {
    display: none;
}
/* =========================================
   KÜLJEMENÜÜ NOOLTE JOONDAMINE 
   ========================================= */
@media (min-width: 992px) {
    #left-column .block-categories .category-sub-menu li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

    #left-column .block-categories .category-sub-menu li > a {
        flex: 1; /* Tekst võtab maksimaalselt vaba ruumi */
        max-width: calc(100% - 25px); /* Jätab noolele alati kindla ruumi */
        word-break: break-word; /* Väga pikkade sõnade puhul murrab teksti korrektselt */
    }

    #left-column .block-categories .category-sub-menu li > .arrows {
        flex: 0 0 20px; /* Noolte ala on fikseeritud laiusega */
        text-align: right;
        display: flex;
        justify-content: flex-end;
    }

    /* Animatsiooni hetke ja avatud menüü täislaius */
    #left-column .block-categories .category-sub-menu li > .collapse,
    #left-column .block-categories .category-sub-menu li > .collapsing {
        flex: 0 0 100%; /* Alammenüü langeb uuele reale ja võtab kogu laiuse */
        width: 100%; /* Sunnime animatsiooni ajal hoidma täislaiust */
    }
}

/* =========================================
   KATEGOORIA KIRJELDUSE PEITMINE JA NUPP 
   ========================================= */

/* Parandame konteineri käitumise, et nupp saaks teksti alla minna */
.block-category-inner {
    flex-wrap: wrap; 
}

/* Piirame kategooria kirjelduse kõrgust */
#category-description {
    position: relative;
    max-height: 160px; /* Muuda seda numbrit, et näidata 7-8 rida */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
}

/* See klass lisatakse JavaScriptiga, kui nuppu vajutatakse */
#category-description.is-expanded {
    max-height: 2000px; /* Piisavalt suur number, et kogu tekst ära mahuks */
}

/* Eemaldame kirjelduse viimase tekstilõigu alumise tühimiku */
#category-description p:last-child {
    margin-bottom: 0 !important; 
}

/* Loome sujuva hajutuse teksti allaossa AINULT siis, kui tekst on pikk (has-read-more) */
#category-description.has-read-more::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Peidame hajutuse, kui tekst on avatud */
#category-description.has-read-more.is-expanded::after {
    opacity: 0;
}

/* Uus, ilma raamita ja veel õhulisem nupu stiil */
.btn-read-more-cat {
    flex-basis: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 5px 0 0 0; /* MUUDETUD: Oli 10px, toob nupu tekstile lähemale */
    padding: 5px 0; /* MUUDETUD: Oli 10px, teeb nupu ala madalamaks */
    background-color: transparent !important;
    color: #888888 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2.5px;
    transition: all 0.3s ease;
}

/* Joonistame noole teksti alla */
.btn-read-more-cat::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin-top: 4px; /* MUUDETUD: Oli 8px, toob noole tekstile lähemale */
    border-right: 1px solid #888888;
    border-bottom: 1px solid #888888;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

/* Kui tekst on avatud (is-expanded klass on aktiivne), pöörame noole üles! */
#category-description.is-expanded + .btn-read-more-cat::after {
    transform: rotate(225deg);
    margin-top: 8px; /* MUUDETUD: Oli 12px */
}

/* Avatud oleku hover - nool teeb väikese jõnksu ülespoole */
#category-description.is-expanded + .btn-read-more-cat:hover::after {
    transform: rotate(225deg) translate(2px, 2px);
}

/* =========================================
   KATEGOORIA PEALKIRJA JA SEO-TEKSTI STIILID (LÕPLIK)
   ========================================= */

/* 1. Üldine pealkirja ja teksti ümbris */
#js-product-list-header {
    margin-bottom: 25px !important; 
}

#js-product-list-header .block-category {
    min-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    text-align: center !important; /* Hoiab pealkirja keskel */
    background: transparent !important;
    border: none !important;
}

/* 2. PEALKIRI (H1) */
#js-product-list-header h1.h1 {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
    display: block !important;
    width: 100% !important;
}

/* 3. SEO-TEKSTI ÜMBRIS (Vasakule, väiksem, loetav) */
#js-product-list-header .block-category-inner {
    padding-bottom: 10px !important;
    text-align: left !important;       /* Tekst vasakule */
    font-size: 0.9rem !important;      /* Loetav suurus */
    line-height: 1.6 !important;       /* Suurem reavahe */
    max-width: 1100px !important;      /* Piirame laiust */
    margin: 0 auto !important;         /* Tsentreerib tekstiploki */
}

/* Tagame, et kõik lõigud teksti sees on sama stiiliga */
#js-product-list-header .block-category-inner p,
#js-product-list-header .block-category-inner span,
#js-product-list-header .block-category-inner div {
    text-align: left !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #4A4A4A !important;         
}

/* Tekstisisesed alampealkirjad */
#js-product-list-header .block-category-inner h2,
#js-product-list-header .block-category-inner h3 {
    text-align: left !important;
    font-size: 1.05rem !important;     
    font-weight: 700 !important;
    color: var(--brand-dark) !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
}

/* 4. Alamkategooriate hall "saar" */
body#category .subcategories-grid {
    margin-top: 10px !important;     
    padding-top: 15px !important;
}

/* 5. Leivapuru (breadcrumb) ja külgriba kindlustus */
.breadcrumb {
    padding: 5px 0 0 0 !important;    
    margin-bottom: 2px !important;    
    text-align: left !important;      
}

#left-column {
    margin-top: 0 !important;
}

/* ==========================================================================
   CMS LEHTEDE (Privaatsus, Tingimused jne) LAIUSE JA SERVADE KORRIGEERIMINE
   ========================================================================== */

/* 1. Kirjutame üle tekstiredaktorisse pandud 850px ja 20px paddingu piirangu */
body#cms .rte > div,
body#cms .cms-content > div,
body#cms .page-cms > div,
body#cms [style*="max-width: 850px"] {
    max-width: 100% !important; /* Laseb kasti täislaiusesse */
    padding-left: 0 !important; /* Eemaldab sisemise tühimiku vasakult */
    padding-right: 0 !important; /* Eemaldab sisemise tühimiku paremalt */
}

/* 2. ARVUTIVAADE (Umbes 1-2cm ehk ~40px servad, mõnus lugemislaius) */
@media (min-width: 992px) {
    /* Anname külgedele korraliku 40px (umbes 1.5cm) hingamisruumi */
    body#cms #content-wrapper,
    body#cms .container {
        padding-left: 40px !important;
        padding-right: 40px !important;
        box-sizing: border-box !important;
    }
    
    /* Piirame teksti laiuse 1100px peale, et väga laiadel ekraanidel 
       ei veniks read liiga pikaks, ja tsentreerime (margin: 0 auto) */
    body#cms .rte > div,
    body#cms .cms-content > div {
        max-width: 1100px !important; 
        margin: 0 auto !important;
    }
}

/* 3. MOBIILIVAADE (Viisakas ~4mm servast servani hingamisruum) */
@media (max-width: 767px) {
    /* Lisame konteinerile sobiva 15px serva */
    body#cms #content-wrapper,
    body#cms .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important; /* Tagab, et padding ei aja ekraani laiaks */
    }
    
    /* Sisemised kihid hoiame nullis, et serv ei topelduks */
    body#cms .page-content,
    body#cms .cms-content,
    body#cms .rte {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
/* ==========================================================================
   TOOTELEHE ALLOSA "SAMAS KATEGOORIAS" TEKSTI ASENDAMINE (PARANDATUD)
   ========================================================================== */

/* Sihime AINULT kõige esimest pealkirja (märk > on siin kriitiline!) */
body#product .featured-products > h2 {
    font-size: 0 !important; 
    text-transform: none !important;
    text-align: left !important;
    margin-bottom: 25px !important;
}

/* Kuvame uue teksti pseudo-elemendina */
body#product .featured-products > h2::before {
    content: "Sulle võib ka meeldida:";
    font-size: 20px !important;
    color: #0A1214 !important; 
    font-weight: 800 !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}

@media (min-width: 768px) {
    /* Sihime kogu valget kasti, kui selles puudub kirjeldus (või on see tühi) */
    .block-category:not(:has(#category-description)),
    .block-category:has(#category-description:empty),
    .block-category:has(#category-description > p:only-child:empty) {
        min-height: auto !important; 
        padding-bottom: 15px !important; 
        margin-bottom: 1rem !important; 
    }

    /* Eemaldame pealkirja enda alumise tühimiku, et see kasti ei venitaks */
    .block-category:not(:has(#category-description)) h1,
    .block-category:has(#category-description:empty) h1,
    .block-category:has(#category-description > p:only-child:empty) h1 {
        margin-bottom: 0 !important;
    }
    
    /* Peidame ka tühja sisukonteineri igaks juhuks */
    .block-category:has(#category-description:empty) .block-category-inner,
    .block-category:has(#category-description > p:only-child:empty) .block-category-inner {
        display: none !important;
    }
}

/* ==========================================================================
   TOOTELEHE TARNEINFO BOX (UUS, IDENTNE ÜLEMISEGA)
   ========================================================================== */
.product-delivery-methods-box {
    display: flex !important;
    align-items: center !important;
    background-color: var(--brand-light-mustard) !important; /* Sama hele taust nagu ülemisel */
    border: 1px solid var(--brand-border) !important; /* Sama sinepi äär */
    border-radius: 8px !important; /* Sama 8px ümarus */
    padding: 12px 15px !important; /* Sama sisemine ruum */
    margin-top: 10px !important;
    
    /* VÄGA OLULINE: Hoiab kasti sama laia kui ülemine! */
    width: calc(100% - 15px) !important; 
    max-width: calc(100% - 15px) !important;
    box-sizing: border-box !important;
}

.product-delivery-methods-box ul {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.product-delivery-methods-box li {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    font-size: 14px !important; /* Sama fondi suurus */
    font-weight: 700 !important; /* Sama paksusega kiri (bold) */
    color: var(--brand-dark) !important; /* Sama tume tekst */
}

.product-delivery-methods-box li:last-child {
    margin-bottom: 0 !important;
}

/* Ikoonide stiil - sama, mis ülemisel kastil */
.product-delivery-methods-box i.material-icons {
    color: var(--brand-petrol) !important; /* Petrol värv, nagu ülemisel kellal/veoautol */
    margin-right: 10px !important;
    font-size: 20px !important;
    margin-top: -2px !important;
}
/* Muudab kasti ja kõik selle sees olevad tekstid peenemaks ja heledamaks halliks */
.product-delivery-methods-box,
.product-delivery-methods-box * {
    font-weight: normal !important; 
    color: #666666 !important; 
    font-size: 14px !important;
}

/* Teeme ees olevad ikoonid ka natuke tagasihoidlikumaks */
.product-delivery-methods-box i {
    color: #999999 !important;
}
/* Sunnime kasti lubama elementidel uuele reale minna */
.product-delivery-methods-box {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Eemaldame nimekirjalt algsed täpid ja liigsed tühimikud */
.product-delivery-methods-box ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
}

/* Flexbox aitab lükata nime vasakule ja hinna paremale */
.product-delivery-methods-box li {
    display: flex !important;
    justify-content: space-between !important; /* See lükkabki hinna paremale serva */
    align-items: center !important;
    margin-bottom: 8px !important; /* Väike vahe ridade vahel */
    color: #666666; /* Teeb teksti leebemaks halliks */
    font-weight: normal;
}

/* Hoiame ikooni ja teksti ilusti koos */
.delivery-name {
    display: flex;
    align-items: center;
    gap: 8px; /* Tekitab väikese vahe ikooni ja teksti vahele */
}

/* Teeme ikoonid veidi tagasihoidlikumaks */
.delivery-name i {
    color: #999999;
}

/* Soovi korral võid hinna teha pisut paksemaks, et see paremini eristuks */
.delivery-price {
    font-weight: 600;
}

/* Tasuta transpordi teate ilus kujundus */
.free-shipping-notice {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #cccccc !important; /* Õrn katkendlik eraldusjoon */
    color: #27ae60 !important; /* Ilus positiivne roheline toon */
    font-weight: 600 !important; /* Teeb teksti veidi paksemaks */
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Hoiab teksti kenasti vasakul */
    gap: 8px !important;
    width: 100% !important;
}

/* Teeme ees oleva linnukese ikooni ka roheliseks ja sobiva suurusega */
.free-shipping-notice i {
    color: #27ae60 !important;
    font-size: 20px !important;
}

/* ==========================================================================
   FIX V4: MENÜÜ TÄISLAIUSE LÕPLIK BETONEERIMINE JA TÜHIMIKU KAOTAMINE
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Kogu menüüriba (kõige laiem kast) on ainus ja peamine ankur */
    #_desktop_top_menu {
        position: relative !important;
    }

    /* 2. LÖÖME PURUKS üksikute linkide ankrud! */
    #_desktop_top_menu ul,
    #_desktop_top_menu li,
    #_desktop_top_menu .category,
    .top-menu[data-depth="0"] > li {
        position: static !important;
    }

    /* 3. SUURENDAME LINGI TABAMISALA: Lükkame sinepikarva joone veidi allapoole. 
       See loob hiirele naturaalse ja turvalise silla rippmenüüni. */
    .top-menu .category > a {
        padding-bottom: 15px !important; /* See on võti! Hiir ei kuku enam tühjusesse. */
    }

    /* 4. Rippmenüü algab TÄPSELT lingi tabamisala (ja sinepikarva joone) alt */
    #_desktop_top_menu .sub-menu,
    #_desktop_top_menu .popover,
    .header-top .top-menu .sub-menu {
        position: absolute !important;
        top: auto !important;
        margin-top: 0 !important; /* EEMALDATUD 20px - enam ei ole menüü liiga kaugel! */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 99999 !important;
    }
}

/* ==========================================================================
   KOMPAKTNE MENÜÜ: Vähendame õhku ridade ja sõnade ümbert
   ========================================================================== */
@media (min-width: 992px) {
    /* 1. Kaotame flex-konteineri ja listielementide vahelise liigse õhu */
    #_desktop_top_menu .top-menu[data-depth="0"] {
        gap: 0px 20px !important; /* Ülevalt/alt 0px, külgedelt jätsime 20px */
    }

    #_desktop_top_menu .top-menu[data-depth="0"] > li {
        margin: 0 !important; /* Nullime eelmise 5px margin'i */
    }

    /* 2. Teeme teksti peal ja all oleva ruumi poole õhemaks */
    #_desktop_top_menu .top-menu[data-depth="0"] > li > a,
    .top-menu .category > a {
        padding-top: 5px !important;     /* Hoiab pealt puhtana */
        padding-bottom: 10px !important; /* Turvasild on nüüd 10px (oli 15px) */
        line-height: 1.2 !important;
    }
}

/* ==========================================================================
   TOOTEVAATE FIX V2: LÜKKAME TARNEINFO KASTI ALLAPOOLE
   ========================================================================== */

/* Sihime tarneinfo kasti (Kohe laos) */
#product-availability {
    margin-top: 25px !important; /* Tekitab nupu alla 25px vahet */
    clear: both !important;      /* Sunnib kasti uuele reale, nupust eemale */
    display: block !important;
}

/* Sihime ka transpordimeetodite kasti, et see liiga ligi ei roniks */
.product-delivery-methods-box {
    margin-top: 15px !important;
}

/* ==========================================================
   PEALEHE TOOTEGRID (6 TOODET KÕRVUTI: POPULAARSED, UUED JNE)
   ========================================================== */

/* 1. DESKTOP (Suured ekraanid) - 6 TOODET */
@media (min-width: 1200px) {
    /* Targetime pealehe toote-sektsioone */
    #index .featured-products .products, 
    #index .new-products .products,
    #index .on-sale-products .products,
    #index .product-accessories .products {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important; /* 6 VÕRDSET TULPA */
        gap: 12px !important; /* Vahe toodete vahel */
        width: 100% !important;
    }

    /* Eemaldame artiklitelt vanad laiuse piirangud, et grid saaks ise juhtida */
    #index article.product-miniature {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 10px !important;
    }
}

/* 2. SÜLEARVUTID JA VÄIKSEMAD MONITORID (992px - 1199px) - 4 TOODET */
@media (min-width: 992px) and (max-width: 1199px) {
    #index .featured-products .products, 
    #index .new-products .products {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
}

/* 3. TAHVELARVUTID (768px - 991px) - 3 TOODET */
@media (min-width: 768px) and (max-width: 991px) {
    #index .featured-products .products, 
    #index .new-products .products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* 4. MOBIIL - Hoiame sinu varasemat 2-toote loogikat */
@media (max-width: 767px) {
    #index .featured-products .products, 
    #index .new-products .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px 4px !important;
    }
}

/* ==========================================================
   TSENTREERIMISE KINDLUSTUS (BÄNNERID JA PLOKID KESKELE)
   ========================================================== */

/* 1. Bännerite tsentreerimine (eriti pealehel) */
.banner, 
.banner a, 
.banner img,
#index .banner {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important; /* Tagab, et ei läheks kunagi raamist välja */
    text-align: center !important;
}

/* 2. Kohandatud tekstiblokid ja muud pealehe moodulid */
.custom-text, 
#custom-text, 
.featured-products, 
.new-products {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    text-align: center !important; /* Tsentreerib teksti ploki sees */
}

/* 3. Kui bänneril on taustavärv või see on lingi sees */
a.banner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ==========================================================
   TOOTELEHE PEALKIRJA JA LEIVAPURU PARANDUS
   ========================================================== */

/* 1. Anname TOOTELEHEL leivapurule allapoole tagasi rohkem õhku, 
      ilma et rikuksime kategoorialehte */
body#product .breadcrumb {
    margin-bottom: 25px !important; 
}

/* 2. Toote pealkiri (H1) silmapaistvamaks, aga endiselt õhuliseks */
body#product h1 {
    font-weight: 700 !important;      /* Tõstame paksust (700 on korralik Bold) */
    font-size: 1.5rem !important;     /* Veidi suurem, et eristuks tavatekstist selgelt */
    line-height: 1.3 !important;      /* Hoiame ridade vahel piisavalt õhku */
    letter-spacing: 0.5px !important; /* See hoiab paksud tähed puhtana */
    margin-top: 0 !important;
    margin-bottom: 15px !important;   /* Tekitame pealkirja ja hinna vahele pisikese hingamisruumi */
    color: var(--brand-dark) !important;
}

/* ==========================================================================
   PEAMENÜÜ SERVAST SERVA & RIPPMENÜÜ DÜNAAMILINE PAIGUTUS (AINULT ARVUTIS)
   ========================================================================== */

@media (min-width: 992px) {
    /* 1. PEAMENÜÜ ÜLAOSA (Servast serva) */
    #_desktop_top_menu > ul.top-menu[data-depth="0"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #_desktop_top_menu > ul.top-menu[data-depth="0"] > li {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important; 
    }

    /* 2. RIPPMENÜÜ TULBAD (Mega-menu tsentreeritud ja dünaamiline laiendus) */
    .top-menu .sub-menu ul[data-depth="1"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; 
        flex-wrap: wrap !important; 
        gap: 30px 3% !important; 
        width: 100% !important;
        padding: 30px 2% !important; 
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Tulpade laiuse piiramine, et paigutus püsiks kena */
    .top-menu .sub-menu ul[data-depth="1"] > li {
        flex: 1 1 0% !important; 
        min-width: 125px !important; 
        max-width: 220px !important; 
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Tagame, et linkide loend tulpade sees oleks korrektne */
    .top-menu .sub-menu ul[data-depth="1"] > li > ul {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   MOBIILI MENÜÜ PARANDUS (Tühistame Flexboxi laialivenimise mobiilis)
   ========================================================================== */
@media (max-width: 991px) {
    .top-menu .sub-menu ul[data-depth="1"] {
        display: block !important; /* Tagastame normaalse plokk-kuva */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .top-menu .sub-menu ul[data-depth="1"] > li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        margin-bottom: 15px !important; /* Anname mobiilis kategooriatele veidi õhku */
        float: none !important;
    }
}
/* ============================================================
   KATEGOORIAPUU LOETELU PEITMINE MOBIILIS
   ============================================================ */

/* Peidame tekstilise kategooriapuu loetelu (Esik, Vannituba... VAIBAD) ainult mobiili ja tahvli vaates */
@media (max-width: 991px) {
    /* Tavalised PrestaShopi klassid kategooriapuu loetelule mobiilis */
    /* Võimalik, et tegu on .block-categories klassiga */
    .block-categories,
    /* Või #left_column, kui see asub külgribal, kuid me ei taha peita pealkirja ja leivapuru, seega proovi kõigepealt `.block-categories` */
    #left_column .block-categories,
    /* Või .block-category-tree */
    .block-category-tree {
        display: none !important; /* Peidame täielikult */
    }
}
/* ==========================================================================
   AVALEHE PILTIDE VÕRGUSTIK (SERVAST SERVA + KASTI TÕUSMISE EFEKT + TUMENEMINE)
   ========================================================================== */

/* 1. Tühistame PrestaShopi tekstiploki vaikimisi raamid */
.ps-customtext, 
#custom-text, 
#custom-text .custom-text {
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* 2. Põhiseaded (Arvuti - 6 tulpa) */
.custom-image-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. Linkide ümbris (Kogu kast tõuseb animatsiooniga) */
.custom-image-grid a {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* Täiuslik ruut */
    border-radius: 12px !important;
    overflow: hidden !important; /* Lõikab pildi nurgad ümaraks */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; /* Tavaline vari */
    
    /* SUUR KASTI ANIMATSIOON: Jääb samaks (tõusmine ja vari) */
    transition: transform 0.3s ease, box-shadow 0.3s ease !important; 
}

/* 4. Pilt ise (Lisame siia sujuva tumenemise animatsiooni) */
.custom-image-grid img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    
    /* LISATUD: Paneme pildi heleduse muutuse sujuvalt liikuma */
    transition: filter 0.3s ease !important; 
}

/* 5. HOVER EFEKTID (Hiirega peale minnes) */

/* A) Kogu kast tõuseb ülespoole (Jääb samaks) */
.custom-image-grid a:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important;
}

/* B) LISATUD: Pilt lingi sees tõmbub kergelt tumedamaks */
.custom-image-grid a:hover img {
    filter: brightness(85%) !important; /* 85% heledust teeb pildi õrnalt tumedamaks */
}

/* 6. TAHVELARVUTI (Kuni 1199px) - 4 tulpa */
@media (max-width: 1199px) and (min-width: 768px) {
    .custom-image-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

/* 7. MOBIIL (Kuni 767px) - 2 tulpa */
@media (max-width: 767px) {
    .custom-image-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .custom-image-grid a {
        border-radius: 8px !important;
    }
}

/* ==========================================================================
   KAITSEKILP V4 (PARANDATUD): RIPPMENÜÜ JA KATEGOORIA TEKSTI KATTUMISE VASTU
   ========================================================================== */

/* 1. Eemaldame menüü sulgumise (väljahajumise) animatsiooni. 
      Menüü peab kaduma 0 sekundiga, et vältida poolläbipaistvat kumamist! */
.header-top .top-menu .category > .sub-menu,
.header-top .top-menu .sub-menu {
    transition: none !important; 
    background-color: #ffffff !important; 
}

/* 2. Animatsioon (sujuv avanemine) rakendub AINULT siis, kui hiir on peal */
.header-top .top-menu .category:hover > .sub-menu,
.header-top .top-menu .category:hover > .menu-dropdown {
    transition: clip-path 0.2s ease-out, transform 0.2s ease-out, opacity 0.15s linear !important;
}

/* 3. Surume kategooria kirjelduse kindlalt menüüst madalamale (z-index) */
#js-product-list-header {
    position: relative !important;
    z-index: 1 !important;
}
/* Ühtlustame lühikirjelduse ja pika kirjelduse teksti ning tühistame WYSIWYG sisestatud stiilid */
.product-description-short,
.product-description-short p,
.product-description-short span,
.product-description,
.product-description p,
.product-description span,
.product-description li {
    font-family: inherit !important; /* Säilitab poe põhifondi, väldib uue fondi laadimist ja lehe vilksatamist */
    color: #4a4a4a !important; /* Kena tumehall, mis on silmale parem lugeda kui süsimust */
    line-height: 1.6 !important; /* Õhuline reavahe, parandab loetavust */
    font-size: 15px !important; /* Ühtne teksti suurus */
    background-color: transparent !important; /* Eemaldab kopeerimisel tekkinud taustavärvid */
}

/* Tugevdatud (Bold) tekstile anname õige rõhu ja natuke tumedama tooni */
.product-description strong,
.product-description b,
.product-description-short strong,
.product-description-short b,
.product-description strong span,
.product-description b span {
    font-weight: 600 !important;
    color: #222222 !important;
}

/* Pealkirjad pikas kirjelduses (h1, h2, h3, h4) puhtaks ja kindla suurusega */
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4 {
    font-family: inherit !important;
    color: #222222 !important; /* Tume, konkreetne pealkirja värv */
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
    background-color: transparent !important;
}

/* Konkreetsed pealkirjade suurused */
.product-description h1 { font-size: 22px !important; }
.product-description h2 { font-size: 20px !important; }
.product-description h3 { font-size: 18px !important; }
.product-description h4 { font-size: 16px !important; }

/* Lõikude ja loendite vahed ilusaks (ei lase tekstil kokku kleepuda) */
.product-description p,
.product-description-short p {
    margin-bottom: 1em !important;
}

.product-description ul,
.product-description-short ul {
    padding-left: 20px !important;
    margin-bottom: 1em !important;
    list-style-type: disc !important;
}

.product-description li,
.product-description-short li {
    margin-bottom: 0.5em !important;
}

/* VÄLDIME LEHE HÜPPAMIST: Peidame tühjad lõigud, mis tekitavad lehele suuri valgeid auke */
.product-description p:empty,
.product-description-short p:empty {
    display: none !important;
}
/* --- PIKALE KIRJELDUSELE ARVUTIVAATES LAIUSE PIIRANG JA VASAKULE PADDING --- */
@media (min-width: 768px) {
    .product-description {
        max-width: 900px !important; /* Piirab teksti laiust, et rida ei jookseks liiga pikaks */
        padding-left: 5mm !important; /* Lisab vasakule 5mm tühimiku */
    }
}
/* Peidab blogi otsingu ja arhiivi kastid vasakus tulbas */
.ets_block_search, 
.ets_block_archive {
    display: none !important;
}
/* Peidab topeltpealkirja blogipostituse detailvaates (avatud postituses) */
.ets-blog-wrapper-detail h1.page-heading.product-listing {
    display: none !important;
}