/* =========================================================
   HappyLHR Compact Product Cards V1
   ========================================================= */

:root {
    --hz-compact-card-width: 232px;
    --hz-compact-image-height: 154px;
    --hz-compact-card-gap: 14px;
}

/*
|--------------------------------------------------------------------------
| Compact Swiper slides containing product cards
|--------------------------------------------------------------------------
*/

.swiper-slide:has(> .hzv5-product-card),
.swiper-slide:has(> .hzv5-wide-product) {
    width: var(--hz-compact-card-width) !important;
    min-width: var(--hz-compact-card-width) !important;
    max-width: var(--hz-compact-card-width) !important;
    flex: 0 0 var(--hz-compact-card-width) !important;
    height: auto !important;
    align-self: stretch !important;
}

/*
|--------------------------------------------------------------------------
| Compact card shell
|--------------------------------------------------------------------------
*/

.hzv5-product-card,
.hzv5-wide-product {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 302px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    border: 1px solid #e7ebf2 !important;
    box-shadow: 0 7px 22px rgba(15, 23, 42, .045) !important;
}

/*
|--------------------------------------------------------------------------
| Smaller image area while keeping full image visible
|--------------------------------------------------------------------------
*/

.hzv5-product-card .hzv5-product-img.has-real-image,
.hzv5-wide-product .hzv5-product-img.has-real-image {
    width: 100% !important;
    height: var(--hz-compact-image-height) !important;
    min-height: var(--hz-compact-image-height) !important;
    max-height: var(--hz-compact-image-height) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    padding: 8px !important;
    margin: 0 !important;

    background: #ffffff !important;
    border-radius: 14px 14px 0 0 !important;

    position: relative !important;
    transform: none !important;
    clip-path: none !important;
}

/*
|--------------------------------------------------------------------------
| Full product image inside compact area
|--------------------------------------------------------------------------
*/

.hzv5-product-card .hzv5-product-img.has-real-image > img,
.hzv5-wide-product .hzv5-product-img.has-real-image > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    position: static !important;
    inset: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;

    transform: none !important;
    scale: none !important;
    translate: none !important;

    clip-path: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/*
|--------------------------------------------------------------------------
| Disable old dummy decorative shapes
|--------------------------------------------------------------------------
*/

.hzv5-product-img.has-real-image::before,
.hzv5-product-img.has-real-image::after,
.has-real-image.phone::before,
.has-real-image.phone::after,
.has-real-image.airpods::before,
.has-real-image.airpods::after,
.has-real-image.watch::before,
.has-real-image.watch::after,
.has-real-image.boxes::before,
.has-real-image.boxes::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/*
|--------------------------------------------------------------------------
| Compact product text and price area
|--------------------------------------------------------------------------
*/

.hzv5-product-card .hzv5-product-body,
.hzv5-wide-product .hzv5-product-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;

    padding: 11px 11px 12px !important;
}

.hzv5-product-card h3,
.hzv5-product-card h4,
.hzv5-product-card .hzv5-product-title,
.hzv5-wide-product h3,
.hzv5-wide-product h4,
.hzv5-wide-product .hzv5-product-title {
    margin: 0 0 7px !important;

    font-size: 13px !important;
    line-height: 1.34 !important;
    font-weight: 520 !important;

    min-height: 35px !important;
    max-height: 35px !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hzv5-product-card strong,
.hzv5-wide-product strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.hzv5-product-card del,
.hzv5-wide-product del {
    font-size: 10px !important;
}

.hzv5-product-card small,
.hzv5-product-card .hzv5-product-meta,
.hzv5-wide-product small,
.hzv5-wide-product .hzv5-product-meta {
    font-size: 10px !important;
    line-height: 1.25 !important;
}

.hzv5-product-card .hzv5-discount,
.hzv5-wide-product .hzv5-discount {
    top: 8px !important;
    left: 8px !important;

    padding: 4px 8px !important;

    font-size: 9px !important;
}

/*
|--------------------------------------------------------------------------
| Ensure Swiper wrappers remain aligned
|--------------------------------------------------------------------------
*/

.hzv5-product-swiper .swiper-wrapper,
.hzv5-wide-swiper .swiper-wrapper {
    align-items: stretch !important;
}

.hzv5-product-swiper,
.hzv5-wide-swiper {
    overflow: hidden !important;
}

/*
|--------------------------------------------------------------------------
| Medium screens
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {
    :root {
        --hz-compact-card-width: 215px;
        --hz-compact-image-height: 145px;
    }

    .hzv5-product-card,
    .hzv5-wide-product {
        min-height: 288px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Tablets
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {
    :root {
        --hz-compact-card-width: 178px;
        --hz-compact-image-height: 128px;
        --hz-compact-card-gap: 10px;
    }

    .hzv5-product-card,
    .hzv5-wide-product {
        min-height: 264px !important;
    }

    .hzv5-product-card .hzv5-product-body,
    .hzv5-wide-product .hzv5-product-body {
        padding: 9px !important;
    }

    .hzv5-product-card h3,
    .hzv5-product-card h4,
    .hzv5-product-card .hzv5-product-title,
    .hzv5-wide-product h3,
    .hzv5-wide-product h4,
    .hzv5-wide-product .hzv5-product-title {
        font-size: 12px !important;
        min-height: 33px !important;
        max-height: 33px !important;
    }
}

/*
|--------------------------------------------------------------------------
| Small mobiles
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {
    :root {
        --hz-compact-card-width: 164px;
        --hz-compact-image-height: 118px;
    }

    .hzv5-product-card,
    .hzv5-wide-product {
        min-height: 248px !important;
    }
}