/* ===========================================================
   PRODUCT PAGE CSS
   PART 1 - Layout & Gallery
=========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'League Spartan',sans-serif;
    color:#222;
    background:#fff;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

/* ===========================================================
   PRODUCT PAGE
=========================================================== */

.product-page{
    width:100%;
    max-width:1400px;
    margin:50px auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:55% 45%;
    gap:60px;
    box-sizing:border-box;
}

.product-info-wrapper{
    width:100%;
    min-width:0;
    position:sticky;
    top:30px;
    align-self:flex-start;
}

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

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

.gallery-main{
    position:relative;
    width:100%;
    background:#f8f8f8;
    border-radius:16px;
    overflow:hidden;
}

.gallery-main-inner{
    width:100%;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.gallery-main-inner img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity .3s ease, transform .4s ease;
}

.gallery-main-inner:hover img{
    transform:scale(1.04);
}

/* ===========================================================
   Gallery Arrows
=========================================================== */

.gallery-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:0 6px 15px rgba(0,0,0,.12);
    cursor:pointer;
    font-size:22px;
    transition:.3s;
    z-index:5;
}

.gallery-arrow:hover{
    background:#111;
    color:#fff;
}

.gallery-prev{
    left:18px;
}

.gallery-next{
    right:18px;
}

/* ===========================================================
   Thumbnails
=========================================================== */

.gallery-thumbnails{
    display:flex;
    gap:14px;
    margin-top:18px;
    overflow-x:auto;
    scrollbar-width:none;
    scroll-behavior:smooth;
    padding-bottom:4px;
}

.gallery-thumbnails::-webkit-scrollbar{
    display:none;
}

.thumb{
    width:92px;
    height:92px;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    transition:.3s;
    flex-shrink:0;
    background:#f7f7f7;
    display:flex;
    align-items:center;
    justify-content:center;
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.thumb.active{
    border-color:#111;
}

.thumb:hover{
    border-color:#888;
}

/* Hover Zoom */
@media(min-width:992px){
    .gallery-main-inner img:hover{
        transform:scale(1.08);
    }
}

/* Tablet */
@media(max-width:1100px){
    .product-page{
        grid-template-columns:1fr;
        gap:40px;
    }
    .product-info-wrapper{
        position:static;
    }
}

/* Mobile */
@media(max-width:768px){
    .product-page{
        padding:0 16px;
        margin:25px auto;
        gap:30px;
    }
    .gallery-arrow{
        width:42px;
        height:42px;
        font-size:18px;
    }
    .gallery-prev{
        left:10px;
    }
    .gallery-next{
        right:10px;
    }
    .gallery-thumbnails{
        gap:10px;
    }
    .thumb{
        width:72px;
        height:72px;
    }
}


/* ===========================================================
   PRODUCT INFO
   PART 2 - Product Information, Variants & Buttons
=========================================================== */

.product-info{
    width:100%;
    display:flex;
    flex-direction:column;
}

.breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    font-size:13px;
    color:#999;
    margin-bottom:14px;
    letter-spacing:0.2px;
}

.breadcrumb span{ transition:.3s; }
.breadcrumb span:hover{ color:#111; }

.product-info h1{
    font-size:30px;
    font-weight:700;
    line-height:1.2;
    color:#111;
    margin-bottom:10px;
    letter-spacing:-0.3px;
}

.product-price{
    font-size:24px;
    font-weight:600;
    color:#111;
    margin-bottom:28px;
}

.option-group{
    margin-bottom:24px;
}

.option-group label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#555;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:0.6px;
}

.option-group select{
    width:100%;
    height:50px;
    border:1px solid #ddd;
    border-radius:8px;
    padding:0 14px;
    font-size:15px;
    font-family:'League Spartan',sans-serif;
    background:#fff;
    cursor:pointer;
    transition:border-color .25s;
    appearance:auto;
}

.option-group select:hover{ border-color:#999; }
.option-group select:focus{ outline:none; border-color:#111; }

.color-options{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.color-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    transition:.25s;
    padding:4px;
    min-width:56px;
}

.color-item span{
    margin-top:6px;
    font-size:11px;
    color:#888;
    transition:color .25s;
}

.color-item.active span{ color:#111; font-weight:600; }

.color-circle{
    width:36px;
    height:36px;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #ddd;
    transition:box-shadow .25s, transform .25s;
}

.color-item:hover .color-circle{ transform:scale(1.1); }
.color-item.active .color-circle{ box-shadow:0 0 0 2px #111; }

.quantity-box{
    display:flex;
    align-items:center;
    width:140px;
    height:48px;
    border:1px solid #ddd;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
}

.quantity-box button{
    width:42px;
    height:100%;
    border:none;
    background:#fafafa;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:background .2s, color .2s;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#444;
}

.quantity-box button:hover{ background:#111; color:#fff; }
.quantity-box button:active{ transform:scale(.9); }

.quantity-box input{
    flex:1;
    border:none;
    border-left:1px solid #eee;
    border-right:1px solid #eee;
    text-align:center;
    font-size:16px;
    font-weight:600;
    font-family:'League Spartan',sans-serif;
    outline:none;
    background:#fff;
    color:#111;
}

.qty-minus{ border-radius:8px 0 0 8px; }
.qty-plus{ border-radius:0 8px 8px 0; }

.quantity-box input::-webkit-outer-spin-button,
.quantity-box input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.quantity-box input[type=number]{ -moz-appearance:textfield; }

.add-to-cart{
    width:100%;
    height:52px;
    border:none;
    border-radius:6px;
    background:#111;
    color:#fff;
    font-size:13px;
    font-weight:700;
    font-family:'League Spartan',sans-serif;
    letter-spacing:1.2px;
    cursor:pointer;
    transition:background .25s;
    margin:8px 0 12px;
    text-transform:uppercase;
}

.add-to-cart:hover{ background:#333; }

.wishlist-btn{
    width:100%;
    height:48px;
    border:1px solid #ddd;
    border-radius:6px;
    background:#fff;
    color:#444;
    font-size:14px;
    font-weight:500;
    font-family:'League Spartan',sans-serif;
    cursor:pointer;
    transition:border-color .25s, color .25s, background .25s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:24px;
}

.wishlist-btn:hover{
    border-color:#111;
    color:#111;
    background:#fafafa;
}

.wishlist-btn.active{
    border-color:#e85b24;
    color:#e85b24;
    background:#fff5f0;
}

.wishlist-btn i{ font-size:15px; }

.product-description{
    border-top:1px solid #eee;
    padding-top:20px;
    margin-top:4px;
}

.product-description p{
    font-size:15px;
    line-height:1.7;
    color:#555;
}

.feature-icons{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:36px;
}

.feature-item{ text-align:center; }

.feature-item img{
    width:44px;
    height:44px;
    object-fit:contain;
    margin:0 auto 10px;
}

.feature-item span{
    display:block;
    font-size:13px;
    color:#555;
    line-height:1.4;
}

@media(max-width:1100px){
.feature-icons{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:768px){

.product-info h1{ font-size:26px; }
.product-price{ font-size:22px; margin-bottom:22px; }
.breadcrumb{ font-size:12px; }
.color-circle{ width:32px; height:32px; }
.quantity-box{ width:130px; height:44px; }
.quantity-box button{ width:38px; font-size:16px; }
.add-to-cart{ height:50px; font-size:12px; letter-spacing:1.5px; border-radius:8px; }
.wishlist-btn{ height:44px; font-size:13px; }
.feature-icons{ grid-template-columns:repeat(2,1fr); gap:16px; }
.feature-item img{ width:38px; height:38px; }
.feature-item span{ font-size:12px; }
.product-description p{ font-size:14px; }

}

@media(max-width:480px){
.product-info h1{ font-size:22px; }
.product-price{ font-size:20px; }
.add-to-cart{ height:48px; font-size:11px; letter-spacing:1.5px; }
}


/* ===========================================================
   PRODUCT PAGE CSS
   PART 3 - Features, Specifications & Materials
=========================================================== */

/* ===========================================================
   ACCORDION
=========================================================== */

.product-accordion{
    max-width:1100px;
    margin:70px auto;
    padding:0 40px;
    border-top:2px solid #e8e8e8;
}

.accordion-item{
    border-bottom:1px solid #e8e8e8;
}

.accordion-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;
    cursor:pointer;
    transition:color .3s;
    user-select:none;
}

.accordion-header:hover{
    color:#E65A1E;
}

.accordion-header h3{
    font-size:24px;
    font-weight:600;
    letter-spacing:-0.3px;
}

.accordion-icon{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    font-weight:300;
    color:#999;
    transition:color .3s,transform .3s;
    border-radius:50%;
}

.accordion-header:hover .accordion-icon{
    color:#E65A1E;
}

.accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height .45s ease,padding .35s ease;
    padding:0;
}

.accordion-item.active .accordion-content{
    max-height:2000px;
    padding:0 0 30px 0;
}

/* ===========================================================
   FEATURES
=========================================================== */

.feature-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 48px;
}

.feature-row{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.feature-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#E65A1E;
    margin-top:10px;
    flex-shrink:0;
}

.feature-row span:last-child{
    font-size:17px;
    line-height:1.7;
    color:#444;
}

/* ===========================================================
   SPECIFICATIONS
=========================================================== */

.product-specifications{

    margin:90px 0;

}

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:42px;

    font-family:'League Spartan',sans-serif;

    font-weight:700;

    color:#111;

}

.specifications-wrapper{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:center;

}

.specifications-info{

    width:100%;

}

.spec-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid #ececec;

}

.spec-label{

    font-size:17px;

    color:#777;

}

.spec-value{

    font-size:18px;

    font-weight:600;

    color:#111;

    text-align:right;

}

.specifications-image{

    background:#fafafa;

    border-radius:18px;

    padding:35px;

}

.specifications-image img{

    width:100%;

    object-fit:contain;

}

/* ===========================================================
   MATERIALS
=========================================================== */

.product-materials{

    margin:90px 0;

}

.materials-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.materials-image{

    border-radius:18px;

    overflow:hidden;

    background:#f8f8f8;

}

.materials-image img{

    width:100%;

    display:block;

    transition:.4s;

}

.materials-image:hover img{

    transform:scale(1.04);

}

.materials-content h2{

    font-size:40px;

    margin-bottom:20px;

    font-family:'League Spartan',sans-serif;

}

.materials-description{

    font-size:17px;

    color:#555;

    line-height:1.8;

    margin-bottom:35px;

}

.materials-specs{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:40px;

}

.material-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;

    padding-bottom:14px;

    border-bottom:1px solid #ececec;

}

.material-title{

    font-size:17px;

    font-weight:600;

    color:#111;

}

.material-value{

    font-size:16px;

    color:#666;

    text-align:right;

}

.materials-care h3{

    font-size:24px;

    margin-bottom:18px;

    font-family:'League Spartan',sans-serif;

}

.materials-care ul{

    list-style:none;

}

.materials-care li{

    position:relative;

    padding-left:24px;

    margin-bottom:14px;

    color:#555;

    line-height:1.7;

}

.materials-care li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:0;

    color:#2E7D32;

    font-weight:bold;

}

/* ===========================================================
   WARRANTY BLOCK
=========================================================== */

.warranty-content{

    max-width:850px;

}

.warranty-content p{

    font-size:17px;

    line-height:1.8;

    color:#555;

}

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

@media(max-width:1100px){

.feature-grid{
    grid-template-columns:1fr;
}

.product-accordion{
    padding:0 30px 0 20px;
}

.specifications-wrapper{

    grid-template-columns:1fr;

    gap:40px;

}

.materials-container{

    grid-template-columns:1fr;

    gap:40px;

}

.specifications-image{

    max-width:500px;

    margin:auto;

}

}

@media(max-width:768px){

.product-accordion{
    margin:50px 0;
    padding:0 20px;
}

.accordion-header{
    padding:18px 0;
}

.accordion-header h3{
    font-size:20px;
}

.accordion-icon{
    width:30px;
    height:30px;
    font-size:22px;
}

.accordion-content{
    padding:0;
}

.accordion-item.active .accordion-content{
    padding:0 0 24px 0;
}

.feature-row span:last-child{
    font-size:15px;
}

.section-title h2{

    font-size:30px;

}

.spec-row{

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}

.spec-value{

    text-align:left;

}

.materials-content h2{

    font-size:30px;

}

.materials-description{

    font-size:15px;

}

.material-title{

    font-size:15px;

}

.material-value{

    font-size:15px;

}

.materials-care h3{

    font-size:20px;

}

.materials-care li{

    font-size:15px;

}

}


/* ===========================================================
   PRODUCT PAGE CSS
   PART 4 - Customer Reviews
=========================================================== */

.product-reviews{

    width:100%;

    margin:90px 0;

}

/* ===========================================================
   Reviews Header
=========================================================== */

.reviews-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:45px;

    padding-bottom:20px;

    border-bottom:1px solid #ececec;

}

.reviews-header h2{

    font-size:42px;

    font-family:'League Spartan',sans-serif;

    font-weight:700;

    color:#111;

    margin-bottom:10px;

}

.reviews-header p{

    font-size:20px;

    color:#666;

    font-weight:500;

}

/* ===========================================================
   Review List
=========================================================== */

.reviews-list{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/* ===========================================================
   Review Card
=========================================================== */

.review-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:16px;

    padding:28px;

    transition:.3s;

}

.review-card:hover{

    border-color:#d6d6d6;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transform:translateY(-3px);

}

/* ===========================================================
   Review Top
=========================================================== */

.review-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

}

/* ===========================================================
   Reviewer
=========================================================== */

.review-user{

    display:flex;

    align-items:center;

    gap:16px;

}

.review-avatar{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#111;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    flex-shrink:0;

}

.review-user h4{

    font-size:20px;

    font-weight:600;

    margin-bottom:6px;

    color:#111;

}

.review-user span{

    font-size:14px;

    color:#888;

}

/* ===========================================================
   Rating
=========================================================== */

.review-rating{

    font-size:22px;

    color:#F4B400;

    white-space:nowrap;

    letter-spacing:2px;

}

/* ===========================================================
   Review Title
=========================================================== */

.review-card h3{

    font-size:24px;

    font-weight:600;

    margin-bottom:14px;

    color:#111;

    font-family:'League Spartan',sans-serif;

}

/* ===========================================================
   Review Text
=========================================================== */

.review-card p{

    font-size:17px;

    line-height:1.8;

    color:#555;

}

/* ===========================================================
   Verified Badge (Optional)
=========================================================== */

.verified-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:16px;

    padding:6px 12px;

    background:#F6F6F6;

    border-radius:50px;

    font-size:13px;

    color:#2E7D32;

    font-weight:600;

}

.verified-badge i{

    font-style:normal;

}

/* ===========================================================
   Review Images (Optional)
=========================================================== */

.review-images{

    display:flex;

    gap:12px;

    margin-top:20px;

    overflow-x:auto;

    scrollbar-width:none;

}

.review-images::-webkit-scrollbar{

    display:none;

}

.review-images img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    transition:.3s;

    flex-shrink:0;

}

.review-images img:hover{

    transform:scale(1.05);

}

/* ===========================================================
   Write Review Button
=========================================================== */

.review-action{

    margin-top:45px;

    text-align:center;

}

.review-action .btn-review{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 36px;

    border:2px solid #111;

    background:#fff;

    color:#111;

    font-size:15px;

    font-weight:600;

    letter-spacing:.5px;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

.review-action .btn-review:hover{

    background:#111;

    color:#fff;

}

/* ===========================================================
   Review Summary (Optional)
=========================================================== */

.review-summary{

    display:grid;

    grid-template-columns:220px 1fr;

    gap:40px;

    margin-bottom:50px;

}

.review-score{

    text-align:center;

}

.review-score h3{

    font-size:64px;

    font-weight:700;

    color:#111;

}

.review-score span{

    display:block;

    margin-top:10px;

    font-size:18px;

    color:#666;

}

.rating-bars{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.rating-row{

    display:grid;

    grid-template-columns:50px 1fr 45px;

    align-items:center;

    gap:12px;

}

.rating-bar{

    width:100%;

    height:8px;

    background:#ececec;

    border-radius:50px;

    overflow:hidden;

}

.rating-fill{

    height:100%;

    background:#F4B400;

    border-radius:50px;

}

/* ===========================================================
   Tablet
=========================================================== */

@media(max-width:1100px){

.review-summary{

    grid-template-columns:1fr;

}

}

/* ===========================================================
   Mobile
=========================================================== */

@media(max-width:768px){

.product-reviews{

    margin:60px 0;

}

.reviews-header{

    align-items:flex-start;

}

.reviews-header h2{

    font-size:30px;

}

.reviews-header p{

    font-size:16px;

}

.review-card{

    padding:20px;

}

.review-top{

    flex-direction:column;

    align-items:flex-start;

}

.review-avatar{

    width:50px;

    height:50px;

    font-size:20px;

}

.review-user h4{

    font-size:18px;

}

.review-card h3{

    font-size:20px;

}

.review-card p{

    font-size:15px;

    line-height:1.7;

}

.review-rating{

    font-size:18px;

}

.review-images img{

    width:75px;

    height:75px;

}

.review-score h3{

    font-size:48px;

}

.review-score span{

    font-size:15px;

}

.rating-row{

    grid-template-columns:40px 1fr 35px;

    font-size:14px;

}

.review-action .btn-review{

    width:100%;

}

}

/* ===========================================================
   PRODUCT PAGE CSS
   PART 5 - Related Products + Final Responsive Utilities
=========================================================== */

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

.related-products{

    width:100%;

    margin:100px 0;

    overflow:hidden;

}

/* Header */

.related-products .section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.related-products .section-header h2{

    font-family:'League Spartan',sans-serif;

    font-size:42px;

    font-weight:700;

    color:#111;

}

/* Navigation */

.related-controls{

    display:flex;

    gap:12px;

}

.related-controls button{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 5px 15px rgba(0,0,0,.12);

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.related-controls button:hover{

    background:#111;

    color:#fff;

}

/* ===========================================================
   Slider
=========================================================== */

.related-slider{

    display:flex;

    gap:24px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -ms-overflow-style:none;

    padding-bottom:10px;

}

.related-slider::-webkit-scrollbar{

    display:none;

}

/* ===========================================================
   Card
=========================================================== */

.related-card{

    flex:0 0 calc((100% - 48px)/3);

    min-width:360px;

    background:#fff;

    border-radius:16px;

    overflow:hidden;

    text-decoration:none;

    color:#111;

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

    transition:.35s;

}

.related-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

/* ===========================================================
   Image
=========================================================== */

.related-image{

    width:100%;

    aspect-ratio:1/1;

    background:#f7f7f7;

    overflow:hidden;

}

.related-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.related-card:hover img{

    transform:scale(1.05);

}

/* ===========================================================
   Product Info
=========================================================== */

.related-info{

    padding:22px;

}

.related-info h3{

    font-size:24px;

    font-weight:600;

    margin-bottom:10px;

    color:#111;

}

.related-price{

    font-size:22px;

    font-weight:700;

    margin-bottom:18px;

    color:#111;

}

.related-info p{

    font-size:16px;

    color:#666;

    line-height:1.6;

    margin-top:15px;

}

/* ===========================================================
   Color Swatches
=========================================================== */

.related-colors{

    display:flex;

    gap:10px;

}

.related-color{

    width:18px;

    height:18px;

    border-radius:50%;

    cursor:pointer;

    border:2px solid #fff;

    box-shadow:0 0 0 1px #ccc;

    transition:.3s;

}

.related-color:hover{

    transform:scale(1.15);

}

.related-color.active{

    box-shadow:0 0 0 2px #111;

}

/* ===========================================================
   Fade Animation
=========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .7s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* ===========================================================
   Utility Classes
=========================================================== */

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.hidden{

    display:none !important;

}

/* ===========================================================
   LARGE DESKTOP
=========================================================== */

@media(min-width:1600px){

.product-page{

    max-width:1550px;

}

.related-card{

    min-width:420px;

}

.related-products .section-header h2{

    font-size:48px;

}

}

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

@media(max-width:1200px){

.related-card{

    flex:0 0 calc((100% - 24px)/2);

    min-width:330px;

}

}

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

@media(max-width:768px){

.related-products{

    margin:70px 0;

}

.related-products .section-header{

    margin-bottom:25px;

}

.related-products .section-header h2{

    font-size:30px;

}

.related-controls{

    display:none;

}

.related-slider{

    gap:16px;

    scroll-snap-type:x mandatory;

}

.related-card{

    flex:0 0 88%;

    min-width:88%;

    scroll-snap-align:start;

}

.related-info{

    padding:18px;

}

.related-info h3{

    font-size:20px;

}

.related-price{

    font-size:18px;

}

.related-info p{

    font-size:15px;

}

}

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

@media(max-width:480px){

.product-page{

    padding:0 12px;

}

.related-card{

    min-width:92%;

}

.related-products .section-header h2{

    font-size:26px;

}

}

/* ===========================================================
   PART 6 - Placeholder & Fixes
=========================================================== */

main {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

img[src=""],
img:not([src]) {
    opacity: 0;
}

.wishlist-btn {
    width: 100%;
    height: 54px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-family: 'League Spartan', sans-serif;
    font-size: 15px;
    font-weight: 600;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.wishlist-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.wishlist-btn.active {
    background: #fff0f0;
    border-color: #e74c3c;
    color: #e74c3c;
}

/* ===========================================================
   Stock Status
=========================================================== */

.stock-status {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    letter-spacing: 0.3px;
}

.stock-ok {
    background: #e8f5e9;
    color: #2e7d32;
}

.stock-low {
    background: #fff3e0;
    color: #e65100;
}

.stock-out {
    background: #fce4ec;
    color: #c62828;
}

.stock-status i {
    margin-right: 6px;
}

.add-to-cart.out-of-stock {
    background: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

.add-to-cart:disabled {
    background: #999;
    cursor: not-allowed;
    opacity: 0.7;
}

.quantity-box button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.quantity-box input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.product-features,
.product-specifications,
.product-materials,
.product-reviews,
.related-products {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.related-image {
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

/* Story Section */
.story-section {
    width: 100%;
    background: #1a1a1a;
    color: #fff;
    padding: 100px 0;
}

.story-section .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.story-header h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 60px;
    font-family: 'League Spartan', sans-serif;
}

.story-grid {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.story-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.story-row.reverse {
    direction: rtl;
}

.story-row.reverse .story-content {
    direction: ltr;
}

.story-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.story-count {
    font-size: 14px;
    color: #888;
    letter-spacing: 2px;
    font-weight: 600;
}

.story-content h3 {
    font-size: 36px;
    font-weight: 700;
    font-family: 'League Spartan', sans-serif;
}

.story-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #bbb;
}

.story-image {
    border-radius: 18px;
    overflow: hidden;
}

.story-image img {
    width: 100%;
    display: block;
}

.story-video-section {
    margin-top: 100px;
    text-align: center;
}

.story-video-heading h2 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 40px;
    font-family: 'League Spartan', sans-serif;
}

.story-video {
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: 16/9;
    border-radius: 18px;
    overflow: hidden;
}

.story-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media(max-width: 1100px) {
    .story-row { grid-template-columns: 1fr; gap: 30px; }
    .story-row.reverse { direction: ltr; }
    .story-header h2 { font-size: 36px; }
    .story-content h3 { font-size: 28px; }
    .story-video-heading h2 { font-size: 32px; }
}

@media(max-width: 768px) {
    .story-section { padding: 60px 0; }
    .story-section .container { padding: 0 16px; }
    .story-grid { gap: 50px; }
    .story-header h2 { font-size: 30px; }
    .story-content h3 { font-size: 24px; }
    .story-content p { font-size: 15px; }
    .story-video-section { margin-top: 60px; }
    .story-video-heading h2 { font-size: 26px; }
}

.color-item.active .color-circle {
    box-shadow: 0 0 0 3px #111;
    transform: scale(1.1);
}

.color-item.active span {
    color: #111;
    font-weight: 700;
}

@media(max-width: 768px) {
    main { padding: 0; }
    .product-features,
    .product-specifications,
    .product-materials,
    .product-reviews,
    .related-products { padding: 0 16px; }
    .wishlist-btn { height: 48px; font-size: 14px; }
}

/* ===========================================================
   ENHANCEMENTS
   Fade-in animations, smooth interactions
=========================================================== */

.product-page {
    animation: fadeUp .5s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gallery-main-inner img {
    transition: opacity .35s ease, transform .5s ease;
}

.thumb {
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

.thumb.active {
    border-color: #111;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.thumb:hover {
    border-color: #888;
    transform: scale(1.03);
}

.color-item {
    transition: transform .2s, opacity .2s;
}

.color-item:hover {
    transform: translateY(-2px);
}

.color-item.active {
    transform: translateY(-2px);
}

.add-to-cart {
    transition: background .25s, transform .15s, box-shadow .25s;
}

.add-to-cart:active {
    transform: scale(.97);
}

.wishlist-btn {
    transition: border-color .25s, color .25s, background .25s, transform .15s;
}

.wishlist-btn:active {
    transform: scale(.97);
}

.product-description {
    animation: fadeUp .5s ease both;
    animation-delay: .15s;
}

.product-accordion .accordion-item {
    animation: fadeUp .5s ease both;
}

.product-accordion .accordion-item:nth-child(1) { animation-delay: .05s; }
.product-accordion .accordion-item:nth-child(2) { animation-delay: .1s; }
.product-accordion .accordion-item:nth-child(3) { animation-delay: .15s; }
.product-accordion .accordion-item:nth-child(4) { animation-delay: .2s; }

@media(prefers-reduced-motion: reduce) {
    .product-page,
    .product-description,
    .product-accordion .accordion-item {
        animation: none;
    }
    .gallery-main-inner img {
        transition: opacity .35s ease;
    }
}

/* ===========================================================
   RECENTLY VIEWED PRODUCTS
=========================================================== */

.recently-viewed{
    width:100%;
    margin:80px 0;
    overflow:hidden;
}

.recently-viewed .section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
}

.recently-viewed .section-header h2{
    font-family:'League Spartan',sans-serif;
    font-size:42px;
    font-weight:700;
    color:#111;
}

.recently-slider{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    padding-bottom:10px;
}

.recently-slider::-webkit-scrollbar{ display:none; }

.rv-card{
    flex:0 0 calc((100% - 48px)/4);
    min-width:260px;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    color:#111;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
    transition:.35s;
}

.rv-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.rv-image{
    width:100%;
    aspect-ratio:1/1;
    background:#f7f7f7;
    overflow:hidden;
    position:relative;
}

.rv-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity .3s ease, transform .4s ease;
}

.rv-hover-image{
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}

.rv-card:hover .rv-main-image{ opacity:0; }
.rv-card:hover .rv-hover-image{ opacity:1; }

.rv-info{
    padding:18px;
}

.rv-info h3{
    font-size:18px;
    font-weight:600;
    margin-bottom:8px;
    color:#111;
    line-height:1.3;
}

.rv-price{
    font-size:20px;
    font-weight:700;
    margin-bottom:12px;
    color:#111;
}

.rv-original-price{
    font-weight:400;
    color:#999;
    text-decoration:line-through;
    margin-left:8px;
    font-size:14px;
}

.rv-colors{
    display:flex;
    gap:8px;
}

.rv-color{
    width:16px;
    height:16px;
    border-radius:50%;
    cursor:pointer;
    border:2px solid #fff;
    box-shadow:0 0 0 1px #ccc;
    transition:.3s;
}

.rv-color:hover{ transform:scale(1.15); }
.rv-color.active{ box-shadow:0 0 0 2px #111; }

@media(max-width:1200px){
    .rv-card{ flex:0 0 calc((100% - 24px)/3); min-width:230px; }
}

@media(max-width:768px){
    .recently-viewed{ margin:60px 0; }
    .recently-viewed .section-header h2{ font-size:30px; }
    .recently-slider{ gap:16px; scroll-snap-type:x mandatory; }
    .rv-card{ flex:0 0 75%; min-width:75%; scroll-snap-align:start; }
    .rv-info h3{ font-size:16px; }
    .rv-price{ font-size:18px; }
}

@media(min-width:1600px){
    .rv-card{ min-width:300px; }
    .recently-viewed .section-header h2{ font-size:48px; }
}