/* =========================================================
       PRODUCT SHOW
       MINIMAL / PREMIUM / SOCK WEBSITE
    ========================================================= */


:root {

    --primary: #ef0707;
    --primary-dark: #be0a0a;

    --dark: #292929;
    --dark-2: #470000;

    --text: #202020;
    --muted: #dc2020;

    --background: #F7F6F2;
    --white: #FFFFFF;

    --border: #f0e2e2;

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --shadow-sm:
            0 4px 15px rgba(15,23,42,.05);

    --shadow-md:
            0 15px 40px rgba(15,23,42,.09);

    --transition: .3s ease;
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    background:
            var(--background);

    color:
            var(--text);

    font-family:
            "Yekan Bakh",
            "IRANSansX",
            "Tahoma",
            sans-serif;

    line-height: 1.8;
}


a {
    text-decoration: none;
}


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

.main-header {

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

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

    position:
            sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter:
            blur(12px);
}


.header-inner {

    min-height:
            76px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            space-between;

    gap:
            30px;
}


.logo {

    color:
            var(--dark);

    font-size:
            24px;

    font-weight:
            900;
}


.logo span {
    color:
            var(--primary);
}


.main-nav {

    display:
            flex;

    align-items:
            center;

    gap:
            28px;
}


.main-nav a {

    color:
            var(--muted);

    font-size:
            13px;

    transition:
            var(--transition);
}


.main-nav a:hover {
    color:
            var(--primary);
}


.header-button {

    padding:
            8px 16px;

    border-radius:
            9px;

    background:
            var(--dark);

    color:
            var(--white);

    font-size:
            11px;

    transition:
            var(--transition);
}


.header-button:hover {

    background:
            var(--primary);

    color:
            white;
}


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

.breadcrumb-box {

    display:
            flex;

    align-items:
            center;

    gap:
            9px;

    padding:
            22px 0;

    color:
            var(--muted);

    font-size:
            11px;
}


.breadcrumb-box a {

    color:
            var(--muted);

    transition:
            var(--transition);
}


.breadcrumb-box a:hover {
    color:
            var(--primary);
}


.breadcrumb-box span {
    color:
            #CBD5E1;
}


/* =========================================================
   PRODUCT MAIN
========================================================= */

.product-show {

    padding:
            15px 0 70px;
}


.product-main {

    display:
            grid;

    grid-template-columns:
        1.1fr .9fr;

    gap:
            60px;

    align-items:
            center;
}


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

.product-gallery {

    width:
            100%;

    min-width:
            0;
}


#mainProductCarousel {

    background:
            var(--white);

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

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

    overflow:
            hidden;

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


.main-product-image {

    width:
            100%;

    height:
            560px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            10px;

    background:
            #FAFBFC;
}


.main-product-image img {

    width:
            100%;

    height:
            100%;

    object-fit:
            contain;

    display:
            block;
}


/* =========================================================
   CAROUSEL CONTROLS
========================================================= */

#mainProductCarousel.carousel-control-prev,#mainProductCarousel.carousel-control-next {

    width:
            48px;

    height:
            48px;

    top:
            50%;

    transform:
            translateY(-50%);

    margin:
            0 18px;

    border-radius:
            10px;

    background: rgba(42, 15, 15, 0.75);

    opacity:
            0;

    transition:
            var(--transition);
}


#mainProductCarousel:hover.carousel-control-prev,#mainProductCarousel:hover.carousel-control-next {

    opacity:
            1;
}


#mainProductCarousel.carousel-control-prev-icon,

#mainProductCarousel.carousel-control-next-icon {

    width:
            18px;

    height:
            18px;
}


/* =========================================================
   INDICATORS
========================================================= */

#mainProductCarousel.carousel-indicators {

    margin-bottom:
            18px;
}


#mainProductCarousel.carousel-indicators button {

    width:
            7px;

    height:
            7px;

    border:
            0;

    border-radius:
            50%;

    background: #e1cbcb;

    opacity:
            1;
}


#mainProductCarousel.carousel-indicators button.active {

    width:
            22px;

    border-radius:
            10px;

    background:
            var(--primary);
}


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

.product-information {

    padding:
            15px 0;
}


.product-code {

    color:
            var(--primary-dark);

    font-size:
            10px;

    font-weight:
            800;

    letter-spacing:
            1px;

    margin-bottom:
            12px;
}


.product-information h1 {

    margin:
            0 0 16px;

    color:
            var(--dark);

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

    line-height:
            1.4;

    font-weight:
            900;

    letter-spacing:
            -1px;
}


.product-intro {

    max-width:
            550px;

    color:
            var(--muted);

    font-size:
            14px;

    line-height:
            2;
}


/* =========================================================
   DIVIDER
========================================================= */

.info-divider {

    width:
            100%;

    height:
            1px;

    margin:
            25px 0;

    background:
            var(--border);
}


/* =========================================================
   INFO SECTION
========================================================= */

.info-section {

    margin-bottom:
            25px;
}


.info-section h3 {

    margin:
            0 0 10px;

    color:
            var(--dark);

    font-size:
            14px;

    font-weight:
            800;
}


.info-section p {

    margin:
            0;

    color:
            var(--muted);

    font-size:
            12px;

    line-height:
            2;
}


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

.specifications {

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


.spec-row {

    display:
            flex;

    justify-content:
            space-between;

    gap:
            20px;

    padding:
            9px 0;

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

    font-size:
            11px;
}


.spec-row span {
    color:
            var(--muted);
}


.spec-row strong {

    color:
            var(--dark);

    font-weight:
            700;
}


/* =========================================================
   REQUEST BUTTON
========================================================= */

.product-action {

    margin-top:
            28px;
}


.request-button {

    display:
            inline-flex;

    align-items:
            center;

    justify-content:
            center;

    min-width:
            190px;

    height:
            48px;

    padding:
            0 25px;

    border-radius:
            11px;

    background:
            var(--dark);

    color:
            var(--white);

    font-size:
            12px;

    font-weight:
            700;

    transition:
            var(--transition);
}


.request-button:hover {

    background:
            var(--primary);

    color:
            white;

    transform:
            translateY(-2px);

    box-shadow:
            0 10px 25px rgba(212, 0, 0, 0.18);
}


/* =========================================================
   SIMILAR PRODUCTS
========================================================= */

.similar-section {

    padding:
            65px 0 90px;

    background:
            var(--white);

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


.section-heading {

    display:
            flex;

    align-items:
            flex-end;

    justify-content:
            space-between;

    margin-bottom:
            30px;
}


.section-heading span {

    display:
            block;

    margin-bottom:
            5px;

    color:
            var(--primary-dark);

    font-size:
            9px;

    font-weight:
            800;

    letter-spacing:
            1px;
}


.section-heading h2 {

    margin:
            0;

    color:
            var(--dark);

    font-size:
            25px;

    font-weight:
            900;
}


.section-heading > a {

    color:
            var(--muted);

    font-size:
            11px;

    transition:
            var(--transition);
}


.section-heading > a:hover {
    color:
            var(--primary);
}


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

.similar-card {

    height:
            100%;

    overflow:
            hidden;

    background:
            var(--white);

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

    border-radius:
            5px;

    cursor:
            pointer;

    transition:
            var(--transition);
}


.similar-card:hover {

    transform:
            translateY(-5px);

    border-color: rgba(212, 0, 0, 0.35);

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


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

.similar-image {

    height:
            250px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            5px;

    background: #ffffff;

    overflow:
            hidden;
}


.similar-image img {

    width:
            100%;

    height:
            100%;

    object-fit:
            contain;

    transition:
            var(--transition);
}


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

    transform:
            scale(1.04);
}


/* =========================================================
   SIMILAR INFO
========================================================= */

.similar-info {

    padding:
            16px;
}


.similar-info span {

    color:
            var(--primary-dark);

    font-size:
            9px;

    font-weight:
            800;

    letter-spacing:
            .5px;
}


.similar-info h3 {

    margin:
            5px 0 0;

    color:
            var(--dark);

    font-size:
            14px;

    font-weight:
            800;
}


/* =========================================================
   MODAL
========================================================= */

.product-modal {

    overflow:
            hidden;

    border:
            0;

    border-radius:
            10px;

    background:
            var(--white);

    box-shadow:
            0 25px 70px
            rgba(15,23,42,.2);
}


.product-modal.modal-header {

    padding:
            16px 20px;

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


.product-modal.modal-title {

    color:
            var(--dark);

    font-size:
            15px;

    font-weight:
            800;
}


.product-modal.modal-body {

    padding:
            0;
}


.modal-image {

    height:
            650px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    padding:
            5px;

    background: #f1f1f1;
}


.modal-image img {

    width:
            100%;

    height:
            100%;

    object-fit:
            contain;
}


.product-modal.carousel-control-prev,.product-modal.carousel-control-next {

    width:
            48px;

    height:
            48px;

    top:
            50%;

    transform:
            translateY(-50%);

    margin:
            0 20px;

    border-radius:
            50%;

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

    opacity:
            .8;
}


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

@media (max-width: 991px) {

    .product-main {

        grid-template-columns:
            1fr;

        gap:
                35px;
    }


    .main-product-image {

        height:
                500px;
    }


    .product-information {

        padding:
                0 10px;
    }


    .main-nav {
        display:
                none;
    }

}


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

@media (max-width: 767px) {

    .header-inner {

        min-height:
                65px;
    }


    .header-button {
        display:
                none;
    }


    .logo {
        font-size:
                21px;
    }


    .breadcrumb-box {
        padding:
                15px 0;
    }


    .product-show {
        padding:
                10px 0 45px;
    }


    .product-main {
        gap:
                25px;
    }


    .main-product-image {

        height:
                360px;

        padding:
                20px;
    }


    #mainProductCarousel.carousel-control-prev,#mainProductCarousel.carousel-control-next {

        opacity:
                .8;

        width:
                38px;

        height:
                38px;

        margin:
                0 10px;
    }


    .product-information h1 {

        font-size:
                28px;
    }


    .product-intro {

        font-size:
                12px;
    }


    .info-section p {

        font-size:
                11px;
    }


    .request-button {

        width:
                100%;
    }


    .similar-section {

        padding:
                45px 0 60px;
    }


    .section-heading h2 {
        font-size:
                21px;
    }


    .similar-image {

        height:
                190px;
    }


    .similar-info {
        padding:
               13px;
    }


    .similar-info h3 {
        font-size:
                12px;
    }


    .modal-image {

        height:
                400px;

        /*padding:*/
                /*5px;*/
    }

}


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

@media (max-width: 400px) {

    .main-product-image {
        height:
                310px;
    }


    .similar-image {
        height:
                165px;
    }


    .similar-info h3 {
        font-size:
                11px;
    }

}