/*
 * Lili Gallery - responsive product UI
 * Version: 2.5.0
 * Native WoodMart JS/hover behavior remains untouched.
 */

:root {
    --lili-r-card-x: 16px;
    --lili-r-card-y: 15px;
    --lili-r-card-radius: var(--lili-ui-radius, 9px);
    --lili-r-accent: var(--wd-primary-color, #8f1b86);
    --lili-r-text: #242843;
    --lili-r-muted: #9398a6;
    --lili-r-line: #edf0f4;
}

/* Consistent image geometry across product widgets and shop/archive loops. */
:where(.elementor-widget-wd_products,.elementor-widget-wd_products_tabs,.wd-products-tabs,.wd-products-element,.related-products,.upsells-products,.cross-sells,.wd-wishlist-content,body.woocommerce-shop,body.tax-product_cat,body.tax-product_tag,body.post-type-archive-product)
.wd-product:not(.product-list-item):not(.wd-hover-small):not(.wd-hover-info):not(.wd-hover-tiled) .product-element-top {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
}

:where(.elementor-widget-wd_products,.elementor-widget-wd_products_tabs,.wd-products-tabs,.wd-products-element,.related-products,.upsells-products,.cross-sells,.wd-wishlist-content,body.woocommerce-shop,body.tax-product_cat,body.tax-product_tag,body.post-type-archive-product)
.wd-product:not(.product-list-item):not(.wd-hover-small):not(.wd-hover-info):not(.wd-hover-tiled) :is(.product-image-link,.wd-product-img-link) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 14px;
}

:where(.elementor-widget-wd_products,.elementor-widget-wd_products_tabs,.wd-products-tabs,.wd-products-element,.related-products,.upsells-products,.cross-sells,.wd-wishlist-content,body.woocommerce-shop,body.tax-product_cat,body.tax-product_tag,body.post-type-archive-product)
.wd-product:not(.product-list-item) .product-element-top img {
    width: 100%;
    height: 100%;
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    object-position: center;
}

/* Avoid desktop hover lift on touch/tablet. */
@media (hover: none), (max-width: 1024px) {
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:hover .product-wrapper {
        transform: none !important;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --lili-r-card-x: 14px;
        --lili-r-card-y: 14px;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) :is(.product-element-bottom,.product-information) {
        padding: 12px var(--lili-r-card-x) var(--lili-r-card-y) !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .wd-entities-title {
        min-height: 44px !important;
        max-height: 44px !important;
        margin-bottom: 7px !important;
        font-size: 12.5px !important;
        line-height: 1.75 !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price > .amount,
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price ins .amount {
        font-size: 17px !important;
    }

    .wd-product:not(.product-list-item) .product-element-top > .star-rating.lili-rating-on-image {
        right: 9px !important;
        bottom: 9px !important;
        min-width: 62px !important;
        height: 24px !important;
        padding: 4px 6px !important;
        font-size: 10px !important;
    }

    :is(.elementor-widget-wd_products,.elementor-widget-wd_products_tabs,.wd-products-tabs,.wd-products-element) .wd-nav-arrows.wd-pos-sep {
        --wd-arrow-width: 36px;
        --wd-arrow-height: 36px;
        --wd-arrow-size: 36px;
        --wd-arrow-offset-h: -30px !important;
    }

    :where(.elementor-widget-wd_products_tabs,.wd-products-tabs) .wd-tabs-header {
        margin-bottom: 14px;
    }
}

/* Phones */
@media (max-width: 767px) {
    :root {
        --lili-r-card-x: 10px;
        --lili-r-card-y: 11px;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .product-wrapper {
        border-radius: var(--lili-r-card-radius) !important;
        box-shadow: 0 1px 5px rgba(31,35,48,.04) !important;
    }

    :where(.elementor-widget-wd_products,.elementor-widget-wd_products_tabs,.wd-products-tabs,.wd-products-element,.related-products,.upsells-products,.cross-sells,.wd-wishlist-content,body.woocommerce-shop,body.tax-product_cat,body.tax-product_tag,body.post-type-archive-product)
    .wd-product:not(.product-list-item):not(.wd-hover-small):not(.wd-hover-info):not(.wd-hover-tiled) :is(.product-image-link,.wd-product-img-link) {
        padding: 8px;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) :is(.product-element-bottom,.product-information) {
        padding: 9px var(--lili-r-card-x) var(--lili-r-card-y) !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) > .product-wrapper > :is(.wd-entities-title,.price,.wd-swatches-product,.wd-product-stock) {
        margin-inline: var(--lili-r-card-x) !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .wd-entities-title {
        min-height: 38px !important;
        max-height: 38px !important;
        margin-top: 8px !important;
        margin-bottom: 5px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.7 !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price {
        gap: 2px 4px !important;
        margin-top: 5px !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price > .amount,
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price ins .amount {
        font-size: 14px !important;
        line-height: 1.25 !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price del,
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price del .amount {
        font-size: 8px !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .product-labels {
        top: 7px !important;
        right: 7px !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .product-label {
        padding: 4px 6px !important;
        font-size: 9px !important;
    }

    .wd-product:not(.product-list-item) .product-element-top > .star-rating.lili-rating-on-image {
        right: 7px !important;
        bottom: 7px !important;
        min-width: 56px !important;
        height: 22px !important;
        padding: 3px 5px !important;
        font-size: 9px !important;
    }

    /* Fixed CTA variants stay full width but become compact. */
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product.wd-hover-fw-button .wd-add-btn > a,
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product.wd-hover-standard .wd-add-btn > a {
        min-height: 38px !important;
        padding: 7px 8px !important;
        font-size: 11px !important;
    }

    :where(.elementor-widget-wd_products_tabs,.wd-products-tabs) .wd-nav-tabs {
        display: flex;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 7px !important;
        overflow-x: auto;
        padding: 0 2px 5px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    :where(.elementor-widget-wd_products_tabs,.wd-products-tabs) .wd-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    :where(.elementor-widget-wd_products_tabs,.wd-products-tabs) .wd-nav-tabs > li {
        flex: 0 0 auto;
    }

    :where(.elementor-widget-wd_products_tabs,.wd-products-tabs) .wd-nav-tabs > li > a {
        min-height: 36px !important;
        padding: 7px 11px !important;
        white-space: nowrap;
        font-size: 11px !important;
    }

    :is(.elementor-widget-wd_products,.elementor-widget-wd_products_tabs,.wd-products-tabs,.wd-products-element) .wd-nav-arrows.wd-pos-sep {
        --wd-arrow-width: 32px;
        --wd-arrow-height: 32px;
        --wd-arrow-size: 32px;
        --wd-arrow-offset-h: -18px !important;
    }

    :is(.elementor-widget-wd_products,.elementor-widget-wd_products_tabs,.wd-products-tabs,.wd-products-element) .wd-nav-arrows.wd-pos-sep .wd-arrow-inner {
        box-shadow: 0 4px 12px rgba(25,29,45,.10) !important;
    }
}

/* Very small phones */
@media (max-width: 390px) {
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .wd-entities-title {
        font-size: 10.5px !important;
    }

    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price > .amount,
    :where(.wd-products,.products,.wd-carousel,.wd-products-element) .wd-product:not(.product-list-item) .price ins .amount {
        font-size: 13px !important;
    }
}