/* ============================================================
Project : Compro Doodle
Module  : Page
File    : product-catalog-detail.css
Version : 1.0.0
Author  : Doodle Engineering
============================================================ */


/* ============================================================
SECTION
============================================================ */

.product-catalog-detail{

    padding-block:
        var(--section-space-sm);

}


/* ============================================================
BACK LINK
============================================================ */

.product-catalog-detail-back{

    display:inline-flex;

    align-items:center;

    margin-bottom:
        var(--space-24);

    color:
        var(--color-text-secondary);

    font-family:
        var(--font-family-primary);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-medium);

    text-decoration:none;

    transition:
        color var(--duration-fast) var(--ease-standard);

}

.product-catalog-detail-back:hover{

    color:
        var(--color-primary);

}


/* ============================================================
LAYOUT
============================================================ */

.product-catalog-detail-layout{

    display:grid;

    grid-template-columns:1fr;

    gap:
        var(--space-32);

}

@media (min-width: 769px){

    .product-catalog-detail-layout{

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

        align-items:start;

        gap:
            var(--space-48);

    }

}


/* ============================================================
IMAGE
============================================================ */

.product-catalog-detail-image{

    display:flex;

    align-items:center;

    justify-content:center;

    aspect-ratio:1 / 1;

    overflow:hidden;

    background:
        var(--color-surface-alt);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius:
        var(--product-card-radius);

    padding:
        var(--space-24);

}

.product-catalog-detail-image img{

    width:100%;

    height:100%;

    object-fit:contain;

}


/* ============================================================
BODY
============================================================ */

.product-catalog-detail-title{

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

    color:
        var(--color-text);

    font-size:
        var(--font-3xl);

    font-weight:
        var(--font-bold);

    line-height:
        var(--line-tight);

}

.product-catalog-detail-variants{

    display:flex;

    flex-wrap:wrap;

    gap:
        var(--space-8);

    margin-bottom:
        var(--space-16);

}

/* Sama persis dengan .product-info-card-variant-badge di
   product-catalog.css — didefinisikan ulang di sini karena halaman
   detail punya file CSS sendiri (tidak memuat product-catalog.css). */
.product-info-card-variant-badge{

    display:inline-flex;

    align-items:center;

    min-height:
        var(--badge-height);

    padding-inline:
        var(--badge-padding-inline);

    border-radius:
        var(--badge-radius);

    background:
        var(--color-primary-light);

    color:
        var(--color-primary);

    font-size:
        var(--font-xs);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-tight);

}

.product-catalog-detail-content{

    margin:0 0 var(--space-16);

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-medium);

}

.product-catalog-detail-description{

    color:
        var(--color-text-secondary);

    font-size:
        var(--font-md);

    line-height:
        var(--line-relaxed);

    white-space:
        pre-line;

}


/* ============================================================
RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 768px){

    .product-catalog-detail-title{

        font-size:
            var(--font-2xl);

    }

}