/* ============================================================
   product-detail-nutrilon-royal-plus.css
   CSS halaman produk Mulan (Nutrilon Royal Plus).

   Disamakan dengan product-detail-nutrilon-royal-3.css:
   1. Prefix `.nutrilon-royal-3` dilepas (file ini memang khusus halaman
      mulan, tidak perlu di-scope); selector yang berdiri sendiri jadi
      `.page.mulan` mengikuti wrapper <main class="page mulan">.
   2. Penanda `.nr3` dilepas.
   3. Blok short-mulan & review-slider TIDAK ada di sini — kedua brick
      memuat CSS-nya sendiri (dulu ter-duplikasi di file ini).
   4. Blok background gradient TIDAK ikut disalin — halaman mulan sudah
      memasangnya di <style> pada detail_nutrilon_plus.html.php.
   ============================================================ */

/* ════════════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════════════ */

.nutrition-table__label p {
    margin-bottom: 0px !important;
}

sup {
    color: white !important;
}

.site-header {
    background: #002B98;
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
}



.desktop-title {
    text-align: center;
}

#variantTrack.slick-slide img {
    display: block;
    width: 100%;
}/* Styling Chip Normal / Tidak Aktif */





.option-chips .chip {
    padding: 8px 18px;
    border: 1px solid #EED4CA;
    background-color: #ffffff;
    color: #002B98;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#serving_section .serving-tutorial-numbering span {
    color: #fff !important;
    display: block;
    font-size: 16px !important;
    font-family: GothamRounded-Book !important;
}

.tutorial-step-number {
    background: transparent !important;
}

.winning-skill-container {
    padding: 0;
}/* Styling Chip AKTIF (Sedang Terpilih) */





.option-chips .chip.active {
    box-shadow: inset 0 0 0 1px #EED4CA; 
/* Garis tepi tebal */}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.logo {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
}
.header-nav { display: flex; gap: 20px; }
.header-nav a {
    color: rgba(255,255,255,.8);
    font-size: 13px;
    font-weight: 500;
    transition: color .2s;
}
.header-nav a:hover { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.btn-login {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.6);
    color: #fff;
    padding: 5px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.btn-login:hover { background: rgba(255,255,255,.1); }
.menu-toggle { display: none; flex-direction: column; gap: 4px; padding: 4px; }
.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}/* ════════════════════════════════════════════════════════════════════
   LAYOUT WRAPPER
════════════════════════════════════════════════════════════════════ */



.page {
    margin: 0 auto;
    padding: 0;
}

.image-frame.mid-banner-produk-wrapper img {
    width: 100%;
    height: 100%;
    margin: 20px 20px;
}

.section-winning-skills {
    padding: 0 220px;
}

.winning-skills-area {
    display: none;
    margin: 0 20px;
}/* ════════════════════════════════════════════════════════════════════
   SECTION 1 – HERO
════════════════════════════════════════════════════════════════════ */
/* Styling Utama (Desktop) */




.hero-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "kolom-1 kolom-2"; 
    gap: 0;
    margin: 24px 0;
    border-radius: 16px;
    overflow: hidden;
    min-height: 380px;
    padding: 0 100px;
/* Definisi posisi awal desktop */}/* Beri penanda nama area untuk child element */



.hero-section > *:nth-child(1) {
    grid-area: kolom-1;
}

.hero-section > *:nth-child(2) {
    grid-area: kolom-2;
}/* Tampilan Mobile (< 768px) */



@media (max-width: 767px) {
    .hero-section {
        grid-template-columns: 1fr; 
        grid-template-areas: 
            "kolom-1"
            "kolom-2"; 
        padding: 0 20px; 
        min-height: auto;
    /* Ubah jadi 1 kolom bertumpuk *//* Tukar urutan: Kolom 2 di atas, Kolom 1 di bawah *//* Reset padding samping agar tidak terlalu sempit di HP */}
}/* ── Hero Slider ── */




.hero-slider::before {
    content: '';
    position: absolute;
    inset: 0;
    background:transparent !important;
    pointer-events: none;
}/* Slick overrides inside hero */



.hero-slider .slick-list,



.hero-slider .slick-track { height: 100%; }
.hero-slider .slick-slide > div { height: 100%; }

.hero-slide {
    height: 100%;
    min-height: 500px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px 60px;
    position: relative;
}
.hero-slide__product {
    width: 100%;
}
@keyframes floatCan {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.hero-slide__product .product-can { width: 100%; height: auto; }
.hero-slide__text {
    color: #f5d060;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.35;
    margin-top: 16px;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    max-width: 260px;
}/* hero dots */



.hero-slider .slick-dots {
    bottom: 35px !important;
}
.hero-slider .slick-dots li button::before {
    color: #002B98;
    opacity: 1;
    font-size: 14px;
}/* 1. Atur Ukuran Dasar untuk SEMUA Dots (Aktif & Non-Aktif) */



.hero-slider .slick-dots li button::before {
    font-size: 14px !important; 
    width: 14px !important;
    height: 14px !important;
    line-height: 14px !important;
/* Samakan ukuran karakter dasar */}/* 2. Style untuk Dots yang SEDANG AKTIF (Cincin / Ring) */



.hero-slider .slick-dots li.slick-active button::before {
    color: transparent !important;       
    box-shadow: inset 0 0 0 2px #fff; 
    border-radius: 50%;
    opacity: 1;
/* Sembunyikan isi bulatan padat *//* Bikin border ring ke dalam */}/* 3. Style untuk Dots yang TIDAK AKTIF (Bulatan Padat) */



.hero-slider .slick-dots li:not(.slick-active) button::before {
    color: #fff !important; 
    opacity: 1;
/* Warna titik padat biasa */}/* ── Product Info (right side) ── */



.product-info {
    background: transparent !important;
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 30px;
}
.product-info__title {
    font-size: 36px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 6px;
    text-align: center;
}
.product-info__subtitle {
    font-size: 13px;
    color: #002B98;
    margin-bottom: 20px;
    line-height: 1.5;
    font-family: GothamRounded-Book;
}
.product-info__subtitle strong { color: #002B98; }/* Nutrition table */



.nutrition-table {}
.nutrition-table__header {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #002B98;
    padding: 8px 14px;
    border-radius: 6px 6px 0 0;
    font-family: GothamRounded-Book !important;
}
.nutrition-table__body { border: 1px solid #dde4f0; border-top: none; border-radius: 0 0 6px 6px; overflow: hidden;padding: 0px; }
.nutrition-table__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    font-size: 12.5px;
    background: #3B68CD;
    color: white;
    border-bottom: 1px solid #d4deef;
    margin-bottom: 10px;
    border-radius: 5px !important;
    height: 50px;
}

@media (min-width:768px){
    .nutrition-table__body {
        background-color: white;
    }

    .nutrition-table__label p br{
        display: none;
    }

    .review-card-image{
            width: 100px !important;
    max-width: 100px !important;
    }

   
}

        .short-mulan-dots-wrapper .slick-dots, .review-list-wrapper .slick-dots {
            display: none !important;
        }

 .review-card-image img{
        height: 120px !important;
    }

    .short-mulan-title {
    font-weight: 800;
    color: #002B98;
    margin-bottom: 24px;
    font-size: 22px;
    text-align: center;
}

.nutrition-table__body {
    padding: 20px;
    border: 4px solid #002B98 !important;
    border-top: none;
    border-radius: 0px 6px 6px 6px ;
    overflow: hidden;
    padding: 15px;
}

.kandungan-mulan-section .kandungan-product-landing .slick-dots{
    display: none !important;
}

.nutrition-table__header {
    width: 30%;
    display: flex;
    justify-content: center;
}

.nutrition-table__row:nth-child(even) { background: #3B68CD; color: white;}
.nutrition-table__row:last-child { border-bottom: none; }
.nutrition-table__label { color: #fff; }
.nutrition-table__value { font-weight: 500; color: #fff; }/* mobile title (hidden on desktop) */



.mobile-title { display: none; }/* mobile nutrition hidden by default; shown on mobile via media query */



.mobile-nutrition { display: none; }/* ════════════════════════════════════════════════════════════════════
   SECTION 2 – KANDUNGAN
════════════════════════════════════════════════════════════════════ */



.content-section {
    background: transparent !important;
    border-radius: 16px;
    padding-top:0px !important;
    padding: 36px 28px;
    margin-bottom: 24px;
    text-align: center;
}
.content-section__title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 24px;
}/* Acti-Synbio block */



.acti-synbio {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.acti-synbio__logo {
    font-size: 26px;
    font-weight: 900;
    color: #002B98;
    letter-spacing: -0.5px;
}
.acti-synbio__logo span { color: #c9a227; }

.acti-synbio__diagram .infinity-ring { width: 220px; height: auto; }

.content-section__tagline {
    font-size: 15px;
    font-weight: 700;
    color: #002B98;
    margin-bottom: 20px;
    letter-spacing: .3px;
}/* Highlight banner */



.highlight-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #002B98 0%, #003fa3 100%);
    color: #fff;
    padding: 12px 28px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    box-shadow: 0 4px 16px rgba(0,45,114,.3);
}
.highlight-banner__accent {
    background: #c9a227;
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    white-space: nowrap;
}
.highlight-banner__main em {
    color: #f5d060;
    font-style: normal;
    font-size: 16px;
}/* ════════════════════════════════════════════════════════════════════
   SECTION 3 – VARIANT (FIX ZOOM & OVERFLOW)
════════════════════════════════════════════════════════════════════ */



.variant-section {
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 40px;
    padding: 0 200px; 
/* Dikurangi dari 200px agar tidak terlalu cramped */}/* ── Variant Slider Container ── */



.variant-slider {
    flex: 0 0 45%;
    max-width: 50%;       
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    justify-content: center;
    padding: 30px 20px;
    box-sizing: border-box;
    overflow: hidden;     
/* KUNCI LEBAR KIRI agar tidak melar *//* Mencegah gambar keluar dari kotak */}

@media (max-width:767px) {
    .variant-slider {
        max-width: 100% !important;       
    /* KUNCI LEBAR KIRI agar tidak melar */}

     .hero-slide {
    height: 100%;
    min-height: 500px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px !important;
    position: relative;
}

    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan:before,


    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan:before {
        font-family: fontAwesome !important;
        font-size: 60px !important;
        cursor: pointer;
        color: #fff !important;
        line-height: 0.9 !important;
        font-weight: 100;
        opacity: 1 !important;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan:before,


    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan:before {
        color: #002B98 !important;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan:before,


    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan:before {
        font-family: fontAwesome !important;
        font-size: 60px !important;
        cursor: pointer;
        color: #fff !important;
        line-height: 0.9 !important;
        font-weight: 100;
        opacity: 1 !important;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan:before,


    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan:before {
        color: #002B98 !important;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan:before {
        content: "\f104" !important;
        padding-right: 4px;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan:before {
        content: "\f105" !important;
        padding-right: 4px;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan.slick-disabled {
        background: rgb(27 48 119 / .5);
    }
    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan.slick-active {
        display: inline-block !important;
    }
    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan,

    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan {
        background-color: transparent !important;
        box-shadow: 0 0px 0px 0 rgb(0 0 0 / .2);
    }
    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan {
        top: 30% !important;
    }
    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan {
        top: 30% !important;
        right: 20px;
    }
    @media (max-width: 767px) {
        .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan {
            display: block !important;
        }
    }
    @media (max-width: 767px) {
        .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan {
            display: block !important;
        }
    }
    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan {
        z-index: 1;
        border-radius: 30px;
        background-color: #1b3077;
        box-shadow: 0 0px 0px 0 rgb(0 0 0 / .2);
        width: 43px !important;
        height: 43px !important;
        border: none;
        font-size: 0;
        line-height: 0;
        position: absolute;
        top: 50%;
        display: none;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan {
        z-index: 1;
        border-radius: 30px;
        background-color: #1b3077;
        box-shadow: 0 0px 0px 0 rgb(0 0 0 / .2);
        width: 43px !important;
        height: 43px !important;
        border: none;
        font-size: 0;
        line-height: 0;
        position: absolute;
        top: 50%;
        display: none;
    }

    .cta-group .btn-primary,


    .cta-group .btn-secondary {
        width: 100% !important;
    }

    .product-info__title {
        font-size: 24px;
        font-weight: 800;
        color: #fff;
        line-height: 1.25;
        margin-bottom: 15px;
        padding: 0px 0px;
        padding-bottom: 0px !important;
        text-align: center;
    }

    .kandungan-mulan-section .content-title {
            text-align: center;
            font-family: 'GothamRounded-Bold';
            color: #002B98;
            font-size: 16px;
        }

    .kandungan-mulan-section .content-desc p {
        color: #002B98 !important;
    }

    .product-info__subtitle {
        font-size: 14px !important;
                margin: 0px 10px;
    }
}

@media (min-width: 420px) and (max-width: 431px) {
    .product-info__subtitle {
        font-size: 14px !important;
        margin: 0px 16px;
    }
}

.product-details {
    flex: 1;
    padding-left: 30px;
}/* Badge Usia */
/* ── Slick Slider Fix ── */





#variantTrack { 
    width: 100% !important; 
    max-width: 100% !important;
}

#variantTrack .slick-list {
    overflow: hidden !important;
    width: 100% !important;
}

#variantTrack .slick-track {
    display: flex !important; 
    align-items: center !important;
/* Gunakan flex di track dengan align center */}

#variantTrack .slick-slide {
    outline: none;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#variantTrack .slick-slide > div {
    width: 100%;
    display: flex;
    justify-content: center;
}/* ── SOLUSI UTAMA GAMBAR KALENG (TIDAK KEPOTONG / GA ZOOM) ── */



.variant-slide {
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
}/* Pembungkus Tag Picture / Div Gambar */



.variant-slide__image,



.variant-slide picture {
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    max-width: 280px !important; 
    height: 340px !important;    
    margin: 0 auto !important;
/* UKURAN KALENG: Ubah angka ini jika mau lebih besar/kecil (misal 300px) *//* Kunci tinggi container gambar */}/* TAG GAMBAR/IMG UTAMA */



#variantTrack .slick-slide img,



.variant-slide__image img,



.product-can {
    width: auto !important;         
    max-width: 100% !important;     
    height: 100% !important;        
    max-height: 340px !important;    
    object-fit: contain !important;  
    display: block !important;
    margin: 0 auto !important;
/* Biarkan lebar menyesuaikan rasio asli *//* Jangan sampai melampaui container *//* Isi tinggi container *//* Batas tinggi maks kaleng *//* KUNCI: Biar gambar TIDAK TERPOTONG / CROP / ZOOM */}/* ── Tombol Navigasi Panah ── */



.variant-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: #002B98;
    cursor: pointer;
    z-index: 10;
}

.variant-slider__arrow--prev { left: 45px; }
.variant-slider__arrow--next { right: 45px; }/* ── Responsive Adjustment (Opsional untuk Layar Sedang) ── */



@media (max-width: 1400px) {
    .variant-section {
        padding: 0 50px; 
    /* Kurangi padding ekstrem agar layout tidak gepeng di laptop */}
}/* ── Product Details (right) ── */


.product-details {
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
}
.product-details__heading {
    font-size: 14px;
    font-weight: 700;
    color: #002B98;
    margin-bottom: 10px;
}
.product-details__desc {
    font-size: 13px;
    color: #002B98;
    line-height: 1.65;
    margin-bottom: 0px;
    min-height: 72px;
}/* option groups */



.option-group { margin-bottom: 14px; }
.option-group__label {
    font-size: 14px;
    font-weight: 700;
    color: #002B98;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.option-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
    padding: 6px 18px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid #ccc;
    color: #555;
    background: #fff;
    cursor: pointer;
    transition: all .2s;
}
.chip.is-active {
    border-color: #002B98;
    color: #002B98;
    background: #edf2ff;
}
.chip--flavor[disabled] { opacity: .65; cursor: default; }/* CTA buttons */



.cta-group { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.cta-group .btn-primary {
    background: linear-gradient(90deg, #002B98 0%, #003fa3 100%);
    color: #fff;
    padding: 13px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: .4px;
    transition: opacity .2s;
    width: 50%;
}/* ── Badge Milestone (Bentuk Presisi Sesuai Gambar) ── */



.variant-slide__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;   
    justify-content: center;
    align-items: center;
    
    
    border-radius: 12px 42px 12px 42px; 
    
    
    background: linear-gradient(160deg, #f2d1c2 0%, #d89f88 50%, #c48269 100%);
    
    
    border: 3px solid #ffffff;
    box-shadow: 
        0 0 0 1.5px #e5c396,          
        0 4px 10px rgba(0, 0, 0, 0.1);  
    
    color: #002b98;                 
    padding: 14px 12px 12px 12px;
    width: 72px;                    
    height: 90px;
    box-sizing: border-box;
    text-align: center;
    z-index: 20;
/* Memaksa TAHUN berada tepat di bawah 1-3 *//* 1. BENTUK DAUN / TETESAN AIR PRESISI (Kiri-Atas & Kanan-Bawah Lancip) *//* 2. GRADIENT PEACH / ROSE-GOLD METALLIC *//* 3. BORDER PUTIH TEBAL + GARIS EMAS OUTSIDE *//* Garis luar emas tipis *//* Shadow halus *//* Warna Biru Tua Nutrilon *//* Ukuran proporsional */}/* Angka "1-3" (Gede di Atas, Sejajar Mendaftar) */



.variant-slide__badge .badge-num {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2px;
    letter-spacing: -1px;
    white-space: nowrap;           
    display: block;
/* Mencegah angka terpisah ke bawah */}/* Teks "TAHUN" (Kecil Tepat di Bawah Angka) */



.variant-slide__badge .badge-text {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
}/* Pastikan container sebelah kiri punya posisi relative */



.variant-slider {
    position: relative; 
}/* ── ACCORDION KOMPOSISI / NILAI GIZI ── */



.accordion-komposisi {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    margin: 0;
}/* Header Accordion (Clickable Area) */



.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}/* Judul (Informasi Nilai Gizi) */



.accordion-header .title-text,



.accordion-header .title-text * {
    font-size: 22px !important;
    font-weight: 700;
    color: #002b98 !important; 
    margin: 0;
    padding: 0;
/* Biru Nutrilon */}/* Ikon Plus (+) dan Minus (-) */



.accordion-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
}/* Garis Horizontal (-) */



.accordion-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2.5px;
    background-color: #002b98;
    transform: translateY(-50%);
}/* Garis Vertikal (|) -> Menjadi (+) jika ditutup */



.accordion-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2.5px;
    height: 100%;
    background-color: #002b98;
    transform: translateX(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}/* ── BACKGROUND OUTSIDE ID SERVING_SECTION ── */



.serving-outer-wrapper {
  background-color: #23347A !important;
  width: 100%;
  position: relative;
  padding: 10px 0;
}

#serving_section {
  background-color: transparent !important;
  position: relative;
  min-height: auto !important;
}/* ── ACCORDION SERVING STYLING ── */



.accordion-header-serving {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
  user-select: none;
}

.accordion-header-serving .title-text h2,


.accordion-header-serving .title-text p,


.accordion-header-serving .title-text * {
  color: #ffffff !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700;
}

@media (max-width:767px) {
    .accordion-header-serving .title-text h2,

    .accordion-header-serving .title-text p,

    .accordion-header-serving .title-text * {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700;
    }
}/* Ikon Plus (+) dan Minus (-) Warna Putih */



.accordion-icon-serving {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
}

.accordion-icon-serving::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: #ffffff;
  transform: translateY(-50%);
}

.accordion-icon-serving::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5px;
  height: 100%;
  background-color: #ffffff;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}/* Jika Accordion Aktif -> Jadi Minus (-) */



.accordion-serving.active .accordion-icon-serving::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}/* Body Content */


 
.accordion-body-serving {
  padding-top: 15px;
  padding-bottom: 20px;
      padding-left: 10px;
    padding-right: 10px;
}

    #product-detail-komposisi .content-image {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 20px !important;
    }/* Styling Subtitle yang sekarang ada di dalam Accordion Body */



.serving-subtitle-inner-wrapper {
  background-color: #AEC5E7;
  border-radius: 0px;
  padding: 15px;
  margin-top: 25px;
}

.mulan .serving-outer-wrapper {
    background-color: #fff !important;
}

.serving_section_mulan {
    background: radial-gradient(83.87% 83.87% at 50% 50%, #A3ADD8 0%, #3B68CD 44.23%, #002B98 92.79%) !important;
}

#serving_subtitle_section {
  background-color: transparent !important;
  min-height: auto;
}

#serving_subtitle_section .serving-subtitle {
  color: #23347A;
   font-size: 20px !important;
}/* ── STYLING KONTEN KARTU & NUMBERING ── */



@media (min-width:768px) {
  .serving-tutorial-list-wrapper {
    padding: 0px 100px !important;
  }

  .kandungan-mulan-section .content-title {
            text-align: center;
            font-family: 'GothamRounded-Bold';
            color: #002B98;
            font-size: 16px;
        }

    .kandungan-mulan-section .content-desc p {
        color: #002B98 !important;
    }

    .desktop-title {
    text-align: center;
    margin-bottom: 0px;
}

    .product-info__subtitle {
    font-size: 14px !important;
                margin: 0px 47px;
                margin-bottom: 20px !important;
    }

  .slick-prev-kandungan-mulan.slick-arrow,


  .slick-next-kandungan-mulan.slick-arrow {
    display: none;
  }

  .short-mulan-section {
    padding: 40px 0 0px !important;
  }

  .short-mulan-title {
    font-weight: 800;
    color: #002B98;
    margin-bottom: 24px;
    font-size: 30px !important;
}

  .content-section__image-wrapper.keunggulan {
    width: 700px !important;
    margin: auto;
  }

  .content-section__image-wrapper {
    width: 500px ;
    margin: auto;
  }

  .product-details__heading {
    font-size: 24px;
  }

  .product-details__desc {
    font-size: 16px;
  }

    .nutrition-table {
        padding: 0px 60px;
    }

    .product-info__subtitle {
        color: #fff !important;
    }

    .product-info {
        padding: 0px;
       
    }

    .product-info__subtitle {
        font-size: 16px;
    }

    .nutrition-table__header {
        width: 45% !important;
    }
}/* Styling Universal Header Accordion (Komposisi, Penyajian, Penyesuaian) */



.accordion-header-serving,



.accordion-header-penyesuaian,



.accordion-header-komposisi {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  height: 75px;            
  padding: 0px;         
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background-color: transparent;
/* Menyamakan tinggi header sekitar 75px *//* Padding horizontal */}/* Memastikan elemen di dalam header rata tengah secara vertikal */

.main-detail-product .section-winning-skills .winning-skill-container .image-frame {
    border-radius: 0px !important;
    width: 100%;
}

.accordion-header-serving .title-text,



.accordion-header-penyesuaian .title-text,



.accordion-header-komposisi .title-text {
  display: flex;
  align-items: center;
  margin: 0 !important;
}

.accordion-header-serving .title-text *,


.accordion-header-penyesuaian .title-text *,


.accordion-header-komposisi .title-text * {
  color: #002b98 !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700;
  font-family: GothamRounded-Bold !important;
  line-height: 1.2;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}/* Styling Ikon (+) dan (-) */



.accordion-icon-serving,



.accordion-icon-penyesuaian,



.accordion-icon-komposisi {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
}

.accordion-icon-serving::before,


.accordion-icon-penyesuaian::before,


.accordion-icon-komposisi::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: #002b98;
  transform: translateY(-50%);
}

.accordion-icon-serving::after,


.accordion-icon-penyesuaian::after,


.accordion-icon-komposisi::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5px;
  height: 100%;
  background-color: #002b98;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}/* Saat Accordion Aktif -> Berubah jadi Minus (-) */



.accordion-serving.active .accordion-icon-serving::after,



.accordion-penyesuaian.active .accordion-icon-penyesuaian::after,



.accordion-komposisi.active .accordion-icon-komposisi::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

#serving_section .serving-tutorial-card p {
  color: #fff !important;
  font-size: 12px !important;
  margin-left: 0px !important;
  min-width: 230px;
  height: 230px;
}

span.short-mulan-badge.--left {
    display: none;
}

span.short-mulan-badge.--right {
    display: none;
}

.short-mulan-card-caption p {
    display: none;
}

.short-mulan-card-info{
    display: none;
}

#serving_section .serving-tutorial-card {
    min-height: 230px !important;
    height: 230px;
}

#serving_section .serving-tutorial-numbering {
    gap: 0px !important;
}

.serving-tutorial-numbering {
  gap: 12px;
}

#product-detail-komposisi .content-title h2 {
    margin-bottom: 0px !important;
}

 @media (max-width: 767px) {
        #product-detail-komposisi .content-image {
            padding-left: 20px !important;
            padding-right: 20px !important;
            padding-top: 20px !important;
        }
        
    }

@media (max-width: 767px) {
    #serving_section .slick-next-serving-tutorial{
        top: 25% !important;
        right: 0%;
    }

    #serving_section .slick-prev-serving-tutorial {
        left: 0%;
    }
}

#serving_section .serving-tutorial-numbering span {
  color: #23367A;
  display: block;
  font-size: 12px;
  font-family: GothamRounded-Bold, sans-serif;
}

@media (max-width: 767px) {
    #serving_section .serving-tutorial-numbering {
        gap: 10px;
        width: 100% !important;
    }
}

.tutorial-step-number {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #23367A;
  font-weight: bold;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  background: linear-gradient(90deg, #C28013 0.48%, #FFE0A0 100%) !important;
}

.serving-tutorial-numbering > div,


.serving-tutorial-numbering > p {
  margin: 0;
  flex-grow: 1;
}/* Subtitle Section Outer */



.serving-subtitle-outer-wrapper {
  background-color: #AEC5E7;
  width: 100%;
  padding: 20px 0;
}

#serving_subtitle_section {
  background-color: transparent !important;
  min-height: 100px;
}

#serving_subtitle_section .serving-subtitle {
  color: #23367A !important;
  text-align: left !important;
  font-family: GothamRounded-Book !important;
}

#serving_subtitle_section .serving-subtitle  strong {
  font-family: GothamRounded-Bold !important;
}

@media (max-width: 767px) {
    #serving_subtitle_section .serving-subtitle {
        font-size: 13px !important;
    }
}

table td div:nth-child(2):nth-last-child(2),


table td div:nth-child(2):nth-last-child(1) {
    text-align: right !important;
}

table td>div:nth-child(n+2):nth-child(-n+3) {
    justify-content: right !important;
}/* Kondisi saat Accordion Terbuka (Aktif) -> Berubah jadi minus (-) */



.accordion-komposisi.active .accordion-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}/* Content Body Accordion */



.accordion-body {
    display: block; 
    padding-bottom: 30px;
/* Default terbuka */}

.cta-group .btn-primary:hover { opacity: .88; }
.cta-group .btn-primary svg { width: 18px; height: 18px; fill: #fff; }
.cta-group .btn-secondary {
    background: transparent;
    border: 1.5px solid #002B98;
    color: #002B98;
    padding: 12px 20px;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    width: 50%;
    transition: all .2s;
}
.cta-group .btn-secondary:hover { background: #002B98; }

.table-gizi {
    background-image: linear-gradient(#fff, #fff), linear-gradient(360deg, #002B98 0.48%, #002B98 33.17%, #002B98 47.12%, #002B98 62.98%, #002B98 95%) !important;
}

@media (max-width: 361px) {
    .content-section__title {
        font-size: 20px !important;
    }
}

section[aria-label="Keunggulan produk"] .content-section__title {
  
  margin-top: 30px !important;
  color: #002d62;
/* Tulis CSS Anda di sini, misalnya: */}

section[aria-label="Kandungan produk"] .content-section__title {
  
  padding-top: 0px !important;
/* Tulis CSS Anda di sini, misalnya: */}/* ════════════════════════════════════════════════════════════════════
   MOBILE ≤ 767px
════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    .kandungan-product-landing .container .kandungan-product-landing-card-wrapper .kandungan-card-list-item .content {
        min-height: 150px !important;
        /* Kartu HARUS mengisi penuh slide-nya. Kalau dikecilkan (dulu 83-88%)
           untuk menghindari panah, lebar kartu jadi lebih kecil dari langkah
           geser slick sehingga posisinya melenceng makin jauh tiap slide.
           Ruang untuk panah diambil dari padding wrapper di bawah, bukan
           dari mengecilkan kartu. */
        width: 100% !important;
    }

    /* Lorong kiri & kanan untuk panah (lebar panah 43px + jarak 9px).
       Padding ini ada di LUAR .slick-list, jadi lebar slide yang dihitung
       slick otomatis menyesuaikan dan tidak ada kartu tetangga yang mengintip.
       Sebelumnya padding hanya di kiri (10%), membuat kartu tidak center dan
       sisi kanannya masuk ke area panah. */
    .kandungan-mulan-section .kandungan-product-landing .container .kandungan-product-landing-card-wrapper {
        padding-left : 52px !important;
        padding-right: 52px !important;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan {
        left: 4px;
    }

    .kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan {
        right: 4px;
    }

    .kandungan-mulan-section .kandungan-product-landing .container .kandungan-product-landing-card-wrapper .slick-list {
        padding: 0 0px 0 0 !important;
    }

    .kandungan-mulan-section .kandungan-mulan-inner .kandungan-product-landing .container {
        padding: 0px !important;
    }
}


@media (max-width: 767px) {

    .page { padding: 0; }/* hide desktop-only nav links */


    
    .header-nav { display: none; }
    .menu-toggle { display: flex; }/* ── mobile title ── */


    
    .mobile-title {
        display: block;
        padding: 16px 16px 0;
    }
    .mobile-title .product-info__title { font-size: 17px; margin-bottom: 4px; }
    .mobile-title .product-info__subtitle { font-size: 12px; }/* ── hero: full width, stacked ── */


    
    .hero-section {
        grid-template-columns: 1fr;
        margin: 12px 0 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        background: #0a1738;
    }
    .hero-slide { min-height: 280px; padding: 24px 16px 25px; }
    .hero-slide__product { width: 100%; }
    .hero-slide__text { font-size: 13px; }

    .slick-dotted.slick-slider {
        margin-bottom: 30px !important;
    }

    .hero-slider .slick-dots {
    bottom: -25px !important;
}

    .product-info__subtitle {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .product-info {
        padding-bottom: 0;
        margin-top: 30px;
    }/* ── kandungan ── */


    
    .content-section {
        border-radius: 0;
        padding: 24px 16px 0px;
        margin-bottom: 0;
    }

    .pimcore_area_product-detail-kandungan-mulan.pimcore_area_content {
        background: url('/assets/images/mulan/GradientBG.png') no-repeat !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% auto !important; 
    /* Atau gunakan 'cover' */}

    .content-section__title { font-size: 22px; }
    .acti-synbio { flex-direction: column; gap: 12px; }
    .acti-synbio__diagram .infinity-ring { width: 180px; }
    .highlight-banner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        padding: 12px 20px;
        font-size: 12px;
    }
    .highlight-banner__main em { font-size: 14px; }/* ── nutrition table – shown on mobile below kandungan ── */


    
    .mobile-nutrition {
        display: block;
        padding: 16px;
        background: #fff;
    }
    .mobile-nutrition .nutrition-table__header {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background: #002B98;
        padding: 8px 14px;
        border-radius: 6px 6px 0 0;
        width: 55%;
    }

    .nutrition-table__header {
        width: 55%;
        font-family: GothamRounded-Book !important;
    }

    .mobile-nutrition .nutrition-table__body {
        border: 1px solid #dde4f0;
        border-top: none;
        border-radius: 0;
        overflow: hidden;
        
    }

    .nutrition-table__body {
    
    max-height: 180px; 
    
    
    overflow-y: auto !important; 
    
    
    -webkit-overflow-scrolling: touch; 
  /* 1. Atur tinggi maksimal agar hanya muat 3 item (sekitar 180px - 210px tergantung ukuran box) *//* 2. Aktifkan scroll vertikal *//* 3. Smooth scrolling untuk iOS/Android */}


    .mobile-nutrition .nutrition-table__row {
        display: flex;
        justify-content: space-between;
        padding: 7px 12px;
        font-size: 11.5px;
        background: #3B68CD;
        border-bottom: 1px solid #d4deef;
        color: #fff;
    }
    .mobile-nutrition .nutrition-table__row:nth-child(even) { background: #3B68CD; color: #fff; }
    .mobile-nutrition .nutrition-table__row:last-child { border-bottom: none; }
    .mobile-nutrition .nutrition-table__label { color: #fff; }
    .mobile-nutrition .nutrition-table__value { font-weight: 500; color: #fff; }/* ── variant section ── */


    
    .variant-section {
        flex-direction: column;
        border-radius: 0;
        margin-bottom: 0;
                padding: 0 20px !important;
        
    }
    .variant-slide__badge {
        width: 58px;
        height: 80px;
        left: 5px;
    }

    .section-winning-skills {
    padding: 0;
}

.nutrition-table__row {
    border-radius: 10px !important;
 }/* ── 1. HEADER RATA KIRI (LEFT-ALIGNED) TOTAL ── */


 


.accordion-header-serving,


 


.accordion-header-penyesuaian,


 


.accordion-header-komposisi,


 


.accordion-header-gizi,


 


#toggleServing,


 


#togglePenyajian,


 


#togglePenyesuaian,


 


#toggleKomposisi {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    cursor: pointer;
}/* Meratakan teks judul di dalam WYSIWYG ke kiri */



.accordion-header-serving .title-text,



.accordion-header-penyesuaian .title-text,



.accordion-header-komposisi .title-text,



.accordion-header-gizi .title-text,



.accordion-header-serving .title-text *,



.accordion-header-penyesuaian .title-text *,



.accordion-header-komposisi .title-text *,



.accordion-header-gizi .title-text * {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #002b98 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    .accordion-header-serving .title-text *,

    .accordion-header-penyesuaian .title-text *,

    .accordion-header-komposisi .title-text *,

    .accordion-header-gizi .title-text * {
        font-size: 18px !important;
    }

    .kandungan-product-landing .container .kandungan-product-landing-card-wrapper .kandungan-card-list-item .content .content-title h3 {
        margin-top: 0 !important;
    }

    .content-section__title {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 24px;
    }

    .kandungan-product-landing .container .kandungan-product-landing-card-wrapper .kandungan-card-list-item .content .content-title h3{
        margin-top: 0 !important;
    }

    #serving_section_penyesuaian .slick-next-penyesiaian-tutorial,


    #serving_section_penyesuaian .slick-prev-penyesiaian-tutorial {
        display: none !important;
    }

    #product-detail-komposisi .content-title h2,


    #serving_section .serving-title h2,


    .accordion-header-serving {
        font-size: 22px !important;
    }

    #serving_subtitle_section .serving-subtitle {
        font-size: 20px !important;
    }
}

#product-detail-komposisi .content-title h2 {
    color: #002B98 !important;
}/* ── 2. HILANGKAN !important AGAR SLIDETOGGLE BISA DIKLIK ── */



@media (max-width: 767px) {/* JANGAN Pakai !important di display: none */

    
    #bodyPenyesuaian,

    
    #bodyPenyajian,

    
    #bodyServing,

    
    #bodyKomposisi {
        display: none; 
    }

    #serving_section .serving-tutorial-numbering {
        gap: 0px !important;
        padding: 0 2%;
    }

    .short-mulan-title {
        margin-bottom: 0 !important;
    }

    .short-mulan-header{
        margin-bottom: 14px !important;
    }

    #serving_section .slick-dots{
        display: none !important;
    }

    .short-mulan-dots-wrapper .slick-dots{
        display: none !important;
    }
}

.image-frame.mid-banner-produk-wrapper img {
    margin:0;
}

    .variant-slide__badge .badge-num {
        font-size: 20px;
        font-weight: 900;
        line-height: 1;
        margin-bottom: 2px;
        letter-spacing: -1px;
        white-space: nowrap;           
        display: block;
    /* Mencegah angka terpisah ke bawah */}/* Teks "TAHUN" (Kecil Tepat di Bawah Angka) */


    
    .variant-slide__badge .badge-text {
        font-size: 8px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: block;
    }

    #serving_section .slick-next-serving-tutorial,


    #serving_section .slick-prev-serving-tutorial {
        top:30% !important;
    }

    .variant-slider { flex: none; width: 100%; }
    .product-details { flex: none; width: 100%; }
    .variant-slider { min-height: 220px; padding: 0px 70px 0px !important; }
    .variant-slide__image { width: 100px; }
    .variant-slider__arrow { width: 32px; height: 32px; font-size: 60px; }
    .variant-slider__arrow--prev { left: 4px; }
    .variant-slider__arrow--next { right: 4px; }

    .title-table-gizi p {
        margin-bottom: 5px;
        font-size: 10px !important;
    }

    .variant-section {
        margin-bottom: 0px !important;
    }/* ── product details ── */


    
    .product-details { padding: 0px 16px 0px; }
    .cta-group { gap: 8px; margin-top: 16px; }
    .cta-group .btn-primary,

    .cta-group .btn-secondary { padding: 12px 16px; font-size: 12px; }
}/* ════════════════════════════════════════════════════════════════════
   SLICK OVERRIDES
════════════════════════════════════════════════════════════════════ */



.slick-slide { outline: none; }

@media (max-width: 767px) {/* Sembunyikan sementara di mobile agar tidak menggerak-gerakkan layar (glitch) */

    
    .nutrition-table {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0px !important;
        margin-bottom: 24px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }/* Class penanda bahwa posisi sudah benar & aman ditampilkan */


    
    .nutrition-table.is-reordered {
        opacity: 1 !important;
    }

    .product-info {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .content-section {
        padding-top: 0;
    }
}


/* ════════════════════════════════════════════════════════════════════
   BACKGROUND HALAMAN (pengganti `body { background: ... }` di halaman Mulan).
   sudah memasangnya lewat <style> di detail_nutrilon_plus.html.php).
════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

    .image-frame.mid-banner-produk-wrapper img {
        width: 100%;
        height: 100%;
        margin: 0 !important;
    }
}
.variant-slide__badge .badge-text {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
}/* Pastikan container sebelah kiri punya posisi relative */



.variant-slider {
    position: relative; 
}/* ── ACCORDION KOMPOSISI / NILAI GIZI ── */



.accordion-komposisi {
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    margin: 0;
}/* Header Accordion (Clickable Area) */



.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}/* Judul (Informasi Nilai Gizi) */



.accordion-header .title-text,



.accordion-header .title-text * {
    font-size: 22px !important;
    font-weight: 700;
    color: #002b98 !important; 
    margin: 0;
    padding: 0;
/* Biru Nutrilon */}/* Ikon Plus (+) dan Minus (-) */



.accordion-icon {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
}/* Garis Horizontal (-) */



.accordion-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2.5px;
    background-color: #002b98;
    transform: translateY(-50%);
}/* Garis Vertikal (|) -> Menjadi (+) jika ditutup */



.accordion-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2.5px;
    height: 100%;
    background-color: #002b98;
    transform: translateX(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}/* ── BACKGROUND OUTSIDE ID SERVING_SECTION ── */



.serving-outer-wrapper {
  background-color: #23347A !important;
  width: 100%;
  position: relative;
  padding: 10px 0;
}

#serving_section {
  background-color: transparent !important;
  position: relative;
  min-height: auto !important;
}/* ── ACCORDION SERVING STYLING ── */



.accordion-header-serving {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  cursor: pointer;
  user-select: none;
}

.accordion-header-serving .title-text h2,


.accordion-header-serving .title-text p,


.accordion-header-serving .title-text * {
  color: #ffffff !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700;
}

@media (max-width:767px) {
    .accordion-header-serving .title-text h2,

    .accordion-header-serving .title-text p,

    .accordion-header-serving .title-text * {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700;
    }
}/* Ikon Plus (+) dan Minus (-) Warna Putih */



.accordion-icon-serving {
  position: relative;
  width: 18px;
  height: 18px;
  display: inline-block;
  flex-shrink: 0;
}

.accordion-icon-serving::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2.5px;
  background-color: #ffffff;
  transform: translateY(-50%);
}

.accordion-icon-serving::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5px;
  height: 100%;
  background-color: #ffffff;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}/* Jika Accordion Aktif -> Jadi Minus (-) */



.accordion-serving.active .accordion-icon-serving::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}/* Body Content */


 
.accordion-body-serving {
  padding-top: 15px;
  padding-bottom: 20px;
      padding-left: 10px;
    padding-right: 10px;
}

    #product-detail-komposisi .content-image {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 20px !important;
    }/* Styling Subtitle yang sekarang ada di dalam Accordion Body */



.serving-subtitle-inner-wrapper {
  background-color: #AEC5E7;
  border-radius: 0px;
  padding: 15px;
  margin-top: 25px;
}

.mulan .serving-outer-wrapper {
    background-color: #fff !important;
}

.serving_section_mulan {
    background: radial-gradient(83.87% 83.87% at 50% 50%, #A3ADD8 0%, #3B68CD 44.23%, #002B98 92.79%) !important;
}

#serving_subtitle_section {
  background-color: transparent !important;
  min-height: auto;
}

#serving_subtitle_section .serving-subtitle {
  color: #23347A;
   font-size: 20px !important;
}/* ── STYLING KONTEN KARTU & NUMBERING ── */

@media (min-width:768px) {

  .kandungan-mulan-section .content-title {
            text-align: center;
            font-family: 'GothamRounded-Bold';
            color: #002B98;
            font-size: 16px;
        }

    .kandungan-mulan-section .content-desc p {
        color: #002B98 !important;
    }

    .desktop-title {
    text-align: center;
    margin-bottom: 0px;
}

    .product-info__subtitle {
    font-size: 14px !important;
                margin: 0px 10px;
                margin-bottom: 20px !important;
    }

  .slick-prev-kandungan-mulan.slick-arrow,


  .slick-next-kandungan-mulan.slick-arrow {
    display: none;
  }

  .short-mulan-section {
    padding: 40px 0 0px !important;
  }

  .short-mulan-title {
    font-weight: 800;
    color: #002B98;
    margin-bottom: 24px;
    font-size: 30px !important;
}

  .content-section__image-wrapper.keunggulan {
    width: 700px !important;
    margin: auto;
  }

  .content-section__image-wrapper {
    width: 500px ;
    margin: auto;
  }

  .product-details__heading {
    font-size: 24px;
  }

  .product-details__desc {
    font-size: 16px;
  }

    .nutrition-table {
        padding: 0px 60px;
    }

    .product-info__subtitle {
        color: #fff !important;
    }

    .product-info {
        padding: 0px;
       
    }

    .product-info__subtitle {
        font-size: 16px;
    }

    .nutrition-table__header {
        width: 45% !important;
    }
}/* Styling Universal Header Accordion (Komposisi, Penyajian, Penyesuaian) */



.accordion-header-serving,



.accordion-header-penyesuaian,



.accordion-header-komposisi {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  height: 75px;            
  padding: 0 15px;         
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  background-color: transparent;
/* Menyamakan tinggi header sekitar 75px *//* Padding horizontal */}/* Memastikan elemen di dalam header rata tengah secara vertikal */



.accordion-header-serving .title-text,



.accordion-header-penyesuaian .title-text,



.accordion-header-komposisi .title-text {
  display: flex;
  align-items: center;
  margin: 0 !important;
}

.accordion-header-serving .title-text *,


.accordion-header-penyesuaian .title-text *,


.accordion-header-komposisi .title-text * {
  color: #002b98 !important;
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700;
  font-family: GothamRounded-Bold !important;
  line-height: 1.2;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}/* Styling Ikon (+) dan (-) */



.accordion-icon-serving::before,


.accordion-icon-penyesuaian::before,


.accordion-icon-komposisi::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #002b98;
  transform: translateY(-50%);
}

.accordion-icon-serving::after,


.accordion-icon-penyesuaian::after,


.accordion-icon-komposisi::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #002b98;
  transform: translateX(-50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}/* Saat Accordion Aktif -> Berubah jadi Minus (-) */



.accordion-serving.active .accordion-icon-serving::after,



.accordion-penyesuaian.active .accordion-icon-penyesuaian::after,



.accordion-komposisi.active .accordion-icon-komposisi::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

#serving_section .serving-tutorial-card p {
  color: #fff !important;
  font-size: 12px !important;
  margin-left: 0px !important;
  min-width: 260px;
}

#serving_section .serving-tutorial-card {
    min-height: 230px;
}

#serving_section .serving-tutorial-numbering {
    gap: 0px !important;
}

.serving-tutorial-numbering {
  gap: 12px;
}

#product-detail-komposisi .content-title h2 {
    margin-bottom: 0px !important;
}

 @media (max-width: 767px) {
        #product-detail-komposisi .content-image {
            padding-left: 20px !important;
            padding-right: 20px !important;
            padding-top: 20px !important;
        }
    }

#serving_section .serving-tutorial-numbering span {
  color: #23367A;
  display: block;
  font-size: 12px;
  font-family: GothamRounded-Bold, sans-serif;
}

@media (max-width: 767px) {
    #serving_section .serving-tutorial-numbering {
        gap: 10px;
        width: 100% !important;
    }

    .row.d-flex.justify-content-center.serving-tutorial-list-wrapper.slick-initialized.slick-slider.slick-dotted
    {
        margin-bottom: 0px !important;
    }
}

.tutorial-step-number {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #23367A;
  font-weight: bold;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
  background: linear-gradient(90deg, #C28013 0.48%, #FFE0A0 100%) !important;
}

.serving-tutorial-numbering > div,


.serving-tutorial-numbering > p {
  margin: 0;
  flex-grow: 1;
}/* Subtitle Section Outer */



.serving-subtitle-outer-wrapper {
  background-color: #AEC5E7;
  width: 100%;
  padding: 20px 0;
}

#serving_subtitle_section {
  background-color: transparent !important;
  min-height: 100px;
}

#serving_subtitle_section .serving-subtitle {
  color: #23367A !important;
  text-align: left !important;
  font-family: GothamRounded-Book !important;
}

#serving_subtitle_section .serving-subtitle  strong {
  font-family: GothamRounded-Bold !important;
}

@media (max-width: 767px) {
    #serving_subtitle_section .serving-subtitle {
        font-size: 13px !important;
    }
}

table td div:nth-child(2):nth-last-child(2),


table td div:nth-child(2):nth-last-child(1) {
    text-align: right !important;
}

table td>div:nth-child(n+2):nth-child(-n+3) {
    justify-content: right !important;
}/* Kondisi saat Accordion Terbuka (Aktif) -> Berubah jadi minus (-) */



.accordion-komposisi.active .accordion-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}/* Content Body Accordion */



.accordion-body {
    display: block; 
    padding-bottom: 30px;
/* Default terbuka */}

.cta-group .btn-primary:hover { opacity: .88; }
.cta-group .btn-primary svg { width: 18px; height: 18px; fill: #fff; }
.cta-group .btn-secondary {
    background: transparent;
    border: 1.5px solid #002B98;
    color: #002B98;
    padding: 12px 20px;
    text-align: center;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    width: 50%;
    transition: all .2s;
}
.cta-group .btn-secondary:hover { background: #002B98; }

.table-gizi {
    background-image: linear-gradient(#fff, #fff), linear-gradient(360deg, #002B98 0.48%, #002B98 33.17%, #002B98 47.12%, #002B98 62.98%, #002B98 95%) !important;
}

@media (max-width: 361px) {
    .content-section__title {
        font-size: 20px !important;
    }
}

section[aria-label="Keunggulan produk"] .content-section__title {
  
  margin-top: 30px !important;
  color: #002d62;
/* Tulis CSS Anda di sini, misalnya: */}

section[aria-label="Kandungan produk"] .content-section__title {
  
  padding-top: 0px !important;
/* Tulis CSS Anda di sini, misalnya: */}/* ════════════════════════════════════════════════════════════════════
   MOBILE ≤ 767px
════════════════════════════════════════════════════════════════════ */



@media (max-width: 767px) {

    .page { padding: 0; }/* hide desktop-only nav links */


    
    .header-nav { display: none; }
    .menu-toggle { display: flex; }/* ── mobile title ── */


    
    .mobile-title {
        display: block;
        padding: 16px 16px 0;
    }
    .mobile-title .product-info__title { font-size: 17px; margin-bottom: 4px; }
    .mobile-title .product-info__subtitle { font-size: 12px; }/* ── hero: full width, stacked ── */


    
    .hero-section {
        grid-template-columns: 1fr;
        margin: 12px 0 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        background: #0a1738;
        padding-bottom: 10px;
    }
    .hero-slide { min-height: 280px; padding: 24px 16px 25px; }
    .hero-slide__product { width: 100%; }
    .hero-slide__text { font-size: 13px; }

    .slick-dotted.slick-slider {
        margin-bottom: 30px !important;
    }

    .hero-slider .slick-dots {
    bottom: -25px !important;
}

    .product-info {
        padding-bottom: 0;
        margin-top: 30px;
    }/* ── kandungan ── */


    
    .content-section {
        border-radius: 0;
        padding: 24px 16px 0px;
        margin-bottom: 0;
    }

    .pimcore_area_product-detail-kandungan-mulan.pimcore_area_content {
        background: url('/assets/images/mulan/GradientBG.png') no-repeat !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% auto !important; 
    /* Atau gunakan 'cover' */}

    .content-section__title { font-size: 22px; }
    .acti-synbio { flex-direction: column; gap: 12px; }
    .acti-synbio__diagram .infinity-ring { width: 180px; }
    .highlight-banner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
        padding: 12px 20px;
        font-size: 12px;
    }
    .highlight-banner__main em { font-size: 14px; }/* ── nutrition table – shown on mobile below kandungan ── */


    
    .mobile-nutrition {
        display: block;
        padding: 16px;
        background: #fff;
    }
    .mobile-nutrition .nutrition-table__header {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        background: #002B98;
        padding: 8px 14px;
        border-radius: 6px 6px 0 0;
        width: 55%;
    }

    .nutrition-table__header {
        width: 55%;
        font-family: GothamRounded-Book !important;
    }

    .mobile-nutrition .nutrition-table__body {
        border: 1px solid #dde4f0;
        border-top: none;
        border-radius: 0;
        overflow: hidden;
        
    }

    .nutrition-table__body {
    
    max-height: 180px; 
    
    
    overflow-y: auto !important; 
    
    
    -webkit-overflow-scrolling: touch; 
  /* 1. Atur tinggi maksimal agar hanya muat 3 item (sekitar 180px - 210px tergantung ukuran box) *//* 2. Aktifkan scroll vertikal *//* 3. Smooth scrolling untuk iOS/Android */}


    .mobile-nutrition .nutrition-table__row {
        display: flex;
        justify-content: space-between;
        padding: 7px 12px;
        font-size: 11.5px;
        background: #3B68CD;
        border-bottom: 1px solid #d4deef;
        color: #fff;
    }
    .mobile-nutrition .nutrition-table__row:nth-child(even) { background: #3B68CD; color: #fff; }
    .mobile-nutrition .nutrition-table__row:last-child { border-bottom: none; }
    .mobile-nutrition .nutrition-table__label { color: #fff; }
    .mobile-nutrition .nutrition-table__value { font-weight: 500; color: #fff; }/* ── variant section ── */


    
    .variant-section {
        flex-direction: column;
        border-radius: 0;
        margin-bottom: 0;
                padding: 0 20px !important;
        
    }

    .section-winning-skills {
    padding: 0;
}

.nutrition-table__row {
    border-radius: 10px !important;
 }/* ── 1. HEADER RATA KIRI (LEFT-ALIGNED) TOTAL ── */


 


.accordion-header-serving,


 


.accordion-header-penyesuaian,


 


.accordion-header-komposisi,


 


.accordion-header-gizi,


 


#toggleServing,


 


#togglePenyajian,


 


#togglePenyesuaian,


 


#toggleKomposisi {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    cursor: pointer;
}/* Meratakan teks judul di dalam WYSIWYG ke kiri */



.accordion-header-serving .title-text,



.accordion-header-penyesuaian .title-text,



.accordion-header-komposisi .title-text,



.accordion-header-gizi .title-text,



.accordion-header-serving .title-text *,



.accordion-header-penyesuaian .title-text *,



.accordion-header-komposisi .title-text *,



.accordion-header-gizi .title-text * {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #002b98 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

@media (min-width: 768px) {
    .accordion-header-serving .title-text *,

    .accordion-header-penyesuaian .title-text *,

    .accordion-header-komposisi .title-text *,

    .accordion-header-gizi .title-text * {
        font-size: 18px !important;
    }

    .content-section__title {
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        margin-bottom: 24px;
    }

    #serving_section_penyesuaian .slick-next-penyesiaian-tutorial,


    #serving_section_penyesuaian .slick-prev-penyesiaian-tutorial {
        display: none !important;
    }

    #product-detail-komposisi .content-title h2,


    #serving_section .serving-title h2,


    .accordion-header-serving {
        font-size: 22px !important;
    }

    #serving_subtitle_section .serving-subtitle {
        font-size: 20px !important;
    }
}

#product-detail-komposisi .content-title h2 {
    color: #002B98 !important;
}/* ── 2. HILANGKAN !important AGAR SLIDETOGGLE BISA DIKLIK ── */



@media (max-width: 767px) {/* JANGAN Pakai !important di display: none */

    
    #bodyPenyesuaian,

    
    #bodyPenyajian,

    
    #bodyServing,

    
    #bodyKomposisi {
        display: none; 
    }
}

.image-frame.mid-banner-produk-wrapper img {
    margin:0;
}

    .variant-slide__badge .badge-num {
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
        margin-bottom: 2px;
        letter-spacing: -1px;
        white-space: nowrap;           
        display: block;
    /* Mencegah angka terpisah ke bawah */}/* Teks "TAHUN" (Kecil Tepat di Bawah Angka) */


    
    .variant-slide__badge .badge-text {
        font-size: 8px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: block;
    }

    #serving_section .slick-next-serving-tutorial,


    #serving_section .slick-prev-serving-tutorial {
        top:30% !important;
    }

    .variant-slider { flex: none; width: 100%; }
    .product-details { flex: none; width: 100%; }
    .variant-slider { min-height: 220px; padding: 20px 44px; }
    .variant-slide__image { width: 100px; }
    .variant-slider__arrow { width: 32px; height: 32px; font-size: 60px; }
    .variant-slider__arrow--prev { left: 4px; }
    .variant-slider__arrow--next { right: 4px; }

    .title-table-gizi p {
        margin-bottom: 5px;
        font-size: 10px !important;
    }

    .variant-section {
        margin-bottom: 0px !important;
    }/* ── product details ── */


    
    .product-details { padding: 20px 16px 0px; }
    .cta-group { gap: 8px; margin-top: 16px; }
    .cta-group .btn-primary,

    .cta-group .btn-secondary { padding: 12px 16px; font-size: 12px; }
}/* ════════════════════════════════════════════════════════════════════
   SLICK OVERRIDES
════════════════════════════════════════════════════════════════════ */



.slick-slide { outline: none; }

@media (max-width: 767px) {/* Sembunyikan sementara di mobile agar tidak menggerak-gerakkan layar (glitch) */

    
    .nutrition-table {
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0px !important;
        margin-bottom: 24px !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
    }/* Class penanda bahwa posisi sudah benar & aman ditampilkan */


    
    .nutrition-table.is-reordered {
        opacity: 1 !important;
    }

    .product-info {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .content-section {
        padding-top: 0;
    }
}


/* ════════════════════════════════════════════════════════════════════
   BACKGROUND HALAMAN (pengganti `body { background: ... }` di halaman Mulan).
   sudah memasangnya lewat <style> di detail_nutrilon_plus.html.php).
════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
}

/* ════════════════════════════════════════════════════════════════════
   KARTU KANDUNGAN (section mulan) — perbesar di mobile
   Target: kartu ~300px di layar 390px, tetap menyisakan "peek" kartu
   berikutnya dan ikut mengecil di layar yang lebih sempit.
════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .kandungan-mulan-section .kandungan-product-landing .container .kandungan-product-landing-card-wrapper .kandungan-card-list-item {
        padding-left : 10px !important;  /* asalnya 15px */
        padding-right: 10px !important;
    }
    .kandungan-mulan-section .kandungan-product-landing .container .kandungan-product-landing-card-wrapper .kandungan-card-list-item .content {
        min-height: 150px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FEEDBACK — PANAH & TINGGI KARTU
════════════════════════════════════════════════════════════════════ */

/* --- 1. Panah "Cara Penyajian" ---------------------------------------
   product-detail-new.min.css memberi `right: 15px` ke panah kanan tapi
   TIDAK memberi `left` ke panah kiri, dan file itu dimuat setelah file ini
   (offset 37 vs 36) sehingga menang. Akibatnya posisi kiri & kanan tidak
   simetris. Dipaksa simetris di sini.                                   */
@media (max-width: 767px) {
    #serving_section .slick-prev-serving-tutorial {
        left : 10px !important;
        right: auto !important;
    }
    #serving_section .slick-next-serving-tutorial {
        right: 10px !important;
        left : auto !important;
    }
}

/* Panah "Cara Penyajian" saat slide mentok kiri / kanan (infinite: false,
   slick memasang .slick-disabled) — jadi abu-abu dan tidak bisa diklik. */
#serving_section .slick-prev-serving-tutorial.slick-disabled,
#serving_section .slick-next-serving-tutorial.slick-disabled {
    background    : #C9CDD9 !important;
    box-shadow    : none !important;
    opacity       : 1 !important;
    cursor        : default !important;
    pointer-events: none;
}
#serving_section .slick-prev-serving-tutorial.slick-disabled:before,
#serving_section .slick-next-serving-tutorial.slick-disabled:before {
    color : #8E93A3 !important;
    cursor: default !important;
}

/* --- 3a. Panah "Kandungan" saat mentok kiri / kanan -------------------
   Panah section ini latarnya transparan (hanya chevron), jadi yang
   diabu-abukan ikonnya.                                                 */
.kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan.slick-disabled,
.kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan.slick-disabled {
    opacity       : 1 !important;
    box-shadow    : none !important;
    cursor        : default !important;
    pointer-events: none;
}
.kandungan-mulan-section .kandungan-product-landing .slick-prev-kandungan-mulan.slick-disabled:before,
.kandungan-mulan-section .kandungan-product-landing .slick-next-kandungan-mulan.slick-disabled:before {
    color : #9AA0B4 !important;
    cursor: default !important;
}

.storelist__card-wrapper .storelist__card-item a {
    width: fit-content !important;
}

/* --- 3a. Lebar slide slick = lebar jendela yang terlihat ---------------
   AKAR MASALAH slider kandungan yang "kepotong-potong" saat digeser.

   Slick menjadikan .kandungan-card-list-item sebagai .slick-slide dan
   menetapkan lebarnya lewat inline style. Elemen itu punya padding 10px
   kiri-kanan; tanpa border-box, padding tersebut DITAMBAHKAN di atas lebar
   yang di-set slick, jadi tiap slide 20px lebih lebar dari .slick-list.

   Terukur di viewport 375px:
       .slick-list  338px  vs  .slick-slide  358px   (selisih 20px)
   Slick menggeser track sebesar lebar slide (358) sementara yang terlihat
   hanya 338 → melenceng 20px per geseran dan menumpuk.

   Satu baris ini membuat lebar slide sama persis dengan jendelanya.        */
@media (max-width: 767px) {
    .kandungan-mulan-section .kandungan-product-landing-card-wrapper .kandungan-card-list-item,
    .kandungan-mulan-section .kandungan-product-landing-card-wrapper .slick-slide {
        box-sizing: border-box !important;
    }
}

/* --- 3b. Kartu kandungan tinggi seragam di mobile --------------------
   Tinggi disamakan lewat JS (equalizeKandunganMulanCards di
   product-detail-nutrilon-plus.min.js) karena mengubah .slick-track jadi
   flex membuat lebar slide bawaan slick tidak terpakai. Di sini cukup
   pastikan margin bawah tidak menambah tinggi yang sudah diset JS.      */
@media (max-width: 767px) {
    .kandungan-mulan-section .kandungan-product-landing-card-wrapper.slick-initialized .kandungan-card-list-item .content {
        margin-bottom: 0 !important;
    }
}
 

.nutrition-table__label p{
    margin-bottom: 0px !important;
}

.nutrition-table__value p{
    margin-bottom: 0px !important;
}

/* ════════════════════════════════════════════════════════════════════
   Judul accordion "Informasi Nilai Gizi" disamakan dengan
   "Cara Penyajian dan Takaran".

   Warnanya sebenarnya sudah sama (#002b98), yang berbeda ketebalannya:
   product-detail-new.min.css punya `#product-detail-komposisi .content-title h2
   { font-weight: 400 }` — selector ber-ID (1,1,1) mengalahkan
   `.accordion-header .title-text *` (0,2,0) yang minta 700. Akibatnya judul
   komposisi tampil lebih tipis sehingga terlihat beda warna dari judul
   cara penyajian yang tetap 700.
════════════════════════════════════════════════════════════════════ */
#product-detail-komposisi .content-title.accordion-header .title-text,
#product-detail-komposisi .content-title.accordion-header .title-text * {
    color                  : #002b98 !important;
    font-weight            : 700 !important;
    font-family            : GothamRounded-Bold !important;
    line-height            : 1.2 !important;
    margin                 : 0 !important;
    background             : none !important;
    -webkit-text-fill-color: initial !important;
}


/* ════════════════════════════════════════════════════════════════════
   AKAR MASALAH SLIDER KANDUNGAN — padding .slick-list dari file lain
   ════════════════════════════════════════════════════════════════════
   product-detail-new.min.css dimuat SETELAH file ini (offset 37 vs 36)
   dan memberi:

       .kandungan-product-landing .container
       .kandungan-product-landing-card-wrapper .slick-list
           { padding: 0 45px 0 0 !important }

   Slick menghitung lebar slide dari LEBAR KONTEN .slick-list
   (jQuery .width(), padding tidak dihitung), sedangkan area yang benar-benar
   terlihat adalah PADDING BOX-nya. Dengan padding kanan 45px:

       .slick-list terlihat : 271px
       .slick-list konten   : 226px   <- yang dipakai slick
       slideWidth           : 227px

   Track digeser 227px per langkah sementara jendelanya 271px, jadi kartu
   berikutnya mengintip 44px dan posisinya melenceng makin jauh tiap geseran.
   Itulah "kepotong-potong" yang terlihat, bukan lebar kartu.

   Ruang untuk panah sudah disediakan lewat padding WRAPPER (di luar
   .slick-list), jadi .slick-list sendiri harus benar-benar 0.               */
@media (max-width: 767px) {
    .kandungan-mulan-section .kandungan-product-landing .container .kandungan-product-landing-card-wrapper .slick-list,
    .kandungan-mulan-section .kandungan-product-landing-card-wrapper.slick-slider .slick-list,
    .kandungan-mulan-section .kandungan-product-landing-card-wrapper .slick-list {
        padding: 0 !important;
    }
}