.product-sect {
padding-top: 190px;
margin-bottom: 100px;
}
.product-sect__back {
display: flex;
align-items: center;
gap: 10px;
color: var(--color-green-dark);
font-size: 18px;
}
.product-sect__back:hover {
color: var(--color-orange);
}
.product {
margin-top: 40px;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 70px;
}
.product__info {
width: calc(55% - 35px);
}
.product__gallery {
width: calc(45% - 35px);
overflow: hidden;
}
.product__title {
font: 42px/1 var(--font-secondary);
}
.product__subtitle:not(:empty) {
margin-top: 25px;
font: 18px/1.5 var(--font-secondary);
color: #525252;
}
.product__price {
font-size: 40px;
margin-top: 40px;
}
.product__cart-btn {
max-width: 340px;
margin-top: 50px;
padding: 16px;
width: 100%;
position: relative;
z-index: 1;
font-size: 20px;
letter-spacing: 0.2px;
border-radius: 10px;
background-color: var(--color-green);
border: 1px solid var(--color-green);
color: var(--color-white);
transition: opacity 0.25s;
}
.product__cart-btn.hidden {
opacity: 0;
}
.product__cart-btn:not(.added):hover {
opacity: 0.7;
}
.product__cart-btn::before {
content: "Добавить в корзину";
}
.product__cart-btn.added {
border-color: var(--color-green-dark);
color: var(--color-green-dark);
background-color: transparent;
pointer-events: none;
}
.product__cart-btn.added::before {
content: "В корзине";
}
.product__descr {
display: flex;
flex-direction: column;
gap: 25px;
margin-top: 70px;
font: 18px/1.5 var(--font-secondary);
}
.product__descr-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.product__descr-item::before {
content: "";
width: 24px;
height: 24px;
flex-shrink: 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Imljb24tcGFyazpzbGVhdmVzIj4KPGcgaWQ9Ikdyb3VwIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguNSAyMS41QzguNSAyMS41IDE1IDIyIDE4LjUgMThDMjIgMTQgMjIgMiAyMiAyQzIyIDIgMTAgMS41IDYgNC41QzIgNy40OTk5OSAzIDE2IDMgMTYiIHN0cm9rZT0iIzg5QkE0NSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggaWQ9IlZlY3Rvcl8yIiBkPSJNMiAyMkMyIDIyIDcuNTg5NjUgMTcuNzc1NyAxMSAxNEMxNC40MTA0IDEwLjIyNDIgMTYgNi41IDE2IDYuNSIgc3Ryb2tlPSIjODlCQTQ1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzMiIGQ9Ik0xMSAxNEwxMC41IDcuNSIgc3Ryb2tlPSIjODlCQTQ1IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzQiIGQ9Ik0xMSAxNEwxNiAxMy41IiBzdHJva2U9IiM4OUJBNDUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9nPgo8L3N2Zz4K");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
}
.product__gallery-slider .slick-track {
display: flex;
}
.product__gallery-top {
position: relative;
}
.product__gallery-slide,
.product__gallery-slider-dot {
position: relative;
aspect-ratio: 0.8649;
}
.product__gallery-slide img,
.product__gallery-slider-dot img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.product__gallery-slider-arrs {
position: absolute;
top: 50%;
left: 14px;
width: calc(100% - 28px);
display: flex;
justify-content: space-between;
gap: 20px;
z-index: 999999;
}
.product__gallery-slider-prev,
.product__gallery-slider-next {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-white);
}
.product__gallery-slider-dots {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 25px;
}
.product__gallery-slider-dot {
width: calc((100% - 100px) / 5);
}
.deliv-payment-block {
margin-bottom: 140px;
}
.deliv-payment {
padding: 50px 110px 90px;
border-radius: 20px;
border: 1px solid #e7eae7;
background: #f8f8f8;
}
.deliv-payment__toggle {
display: flex;
border-bottom: 1px solid #525252;
font: 22px/1 var(--font-secondary);
}
.deliv-payment__toggle-btn {
position: relative;
width: 50%;
padding: 20px;
}
.deliv-payment__toggle-btn.active::after {
content: "";
position: absolute;
top: calc(100% - 1px);
left: 0;
width: 100%;
height: 3px;
background-color: var(--color-orange);
}
.deliv-payment__tabs {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.deliv-payment-tab {
grid-column: 1/-1;
grid-row: 1/-1;
padding: 50px 0 0;
display: flex;
align-items: center;
opacity: 0;
visibility: hidden;
font: 18px/1.5 var(--font-secondary);
}
.deliv-payment-tab.active {
opacity: 1;
visibility: visible;
}
.deliv-payment-tab__main,
.deliv-payment-tab__list {
width: 50%;
padding: 0 55px;
}
.deliv-payment-tab__list {
display: flex;
flex-direction: column;
gap: 30px;
}
.deliv-payment-tab__title {
margin-bottom: 25px;
font-size: 60px;
line-height: 1.1;
font-weight: 400;
}
.deliv-payment-tab__list-item {
display: flex;
gap: 15px;
align-items: flex-start;
}
.deliv-payment-tab__list-item::before {
content: "";
width: 24px;
height: 24px;
flex-shrink: 0;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9Imljb24tcGFyazpzbGVhdmVzIj4KPGcgaWQ9Ikdyb3VwIj4KPHBhdGggaWQ9IlZlY3RvciIgZD0iTTguNSAyMS41QzguNSAyMS41IDE1IDIyIDE4LjUgMThDMjIgMTQgMjIgMiAyMiAyQzIyIDIgMTAgMS41IDYgNC41QzIgNy40OTk5OSAzIDE2IDMgMTYiIHN0cm9rZT0iIzYwNzczQyIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggaWQ9IlZlY3Rvcl8yIiBkPSJNMiAyMkMyIDIyIDcuNTg5NjUgMTcuNzc1NyAxMSAxNEMxNC40MTA0IDEwLjIyNDIgMTYgNi41IDE2IDYuNSIgc3Ryb2tlPSIjNjA3NzNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzMiIGQ9Ik0xMSAxNEwxMC41IDcuNSIgc3Ryb2tlPSIjNjA3NzNDIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBpZD0iVmVjdG9yXzQiIGQ9Ik0xMSAxNEwxNiAxMy41IiBzdHJva2U9IiM2MDc3M0MiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPC9nPgo8L3N2Zz4K");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
}
@media screen and (max-width: 1440px) {
.product-sect {
padding-top: 120px;
margin-bottom: 70px;
}
.product {
margin-top: 35px;
gap: 40px;
}
.product__info {
width: calc(55% - 20px);
}
.product__gallery {
width: calc(45% - 20px);
}
.product__title {
font-size: 36px;
}
.product__subtitle:not(:empty) {
margin-top: 15px;
}
.product__price {
font-size: 36px;
}
.product__cart-btn {
margin-top: 35px;
font-size: 16px;
}
.product__descr {
margin-top: 35px;
font-size: 16px;
gap: 20px;
}
.deliv-payment-block {
margin-bottom: 100px;
}
}
@media screen and (max-width: 1280px) {
.deliv-payment {
padding: 20px 30px 40px;
}
.deliv-payment__toggle {
font-size: 20px;
}
.deliv-payment__toggle-btn {
padding: 10px;
}
.deliv-payment-tab {
padding-top: 35px;
font-size: 16px;
}
.deliv-payment-tab__main,
.deliv-payment-tab__list {
padding: 0 30px;
}
.deliv-payment-tab__list {
gap: 20px;
}
.deliv-payment-tab__title {
font-size: 40px;
}
.deliv-payment-block {
margin-bottom: 70px;
}
}
@media screen and (max-width: 768px) {
.product-sect {
padding-top: 90px;
margin-bottom: 60px;
}
.product-sect__back {
font-size: 14px;
}
.product {
margin-top: 20px;
gap: 20px;
flex-direction: column-reverse;
}
.product__info {
width: 100%;
}
.product__gallery {
width: 85%;
overflow: visible;
}
.product__gallery.single {
width: 100%;
}
.product__gallery-slide {
margin-right: 24px;
}
.product__gallery-slider.single .product__gallery-slide {
margin-right: 0;
}
.product__gallery-slider-dots,
.product__gallery-slider-arrs {
display: none;
}
.product__title {
font-size: 20px;
}
.product__subtitle:not(:empty) {
margin-top: 10px;
font-size: 14px;
}
.product__price {
font-size: 28px;
margin-top: 25px;
}
.product__cart-btn {
font-size: 14px;
}
.product__descr {
margin-top: 40px;
font-size: 14px;
}
.product__descr-ite {
gap: 10px;
}
.product__descr-item::before {
width: 16px;
height: 16px;
}
.deliv-payment-block {
margin-bottom: 50px;
}
.deliv-payment {
padding: 20px 20px 35px;
}
.deliv-payment__toggle {
font-size: 14px;
}
.deliv-payment-tab {
padding-top: 30px;
font-size: 14px;
flex-direction: column;
gap: 30px;
}
.deliv-payment-tab__main,
.deliv-payment-tab__list {
padding: 0;
width: 100%;
}
.deliv-payment-tab__title {
font-size: 22px;
margin-bottom: 15px;
}
.deliv-payment-tab__list-item {
display: flex;
gap: 10px;
align-items: flex-start;
}
.deliv-payment-tab__list-item::before {
width: 16px;
height: 16px;
}
}