:root {
    --color-text: #333;
    --color-text-secondary: #666;
    --color-text-muted: #999;
    --color-white: #fff;
    --color-border: #eee;
    --color-blue-accent: #1757a2;
    --color-cyan-accent: #00c4cc;
    --color-cyan-hover: #00adb5;
    --color-yellow: #ffb800;
    --color-input-bg: #b3b3b3;
    --color-social-green: #2ecc71;
    --color-social-blue: #3498db;
    --color-social-dark-blue: #2980b9;
    --section-padding-v: 60px;
    --section-padding-h: 40px;
    --section-padding-v-md: 50px;
    --section-padding-h-md: 30px;
    --section-padding-v-sm: 30px;
    --section-padding-h-sm: 15px;
    --gap-large: 40px;
    --gap-medium: 20px;
    --gap-small: 12px;
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-base: 15px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 28px;
    --fs-4xl: 32px;
    --lh-tight: 1.3;
    --lh-normal: 1.4;
    --lh-relaxed: 1.6;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --container-max: 1400px;
    --container-narrow: 1200px;
    --container-article: 1000px;
    --container-form: 800px
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: "Manrope", sans-serif;
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity .2s
}

a:hover {
    opacity: .7
}

ul {
    list-style: none
}

.header {
    padding: 20px var(--section-padding-h);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border)
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto
}

.header__brand {
    display: flex;
    align-items: center;
    gap: 15px
}

.header__tagline {
    font-size: var(--fs-xs);
    color: var(--color-text);
    line-height: var(--lh-normal);
    max-width: 200px
}

.header__nav {
    display: flex;
    gap: 50px
}

.header__nav-column-title {
    font-size: var(--fs-sm);
    color: var(--color-text);
    margin-bottom: 10px;
    font-weight: 300
}

.header__nav-column ul {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.header__nav-column li {
    font-size: var(--fs-sm);
    font-weight: 600
}

.header__nav-column a {
    color: var(--color-text);
    font-weight: 600
}

.header__contacts {
    text-align: right
}

.header__phone {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-text);
    display: block;
    margin-bottom: 4px
}

.header__email {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 10px
}

.header__socials {
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.header__social-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .3s ease
}

.header__social-icon:hover {
    transform: scale(1.1)
}

.header__social-icon img {
    width: 100%
}

.hero {
    position: relative;
    padding: var(--section-padding-v) var(--section-padding-h) 80px;
    max-width: var(--container-max);
    margin: 0 auto
}

.hero__container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: var(--gap-large)
}

.hero__item {
    position: relative;
    flex: 1;
    max-width: 600px;
    min-height: 440px
}

.hero__item--blue {
    background: url(/static/retail/img/svg/hero-bg-blue.svg) no-repeat center;
    background-size: contain
}

.hero__item--yellow {
    background: url(/static/retail/img/svg/hero-bg-yellow.svg) no-repeat center;
    background-size: contain
}

.hero__barrel-wrap {
    position: absolute;
    right: 13%;
    bottom: -2%;
    width: 200px;
    z-index: 1
}

.hero__barrel {
    width: 100%;
    height: auto;
    display: block
}

.hero__barrel-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

.hero__barrel-label-percent {
    display: block;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 4px
}

.hero__barrel-label-text {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--lh-tight)
}

.hero__barrel-label.barrel-label--light span {
    color: var(--color-white)
}

.hero__content {
    position: absolute;
    left: 17%;
    bottom: 15%;
    z-index: 2;
    max-width: 250px;
    text-align: left
}

.hero__subtitle {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-text);
    line-height: var(--lh-normal);
    margin-bottom: 15px;
    text-align: left
}

.hero__button {
    display: inline-block;
    padding: 12px 30px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    color: var(--color-text);
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transition: transform .2s, box-shadow .2s;
    text-align: left
}

.hero__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
}

.info {
    padding: var(--section-padding-v) var(--section-padding-h);
    max-width: var(--container-max);
    margin: 0 auto
}

.info__title {
    font-size: var(--fs-3xl);
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    line-height: var(--lh-tight);
    margin-bottom: 20px
}

.info__main {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-large);
    margin-bottom: 50px
}

.info__prices {
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium)
}

.info__price-block + .info__price-block {
    margin-top: 10px
}

.info__price-brand {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px
}

.info__price-current {
    font-size: var(--fs-md);
    color: var(--color-text);
    margin-bottom: 4px
}

.info__price-current span {
    color: #2073c8;
    font-weight: 700
}

.info__price-old {
    font-size: var(--fs-sm);
    color: var(--color-text-muted)
}

.info__price-old s {
    text-decoration: none;
    color: var(--color-text-muted);
    position: relative;
    display: inline-block
}

.info__price-old s::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 2px;
    background: #2073c8;
    transform: rotate(-8deg)
}

.info__description {
    margin-top: 10px;
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: var(--lh-relaxed)
}

.info__description p {
    margin-bottom: 4px
}

.info__description p:last-child {
    margin-bottom: 0
}

.info__product {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: var(--gap-medium);
    margin: 0 auto
}

.info__bottle-wrap {
    position: relative;
    flex-shrink: 0;
    margin-left: 50px
}

.info__purity-badge {
    position: absolute;
    top: 10%;
    left: -50%;
    width: 160px;
    height: 160px;
    background: url(/static/retail/img/svg/purity-badge.svg) no-repeat center/contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2
}

.info__purity-label {
    font-size: var(--fs-md);
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px
}

.info__purity-value {
    font-size: 40px;
    color: var(--color-white);
    font-weight: 900;
    line-height: 1
}

.info__bottle {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    position: relative;
    z-index: 1
}

.info__cta {
    padding: 14px 24px;
    background: var(--color-cyan-accent);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    line-height: var(--lh-normal);
    transition: transform .2s, box-shadow .2s;
    flex-shrink: 0;
    align-self: flex-end
}

.info__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 196, 204, .3)
}

.info__properties {
    display: flex;
    align-items: center;
    gap: var(--gap-medium)
}

.info__properties-badge {
    background: var(--color-yellow);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    padding: 0 20px
}

.info__properties-title {
    color: var(--color-text);
    font-size: var(--fs-lg);
    font-weight: 700;
    padding: 24px 10px 24px 0;
    line-height: var(--lh-normal);
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center
}

.info__properties-arrow {
    width: 44px;
    min-height: 69px;
    background: url(/static/retail/img/svg/arrow.svg) no-repeat center/contain;
    align-self: center
}

.info__properties-text {
    flex: 1
}

.info__properties-text p {
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: var(--lh-relaxed)
}

.delivery {
    padding: var(--section-padding-v) var(--section-padding-h);
    max-width: var(--container-max);
    margin: 0 auto
}

.delivery__main {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-large);
    margin-bottom: 50px
}

.delivery__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium);
    align-items: flex-start
}

.delivery__heading {
    display: inline-block;
    background: var(--color-blue-accent);
    color: var(--color-white);
    font-size: var(--fs-3xl);
    font-weight: 700;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    margin-bottom: 0
}

.delivery__text {
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: var(--lh-relaxed)
}

.delivery__image {
    flex-shrink: 0;
    width: 45%;
    max-width: 500px
}

.delivery__van {
    width: 100%;
    height: auto;
    display: block
}

.delivery__payment {
    margin-top: var(--gap-large)
}

.delivery__payment-header {
    margin-bottom: var(--gap-medium)
}

.delivery__payment-methods {
    display: flex;
    gap: var(--gap-large)
}

.delivery__payment-method {
    flex: 1
}

.delivery__payment-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px
}

.delivery__payment-text {
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: var(--lh-relaxed)
}

.delivery__cards {
    margin-top: var(--gap-small);
    height: 40px;
    width: auto
}

.article {
    padding: var(--section-padding-v) var(--section-padding-h)
}

.article__container {
    max-width: var(--container-article);
    margin: 0 auto
}

.article__container p, .article__container h3 {
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: var(--lh-relaxed);
    margin-bottom: 16px
}

.article__container h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 16px
}

.article__container p strong {
    color: var(--color-text)
}

.advantages {
    padding: var(--section-padding-v) var(--section-padding-h);
    max-width: var(--container-max);
    margin: 0 auto;
    text-align: center
}

.advantages__title {
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 50px;
    text-transform: uppercase;
    line-height: var(--lh-tight)
}

.advantages__list {
    display: flex;
    gap: var(--gap-large)
}

.advantages__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center
}

.advantages__icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: var(--gap-medium)
}

.advantages__item-wrap {
    width: 100%;
    max-width: 300px
}

.advantages__item-title {
    display: inline-block;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-blue-accent);
    margin-bottom: 16px;
    text-transform: uppercase;
    line-height: var(--lh-tight);
    text-align: left
}

.advantages__item-text {
    font-size: var(--fs-sm);
    color: var(--color-text);
    line-height: var(--lh-relaxed);
    text-align: left
}

.form {
    background: var(--color-text);
    color: var(--color-white);
    padding: var(--section-padding-v) var(--section-padding-h);
    text-align: center
}

.form__container {
    max-width: var(--container-form);
    margin: 0 auto
}

.form__title {
    font-size: var(--fs-4xl);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.form__subtitle {
    font-size: var(--fs-md);
    color: var(--color-white);
    margin-bottom: var(--gap-large);
    opacity: .8
}

.form__form {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.form__input {
    display: block;
    width: 100%;
    padding: 18px 20px;
    background: var(--color-input-bg);
    border: none;
    border-radius: 0;
    font-size: var(--fs-base);
    color: var(--color-text)
}

.form__input::placeholder {
    color: #555
}

.form__input--phone {
    padding-left: 48px
}

.form__input-wrap {
    position: relative;
    display: flex;
    align-items: center
}

.form__flag {
    position: absolute;
    left: 16px;
    width: 24px;
    height: 16px;
    object-fit: contain;
    z-index: 1
}

.form__product-select {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small);
    margin-top: 8px
}

.form__delivery-title {
    font-size: var(--fs-md);
    color: var(--color-white);
    text-align: left;
    margin: 8px 0 var(--gap-small)
}

.form__delivery-select {
    display: flex;
    flex-direction: column;
    gap: var(--gap-small)
}

.form__radio {
    display: flex;
    align-items: center;
    gap: var(--gap-small);
    cursor: pointer;
    text-align: left
}

.form__radio input[type=radio] {
    display: none
}

.form__radio input[type=radio]:checked ~ .form__radio-mark {
    background: var(--color-cyan-accent);
    position: relative
}

.form__radio input[type=radio]:checked ~ .form__radio-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: var(--color-text);
    border-radius: 2px
}

.form__radio-mark {
    width: 28px;
    height: 28px;
    background: var(--color-input-bg);
    flex-shrink: 0;
    transition: background .2s
}

.form__radio-text {
    font-size: var(--fs-base);
    color: var(--color-white);
    line-height: var(--lh-normal)
}

.form__button {
    display: inline-block;
    padding: 18px 60px;
    background: var(--color-cyan-accent);
    color: var(--color-text);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--fs-lg);
    font-weight: 700;
    cursor: pointer;
    margin-top: var(--gap-medium);
    transition: background .2s, transform .2s;
    align-self: center
}

.form__button:hover {
    background: var(--color-cyan-hover);
    transform: translateY(-2px)
}

.advantages-section {
    padding: var(--section-padding-v) 80px
}

.advantages-section__container {
    max-width: var(--container-article);
    margin: 0 auto
}

.advantages-section__container h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--gap-medium)
}

.advantages-section__container p {
    font-size: var(--fs-base);
    color: var(--color-text);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--gap-small)
}

.advantages-section__container p:last-child {
    margin-bottom: 0
}

.footer {
    padding: 30px var(--section-padding-h);
    border-top: 1px solid var(--color-border)
}

.footer__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--gap-large)
}

.footer__brand {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0
}

.footer__logo {
    height: 40px;
    width: auto
}

.footer__brand-text {
    font-size: var(--fs-xs);
    color: var(--color-text);
    line-height: var(--lh-normal);
    max-width: 200px
}

.footer__nav {
    display: flex;
    gap: var(--gap-large);
    flex: 1
}

.footer__nav-title {
    font-size: var(--fs-sm);
    color: var(--color-text);
    font-weight: 300
}

.footer__nav-column-title {
    font-size: var(--fs-sm);
    color: var(--color-text);
    display: block;
    margin-bottom: 10px
}

.footer__nav-column ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.footer__nav-column a {
    font-size: var(--fs-sm);
    color: var(--color-text);
    font-weight: 600
}

.footer__contacts {
    text-align: right;
    flex-shrink: 0
}

.footer__phone {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--color-text);
    display: block;
    margin-bottom: 4px
}

.footer__email {
    font-size: var(--fs-xs);
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 10px
}

.footer__socials {
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.footer__social-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .3s ease
}

.footer__social-icon:hover {
    transform: scale(1.1)
}

.footer__social-icon img {
    width: 100%
}

@media (max-width: 1200px) {
    .header {
        padding: 15px 20px
    }

    .header__nav {
        gap: 30px
    }

    .hero {
        padding: 40px 20px 60px
    }

    .hero__item {
        min-height: 380px
    }

    .hero__content {
        left: 20%;
        bottom: 18%
    }

    .hero__barrel-wrap {
        width: 160px;
        right: 70px
    }

    .info {
        padding: var(--section-padding-v-md) var(--section-padding-h-md)
    }

    .info__title {
        font-size: var(--fs-2xl)
    }

    .info__bottle {
        max-width: 170px
    }

    .info__purity-badge {
        width: 100px;
        height: 100px;
        top: -15px
    }

    .info__purity-value {
        font-size: 26px
    }

    .info__purity-label {
        font-size: 12px
    }

    .info__properties {
        align-items: stretch
    }

    .info__properties-title {
        font-size: var(--fs-md);
        padding: 20px 16px
    }

    .info__properties-text {
        font-size: var(--fs-sm)
    }

    .delivery {
        padding: var(--section-padding-v-md) var(--section-padding-h-md)
    }

    .delivery__main {
        gap: 30px
    }

    .delivery__heading {
        font-size: var(--fs-2xl)
    }

    .delivery__image {
        max-width: 400px
    }

    .advantages {
        padding: var(--section-padding-v-md) var(--section-padding-h-md)
    }

    .advantages__title {
        font-size: var(--fs-3xl);
        margin-bottom: var(--gap-large)
    }

    .advantages__list {
        gap: 30px
    }

    .article {
        padding: var(--section-padding-v-md) var(--section-padding-h-md)
    }

    .article__container h3 {
        font-size: var(--fs-lg)
    }

    .article__container p {
        font-size: var(--fs-sm)
    }

    .footer {
        padding: var(--section-padding-v-md) var(--section-padding-h-md) 30px
    }

    .footer__top-title {
        font-size: var(--fs-lg)
    }

    .footer__nav {
        gap: 30px
    }

    .advantages-section {
        padding: var(--section-padding-v-md) var(--section-padding-h-md)
    }

    .advantages-section__container h3 {
        font-size: var(--fs-lg)
    }

    .advantages-section__container p {
        font-size: var(--fs-sm)
    }
}

@media (max-width: 992px) {
    .header__container {
        flex-wrap: wrap;
        gap: 15px
    }

    .header__brand {
        flex: 1
    }

    .header__nav {
        order: 3;
        width: 100%;
        gap: var(--gap-medium);
        justify-content: center
    }

    .header__contacts {
        flex-shrink: 0
    }

    .hero__container {
        flex-direction: column;
        align-items: center
    }

    .hero__item {
        width: 100%;
        max-width: 500px;
        min-height: 350px
    }

    .hero__content {
        left: 17%;
        bottom: 15%
    }

    .info {
        padding: 40px 20px
    }

    .info__title {
        font-size: var(--fs-xl)
    }

    .info__main {
        flex-direction: column;
        align-items: center;
        gap: 30px
    }

    .info__product {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 16px;
        max-width: none
    }

    .info__properties {
        flex-direction: column
    }

    .info__properties-badge {
        flex-direction: column;
        align-items: center;
        padding: 0 20px
    }

    .info__properties-title {
        padding: 20px 0;
        text-align: center;
        white-space: normal
    }

    .info__properties-arrow {
        width: 44px;
        min-height: 44px;
        transform: rotate(90deg)
    }

    .info__properties-text {
        padding-bottom: 20px
    }

    .delivery {
        padding: 40px 20px
    }

    .delivery__main {
        flex-direction: column
    }

    .delivery__image {
        width: 100%;
        max-width: 100%;
        order: -1
    }

    .delivery__payment-methods {
        gap: 30px
    }

    .advantages {
        padding: 40px 20px
    }

    .advantages__title {
        font-size: var(--fs-2xl);
        margin-bottom: 30px
    }

    .advantages__list {
        gap: 24px
    }

    .advantages__icon {
        width: 64px;
        height: 64px
    }

    .advantages__item-content {
        max-width: 280px
    }

    .advantages__item-title {
        font-size: var(--fs-lg)
    }

    .advantages__item-text {
        font-size: var(--fs-xs)
    }
}

@media (max-width: 768px) {
    .header {
        padding: 15px
    }

    .header__tagline {
        display: none
    }

    .header__nav {
        flex-direction: column;
        align-items: center;
        gap: 15px
    }

    .header__contacts {
        text-align: center
    }

    .header__socials {
        justify-content: center
    }

    .hero {
        padding: 30px var(--section-padding-h-sm) 50px
    }

    .hero__item {
        min-height: 300px
    }

    .hero__content {
        left: 25%;
        bottom: 15%
    }

    .hero__barrel-wrap {
        width: 130px;
        right: 10px;
        bottom: -10px
    }

    .hero__subtitle {
        font-size: var(--fs-md)
    }

    .hero__button {
        padding: 10px 16px;
        font-size: 12px
    }

    .hero__barrel-label-percent {
        font-size: 18px
    }

    .hero__barrel-label-text {
        font-size: 11px
    }

    .info, .delivery, .advantages, .article, .advantages-section {
        padding: var(--section-padding-v-sm) var(--section-padding-h-sm)
    }

    .article__container h3 {
        font-size: var(--fs-md)
    }

    .article__container p {
        font-size: var(--fs-xs)
    }

    .advantages-section__container h3 {
        font-size: var(--fs-md)
    }

    .advantages-section__container p {
        font-size: var(--fs-xs)
    }

    .footer__container {
        flex-direction: column;
        gap: 30px
    }

    .footer__nav {
        flex-direction: column;
        gap: var(--gap-medium)
    }

    .footer__contacts {
        text-align: left
    }

    .footer__socials {
        justify-content: flex-start
    }

    .info__title {
        font-size: 18px
    }

    .info__price-brand {
        font-size: 16px
    }

    .info__price-current {
        font-size: 14px
    }

    .info__description {
        font-size: var(--fs-xs)
    }

    .info__properties-title {
        font-size: var(--fs-sm);
        padding: 16px
    }

    .info__properties-text {
        padding: 0 16px 16px
    }

    .info__properties-text p {
        font-size: var(--fs-xs)
    }

    .delivery__heading {
        font-size: var(--fs-xl);
        padding: 8px 18px
    }

    .delivery__text {
        font-size: var(--fs-sm)
    }

    .delivery__payment-methods {
        flex-direction: column;
        gap: 24px
    }

    .advantages {
        padding: var(--section-padding-v-sm) var(--section-padding-h-sm)
    }

    .advantages__title {
        font-size: var(--fs-xl);
        margin-bottom: 24px
    }

    .advantages__list {
        flex-direction: column;
        gap: 30px
    }

    .advantages__item-content {
        max-width: 100%
    }

    .form {
        padding: var(--section-padding-v-sm) var(--section-padding-h-sm)
    }

    .form__title {
        font-size: var(--fs-2xl)
    }

    .form__subtitle {
        font-size: var(--fs-sm);
        margin-bottom: 24px
    }

    .form__button {
        padding: 16px 40px;
        font-size: var(--fs-md)
    }
}

@media (max-width: 480px) {
    .header__logo {
        font-size: 22px
    }

    .header__phone {
        font-size: var(--fs-sm)
    }

    .header__email {
        font-size: 11px
    }

    .header__social-icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        cursor: pointer;
        transition: transform .3s ease
    }

    .header__social-icon:hover {
        transform: scale(1.1)
    }

    .header__social-icon img {
        width: 100%
    }

    .hero__item {
        min-height: 260px
    }

    .hero__content {
        left: 5%;
        bottom: 22%
    }

    .hero__barrel-wrap {
        width: 100px;
        right: 5px;
        bottom: -5px
    }

    .hero__subtitle {
        font-size: var(--fs-sm)
    }

    .hero__button {
        padding: 8px 12px;
        font-size: 11px
    }

    .hero__barrel-label {
        padding: 8px 5px
    }

    .hero__barrel-label-percent {
        font-size: 14px
    }

    .hero__barrel-label-brand {
        font-size: 8px
    }

    .hero__barrel-label-text {
        font-size: 9px
    }

    .info__title {
        font-size: var(--fs-md)
    }

    .info__main {
        gap: var(--gap-medium);
        flex-direction: column;
        align-items: center
    }

    .info__product {
        flex-direction: column;
        align-items: center;
        max-width: 200px;
        margin: 0 auto
    }

    .info__bottle {
        max-width: 140px
    }

    .info__purity-badge {
        width: 100px;
        height: 100px;
        top: -10px;
        left: -10px
    }

    .info__purity-value {
        font-size: 20px
    }

    .info__purity-label {
        font-size: 10px
    }

    .info__cta {
        padding: 10px 16px;
        font-size: 12px
    }

    .advantages__title {
        font-size: var(--fs-lg)
    }

    .advantages__icon {
        width: 56px;
        height: 56px
    }

    .advantages__item-title {
        font-size: var(--fs-md)
    }

    .advantages__item-content {
        max-width: 100%
    }

    .form__title {
        font-size: var(--fs-xl)
    }

    .form__subtitle {
        font-size: var(--fs-xs)
    }

    .form__input {
        padding: 14px 16px;
        font-size: var(--fs-sm)
    }

    .form__input--phone {
        padding-left: 40px
    }

    .form__flag {
        width: 20px;
        height: 14px;
        left: 12px
    }

    .form__radio-mark {
        width: 24px;
        height: 24px
    }

    .form__radio-text {
        font-size: var(--fs-xs)
    }

    .form__button {
        padding: 14px 30px;
        font-size: var(--fs-md)
    }
}