/*
AFCMall v1.0.3 Product Image No Crop Fix
Fungsi:
- Foto produk benar-benar tidak terpotong di halaman produk
- Menggunakan frame khusus agar gambar selalu contain
- Mencegah scroll kiri/kanan
*/

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

*,
*::before,
*::after {
    min-width: 0;
    box-sizing: border-box;
}

.container,
.section,
.site-header,
.site-footer {
    max-width: 100%;
}

/* Kartu produk */
.product-card {
    overflow: hidden;
}

/* Frame khusus foto produk agar tidak crop */
.product-image-frame {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Gambar di dalam frame: tidak boleh crop */
.product-image-frame img,
.product-card .product-image-frame img,
.grid-4 .product-card .product-image-frame img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    border: 0 !important;
    background: transparent !important;
    border-radius: 12px !important;
}

/* Override style lama yang memakai object-fit cover */
.product-card img {
    object-fit: contain !important;
}

/* Fallback text produk */
.product-card .thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg,#f9f4df,#eef5ff);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #09203f;
    font-weight: 800;
    text-align: center;
    padding: 20px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* Detail produk */
.product-detail-section {
    overflow-x: hidden !important;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 34px;
    align-items: start;
}

.product-detail-media {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border: 1px solid rgba(229, 231, 235, 0.95);
    border-radius: 28px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(8,17,31,.08);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-media img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 72vh !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: #ffffff;
    border-radius: 18px;
}

.product-detail-info,
.product-detail-info h1,
.product-detail-info p,
.card,
.card p,
.card h2,
.card h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.product-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.product-info-grid .card {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 980px) {
    .product-detail-grid,
    .product-info-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-media {
        padding: 12px;
        border-radius: 22px;
    }

    .product-detail-media img {
        max-height: 58vh !important;
    }
}

@media (max-width: 640px) {
    .product-image-frame {
        padding: 10px;
    }

    .product-detail-media img {
        max-height: 52vh !important;
    }

    .product-detail-info h1 {
        font-size: clamp(28px, 9vw, 42px);
        line-height: 1.08;
    }
}