/*
    Perbaikan & variasi kartu produk storefront di atas card-product.css (file tema AssetTheme tidak diubah).
    Markup: Pages/Shared/_ProductCard.cshtml. Variasi per jenis situs (Tampilan Toko): .site-type-ecommerce | catalog | project,
    rasio gambar lewat .ratio-1x1 | 3x4 | 4x3 | 16x9 (Bootstrap 5.1 belum punya 3x4).
*/
.ratio-3x4 {
    --bs-aspect-ratio: calc(4 / 3 * 100%);
}

/* Kartu: kolom flex supaya tombol aksi selalu rata bawah antar kartu */
.responsive .product-card.for-category-product.type-default {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.responsive .product-card.for-category-product.type-default .card-wrapper.primary {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Gambar: isi bingkai rasio, latar abu saat memuat, zoom halus saat hover */
.responsive .product-card.for-category-product.type-default .product-image {
    margin-bottom: 0.75rem !important;
}

.responsive .product-card.for-category-product.type-default .product-image .image .ratio {
    background-color: #f3f5f7;
}

.responsive .product-card.for-category-product.type-default .product-image .image .ratio > img {
    object-fit: cover;
    transition: transform 0.6s ease;
}

.responsive .product-card.for-category-product.type-default:hover .product-image .image .ratio > img {
    transform: scale(1.05);
}

.responsive .product-card.for-category-product.type-default .image-badge {
    position: absolute;
    z-index: 2;
    top: 0.6rem;
    left: 0.6rem;
}

.badge-promo {
    background-color: var(--brand);
    color: var(--brand-contrast);
    font-weight: 600;
}

/* Judul: rata kiri, tanpa garis bawah, maksimal 2 baris dengan tinggi tetap supaya harga sejajar */
.responsive .product-card.for-category-product.type-default .product-text .title {
    height: auto;
    min-height: 2.8em;
    margin-bottom: 0.4rem !important;
}

.responsive .product-card.for-category-product.type-default .product-text .title a {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    text-decoration: none;
}

.responsive .product-card.for-category-product.type-default .product-text .meta {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Harga: harga coret kecil di atas harga jual; harga jual tidak pernah patah baris */
.responsive .product-card.for-category-product.type-default .product-price {
    margin-bottom: 0.75rem;
}

.responsive .product-card.for-category-product.type-default .product-price .price-wrapper.primary {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 0 !important;
}

.responsive .product-card.for-category-product.type-default .product-price .baseprice span {
    max-width: none;
    font-size: 0.8rem;
    color: #8a94a3;
}

.responsive .product-card.for-category-product.type-default .product-price .sellprice span {
    white-space: nowrap;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--brand);
}

.responsive .product-card.for-category-product.type-default .product-price .textprice {
    text-align: left;
    font-size: 0.9rem;
    color: #6c757d;
}

/* Tombol aksi di dasar kartu */
.responsive .product-card.for-category-product.type-default .product-cta {
    margin-top: auto;
}

.btn-whatsapp {
    color: #fff;
    background-color: #25D366;
    border-color: #25D366;
}

.btn-whatsapp:hover, .btn-whatsapp:focus {
    color: #fff;
    background-color: #1ebe5b;
    border-color: #1ebe5b;
}

.btn-link-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
}

.btn-link-detail:hover, .btn-link-detail:focus {
    color: var(--brand-dark);
}

.btn-link-detail i {
    font-size: 0.8em;
    transition: transform 0.2s ease;
}

.btn-link-detail:hover i {
    transform: translateX(3px);
}

/* Project: foto landscape lebih besar, judul lebih menonjol, tanpa harga */
.responsive .product-card.site-type-project .product-text .title a {
    font-size: 1.15rem;
}

@media (max-width: 991.98px) {
    .responsive .product-card.for-category-product.type-default .product-text .title a {
        font-size: 0.95rem;
    }

    .responsive .product-card.for-category-product.type-default .product-price .sellprice span {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .responsive .product-card.for-category-product.type-default .product-text .title a {
        font-size: 0.9rem;
    }

    .responsive .product-card.for-category-product.type-default .product-cta .btn {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-size: 0.8rem;
    }
}

/* Ukuran kartu "produk besar" (Tampilan Toko): 1 kartu per baris di HP, jadi teks & tombol tidak perlu dipadatkan */
@media (max-width: 575.98px) {
    .responsive .product-card.card-size-large .product-text .title a {
        font-size: 1.05rem;
    }

    .responsive .product-card.card-size-large .product-price .sellprice span {
        font-size: 1.15rem;
    }

    .responsive .product-card.card-size-large .product-cta .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.95rem;
    }
}

/* Tampilan kategori "produk besar": bar filter di atas grid + chip filter aktif (Pages/Shared/_CatalogFilterBar.cshtml) */
.catalog-filter-bar {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e9ecef;
}

.catalog-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.85rem;
    color: var(--ink);
    text-decoration: none;
    background-color: var(--brand-soft, #eef9f8);
    border: 1px solid rgba(var(--brand-rgb, 0, 185, 174), 0.35);
    border-radius: 999px;
}

.catalog-chip:hover, .catalog-chip:focus {
    color: var(--brand-dark);
    border-color: var(--brand);
}

.catalog-filter-offcanvas {
    max-width: 85vw;
}