/**
 * Miele design layer for Shoptimizer.
 *
 * Moved from WP "Additional CSS" (custom_css post 206) so the design is versioned,
 * cacheable and loaded once instead of inlined into every page. Rule order is kept
 * from the original because the cascade depends on it; this file is enqueued after
 * every other stylesheet (same position Additional CSS had), and Kirki's inline
 * CSS still prints after it.
 */

/* ==========================================================================
   Fonts: Miele Elements, self-hosted WOFF2 (Latin + Latin Ext subset)
   ========================================================================== */

@font-face{font-family:"Miele Elements Casnic";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/MieleElementsOffice-ExtraLight.woff2") format("woff2");}
@font-face{font-family:"Miele Elements Casnic";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/MieleElementsOffice-Light.woff2") format("woff2");}
@font-face{font-family:"Miele Elements Casnic";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/MieleElementsOffice-LightItalic.woff2") format("woff2");}
@font-face{font-family:"Miele Elements Casnic";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/MieleElementsOffice-Regular.woff2") format("woff2");}
@font-face{font-family:"Miele Elements Casnic";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/MieleElementsOffice-Italic.woff2") format("woff2");}
@font-face{font-family:"Miele Elements Casnic";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/MieleElementsOffice-Bold.woff2") format("woff2");}
@font-face{font-family:"Miele Elements Casnic";font-style:italic;font-weight:700;font-display:swap;src:url("../fonts/MieleElementsOffice-BoldItalic.woff2") format("woff2");}

/* ==========================================================================
   Header: desktop (header-5, centred logo, black search)
   ========================================================================== */

@media (min-width: 993px) {
    .site-header .site-branding {
        position: absolute;
        top: 29px;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: auto;
        line-height: 1;
        z-index: 10;
    }

    .main-navigation ul.menu li.full-width {
        margin-left: 15px;
    }

    .main-navigation ul li.full-width>.sub-menu-wrapper>.container>ul.sub-menu>li:last-child {
        border-right: 0.1px solid #606060;
    }

    .site-header .col-full {
        max-width: 100% !important;
    }

    .site-header .site-search {
        margin-left: 3em;
        flex-grow: 0;
    }

    .shoptimizer-primary-navigation {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .site-search input[type=search] {
        border: 0;
        background: #000000;
        border: none;
        color: white;
    }

    .main-navigation ul.menu li.full-width>.sub-menu-wrapper {
        background: #000000;
        border: none;
    }

    .secondary-navigation .menu-item {
        padding: 2px;
        border-left: none;
    }

    .secondary-navigation ul li a {
        position: relative;
        display: block;
        padding: 2px;
        color: #111;
        font-size: 11px;
    }

    .header-5 .shoptimizer-cart .cart-contents .amount {
        font-size: 12px;
        display: contents;
    }
}

/* ==========================================================================
   Header: mobile
   ========================================================================== */

@media (max-width: 992px) {
    /* .site-header prefix: must beat the old 45px rule while it is still in prod Additional CSS */
    .site-header .custom-logo-link img {
        padding: 0px;
        height: 40px !important;
    }

    /* Logo pinned to the top of the (taller) header, black strip underneath as on miele.ro */
    .site-header .site-branding .custom-logo-link {
        margin-bottom: auto;
        line-height: 0;
    }

    /* Keep the header sticky while the menu drawer is open. The theme only makes it sticky on
       body:not(.mobile-toggled), so when scrolled down it jumped away as the menu opened.
       The drawer (z 102) and overlay (z 101) are outside the header and still cover it. */
    .mobile-toggled.sticky-m .site-header {
        position: sticky;
        top: 0;
        z-index: 9;
    }

    /* Search: 44px tap target, clear of the cart's tap area (cart sits at right: 15px) */
    .site-header button.mobile-search-toggle {
        right: 70px;
        width: 44px;
        justify-content: center;
    }

    /* Account: right of the hamburger, mirroring search + cart. The icons sit 29px apart on
       both sides (hamburger 15-37 | account 66-88 ... search 273-293 | cart 322-344 at 375px).
       Same 44px tap target as search; it overlaps the toggle's empty right part, so it sits above. */
    .site-header .site-branding + .shoptimizer-myaccount {
        right: auto;
        left: 55px;
        width: 44px;
        justify-content: center;
        z-index: 2;
    }

    .site-header .site-branding + .shoptimizer-myaccount a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #fff;
    }

    .site-header .site-branding + .shoptimizer-myaccount svg {
        width: 22px;
        height: 22px;
    }

    .menu-primary-menu-container>ul>li>a,
    .shoptimizer-cart .cart-contents {
        font-size: 16px !important;
    }
}

/* ==========================================================================
   Mega menu
   ========================================================================== */

.main-navigation ul.menu li.menu-item-has-children.full-width>.sub-menu-wrapper li.menu-item-has-children>a,
.main-navigation ul.menu li.menu-item-has-children.full-width>.sub-menu-wrapper li.heading>a,
.main-navigation ul.menu li.menu-item-has-children.full-width>.sub-menu-wrapper li.nolink>span {
    color: #ffffff !important;
}

.main-navigation ul li.full-width>.sub-menu-wrapper>.container>ul.sub-menu>li {
    border-left: 0.1px solid #606060;
}

/* ==========================================================================
   Blocks, footer payments, sidebar
   ========================================================================== */

.superblockslider {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw !important;
    margin-left: -50vw;
    margin-right: -50vw;
}

.header-5 .shoptimizer-cart a.cart-contents {
    border: none;
}

.pay-Payments {
    display: block;
    margin-right: -10px;
    margin-left: -10px;
    text-align: center;
}

@media only screen and (min-width: 768px) {
    .pay-Payments_Items {
        width: 100%;
        text-align: left;
    }
}

ul.pay-Payments_Items {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.pay-Payments_Item {
    margin: 0 5px;
}

.pay-Payments_Item svg {
    width: 48px;
    height: 32px;
}

.util-ScreenReaderOnly {
    position: relative;
}

.wc-block-grid__product-onsale {
    background-color: #4b0000 !important;
    color: white !important;
    border: none !important;
}

#secondary .widget:last-child {
    padding-bottom: 0;
    border: none;
    background-color: #f9f9f9;
    padding: 25px;
    border-radius: 4px;
}

div#secondary {
    position: sticky;
    top: 150px;
    z-index: 1;
}

/* Stack block grids on mobile */
@media (max-width: 993px) {
    body .is-layout-grid {
        grid-template-columns: 1fr !important;
    }
}

.mykuiba-image {
    max-width: 100px;
}

p.raa-estimated-delivery-notice {
    font-size: 12px;
}

/* ==========================================================================
   Primary menu font size on narrow desktops
   (these win over the old copies in the shoptimizer_extended_discounts_css option)
   ========================================================================== */

@media screen and (min-width: 1200px) and (max-width: 1320px) {
    .menu-primary-menu-container > ul > li > a, .shoptimizer-cart .cart-contents {
        letter-spacing: 0 !important;
        font-size: 12px !important;
    }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
    .menu-primary-menu-container > ul > li > a, .shoptimizer-cart .cart-contents {
        letter-spacing: 0px !important;
        font-size: 10px !important;
    }
}

/* ==========================================================================
   Product grid, badges, availability button
   ========================================================================== */

.woocommerce-LoopProduct-link img.gallery-image {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    width: 100%;
}

a.raa-open-availability-popup {
    background-color: #df9a38 !important;
    color: #000000 !important;
}

.ckit-badge {opacity: 1 !important;}

/* ==========================================================================
   Navigation bar: desktop (black, sticky)
   ========================================================================== */

@media (min-width: 993px) {
    .col-full-nav {
        width: 100%;
        background-color: #000;
        border-top: 1px solid transparent;
        height: 60px;
        min-height: 60px;
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 999;
    }
}

/* ==========================================================================
   Widgets, social login, product images
   ========================================================================== */

.widget-area .widget a {
    padding-right: 10px !important;
}

.widget.woocommerce li .count {
    right: -20px !important;
}

.google-login-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background-color: #fff;
    color: #444;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

.google-login-button:hover {
    background-color: #f7f7f7;
    border-color: #999;
}

.woocommerce-image__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.shoptimizer-plp-image-wrapper {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 300px;
    height: auto;
    overflow: hidden;
    position: relative;
    display: block;
}

/* Tall photos (e.g. professional machines, 2:3) must fit the square, not overflow it: the box's height only
   comes from aspect-ratio, which some layouts (mobile list view) don't treat as definite for height:100%.
   The /p/ site's Additional CSS still has `ul.products li.product img { min-height: 250px !important }`,
   which made every image 250px tall in the 166px phone list box; this selector outranks it. */
.shoptimizer-plp-image-wrapper > img,
ul.products li.product .shoptimizer-plp-image-wrapper > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain;
    object-position: center;
}

@media (max-width: 780px) {
    .order-mobile-first {
        order: -1;
    }
}

/* ==========================================================================
   FacetWP
   ========================================================================== */

.facet-label {
    font-size: 16px;
}

.facetwp-display-value {
    font-size: 14px;
}

.facetwp-counter {
    font-size: 14px;
}

.facetwp-slider-label {
    font-size: 14px;
}

input.facetwp-slider-reset.facetwp-hidden {
    background-color: #dc9814;
    color: #000000;
}

/* ==========================================================================
   Weight overrides for Kirki-coloured elements
   ========================================================================== */

.price ins, .commercekit-ajs-product-price, .commercekit-ajs-product-price ins, .widget-area .widget.widget_categories a:hover, #secondary .widget ul li a:hover, #secondary.widget-area .widget li.chosen a, .widget-area .widget a:hover, #secondary .widget_recent_comments ul li a:hover, .woocommerce-pagination .page-numbers li .page-numbers.current, div.product p.price, body:not(.mobile-toggled) .main-navigation ul.menu li.full-width.menu-item-has-children ul li.highlight > a, body:not(.mobile-toggled) .main-navigation ul.menu li.full-width.menu-item-has-children ul li.highlight > a:hover, #secondary .widget ins span.amount, #secondary .widget ins span.amount span, .search-results article h2 a:hover {
    font-weight: 500;
}

.showroomimage {border-radius: 10px;}

/* ==========================================================================
   Footer social icons
   ========================================================================== */

.footer-social {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-social .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-decoration: none;
    transition: transform .2s ease, opacity .2s ease;
    color: #ffffff !important;
}

.footer-social svg {
    color: #ffffff !important;
    fill: currentColor;
}

.footer-social .icon:hover,
.footer-social .icon:focus-visible {
    transform: translateY(-2px);
    opacity: 0.8;
}

/* ==========================================================================
   Product gallery, visibility utilities, checkout
   ========================================================================== */

@media (max-width: 768px) {
    .woocommerce-product-gallery__image:not(.flex-active-slide) img {
        padding: 25px;
    }
}

@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

.woocommerce-checkout.min-ck:not(.woocommerce-order-received) .site-header {
    border-bottom: none !important;
}

/* ==========================================================================
   Product search results: brand font everywhere
   (was an inline <style> in functions.php pointing at an undefined family)
   ========================================================================== */

body.search.post-type-archive-product :is(body, a, p, h1, h2, h3, h4, h5, h6, span, li, strong, em, div, button, input, textarea, label),
body.search.post-type-archive-product {
    font-family: "Miele Elements Casnic", sans-serif !important;
}

/* ==========================================================================
   Mobile menu: drill-down panels (see assets/js/mobile-nav.js)
   Colours follow the Customizer mobile menu settings: black panel, white text.
   ========================================================================== */

@media (max-width: 992px) {
    /* Full-width drawer (theme default is a 300px panel sliding from the left).
       It opens on the tap: the theme waited 0.1s (transition-delay) and then animated `left`
       for 0.35s, re-laying out the page every frame. Now a 0.22s transform, no delay.
       Open state is transform: none, so the fixed drill-down panels inside still position
       against the screen. */
    .col-full-nav {
        left: 0;
        width: 100%;
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.22s;
        transition-delay: 0s, 0.22s;
    }

    .mobile-toggled .col-full-nav {
        left: 0;
        visibility: visible;
        transform: none;
        transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
    }

    /* The dark overlay behind the drawer: 0.2s (theme: 0.6s). */
    .mobile-overlay {
        transition: opacity 0.2s, visibility 0.2s;
    }

    /* Close X moves from outside the 300px drawer to its top-right corner */
    .mobile-menu.close-drawer {
        left: auto;
        right: 6px;
    }

    .miele-drilldown .sub-menu-wrapper {
        display: none;
    }

    .miele-drilldown li.menu-item-has-children > .caret {
        display: none !important;
    }

    .miele-drilldown li.menu-item-has-children > a {
        position: relative;
        padding-right: 30px !important;
    }

    /* Right caret, same mask technique as the theme's own menu carets */
    .miele-drilldown li.menu-item-has-children > a::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        top: 50%;
        right: 0;
        width: 18px;
        height: 18px;
        margin: 0;
        background-color: currentColor;
        transform: translateY(-50%);
        -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L16 12L9 19' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
                mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L16 12L9 19' stroke='%234A5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-size: contain;
                mask-size: contain;
    }

    .miele-drilldown .sub-menu-wrapper.miele-panel {
        display: block;
        position: fixed !important;
        z-index: 103;
        top: 0;
        bottom: 0;
        left: 0 !important;
        width: 100%;
        margin: 0 !important;
        padding: 0 15px 2rem !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: #000;
        color: #fff;
        border: 0 !important;
        visibility: hidden;
        opacity: 0 !important;
        transform: translateX(24px) !important;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s linear 0.25s !important;
    }

    .admin-bar .miele-drilldown .sub-menu-wrapper.miele-panel {
        z-index: 100001;
    }

    .miele-drilldown li.miele-panel-open > .sub-menu-wrapper.miele-panel {
        visibility: visible;
        opacity: 1 !important;
        transform: none !important;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0s !important;
    }

    .miele-panel .container {
        padding: 0;
    }

    .miele-panel ul.sub-menu > li > a {
        display: block;
        width: 100% !important;
        padding: 0.6rem 0 !important;
        font-size: 15px;
        color: #fff !important;
        font-weight: 400 !important;
        opacity: 1;
    }

    .miele-panel-head {
        position: sticky;
        top: 0;
        z-index: 1;
        margin: 0 -15px 0.5rem;
        padding: 0.75rem 15px 0.75rem;
        background-color: inherit;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .miele-panel-head {
        padding-right: 56px;
    }

    .miele-panel-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0.35rem 0;
        background: none;
        border: 0;
        color: inherit;
        font: inherit;
        font-size: 14px;
        cursor: pointer;
    }

    .miele-panel-back::before {
        content: "";
        width: 8px;
        height: 8px;
        border-bottom: 1.5px solid currentColor;
        border-left: 1.5px solid currentColor;
        transform: rotate(45deg);
    }

    .miele-panel-title {
        display: block;
        margin-top: 0.35rem;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .miele-panel-all > a {
        font-weight: 700;
    }

    /* Wishlist + account, appended to the mobile menu in functions.php */
    .shoptimizer-mobile-menu li.miele-mobile-utility.miele-utility-first {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .shoptimizer-mobile-menu li.miele-mobile-utility > a {
        display: flex !important;
        align-items: center;
        gap: 10px;
    }

    .shoptimizer-mobile-menu li.miele-mobile-utility svg {
        flex: none;
        width: 20px;
        height: 20px;
    }

    .shoptimizer-mobile-menu li.miele-mobile-utility .rbp-wishlist-header-count {
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #8c0014;
        color: #fff;
        font-size: 11px;
        line-height: 18px;
        text-align: center;
    }
}

@media (max-width: 992px) and (prefers-reduced-motion: reduce) {
    .col-full-nav,
    .mobile-toggled .col-full-nav,
    .miele-drilldown .sub-menu-wrapper.miele-panel,
    .miele-drilldown li.miele-panel-open > .sub-menu-wrapper.miele-panel {
        transition: none !important;
    }
}

/* ==========================================================================
   Mobile search: dim the page below the header while the search panel is open
   (the header is sticky with z-index 9 and holds the search panel, so it stays bright)
   ========================================================================== */

@media (max-width: 992px) {
    body.m-search-toggled::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 8;
        background: rgba(0, 0, 0, 0.5);
    }

    body.m-search-toggled .site-header {
        position: sticky;
        top: 0;
        z-index: 9;
    }

    /* The page behind stays put: scrolling it (with the keyboard open, iOS pans the whole
       viewport) slid the sticky header and its results out of view. */
    html:has(> body.m-search-toggled) {
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* The results fit between the search box and the on-screen keyboard and scroll on their own.
       --m-search-room is set by mobile-nav.js from the visual viewport; CommerceKit's own
       max-height uses window.innerHeight, which the keyboard does not shrink. */
    body.m-search-toggled .site-header .commercekit-ajs-results,
    body.m-search-toggled .site-header .m360-ss {
        max-height: var(--m-search-room, calc(100vh - 130px)) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   CommerceKit live search dropdown: same card as the Customer 360 quick results
   ("Cele mai cumpărate", raa-miele-360customer/assets/search-suggest.js)
   ========================================================================== */

.site-search .commercekit-ajs-results {
    top: calc(100% + 4px) !important;
    left: 0;
    box-sizing: border-box;
    min-width: 300px;
    max-width: calc(100vw - 2em);
    min-height: 0;
    padding: 10px 0;
    overflow-x: hidden;
    background: #fff;
    color: #111;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.site-search .commercekit-ajs-results.has-viewall-button {
    padding-bottom: 10px;
}

.site-search .commercekit-ajs-suggestions {
    width: auto !important;
    background: transparent;
    border: 0;
}

.site-search .commercekit-ajs-suggestions::before {
    content: "Produse";
    display: block;
    margin: 0 14px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666;
}

.site-search .commercekit-ajs-suggestions:has(> .autocomplete-no-suggestion:first-child)::before {
    display: none;
}

.site-search .commercekit-ajs-suggestions > .autocomplete-suggestion,
.site-search .commercekit-ajs-suggestions > .autocomplete-suggestion:last-child {
    margin: 0;
    border-bottom: 0;
}

.site-search .commercekit-ajs-suggestions > .autocomplete-suggestion:hover,
.site-search .commercekit-ajs-suggestions > .autocomplete-suggestion.active,
.site-search .commercekit-ajs-suggestions > .autocomplete-suggestion.autocomplete-selected > a {
    background-color: #f4f4f4;
}

.site-search .autocomplete-suggestion a {
    gap: 10px;
    align-items: center;
    padding: 6px 14px;
    color: #111;
}

/* 40px thumbnail box; an empty box keeps the rows aligned when a product has no image */
.site-search .commercekit-ajs-product .commercekit-ajs-product-image,
.site-search .commercekit-ajs-product:not(:has(.commercekit-ajs-product-image))::before {
    flex: none;
    width: 40px;
    max-width: 40px;
    height: 40px;
    overflow: hidden;
    background: #f6f6f6;
    border-radius: 4px;
    align-self: center;
}

.site-search .commercekit-ajs-product:not(:has(.commercekit-ajs-product-image))::before {
    content: "";
}

.site-search .commercekit-ajs-product .commercekit-ajs-product-image img {
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    object-fit: contain;
}

.site-search .commercekit-ajs-product-desc {
    padding: 0;
}

.site-search .commercekit-ajs-product-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.site-search .commercekit-ajs-results span.match-text {
    font-weight: 700;
    text-decoration: none;
}

.site-search .commercekit-ajs-product-price,
.site-search .commercekit-ajs-product-price ins {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: #8c0014;
}

.site-search .commercekit-ajs-product-price del {
    margin-right: 4px;
    color: #999;
}

/* Category suggestions */
.site-search .commercekit-ajs-post .commercekit-ajs-post-title {
    font-size: 13px;
    line-height: 1.3;
}

/* CommerceKit prints the English taxonomy label ("Product Category"): show it in Romanian */
.site-search .commercekit-ajs-post .commercekit-ajs-post-title span.post-type {
    font-size: 0;
    white-space: nowrap;
}

.site-search .commercekit-ajs-post .commercekit-ajs-post-title span.post-type::after {
    content: "Categorie";
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* "Vezi toate rezultatele (N)": a quiet link row instead of the dark bar */
.site-search .commercekit-ajs-view-all-holder {
    width: auto;
}

.site-search .commercekit-ajs-view-all-holder > a {
    height: auto;
    margin: 6px 14px 0;
    padding: 10px 0 0;
    line-height: 1.3;
    background: transparent;
    border-top: 1px solid #eee;
    color: #8c0014;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.site-search .commercekit-ajs-view-all-holder > a:hover {
    color: #5e000d;
    background: transparent;
}

/* ==========================================================================
   Product gallery (CommerceKit, grid 1-2-2 / mobile slider): every image fits on screen
   Tall photos (e.g. built-in fridges, 800x1759) used to render taller than the window.
   Images keep their proportions and are centred in their cell.
   ========================================================================== */

#commercegurus-pdp-gallery .swiper-slide-imglink {
    display: flex;
    align-items: center;
    justify-content: center;
}

#commercegurus-pdp-gallery .swiper-slide-imglink img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Desktop grid (CommerceKit switches to its slider at 770px) */
@media (min-width: 771px) {
    /* any image: fits under the sticky menu while scrolling the gallery */
    #commercegurus-pdp-gallery .swiper-slide-imglink img {
        max-height: calc(100vh - 120px);
    }

    /* first image: fully visible on load, below header, menu and breadcrumbs */
    #commercegurus-pdp-gallery .cg-psp-gallery > li:first-child .swiper-slide-imglink img {
        max-height: calc(100vh - 220px);
    }
}

/* Mobile slider: image, title and price visible together */
@media (max-width: 770px) {
    #commercegurus-pdp-gallery .swiper-slide-imglink img {
        max-height: 60vh;
        max-height: 60svh;
    }
}

/* ==========================================================================
   Stock status on product grids: same look as the product page
   (theme product.css + raa-miele-import preorder label; neither loads on category pages)
   Markup from wc_get_stock_html() in functions.php: p.stock.in-stock / .out-of-stock /
   .available-on-backorder.raa-preorder
   ========================================================================== */

ul.products li.product .product-stock-status {
    margin-top: 0.35rem;
}

ul.products li.product .product-stock-status p.stock {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 13px;
    line-height: 1.4;
}

ul.products li.product .product-stock-status p.stock.in-stock {
    color: #0f834d;
}

ul.products li.product .product-stock-status p.stock.out-of-stock {
    color: #a61e00;
    font-weight: bold;
}

ul.products li.product .product-stock-status p.stock.in-stock::before,
ul.products li.product .product-stock-status p.stock.out-of-stock::before {
    content: "";
    position: relative;
    top: 3px;
    display: inline-flex;
    width: 15px;
    height: 15px;
    margin-right: 0.5rem;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
}

ul.products li.product .product-stock-status p.stock.in-stock::before {
    background: #0f834d;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7' /%3E%3C/svg%3E");
}

ul.products li.product .product-stock-status p.stock.out-of-stock::before {
    background: #a61e00;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18L18 6M6 6L18 18' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18L18 6M6 6L18 18' stroke='%234A5568' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* "Timp de livrare mai lung" (on backorder): same as raa-miele-import on the product page */
ul.products li.product .product-stock-status p.stock.raa-preorder {
    color: #b8860b;
    font-weight: 600;
}

ul.products li.product .product-stock-status p.stock.raa-preorder::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    vertical-align: middle;
    background: #b8860b;
    border-radius: 50%;
}

/* ==========================================================================
   Mobile menu: the close X gets its own top row, and links react to taps
   ========================================================================== */

@media (max-width: 992px) {
    /* The X (theme: fixed, 40px, top 10px) used to sit on top of the first menu link.
       The menu now starts below a 60px top row with a divider. */
    .col-full-nav .main-navigation {
        padding-top: 60px;
    }

    .col-full-nav .shoptimizer-mobile-menu {
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    .mobile-toggled .mobile-menu.close-drawer {
        top: 8px;
        right: 4px;
        width: 44px;
        height: 44px;
    }

    /* Tap feedback: highlight while pressed; a link that navigates stays highlighted
       (.is-pressed, mobile-nav.js) until the next page loads */
    .shoptimizer-mobile-menu > ul > li > a,
    .miele-panel ul.sub-menu > li > a,
    .miele-panel-back {
        border-radius: 4px;
        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.15s ease;
    }

    .shoptimizer-mobile-menu > ul > li > a {
        margin: 0 -8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .miele-panel ul.sub-menu > li > a {
        margin: 0 -8px;
        padding: 0.6rem 8px !important;
    }

    .miele-panel-back {
        margin-left: -8px;
        padding: 0.35rem 8px;
    }

    .shoptimizer-mobile-menu > ul > li > a:active,
    .shoptimizer-mobile-menu > ul > li > a.is-pressed,
    .miele-panel ul.sub-menu > li > a:active,
    .miele-panel ul.sub-menu > li > a.is-pressed,
    .miele-panel-back:active {
        background-color: rgba(255, 255, 255, 0.14);
    }
}

/* ==========================================================================
   Checkout: cash on delivery over the limit (functions.php MIELE_COD_MAX), greyed out with a reason
   ========================================================================== */

.wc_payment_methods li.miele-payment-disabled {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* grey out the option itself, not the tooltip */
.wc_payment_methods li.miele-payment-disabled > input,
.wc_payment_methods li.miele-payment-disabled > label {
    opacity: 0.55;
}

.wc_payment_methods li.miele-payment-disabled input,
.wc_payment_methods li.miele-payment-disabled label {
    cursor: not-allowed;
}

.wc_payment_methods li.miele-payment-disabled label {
    margin: 0;
}

.miele-pm-info {
    position: relative;
    display: inline-flex;
    flex: none;
    width: 18px;
    height: 18px;
    color: #555;
    cursor: help;
    opacity: 1;
}

.miele-pm-info svg {
    width: 18px;
    height: 18px;
}

.miele-pm-tooltip {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 8px);
    left: 50%;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    background: #111;
    color: #fff;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.miele-pm-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 6px solid transparent;
    border-top-color: #111;
    transform: translateX(-50%);
}

/* hover on desktop; tap/keyboard focus on mobile */
.miele-pm-info:hover .miele-pm-tooltip,
.miele-pm-info:focus .miele-pm-tooltip,
.miele-pm-info:focus-within .miele-pm-tooltip {
    visibility: visible;
    opacity: 1;
}

/* Small screens: the icon sits near the left edge (right after the gateway title), so the
   tooltip opens to the right of it and never wider than the screen */
@media (max-width: 480px) {
    .miele-pm-tooltip {
        left: -8px;
        max-width: min(240px, calc(100vw - 48px));
        transform: none;
    }

    .miele-pm-tooltip::after {
        left: 13px;
        transform: none;
    }
}

/* ==========================================================================
   WooCommerce notices: the slim pill of the cart notices (Customer 360 perks)
   instead of the theme's blue / green / red bars. Info and success get a Miele
   red icon circle, errors a red tint. The coupon toggle keeps its plain look.
   ========================================================================== */

html body .woocommerce-info,
html body .woocommerce-message,
html body .woocommerce-error,
html body .woocommerce-noreviews,
html body p.no-comments {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.25rem;
    display: block;
    padding: 11px 18px 11px 48px;
    border: 1px solid #e6e2dc;
    border-radius: 22px;
    background: #f6f5f4;
    color: #1e1e1e;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    min-height: 46px;
}

html body .woocommerce-info::before,
html body .woocommerce-message::before,
html body .woocommerce-error::before,
html body .woocommerce-noreviews::before,
html body p.no-comments::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #8c0014 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M12 7.5h.008v.008H12V7.5Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

html body .woocommerce-message::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75l6 6 9-13.5'/%3E%3C/svg%3E"); }

html body .woocommerce-error { border-color: #f0d3d6; background: #fdf4f5; }
html body .woocommerce-error::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8.25v4.5m0 3.75h.008v.008H12v-.008Z'/%3E%3C/svg%3E"); }
html body ul.woocommerce-error { display: block; list-style: none; padding-top: 11px; padding-bottom: 11px; }
html body ul.woocommerce-error li { margin: 0; }
html body ul.woocommerce-error li + li { margin-top: 4px; }

html body .woocommerce-info a,
html body .woocommerce-message a,
html body .woocommerce-error a,
html body .woocommerce-noreviews a {
    color: #8c0014;
    text-decoration: underline;
    text-underline-offset: 2px;
}

html body .woocommerce-info a:hover,
html body .woocommerce-message a:hover,
html body .woocommerce-error a:hover {
    color: #6e0010;
    opacity: 1;
}

/* Action link inside a notice ("Cumpără un card cadou", "Vezi coșul"): after the text, with a divider. */
html body .woocommerce-info .button,
html body .woocommerce-message .button,
html body .woocommerce-error .button,
html body .woocommerce-noreviews .button {
    display: inline-block;
    float: none;
    margin: 0 0 0 12px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid #d9d4cc !important;
    border-radius: 0;
    background: none;
    color: #8c0014;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

html body .woocommerce-info .button:hover,
html body .woocommerce-message .button:hover,
html body .woocommerce-error .button:hover {
    background: none;
    color: #6e0010;
    opacity: 1;
    text-decoration: underline;
}

/* Product page "added to cart": the theme's inner layout, recoloured. */
html body.single-product .woocommerce-message a { color: #8c0014; }
html body .woocommerce-message .button.checkout::after { background: #8c0014; }
html body.single-product .woocommerce-message .message-inner .buttons-wrapper a span { border-color: #8c0014; }
html body .woocommerce-message .message-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
html body .woocommerce-message .buttons-wrapper { margin-left: 0; }

/* Plain text links stay plain. */
html body .woocommerce-form-coupon-toggle .woocommerce-info {
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
html body .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
html body .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon { color: #111; }

/* Empty cart: also a .woocommerce-info, but the theme lays it out as a full-width centred hero (icon + title).
   The pill's fit-content width shrank it, so icon and title sat off-centre above the centred button. */
html body.woocommerce-cart .cart-empty.woocommerce-info {
    width: auto;
    max-width: none;
    min-height: 0;
}
html body.woocommerce-cart .cart-empty.woocommerce-info::before { border-radius: 0; }

@media (max-width: 767px) {
    html body .woocommerce-info,
    html body .woocommerce-message,
    html body .woocommerce-error,
    html body .woocommerce-noreviews,
    html body p.no-comments {
        width: 100%;
        border-radius: 12px;
        font-size: 13px;
    }
    html body.single-product .woocommerce-message { text-align: left; }
    html body.single-product .woocommerce-message .message-inner .buttons-wrapper { display: flex; gap: 18px; padding-top: 6px; }
    html body.single-product .woocommerce-message .buttons-wrapper .button { margin-left: 0; padding-left: 0; border-left: 0 !important; }
    html body.single-product .woocommerce-message .buttons-wrapper .checkout { order: 2; }
}

/* Shop sidebar: FacetWP fills its facets with JavaScript about 300 ms after the page shows,
   growing the filter widget from ~65px to ~1700px and pushing every widget below it down
   (CLS 0.11 on desktop category pages). Those widgets stay out of the layout until at least
   one facet has content; appearing then is not a layout shift. */
#secondary:not(:has(.facetwp-facet:not(:empty))) > .widget_custom_html:has(.facetwp-facet) ~ .widget {
	display: none;
}

/* Product page: "90% dintre clienți recomandă produsul" on its own line under the stars. */
.product .woocommerce-product-rating:has(.miele-recommend) {
	flex-wrap: wrap;
	row-gap: 4px;
}
.product .woocommerce-product-rating .miele-recommend {
	flex-basis: 100%;
	margin: 0;
	color: #333;
	font-size: 13px;
	line-height: 1.4;
}
.product .woocommerce-product-rating .miele-recommend strong {
	color: #111;
}

/* ==========================================================================
   Product page summary (inc/product-summary.php)
   Title → rating → price → short description → availability box → add to cart.
   ========================================================================== */
.single-product div.product .summary h1.product_title {
	margin-bottom: 8px;
	font-size: clamp(24px, 1rem + 1.1vw, 32px);
	line-height: 1.2;
}
.single-product div.product .summary .woocommerce-product-rating {
	margin: 0 0 16px;
}

/* Price: the biggest number on the page, VAT note quiet beside it. One row with the discount
   badge after it: old price, price and VAT note share a baseline, the badge is centred on them. */
.single-product div.product .summary p.price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	float: none;
	margin: 0 12px 0 0;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	vertical-align: middle;
}
.single-product div.product .summary p.price del {
	color: #606060;
	font-size: 18px;
	font-weight: 400;
}
.single-product div.product .summary p.price .woocommerce-price-suffix {
	color: #606060;
	font-size: 14px;
	font-weight: 400;
}
.single-product div.product .summary .sale-item.product-label {
	top: 0;
	margin: 0;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	vertical-align: middle;
}
.single-product div.product .summary .woocommerce-product-details__short-description {
	margin-top: 16px;
	padding-bottom: 0;
	color: #333;
	font-size: 15px;
}

/* Availability box: stock, stock bar, delivery date, store stock. */
.miele-availability {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 20px 0 16px;
	padding: 16px;
	border: 1px solid #e2e2e2;
	background: #fff;
}
.miele-availability > p,
.miele-availability .commercekit-inventory {
	margin: 0;
}
.single-product div.product .summary .miele-availability p.stock {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 15px;
	font-weight: 600;
}
.miele-availability p.raa-estimated-delivery {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	font-weight: 400;
}
.miele-availability p.raa-estimated-delivery::before {
	position: absolute;
	top: 2px;
	left: 0;
}
.miele-availability p.raa-estimated-delivery::before,
.summary .miele-availability a.raa-open-availability-popup::before {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	background: currentColor;
	content: "";
	-webkit-mask: var(--miele-icon) center / contain no-repeat;
	mask: var(--miele-icon) center / contain no-repeat;
}
.miele-availability p.raa-estimated-delivery::before {
	--miele-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4h13v12H1zM14 8h4l4 4v4h-8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2'/%3E%3Ccircle cx='17.5' cy='18.5' r='2'/%3E%3C/svg%3E");
}
.miele-availability .raa-delivery-date {
	display: block; /* "Luni, 5 oct. – Marți, 6 oct." on its own line under the label */
	font-weight: 600;
}
.miele-availability p.raa-estimated-delivery-notice {
	margin: -4px 0 0 26px;
	color: #606060;
	font-size: 12px;
	line-height: 1.4;
}

/* Store stock: a secondary link, not a second yellow button competing with "Adaugă în coș". */
.summary .miele-availability a.raa-open-availability-popup {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	align-self: flex-start;
	padding: 0;
	border-radius: 0;
	background: none !important;
	color: #111 !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.summary .miele-availability a.raa-open-availability-popup::before {
	--miele-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l1.5-5h15L21 9M3 9h18M3 9a3 3 0 006 0 3 3 0 006 0 3 3 0 006 0M5 12v8h14v-8M10 20v-5h4v5'/%3E%3C/svg%3E");
}
.summary .miele-availability a.raa-open-availability-popup:hover {
	text-decoration-thickness: 2px;
}

/* Wishlist + Compare side by side on phones too (were two full-width rows). */
@media (max-width: 992px) {
	.single-product .summary .rbp-single-actions {
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.single-product .summary .rbp-single-actions {
		align-items: stretch;
	}
	.single-product .summary .rbp-single-actions > * {
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}
	.single-product div.product .summary p.price {
		font-size: 24px;
	}
	.miele-availability {
		padding: 14px;
	}
}

/* Category listings, desktop: bold price line on product cards (phones keep the mobile-listing styles). */
@media (min-width: 768px) {
	ul.products li.product .price,
	ul.products li.product .price ins,
	ul.products li.product .price .amount {
		font-weight: 700;
	}
	ul.products li.product .price del,
	ul.products li.product .price del .amount {
		font-weight: 400;
	}
}

/* Mobile sideways scroll: Shoptimizer parks the closed mini-cart drawer just off the right
   edge (right:-100%, full width), and phones let you pan into off-screen fixed elements.
   Hide it while closed (keeps the slide-in; not tabbable while closed), and clip any other
   horizontal overflow on small screens. `clip`, not `hidden`, so the sticky header keeps
   working. */
.shoptimizer-mini-cart-wrap {
	visibility: hidden;
	transition: right 0.35s, visibility 0s linear 0.35s;
}
.drawer-open .shoptimizer-mini-cart-wrap {
	visibility: visible;
	transition: right 0.35s, visibility 0s;
}
@media (max-width: 992px) {
	html,
	body {
		overflow-x: clip;
	}
}

/* Mobile cart: the product image whole in a 100px square. Shoptimizer's .m-cart cell is 100px wide,
   capped at 120px high with overflow hidden, which clipped tall or wide product photos. */
.m-cart table.cart td.product-thumbnail {
	max-height: none;
	overflow: visible;
}
.m-cart table.cart .product-thumbnail img {
	width: 100px;
	max-width: 100px;
	height: 100px;
	object-fit: contain;
	background: #fff;
}