/*
Theme Name: Motta Child Theme
Theme URI: http://motta.uix.store/
Author: UIX Themes
Author URI: http://uix.store
Description: Custom Modern Product Cards - Layouts 7 to 11 strictly scoped
Version: 2.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: motta
Template: motta
*/

/* ==========================================================================
   IMPORTANT: NO GLOBAL OVERRIDES THAT AFFECT LAYOUTS 1 TO 6!
   All rules below are strictly scoped to .product-card-layout-7 .. 11 & lilo
   ========================================================================== */

/* ==========================================================================
   CSS GRID SYSTEM FOR CUSTOM PRODUCT CARDS (Layouts 7-11 & Lilo)
   Enables pixel-perfect gap and dimensions control without flex wrap breaking
   ========================================================================== */
ul.products.product-card-layout-lilo,
ul.products.product-card-layout-7,
ul.products.product-card-layout-8,
ul.products.product-card-layout-9,
ul.products.product-card-layout-10,
ul.products.product-card-layout-11 {
    display: grid !important;
    gap: var(--motta-custom-gap, 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

ul.products.product-card-layout-lilo li.product,
ul.products.product-card-layout-7 li.product,
ul.products.product-card-layout-8 li.product,
ul.products.product-card-layout-9 li.product,
ul.products.product-card-layout-10 li.product,
ul.products.product-card-layout-11 li.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Desktop: 992px and up */
@media (min-width: 992px) {
    ul.products.product-card-layout-lilo.columns-4,
    ul.products.product-card-layout-7.columns-4,
    ul.products.product-card-layout-8.columns-4,
    ul.products.product-card-layout-9.columns-4,
    ul.products.product-card-layout-10.columns-4,
    ul.products.product-card-layout-11.columns-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    ul.products.product-card-layout-lilo.columns-3,
    ul.products.product-card-layout-7.columns-3,
    ul.products.product-card-layout-8.columns-3,
    ul.products.product-card-layout-9.columns-3,
    ul.products.product-card-layout-10.columns-3,
    ul.products.product-card-layout-11.columns-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    ul.products.product-card-layout-lilo.columns-5,
    ul.products.product-card-layout-7.columns-5,
    ul.products.product-card-layout-8.columns-5,
    ul.products.product-card-layout-9.columns-5,
    ul.products.product-card-layout-10.columns-5,
    ul.products.product-card-layout-11.columns-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    ul.products.product-card-layout-lilo.columns-2,
    ul.products.product-card-layout-7.columns-2,
    ul.products.product-card-layout-8.columns-2,
    ul.products.product-card-layout-9.columns-2,
    ul.products.product-card-layout-10.columns-2,
    ul.products.product-card-layout-11.columns-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    ul.products.product-card-layout-lilo.columns-6,
    ul.products.product-card-layout-7.columns-6,
    ul.products.product-card-layout-8.columns-6,
    ul.products.product-card-layout-9.columns-6,
    ul.products.product-card-layout-10.columns-6,
    ul.products.product-card-layout-11.columns-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    ul.products.product-card-layout-lilo:not([class*="columns-"]),
    ul.products.product-card-layout-7:not([class*="columns-"]),
    ul.products.product-card-layout-8:not([class*="columns-"]),
    ul.products.product-card-layout-9:not([class*="columns-"]),
    ul.products.product-card-layout-10:not([class*="columns-"]),
    ul.products.product-card-layout-11:not([class*="columns-"]) {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}

/* Tablet: 768px to 991px */
@media (min-width: 768px) and (max-width: 991px) {
    ul.products.product-card-layout-lilo,
    ul.products.product-card-layout-7,
    ul.products.product-card-layout-8,
    ul.products.product-card-layout-9,
    ul.products.product-card-layout-10,
    ul.products.product-card-layout-11 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }
}

/* Mobile: up to 767px */
@media (max-width: 767px) {
    ul.products.product-card-layout-lilo,
    ul.products.product-card-layout-7,
    ul.products.product-card-layout-8,
    ul.products.product-card-layout-9,
    ul.products.product-card-layout-10,
    ul.products.product-card-layout-11 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    ul.products.product-card-layout-lilo.mobile-col-1,
    ul.products.product-card-layout-7.mobile-col-1,
    ul.products.product-card-layout-8.mobile-col-1,
    ul.products.product-card-layout-9.mobile-col-1,
    ul.products.product-card-layout-10.mobile-col-1,
    ul.products.product-card-layout-11.mobile-col-1 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    ul.products.product-card-layout-lilo.mobile-col-2,
    ul.products.product-card-layout-7.mobile-col-2,
    ul.products.product-card-layout-8.mobile-col-2,
    ul.products.product-card-layout-9.mobile-col-2,
    ul.products.product-card-layout-10.mobile-col-2,
    ul.products.product-card-layout-11.mobile-col-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Small mobile: up to 480px */
@media (max-width: 480px) {
    ul.products.product-card-layout-lilo,
    ul.products.product-card-layout-7,
    ul.products.product-card-layout-8,
    ul.products.product-card-layout-9,
    ul.products.product-card-layout-10,
    ul.products.product-card-layout-11 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    ul.products.product-card-layout-lilo.mobile-col-1,
    ul.products.product-card-layout-7.mobile-col-1,
    ul.products.product-card-layout-8.mobile-col-1,
    ul.products.product-card-layout-9.mobile-col-1,
    ul.products.product-card-layout-10.mobile-col-1,
    ul.products.product-card-layout-11.mobile-col-1 {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* ==========================================================================
   LAYOUT LILO & LAYOUT 7: MINIMALIST LUXURY CARD - IMAGE 1 (CHAIR)
   ========================================================================== */
ul.products.product-card-layout-lilo li.product,
ul.products.product-card-layout-7 li.product,
.product-card-layout-lilo li.product,
.product-card-layout-7 li.product {
    margin: 0 !important;
}

/* Strictly suppress Motta's duplicate taxonomy and stray meta elements in custom cards */
ul.products.product-card-layout-lilo li.product .meta-wrapper,
ul.products.product-card-layout-lilo li.product .product-taxonomy,
ul.products.product-card-layout-lilo li.product .product-sku,
ul.products.product-card-layout-7 li.product .meta-wrapper,
ul.products.product-card-layout-7 li.product .product-taxonomy,
ul.products.product-card-layout-7 li.product .product-sku,
.product-card-layout-lilo .meta-wrapper,
.product-card-layout-lilo .product-taxonomy,
.product-card-layout-lilo .product-sku,
.product-card-layout-7 .meta-wrapper,
.product-card-layout-7 .product-taxonomy,
.product-card-layout-7 .product-sku {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul.products.product-card-layout-lilo li.product .product-inner,
ul.products.product-card-layout-7 li.product .product-inner {
    background: var(--motta-custom-bg, #f4f3ef) !important;
    border-radius: var(--motta-custom-radius, 28px) !important;
    padding: var(--motta-custom-padding, 20px) !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

ul.products.product-card-layout-lilo li.product:hover .product-inner,
ul.products.product-card-layout-7 li.product:hover .product-inner {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.08) !important;
}

/* Badges - Pill capsules like reference */
ul.products.product-card-layout-lilo li.product .woocommerce-badges,
ul.products.product-card-layout-7 li.product .woocommerce-badges {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 5 !important;
    display: flex !important;
    gap: 6px !important;
}

ul.products.product-card-layout-lilo li.product .woocommerce-badges .onsale,
ul.products.product-card-layout-7 li.product .woocommerce-badges .onsale {
    background: #18181b !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}

ul.products.product-card-layout-lilo li.product .woocommerce-badges span:not(.onsale),
ul.products.product-card-layout-7 li.product .woocommerce-badges span:not(.onsale) {
    background: #ffffff !important;
    color: #18181b !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Thumbnail */
ul.products.product-card-layout-lilo li.product .product-thumbnail,
ul.products.product-card-layout-7 li.product .product-thumbnail {
    background: transparent !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

ul.products.product-card-layout-lilo li.product .product-thumbnail img,
ul.products.product-card-layout-7 li.product .product-thumbnail img {
    border-radius: 20px !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
}

/* Content Wrapper */
.motta-card-lilo-wrapper {
    display: flex !important;
    flex-direction: column !important;
    margin-top: auto !important;
    width: 100% !important;
    container-type: inline-size;
}

/* Action Island Row */
.motta-card-actions-island {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 2px !important;
    width: 100% !important;
}

.motta-card-island-left {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* 2-Line Attribute Pill (Label on top, Values/Swatches on bottom - compact transparent border matching reference) */
.motta-card-attr-pill {
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: max-content !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    min-height: 40px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    cursor: default !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.motta-card-attr-pill:hover {
    border-color: rgba(255, 255, 255, 0.75) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.motta-card-attr-pill .pill-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    letter-spacing: 0.3px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important; /* CRITICAL: prevents vertical letter-by-letter wrapping in narrow carousel/columns */
}

.motta-card-attr-pill .pill-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Middle Island: Rating Pill completely removed as requested */
.motta-card-rating-pill {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Swatches Row inside the pill */
.motta-card-swatches-row {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Swatch circle */
.motta-card-swatch-item {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    position: relative !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.motta-card-swatch-item:hover {
    transform: scale(1.15) !important;
}

/* Ring on active/first swatch */
.motta-card-swatch-item:first-child,
.motta-card-swatch-item.is-active {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.7) !important;
}

.motta-card-swatch-more {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-left: 2px !important;
    line-height: 1 !important;
}

.motta-card-island-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
}

/* Rounded Square Icon Buttons: Wishlist & Bag inside compact transparent border */
.motta-card-island-right .motta-card-btn-item {
    display: inline-flex !important;
}

.motta-card-island-right .button,
.motta-card-island-right a.button,
.motta-card-island-right .wcboost-products-compare-button,
.motta-card-island-right .wcboost-wishlist-button,
.motta-card-island-right .motta-button,
.motta-card-island-right .motta-card-icon-btn,
.motta-card-island-right .product-add-to-cart_link {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    cursor: pointer !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.motta-card-island-right .button:hover,
.motta-card-island-right a.button:hover,
.motta-card-island-right .wcboost-products-compare-button:hover,
.motta-card-island-right .wcboost-wishlist-button:hover,
.motta-card-island-right .motta-button:hover,
.motta-card-island-right .motta-card-icon-btn:hover,
.motta-card-island-right .product-add-to-cart_link:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* Layout Lilo: strictly hide compare button to match 2-button reference */
ul.products.product-card-layout-lilo li.product .motta-card-compare-item,
ul.products.product-card-layout-7 li.product .motta-card-compare-item {
    display: none !important;
}

.motta-card-island-right svg,
.motta-card-island-right .motta-svg-icon {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    fill: none !important;
    margin: 0 !important;
}

/* Ensure the two rivet dots in the signature bag icon are filled */
.motta-card-island-right svg circle {
    fill: currentColor !important;
    stroke: none !important;
}

.motta-card-island-right .button_text,
.motta-card-island-right .screen-reader-text,
.motta-card-island-right .wcboost-products-compare-button__text,
.motta-card-island-right .add-to-wishlist-button__text,
.motta-card-island-right .motta-button__text {
    display: none !important;
}

/* Bottom Info Row: 2x2 Grid (Brand on top-left, Old Price on top-right, Title on bottom-left, Current Price on bottom-right) */
.motta-card-bottom-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    row-gap: 4px !important;
    column-gap: 12px !important;
    align-items: baseline !important;
    margin-top: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.motta-card-brand-label {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: baseline !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: var(--motta-custom-brand-color, #78716c) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    transition: color 0.2s ease !important;
}

/* Explicit high-contrast readable white styling for Lilo Card */
ul.products.product-card-layout-lilo li.product .motta-card-brand-label,
.product-card-layout-lilo .motta-card-brand-label,
.product-card-layout-lilo .motta-card-bottom-row .motta-card-brand-label {
    color: rgba(255, 255, 255, 0.88) !important;
}

.motta-card-price-regular {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: baseline !important;
    text-align: right !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--motta-custom-del-color, #78716c) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    transition: color 0.2s ease !important;
}

.motta-card-price-regular del {
    color: inherit !important;
    text-decoration: line-through !important;
}

ul.products.product-card-layout-lilo li.product .motta-card-price-regular,
ul.products.product-card-layout-lilo li.product .motta-card-price-regular del,
ul.products.product-card-layout-lilo li.product .motta-card-price-regular .woocommerce-Price-amount,
.product-card-layout-lilo .motta-card-price-regular,
.product-card-layout-lilo .motta-card-price-regular del,
.product-card-layout-lilo .motta-card-price-regular .woocommerce-Price-amount {
    color: rgba(255, 255, 255, 0.75) !important;
}

.motta-card-price-regular .price-from-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: inherit !important;
}

.motta-card-bottom-row .woocommerce-loop-product__title {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: baseline !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--motta-custom-title-color, #18181b) !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    transition: color 0.2s ease !important;
}

ul.products.product-card-layout-lilo li.product .woocommerce-loop-product__title,
ul.products.product-card-layout-lilo li.product .woocommerce-loop-product__title a,
.product-card-layout-lilo .woocommerce-loop-product__title,
.product-card-layout-lilo .woocommerce-loop-product__title a {
    color: #ffffff !important;
}

.motta-card-bottom-row .woocommerce-loop-product__title a {
    color: inherit !important;
    text-decoration: none !important;
}

.motta-card-price-current {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: baseline !important;
    text-align: right !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--motta-custom-price-color, #18181b) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    transition: color 0.2s ease !important;
}

ul.products.product-card-layout-lilo li.product .motta-card-price-current,
ul.products.product-card-layout-lilo li.product .motta-card-price-current ins,
ul.products.product-card-layout-lilo li.product .motta-card-price-current .woocommerce-Price-amount,
.product-card-layout-lilo .motta-card-price-current,
.product-card-layout-lilo .motta-card-price-current ins,
.product-card-layout-lilo .motta-card-price-current .woocommerce-Price-amount {
    color: #ffffff !important;
}

.motta-card-price-current ins {
    text-decoration: none !important;
}

/* Backward compatibility for price cell wrapper if present */
.motta-card-bottom-row .motta-card-price-cell {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    text-align: right !important;
}

.motta-card-price-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    line-height: 1.2 !important;
}

/* Container Query for Narrow Product Cards (e.g. Elementor multi-column carousel / heading block) */
@container (max-width: 175px) {
    .motta-card-actions-island {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .motta-card-island-left {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .motta-card-island-right {
        margin-inline-start: 0 !important;
        gap: 4px !important;
    }

    .motta-card-island-right .button,
    .motta-card-island-right a.button,
    .motta-card-island-right .motta-card-icon-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        border-radius: 8px !important;
    }

    .motta-card-island-right svg {
        width: 14px !important;
        height: 14px !important;
    }

    .motta-card-bottom-row {
        grid-template-columns: 100% !important;
        grid-template-rows: auto auto auto auto !important;
        row-gap: 2px !important;
        margin-top: 6px !important;
    }

    .motta-card-brand-label {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: 9px !important;
    }

    .motta-card-bottom-row .woocommerce-loop-product__title {
        grid-column: 1 !important;
        grid-row: 2 !important;
        font-size: 12px !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .motta-card-price-regular {
        grid-column: 1 !important;
        grid-row: 3 !important;
        text-align: start !important;
        font-size: 10px !important;
    }

    .motta-card-price-current {
        grid-column: 1 !important;
        grid-row: 4 !important;
        text-align: start !important;
        font-size: 13px !important;
    }
}

/* Responsive Card Elements for Layout Lilo & Layout 7 */
@media (max-width: 767px) {
    ul.products.product-card-layout-lilo li.product .product-inner,
    ul.products.product-card-layout-7 li.product .product-inner {
        padding: 10px !important;
        border-radius: 18px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    ul.products.product-card-layout-lilo li.product .product-thumbnail,
    ul.products.product-card-layout-7 li.product .product-thumbnail {
        border-radius: 12px !important;
        margin: 0 0 6px 0 !important;
    }

    ul.products.product-card-layout-lilo li.product .product-thumbnail img,
    ul.products.product-card-layout-7 li.product .product-thumbnail img {
        border-radius: 12px !important;
    }

    /* Badges */
    ul.products.product-card-layout-lilo li.product .woocommerce-badges,
    ul.products.product-card-layout-7 li.product .woocommerce-badges {
        top: 8px !important;
        left: 8px !important;
        gap: 4px !important;
    }

    ul.products.product-card-layout-lilo li.product .woocommerce-badges .onsale,
    ul.products.product-card-layout-7 li.product .woocommerce-badges .onsale,
    ul.products.product-card-layout-lilo li.product .woocommerce-badges span:not(.onsale),
    ul.products.product-card-layout-7 li.product .woocommerce-badges span:not(.onsale) {
        padding: 3px 8px !important;
        font-size: 9px !important;
        letter-spacing: 0.2px !important;
    }

    /* Content Wrapper */
    .motta-card-lilo-wrapper {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Action Island */
    .motta-card-actions-island {
        gap: 4px !important;
        margin-top: 6px !important;
        margin-bottom: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .motta-card-island-left {
        gap: 4px !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Attribute Pill */
    .motta-card-attr-pill {
        min-height: 32px !important;
        height: 32px !important;
        padding: 2px 7px !important;
        border-radius: 9px !important;
        border-width: 1px !important;
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
        width: fit-content !important;
        max-width: max-content !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    .motta-card-attr-pill .pill-label {
        font-size: 8px !important;
        margin-bottom: 1px !important;
        letter-spacing: 0.2px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .motta-card-attr-pill .pill-value {
        font-size: 10px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .motta-card-swatches-row {
        gap: 3px !important;
        flex-wrap: nowrap !important;
        min-width: 0 !important;
    }

    .motta-card-swatch-item {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
    }

    .motta-card-swatch-item:first-child,
    .motta-card-swatch-item.is-active {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75) !important;
    }

    .motta-card-swatch-more {
        font-size: 9px !important;
        margin-left: 1px !important;
    }

    /* Wishlist & Bag Buttons */
    .motta-card-island-right {
        gap: 4px !important;
        flex: 0 0 auto !important;
    }

    .motta-card-island-right .button,
    .motta-card-island-right a.button,
    .motta-card-island-right .wcboost-products-compare-button,
    .motta-card-island-right .wcboost-wishlist-button,
    .motta-card-island-right .motta-button,
    .motta-card-island-right .motta-card-icon-btn,
    .motta-card-island-right .product-add-to-cart_link {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        border-radius: 10px !important;
        border-width: 1px !important;
    }

    .motta-card-island-right svg,
    .motta-card-island-right .motta-svg-icon {
        width: 15px !important;
        height: 15px !important;
        stroke-width: 1.8 !important;
    }

    /* Bottom Info Row */
    .motta-card-bottom-row {
        row-gap: 2px !important;
        column-gap: 6px !important;
        margin-top: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .motta-card-brand-label {
        font-size: 9px !important;
        letter-spacing: 0.4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .motta-card-price-regular {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .motta-card-bottom-row .woocommerce-loop-product__title {
        font-size: 12px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    .motta-card-price-current {
        font-size: 13px !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    ul.products.product-card-layout-lilo li.product .product-inner,
    ul.products.product-card-layout-7 li.product .product-inner {
        padding: 8px !important;
        border-radius: 16px !important;
    }

    .motta-card-actions-island {
        gap: 3px !important;
        margin-top: 4px !important;
    }

    .motta-card-island-left {
        gap: 2px !important;
        flex: 0 0 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .motta-card-attr-pill {
        min-height: 28px !important;
        height: 28px !important;
        padding: 2px 5px !important;
        border-radius: 8px !important;
        border-width: 1px !important;
        flex: 0 0 auto !important;
        width: fit-content !important;
        max-width: max-content !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    .motta-card-attr-pill .pill-label {
        font-size: 7.5px !important;
        white-space: nowrap !important;
    }

    .motta-card-attr-pill .pill-value {
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .motta-card-swatches-row {
        gap: 2.5px !important;
    }

    .motta-card-swatch-item {
        width: 11px !important;
        height: 11px !important;
        min-width: 11px !important;
        max-width: 11px !important;
    }

    .motta-card-island-right {
        gap: 3px !important;
    }

    .motta-card-island-right .button,
    .motta-card-island-right a.button,
    .motta-card-island-right .wcboost-products-compare-button,
    .motta-card-island-right .wcboost-wishlist-button,
    .motta-card-island-right .motta-button,
    .motta-card-island-right .motta-card-icon-btn,
    .motta-card-island-right .product-add-to-cart_link {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        border-radius: 8px !important;
    }

    .motta-card-island-right svg,
    .motta-card-island-right .motta-svg-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .motta-card-bottom-row {
        column-gap: 4px !important;
        margin-top: 6px !important;
    }

    .motta-card-brand-label {
        font-size: 8.5px !important;
    }

    .motta-card-price-regular {
        font-size: 9.5px !important;
    }

    .motta-card-bottom-row .woocommerce-loop-product__title {
        font-size: 11.5px !important;
    }

    .motta-card-price-current {
        font-size: 12.5px !important;
    }
}

/* ==========================================================================
   LAYOUT 8: AIRSTRIDE CLEAN SNEAKER - IMAGE 2
   ========================================================================== */
ul.products.product-card-layout-8 li.product,
.product-card-layout-8 li.product {
    margin: 0 !important;
}

ul.products.product-card-layout-8 li.product .product-inner {
    background: var(--motta-custom-bg, #ffffff) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--motta-custom-radius, 22px) !important;
    padding: var(--motta-custom-padding, 16px) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

ul.products.product-card-layout-8 li.product:hover .product-inner {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 32px rgba(0,0,0,0.08) !important;
    border-color: #cbd5e1 !important;
}

ul.products.product-card-layout-8 li.product .product-thumbnail {
    border-radius: 16px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 12px !important;
}

ul.products.product-card-layout-8 li.product .product-thumbnail .product-featured-icons {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

ul.products.product-card-layout-8 li.product .product-thumbnail .product-featured-icons a {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    color: #64748b !important;
}

ul.products.product-card-layout-8 li.product .product-variation-items .product-variation-items--item {
    border-radius: 50% !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
}

ul.products.product-card-layout-8 li.product .woocommerce-loop-product__title {
    color: var(--motta-custom-title-color, #0f172a) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 6px 0 2px !important;
}

ul.products.product-card-layout-8 li.product .price {
    color: var(--motta-custom-price-color, #0f172a) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.motta-card-subtitle {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 4px 0 12px !important;
    line-height: 1.4 !important;
}

ul.products.product-card-layout-8 li.product .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

ul.products.product-card-layout-8 li.product .product-actions .button {
    width: 100% !important;
    background: var(--motta-custom-btn-bg, #18181b) !important;
    color: var(--motta-custom-btn-color, #ffffff) !important;
    border-radius: var(--motta-custom-btn-radius, 14px) !important;
    padding: 13px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* ==========================================================================
   LAYOUT 9: WARM EARTHY & SIZES (SNEAKERS) - IMAGE 3
   ========================================================================== */
ul.products.product-card-layout-9 li.product,
.product-card-layout-9 li.product {
    margin: 0 !important;
}

ul.products.product-card-layout-9 li.product .product-inner {
    background: var(--motta-custom-bg, #fbf6ef) !important;
    border-radius: var(--motta-custom-radius, 24px) !important;
    padding: var(--motta-custom-padding, 18px) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(190, 150, 110, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

ul.products.product-card-layout-9 li.product .woocommerce-badges {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 5 !important;
}

ul.products.product-card-layout-9 li.product .woocommerce-badges .onsale {
    background: #c69b7b !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

ul.products.product-card-layout-9 li.product .woocommerce-loop-product__title {
    color: #a47653 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 8px 0 4px !important;
}

ul.products.product-card-layout-9 li.product .price {
    color: #a47653 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

ul.products.product-card-layout-9 li.product .price del {
    color: #c9ad96 !important;
    margin-left: 6px !important;
}

.motta-card-stock-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #a47653 !important;
    font-weight: 600 !important;
    margin: 6px 0 12px !important;
}

.motta-card-stock-status .stock-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
}

ul.products.product-card-layout-9 li.product .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

ul.products.product-card-layout-9 li.product .product-actions .button {
    width: 100% !important;
    background: #c69b7b !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 13px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* ==========================================================================
   LAYOUT 10: FASHION BAGS & SLIDER - IMAGE 4
   ========================================================================== */
ul.products.product-card-layout-10 li.product,
.product-card-layout-10 li.product {
    margin: 0 !important;
}

ul.products.product-card-layout-10 li.product .product-inner {
    background: var(--motta-custom-bg, #ffffff) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: var(--motta-custom-radius, 18px) !important;
    padding: var(--motta-custom-padding, 16px) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

ul.products.product-card-layout-10 li.product .woocommerce-badges .onsale,
ul.products.product-card-layout-10 li.product .woocommerce-badges .custom-badge {
    background: #374151 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

ul.products.product-card-layout-10 li.product .motta-card-brand-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    letter-spacing: 0.5px !important;
    margin-top: 8px !important;
}

ul.products.product-card-layout-10 li.product .woocommerce-loop-product__title {
    color: var(--motta-custom-title-color, #0f172a) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 4px 0 6px !important;
}

ul.products.product-card-layout-10 li.product .price {
    color: var(--motta-custom-price-color, #0f172a) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

ul.products.product-card-layout-10 li.product .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

ul.products.product-card-layout-10 li.product .product-actions .button {
    width: 100% !important;
    background: var(--motta-custom-btn-bg, #252e42) !important;
    color: var(--motta-custom-btn-color, #ffffff) !important;
    border-radius: var(--motta-custom-btn-radius, 18px) !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* ==========================================================================
   LAYOUT 11: NIKE SPORTSWEAR PRO (FULL) - IMAGE 5
   ========================================================================== */
ul.products.product-card-layout-11 li.product,
.product-card-layout-11 li.product {
    margin: 0 !important;
}

ul.products.product-card-layout-11 li.product .product-inner {
    background: var(--motta-custom-bg, #ffffff) !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: var(--motta-custom-radius, 22px) !important;
    padding: var(--motta-custom-padding, 18px) !important;
    box-shadow: 0 6px 22px rgba(0,0,0,0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

ul.products.product-card-layout-11 li.product:hover .product-inner {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 36px rgba(0,0,0,0.09) !important;
}

ul.products.product-card-layout-11 li.product .woocommerce-badges {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
}

ul.products.product-card-layout-11 li.product .woocommerce-badges span {
    border-radius: 8px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

ul.products.product-card-layout-11 li.product .woocommerce-badges .onsale {
    background: #f43f5e !important;
    color: #ffffff !important;
}

ul.products.product-card-layout-11 li.product .product-thumbnail .product-featured-icons {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

ul.products.product-card-layout-11 li.product .product-thumbnail .product-featured-icons a {
    background: #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
    color: #475569 !important;
}

.motta-card-free-shipping {
    display: inline-block !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-left: auto !important;
}

ul.products.product-card-layout-11 li.product .woocommerce-loop-product__title {
    color: var(--motta-custom-title-color, #0f172a) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 10px 0 4px !important;
}

ul.products.product-card-layout-11 li.product .price {
    color: var(--motta-custom-price-color, #0f172a) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 6px 0 !important;
}

ul.products.product-card-layout-11 li.product .price del {
    color: #94a3b8 !important;
    margin-left: 6px !important;
    font-size: 14px !important;
}

ul.products.product-card-layout-11 li.product .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

ul.products.product-card-layout-11 li.product .product-actions .button {
    width: 100% !important;
    background: var(--motta-custom-btn-bg, #0f172a) !important;
    color: var(--motta-custom-btn-color, #ffffff) !important;
    border-radius: var(--motta-custom-btn-radius, 14px) !important;
    padding: 13px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

ul.products.product-card-layout-11 li.product .product-actions .button:hover {
    background: #1e293b !important;
}

/* ==========================================================================
   BUTTON DE-DUPLICATION & SINGLE FULL-WIDTH FIX FOR LAYOUTS 7 TO 11
   ========================================================================== */
/* Hide duplicate add-to-cart link in Layout Lilo & 7 */
ul.products.product-card-layout-lilo li.product .product-actions .product-add-to-cart_link ~ .product-add-to-cart_link,
ul.products.product-card-layout-lilo li.product .product-actions .motta-button--atc ~ .motta-button--atc,
ul.products.product-card-layout-lilo li.product .product-actions .motta-button--quickview,
ul.products.product-card-layout-lilo li.product .product-actions .added_to_cart,
ul.products.product-card-layout-7 li.product .product-actions .product-add-to-cart_link ~ .product-add-to-cart_link,
ul.products.product-card-layout-7 li.product .product-actions .motta-button--atc ~ .motta-button--atc,
ul.products.product-card-layout-7 li.product .product-actions .motta-button--quickview,
ul.products.product-card-layout-7 li.product .product-actions .added_to_cart {
    display: none !important;
}

/* Layouts 8, 9, 10, 11: strictly single full-width button (hide any duplicated buttons/quickview) */
ul.products.product-card-layout-8 li.product .product-actions .button ~ .button,
ul.products.product-card-layout-9 li.product .product-actions .button ~ .button,
ul.products.product-card-layout-10 li.product .product-actions .button ~ .button,
ul.products.product-card-layout-11 li.product .product-actions .button ~ .button,
ul.products.product-card-layout-8 li.product .product-actions a.button ~ a.button,
ul.products.product-card-layout-9 li.product .product-actions a.button ~ a.button,
ul.products.product-card-layout-10 li.product .product-actions a.button ~ a.button,
ul.products.product-card-layout-11 li.product .product-actions a.button ~ a.button,
ul.products.product-card-layout-8 li.product .product-actions a + a,
ul.products.product-card-layout-9 li.product .product-actions a + a,
ul.products.product-card-layout-10 li.product .product-actions a + a,
ul.products.product-card-layout-11 li.product .product-actions a + a,
ul.products.product-card-layout-8 li.product .product-actions .motta-button--quickview,
ul.products.product-card-layout-9 li.product .product-actions .motta-button--quickview,
ul.products.product-card-layout-10 li.product .product-actions .motta-button--quickview,
ul.products.product-card-layout-11 li.product .product-actions .motta-button--quickview,
ul.products.product-card-layout-8 li.product .product-actions .added_to_cart,
ul.products.product-card-layout-9 li.product .product-actions .added_to_cart,
ul.products.product-card-layout-10 li.product .product-actions .added_to_cart,
ul.products.product-card-layout-11 li.product .product-actions .added_to_cart {
    display: none !important;
}

/* Ensure the remaining button takes 100% width cleanly */
ul.products.product-card-layout-8 li.product .product-actions > .button:first-of-type,
ul.products.product-card-layout-9 li.product .product-actions > .button:first-of-type,
ul.products.product-card-layout-10 li.product .product-actions > .button:first-of-type,
ul.products.product-card-layout-11 li.product .product-actions > .button:first-of-type,
ul.products.product-card-layout-8 li.product .product-actions > a.button:first-of-type,
ul.products.product-card-layout-9 li.product .product-actions > a.button:first-of-type,
ul.products.product-card-layout-10 li.product .product-actions > a.button:first-of-type,
ul.products.product-card-layout-11 li.product .product-actions > a.button:first-of-type {
    width: 100% !important;
    flex: 1 1 100% !important;
}


/* ==========================================================================
   HEADER LILO - FLOATING PILL CAPSULE (OHIO LUXURY STYLE)
   ========================================================================== */

/* Fix Sticky Header: Override Motta parent overflow: hidden which breaks position: sticky */
html,
body.has-header-lilo,
body:has(.header-lilo) {
    overflow-x: clip !important;
}

body.has-header-lilo #page.site,
.site:has(.header-lilo) {
    overflow: visible !important;
}

/* Ensure Offscreen Drawers (Cart, Menu, Filter) appear above Header with top z-index */
.offscreen-panel,
#cart-panel,
#hamburger-panel,
#mobile-menu-panel,
.filter-sidebar-panel {
    z-index: 100000 !important;
}

.offscreen-panel .panel__backdrop,
.offscreen-panel .sidebar__backdrop {
    z-index: 100001 !important;
}

.offscreen-panel .panel__container,
.offscreen-panel .sidebar__container {
    z-index: 100002 !important;
}

body.offcanvas-opened #site-header,
body.cart-panel-opened #site-header,
body.offcanvas-opened .site-header,
body.cart-panel-opened .site-header {
    z-index: 998 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   HEADER TRANSPARENT - FLOATING OVER PAGE HERO / CONTENT (NO BACKGROUND GAP)
   ========================================================================== */
body.has-header-transparent #site-header,
#site-header.header-transparent {
    position: sticky !important;
    top: 14px !important;
    margin-bottom: -72px !important; /* Pulls page content/hero banner up to 0px behind the header */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 1000 !important;
}

body.has-header-transparent #site-header .site-header__section,
#site-header.header-transparent .site-header__section,
body.has-header-transparent #site-header .header-main,
#site-header.header-transparent .header-main,
body.has-header-transparent #site-header .site-header__desktop,
body.has-header-transparent #site-header .site-header__mobile,
#site-header.header-transparent .site-header__desktop,
#site-header.header-transparent .site-header__mobile {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body.has-header-transparent #site-header-minimized,
#site-header.header-transparent ~ #site-header-minimized,
.has-header-transparent #site-header-minimized {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Light text on transparent header for dark heroes/sliders */
.header-transparent-text-light .header-lilo .primary-navigation > ul > li > a,
.header-transparent-text-light .header-lilo .header-search svg,
.header-transparent-text-light .header-lilo .header-account svg,
.header-transparent-text-light .header-lilo .header-wishlist svg,
.header-transparent-text-light .header-lilo .header-cart svg,
.header-transparent-text-light .header-lilo .hamburger-pill-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.header-transparent-text-light .header-lilo .header-hamburger,
.header-transparent-text-light .header-lilo .header-account .motta-button,
.header-transparent-text-light .header-lilo .header-cart a.motta-button,
.header-transparent-text-light .header-lilo .header-search .motta-button {
    background: rgba(255, 255, 255, 0.18) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

.header-transparent-text-light .header-lilo .header-main .site-header__container,
.header-transparent-text-light .header-lilo .header-mobile-main .site-header__container {
    background: rgba(0, 0, 0, 0.35) !important;
    background-color: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 991px) {
    body.has-header-transparent #site-header,
    #site-header.header-transparent {
        top: 8px !important;
        margin-bottom: -60px !important;
    }
}

/* Outer Site Header Container (Strictly isolated to Header Lilo) */
body.has-header-lilo #site-header,
#site-header:has(.header-lilo) {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    position: sticky !important;
    top: 14px !important;
    z-index: 1000 !important;
    padding: 0 !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.has-header-lilo:not(.has-header-transparent) #site-header,
#site-header:has(.header-lilo):not(.header-transparent) {
    margin: 0 !important;
}

/* WordPress Admin Bar offset so sticky header doesn't sit under the admin bar */
body.admin-bar.has-header-lilo #site-header,
body.admin-bar #site-header:has(.header-lilo),
.admin-bar #site-header:has(.header-lilo) {
    top: 46px !important;
}

/* ==========================================================================
   STRICT DESKTOP VS MOBILE HEADER VISIBILITY ISOLATION
   Guarantees that .site-header__desktop NEVER renders on mobile/tablet,
   and .site-header__mobile NEVER renders on desktop. Eliminates duplicate headers!
   ========================================================================== */
@media (max-width: 1199px) {
    #site-header .site-header__desktop,
    .site-header__desktop {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #site-header .site-header__mobile,
    .site-header__mobile {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    #site-header .site-header__desktop,
    .site-header__desktop {
        display: block !important;
    }

    #site-header .site-header__mobile,
    .site-header__mobile {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Hide duplicate Motta sticky header clones in Header Lilo */
.has-header-lilo .header-sticky,
.has-header-lilo .header-mobile-sticky,
.has-header-mobile-lilo .header-sticky,
.has-header-mobile-lilo .header-mobile-sticky,
.header-lilo .header-sticky,
.header-lilo .header-mobile-sticky,
.site-header__section.header-lilo .header-sticky,
.site-header__section.header-lilo .header-mobile-sticky {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.site-header__desktop.header-lilo,
.site-header__mobile.header-lilo,
.site-header__section.header-lilo {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Clear height & background from .header-main and .header-mobile-main */
.header-lilo .header-main,
.header-lilo .header-mobile-main {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: auto !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

/* Floating Capsule (The Pill itself applied to the container) */
.header-lilo .header-main .site-header__container,
.header-lilo .header-mobile-main .site-header__container {
    pointer-events: auto !important;
    max-width: 1380px !important;
    width: calc(100% - 48px) !important;
    margin: 0 auto !important;
    background: rgba(246, 246, 246, 0.85) !important;
    background-color: rgba(246, 246, 246, 0.85) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    padding: 6px 16px !important;
    min-height: 58px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --------------------------------------------------------------------------
   LEFT SECTION: CIRCULAR HAMBURGER + LOGO
   -------------------------------------------------------------------------- */
.header-lilo .header-left-items {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-lilo .header-left-items > * {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* Circular Hamburger Button */
.header-lilo .header-hamburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    border-radius: 50% !important;
    background: #eaeaea !important;
    background-color: #eaeaea !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.header-lilo .header-hamburger:hover {
    background: #dfdfdf !important;
    background-color: #dfdfdf !important;
    transform: scale(1.04) !important;
}

.header-lilo .header-hamburger .hamburger-pill-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #18181b !important;
}

.header-lilo .header-hamburger .hamburger-pill-icon svg {
    stroke: #18181b !important;
    width: 20px !important;
    height: 20px !important;
}

/* Site Logo */
.header-lilo .header-logo {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-lilo .header-logo img {
    max-height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
}

.header-lilo .header-logo .logo-text,
.header-lilo .header-logo a {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    letter-spacing: -0.02em !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   CENTER SECTION: PRIMARY NAVIGATION MENU
   -------------------------------------------------------------------------- */
.header-lilo .header-center-items {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    padding: 0 16px !important;
}

.header-lilo .header-center-items .primary-navigation {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-lilo .header-center-items .primary-navigation > ul {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    height: auto !important;
}

.header-lilo .header-center-items .primary-navigation > ul > li {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
}

.header-lilo .header-center-items .primary-navigation > ul > li > a {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #18181b !important;
    text-decoration: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    letter-spacing: -0.01em !important;
    transition: color 0.2s ease !important;
}

/* Elegant Underline Effect directly hugging the text letters on Hover */
.header-lilo .header-center-items .primary-navigation > ul > li > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: #18181b !important;
    background-color: #18181b !important;
    border-radius: 2px !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.header-lilo .header-center-items .primary-navigation > ul > li > a:hover {
    color: #000000 !important;
    background: transparent !important;
    background-color: transparent !important;
}

.header-lilo .header-center-items .primary-navigation > ul > li > a:hover::after {
    transform: scaleX(1) !important;
}

/* --------------------------------------------------------------------------
   RIGHT SECTION: MATCHING CIRCULAR ACTION BUTTONS (40PX)
   -------------------------------------------------------------------------- */
.header-lilo .header-right-items {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 0 !important;
}

/* Strictly clear all parent margins on all children so gap works uniformly */
.header-lilo .header-right-items > * {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

/* Action Button Wrapper Containers */
.header-lilo .header-search,
.header-lilo .header-account,
.header-lilo .header-compare,
.header-lilo .header-wishlist,
.header-lilo .header-cart {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Circular Buttons: Account, Wishlist, Search, Compare, Cart */
.header-lilo .header-search .motta-button,
.header-lilo .header-search a.motta-button,
.header-lilo .header-search-icon,
.header-lilo .header-account .motta-button,
.header-lilo .header-account a.motta-button,
.header-lilo .header-compare .motta-button,
.header-lilo .header-compare a.motta-button,
.header-lilo .header-wishlist .motta-button,
.header-lilo .header-wishlist a.motta-button,
.header-lilo .header-cart .motta-button,
.header-lilo .header-cart a.motta-button,
.header-lilo .header-cart .motta-button--base,
.header-lilo .header-cart .motta-button--circular {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #161517 !important;
    background: #ededed !important;
    background-color: #ededed !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    position: relative !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.header-lilo .header-search .motta-button:hover,
.header-lilo .header-search-icon:hover,
.header-lilo .header-account .motta-button:hover,
.header-lilo .header-account a.motta-button:hover,
.header-lilo .header-compare .motta-button:hover,
.header-lilo .header-wishlist .motta-button:hover,
.header-lilo .header-cart a.motta-button:hover {
    background: #e2e2e2 !important;
    background-color: #e2e2e2 !important;
    transform: scale(1.04) !important;
}

.header-lilo .header-search svg,
.header-lilo .header-search-icon svg,
.header-lilo .header-account svg,
.header-lilo .header-compare svg,
.header-lilo .header-wishlist svg,
.header-lilo .header-cart a.motta-button svg {
    width: 20px !important;
    height: 20px !important;
    stroke: #161517 !important;
    color: #161517 !important;
}

/* Ensure icon wrapper is perfectly centered in circular buttons */
.header-lilo .header-cart .motta-button__icon,
.header-lilo .header-account .motta-button__icon,
.header-lilo .header-search .motta-button__icon,
.header-lilo .header-wishlist .motta-button__icon,
.header-lilo .header-compare .motta-button__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* Strictly suppress any button text or subtotal inside Header Lilo */
.header-lilo .header-cart .motta-button__text,
.header-lilo .header-account .motta-button__text,
.header-lilo .header-search .motta-button__text,
.header-lilo .header-wishlist .motta-button__text,
.header-lilo .header-compare .motta-button__text,
.header-lilo .header-cart .header-cart__subtotal,
.header-lilo .header-cart .amount,
.header-lilo .header-cart .woocommerce-Price-amount {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* User Avatar inside Circular Account button when enabled in Customizer */
.header-lilo .header-account .motta-button img.avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

/* Wishlist & Compare Counter Badges */
.header-lilo .header-wishlist .header-counter,
.header-lilo .header-compare .header-counter {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    line-height: 17px !important;
    border-radius: 50% !important;
    background: #18181b !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Cart Counter Badge - Perfect 18px Circle, Single Digits Perfectly Centered */
.header-lilo .header-cart .header-cart__counter,
.header-lilo .header-cart .header-counter {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    border-radius: 50% !important;
    background: #161517 !important;
    background-color: #161517 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: content-box !important;
    pointer-events: none !important;
    visibility: visible !important;
}

/* Subtotal Text & Price (zsh.00 / 0.00 EGP) - Hide by default in Pill */
.header-lilo .header-cart:not(.header-cart--has-subtotal) .header-cart__subtotal,
.header-lilo .header-cart:not(.header-cart--has-subtotal) .amount,
.header-lilo .header-cart:not(.header-cart--has-subtotal) .woocommerce-Price-amount {
    display: none;
}

/* --------------------------------------------------------------------------
   MOBILE RESPONSIVENESS (STRICTLY SCOPED TO HEADER LILO)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    body.has-header-lilo #site-header,
    #site-header:has(.header-lilo) {
        position: sticky !important;
        top: 8px !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        pointer-events: none !important;
        z-index: 1000 !important;
    }

    body.has-header-lilo:not(.has-header-transparent) #site-header,
    #site-header:has(.header-lilo):not(.header-transparent) {
        margin: 0 !important;
    }

    body.admin-bar.has-header-lilo #site-header,
    body.admin-bar #site-header:has(.header-lilo),
    .admin-bar #site-header:has(.header-lilo) {
        top: 54px !important;
    }

    .site-header__mobile.header-lilo,
    .site-header__mobile.header-lilo .header-mobile-main,
    .header-lilo.site-header__mobile,
    .header-lilo .header-mobile-main {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        height: auto !important;
        min-height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }

    /* Floating Capsule Pill Container on Mobile */
    .header-lilo .header-mobile-main .site-header__container,
    .site-header__mobile.header-lilo .header-mobile-main .site-header__container {
        max-width: 540px !important;
        width: calc(100% - 20px) !important;
        margin: 0 auto !important;
        background: rgba(246, 246, 246, 0.94) !important;
        background-color: rgba(246, 246, 246, 0.94) !important;
        border-radius: 9999px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        padding: 0 6px !important;
        min-height: 52px !important;
        height: 52px !important;
        max-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        pointer-events: auto !important;
        box-sizing: border-box !important;
    }

    /* Left Group: Circular Hamburger + Logo */
    .header-lilo .header-mobile-main .header-left-items {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-lilo .header-mobile-main .header-hamburger {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        border-radius: 50% !important;
        background: #ededed !important;
        background-color: #ededed !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        color: #161517 !important;
        transition: background-color 0.2s ease, transform 0.2s ease !important;
    }

    .header-lilo .header-mobile-main .header-hamburger:active {
        background-color: #e2e2e2 !important;
        transform: scale(0.96) !important;
    }

    .header-lilo .header-mobile-main .header-hamburger svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #161517 !important;
        stroke-width: 2px !important;
    }

    .header-lilo .header-mobile-main .header-logo img {
        max-height: 26px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Right Group: Circular Action Buttons */
    .header-lilo .header-mobile-main .header-right-items {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
    }

    .header-lilo .header-mobile-main .header-right-items > * {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Circular Cart Button on Mobile */
    .header-lilo .header-mobile-main .header-cart a.motta-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        border-radius: 50% !important;
        background: #ededed !important;
        background-color: #ededed !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        color: #161517 !important;
        transition: background-color 0.2s ease, transform 0.2s ease !important;
    }

    .header-lilo .header-mobile-main .header-cart a.motta-button:active {
        background-color: #e2e2e2 !important;
        transform: scale(0.96) !important;
    }

    .header-lilo .header-mobile-main .header-cart a.motta-button svg {
        width: 18px !important;
        height: 18px !important;
        stroke: #161517 !important;
        fill: none !important;
        color: #161517 !important;
    }

    /* Cart Counter Badge on Mobile - 18px Circle */
    .header-lilo .header-mobile-main .header-cart .header-cart__counter,
    .header-lilo .header-mobile-main .header-cart .header-counter {
        position: absolute !important;
        top: -1px !important;
        right: -1px !important;
        min-width: 18px !important;
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        background: #161517 !important;
        background-color: #161517 !important;
        color: #ffffff !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: center !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-sizing: content-box !important;
        pointer-events: none !important;
    }

    /* Strictly Hide Price / Subtotal on Mobile */
    .header-lilo .header-mobile-main .header-cart .header-cart__subtotal,
    .header-lilo .header-mobile-main .header-cart .amount,
    .header-lilo .header-mobile-main .header-cart .woocommerce-Price-amount,
    .header-lilo .header-mobile-main .header-cart .motta-button__text {
        display: none !important;
    }

    /* Circular Account, Search, Wishlist Buttons on Mobile */
    .header-lilo .header-mobile-main .header-account .motta-button,
    .header-lilo .header-mobile-main .header-search .motta-button,
    .header-lilo .header-mobile-main .header-wishlist .motta-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        border-radius: 50% !important;
        background: #ededed !important;
        background-color: #ededed !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        color: #161517 !important;
        transition: background-color 0.2s ease, transform 0.2s ease !important;
    }

    .header-lilo .header-mobile-main .header-account .motta-button svg,
    .header-lilo .header-mobile-main .header-search .motta-button svg,
    .header-lilo .header-mobile-main .header-wishlist .motta-button svg {
        width: 18px !important;
        height: 18px !important;
        color: #161517 !important;
        fill: none !important;
        stroke: #161517 !important;
        stroke-width: 1.8px !important;
    }

    .header-lilo .header-mobile-main .header-account .motta-button__text,
    .header-lilo .header-mobile-main .header-account .motta-button__subtext,
    .header-lilo .header-mobile-main .header-account .motta-button__text--account {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .header-lilo .header-mobile-main .site-header__container {
        width: calc(100% - 16px) !important;
        padding: 0 5px !important;
        min-height: 48px !important;
        height: 48px !important;
        max-height: 48px !important;
    }

    .header-lilo .header-mobile-main .header-hamburger,
    .header-lilo .header-mobile-main .header-cart a.motta-button,
    .header-lilo .header-mobile-main .header-account .motta-button,
    .header-lilo .header-mobile-main .header-search .motta-button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
    }

    .header-lilo .header-mobile-main .header-logo img {
        max-height: 23px !important;
    }
}