/* Загруженные шрифты */
body {/* убираем стандартные пространства по всем краям */
    background-color: #ffffff;
    margin: 0px;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

b {
    font-weight: 600;
}
s { /* толщина линии зачеркивания */
    text-decoration: line-through;
    text-decoration-thickness: 3px; 
}

a:hover, a:active, a:focus {
    color: inherit;
    text-decoration: none; 
    outline: 0; /
}
h1, h2, h3 {
    all: unset;  
    display: block; 
    font-size: inherit; 
    font-weight: normal; 
    margin: 0; 
    padding: 0; 
    line-height: inherit; 
    color: inherit; 
}

/* расположение блоков шапки */
.top-block {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Это создаст две колонки. Первая займет 1 долю доступного пространства, вторая - 2 доли */
    grid-template-rows: auto auto; /* Это создаст два ряда с автоматической высотой */
    gap: 0px; /* промежуток между грид-элементами */
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 60px;
    padding-left: 15px;
    padding-right: 15px;
    }
    @media (max-width: 380px) {
        .top-block {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    .product-name-wrapper { /* названи продукта как отдельная секция */
    grid-column: 1; 
    grid-row: 1; 
    margin-bottom: 15px;
    margin-top: 5px;
    }

    .left { /* левая колонка */
    grid-column: 1; /* Размещает элемент в первой колонке */
    grid-row: 2;    /* Размещает элемент во втором ряду */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    .right { /* правая колонка */
    grid-column: 2; /* Размещает элемент во второй колонке */
    grid-row: 1 / 4; /* Размещает элемент в обоих рядах (ряд 1 и ряд 2) */
    }

    .product-name-wrapper, .left, .right {
    display: flex;
    justify-content: center;
    }

    @media (max-width: 880px) {
    .top-block {
        grid-template-columns: 1fr; /* Одна колонка на мобильных устройствах */
        grid-template-rows: auto auto auto;
        padding-top: 35px;
    }

    .product-name-wrapper {
        grid-column: 1;
        grid-row: 1; /* занимает второе место сверху */
    }

    .right {
        grid-column: 1;
        grid-row: 2; /* занимает первое место сверху */
    }

    .left {
        grid-column: 1;
        grid-row: 3; /* занимает третье место сверху */
    }
}
/* Стили описания продукта (блок left) */
.product-name {
    width: 100%;
    text-align: left; 
    max-width: 400px;
    word-wrap: break-word;
    margin-left: auto; 
    margin-right: auto;
    padding-bottom: 10px;
    }
    .mini-discripton {
    text-align: left; 
    color: #363636 !important;
    font-size: 15px;
    font-weight: 300; 
    max-width: 400px;
    }
    @media (max-width: 880px) {
        .mini-discripton {
            text-align: center; 
        }
        .product-name {
            text-align: left; 
            padding-left: 10px;
        }
}
/* Стили изображений продукта в шапке */
.top-img {
    width: 100%; 
    height: auto;    
    padding-bottom: 10px;
    }
    .slider { /* Слайдшоу */
    width: 450px;
    height: 450px;
    margin-bottom: 15px;
    }
    .wrapper {
    overflow: hidden;
    position: relative;
    background: #222;
    z-index: 1;
    border-radius: 15px;
    }
    #items {
    width: 10000px;
    position: relative;
    top: 0;
    left: 0px;
    }
    #items.shifting {
    transition: left .2s ease-out;
    }
    .slide {
    width: 450px;
    height: 450px;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 1s;
    position: relative;
    background: #ffffff;
    cursor: grab;
    }
    .slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* или object-fit: contain; в зависимости от того, что вам нужно */
    }
    .slide img {
    -webkit-object-fit: cover;  /* Для Safari */
    object-fit: cover;
    }
    .dots {
    display: flex;
    justify-content: center; /* центрирование содержимого по горизонтали */
    position: absolute;
    left: 0; /* новое */
    right: 0; /* новое */
    bottom: 8px;
    margin: 0;
    z-index: 999999;
    }
    .dots .dot {
    width: 8px;
    height: 8px;
    margin: 0 5px;
    background-color: #d4d4d4;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.1s;
    }
    .dots .dot.active {
    background-color: #838383;
}

.advantage {
    max-width: 975px;
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
    }
    @media (max-width: 380px) {
        .advantage {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    /* 2 колонки приемуществ */
    .adv-columns {
        display: flex;
        flex-wrap: wrap; 
        gap: 0px; 
    }
    
    .adv-col-left, .adv-col-right {
        flex: 1; 
        min-width: 50%; /* Минимальная ширина каждой колонки */
    }
    
    .adv-col-left {
        display: flex;
        justify-content: center;
    }
    @media (max-width: 880px) {
        .adv-col-left, .adv-col-right {
            flex-basis: 100%; 
            min-width: 100%;
        }
    }

    .adv-img-gif {/* Оразмерявание гиф картинки которая меньше 400пкс */
        width: 400px;
        height: auto;
        border-radius: 15px;
        margin-bottom: 35px;
        }
        @media (max-width: 430px) {
        .adv-img-gif {
            width: 370px;
            height: auto;
            aspect-ratio: 1/1; 
            }
        }
        @media (max-width: 400px) {
            .adv-img-gif {
                width: 350px;
                height: auto;
                aspect-ratio: 1/1; 
            }
        }
        @media (max-width: 370px) {
            .adv-img-gif {
                width: 340px;
                height: auto;
                aspect-ratio: 1/1; 
            }
        }
        @media (max-width: 360px) {
            .adv-img-gif {
                width: 320px;
                height: auto;
                aspect-ratio: 1/1; 
            }
}

.instructions {
    max-width: 100%;
    margin-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
    }
    .instructions-container {
        max-width: 1140px;
        margin: 0 auto;
        padding-top: 50px;
        padding-left: 0px;
        padding-right: 0px;
    }
    @media (max-width: 380px) {
        .instructions-container {
            padding-left: 0px;
            padding-right: 0px;
        }
        .instructions {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    .inst-columns {
        display: flex;
        flex-wrap: wrap; 
        gap: 0px; 
    }
    
    .inst-col-left, .inst-col-right {
        flex: 1; 
        min-width: 50%; /* Минимальная ширина каждой колонки */
    }
    
    .inst-col-left {
        display: flex;
        justify-content: center;
    }
    .inst-col-right {
        display: flex;
        justify-content: center;
    }

    @media (max-width: 880px) {
        .inst-col-left, .inst-col-right {
            flex-basis: 100%; 
            min-width: 100%;
        }
        .inst-col-right {
            order: 1;
        }
        .inst-col-left {
            order: 2;
        }
        .instructions-container {
            padding-top: 35px;
        }
        .instructions {
            margin-top: 30px;
        }
}

.offer {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; 
    align-items: center; 
    }
    @media (max-width: 380px) {
        .offer {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    .attention {
        max-width: 535px;
        font-weight: 300;
        color: white;
        font-size: 2.25rem;
        line-height: 1.1;
        text-align: center;
        padding-bottom: 15px;
    }
    @media (max-width: 880px) {
        .attention {
            font-size: 1.5rem;
            font-weight: 400;
        }
    }
    .offer-text {
        max-width: 550px;
        font-weight: 200;
        color: white;
        font-size: 1.1rem;
        line-height: 1.4;
        text-align: center;
        padding-bottom: 25px;
    }
    .offer-block {
        max-width: 350px;
        padding: 10px;
        background: rgba(0,0,0, 0.33);
        border-radius: 10px;
    }
    .offer-block-promotext {
        color: #f1b5b8;
        font-weight: 500;
        font-size: 36px;
        text-align: center;
        padding-top: 10px;
    }
    #offer-date {
        color: #fef9e6;
        font-weight: 300;
        font-size: 24px;
        text-align: center;
        padding-bottom: 10px;
    }
    .offer-price {
        display: flex;
        justify-content: space-between; /* Распределяем пространство между элементами */
        padding: 10px
    }
    .offer-new-price {
        flex: 5; /* Занимает 60% пространства */
    }
    .offer-old-price {
        flex: 5; /* Занимает 40% пространства */
    }
    .offer-new-price-text {
        color:#f1b5b8;
        font-size: 24px;
        font-weight: 200;
    }
    .offer-new-price-value {
        color:#f1b5b8;
    }
    .offer-old-price-text {
        color:#999999;
        font-size: 24px;
        text-align: end;
        font-weight: 200;
    }
    .offer-old-price-value {
        color:#999999;
        text-align: end;
    }
    .offer-extra-discount {
        width: 100%;
        text-align: center;
        font-weight: 400;
        padding-top: 10px;
        font-size: 19px;        
        padding-bottom: 20px;
        color:#f1b5b8;
    }

    .order-now-btn {
        margin-top: 35px;
        margin-bottom: 5px;
        padding: 15px 40px;
        background-color: #fef9e6;
        font-size: 1.125rem;
        color: black;
        border-radius: 30px;
        border: none; 
        outline: none; 
        box-shadow: none; 
        text-decoration: none; 
        cursor: pointer; 
        transition: background-color 0.1; 
        position: relative; 
        display: inline-flex; 
        align-items: center; 
    }
    .order-now-btn::before {
        content: "\e8279"; 
        font-family: 'arrow-down', sans-serif; 
        margin-right: 10px; 
        color: black;
    }
    .order-now-btn:hover {
        background-color: #f6ebc1;
}


.purchase {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 140px;
    padding-left: 15px;
    padding-right: 15px;
    }
    @media (max-width: 380px) {
        .purchase {
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    @media (max-width: 360px) {
        .purchase {
            padding-left: 0px;
            padding-right: 0px;
        }
    }
    .purchase-columns {
    display: flex;
    justify-content: space-between; /* Распределяем пространство между элементами */
    align-items: flex-start; 
    }
    .purchase-left-column {
    flex: 5; 
    padding-top: 80px;
    }
    .purchase-ordernow-text {
        text-align: center;
        font-size: 2.25rem;
    }
    .purchase-right-column {
    flex: 5; 
    justify-content: center;
    display: flex;
    }
    .purchase-img {
        padding-top: 40px;
    }
    @media (max-width: 880px) {
        .purchase {
            padding-top: 45px;
        }
        .purchase-left-column {
            padding-top: 0px;
        }
        .purchase-right-column {
            display: none;
        }
        .purchase-ordernow-text {
            font-size: 1.7rem;
            font-weight: 400;
        }
}

/* Стили виджета цен */
.chose-qty {
    display: flex;
    align-items: center;
    max-width: 340px;
    margin: auto;
    color: #252525;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap; 
    background-color: white;
    padding: 0 10px;
    position: relative;
    top: -11px;
    }
    .line-container {
    width: 100%;
    }
    .line {
    display: flex;
    border-top: 1px solid black;
    max-width: 330px;
    align-items: center;
    margin-bottom: 5px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    }
    .price-block {
    display: flex;
    flex-direction: row;
    justify-content: center; 
    }
    .price1, .price2, .price3 {
    width: 113px;
    }
    .price-incide1 {
    border: dashed #d4d4d4;
    border-width: 1px 0px 1px 1px;
    border-radius: 7px;
    padding-bottom: 9px;
    margin-bottom: 6px;
    }
    .price-incide2 {
    border: dashed #d4d4d4;
    border-width: 1px 1px 1px 1px;
    border-radius: 7px;
    padding-bottom: 9px;
    margin-bottom: 6px;
    }
    .price-incide3 {
    border: dashed #d4d4d4;
    border-width: 1px 1px 1px 0px;
    border-radius: 7px;
    padding-bottom: 9px;
    margin-bottom: 6px;
    }
    .pref1 {
    text-align: center; 
    color: transparent;
    font-weight: normal;
    font-family: 'Arial', sans-serif; 
    font-size: 12px;
    background-color: transparent;
    border-radius: 10px;
    }
    .pref2 {
    text-align: center; 
    color: #666666;
    font-weight: normal;
    font-family: 'Arial', sans-serif; 
    font-size: 12px;
    background-color: yellow;
    border-radius: 10px;
    }
    .pref3 {
    text-align: center; 
    color: #fff;
    font-weight: normal;
    font-family: 'Arial', sans-serif; 
    font-size: 12px;
    background-color: #05b31e;
    border-radius: 10px;
    }
    .product-img {
        display:flex;
        justify-content: center;
    }
    .price-text {
    margin-top: 12px;
    text-align: center; 
    color: #666666; 
    font-weight: bold; 
    font-size: 16px; 
    font-family: 'Arial', sans-serif;
    }
    .price-value {
    margin-top: 1px;
    text-align: center; 
    }
    .value {
    font-family: 'Arial', sans-serif; 
    font-weight: bold; 
    }
    .whole-part {
    color: #e68387;
    font-size: 28px;
    }
    .fractional-part {
    color: #e68387;
    font-size: 16px;
    }
    .lv {
    color: #e68387;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    }
    .gvalue {
    color: #666666;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    }
    .twovalue {
        color: #666666;
        font-size: 12px;
        font-family: Arial, Helvetica, sans-serif;
        }
        .threevalue {
            color: #666666;
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
            }
    .buy {
    /* Сброс стандартных стилей кнопки со всех устройств всех браузеров */
    border: none;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;  
    /* Мои стили */
    border-radius: 5px;
    width: calc(100% - 10px); /* Уменьшаем ширину кнопки на 10px (5px слева и 5px справа) */
    background-color: #e68387;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    font-weight: bold !important;
    color: #fff !important;
    text-align: center;
    padding: 13px 0px 13px 0px !important;
    margin: 0 5px; /* Внешние отступы слева и справа по 5px */
    display: inline-block; /* Это необходимо, чтобы ссылка вела себя как кнопка */
    text-decoration: none; /* Убрать подчёркивание у ссылки */
    }
    .buy:hover {
    background-color: #d67276;
}

footer {
    background-color: #333333;
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
    }
    .footer-links {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Центрируем элементы */
    gap: 20px;
    }
    .footer-links a {
    text-align: center; /* Центрирование текста внутри ссылки */
    margin-bottom: 10px; /* Отступ снизу для каждой ссылки */
    text-decoration: none; /* Убираем подчеркивание */
    color: #999999;
    font-size: 1rem;
    font-weight: 300;
    }
    @media (max-width: 880px) {
    .footer-links a {
        flex-basis: 100%; /* Каждая ссылка занимает всю ширину контейнера */
    }
    .footer-links {
        gap: 0px;
    }
}

.general-rules-text {
    max-width: 1140px;
    margin: 40px auto;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    padding: 15px;
}
.delivery-policy-text {
    max-width: 1140px;
    margin: 50px auto;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    padding-bottom: 300px;
    padding: 15px;
}