/* ==========================================================
Project : Compro Doodle
Module  : Component / Product Description
File    : product-description.css
Version : 1.0.0
Author  : Doodle Engineering
==========================================================
Deskripsi produk per bagian (templates/components/shop/
product-description.html, define "pdesc-body"), dipakai bersama oleh
detail produk Shop dan detail Katalog Produk. Sebelumnya bagian dari
shop-detail.css.
========================================================== */

/* ============================================================
DESKRIPSI PRODUK PER BAGIAN
Deskripsi, Cara Penggunaan, Cara Penyimpanan, Spesifikasi.
Aksen pink Doodle (warna halaman), teks steel #808080 / stone
#5A595C; kapsul putih dengan garis pink.
============================================================ */

.shop-description,
.catalog-pdesc{

    --pdesc-pink:var(--color-primary);
    --pdesc-pink-soft:var(--color-primary-light);
    --pdesc-steel:#808080;
    --pdesc-stone:#5a595c;
}

.pdesc-nav{

    display:flex;
    flex-wrap:wrap;
    gap:var(--space-8);
    margin-top:var(--space-12);
}

/* Kapsul: putih, garis & teks pink. */
.pdesc-nav__pill,
.pdesc-section__label{

    display:inline-block;
    padding:5px 14px;
    border:1.5px solid var(--pdesc-pink);
    border-radius:999px;
    background:#fff;
    color:var(--pdesc-pink);
    font-family:inherit;
    font-size:var(--font-sm);
    font-weight:var(--font-semibold);
    line-height:1.3;
    text-decoration:none;
}

.pdesc-nav__pill:hover{

    background:var(--pdesc-pink-soft);
}

.pdesc{

    display:flex;
    flex-direction:column;
    gap:var(--space-16);
    margin-top:var(--space-16);
    color:var(--pdesc-stone);
}

/* style.css memberi semua <section> margin-top 30px; jarak antar
   bagian cukup dari gap .pdesc. */
.pdesc > .pdesc-section{

    margin-top:0;
}

.pdesc-section{

    padding:var(--space-20) var(--space-24);
    border:var(--border-width-thin) solid var(--color-border);
    border-radius:var(--radius-lg);
    background:#fff;
    scroll-margin-top:110px;
}

.pdesc-section__label{

    margin:0 0 var(--space-12);
}

.pdesc-lead{

    margin:0 0 var(--space-8);
    color:var(--pdesc-stone);
    font-size:var(--font-lg);
    font-weight:var(--font-semibold);
    line-height:1.5;
}

.pdesc-quote{

    margin:var(--space-12) 0 var(--space-8);
    padding-left:var(--space-12);
    border-left:3px solid var(--pdesc-pink);
    color:var(--pdesc-stone);
    font-size:var(--font-md);
    font-weight:var(--font-semibold);
    font-style:italic;
    line-height:1.5;
}

.pdesc-heading{

    margin:var(--space-20) 0 var(--space-8);
    color:var(--pdesc-pink);
    font-family:inherit;
    font-size:var(--font-sm);
    font-weight:var(--font-bold);
    letter-spacing:.04em;
    line-height:1.4;
}

.pdesc-text{

    margin:0 0 var(--space-8);
    color:var(--pdesc-stone);
    font-size:var(--font-sm);
    line-height:1.75;
}

.pdesc-items{

    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-12);
    margin:var(--space-12) 0 0;
    padding:0;
    list-style:none;
    counter-reset:pdesc;
}

.pdesc-item{

    display:flex;
    flex-direction:column;
    gap:4px;
    padding:var(--space-12) var(--space-16);
    border:var(--border-width-thin) solid var(--color-border);
    border-radius:12px;
    background:var(--color-background);
}

.pdesc-item strong{

    color:var(--pdesc-stone);
    font-size:var(--font-sm);
    font-weight:var(--font-bold);
    line-height:1.4;
}

.pdesc-item span{

    color:var(--pdesc-steel);
    font-size:var(--font-sm);
    line-height:1.65;
}

/* Cara Penggunaan: tanpa kartu & lingkaran nomor (penomoran sudah
   ditulis admin di teks), judul tebal lalu penjelasan seperti teks
   biasa agar menyatu dengan paragraf lanjutan di bawahnya. */
.pdesc--penggunaan .pdesc-items{

    display:block;
    margin:var(--space-12) 0 0;
}

.pdesc--penggunaan .pdesc-item{

    display:block;
    margin:0 0 var(--space-4);
    padding:0;
    border:0;
    border-radius:0;
    background:none;
}

.pdesc--penggunaan .pdesc-item + .pdesc-item{

    margin-top:var(--space-12);
}

.pdesc--penggunaan .pdesc-item strong{

    display:block;
    margin-bottom:2px;
    color:var(--pdesc-stone);
}

.pdesc--penggunaan .pdesc-item span{

    display:block;
    color:var(--pdesc-stone);
    line-height:1.75;
}

.pdesc--penggunaan .pdesc-items + .pdesc-text{

    margin-top:var(--space-4);
}

.pdesc-bullets{

    list-style:disc;
    margin:0 0 var(--space-8);
    padding-left:1.25em;
    color:var(--pdesc-stone);
    font-size:var(--font-sm);
    line-height:1.75;
}

.pdesc-bullets li{

    display:list-item;
}

.pdesc-bullets li::marker{

    color:var(--pdesc-pink);
}

/* Format dari editor admin. */
.pdesc strong{ font-weight:var(--font-bold); }
.pdesc em{ font-style:italic; }
.pdesc u{ text-decoration-thickness:1px; text-underline-offset:2px; }

.pdesc-specs{

    margin:0;
}

.pdesc-specs > div{

    display:grid;
    grid-template-columns:140px minmax(0, 1fr);
    gap:var(--space-12);
    padding:10px 0;
    border-bottom:1px dashed var(--color-border);
    font-size:var(--font-sm);
}

.pdesc-specs > div:last-child{ border-bottom:0; }

.pdesc-specs dt{

    color:var(--pdesc-steel);
    font-weight:var(--font-semibold);
}

.pdesc-specs dd{

    margin:0;
    color:var(--pdesc-stone);
    font-weight:var(--font-semibold);
}

.pdesc-closing{

    display:flex;
    flex-direction:column;
    gap:4px;
    padding:var(--space-16) var(--space-20);
    border:1px solid color-mix(in srgb, var(--pdesc-pink) 35%, transparent);
    border-radius:var(--radius-lg);
    /* Gradasi lembut pink → putih → pink muda (pengganti warna solid). */
    background:var(--pdesc-pink-soft);
    background:
        radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--pdesc-pink) 18%, transparent) 0%, transparent 55%),
        radial-gradient(120% 160% at 100% 100%, color-mix(in srgb, var(--pdesc-pink) 14%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, color-mix(in srgb, var(--pdesc-pink) 7%, var(--color-white)) 0%, var(--color-white) 50%, color-mix(in srgb, var(--pdesc-pink) 9%, var(--color-white)) 100%);
    box-shadow:0 10px 28px color-mix(in srgb, var(--pdesc-pink) 10%, transparent);
    color:var(--pdesc-stone);
    font-size:var(--font-sm);
    text-align:center;
}

.pdesc-closing strong{

    color:var(--pdesc-pink);
    font-size:var(--font-md);
    letter-spacing:.02em;
}

@media (max-width:767px){

    .pdesc-section{

        padding:var(--space-16);
    }

    .pdesc-items{

        grid-template-columns:1fr;
    }

    .pdesc-specs > div{

        grid-template-columns:96px minmax(0, 1fr);
    }

    .pdesc-nav{

        flex-wrap:nowrap;
        overflow-x:auto;
        scrollbar-width:none;
        margin-inline:calc(var(--space-16) * -1);
        padding-inline:var(--space-16);
    }

    .pdesc-nav::-webkit-scrollbar{ display:none; }

    .pdesc-nav__pill{

        flex:0 0 auto;
        font-size:var(--font-xs);
    }
}