/* Global styles */

:root {
    --yf-primary: #393F5A;
    --yf-dark-gray: #4A4A48;
    --yf-medium-gray: #6E757C;
    --yf-pale-gray: #C4C3C3;
    --yf-secondary: #BA8A7D;
    --yf-light-gray: #EAE6E4;
    --yf-cloud-gray: #D9D9D9;
    --yf-white: #FFFFFF;
    --yf-off-white: #F8F9FA;
    --yf-light-beige-rgba-50: rgba(234, 230, 228, 0.50);
    --yf-light-beige-rgba-15: rgba(234, 230, 228, 0.15);
    --yf-black-rgba-50: rgba(0, 0, 0, 0.50);
    --yf-black-rgba-15: rgba(0, 0, 0, 0.15);
    --yf-warm-clay-rgba-30: rgba(186, 138, 125, 0.30);
}

* {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans", sans-serif;
}

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

ul,
ol {
    list-style: none;
}

.section-padding {
    padding: 80px 0;
}

.section-header {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 24px;
}

.yf-tag-sm {
    display: flex;
    padding: 4px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: var(--yf-light-beige-rgba-50);
    color: var(--yf-dark-gray);
    font-size: 10px;
    font-weight: 600;
    line-height: 13px;
}

.h-md {
    color: var(--yf-dark-gray);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: 16px;
}

.h-nested-span {
    font-weight: 400;
    margin-left: 8px;
}

.h-md.has-desc {
    margin-bottom: 24px;
}

.paragraph {
    color: var(--yf-dark-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.paragraph {
    color: var(--yf-dark-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.fw-medium {
    font-weight: 600 !important;
}

.heading-with-button-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

    .filter-header .filter-header-btns {
        display: flex;
        align-items: center;
    }

    .filter-header #clearMaterialsFilterBtn {
        margin: 0 16px;
    }

    .filter-header .title {
        color: var(--yf-dark-gray);
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        margin-bottom: 0;
    }

    .filter-header .yf-filter-btn {
        color: var(--yf-secondary);
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        background-color: var(--yf-white);
        border: none;
        display: flex;
        align-items: center;
        gap: 4px;
    }

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1336px;
    }
}

/* Global styles end */

/* Header styles */

#yfHeader {
    border-bottom: 2px solid var(--yf-primary);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

    #yfHeader .navbar {
        padding: 14px 16px;
        background-color: var(--yf-white);
    }

    #yfHeader .yf-nav-wrapper {
        display: flex;
        flex: 1;
        justify-content: space-between;
        flex-wrap: wrap;
    }

        #yfHeader .yf-nav-wrapper .navbar-brand {
            padding: 0;
        }

    #yfHeader .navbar-nav {
        margin-left: auto;
    }

        #yfHeader .navbar-nav .nav-link {
            color: var(--yf-dark-gray);
            font-size: 14px;
            font-weight: 600;
            line-height: 14px;
            text-transform: uppercase;
        }

            #yfHeader .navbar-nav .nav-link.active {
                color: var(--yf-secondary);
            }

/* Header styles end*/

/* Height and width styles */

.max-height-none {
    max-height: none !important;
}

/* Height and width styles end */

/* Buttons */

.yf-btn-primary {
    display: flex;
    color: var(--yf-white);
    padding: 9px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(--yf-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    border: none;
    gap: 10px;
}

    .yf-btn-primary.btn-fs-regular {
        font-size: 16px;
        font-weight: 600;
        line-height: 24px;
    }

.yf-transparent-btn-border-y {
    display: flex;
    width: 100%;
    padding: 16px 12px;
    justify-content: space-between;
    align-items: center;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--yf-light-gray);
    border-bottom: 1px solid var(--yf-light-gray);
    background-color: transparent;
    color: var(--YF-Dark-Gray, #4A4A48);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.yf-btn-full-width {
    display: flex;
    width: 100%;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--yf-light-gray);
    background: var(--yf-light-beige-rgba-50);
    color: var(--YF-Dark-Gray, #4A4A48);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

    .yf-btn-full-width .btn-left img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }

.yf-btn-white {
    display: flex;
    padding: 12px 10px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid var(--yf-light-gray);
    background: #FFF;
}

.yf-btn-left-icon {
    gap: 8px;
}

.yf-btn-fs-sm {
    color: var(--yf-dark-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
}

.yf-btn-group-white button {
    border: none;
}

.yf-btn-group-white {
    border-radius: 4px;
    border: 1px solid var(--yf-light-gray);
}

/* Buttons end */

/* Text classes */

.yf-heading-primary {
    color: var(--yf-dark-gray);
    font-size: 36px;
    font-weight: 700;
    line-height: 43.2px;
    margin-bottom: 16px;
}

.yf-heading-md {
    color: var(--yf-dark-gray);
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
}

.yf-pre-heading {
    color: var(--yf-dark-gray);
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
}

.yf-heading-xs {
    color: var(--yf-dark-gray);
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
    margin-bottom: 0;
}

/* Text classes end */

/* Spacing classes */

.my-16 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-32 {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/* Spacing classes end */

/* Borders */

.section-separator {
    border-top: 1px solid var(--yf-light-gray);
}

/* Borders end */

/* Color classes */

.yf-text-dark-gray {
    color: var(--yf-dark-gray) !important;
}

.yf-bg-secondary {
    background-color: var(--yf-secondary);
}

.yf-bg-medium-gray {
    background-color: var(--yf-medium-gray);
}

.yf-bg-light-gray {
    background-color: var(--yf-light-gray);
}

.yf-color-dark-gray {
    color: var(--yf-dark-gray);
}

/* Color classes end */

/* Breadcrumbs styles */

.breadcrumbs {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 24px 0;
}

    .breadcrumbs li {
        display: flex;
        align-items: center;
    }

        .breadcrumbs li::after {
            content: "\F285";
            display: block;
            font-family: "bootstrap-icons";
            color: var(--yf-secondary);
            font-size: 10px;
            font-weight: 700;
            margin: 2px 8px 0;
        }

        .breadcrumbs li:last-child::after {
            display: none;
        }

        .breadcrumbs li a {
            display: inline-block;
            font-size: 12px;
            font-weight: 500;
        }

            .breadcrumbs li a.active {
                color: var(--yf-secondary);
            }

/* Breadcrumbs styles end */

/* Share save buttons styles */

.share-save-buttons-wrapper {
    display: flex;
    gap: 8px;
    padding-left: 120px;
}

    .share-save-buttons-wrapper .save-as-btn::after {
        border: none;
        background: url('/assets/images/download-icon.svg') no-repeat center center;
        width: 16px;
        height: 16px;
    }

.yf-btn-group-white button {
    padding: 0;
}

.yf-btn-group-white {
    padding: 12px 10px;
    gap: 8px
}



/* Share save buttons styles end */

/* Gallery slider styles */

#mainSliderSection .gallery-slider-container {
    display: flex;
    align-items: center;
    column-gap: 44px;
    margin-bottom: 40px;
}

#mainSliderSection .thumbnail-slider {
    height: 430px;
}

#mainSliderSection .main-slider {
    height: 700px;
}

.thumbnail-slider {
    width: 11%;
}

.main-slider {
    width: 91%;
}


.thumbnail-slider .swiper-slide {
    height: 74px !important;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #EAE6E4;
}

.thumbnail-slider .swiper-slide-thumb-active {
    border: 1px solid #BA8A7D;
    box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.15);
    opacity: 1;
}


.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    object-fit: scale-down;
}

.thumbnail-slider .swiper-slide.has-3d-btn {
    position: relative;
}

    .thumbnail-slider .swiper-slide.has-3d-btn button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--yf-black-rgba-50);
        border: none;
    }

        .thumbnail-slider .swiper-slide.has-3d-btn button .btn-content {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 1;
            color: white;
            line-height: 1;
        }

        .thumbnail-slider .swiper-slide.has-3d-btn button img {
            width: 19px;
            height: 22px;
            margin-bottom: 5px;
        }

/* Gallery slider styles end */

/* Sofa description styles */

.sofa-description {
    padding-right: 80px;
}

    .sofa-description .detail,
    .sofa-description .dimensions,
    .sofa-description .material-specs {
        margin-bottom: 40px;
    }

.dimensions-table {
    width: 100%;
    color: var(--yf-dark-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    border-top: 1px solid var(--yf-light-gray);
}

    .dimensions-table tr td {
        padding: 8px 16px;
    }

    .dimensions-table tr:first-child td {
        padding: 16px 16px 8px 16px;
    }

    .dimensions-table tr:nth-child(odd) {
        background-color: var(--yf-light-beige-rgba-15);
    }

    .dimensions-table tr:nth-child(even) {
        background-color: var(--yf-light-beige-rgba-50);
    }

    .dimensions-table .col-wrapper {
        display: flex;
    }

        .dimensions-table .col-wrapper .d-col-item {
            flex: 1;
            flex-basis: 50%;
        }

            .dimensions-table .col-wrapper .d-col-item.inner-col {
                display: flex;
                justify-content: space-between;
                padding-right: 24px;
            }

            .dimensions-table .col-wrapper .d-col-item .inner-col-item {
                margin-bottom: 8px;
            }

                .dimensions-table .col-wrapper .d-col-item .inner-col-item.visual-item {
                    display: none;
                }

                .dimensions-table .col-wrapper .d-col-item .inner-col-item:last-child {
                    margin-bottom: 0;
                }

.material-specs-table {
    width: 100%;
    color: var(--yf-dark-gray);
    border-top: 1px solid var(--yf-light-gray);
}

    .material-specs-table tr:nth-child(odd) {
        background-color: var(--yf-light-beige-rgba-15);
    }

    .material-specs-table tr td {
        padding: 16px;
    }

    .material-specs-table .specs-wrapper {
        display: flex;
    }

        .material-specs-table .specs-wrapper .specs-col {
            flex: 1;
            flex-basis: 50%;
        }

        .material-specs-table .specs-wrapper .col-1 {
            display: flex;
            column-gap: 24px;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }


        .material-specs-table .specs-wrapper .col-2 {
            font-size: 14px;
            font-weight: 500;
            line-height: 21px;
        }

            .material-specs-table .specs-wrapper .col-2 .fabric-info-2 {
                display: flex;
                column-gap: 24px;
            }

                .material-specs-table .specs-wrapper .col-2 .fabric-info-2 .spec-col > div {
                    margin-bottom: 8px;
                }

                    .material-specs-table .specs-wrapper .col-2 .fabric-info-2 .spec-col > div:last-child {
                        margin-bottom: 0;
                    }

/* Sofa description styles end */


/* Product card styles */

.yf-product-card {
    position: relative;
    display: block;
    padding: 16px 16px 24px 16px;
    background-color: var(--yf-white);
    border: 1px solid var(--yf-light-gray);
    border-radius: 4px;
    overflow: hidden;
}

.yf-product-card-full-image {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 450px; 
    overflow: hidden;
    background-color: #f9f9f9; 
    align-items: center;
    justify-content: center;
}

    .yf-product-card-full-image > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .yf-product-card-full-image .body .title {
        color: var(--yf-dark-gray);
        font-size: 14px;
        font-weight: 600;
        line-height: 21px;
    }

.yf-product-card > img {
    width: 100%;
}

.yf-product-card .yf-product-card-title {
    color: var(--yf-dark-gray);
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    margin-bottom: 4px;
}

.yf-product-card .yf-product-card-sub-title {
    color: var(--yf-dark-gray);
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
    margin-bottom: 8px;
}

.yf-product-card .yf-product-card-type {
    display: inline-block;
    padding: 4px 8px;
    background: var(--yf-light-beige-rgba-50);
    color: var(--yf-dark-gray);
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
}

/* Product card styles end */

/* Also available stlyes */

.also-available .yf-product-card > img {
    width: 100%;
    height: 260px;
    object-fit: contain;
}

/* Also available stlyes */

/* Collections styles */

.collections {
    background-color: var(--yf-dark-gray);
}

.collections-carousel-wrapper .tab-content .tab-pane {
    padding: 0 56px;
}

.collections-carousel .swiper-slide {
    height: auto;
}

    .collections-carousel .swiper-slide .yf-product-card {
        height: 100%;
    }

.collections-carousel .yf-product-card img {
    height: 248px;
    object-fit: contain;
}

.collections-carousel-wrapper .nav-pills {
    gap: 8px;
    justify-content: center;
    margin-bottom: 56px;
}

    .collections-carousel-wrapper .nav-pills .nav-link {
        padding: 9px 8px;
        border-radius: 4px;
        background-color: var(--yf-dark-gray);
        border: 1px solid var(--yf-medium-gray);
        color: var(--yf-white);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }

        .collections-carousel-wrapper .nav-pills .nav-link.active {
            background-color: var(--yf-white);
            border: 1px solid var(--yf-dark-gray);
            color: var(--yf-dark-gray);
        }

.yf-swiper-container {
    position: relative;
    margin-bottom: 56px;
}

    .yf-swiper-container .swiper-button-prev {
        left: -112px;
    }

    .yf-swiper-container .swiper-button-next {
        right: -112px;
    }

    .yf-swiper-container .swiper-button-prev,
    .yf-swiper-container .swiper-button-next {
        width: 32px;
        height: 32px;
        background-color: var(--yf-secondary);
        border-radius: 50%;
    }

        .yf-swiper-container .swiper-button-prev::after,
        .yf-swiper-container .swiper-button-next::after {
            font-size: 16px;
            font-weight: 700;
            color: var(--yf-white);
        }

/* Collections styles */

/* Product specs styles */

.product-specs .product-specs-form {
    padding: 40px;
    margin-bottom: 16px;
    background-color: var(--yf-light-beige-rgba-50);
    border-radius: 8px;
    border: 1px solid var(--yf-light-gray);
}

    .product-specs .product-specs-form .form-header {
        margin-bottom: 32px;
    }

    .product-specs .product-specs-form .product-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

        .product-specs .product-specs-form .product-info .product-name {
            color: var(--yf-dark-gray);
            font-size: 24px;
            font-weight: 600;
            line-height: 28.8px;
            margin-bottom: 0;
        }

        .product-specs .product-specs-form .product-info .product-logos img {
            height: 20px;
        }

        .product-specs .product-specs-form .product-info .product-logos {
            display: flex;
            gap: 16px;
        }

    .product-specs .product-specs-form .form-header .product-type {
        color: var(--yf-dark-gray);
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }

    .product-specs .product-specs-form .radio-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        gap: 8px;
    }

.yf-radio-card .yf-radio-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 12px 12px 16px 12px;
    border: 1px solid var(--yf-light-gray);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    background: var(--yf-white);
}

.yf-radio-card {
    display: block;
}

    .yf-radio-card .yf-radio-card-title {
        color: var(--yf-dark-gray);
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
    }

    .yf-radio-card .product-dimensions {
        color: var(--yf-medium-gray);
        text-align: center;
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
        margin-top: 4px;
    }

input.yf-radio-card-input[type="radio"] {
    display: none;
}

    input.yf-radio-card-input[type="radio"]:checked + .yf-radio-option {
        border-color: var(--yf-secondary);
        box-shadow: 0 0 8px 1px var(--yf-black-rgba-15);
    }

.yf-radio-card .yf-radio-option img {
    width: 100%;
    max-width: 100%;
    height: 70px;
    object-fit: contain;
    margin-bottom: 8px;
}

.yf-checkbox-card .yf-checkbox-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 12px 12px 16px 12px;
    border: 1px solid var(--yf-light-gray);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    background: var(--yf-white);
}

.yf-checkbox-card {
    display: block;
}

    .yf-checkbox-card .yf-checkbox-card-title {
        color: var(--yf-dark-gray);
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
    }

    .yf-checkbox-card .product-dimensions {
        color: var(--yf-medium-gray);
        text-align: center;
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
        margin-top: 4px;
    }

input.yf-checkbox-card-input[type="checkbox"] {
    display: none;
}

    input.yf-checkbox-card-input[type="checkbox"]:checked + .yf-checkbox-option {
        border-color: var(--yf-secondary);
        box-shadow: 0 0 8px 1px var(--yf-black-rgba-15);
    }

.yf-checkbox-card .yf-checkbox-option img {
    width: 100%;
    max-width: 100%;
    height: 70px;
    object-fit: contain;
    margin-bottom: 8px;
}

.product-specs .accordion .accordion-item {
    border: none;
    margin-bottom: 2px;
}

    .product-specs .accordion .accordion-item:last-child {
        border-bottom: 0;
    }

    .product-specs .accordion .accordion-item:first-child,
    .product-specs .accordion .accordion-item:first-child .accordion-button {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        overflow: hidden;
    }

    .product-specs .accordion .accordion-item:last-child,
    .product-specs .accordion .accordion-item:last-child .accordion-button {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: hidden;
    }

.product-specs .accordion .accordion-button {
    color: var(--yf-dark-gray);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

    .product-specs .accordion .accordion-button .accordion-count {
        display: flex;
        width: 28px;
        height: 28px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--yf-secondary);
        border-radius: 50%;
        color: var(--yf-white);
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        margin-right: 10px;
    }

    .product-specs .accordion .accordion-button .yf-tag-sm {
        margin-left: 10px;
    }

    .product-specs .accordion .accordion-button:not(.collapsed) {
        background-color: white;
        box-shadow: none;
    }

    .product-specs .accordion .accordion-button:focus {
        box-shadow: none;
        outline: 0;
    }

    .product-specs .accordion .accordion-button:not(.collapsed)::after {
        background-image: url('/assets/images/minus-icon.svg');
    }

    .product-specs .accordion .accordion-button::after {
        background-image: url('/assets/images/plus-icon.svg');
    }


.product-specs .accordion .accordion-body {
    padding: 12px;
    max-height: 400px;
    overflow-y: auto;
    background-color: var(--yf-white);
}

    .product-specs .accordion .accordion-body::-webkit-scrollbar {
        width: 8px;
    }

    .product-specs .accordion .accordion-body::-webkit-scrollbar-thumb {
        background: var(--yf-cloud-gray);
        border-radius: 8px;
    }

.product-specs .nav-pills.sofa-style-tabs {
    margin-bottom: 16px;
}

    .product-specs .nav-pills.sofa-style-tabs .nav-link {
        color: var(--yf-medium-gray);
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        border: 1px solid var(--yf-light-gray);
        border-right: 0;
        background: var(--yf-light-beige-rgba-50);
        width: 100%;
    }

    .product-specs .nav-pills.sofa-style-tabs .nav-item {
        flex: 1 1 auto;
    }

        .product-specs .nav-pills.sofa-style-tabs .nav-item:first-child .nav-link {
            border-radius: 4px 0px 0px 4px;
        }

        .product-specs .nav-pills.sofa-style-tabs .nav-item:last-child .nav-link {
            border-radius: 0px 4px 4px 0px;
            border-right: 1px solid var(--yf-light-gray)
        }

    .product-specs .nav-pills.sofa-style-tabs .nav-link.active {
        color: var(--yf-secondary);
        background-color: var(--yf-white);
    }

.yf-simple-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    border: 1px solid transparent;
}

    .yf-simple-card img {
        height: 60px;
        object-fit: contain;
        margin-bottom: 18px;
    }

    .yf-simple-card .card-body .title {
        color: var(--yf-dark-gray);
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        margin-bottom: 4px;
    }

    .yf-simple-card .card-body .sub-title {
        color: var(--yf-medium-gray);
        text-align: center;
        font-size: 10px;
        font-weight: 500;
        line-height: 13px;
    }

.byo-styles-container .yf-simple-card:hover {
    border-color: #BA8A7D;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.byo-styles-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 30px 8px;
}

.yf-grid-col-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
}

.yf-grid-col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
}

.yf-radio-card_full-image {
    display: block;
}

input.yf-radio-card-input_full-image[type="radio"] {
    display: none;
}

.yf-radio-card_full-image .yf-radio-option_full-image {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--yf-light-gray);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--yf-white);
}

    .yf-radio-card_full-image .yf-radio-option_full-image img {
        width: 100%;
    }

input.yf-radio-card-input_full-image[type="radio"]:checked + .yf-radio-option_full-image {
    border-color: var(--yf-secondary);
    box-shadow: 0 0 8px 1px var(--yf-black-rgba-15);
}

.yf-radio-card_full-image .yf-radio-option_full-image .yf-radio-body_full-image {
    padding: 8px 8px 12px 8px;
}

    .yf-radio-card_full-image .yf-radio-option_full-image .yf-radio-body_full-image .title {
        color: var(--yf-dark-gray);
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        margin-bottom: 4px;
    }

    .yf-radio-card_full-image .yf-radio-option_full-image .yf-radio-body_full-image .sub-title {
        color: var(--YF-Medium-Gray, #6E757C);
        font-size: 10px;
        font-weight: 500;
        line-height: 13px;
        margin-bottom: 0;
    }

.material-radio-container .yf-radio-card_full-image .yf-radio-option_full-image img,
.legs-radio-container .yf-radio-card_full-image .yf-radio-option_full-image img {
    height: 70px;
    object-fit: cover;
}

/* Product specs styles */

/* Individual dimension styles */

.individual-dimensions .all-dimensions {
    border-top: 1px solid var(--yf-light-gray);
    background-color: var(--yf-light-beige-rgba-15);
    padding-bottom: 24px;
}

    .individual-dimensions .all-dimensions .collapsible-wrapper {
        overflow: hidden;
        max-height: 500px;
        transition: max-height 0.5s ease-in-out;
    }

    .individual-dimensions .all-dimensions .dimension-wrapper {
        padding: 16px;
    }

.gradient-white-bottom {
    position: relative;
}

    .gradient-white-bottom::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px; /* Adjust height as needed */
        background: linear-gradient(to top, white 40%, rgba(255, 255, 255, 0.5) 85%, rgba(255, 255, 255, 0));
        pointer-events: none;
    }

.toggle-btn-wrapper {
    position: absolute;
    bottom: 0;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
}

/* Individual dimension styles end */

/* Dimension info card styles */
.yf-dimension-info-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--yf-light-gray);
    border-radius: 4px;
    background: var(--yf-white);
    padding: 16px;
}

    .yf-dimension-info-card p {
        color: var(--YF-Dark-Gray, #4A4A48);
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        margin: 0;
    }

    .yf-dimension-info-card .header {
        margin-bottom: 8px;
    }

        .yf-dimension-info-card .header .header-row {
            display: flex;
        }

            .yf-dimension-info-card .header .header-row .left-text {
                width: 75%;
                text-align: left;
                font-weight: 600;
            }

            .yf-dimension-info-card .header .header-row .right-text {
                width: 25%;
                text-align: right;
            }

    .yf-dimension-info-card .body .body-row {
        display: flex;
        justify-content: space-between;
    }

    .yf-dimension-info-card .body .product-image {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin-top: 16px;
        margin-bottom: 24px;
    }

        .yf-dimension-info-card .body .product-image img {
            object-fit: contain;
        }

    .yf-dimension-info-card .footer .footer-row {
        display: flex;
        justify-content: space-between;
    }

        .yf-dimension-info-card .footer .footer-row .left-text,
        .yf-dimension-info-card .footer .footer-row .middle-text,
        .yf-dimension-info-card .footer .footer-row .right-text {
            width: 27%;
        }

    .yf-dimension-info-card .middle-text,
    .yf-dimension-info-card .right-text {
        text-align: right;
    }

    .yf-dimension-info-card .footer .tag {
        display: inline-block;
        padding: 4px 8px;
        background: var(--yf-warm-clay-rgba-30);
        color: var(--yf-dark-gray);
        font-size: 12px;
        font-weight: 500;
        line-height: 16.8px;
        margin-top: 16px;
    }

/* Dimension info card styles end */

/* Quick ship styles */

.quick-ship {
    position: relative;
}

.quick-ship-text-content {
    padding: 0 65px 0 55px;
}

.qs-image-wrapper {
    display: flex;
    justify-content: end;
    padding-right: 72px;
}

    .qs-image-wrapper img {
        max-width: 150px;
        width: 100%;
    }

/* Quick ship styles end*/

/* Also like styles */

.also-like .yf-product-card {
    padding-bottom: 45px;
}

    .also-like .yf-product-card > img {
        height: 220px;
        object-fit: contain;
    }

    .also-like .yf-product-card .top-right-img {
        position: absolute;
        top: 16px;
        right: 16px;
    }

/* Also like styles end */


/* Filter styles */

.has-filters {
    position: relative;
}

    .has-filters .filters-container {
        display: none;
        position: absolute;
        top: 0;
        left: -2px;
        right: -2px;
        height: 100%;
        padding: 12px 12px 16px 12px;
        background-color: var(--yf-white);
        border-top: 1px solid var(--yf-light-gray);
        box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
    }

.material-filter-color-palettes {
    margin-bottom: 16px;
}

.filter-options-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.material-filter-type-design {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

    .material-filter-type-design .type,
    .material-filter-type-design .design {
        flex: 1 1 0;
    }

/* Filter styles end */

/* Color checkbox styles */

input.yf-rectangle-checkbox-input[type="checkbox"] {
    display: none;
}

.yf-rectangle-checkbox-label {
    display: block;
}

    .yf-rectangle-checkbox-label .yf-checkbox-option {
        display: flex;
        padding: 8px;
        align-items: center;
        gap: 8px;
        border-radius: 4px;
        border: 1px solid var(--yf-light-gray);
        cursor: pointer;
    }

        .yf-rectangle-checkbox-label .yf-checkbox-option .yf-color-checkbox-preview {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid var(--yf-light-gray);
            /* filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.25)); */
        }

input.yf-rectangle-checkbox-input[type="checkbox"]:checked + .yf-checkbox-option {
    border: 1px solid var(--yf-secondary);
}

.yf-checkbox-option .yf-rectangle-checkbox-name {
    color: var(--yf-dark-gray);
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
}

/* Color checkbox styles end */

/* Material features filter styles  */

.material-feature-filters {
    margin-bottom: 16px;
}

.material-feature-list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .material-feature-list .list-checkbox-container label {
        display: flex;
        gap: 8px;
    }

    .material-feature-list .list-checkbox-container .list-checkbox-content {
        line-height: 1;
    }

.material-filters-container-height {
    height: 585px;
}

/* Material features filter styles end */

/* BYO filer styles */

.byo-style-filters {
    margin-bottom: 16px;
}

.filter-header #clearByoFilterBtn {
    margin: 0 16px;
}

.byo-filters-container-height {
    height: 490px;
}

/* BYO filer styles */

/* List checkbox styles */

input.list-checkbox-input[type="checkbox"] {
    display: none;
}

.list-checkbox-container .list-checkbox-box {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--yf-white);
    border-radius: 2px;
    border: 1px solid var(--yf-light-gray);
    overflow: hidden;
}

input.list-checkbox-input[type="checkbox"]:checked + label .list-checkbox-box::after {
    content: "\F26E";
    font-family: "bootstrap-icons";
    color: var(--yf-white);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--yf-secondary);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.list-checkbox-container .list-checkbox-title {
    color: var(--yf-dark-gray);
    font-size: 12px;
    font-weight: 500;
    line-height: 16.8px;
}

.list-checkbox-container .list-checkbox-description {
    color: var(--yf-dark-gray);
    font-size: 10px;
    font-weight: 400;
    line-height: 16.8px;
}

.list-checkbox-container .list-checkbox-title,
.list-checkbox-container .list-checkbox-description {
    margin: 0;
}

/* List checkbox styles end */

/* Footer styles */

#yfFooter {
    background-color: var(--yf-dark-gray);
}

    #yfFooter .footer-logo-container {
        display: flex;
        justify-content: center;
    }

    #yfFooter .yf-footer-logo {
        max-width: 100%;
    }

    #yfFooter .yf-footer-list {
        padding: 0;
        margin: 0;
    }

    #yfFooter .footer-content {
        padding-top: 16px;
        padding-left: 35px;
    }

    #yfFooter .yf-footer-list .yf-footer-list-item {
        margin-bottom: 16px;
    }

        #yfFooter .yf-footer-list .yf-footer-list-item p {
            margin: 0;
            line-height: 28px;
            font-weight: 300;
            color: var(--yf-white);
            font-size: 16px;
        }

            #yfFooter .yf-footer-list .yf-footer-list-item p:first-child {
                color: var(--yf-pale-gray);
                text-transform: uppercase;
                font-size: 24px;
            }

    #yfFooter .yf-footer-social-icons a {
        display: inline-block;
        color: var(--yf-pale-gray);
        font-size: 24px;
        padding-right: 8px;
    }

        #yfFooter .yf-footer-social-icons a:last-child {
            padding-right: 0;
        }

/* Footer styles end */

/* Swiper styles */

.also-available-carousel,
.real-specs-carousel,
.also-like-carousel {
    margin-bottom: 24px;
}

.also-available .swiper-pagination-bullet,
.real-specs .swiper-pagination-bullet,
.also-like .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: var(--yf-light-gray);
    opacity: 1;
}

.also-available .swiper-pagination-bullet-active,
.real-specs .swiper-pagination-bullet-active,
.also-like .swiper-pagination-bullet-active {
    background-color: var(--yf-medium-gray);
}

.swiper-also-available-pagination,
.swiper-real-specs-pagination,
.swiper-also-like-pagination {
    display: none;
}

/* Swiper styles end */

/* Responsive styles */

@media (max-width: 1460.98px) {

    .yf-swiper-container .swiper-button-prev {
        left: -50px;
    }

    .yf-swiper-container .swiper-button-next {
        right: -50px;
    }
}

@media (max-width: 991.98px) {

    .section-padding {
        padding: 60px 0;
    }

    #yfHeader {
        border-bottom: none;
    }

        #yfHeader .navbar {
            padding: 12px 0;
            background-color: var(--yf-off-white);
        }

        #yfHeader .yf-nav-wrapper .navbar-brand {
            order: 2;
        }

        #yfHeader .yf-nav-wrapper .navbar-toggler {
            order: 1;
            padding: 0;
            border: none;
        }

            #yfHeader .yf-nav-wrapper .navbar-toggler:focus {
                outline: none;
                box-shadow: none;
            }

        #yfHeader .yf-nav-wrapper .navbar-collapse {
            order: 3;
            padding-top: 10px;
        }

    .share-save-buttons-wrapper {
        padding-left: 0;
    }

    #mainSliderSection .thumbnail-slider {
        height: auto;
    }

    #mainSliderSection .main-slider {
        height: auto;
    }

    #mainSliderSection .gallery-slider-container {
        flex-wrap: wrap;
        row-gap: 40px;
    }

    #mainSliderSection .thumbnail-slider,
    #mainSliderSection .main-slider {
        width: 100%;
    }

    #mainSliderSection .main-slider {
        order: 1;
    }

    #mainSliderSection .thumbnail-slider {
        order: 2;
    }

        #mainSliderSection .thumbnail-slider .swiper-slide {
            height: 100% !important;
        }

    .product-specs {
        margin-bottom: 40px;
    }

        .product-specs .product-specs-form {
            padding: 30px 16px;
        }

    .sofa-description {
        padding-right: 0;
    }

    .qs-image-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        padding-top: 10px;
        padding-right: 25px;
    }

        .qs-image-wrapper img {
            max-width: 100px;
            width: 100%;
        }

    .collections-carousel-wrapper .nav-pills {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .collections-carousel-wrapper .nav-pills::-webkit-scrollbar {
            display: none;
        }

        .collections-carousel-wrapper .nav-pills .nav-item {
            flex: 0 0 auto;
        }

    .swiper-also-available-pagination,
    .swiper-real-specs-pagination,
    .swiper-also-like-pagination {
        display: block;
    }

    .yf-swiper-container .swiper-button-prev,
    .yf-swiper-container .swiper-button-next {
        display: none;
    }

    .yf-dimension-info-card .middle-text {
        text-align: center;
    }
}

@media (max-width: 767.98px) {

    .section-padding {
        padding: 40px 0;
    }

    .dimensions-table .col-wrapper .d-col-item.inner-col {
        flex-wrap: wrap;
    }

        .dimensions-table .col-wrapper .d-col-item.inner-col .inner-col-container {
            width: 100%;
        }

    .dimensions-table .col-wrapper .d-col-item .inner-col-item.visual-item {
        display: block;
        visibility: hidden;
    }

    .material-specs-table .specs-wrapper {
        flex-wrap: wrap;
        row-gap: 24px;
    }

        .material-specs-table .specs-wrapper .specs-col {
            flex-basis: 100%;
        }

    .collections-carousel-wrapper .tab-content .tab-pane {
        padding: 0;
    }

    .yf-swiper-container .swiper-button-prev {
        left: 0;
    }

    .yf-swiper-container .swiper-button-next {
        right: 0;
    }

    .quick-ship-text-content {
        padding: 0;
    }

    .individual-dimensions .all-dimensions .collapsible-wrapper {
        max-height: 950px;
    }
}

@media (max-width: 575.98px) {

    #mainSliderSection .thumbnail-slider .swiper-slide {
        height: 74px !important;
    }

    #yfFooter .footer-content {
        padding-top: 50px;
        padding-left: 0;
    }
}

/* Responsive styles end */

/* Configurator*/
#configurator {
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(246,233,220,1) 0%, rgba(255,255,255,1) 100%);
    border: none;
}

@media (max-width: 1024px) {
    #configurator {
        width: 100%;
        height: 95vh;
        background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(246,233,220,1) 0%, rgba(255,255,255,1) 100%);
        border: none;
    }
}

@media (max-width: 768px) {
    #mainSliderSection .main-slider {
        height: 300px;
        margin-bottom: 10px;
    }

    #mainSliderSection iframe {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}


@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

    #configurator {
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(246,233,220,1) 0%, rgba(255,255,255,1) 100%);
        border: none;
    }
}


.quickshiptag {
    display: inline-block;
    padding: 4px 8px;
    background: var(--yf-warm-clay-rgba-30);
    color: var(--yf-dark-gray);
    font-size: 10px;
    font-weight: 500;
    line-height: 16.8px;
    margin-top: 8px;
    margin-bottom: 0px;
}

/*COMING SOON*/
.img-wrap {
    position: relative;
    display: inline-block; /* or block, as you prefer */
}

    .img-wrap img {
        display: block;
        width: 100%;
        height: auto;
    }

    .img-wrap.coming-soon::before {
        content: "Coming soon";
        position: absolute;
        inset: 0; /* top:0; right:0; bottom:0; left:0 */
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0,0,0,.45);
        color: #fff;
        font: 700 clamp(12px, 2.2vw, 22px)/1.1 system-ui, Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: .08em;
        pointer-events: none; /* don’t block clicks on links beneath */
        backdrop-filter: blur(1px); /* optional, looks nice on modern browsers */
    }