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

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

.shop-detail-page{

    width:100%;

    min-width:0;

    background:
        var(--color-background);
}


/* ============================================================
SHOP DETAIL CONTAINER
============================================================ */

.shop-detail-container{

    display:grid;

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

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

    width:100%;

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

    margin-inline:auto;

    padding:
        var(--space-48)
        var(--space-24)
        var(--section-space-sm);
}


/* ============================================================
PRODUCT GALLERY
============================================================ */

.shop-gallery{

    display:flex;

    flex-direction:column;

    gap:
        var(--space-16);

    width:100%;

    min-width:0;
}


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

.shop-gallery-main{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    aspect-ratio:1 / 1;

    overflow:hidden;

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

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

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

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

.shop-gallery-main img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;
}


/* ============================================================
GALLERY THUMBNAILS
============================================================ */

.shop-gallery-list{

    display:flex;

    flex-direction:row;

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

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    -ms-overflow-style:none;

    padding-block:
        var(--space-4);
}

.shop-gallery-list::-webkit-scrollbar{

    display:none;
}


/* ============================================================
GALLERY THUMB
============================================================ */

.shop-gallery-thumb{

    flex:
        0 0
        var(--avatar-xl);

    width:
        var(--avatar-xl);

    height:
        var(--avatar-xl);

    min-width:
        var(--avatar-xl);

    padding:
        var(--space-4);

    overflow:hidden;

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

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

    background:
        var(--color-surface);

    cursor:pointer;

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

        box-shadow
        var(--duration-normal)
        var(--ease-standard);
}

.shop-gallery-thumb:hover{

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

.shop-gallery-thumb.is-active{

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

    box-shadow:
        0 0 0
        var(--color-primary);
}

.shop-gallery-thumb img{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;
}


/* ============================================================
PRODUCT INFORMATION COLUMN
============================================================ */

.shop-detail-right{

    display:flex;

    flex-direction:column;

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

    min-width:0;
}


/* ============================================================
PRODUCT INFO
============================================================ */

.shop-product-info{

    width:100%;
}

.product-price{

    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:
        var(--space-8);

}

.product-price .price{

    color:
        var(--color-primary);

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

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

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

.product-price .compare-price{

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

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

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

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

    text-decoration:
        line-through;
}


/* ============================================================
PRODUCT RATING
============================================================ */

.product-rating{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:
        var(--space-8);

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

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

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

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

.product-rating-stars{

    color:
        var(--color-primary);

    letter-spacing:
        var(--tracking-wide);
}

.product-rating-value{

    color:
        var(--color-text);

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


/* ============================================================
PRODUCT TITLE
============================================================ */

.product-title{

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

    color:
        var(--color-text);

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

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

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


/* ============================================================
SHORT DESCRIPTION
============================================================ */

.product-short-description{

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

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

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

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


/* ============================================================
PRODUCT INFORMATION
============================================================ */

.product-information{

    display:flex;

    flex-direction:column;

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

    border-top:
        var(--border-width-thin)
        solid
        var(--color-divider);
}

.info-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:
        var(--space-16);

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

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

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

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

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

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

.info-row strong{

    color:
        var(--color-text);

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

    text-align:right;
}

/* ============================================================
PRODUCT BENEFITS
============================================================ */

.shop-benefits{

    display:flex;

    flex-direction:column;

    width:100%;

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

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

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

    background:
        var(--color-surface);

    overflow:hidden;
}


/* ============================================================
BENEFIT ROW
============================================================ */

.benefit-row{

    display:flex;

    align-items:center;

    gap:
        var(--space-16);

    width:100%;

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

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

    border-bottom:
        var(--border-width-thin)
        solid
        var(--color-divider);
}

.benefit-row:last-child{

    border-bottom:0;
}


/* ============================================================
BENEFIT ICON
============================================================ */

.benefit-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:
        0 0
        var(--button-height-md);

    width:
        var(--button-height-md);

    height:
        var(--button-height-md);

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

.benefit-icon svg{

    display:block;

    width:
        var(--space-32) !important;

    height:
        var(--space-32) !important;

    min-width:
        var(--space-32);

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

    max-width:
        var(--space-32);

    max-height:
        var(--space-32);

    flex:
        0 0
        var(--space-32);
}

/* ============================================================
BENEFIT CONTENT
============================================================ */

.benefit-content{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:
        var(--space-8);

    min-width:0;

    color:
        var(--color-text);

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

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

.benefit-label{

    color:
        var(--color-text);

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

.benefit-value{

    color:
        var(--color-text);

    font-weight:
        var(--font-regular);
}


/* ============================================================
SHIPPING CARRIERS
============================================================ */

.shipping-carriers{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:
        var(--space-8);

    min-width:0;
}

.shipping-carrier{

    color:
        var(--color-text);

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

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

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

    white-space:nowrap;
}

.shipping-divider{

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

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

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


/* ============================================================
BENEFIT ICON VARIANTS
============================================================ */

.benefit-icon-warranty{

    color:
        var(--color-info);
}

.benefit-icon-shipping{

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

.benefit-icon-free-shipping{

    color:
        var(--color-success);
}

.benefit-icon-payment{

    color:
        var(--color-warning);
}

/* ============================================================
PRODUCT ACTIONS
============================================================ */

.shop-actions{

    display:grid;

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

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

    width:100%;
}

/* ============================================================
FIXED PRODUCT ACTIONS
============================================================ */

.shop-actions.is-floating{

    position:fixed;

    left:auto;

    right:
        var(--space-24);

    bottom:
        var(--space-24);

    width:auto;

    min-width:0;

    padding:
        var(--space-8);

    background:
        var(--color-surface);

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

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

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

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

    opacity:0;

    visibility:hidden;

    transform:
        translateY(
            var(--space-16)
        );

    pointer-events:none;

    transition:
        opacity
        var(--duration-normal)
        var(--ease-standard),

        transform
        var(--duration-normal)
        var(--ease-standard),

        visibility
        0s
        linear
        var(--duration-normal);
}


/* ============================================================
FIXED PRODUCT ACTIONS VISIBLE
============================================================ */

.shop-actions.is-floating.is-floating-visible{

    opacity:1;

    visibility:visible;

    transform:
        translateY(
            var(--space-0)
        );

    pointer-events:auto;

    transition:
        opacity
        var(--duration-normal)
        var(--ease-standard),

        transform
        var(--duration-normal)
        var(--ease-standard),

        visibility
        0s
        linear
        var(--space-0);
}


/* ============================================================
FIXED PRODUCT ACTIONS PLACEHOLDER
============================================================ */

.shop-actions-placeholder{

    display:block;

    width:100%;

    visibility:hidden;

    pointer-events:none;

}

/* ============================================================
QUANTITY
============================================================ */

.qty-selector{

    display:flex;

    align-items:center;

    height:
        var(--button-height-lg);

    overflow:hidden;

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

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

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

.qty-selector button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:
        var(--button-height-lg);

    height:100%;

    padding:
        var(--space-0);

    border:0;

    background:
        var(--color-surface);

    color:
        var(--color-text);

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

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

    cursor:pointer;
}

.qty-selector button:hover{

    background:
        var(--color-surface-hover);
}

.qty-selector input{

    width:
        var(--button-height-md);

    height:100%;

    padding:
        var(--space-0);

    border:0;

    outline:none;

    background:
        var(--color-surface);

    color:
        var(--color-text);

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

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

    text-align:center;

    appearance:textfield;
}

.qty-selector input::-webkit-inner-spin-button,
.qty-selector input::-webkit-outer-spin-button{

    margin:0;

    appearance:none;
}


/* ============================================================
ACTION BUTTONS
============================================================ */

.btn-add-cart,
.btn-buy-now{

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

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

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

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

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

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

    cursor:pointer;

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

        color
        var(--duration-normal)
        var(--ease-standard),

        border-color
        var(--duration-normal)
        var(--ease-standard);
}

.btn-add-cart{

    background:
        var(--color-surface);

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

.btn-add-cart:hover{

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

.btn-buy-now{

    background:
        var(--color-primary);

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

.btn-buy-now:hover{

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

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


/* ============================================================
DESCRIPTION
============================================================ */

.shop-detail-description{

    width:100%;

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

    margin-inline:auto;

    padding:
        var(--section-space-sm)
        var(--space-24);
}

.shop-description{

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

    border-top:
        var(--border-width-thin)
        solid
        var(--color-divider);
}

.shop-description h2,
.shop-review h2,
.shop-related-products h2{

    margin:0;

    color:
        var(--color-text);

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

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

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

.shop-description{

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

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

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

.shop-description__content{

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

    overflow-wrap:
        anywhere;
}

/* ============================================================
REVIEW
============================================================ */

.shop-detail-review{

    width:100%;

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

    margin-inline:auto;

    padding:
        0
        var(--space-24)
        var(--section-space-sm);
}

.shop-review{

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

    border-top:
        var(--border-width-thin)
        solid
        var(--color-divider);
}

.shop-review p{

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

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

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

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


/* ============================================================
RELATED PRODUCTS
============================================================ */

.shop-detail-related{

    width:100%;

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

    margin-inline:auto;

    padding:
        0
        var(--space-24)
        var(--section-space-md);
}

.shop-related-products{

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

    border-top:
        var(--border-width-thin)
        solid
        var(--color-divider);
}

.shop-related-products h2{

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


/* ============================================================
FOCUS
============================================================ */

.shop-gallery-thumb:focus-visible,
.qty-selector button:focus-visible,
.qty-selector input:focus-visible,
.btn-add-cart:focus-visible,
.btn-buy-now:focus-visible{

    outline:
        var(--border-width-normal)
        solid
        var(--color-primary);

    outline-offset:
        var(--space-4);
}


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

@media (max-width:1024px){

    .shop-detail-container{

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

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

        padding-top:
            var(--space-32);
    }

    .product-title{

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

    .product-price .price{

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

    .shop-actions{

        grid-template-columns:
            1fr
            1fr;
    }

    .qty-selector{

        grid-column:
            1 / -1;

        justify-self:start;
    }

}


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

@media (max-width:767px){

    .shop-detail-container{

        display:flex;

        flex-direction:column;

        gap:
            var(--space-24);

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

    .shop-gallery{

        gap:
            var(--space-12);
    }

    .shop-gallery-main{

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

        box-shadow:none;
    }

    .shop-gallery-thumb{

        flex-basis:
            var(--avatar-xl);

        width:
            var(--avatar-xl);

        height:
            var(--avatar-xl);

        min-width:
            var(--avatar-xl);
    }

    .shop-detail-right{

        gap:
            var(--space-24);
    }

    .shop-actions.is-floating{

        left:
            var(--space-0) !important;

        right:
            var(--space-0) !important;

        bottom:
            var(--space-0) !important;

        width:
            100% !important;

        padding:
            var(--space-12);

        padding-bottom:
            calc(
                var(--space-12) +
                env(safe-area-inset-bottom)
            );

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

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

    }

    .shop-benefits{

        padding:
            var(--space-4)
            var(--space-12);
    }

    .benefit-row{

        align-items:flex-start;

        gap:
            var(--space-12);

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

        padding:
            var(--space-12)
            var(--space-4);
    }

    .benefit-icon{

        flex-basis:
            var(--button-height-md);

        width:
            var(--button-height-md);

        height:
            var(--button-height-md);
    }

    .benefit-icon svg{

        display:block;

        width:
            var(--space-24) !important;

        height:
            var(--space-24) !important;

        min-width:
            var(--space-24);

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

        max-width:
            var(--space-24);

        max-height:
            var(--space-24);

        flex:
            0 0
            var(--space-24);
    }

    .benefit-content{

        align-items:flex-start;

        gap:
            var(--space-4);

        flex-direction:column;

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

    .shipping-carriers{

        gap:
            var(--space-4);

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

    .shipping-carrier{

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

    .shipping-divider{

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

    .product-price .price{

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

    .product-title{

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

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

    .product-short-description{

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

    .product-information{

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

    .shop-actions{

        grid-template-columns:
            1fr
            1fr;
    }

    .qty-selector{

        grid-column:
            1 / -1;

        width:100%;

        justify-content:center;
    }

    .btn-add-cart,
    .btn-buy-now{

        width:100%;

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

    .shop-detail-description,
    .shop-detail-review,
    .shop-detail-related{

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

    .shop-detail-description{

        padding-top:
            var(--space-32);
    }

}


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

@media (max-width:480px){

    .shop-detail-container{

        padding-inline:
            var(--space-12);
    }

    .shop-gallery-main{

        border-radius:
            var(--radius-md);
    }

    .shop-gallery-thumb{

        flex-basis:
            var(--avatar-lg);

        width:
            var(--avatar-lg);

        height:
            var(--avatar-lg);

        min-width:
            var(--avatar-lg);
    }

    .shop-detail-description,
    .shop-detail-review,
    .shop-detail-related{

        padding-inline:
            var(--space-12);
    }

}