/*
Theme Name:  Olla Child Theme
Theme URL:   http://demo2.wpthemego.com/themes/sw_olla/
Description: Olla - Furniture & Fashion Store WordPress WooCommerce Theme
Author:      skyoftech
Author URL:  https://themeforest.net/user/skyoftech/
Template:    olla
Version:     1.0.0
*/

/* -------------------------------------------------------
   Vertical mega menu — 3-level flyout (each level = its own panel)
   L1 ΠΡΟΪΟΝΤΑ          → ul.dropdown-menu
   L2 ΕΠΙΠΛΑ/ΚΟΥΖΙΝΑ…   → li.menu-item-has-children > ul.nav-level2  (flyout →)
   L3 ΕΠΙΠΛΑ ΥΠΝΟΔ…     → li.menu-item-has-children > ul.nav-level3  (flyout →)
   L4 ΚΡΕΒΑΤΙΑ/ΣΤΡΩΜ…   → leaf links
   Rules: panels never use grid (single column) and never use overflow
   (overflow:auto/scroll clips the absolutely-positioned flyouts).
------------------------------------------------------- */

/* Shared: reset list chrome, keep flyouts visible */
.swg-elementor-menu .dropdown-menu,
.swg-elementor-menu .nav-level2,
.swg-elementor-menu .nav-level3 {
    list-style: none;
    margin: 0;
    overflow: visible !important;
}

/* ---- L1 panel: open on hover, force single column ---- */
.swg-elementor-menu.swg-mega .swg-menu-custom.dropdown:hover > .dropdown-menu,
.swg-elementor-menu.swg-mega li.dropdown:hover > .dropdown-menu {
    display: block !important;
}
.swg-elementor-menu .swg-menu-custom.dropdown > .dropdown-menu,
.swg-elementor-menu li.dropdown > .dropdown-menu {
    display: none;
    grid-template-columns: none !important;
    min-width: 250px;
    padding: 8px 0;
    background: #fff;
    box-shadow: 4px 10px 32px rgba(0,0,0,.13);
    border-top: 3px solid #009688;
}

/* ---- Generic row styling (all levels look identical) ---- */
.swg-elementor-menu .dropdown-menu > li > a,
.swg-elementor-menu .nav-level2 > li > a,
.swg-elementor-menu .nav-level3 > li > a {
    display: block;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #2c2c2c !important;
    text-decoration: none !important;
    white-space: nowrap;
    text-transform: none;
    transition: background .12s, color .12s;
}
.swg-elementor-menu .dropdown-menu > li > a:hover,
.swg-elementor-menu .nav-level2 > li > a:hover,
.swg-elementor-menu .nav-level3 > li > a:hover,
.swg-elementor-menu .dropdown-menu > li:hover > a,
.swg-elementor-menu .nav-level2 > li:hover > a,
.swg-elementor-menu .nav-level3 > li:hover > a {
    background: #f0faf9;
    color: #009688 !important;
}

/* ---- L2 flyout (nav-level2) ---- */
.swg-elementor-menu .dropdown-menu > li.menu-item-has-children {
    position: relative;
}
.swg-elementor-menu .dropdown-menu > li > ul.nav-level2 {
    display: none !important;
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 240px;
    padding: 8px 0;
    background: #fff;
    box-shadow: 4px 10px 32px rgba(0,0,0,.13);
    border-top: 3px solid #009688;
    z-index: 99999;
}
.swg-elementor-menu .dropdown-menu > li.menu-item-has-children:hover > ul.nav-level2 {
    display: block !important;
}

/* ---- L3 flyout (nav-level3) ---- */
.swg-elementor-menu .nav-level2 > li.menu-item-has-children {
    position: relative;
}
.swg-elementor-menu .nav-level2 > li > ul.nav-level3 {
    display: none !important;
    position: absolute;
    top: -8px;
    left: 100%;
    min-width: 240px;
    padding: 8px 0;
    background: #fff;
    box-shadow: 4px 10px 32px rgba(0,0,0,.13);
    border-top: 3px solid #009688;
    z-index: 99999;
}
.swg-elementor-menu .nav-level2 > li.menu-item-has-children:hover > ul.nav-level3 {
    display: block !important;
}

/* ---- No arrows / carets on any row ---- */
.swg-elementor-menu .dropdown-menu li > a::after,
.swg-elementor-menu .dropdown-menu li > a::before {
    content: none !important;
    display: none !important;
}

/* -------------------------------------------------------
   Mobile header icon bar (#bd96206)
   First icon stays on the left, all the others go to the right.
   margin-right:auto on the first child eats the free space,
   pushing every following icon to the right edge.
------------------------------------------------------- */
.elementor-element-bd96206 {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
.elementor-element-bd96206 > .elementor-element:first-child {
    margin-right: auto !important;
}



.auros-tp-cat {
	background-color: #fff!important;
}

/* -------------------------------------------------------
   Elementor Image Hotspots — keep the product tooltip inside
   the viewport on mobile. The tooltip embeds a full WooCommerce
   product card which otherwise overflows the screen width.
   On mobile we pin it to the center of the screen and cap it
   at 250px so it never grows past the viewport.
------------------------------------------------------- */
@media (max-width: 767px) {
    /* Elementor positions each hotspot with a CSS transform, which makes any
       position:fixed descendant anchor to the hotspot instead of the viewport.
       Drop the transform ONLY while the hotspot is open so the popup can be
       centered on screen; idle hotspot dots keep their exact position. */
    .e-hotspot.e-hotspot--active {
        transform: none !important;
    }

    .e-hotspot__tooltip {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: 200px !important;
        width: 200px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        box-sizing: border-box;
        padding: 8px !important;
        z-index: 99999 !important;
    }

    /* Neutralise Elementor's arrow/caret which would float off-center */
    .e-hotspot__tooltip::before,
    .e-hotspot__tooltip::after {
        display: none !important;
    }

    /* Product card inside the tooltip — keep it small */
    .e-hotspot__tooltip .woocommerce ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Constrain every inner wrapper so the card actually shrinks */
    .e-hotspot__tooltip .woocommerce,
    .e-hotspot__tooltip .woocommerce ul.products {
        max-width: 100% !important;
        margin: 0 !important;
    }

    .e-hotspot__tooltip .products-entry.item-wrap {
        max-width: 184px !important;
        margin: 0 auto !important;
    }

    /* Shrink the image so the whole card stays compact */
    .e-hotspot__tooltip .item-img,
    .e-hotspot__tooltip .product-thumb-hover {
        max-width: 160px !important;
        margin: 0 auto !important;
    }

    /* Hide the hover/wishlist/quickview clutter to keep it lightweight */
    .e-hotspot__tooltip .item-bottom,
    .e-hotspot__tooltip .item-bottom4 {
        display: none !important;
    }

    /* Smaller title, price and description so the card stays compact */
    .e-hotspot__tooltip .woocommerce-loop-product__title {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .e-hotspot__tooltip .item-description {
        font-size: 11px !important;
        line-height: 1.35 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .e-hotspot__tooltip .price,
    .e-hotspot__tooltip .woocommerce-Price-amount {
        font-size: 13px !important;
    }

    /* Keep the product image from blowing past the tooltip width */
    .e-hotspot__tooltip .item-img img {
        width: 100% !important;
        height: auto !important;
        max-height: 190px !important;
        object-fit: contain !important;
    }

    /* Compact add-to-cart button */
    .e-hotspot__tooltip .button.add_to_cart_button {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* -------------------------------------------------------
   Elementor Image Hotspots — desktop sizing. Cap the product
   popup so it stays compact instead of rendering a full-size
   product card.
------------------------------------------------------- */
@media (min-width: 768px) {
    .e-hotspot__tooltip {
        max-width: 300px !important;
        width: 300px !important;
    }

    .e-hotspot__tooltip .woocommerce,
    .e-hotspot__tooltip .woocommerce ul.products {
        max-width: 300px !important;
        margin: 0 !important;
    }

    .e-hotspot__tooltip .products-entry.item-wrap {
        max-width: 220px !important;
        margin: 0 auto !important;
    }
}

/* -------------------------------------------------------
   Footer service boxes — the first box (ΔΩΡΕΑΝ ΠΑΡΑΔΟΣΗ) had a
   white gradient background + black text. Match it to the other
   three: transparent background (dark footer bg shows through)
   and light grey text.
------------------------------------------------------- */
.elementor-element-57f464c {
    background-image: none !important;
    background-color: transparent !important;
}

.elementor-element-57f464c .elementor-image-box-title,
.elementor-element-57f464c .elementor-image-box-description {
    color: #cccccc !important;
}

/* -------------------------------------------------------
   Mini cart — remove the "Add Note" / order notes feature
   (icon + form). Rendered by parent theme, hidden here.
------------------------------------------------------- */
.minicart-note-wrapper {
    display: none !important;
}