/* ============================================================
Project : Compro Doodle
Module  : Page
File    : shop.css
Version : 3.2.0
Author  : Doodle IT Development
============================================================ */


/* ============================================================
SHOP PAGE
============================================================ */

.shop-page{

    display:flex;

    flex-direction:column;

    width:100%;

    min-width:0;

    background:
        var(--color-background);

}


/* ============================================================
SHOP BANNER
============================================================ */

.shop-banner-section{

    width:100%;

    padding-block:
        var(--space-24);

}

.shop-banner-container{

    width:100%;

    max-width:
        calc(
            var(--container-xl) +
            (var(--space-24) * 2)
        );

    margin-inline:auto;

    padding-inline:
        var(--space-24);

}

.shop-banner-link,
.shop-banner-container picture{

    display:block;

    width:100%;

    overflow:hidden;

    border-radius:
        var(--space-0);

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

    box-shadow:none;

}

.shop-banner-link img,
.shop-banner-container img{

    display:block;

    width:100%;

    height:auto;

    max-width:100%;

}


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

.shop-product{

    width:100%;

}


/* ============================================================
PRODUCT GRID SURFACE
============================================================ */

/*
    Shop menggunakan surface abu-abu yang sama
    untuk seluruh area product card.

    Scope dibatasi ke .product-grid agar tidak
    mengubah product-card pada halaman lain.
*/

.product-grid .product-card{

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

}

.product-grid .product-card-image{

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

}

.product-grid .product-card-body{

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

}

.product-grid .product-card-footer{

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

}


/* ============================================================
   CUSTOMER SUPPORT
============================================================ */

.shop-support-section{

    width:100%;

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

    overflow:hidden;

}


/* ============================================================
   SUPPORT HEADER
============================================================ */

.shop-support-header{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:var(--grid-gap-md);

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

}


.shop-support-heading{

    min-width:0;

    width:100%;

    text-align:center;

}


.shop-support-eyebrow{

    display:block;

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

    color:
        var(--color-primary);

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

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

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

}


.shop-support-title{

    margin:0;

    color:
        var(--color-text);

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

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

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

}


.shop-support-description{

    max-width:
        var(--container-md);

    margin:
        var(--space-8)
	auto
	0;

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

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

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

}


.shop-support-link{

    position:absolute;

    right:0;

    top:50%;

    transform:
        translateY(-50%);

    flex:0 0 auto;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:
        var(--button-height-sm);

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

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

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

    background:
        var(--color-surface);

    color:
        var(--color-primary);

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

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

    text-decoration:none;

    transition:
        background var(--duration-normal) var(--ease-standard),
        border-color var(--duration-normal) var(--ease-standard),
        color var(--duration-normal) var(--ease-standard);

}


.shop-support-link:hover{

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

    border-color:
        var(--color-primary);

    color:
        var(--color-primary);

}

.shop-support-slider{

    width:100vw;

    max-width:100vw;

    margin-left:
        calc(
            (100vw - 100%) / -2
        );

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    -ms-overflow-style:none;

    cursor:grab;

    user-select:none;

    -webkit-user-select:none;

    touch-action:pan-x pan-y;

    -webkit-overflow-scrolling:touch;

    overscroll-behavior-x:contain;

    scroll-snap-type:x proximity;

}

.shop-support-slider::-webkit-scrollbar{

    display:none;

}

.shop-support-slider.dragging{

    cursor:grabbing;

}

/* ============================================================
   SUPPORT SLIDER
============================================================ */

.shop-support-grid{

    display:flex;

    flex-direction:row;

    flex-wrap:nowrap;

    align-items:stretch;

    justify-content:flex-start;

    gap:
        var(--grid-gap-md);

    width:max-content;

    min-width:max-content;

    overflow:visible;

    cursor:inherit;

    user-select:none;

    -webkit-user-select:none;

}

/*
 * Important:
 * Horizontal overflow belongs to this element.
 * The parent section remains visually clean.
 */
.shop-support-grid.dragging{

    cursor:grabbing;

}


.shop-support-grid.dragging
.shop-support-card{

    pointer-events:none;

}


/* ============================================================
   SUPPORT CARD
============================================================ */

.shop-support-card{

    flex:0 0 320px;

    width:320px;

    min-width:320px;

    max-width:320px;

    overflow:hidden;

    background:
        var(--color-surface);

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

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

    box-shadow:
        var(--shadow-sm);

    scroll-snap-align:center;

}


.shop-support-card-link{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    color:inherit;

    text-decoration:none;

}


.shop-support-card-image{

    width:100%;

    aspect-ratio:4 / 5;

    overflow:hidden;

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

}


.shop-support-card-image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    user-select:none;

    -webkit-user-drag:none;

}


.shop-support-card-body{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:
        var(--space-16);

}


.shop-support-card-category{

    display:block;

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

    color:
        var(--color-primary);

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

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

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

    text-transform:uppercase;

}


.shop-support-card-title{

    display:-webkit-box;

    overflow:hidden;

    margin:0;

    color:
        var(--color-text);

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

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

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

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

}


.shop-support-card-excerpt{

    display:-webkit-box;

    overflow:hidden;

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

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

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

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

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

}


.shop-support-card-action{

    display:block;

    margin-top:auto;

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

    color:
        var(--color-primary);

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

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

}


/* ============================================================
   DESKTOP SUPPORT CAROUSEL
============================================================ */

@media (min-width:1025px){

    .shop-support-section{

	width:100%;

        overflow:hidden;

    }

    .shop-support-header{

        width:100%;

        max-width:var(--container-xl);

        margin-inline:auto;

        text-align:center;

        align-items:center;

        justify-content:center;

        position:relative;

    }

    .shop-support-heading{

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

    }

    .shop-support-description{

        margin-inline:auto;

    }

    .shop-support-link{

        position:absolute;

        right:0;

        top:50%;

        transform:translateY(-50%);

    }

    .shop-support-slider{

        width:100vw;

        max-width:100vw;

        margin-left:50%;

        transform:translateX(-50%);

        overflow-x:auto;

        overflow-y:hidden;

        scrollbar-width:none;

        -ms-overflow-style:none;

        cursor:grab;

        user-select:none;

        -webkit-user-select:none;

        touch-action:pan-x pan-y;

        -webkit-overflow-scrolling:touch;

        overscroll-behavior-x:contain;

    }

    .shop-support-grid{

        display:flex;

        flex-direction:row;

        flex-wrap:nowrap;

        align-items:stretch;

        justify-content:flex-start;

        gap:var(--grid-gap-md);

        width:max-content;

        min-width:max-content;

        padding-left:var(--space-24);

        padding-right:var(--space-24);

        margin-left:calc(
            (100vw - var(--container-xl)) / -2
        );

    }

    .shop-support-card{

        flex:0 0 460px;

        width:460px;

        min-width:460px;

        max-width:460px;

    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width:1024px){

    .shop-support-card{

        flex-basis:300px;

        width:300px;

        min-width:300px;

        max-width:300px;

    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width:767px){

    .shop-support-section{

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

    }

    .shop-support-header{

	position:relative;

        align-items:center;

        flex-direction:column;

	justify-content:center;

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

    }

    .shop-support-heading{

        width:100%;

        text-align:center;

    }

    .shop-support-title{

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

    }

    .shop-support-description{

        max-width:
            var(--container-md);

        margin:
            var(--space-8)
            auto
            0;

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

    }

    .shop-support-link{

        position:static;

        transform:none;

    }

    .shop-support-grid{

        gap:
            var(--grid-gap-sm);

        width:max-content;

        min-width:max-content;

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

    }

    .shop-support-card{

        flex-basis:280px;

        width:280px;

        min-width:280px;

        max-width:280px;

    }

    .shop-banner-section{

        padding-top:
            var(--space-8);

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

    }

    .shop-banner-container{

        width:100%;

        max-width:none;

        padding-inline:
            var(--space-8);

    }

    .shop-banner-link,
.shop-banner-container picture{

        width:100%;

        border-radius:
            var(--space-0);

        box-shadow:none;

    }

    .shop-banner-link img,
.shop-banner-container img{

        display:block;

        width:100%;

        height:auto;

        min-height:
            var(--space-96);

        object-fit:cover;

    }

}


/* ==========================================================
   PRODUCT GRID WISHLIST BUTTON
========================================================== */

.product-grid-item{

    position:relative;

}

.product-card-wishlist{

    position:absolute;

    top:var(--space-12);

    right:var(--space-12);

    z-index:var(--z-base);

    display:flex;

}

/* Tombol wishlist: hati putih bergaris merah saat belum disimpan,
   hati merah penuh saat produk sudah ada di wishlist. */
.product-card-wishlist-button{

    --wishlist-red:#e5304b;

    display:flex;

    align-items:center;

    justify-content:center;

    width:var(--avatar-md);

    height:var(--avatar-md);

    padding:0;

    border:var(--border-width-thin)
        solid
        rgba(229,48,75,.25);

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

    background:#ffffff;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

    cursor:pointer;

    transition:
        border-color var(--transition-fast),
        transform var(--transition-fast);

}

.product-card-wishlist-icon{

    width:20px;

    height:20px;

    fill:#ffffff;

    stroke:var(--wishlist-red);

    stroke-width:2;

    stroke-linejoin:round;

    transition:
        fill var(--transition-fast),
        transform var(--transition-fast);

}

.product-card-wishlist-button:hover{

    border-color:var(--wishlist-red);

    transform:translateY(-2px);

}

.product-card-wishlist-button.is-active .product-card-wishlist-icon{

    fill:var(--wishlist-red);

}

.product-card-wishlist-button.is-busy{

    pointer-events:none;

    opacity:.7;

}

.product-card-wishlist-button.is-pop .product-card-wishlist-icon{

    animation:wishlistPop .3s ease;

}

@keyframes wishlistPop{

    50%{

        transform:scale(1.3);

    }

}

.product-card-wishlist-button:focus-visible{

    outline:none;

    box-shadow:var(--focus-ring);

}

@media (prefers-reduced-motion:reduce){

    .product-card-wishlist-button.is-pop .product-card-wishlist-icon{

        animation:none;

    }

}


/* ==========================================================
   SHOP TOOLBAR
========================================================== */

.shop-toolbar{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    justify-content:space-between;

    gap:var(--space-16);

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

}

.shop-toolbar-form{

    display:flex;

    flex:1 1 260px;

    max-width:420px;

    gap:var(--space-8);

}

.shop-toolbar-search{

    flex:1;

    min-height:var(--input-height-sm);

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

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

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

    background:var(--color-surface);

    color:var(--color-text);

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

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

}

.shop-toolbar-search:focus{

    outline:none;

    border-color:var(--color-primary);

    box-shadow:var(--focus-ring);

}

.shop-toolbar-select{

    min-height:var(--input-height-sm);

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

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

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

    background:var(--color-surface);

    color:var(--color-text);

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

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

    cursor:pointer;

}

.shop-toolbar-select:focus{

    outline:none;

    border-color:var(--color-primary);

    box-shadow:var(--focus-ring);

}

.shop-toolbar-count{

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

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

}


/* ==========================================================
   SHOP PAGINATION
========================================================== */

.shop-pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-8);

    margin-top:var(--space-40);

}

.shop-pagination-link,
.shop-pagination-current{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:var(--button-height-sm);

    min-height:var(--button-height-sm);

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

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

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

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

    text-decoration:none;

}

.shop-pagination-link{

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

    background:var(--color-surface);

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

    transition:
        border-color var(--transition-fast),
        color var(--transition-fast);

}

.shop-pagination-link:hover{

    border-color:var(--color-primary);

    color:var(--color-primary);

}

.shop-pagination-link:focus-visible{

    outline:none;

    box-shadow:var(--focus-ring);

}

.shop-pagination-current{

    background:var(--color-primary);

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

}


/* ==========================================================
   TOOLBAR RESPONSIVE
========================================================== */

@media(max-width:768px){

    .shop-toolbar-form{

        max-width:100%;

    }

}


/* ============================================================
   SUPPORT CARD: UKURAN SAMA DENGAN HOMEPAGE
   Lebar kartu dan rasio gambar mengikuti home.css
   (--home-support-card-width*), agar carousel Customers Support
   di shop dan home tampil sama besar.
============================================================ */

.shop-support-section .shop-support-card{
    flex:0 0 var(--home-support-card-width);
    width:var(--home-support-card-width);
    min-width:var(--home-support-card-width);
    max-width:var(--home-support-card-width);
}

@media (max-width:1200px){

    .shop-support-section .shop-support-card{
        flex-basis:var(--home-support-card-width-tablet);
        width:var(--home-support-card-width-tablet);
        min-width:var(--home-support-card-width-tablet);
        max-width:var(--home-support-card-width-tablet);
    }

}

@media (max-width:767px){

    .shop-support-section .shop-support-card{
        flex-basis:var(--home-support-card-width-mobile);
        width:var(--home-support-card-width-mobile);
        min-width:var(--home-support-card-width-mobile);
        max-width:var(--home-support-card-width-mobile);
    }

    .shop-support-section .shop-support-card-image{
        aspect-ratio:var(--home-support-card-image-aspect-mobile);
    }

}


/* ==========================================================
   FLASH SALE BADGE (CAMPAIGN)
========================================================== */

.product-grid-item{

    position:relative;

}

.product-card-flash-badge{

    position:absolute;

    top:var(--space-12);

    left:var(--space-12);

    z-index:var(--z-base);

    display:inline-flex;

    align-items:center;

    gap:var(--space-4);

    padding:var(--space-4) var(--space-8);

    background:var(--color-primary);

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

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

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

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

    box-shadow:var(--shadow-sm);

}