body{
    background: #f5f7fb;
}
.main-info .container{
    display: grid;
    grid-template-columns: 510px 1fr 320px;
    gap: 34px;
    align-items: flex-start;
}
.gallery-wrapper{
    background: white;
    padding: 20px;
    border: 1px solid var(--gray);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(12, 31, 54, 0.08);
}
.gallery{
    height: 430px;
}
.gallery-img{
    width: 100%;
    object-fit: contain;
}
.gallery-pagination{
    margin: 16px 0 0 0;
}
.gallery-pagination-img{
    height: 75px;
    width: 100%;
    object-fit: contain;
    border: 2px solid var(--gray);
    border-radius: 6px;
    padding: 5px;
    &.swiper-slide-thumb-active{
        border-color: var(--yellow);
    }
}
.title{
    margin: 0;
    font-size: clamp(26px, 2.2vw, 38px);
}
.meta-list{
    margin: 14px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}
.meta{
    font-size: 13px;
    color: #66758a;
}
.grade-wrapper{
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--yellow);
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}
.buy{
    border: 1px solid var(--gray);
    border-radius: 8px;
    background: white;
    box-shadow: 0 14px 36px rgba(12, 31, 54, 0.08);
    padding: 26px;
}
.available{
    display: flex;
    align-items: center;
    gap: 9px;
    color: #1d8441;
    font-weight: 800;
    &:before{
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #32b15b;
    }
}
.price{
    margin: 10px 0 2px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}
.price-explanation{
    color: #66758a;
    font-size: 13px;
    font-weight: 400;
}
.amount{
    margin: 20px 0 0 0;
    width: 100%;
}

.file-list{
    margin: 20px 0 0 0;
    display: grid;
    grid-template-columns: 100%;
}
.file{
    color: var(--dark-blue);
    font-weight: 500;
    padding: .5em 0;
}
.shop2-product-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0;
}

.navigation-btn {
    display: flex;
    gap: 1em;
    align-items: center;
    --icon-size: 9px;

    &:before {
        content: '';
        width: var(--icon-size);
        height: 14px;
        flex-shrink: 0;
        background: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22full%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%20xml%3Aspace%3D%22preserve%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%229px%22%20height%3D%2214px%22%20%20viewBox%3D%220%200%209%2014%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22geometricPrecision%22%3E%22%3Cpath%20d%3D%22M8.24261%202.56066C8.8284%201.97487%208.8284%201.02513%208.24261%200.43934C7.65683%20-0.146447%206.70708%20-0.146447%206.12129%200.43934L0.733895%205.82765C0.148109%206.41344%200.148109%207.36319%200.733895%207.94897L6.09786%2013.3129C6.68364%2013.8987%207.63339%2013.8987%208.21918%2013.3129C8.80496%2012.7271%208.80496%2011.7774%208.21918%2011.1916L3.91542%206.88786L8.24261%202.56066Z%22%20fill%3D%22%232c3345%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E) center/contain;
    }

    &.prev:before {

    }

    &.next {
        flex-direction: row-reverse;

        &:before {
            scale: -1 1;
        }
    }
}

.product-tabs {
    border: 1px solid var(--gray);
    background-color: #fff;
}
.product-tabs-label-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--gray);
}
.product-tabs_label {
    background: #f8fafc;
    width: 100%;
    font-size: 15px;
    border: none;
    padding: 1.3em;
    &.active{
        background: white;
        box-shadow: inset 0 -3px 0 var(--yellow);
    }
}

.product-tabs_tab {
    padding: 30px;
    font-size: 15px;
    line-height: 1.5;
}
.delivery-payment{
    --display-active: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: flex-start;
}
.delivery-payment-group_title{
    margin: 0 0 14px 0;
    font-weight: 700;
    font-size: 17px;
}

.param-item {
    display: grid;
    grid-template-columns: .4fr .6fr;
    min-height: 50px;
    padding: 4px 0;
    align-items: center;
}

.param-item:not(:last-child) {
    border-bottom: 1px solid rgba(44, 51, 69, 0.1);
}

.param-title {
    font-weight: 700;
}

.param-body {
    color: rgba(44, 51, 69, 0.5);
}

.product-props-dropdown {
    display: flex;
    flex-direction: column-reverse;
}

.product-props-dropdown_label {
    display: flex;
    flex-direction: column-reverse;
    &:before {
        content: 'Все параметры';
        margin: 20px 0 0 0;
        padding: 8px 15px;
        display: flex;
        font: 400 13px / 1.09 'Rubik', Arial, Helvetica, sans-serif;
        background: rgba(53, 170, 255, 0.1);
        border-radius: 5px;
        width: fit-content;
    }
}

[open] .product-props-dropdown_label:before {
    content: 'Скрыть параметры';
}
.product-props-list{
    display: grid;
    grid-template-columns: 100%;
    gap: 12px;
    padding: 24px 0;
    margin: 22px 0;
    border-top: 1px solid var(--gray);
    border-bottom: 1px solid var(--gray);
}
.prop-dropdown-item {
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: 15px;
    gap: 10px;
}

.prop-dropdown-item_title {
    color: #66758a;
}

.prop-dropdown-item_value {
    font-weight: 700;
}
.question-btn{
    margin: 20px 0 0 0;
    color: var(--dark-blue);
    font-size: 15px;
    padding: 0;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    gap: .5em;
    &:before{
        content: '';
        width: 5px;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: currentColor;
        flex-shrink: 0;
    }
}

.product-actions {
    margin: 25px 0 0 0;
    display: grid;
    grid-template-columns: 100%;
    gap: 10px;
}
.buy-one-click, .add-to-cart{
    width: 100%;
}

.product-item-stock {
    margin: 20px 0 0 0;
    color: #2c3345;
    font-size: 14px;
    position: relative;
    padding: 3px 0 1px 31px;
}

@media (max-width: 1023px) and (min-width: 640px) {
    .product-item-stock {
        width: 100%;
    }
}

.product-item-stock:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 21px;
    height: 21px;
    border-radius: 50%;
}

.product-item-stock.buy:before {
    background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22full%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%20xml%3Aspace%3D%22preserve%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2221px%22%20height%3D%2221px%22%20%20viewBox%3D%220%200%2021%2021%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M10.5%200C4.725%200%200%204.725%200%2010.5C0%2016.275%204.725%2021%2010.5%2021C16.275%2021%2021%2016.275%2021%2010.5C21%204.725%2016.3188%200%2010.5%200ZM15.2688%208.4875L10.0188%2013.7375C9.84375%2013.9125%209.625%2014%209.40625%2014C9.1875%2014%208.96875%2013.9125%208.79375%2013.7375L5.73125%2010.675C5.38125%2010.325%205.38125%209.8%205.73125%209.45C6.08125%209.1%206.60625%209.1%206.95625%209.45L9.40625%2011.9L14.0437%207.2625C14.3937%206.9125%2014.9188%206.9125%2015.2688%207.2625C15.6188%207.6125%2015.6188%208.1375%2015.2688%208.4875Z%22%20fill%3D%22%2343D663%22%2F%3E%3C%2Fsvg%3E") 50% 50% no-repeat;
}

.product-item-stock.onrequest:before {
    background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22full%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%20xml%3Aspace%3D%22preserve%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2213px%22%20height%3D%223px%22%20%20viewBox%3D%220%200%2013%203%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22geometricPrecision%22%3E%3Cpath%20d%3D%22M0%201.5C0%200.671573%200.671573%200%201.5%200H11.5C12.3284%200%2013%200.671573%2013%201.5C13%202.32843%2012.3284%203%2011.5%203H1.5C0.671573%203%200%202.32843%200%201.5Z%22%20fill%3D%22%2343D663%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") 50% no-repeat;
}

.product-item-stock.notavailable {
    opacity: 0.7;
}

.product-item-stock.notavailable:before {
    background: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22full%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%20xml%3Aspace%3D%22preserve%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2213px%22%20height%3D%223px%22%20%20viewBox%3D%220%200%2013%203%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22geometricPrecision%22%3E%22%3Cpath%20d%3D%22M0%201.5C0%200.671573%200.671573%200%201.5%200H11.5C12.3284%200%2013%200.671573%2013%201.5C13%202.32843%2012.3284%203%2011.5%203H1.5C0.671573%203%200%202.32843%200%201.5Z%22%20fill%3D%22%23ff5640%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") 50% no-repeat;
}
.go-back:before {
    content: '';
    width: 20px;
    height: 20px;
    background: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20baseProfile%3D%22full%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aev%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2Fxml-events%22%20xml%3Aspace%3D%22preserve%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2212px%22%20height%3D%2217px%22%20%20viewBox%3D%220%200%2012%2017%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22geometricPrecision%22%3E%22%3Cpath%20d%3D%22M10.08%2016.567L0.48%209.36701C-0.16%208.88701%20-0.16%207.92701%200.48%207.44701L10.08%200.247008C10.88%20-0.352992%2012%200.207008%2012%201.20701V15.607C12%2016.607%2010.88%2017.167%2010.08%2016.567Z%22%20fill%3D%22%232c3345%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E) 50% no-repeat;
}

.similar-products .container{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
    align-items: center;
    .swiper{
        grid-area: auto / span 2;
    }
}
.similar-products_title{
    margin: 0;
}
.similar-products-slider-nav{
    display: grid;
    grid-template-columns: 30px 30px;
    gap: 10px;
}
.slider-nav-btn{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: white;
    border: 1px solid var(--gray);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    &:before{
        content: '';
        width: 4px;
        aspect-ratio: 1/1;
        border-right: 1px solid var(--black);
        border-bottom: 1px solid var(--black);
        transform: translate(-17%, 0) rotate(-45deg);
        flex-shrink: 0;
    }
    &.prev{
        scale: -1 1;
    }
}

@media (max-width: 1200px) {
    .main-info .container{
        grid-template-columns: 100%;
        gap: 20px;
    }
}
@media (max-width: 1024px) {
    .gallery{
        height: 290px;
    }
    .gallery-pagination-img{
        height: 70px;
    }
    .product-tabs-label-list{
        grid-template-columns: 100%;
        border-bottom: none;
    }
    .product-tabs_label{
        padding: 1em;
        border-bottom: 1px solid var(--gray);
        text-align: left;
    }
    .product-tabs_tab{
        padding: 20px;
    }
    .delivery-payment{
        grid-template-columns: 100%;
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .product-tabs-label-list {
        gap: 10px;
        margin-bottom: 0;
    }

    .product-tabs_label {
        width: 100%;
    }

    .param-item {
        grid-template-columns: 100%;
    }

    .prop-dropdown-item {
        grid-template-columns: 100%;
    }
}
