/* =========================
   GLOBAL BOX MODEL FIX
   (root cause of most horizontal-scroll bugs:
   padding/border were being added ON TOP of width)
========================= */
*,
*::before,
*::after{
    box-sizing:border-box;
}

.breadcrumb{


    max-width:var(--container);


    margin:auto;


    padding:20px var(--pad) 0;


    font-size:14px;


    color:#7a7a7a;


}



.breadcrumb a{


    color:#7a7a7a;

    transition:color .2s ease;


}



.breadcrumb a:hover{


    color:var(--blue);


}



.breadcrumb .current{


    color:var(--ink);

    font-weight:600;


}









/* =========================
   PRODUCT HERO LAYOUT
========================= */


.product-hero{


    max-width:var(--container);


    margin:auto;


    padding:clamp(24px, 4vw, 50px) var(--pad) clamp(50px, 7vw, 80px);


    display:grid;


    grid-template-columns:1.05fr 1fr;


    gap:clamp(30px, 5vw, 60px);


    align-items:start;


}









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


.gallery{


    position:sticky;

    top:100px;


}



.gallery-main{


    background:var(--sand);


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


    overflow:hidden;


    aspect-ratio:4/3;


}



.gallery-main-btn{


    width:100%;

    height:100%;

    position:relative;

    display:block;


}



.gallery-main-btn img{


    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .4s ease;


}



.gallery-main-btn:hover img{


    transform:scale(1.03);


}



.gallery-expand-hint{


    position:absolute;

    bottom:14px;

    right:14px;

    background:rgba(23,23,23,.75);

    color:white;

    font-size:13px;

    padding:8px 14px;

    border-radius:999px;

    opacity:0;

    transform:translateY(6px);

    transition:opacity .2s ease, transform .2s ease;


}



.gallery-main-btn:hover .gallery-expand-hint,
.gallery-main-btn:focus-visible .gallery-expand-hint{


    opacity:1;

    transform:translateY(0);


}



.gallery-thumbs{


    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:14px;

    margin-top:14px;


}



.gallery-thumb{


    aspect-ratio:1;

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

    overflow:hidden;

    background:var(--sand);

    border:2px solid transparent;

    transition:border-color .2s ease, opacity .2s ease;

    opacity:.7;


}



.gallery-thumb img{


    width:100%;

    height:100%;

    object-fit:cover;


}



.gallery-thumb:hover{


    opacity:1;


}



.gallery-thumb.active{


    border-color:var(--blue);

    opacity:1;


}









/* =========================
   FULLSCREEN LIGHTBOX
========================= */


.lightbox{


    position:fixed;

    inset:0;

    z-index:3000;

    background:rgba(10,10,10,.94);

    display:flex;

    align-items:center;

    justify-content:center;


}



.lightbox[hidden]{


    display:none;


}



.lightbox-image{


    max-width:min(90vw, 1100px);

    max-height:85vh;

    width:auto;

    height:auto;

    object-fit:contain;

    border-radius:8px;


}



.lightbox-close{


    position:absolute;

    top:24px;

    right:24px;

    width:48px;

    height:48px;

    border-radius:50%;

    background:rgba(255,255,255,.1);

    color:white;

    font-size:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:background .2s ease;


}



.lightbox-close:hover{


    background:rgba(255,255,255,.2);


}



.lightbox-arrow{


    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:56px;

    height:56px;

    border-radius:50%;

    background:rgba(255,255,255,.1);

    color:white;

    font-size:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:background .2s ease;


}



.lightbox-arrow:hover{


    background:rgba(255,255,255,.2);


}



.lightbox-prev{


    left:24px;


}



.lightbox-next{


    right:24px;


}



.lightbox-counter{


    position:absolute;

    bottom:28px;

    left:50%;

    transform:translateX(-50%);

    color:rgba(255,255,255,.8);

    font-size:14px;

    letter-spacing:.5px;


}









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


.product-info{


    display:flex;

    flex-direction:column;


}



.sale-badge{


    display:inline-block;

    align-self:flex-start;

    background:#c2402e;

    color:white;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    padding:6px 14px;

    border-radius:999px;

    margin-bottom:14px;


}



.product-info h1{


    font-size:clamp(30px, 4vw, 42px);

    letter-spacing:-1.5px;

    line-height:1.1;

    margin-bottom:14px;


}



.rating-row{


    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;


}



.stars{


    display:inline-flex;

    gap:2px;

    font-size:16px;


}



.star-full{ color:#ffb020; }
.star-half{
    color:#ffb020;
    background:linear-gradient(90deg, #ffb020 50%, #d8d8d8 50%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.star-empty{ color:#d8d8d8; }


.rating-text{


    font-size:14px;

    color:#6a6a6a;


}



.price-row{


    display:flex;

    align-items:baseline;

    gap:14px;

    margin-bottom:18px;


}



.price-sale{


    font-size:clamp(26px, 3vw, 32px);

    font-weight:800;

    color:var(--ink);


}



.price-original{


    font-size:18px;

    color:#9a9a9a;

    position:relative;


}



.price-original::after{


    content:"";

    position:absolute;

    left:-3%;

    top:52%;

    width:106%;

    height:2px;

    background:#9a9a9a;

    transform:rotate(-8deg);


}



.product-info > .shortDesc,
#shortDesc{


    font-size:16px;

    line-height:1.65;

    color:#4a4a4a;

    max-width:520px;

    margin-bottom:26px;


}









/* COLOR PICKER */


.color-picker{


    margin-bottom:26px;


}



.color-picker-label{


    font-size:14px;

    font-weight:600;

    margin-bottom:10px;


}



.color-picker-label span{


    font-weight:400;

    color:#6a6a6a;


}



.color-swatches{


    display:flex;

    flex-wrap:wrap;

    gap:12px;


}



.color-swatch{


    width:34px;

    height:34px;

    border-radius:50%;

    box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);

    transition:transform .15s ease, box-shadow .15s ease;

    position:relative;


}



.color-swatch:hover{


    transform:scale(1.1);


}



.color-swatch.selected{


    box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink);


}









/* QUANTITY + PURCHASE */


.qty-purchase-row{


    display:flex;

    gap:16px;

    align-items:stretch;

    margin-bottom:18px;


}



.qty-selector{


    display:flex;

    align-items:center;

    border:1px solid #ddd;

    border-radius:12px;

    overflow:hidden;


}



.qty-selector button{


    width:44px;

    height:100%;

    font-size:18px;

    transition:background .2s ease;


}



.qty-selector button:hover{


    background:#f4f4f4;


}



.qty-selector input{


    width:48px;

    height:100%;

    text-align:center;

    border:none;

    border-left:1px solid #ddd;

    border-right:1px solid #ddd;

    font-size:16px;

    font-family:inherit;


}



.purchase-button{


    flex-grow:1;

    text-align:center;

    font-weight:700;


}



.purchase-button:hover{


    transform:translateY(-3px);


}



.stock-text{


    font-size:14px;

    font-weight:600;

    margin-bottom:6px;


}



.in-stock{ color:#1f8a4c; }
.low-stock{ color:#c2402e; }
.out-of-stock{ color:#9a9a9a; }


.published-text{


    font-size:13px;

    color:#8a8a8a;


}









/* =========================
   TABS
========================= */


.product-tabs{


    max-width:var(--container);


    margin:auto;


    padding:0 var(--pad) clamp(50px, 8vw, 90px);


}



.tab-list{


    display:flex;

    gap:8px;

    border-bottom:1px solid var(--line);

    margin-bottom:32px;

    overflow-x:auto;


}



.tab-btn{


    padding:14px 22px;

    font-size:15px;

    font-weight:600;

    color:#8a8a8a;

    border-bottom:2px solid transparent;

    white-space:nowrap;

    transition:color .2s ease, border-color .2s ease;


}



.tab-btn:hover{


    color:var(--ink);


}



.tab-btn.active{


    color:var(--ink);

    border-bottom-color:var(--blue);


}



.tab-panel{


    display:none;

    max-width:760px;


}



.tab-panel.active{


    display:block;


}



.tab-panel p{


    font-size:16px;

    line-height:1.75;

    color:#3f3f3f;


}



.tab-panel p + p{


    margin-top:16px;


}









/* PRODUCT INFO TAB */


.spec-table{


    border-top:1px solid var(--line);


}



.spec-row{


    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid var(--line);

    font-size:15px;


}



.spec-label{


    color:#8a8a8a;


}



.spec-value{


    font-weight:600;

    text-align:right;


}



.shipping-note{


    margin-top:24px;

    font-size:15px;

    line-height:1.7;

    color:#4a4a4a;

    background:var(--cream);

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

    padding:18px 20px;


}









/* REVIEWS TAB */


.review-summary{


    display:flex;

    align-items:center;

    gap:18px;

    padding-bottom:24px;

    margin-bottom:24px;

    border-bottom:1px solid var(--line);


}



.review-summary-score{


    font-size:44px;

    font-weight:800;

    letter-spacing:-1px;


}



.review-summary-count{


    display:block;

    margin-top:4px;

    font-size:14px;

    color:#8a8a8a;


}



.review-list{


    display:flex;

    flex-direction:column;

    gap:22px;


}



.review-card{


    padding-bottom:22px;

    border-bottom:1px solid var(--line);


}



.review-card:last-child{


    border-bottom:none;


}



.review-head{


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:6px;


}



.review-author{


    font-weight:700;


}



.review-date{


    font-size:13px;

    color:#9a9a9a;


}



.review-card .stars{


    margin-bottom:10px;


}



.review-text{


    font-size:15px;

    line-height:1.65;

    color:#3f3f3f;


}









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


.related-products{


    max-width:var(--container);


    margin:auto;


    padding:0 var(--pad) clamp(60px, 9vw, 100px);


}



.related-products h2{


    font-size:clamp(26px, 3.4vw, 34px);

    margin-bottom:28px;


}



/* =========================
   REMOVE HORIZONTAL SCROLL
   (now global — was previously
   accidentally trapped inside a
   max-width:520px media query,
   so it never ran on desktop)
========================= */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

.product-hero,
.breadcrumb,
.product-tabs,
.related-products{
    width:100%;
    max-width:100%;
    overflow:hidden;
}

.gallery,
.product-info{
    min-width:0;
    max-width:100%;
}

.gallery-main-btn{
    max-width:100%;
    overflow:hidden;
}

.gallery-main-btn img,
.gallery-thumb img,
.lightbox-image{
    max-width:100%;
}

.lightbox{
    max-width:100vw;
    overflow:hidden;
}

.tab-list{
    max-width:100%;
}



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


@media(max-width:900px){


    .product-hero{


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


    }



    .gallery{


        position:static;


    }



    .lightbox-arrow{


        width:44px;

        height:44px;

        font-size:24px;


    }



    .lightbox-prev{ left:10px; }
    .lightbox-next{ right:10px; }


    .product-hero{
        padding-left:20px;
        padding-right:20px;
    }

    .product-info h1{
        overflow-wrap:anywhere;
    }


}


@media(max-width:520px){


    .breadcrumb{
        padding-left:15px;
        padding-right:15px;
        font-size:13px;
    }


    .product-hero{
        padding-left:15px;
        padding-right:15px;
        gap:25px;
    }


    .gallery-main{
        aspect-ratio:1 / 1;
    }


    .gallery-thumbs{


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

        gap:8px;


    }


    .gallery-thumb{
        width:100%;
    }


    .product-info h1{
        font-size:30px;
        letter-spacing:-1px;
    }


    .price-row{
        flex-wrap:wrap;
    }


    .price-sale{
        font-size:26px;
    }


    .qty-purchase-row{


        flex-direction:column;

        width:100%;


    }


    .qty-selector{


        justify-content:center;

        height:52px;

        width:100%;


    }


    .qty-selector button{
        flex:1;
    }


    .qty-selector input{
        flex:1;
        width:auto;
    }


    .purchase-button{
        width:100%;
        height:52px;
    }


    .tab-list{
        margin-left:-15px;
        margin-right:-15px;
        padding-left:15px;
        padding-right:15px;
    }


    .tab-btn{
        padding:12px 16px;
    }


    .review-head{


        flex-direction:column;

        align-items:flex-start;

        gap:2px;


    }


}


/* Very small phones (320px-375px) */

@media(max-width:375px){


    .product-info h1{
        font-size:26px;
    }


    .gallery-thumbs{
        grid-template-columns:repeat(3,1fr);
    }


    .color-swatch{
        width:30px;
        height:30px;
    }


    .lightbox-close{
        width:40px;
        height:40px;
        top:15px;
        right:15px;
    }


}