/*==================================
    PRODUCT PAGE - SECTION 01
    Breadcrumb + Main Layout
==================================*/

.product-page{

    position:relative;

    padding:70px 0 100px;

    background:#ffffff;

}





.product-page .container{

    max-width:1320px;

    width:100%;

    margin:0 auto;

    padding-inline:32px;

}



/*==================================
        PREMIUM BREADCRUMB
==================================*/

.product-breadcrumb{

    text-align:center;

    position:relative;

    padding:36px 0 26px;

    z-index:2;

}



.product-breadcrumb .container{

    max-width:1320px;

    margin:auto;

    padding-inline:32px;

}



.breadcrumb{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

    text-align:center;

}



/* لینک ها */

.breadcrumb a{

    font-family:'IranYekan';

    font-size:.95rem;

    color:#777777;

    text-decoration:none;

    transition:.35s ease;

}



.breadcrumb a:hover{

    color:#f59b23;

}



/* فلش */

.breadcrumb i{

    font-size:.7rem;

    color:rgba(245,155,35,.65);

}



/* صفحه فعلی */

.breadcrumb span{

    font-family:'IranYekan';

    font-size:.95rem;

    font-weight:700;

    color:#171717;

}



/*==================================
        LINE
==================================*/

.breadcrumb-line{

    position:relative;

    width:100%;

    height:2px;

    margin-top:18px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(20,20,20,.08);

}



.breadcrumb-line::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(245,155,35,.25),

        transparent

    );

}



.breadcrumb-line::after{

    content:"";

    position:absolute;

    top:0;

    left:-160px;

    width:160px;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        #ffad3d,

        transparent

    );

    animation:falconLine 7s linear infinite;

}



@keyframes falconLine{

    0%{

        left:-160px;

    }

    100%{

        left:calc(100% + 160px);

    }

}



@media(max-width:768px){

    .product-breadcrumb{

        padding:24px 0 18px;

    }

    .product-breadcrumb .container{

        padding-inline:18px;

    }

}



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

.product-wrapper{

    display:grid;

    grid-template-columns:1fr 620px;

    gap:70px;

    align-items:center;

}



.product-content{

    text-align:center;

    width:100%;

}



.product-gallery{

    width:100%;

    max-width:620px;

    justify-self:end;

}



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

.product-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    margin-bottom:16px;

    border-radius:999px;

    border:1px solid rgba(245,155,35,.30);

    background:rgba(245,155,35,.07);

    color:#e88b12;

    font-family:'IranYekan';

    font-size:.85rem;

}



.product-category{

    display:block;

    margin-bottom:12px;

    color:#777777;

    font-family:'IranYekan';

    font-size:.95rem;

}



.product-title{

    margin:0 0 18px;

    font-family:'IranYekan';

    font-size:3rem;

    font-weight:800;

    line-height:1.2;

    color:#171717;

}



.product-text{

    margin:0;

    max-width:620px;

    margin-inline:auto;

    text-align:center;

    font-family:'IranYekan';

    font-size:1rem;

    line-height:2.15;

    color:#666666;

}



/*==================================
    PRODUCT PAGE - SECTION 02
    Gallery
==================================*/

.product-gallery{

    display:flex;

    flex-direction:column;

    gap:24px;

}



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

.gallery-preview{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:28px;

    border:1px solid #e9e9e9;

    background:#fafafa;

    box-shadow:

        0 18px 45px rgba(20,20,20,.06),

        inset 0 1px 0 rgba(255,255,255,.9);

    transition:.35s;

}



.gallery-preview:hover{

    border-color:rgba(245,155,35,.38);

    box-shadow:

        0 22px 55px rgba(20,20,20,.09),

        0 0 0 4px rgba(245,155,35,.04);

}



.gallery-preview img{

    width:78%;

    height:78%;

    object-fit:contain;

    transition:

        opacity .55s ease,

        transform .55s ease;

}



.gallery-preview img.change{

    opacity:0;

    transform:scale(.94);

}



.gallery-preview:hover img{

    transform:scale(1.04);

}



/*==================================
        ARROWS
==================================*/

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    outline:none;

    cursor:pointer;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border:1px solid #e8e8e8;

    box-shadow:0 10px 28px rgba(20,20,20,.10);

    color:#222222;

    transition:.35s;

}



.gallery-arrow:hover{

    background:#ffad3d;

    border-color:#ffad3d;

    color:#171717;

    box-shadow:0 12px 30px rgba(245,155,35,.22);

}



.gallery-arrow.prev{

    left:18px;

}



.gallery-arrow.next{

    right:18px;

}



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

.gallery-thumbs{

    display:flex;

    justify-content:center;

    gap:16px;

}



.gallery-thumbs .thumb{

    width:88px;

    height:88px;

    object-fit:cover;

    cursor:pointer;

    border-radius:18px;

    border:2px solid transparent;

    background:#f8f8f8;

    box-shadow:0 6px 18px rgba(20,20,20,.05);

    transition:.35s;

}



.gallery-thumbs .thumb:hover{

    transform:translateY(-4px);

    border-color:rgba(245,155,35,.40);

}



.gallery-thumbs .thumb.active{

    border-color:#f5a623;

    box-shadow:0 0 0 3px rgba(245,166,35,.10);

}



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

.gallery-preview img,

.gallery-thumbs img{

    user-select:none;

    -webkit-user-drag:none;

}



/*==================================
    PRODUCT PAGE - SECTION 03
    Product Information
==================================*/

.product-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}



/*==================================
        SIZE
==================================*/

.product-size{

    width:100%;

    margin-top:38px;

    display:flex;

    flex-direction:column;

    align-items:center;

}



.product-size h3{

    margin:0 0 18px;

    font-family:'IranYekan';

    font-size:1rem;

    font-weight:700;

    color:#222222;

}



.size-list{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

}



.size-item{

    min-width:95px;

    height:50px;

    padding:0 22px;

    border-radius:14px;

    border:1px solid #e5e5e5;

    background:#ffffff;

    color:#333333;

    font-family:'IranYekan';

    font-size:.95rem;

    cursor:pointer;

    box-shadow:0 5px 16px rgba(20,20,20,.035);

    transition:.35s;

}



.size-item:hover{

    border-color:#f5a623;

    color:#e58b10;

    background:#fffaf3;

}



.size-item.active{

    background:#ffad3d;

    border-color:#ffad3d;

    color:#171717;

    box-shadow:0 10px 28px rgba(245,166,35,.22);

}



/*==================================
        PRICE
==================================*/

.product-price{

    width:100%;

    margin-top:34px;

    padding:22px 26px;

    border-radius:22px;

    border:1px solid #e9e9e9;

    background:#fafafa;

    box-shadow:

        0 8px 24px rgba(20,20,20,.04);

}



.product-price span{

    display:block;

    margin-bottom:10px;

    font-family:'IranYekan';

    font-size:.9rem;

    color:#858585;

}



.product-price strong{

    display:block;

    font-family:'IranYekan';

    font-size:2rem;

    font-weight:800;

    color:#e99416;

}



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

.product-actions{

    display:flex;

    gap:16px;

    width:100%;

    margin-top:34px;

}



.product-actions .btn{

    flex:1;

    height:56px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-family:'IranYekan';

    font-size:.95rem;

    font-weight:700;

    transition:.35s;

}



.product-actions .btn-primary{

    background:linear-gradient(

        135deg,

        #ffb13f,

        #ff9524

    );

    color:#171717;

    border:1px solid rgba(245,155,35,.35);

}



.product-actions .btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 16px 34px rgba(245,155,35,.24);

}



.product-actions .btn-outline{

    border:1px solid #dedede;

    background:#ffffff;

    color:#333333;

}



.product-actions .btn-outline:hover{

    border-color:#f5a623;

    color:#e58b10;

    background:#fffaf3;

}



/*==================================
    PRODUCT PAGE - SECTION 04
    Related + Responsive
==================================*/

.related-products{

    padding:90px 0 20px;

}



.related-products .container{

    max-width:1320px;

    margin:auto;

    padding-inline:32px;

}



.related-products .section-header{

    margin-bottom:32px;

}



.related-products .section-header h2{

    font-family:'IranYekan';

    font-size:2rem;

    font-weight:800;

    color:#171717;

}



/*==================================
        HORIZONTAL SLIDER
==================================*/

.related-slider{

    display:flex;

    gap:24px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    padding-bottom:10px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

}



.related-slider::-webkit-scrollbar{

    display:none;

}



/*
کارت‌های صفحه Products
فقط اندازه‌شون کنترل میشه
*/

.related-slider .product-card{

    flex:0 0 290px;

    width:290px;

}



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

@media(max-width:992px){

    .product-page .container,

    .related-products .container{

        padding-inline:24px;

    }



    .product-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }



    .product-gallery{

        max-width:650px;

        margin:auto;

        justify-self:center;

    }



    .product-content{

        max-width:650px;

        margin:auto;

    }



    .product-title{

        font-size:2.4rem;

    }

}



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

@media(max-width:768px){

    .product-page{

        padding:55px 0 70px;

    }



    .product-page .container,

    .related-products .container{

        padding-inline:18px;

    }



    .breadcrumb{

        font-size:.82rem;

        gap:8px;

    }



    .product-wrapper{

        gap:36px;

    }



    /*
    موبایل:
    عکس بالا
    اطلاعات پایین
    */

    .product-gallery{

        order:-1;

    }



    .gallery-preview{

        border-radius:20px;

    }



    .gallery-thumbs{

        overflow-x:auto;

        justify-content:flex-start;

        padding-bottom:6px;

    }



    .gallery-thumbs::-webkit-scrollbar{

        display:none;

    }



    .gallery-thumbs .thumb{

        flex:0 0 72px;

        width:72px;

        height:72px;

    }



    .product-title{

        font-size:2rem;

    }



    .product-text{

        font-size:.95rem;

    }



    .size-list{

        display:grid;

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

    }



    .size-item{

        width:100%;

        min-width:unset;

    }



    .product-price strong{

        font-size:1.6rem;

    }



    .product-actions{

        flex-direction:column;

        align-items:stretch;

        gap:14px;

    }



    .product-actions .btn{

        width:100%;

        flex:none;

    }



    /*
    محصولات مرتبط
    */

    .related-slider{

        gap:18px;

        scroll-snap-type:x mandatory;

    }



    .related-slider .product-card{

        flex:0 0 82%;

        width:82%;

        scroll-snap-align:start;

    }

}



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

@media(max-width:480px){

    .product-title{

        font-size:1.75rem;

    }



    .gallery-arrow{

        width:40px;

        height:40px;

    }



    .gallery-thumbs .thumb{

        width:64px;

        height:64px;

    }



    .product-price{

        padding:18px;

    }



    .product-price strong{

        font-size:1.45rem;

    }



    .related-slider .product-card{

        flex:0 0 88%;

        width:88%;

    }

}



/*==================================
    RELATED SHOWCASE
    SECTION 01
==================================*/

.relshow{

    position:relative;

    padding:110px 0 90px;

    background:#ffffff;

}



.relshow .container{

    max-width:1320px;

    width:100%;

    margin:0 auto;

    padding-inline:32px;

}



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

.relshow-head{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:60px;

}



.relshow-label{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

    color:#e99416;

    font-family:'IranYekan';

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}



.relshow-label span{

    width:48px;

    height:1px;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(245,166,35,.75),

        transparent

    );

}



.relshow-title{

    margin:0;

    color:#171717;

    font-family:'IranYekan';

    font-size:2.8rem;

    font-weight:900;

    line-height:1.25;

}



.relshow-desc{

    max-width:640px;

    margin:20px auto 0;

    color:#707070;

    font-family:'IranYekan';

    font-size:1rem;

    line-height:2;

}



/*==================================
        WRAPPER
==================================*/

.relshow-wrap{

    position:relative;

    width:100%;

    overflow:hidden;

}



/*==================================
        TRACK
==================================*/

.relshow-track{

    display:flex;

    align-items:stretch;

    gap:28px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    padding:8px 0 12px;

}



.relshow-track::-webkit-scrollbar{

    display:none;

}



/*==================================
    RELSHOW
    SECTION 02
==================================*/

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

.relshow-card{

    flex:0 0 310px;

    min-width:310px;

    border-radius:26px;

    overflow:hidden;

    background:#ffffff;

    border:1px solid #e8e8e8;

    box-shadow:

        0 10px 30px rgba(20,20,20,.055);

    transition:.45s ease;

}



.relshow-card:hover{

    transform:translateY(-10px);

    border-color:rgba(245,166,35,.38);

    box-shadow:

        0 22px 50px rgba(20,20,20,.10),

        0 8px 25px rgba(245,166,35,.06);

}



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

.relshow-image{

    display:block;

    width:100%;

    height:320px;

    overflow:hidden;

    background:#f7f7f7;

    border-bottom:1px solid #eeeeee;

}



.relshow-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .45s ease;

}



.relshow-card:hover .relshow-image img{

    transform:scale(1.05);

}



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

.relshow-body{

    padding:24px;

    text-align:center;

}



.relshow-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:7px 14px;

    border-radius:999px;

    background:rgba(245,166,35,.08);

    border:1px solid rgba(245,166,35,.18);

    color:#df8a0b;

    font-family:'IranYekan';

    font-size:.78rem;

    font-weight:700;

    margin-bottom:18px;

}



.relshow-name{

    margin:0;

    font-family:'IranYekan';

    font-size:1.55rem;

    font-weight:800;

    color:#202020;

    line-height:1.4;

    transition:.35s ease;

}



.relshow-divider{

    width:55px;

    height:2px;

    margin:22px auto;

    border-radius:999px;

    background:linear-gradient(

        90deg,

        transparent,

        #ffad3d,

        transparent

    );

}



.relshow-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    color:#333333;

    font-family:'IranYekan';

    font-size:.92rem;

    font-weight:700;

    transition:.35s ease;

}



.relshow-link i{

    font-size:.95rem;

    transition:.35s ease;

}



.relshow-link:hover{

    color:#e99416;

}



.relshow-link:hover i{

    transform:translateX(-8px);

}



.relshow-link:hover{

    transform:translateY(-2px);

}



/*==================================
    RELSHOW
    SECTION 03
==================================*/

/*==============================
        NAVIGATION
==============================*/

.relshow-prev,
.relshow-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:none;

    outline:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#222222;

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

    border:1px solid #e5e5e5;

    box-shadow:0 10px 28px rgba(20,20,20,.10);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    transition:all .35s ease;

    z-index:10;

}



.relshow-prev{

    right:12px;

}



.relshow-next{

    left:12px;

}



.relshow-prev:hover,
.relshow-next:hover{

    background:#ffad3d;

    color:#171717;

    border-color:#ffad3d;

    box-shadow:0 14px 32px rgba(245,166,35,.22);

    transform:translateY(-50%) scale(1.08);

}



.relshow-prev:active,
.relshow-next:active{

    transform:translateY(-50%) scale(.94);

}



.relshow-prev i,
.relshow-next i{

    font-size:1rem;

}



/*==============================
        TRACK PADDING
==============================*/

.relshow-track{

    padding-inline:70px;

}



/*==============================
        HOVER EFFECT
==============================*/

.relshow-track:hover .relshow-card{

    opacity:.72;

}



.relshow-track .relshow-card:hover{

    opacity:1;

}



/*==============================
        SMOOTH
==============================*/

.relshow-card{

    transition:

        transform .4s ease,

        opacity .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}



/*==================================
    RELSHOW
    SECTION 04
==================================*/

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

@media (max-width:1100px){

    .relshow .container{

        padding-inline:26px;

    }



    .relshow-card{

        flex:0 0 285px;

        min-width:285px;

    }

}



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

@media (max-width:992px){

    .relshow{

        padding:90px 0 75px;

    }



    .relshow-head{

        margin-bottom:40px;

    }



    .relshow-title{

        font-size:2rem;

    }



    .relshow-track{

        gap:22px;

        padding-inline:60px;

    }



    .relshow-card{

        flex:0 0 270px;

        min-width:270px;

    }

}



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

@media (max-width:768px){

    .relshow{

        padding:70px 0 55px;

    }



    .relshow .container{

        padding-inline:18px;

    }



    .relshow-head{

        margin-bottom:30px;

    }



    .relshow-title{

        font-size:1.75rem;

    }



    .relshow-label{

        font-size:.82rem;

    }



    /* دکمه‌ها در موبایل حذف شوند */

    .relshow-prev,
    .relshow-next{

        display:none;

    }



    .relshow-track{

        gap:18px;

        padding-inline:0;

        scroll-snap-type:x mandatory;

    }



    .relshow-card{

        flex:0 0 82%;

        min-width:82%;

        scroll-snap-align:center;

    }

}



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

@media (max-width:480px){

    .relshow-title{

        font-size:1.45rem;

    }



    .relshow-track{

        gap:14px;

    }



    .relshow-card{

        flex:0 0 90%;

        min-width:90%;

    }

}