/* =========================================================================
   Mamoki — Product Card Beautifier (v3.0 — strict equal height)

   Triết lý: ÉP từng phần card có chiều cao CỐ ĐỊNH bằng max/min-height
   thay vì dựa vào line-clamp (vì Flatsome có CSS đè).
   ========================================================================== */

/* ---------- Equal height: col + product-small + box stretch full ---------- */
.row > .col,
.row > .col.has-hover {
    display: flex !important;
    flex-direction: column;
}
.row .col.has-hover .product-small,
.row .col .product-small,
.products .product {
    flex: 1 1 auto !important;
    width: 100%;
}

.product-small .box,
.products .product .box,
li.product .box {
    background: #fff;
    border: 1px solid #f0eae5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    height: 100%;
    display: flex !important;
    flex-direction: column;
}

/* Hover card */
.product-small .box:hover,
.products .product .box:hover,
li.product .box:hover {
    transform: translateY(-4px);
    border-color: rgba(185, 65, 44, .25);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, .06),
        0 16px 32px -12px rgba(185, 65, 44, .25);
}
@supports (border-color: color-mix(in srgb, red, blue)) {
    .product-small .box:hover,
    .products .product .box:hover,
    li.product .box:hover {
        border-color: color-mix(in srgb, var(--primary-color, #b9412c) 25%, transparent);
        box-shadow:
            0 4px 12px rgba(0, 0, 0, .06),
            0 16px 32px -12px color-mix(in srgb, var(--primary-color, #b9412c) 25%, transparent);
    }
}

/* ---------- Image area: chỉ thêm hover zoom ---------- */
.product-small .box-image,
.products .product .box-image,
li.product .box-image {
    flex-shrink: 0;
}
.product-small .box-image img,
.products .product .box-image img,
li.product .box-image img {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.product-small .box:hover .box-image img,
.products .product .box:hover .box-image img,
li.product .box:hover .box-image img {
    transform: scale(1.05);
}

/* ---------- Box text: stretch ---------- */
.product-small .box-text,
.products .product .box-text,
li.product .box-text {
    padding: 14px 14px 16px !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ---------- Category ---------- */
.product-small .category,
.products .product .category {
    font-size: .72rem !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #999 !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    /* ÉP 1 dòng */
    height: calc(.72rem * 1.3) !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ---------- Title: ÉP CỨNG max-height = 3 dòng ---------- */
.product-small .product-title,
.product-small .name,
.products .product .product-title,
.products .product .name,
li.product .product-title,
li.product .name {
    margin: 0 0 10px !important;
    font-size: .95rem !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    /* ÉP cứng 3 dòng */
    max-height: calc(.95rem * 1.45 * 3) !important;
    min-height: calc(.95rem * 1.45 * 3) !important;
    height: calc(.95rem * 1.45 * 3) !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Override luôn cả thẻ <a> bên trong title (Flatsome đôi khi set display) */
.product-small .product-title a,
.product-small .name a,
.products .product .product-title a,
.products .product .name a {
    color: #2a2a2a !important;
    transition: color .25s ease;
    display: inline !important;
}

.product-small .box:hover .product-title a,
.product-small .box:hover .name a,
.products .product .box:hover .product-title a,
.products .product .box:hover .name a {
    color: var(--primary-color, #b9412c) !important;
}

/* ---------- Price: ép xuống đáy + reserve 2 dòng (cards bằng nhau dù wrap hay không) ---------- */
.product-small .price-wrapper,
.products .product .price-wrapper {
    margin-top: auto !important;
}

.product-small .price,
.products .product .price,
li.product .price {
    line-height: 1.4 !important;
    /* Reserve 2 dòng: card có sale wrap xuống cũng OK, card không sale có chỗ trống */
    min-height: calc(1.4em * 2) !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    align-content: flex-end !important;
    gap: 4px 8px !important;
    justify-content: flex-start !important;
}

/* Giá gốc (gạch) - inline */
.product-small .price del,
.products .product .price del,
li.product .price del {
    color: #b3b3b3 !important;
    font-size: .85em !important;
    opacity: 1 !important;
    display: inline !important;
    margin: 0 !important;
}

/* Giá sale - inline */
.product-small .price ins,
.products .product .price ins,
li.product .price ins {
    text-decoration: none !important;
    background: transparent !important;
    display: inline !important;
    margin: 0 !important;
}
.product-small .price ins .amount,
.product-small .price > .amount,
.products .product .price ins .amount,
.products .product .price > .amount,
li.product .price ins .amount,
li.product .price > .amount {
    color: var(--primary-color, #b9412c) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

/* ---------- Star rating ---------- */
.product-small .star-rating,
.products .product .star-rating {
    margin: 4px 0 8px !important;
}

/* ---------- Sale badge ---------- */
.product-small .badge.onsale .badge-inner,
.products .product .badge.onsale .badge-inner {
    background: var(--primary-color, #b9412c) !important;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ---------- Mobile ---------- */
@media (max-width: 549px) {
    .product-small .box-text,
    .products .product .box-text { padding: 12px !important; }

    .product-small .product-title,
    .product-small .name,
    .products .product .product-title,
    .products .product .name {
        font-size: .88rem !important;
        max-height: calc(.88rem * 1.45 * 3) !important;
        min-height: calc(.88rem * 1.45 * 3) !important;
        height: calc(.88rem * 1.45 * 3) !important;
    }

    .product-small .price,
    .products .product .price {
        font-size: .9rem !important;
        min-height: calc(1.4em * 2) !important;
    }
}