/* Fonts
	========================================================================== */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Base / Reset
	========================================================================== */
:root {
    --blue: #32c6f4;
    --dark: #151515;
    --container: 1760px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    color: #fff;
    background: #111;
    font-family: 'Montserrat', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

body.cart-open {
    overflow: hidden;
}

body.auth-modal-open {
    overflow: hidden;
}

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

button {
    font: inherit;
}

/* Square Arrow
	========================================================================== */
.square-arrow {
    --arrow-size: 36px;
    --arrow-thickness: 6px;
    --arrow-shaft: 40px;
    --arrow-top: -1px;
    --arrow-right: -2px;
    position: relative;
    display: block;
    width: var(--arrow-size);
    height: var(--arrow-size);
    flex: 0 0 var(--arrow-size);
    border-top: var(--arrow-thickness) solid currentColor;
    border-right: var(--arrow-thickness) solid currentColor;
}

.square-arrow::after {
    position: absolute;
    top: var(--arrow-top);
    right: var(--arrow-right);
    width: var(--arrow-shaft);
    height: var(--arrow-thickness);
    background: currentColor;
    content: '';
    transform: rotate(-45deg);
    transform-origin: right center;
}

/* Container
	========================================================================== */
.container {
    width: min(calc(100% - 160px), var(--container));
    margin-inline: auto;
}

@media (max-width: 1440px) {
    .container {
        width: calc(100% - 100px);
    }
}

@media (max-width: 1200px) {
    .container {
        width: calc(100% - 60px);
    }
}

/* Logo
	========================================================================== */
.logo {
    position: relative;
    z-index: 3;
    display: block;
    width: 280px;
}

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

/* Header
	========================================================================== */
.header {
    position: absolute;
    z-index: 20;
    inset: 0 0 auto;
    height: 162px;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 38px;
}

.header__controls {
    position: relative;
    z-index: 31;
    display: flex;
    align-items: center;
    width: 310px;
    height: 87px;
    padding: 0 28px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 50px;
    background: rgba(255, 255, 255, .07);
}

.icon-button,
.menu-toggle {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: #fff;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.icon-button svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-open .icon-button svg {
    color: #fff;
}

.icon-button:hover svg {
    stroke: var(--blue);
}

.icon-button--cart {
    position: relative;
}

.cart-dot {
    position: absolute;
    top: 7px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff4025;
}

/* Minicart
	========================================================================== */
.minicart {
    position: fixed;
    z-index: 60;
    inset: 0;
    visibility: hidden;
    color: #171717;
    opacity: 0;
    pointer-events: none;
    transition: visibility .35s ease, opacity .35s ease;
}

.minicart.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.minicart__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .62);
    cursor: default;
}

.minicart__panel {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    width: min(700px, 100vw);
    height: 100dvh;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
    box-shadow: -20px 0 60px rgba(0, 0, 0, .22);
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.22, .8, .28, 1);
}

.minicart.is-open .minicart__panel {
    transform: translateX(0);
}

.minicart__header {
    position: relative;
    display: grid;
    min-height: 104px;
    flex: 0 0 auto;
    place-items: center;
    border-bottom: 1px solid #dedede;
}

.minicart__header h2 {
    margin: 0;
    font-size: 29px;
    font-weight: 800;
    text-transform: uppercase;
}

.minicart__close {
    position: absolute;
    top: 25px;
    right: 34px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.minicart__close::before,
.minicart__close::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 3px;
    background: #171717;
    content: '';
}

.minicart__close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.minicart__close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.minicart__delivery {
    min-height: 39px;
    margin: 0;
    padding: 10px 24px;
    color: #fff;
    background: var(--blue);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.minicart__subtitle {
    min-height: 68px;
    margin: 0;
    padding: 24px 30px 20px;
    border-bottom: 1px solid #dedede;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.minicart__items {
    border-bottom: 1px solid #d7d7d7;
}

.minicart__item {
    position: relative;
    display: grid;
    min-height: 190px;
    grid-template-columns: 112px 1fr 115px;
    align-items: center;
    gap: 18px;
    padding: 18px 30px;
}

.minicart__product-image,
.minicart__suggestion-image {
    display: grid;
    overflow: hidden;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(140deg, #171717 52%, var(--blue));
}

.minicart__product-image {
    width: 102px;
    height: 145px;
}

.minicart__product-image img,
.minicart__suggestion-image img {
    display: block;
    width: auto;
    margin-top: 3px;
}

.minicart__product-image img {
    height: 160px;
}

.minicart__suggestion-image img {
    height: 154px;
}

.minicart__product-copy h4,
.minicart__suggestion h4 {
    margin: 0 0 3px;
    font-size: 16px;
    font-weight: 800;
}

.minicart__product-copy p,
.minicart__suggestion p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.minicart__quantity {
    display: grid;
    width: 106px;
    height: 37px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 20px;
    overflow: hidden;
    border: 1px solid #9c9c9c;
    border-radius: 19px;
}

.minicart__quantity button,
.minicart__quantity output {
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    color: #171717;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
}

.minicart__quantity button {
    cursor: pointer;
}

.minicart__quantity output {
    border-right: 1px solid #b7b7b7;
    border-left: 1px solid #b7b7b7;
}

.minicart__remove {
    position: absolute;
    top: 54px;
    right: 38px;
    width: 28px;
    height: 28px;
    padding: 4px;
    border: 0;
    color: #aaa;
    background: transparent;
    cursor: pointer;
}

.minicart__remove svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.minicart__price {
    align-self: end;
    justify-self: end;
    margin: 0 0 13px;
    font-size: 14px;
    font-weight: 700;
}

.minicart__suggestions h3 {
    min-height: 66px;
    margin: 0;
    padding: 25px 30px 18px;
    border-bottom: 1px solid #dedede;
    font-size: 16px;
    font-weight: 800;
    text-align: center;
}

.minicart__suggestion {
    display: grid;
    min-height: 174px;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 16px 30px;
    border-bottom: 1px solid #dedede;
}

.minicart__suggestion-image {
    width: 94px;
    height: 140px;
}

.minicart__suggestion strong {
    display: block;
    margin-top: 22px;
    font-size: 14px;
}

.minicart__suggestion > button {
    display: flex;
    min-width: 154px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 10px 20px;
    border: 0;
    border-radius: 25px;
    color: #fff;
    background: #171717;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.minicart__suggestion > button span {
    font-size: 25px;
    font-weight: 400;
    line-height: .7;
}

.minicart__footer {
    margin-top: auto;
    padding: 25px 30px 35px;
}

.minicart__footer p {
    display: flex;
    justify-content: space-between;
    margin: 0 0 22px;
    font-size: 15px;
    font-weight: 800;
}

.minicart__footer a {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 28px;
    color: #fff;
    background: #171717;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
}

.minicart__checkout-arrow {
    --arrow-size: 15px;
    --arrow-thickness: 3px;
    --arrow-shaft: 17px;
    --arrow-top: -2px;
    --arrow-right: -1px;
}

.header__divider {
    width: 1px;
    height: 43px;
    margin: 0 16px 0 7px;
    background: rgba(255, 255, 255, .85);
}

/* Burger Menu
	========================================================================== */
.menu-toggle {
    position: relative;
    margin-left: auto;
    cursor: pointer;
}

.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 43px;
    height: 5px;
    border-radius: 5px;
    background: #fff;
    content: '';
    transition: width .25s ease, opacity .18s ease, transform .25s ease;
    
}

.menu-toggle:not(.is-active):hover::before,
.menu-toggle:not(.is-active):hover::after,
.menu-toggle:not(.is-active):hover span {
    background-color: var(--blue);
}

.menu-toggle span {
    transform: translate(-50%, -50%);
}

.menu-toggle::before {
    transform: translate(-50%, calc(-50% - 14px));
}

.menu-toggle::after {
    transform: translate(-50%, calc(-50% + 14px));
}

.menu-toggle.is-active span {
    opacity: 0;
}

.menu-toggle.is-active::before,
.menu-toggle.is-active::after {
    width: 46px;
    height: 4px;
}

.menu-toggle.is-active::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle.is-active::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Fullscreen Menu Panel
	========================================================================== */
.menu-panel {
    position: fixed;
    z-index: 30;
    inset: 0;
    display: grid;
    place-items: center;
    visibility: hidden;
    opacity: 0;
    background: radial-gradient(circle at 55% 35%, #292929, #151515 65%);
    transition: opacity .3s ease, visibility .3s ease;
}

.menu-panel::after {
    position: absolute;
    inset: auto 0 -55px;
    overflow: hidden;
    color: rgba(0, 0, 0, .12);
    font-size: clamp(90px, 14vw, 270px);
    font-weight: 900;
    line-height: .8;
    text-align: center;
    content: 'HYDROPHOB';
}

.menu-open .menu-panel {
    visibility: visible;
    opacity: 1;
}

.menu-panel__logo {
    position: absolute;
    z-index: 1;
    top: 65px;
    left: 50%;
    display: block;
    width: 200px;
    transform: translateX(-50%);
}

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

.menu-panel__nav {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 34px 95px;
    margin-top: 30px;
}

.menu-panel__nav a {
    position: relative;
    font-size: clamp(30px, 2.8vw, 54px);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
.menu-panel__nav a:hover,
.menu-panel__nav a.is-current {
    color: var(--blue);
}
.menu-panel__nav a:not(.is-current):hover::before {
    position: absolute;
    top: calc(50% - 18px);
    left: -52px;
    width: 36px;
    height: 36px;
    var(--blue);
    border-top: 6px solid currentColor;
    border-right: 6px solid currentColor;
    content: '';
}

.menu-panel__nav a:not(.is-current):hover::after {
    position: absolute;
    top: calc(50% - 19px);
    left: -58px;
    width: 40px;
    height: 6px;
    color: var(--blue);
    background: currentColor;
    content: '';
    transform: rotate(-45deg);
    transform-origin: right center;
}

.menu-panel__copy,
.menu-panel__socials {
    position: absolute;
    z-index: 1;
    bottom: 72px;
    margin: 0;
    color: rgba(255, 255, 255, .45);
    font-size: 14px;
}

.menu-panel__copy {
    left: 50%;
    transform: translateX(-50%);
}

.menu-panel__socials {
    right: 80px;
    display: flex;
    gap: 14px;
}

.menu-panel__socials a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
}

/* Hero
	========================================================================== */
.hero {
    position: relative;
    overflow: hidden;
    background: #090909 url('../img/hero-slide1-poster.webp') center center / cover no-repeat;
}

.hero::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    content: '';
    pointer-events: none;
}

.hero__slider {
    position: absolute;
    z-index: 0;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
}

.hero__slide.is-active {
    opacity: 1;
}

.hero__slide picture {
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero__video {
    opacity: 1;
}

.hero__volume {
    position: absolute;
    z-index: 3;
    top: 150px;
    right: 80px;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.hero__volume:not([hidden]) {
    display: flex;
}

.hero__navigation {
    position: absolute;
    z-index: 3;
    top: 220px;
    right: 80px;
    display: flex;
    align-items: center;
    gap: 13px;
    color: #fff;
}

.hero__navigation button {
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.hero__prev,
.hero__next {
    font-size: 34px;
}

/* Уніфікований вигляд play/pause/Scroll та гучності — однаковий у hero й reviews */
.hero__action,
.reviews__action {
    display: grid;
    place-items: center;
    width: 83px;
    height: 83px;
    padding: 0;
    border: 2px solid #fff!important;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

[data-hero-volume-toggle],
[data-volume-toggle] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

[data-hero-volume-toggle] svg,
[data-volume-toggle] svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

[data-hero-volume-toggle] .volume-speaker,
[data-volume-toggle] .volume-speaker {
    fill: currentColor;
    stroke: none;
}

[data-hero-volume-toggle] .volume-waves,
[data-volume-toggle] .volume-waves {
    opacity: 0;
}

[data-hero-volume-toggle].is-audible .volume-waves,
[data-volume-toggle].is-audible .volume-waves {
    opacity: 1;
}

[data-hero-volume-toggle].is-audible .volume-slash,
[data-volume-toggle].is-audible .volume-slash {
    opacity: 0;
}

[data-hero-volume],
[data-volume-range] {
    width: 103px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    outline: none;
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue) var(--volume-progress, 0%), rgba(255, 255, 255, .55) var(--volume-progress, 0%));
    appearance: none;
    cursor: pointer;
}

[data-hero-volume]::-webkit-slider-thumb,
[data-volume-range]::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--blue);
    appearance: none;
}

[data-hero-volume]::-moz-range-thumb,
[data-volume-range]::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--blue);
}

.hero__inner {
    position: relative;
    z-index: 2;
    min-height: 100vh;
}

.hero__content {
    position: absolute;
    bottom: 60px;
    left: 0;
}

.hero__title {
    margin: 0;
    font-size: clamp(78px, 9.71vw, 186px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: .78;
    text-transform: uppercase;
}

.hero__title span {
    display: block;
    white-space: nowrap;
}

.hero__title strong {
    color: var(--blue);
    font-weight: inherit;
}

.hero__text {
    margin: 31px 0 0 1px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.hero__seal {
    position: absolute;
    right: 205px;
    bottom: 126px;
    display: grid;
    place-items: center;
    width: 104px;
    height: 104px;
    border-radius: 50%;
}

.hero__seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: seal-spin 14s linear infinite;
}

.hero__seal text {
    fill: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.hero__seal i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide {
        transition: none;
    }
}

/* About / Home
	========================================================================== */
.about {
    color: #171717;
    background: #fff;
}

.about__inner {
    position: relative;
    display: grid;
    grid-template-columns: 30% 1fr;
    padding-top: 150px;
    padding-bottom: 60px;
    border-bottom: 1px solid #171717;
}

.section-label {
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.about__content {
    position: relative;
    z-index: 2;
    max-width: 870px;
}

.about__title {
    margin: 0;
    font-size: 31px;
    font-weight: 400;
    line-height: 1.1;
}

.about__lead {
    margin: 28px 0 0;
    font-size: 16px;
    line-height: 1.25;
}

.about__features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 59px;
}

.about__features article {
    position: relative;
}

.about__features span {
    position: absolute;
    z-index: -1;
    top: -48px;
    left: 0;
    color: rgba(0, 0, 0, .045);
    font-size: 118px;
    font-weight: 700;
    line-height: 1;
}

.about__features h3 {
    margin: 0 0 16px;
    color: var(--blue);
    font-size: 16px;
}

.about__features p {
    margin: 0;
    color: #777;
    font-size: 16px;
    line-height: 1.25;
}

/* Анімація появи при скролі (як .hydro-fade у hydrophob-landing): цифра/текст спливають, заголовок друкується */
.scroll-fade {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s ease, transform .9s ease;
}

.scroll-fade-visible {
    opacity: 1;
    transform: translateY(0);
}

.about__features span.scroll-fade {
    transform: translateY(70px);
}

.about__features p.scroll-fade {
    margin-top: 70px;
}

.hero__seal.scroll-fade {
    transform: scale(.4);
}

.hero__seal.scroll-fade-visible {
    transform: scale(1);
}

.is-typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: .9em;
    margin-left: 2px;
    background: currentColor;
    vertical-align: baseline;
    animation: typing-caret-blink .7s steps(1) infinite;
}

@keyframes typing-caret-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.about__button {
    grid-column: 2/3;
    position: relative;
    z-index: 3;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 50px;
    gap: 14px;
    border-radius: 28px;
    background: #171717;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.about__arrow {
    --arrow-size: 15px;
    --arrow-thickness: 3px;
    --arrow-shaft: 17px;
    --arrow-top: -2px;
    --arrow-right: -1px;
}

.about__wordmark {
    position: absolute;
    right: 15px;
    bottom: -22px;
    color: rgba(0, 0, 0, .025);
    font-size: 170px;
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: 1;
    white-space: nowrap;
}

/* Catalog / Home Slider
	========================================================================== */
.catalog {
    overflow: hidden;
    color: #171717;
    background: #fff;
}

.catalog__inner {
    position: relative;
    min-height: 930px;
}

.catalog__tabs {
    display: flex;
    justify-content: flex-start;
    gap: 12px 25px;
    flex-wrap: wrap;
    padding-top: 35px;
}

.catalog__tabs button {
    padding: 0;
    border: 0;
    color: #171717;
    background: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}
.catalog__tabs button:hover,
.catalog__tabs button.is-active {
    color: var(--blue);
}

.catalog__stage {
    position: relative;
    padding-top: 180px;
}

.catalog__slider {
    width: 100%;
    overflow: visible;
    opacity: 0;
    transition: opacity .2s ease;
}

.catalog__slider.is-ready {
    opacity: 1;
}

.product-card {
    position: relative;
    flex: 0 0 483px;
    width: 483px !important;
    height: 563px;
    border-radius: 36px;
    color: #fff;
    background: #171717;
    opacity: .62;
    transform: translateY(26px);
    transition: opacity .45s ease, transform .45s ease, filter .45s ease;
}

.product-card::before {
    position: absolute;
    inset: 32% -6% -6% 36%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(38, 198, 244, .95), rgba(38, 198, 244, .2) 42%, transparent 70%);
    filter: blur(10px);
    content: '';
}

.product-card img {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100%;
    height: 120%;
    object-position: top;
    object-fit: contain;
}

.product-card.swiper-slide-active {
    z-index: 3;
    opacity: 1;
    transform: translateY(0);
}

.product-card:not(.swiper-slide-active) img {
    filter: saturate(.35);
}

.product-card:not(.swiper-slide-active) .product-card__arrow {
    opacity: 0;
}

.product-card__arrow {
    position: absolute;
    z-index: 4;
    top: 31px;
    right: 31px;
    width: 74px;
    height: 74px;
    border-top: 14px solid var(--blue);
    border-right: 14px solid var(--blue);
}

.product-card__arrow::after {
    position: absolute;
    top: -6px;
    right: -4px;
    width: 81px;
    height: 14px;
    background: var(--blue);
    content: '';
    transform: rotate(-45deg);
    transform-origin: right center;
}

.product-card__copy {
    position: absolute;
    z-index: 4;
    right: 23px;
    bottom: 27px;
    left: 23px;
}

.product-card__copy small {
    font-size: 12px;
}

.product-card__copy h3 {
    margin: 8px 0 37px;
    font-size: 18px;
}

.product-card__copy p {
    max-width: 430px;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

.product-card.swiper-slide-prev {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 55%, #000 100%);
}

.product-card.swiper-slide-next {
    -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 55%, #000 100%);
    mask-image: linear-gradient(to left, transparent 0%, #000 55%, #000 100%);
}

.catalog__control {
    position: absolute;
    z-index: 5;
    top: 248px;
    left: calc(50% + 320px);
    display: flex;
    align-items: center;
    gap: 13px;
}

.catalog__control button {
    padding: 0;
    border: 0;
    background: none;
    color: #171717;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s;
}

.catalog__control button:hover {
    color: var(--blue);
}

.catalog__control span {
    display: grid;
    place-items: center;
    width: 83px;
    height: 83px;
    border: 3px solid #171717;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 800;
    transition: border-color .2s, color .2s;
}

.catalog__control span:hover {
    border-color: var(--blue);
    color: var(--blue);
}

@keyframes seal-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 1280px) {
    .catalog__control {
        left: calc(50% + 275px);
    }
}

/* Reviews
	========================================================================== */
.reviews {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #101010;
}

.reviews__slider {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
}

.reviews__slider.is-ready {
    opacity: 1;
}

.reviews__slide {
    position: relative;
    height: 935px;
    overflow: hidden;
    background: #111;
}

.reviews__slide::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 10, 13, .72), rgba(4, 10, 13, .12) 48%, rgba(4, 10, 13, .55)), linear-gradient(0deg, rgba(3, 8, 11, .88), transparent 52%);
    content: '';
    pointer-events: none;
}

.reviews__media {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviews__caption {
    position: absolute;
    z-index: 2;
    bottom: 65px;
    left: 50px;
    max-width: 33%;
    padding-right: 20px;
}

.reviews__counter {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
}

.reviews__counter strong {
    font-size: 16px;
}

.reviews__caption h2 {
    margin: 0;
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
}

.reviews__caption > p:last-child {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.reviews__overlay {
    position: relative;
    z-index: 4;
    min-height: 935px;
    pointer-events: none;
}

.reviews__overlay button,
.reviews__overlay input {
    pointer-events: auto;
}

.reviews__label {
    position: absolute;
    top: 159px;
    left: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.reviews__volume {
    position: absolute;
    top: 151px;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviews__navigation {
    position: absolute;
    top: 389px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.reviews__navigation button {
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.reviews__prev,
.reviews__next {
    font-size: 34px;
}

.reviews__filters {
    position: absolute;
    right: 0;
    bottom: 58px;
    display: flex;
    gap: 18px;
    width: 65%;
}

.reviews__filters button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 112px;
    align-items: center;
    overflow: hidden;
    padding: 20px 28px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 16px;
    color: #fff;
    background-color: rgba(8, 8, 8, .88);
    font-family: inherit;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: width .35s ease, color .25s ease, background-color .25s ease, border-color .25s ease;
}

.reviews__filters button::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, #090909 0%, #090909 48%, rgba(9, 9, 9, .12) 74%, rgba(9, 9, 9, .42) 100%);
    content: '';
    pointer-events: none;
    transition: opacity .25s ease;
}

.reviews__filters button.is-active {
    width: 420px;
    border-color: var(--blue);
    color: #07151a;
    background-color: var(--blue);
}

.reviews__filters button.is-active::after {
    opacity: 0;
}

.reviews__filter-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.reviews__filter-copy strong {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.05;
}

.reviews__filter-copy small {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.05;
    white-space: nowrap;
}

.reviews__filter-media {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56%;
    opacity: 1;
    transition: opacity .25s ease;
}

.reviews__filter-media img,
.reviews__filter-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.reviews__filters button.is-active .reviews__filter-media {
    opacity: 0;
}

.reviews__filter-arrow {
    --arrow-size: 36px;
    --arrow-thickness: 6px;
    --arrow-shaft: 40px;
    --arrow-top: -3px;
    --arrow-right: -2px;
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 18px;
    transition: transform .3s ease;
}

.reviews__filters button.is-active .reviews__filter-arrow {
    transform: rotate(90deg);
}

.reviews__wordmark {
    position: absolute;
    z-index: 3;
    right: 75px;
    bottom: -37px;
    color: rgba(255, 255, 255, .045);
    font-size: 175px;
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: 1;
    pointer-events: none;
}
@media (max-width: 1440px) {
    .reviews__caption h2 {
        font-size: 46px;
    }
}

@media (max-width: 1336px) {
    .reviews__caption h2 {
        font-size: 36px;
    }
}
@media (max-width: 1200px) {
    .reviews__caption {
        bottom: 200px;
    }

    .reviews__filters {
        width: 100%;
    }
}

/* FAQ
	========================================================================== */
.faq {
    color: #171717;
    background: #f7f7f7;
}

.faq__inner {
    padding-top: 120px;
    padding-bottom: 60px;
}

.faq__label {
    margin: 0 0 30px;
}

.faq__list {
    border-bottom: 1px solid rgba(23, 23, 23, .22);
}

.faq__item {
    border-top: 1px solid rgba(23, 23, 23, .22);
}

.faq__item:first-child {
    border-top: 0;
}

.faq__item h2 {
    margin: 0;
}

.faq__item h2 button {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 160px;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 0 22px 0 6px;
    border: 0;
    color: #171717;
    background: transparent;
    font-family: inherit;
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    text-align: left;
    cursor: pointer;
}

.faq__symbol {
    position: relative;
    display: block;
    width: 75px;
    height: 75px;
    flex: 0 0 75px;
}

.faq__symbol::before,
.faq__symbol::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75px;
    height: 10px;
    background: currentColor;
    content: '';
    transform: translate(-50%, -50%);
    transition: transform .3s ease;
}

.faq__symbol::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item.is-open .faq__symbol::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s ease, opacity .25s ease;
}

.faq__answer > div {
    overflow: hidden;
}

.faq__answer p {
    max-width: 870px;
    margin: 0 152px 63px auto;
    font-size: 16px;
    line-height: 1.25;
}

.faq__item.is-open .faq__answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq__note {
    margin: 25px 0 0 1px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.faq__note a {
    color: var(--blue);
    text-decoration: underline;
}

/* Footer
	========================================================================== */
.footer {
    position: relative;
    overflow: hidden;
    
    overflow: hidden;
    background: radial-gradient(circle at 55% 35%, #282828, #171717 68%);
}

.footer__inner {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 73px 0 228px;
}

.footer__tagline {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 26px 0 0 1px;
    max-width: 360px;
    font-size: 16px;
    line-height: 1.35;
}

.footer__tagline a {
    color: var(--blue);
    text-decoration: underline;
}

.footer__tagline p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: inherit;
}

.footer__bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
}

.footer__nav {
    display: flex;
    gap: 32px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.footer__nav a {
    min-width: max-content;
}

.footer__nav a,
.footer__credit a {
    transition: color .2s, transform .2s ease;
}

.footer__nav a:hover,
.footer__credit a:hover {
    color: var(--blue);
}
.footer__nav a:hover,
.footer__nav a.is-active {
    color: var(--blue);
}

.footer__nav a:not(.is-active):hover {
    transform: translateY(-7px);
}

.footer__nav a:not(.is-active):hover:after {
    content: '';
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 10px;
    position: absolute;
    z-index: 1;
}

.footer__copy,
.footer__credit {
    color: rgba(255, 255, 255, .56);
    font-size: 20px;
}

.footer__copy {
    margin: 69px 0 -8px;
}
.footer__copy * {
    font-size: inherit;
    line-height: inherit;
}

.footer__copy a {
    color: var(--blue);
    text-decoration: underline;
}

.footer__credit {
    display: none;
    margin: 0 0 -8px;
}

.footer__credit a {
    color: var(--blue);
    text-decoration: underline;
}

.footer__seal {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: end;
    width: 120px;
    height: 120px;
    margin-right: 178px;
    margin-bottom: -58px;
}

/* За Guarantee.psd: ink 133..1788 x, верх ink на footer_top+613; кегль як
   у .guarantee-features__wordmark (256px). */
.footer__wordmark {
    position: absolute;
    top: 578px;
    left: 50%;
    color: rgba(0, 0, 0, .13);
    font-size: 256px;
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: 1;
    transform: translateX(calc(-50% - 12px));
    white-space: nowrap;
}

/* Internal Pages / Shared
	========================================================================== */

.page--light-header .header__controls {
    border-color: rgba(23, 23, 23, .55);
    color: #171717;
    background: rgba(255, 255, 255, .5);
}

.page--light-header .icon-button,
.page--light-header .menu-toggle {
    color: #171717;
}

.page--light-header .header__divider,
.page--light-header .menu-toggle::before,
.page--light-header .menu-toggle::after,
.page--light-header .menu-toggle span {
    background: #171717;
}

.page--light-header .header__inner > .logo img {
    filter: brightness(0);
}

.page--light-header.menu-open .header__inner > .logo img {
    filter: none;
}

.page--light-header.menu-open .menu-toggle::before,
.page--light-header.menu-open .menu-toggle::after,
.page--light-header.menu-open .menu-toggle span {
    background: #fff;
}

.pill-link {
    display: inline-flex;
    min-width: 210px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 24px;
    border-radius: 28px;
    color: #fff;
    background: #171717;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.pill-link .square-arrow,
.catalog-product__buy .square-arrow {
    --arrow-size: 15px;
    --arrow-thickness: 3px;
    --arrow-shaft: 17px;
    --arrow-top: 0px;
    --arrow-right: -1px;
}

/* Content Page / Text Columns
	========================================================================== */
.content-page {
    color: #171717;
    background: #fff;
}

.ruled-heading {
    padding-bottom: 16px;
    border-bottom: 1px solid #777;
}

.ruled-heading p {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.text-columns {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* За PSD колонки фіксовані 418px з проміжком 28px і починаються на 445px
   від лівого краю контейнера, лишаючи ~454px порожнього поля справа.
   Не повертати `width: 66%` + `margin-left: auto` — це розтягує текст до краю. */
.text-columns--offset {
    margin: 24px auto 0 30%;
}

.text-columns p {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}

.text-columns h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
}

.text-columns h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.text-columns ul {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.4;
}

.text-columns ul li + li {
    margin-top: 6px;
}

.expandable__content {
    position: relative;
    overflow: hidden;
}

.expandable:not(.is-expanded) .expandable__content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.expandable:not(.is-expanded) .expandable__content::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 56px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    content: '';
    pointer-events: none;
}

.expandable__toggle {
    display: block;
    margin: 24px 0 0 30%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.category-description {
    padding: 64px 0;
}

/* Guarantee.psd: основний текст 16px з кроком рядка 24px (line-height 1.5),
   службовий заголовок над лінійкою — 16px. Скоуплено на сторінку, бо
   delivery.php і catalog.php звірялись зі своїми PSD і поки лишаються на 14px. */
.page-guarantee .text-columns p {
    font-size: 16px;
    line-height: 1.5;
}

.page-guarantee .ruled-heading p {
    font-size: 16px;
}

.page-guarantee .ruled-heading {
    padding-bottom: 10px;
}

/* About Page
	========================================================================== */
.about-page-hero {
    position: relative;
    overflow: hidden;
    background: #181818 url('../img/pages/about/hero-car-clean.jpg') center 197px / 100% auto no-repeat;
}

.about-page-hero::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(23, 23, 23, .98) 0 26%, rgba(23, 23, 23, .2) 60%, rgba(23, 23, 23, .74));
    content: '';
}

.about-page-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100vh;
}

.about-page-hero h1 {
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    margin: 240px 0 0;
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: .82;
    text-transform: uppercase;
}

.about-page-hero__meet {
    padding-top: 7px;
    font-size: 69px;
    white-space: nowrap;
}

.about-page-hero__brand {
    display: flex;
    flex-direction: column;
    font-size: 74px;
    display: inline-block;
}

.about-page-hero h1 strong {
    color: var(--blue);
    font: inherit;
}

.about-page-hero p {
    margin: auto 0 62px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.about-page-hero__seal {
    top: 293px;
    right: 120px;
    bottom: auto;
}

.offer-page {
    color: #171717;
    background: #fff;
}

.offer-page__inner {
    display: grid;
    min-height: 1030px;
    grid-template-columns: 403px minmax(0, 1168px);
    grid-template-rows: 220px 570px;
    column-gap: 191px;
    row-gap: 70px;
    padding-top: 77px;
}

.offer-page__heading {
    grid-column: 1;
    grid-row: 1;
}

.offer-page__heading h2 {
    margin: 28px 0 0;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.05;
}

.offer-page__copy {
    width: 720px;
    max-width: 90%;
    grid-column: 2;
    grid-row: 1;
    margin-left: 10%;
    padding-top: 51px;
}

.offer-page__copy > p {
    margin: 0 0 30px;
    font-size: 15px;
    line-height: 1.35;
}

.offer-page__tabs {
    width: 403px;
    align-self: center;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: offer;
}

.offer-page__tabs li {
    display: flex;
    align-items: center;
    padding: 0 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    counter-increment: offer;
}

.offer-page__tabs li::before {
    margin-right: 20px;
    margin-left: 0;
    transition: margin-left .2s ease;
    content: '0' counter(offer);
}

.offer-page__tabs li.is-active::before {
    margin-left: 20px;
}

.offer-page__tabs li.is-active,
.offer-page__tabs li:hover {
    color: var(--blue);
}

.offer-page__tabs button {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 80px;
}
.offer-page__tabs li:hover,
.offer-page__tabs li.is-active {
    background: #f3f3f3;
    box-shadow: -80px 0 #f3f3f3;
}

.offer-page__media {
    position: relative;
    display: block;
    overflow: hidden;
    grid-column: 2;
    grid-row: 2;
    border-radius: 22px;
    background: #171717;
}

.offer-page__image {
    display: block;
    width: 100%;
    height: 570px;
    object-fit: cover;
    transition: opacity .2s ease;
}

.offer-page__media.is-loading .offer-page__image {
    opacity: .28;
}

.offer-page__loader {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: none;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 3px solid rgba(255, 255, 255, .32);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: offer-loader .65s linear infinite;
}

.offer-page__media.is-loading .offer-page__loader {
    display: block;
}

@keyframes offer-loader {
    to { transform: rotate(1turn); }
}

.experience-page {
    background: radial-gradient(circle at 50% 40%, #303030, #191919 68%);
}

.experience-page__inner {
    position: relative;
    display: grid;
    grid-template-columns: 54% 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "media title"
        ".     ."
        "stats stats";
    min-height: 100vh;
    padding: 150px 0 40px;
}

.experience-page__media {
    grid-area: media;
    align-self: start;
    position: relative;
    width: 724px;
    max-width: 100%;
    aspect-ratio: 724 / 410;
}

.experience-page__image {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: auto;
    max-width: none;
}

.experience-page__image--products {
    z-index: 1;
    width: 69.2%;
    transform: translate3d(0, 0, 0);
}

.experience-page__image--detailing {
    z-index: 2;
    width: 42.68%;
    transform: translate3d(134.3%, 62.1%, 0);
}

.experience-page__title {
    grid-area: title;
    align-self: start;
    width: 100%;
    text-align: right;
}

.experience-page__title h2 {
    margin: 25px 0;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.04;
}

.experience-page__title > p:last-child {
    margin-left: auto;
    max-width: 470px;
    font-size: 14px;
}

.experience-page__stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
}

.experience-page__stats strong,
.experience-page__stats span {
    display: block;
}

.experience-page__stats strong {
    font-size: 54px;
    font-weight: 800;
}

.experience-page__stats span {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 700;
}

/* Guarantee Page
	========================================================================== */
.guarantee-hero {
    overflow: hidden;
    color: #171717;
    background: #f9f9f9;
}

.guarantee-hero__inner {
    position: relative;
    min-height: 110vh;
    padding-top: 353px;
}

.guarantee-hero__copy {
    margin-left: 1px;
}

/* Guarantee.psd: cap height 50px, крок рядка 85px, трекінг ~0.
   Не повертати -.04em — з ним рядок «ВІД ВИРОБНИКА» коротшає на 12px. */
.guarantee-hero h1 {
    margin: 0;
    font-size: 71px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.guarantee-hero p {
    margin: 31px 0 0 -1px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

.guarantee-hero__art img {
    position: absolute;
    display: block;
    max-width: none;
}

.guarantee-hero__card {
    top: 180px;
    right: 1px;
    width: 501px;
    height: 373px;
}

.guarantee-hero__woman {
    z-index: 2;
    top: 153px;
    right: 161px;
    width: 272px;
    height: 387px;
}

.guarantee-hero__envelope {
    z-index: 3;
    top: 371px;
    right: 457px;
    width: 227px;
    height: 186px;
}

.guarantee-hero__seal {
    z-index: 4;
    top: 328px;
    right: 523px;
    bottom: auto;
    left: auto;
}

.guarantee-copy {
    padding: 126px 0 117px;
    overflow: hidden;
}

.guarantee-intro .text-columns {
    align-items: start;
    margin-top: 11px;
}

.guarantee-intro .text-columns > div {
    display: grid;
    gap: 27px;
}

.guarantee-intro .text-columns > div p {
    margin: 0;
}

.team-page {
    position: relative;
    margin-top: 65px;
}

.team-page__media {
    overflow: hidden;
    border-radius: 20px;
}

.team-page__media img {
    display: block;
    width: 100%;
    height: 100vh;
    max-width: none;
}

.team-page > div {
    text-align: right;
}

.team-page > div:last-child {
    position: absolute;
    top: 106px;
    right: 0;
    width: 580px;
}

.team-page h2 {
    margin: 36px 0 36px;
    font-size: 61px;
    font-weight: 800;
    line-height: 1.02;
}

.team-page > div > p:last-of-type {
    width: 420px;
    margin-left: auto;
    font-size: 16px;
    line-height: 1.5;
}

/* Іконки 32x32 з кроком 48px (група `icon` у Guarantee.psd), останню
   вирівняно по правому краю контейнера. */
.team-page__socials {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 39px;
}

.team-page__socials a {
    display: block;
    width: 32px;
    height: 32px;
}

.team-page__socials img {
    display: block;
    width: 100%;
    height: 100%;
}

.guarantee-features {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 279px);
    gap: 15px;
    width: 100%;
    max-width: 900px;
    min-height: 116px;
    margin: 60px auto 0;
}

/* Великий світлий напис під колонками переваг (група `04` PSD, ink 1653x170). */
.guarantee-features__wordmark {
    position: absolute;
    z-index: 0;
    top: 119px;
    left: 50%;
    color: rgba(0, 0, 0, .012);
    font-size: 256px;
    font-weight: 900;
    letter-spacing: -.07em;
    line-height: 1;
    /* -12px компенсує від'ємний трекінг після останньої літери, інакше
       напис зміщений праворуч відносно PSD. */
    transform: translateX(calc(-50% - 12px));
    white-space: nowrap;
    pointer-events: none;
}

.guarantee-features h3 {
    margin: 0;
    color: var(--blue);
    font-size: 16px;
    line-height: 1.1;
}

.guarantee-features p {
    margin: 12px 0 0;
    color: #777;
    font-size: 16px;
    line-height: 1.25;
}

.guarantee-copy__link {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 273px;
    width: max-content;
    margin: 45px auto 0;
}

.guarantee-copy__promise {
    margin-top: 150px;
}

.guarantee-copy__promise .text-columns {
    margin-top: 13px;
}

.guarantee-copy__promise .text-columns > div {
    display: grid;
    gap: 27px;
}

.guarantee-copy__promise .text-columns > div p {
    margin: 0;
}

.guarantee-banner {
    position: relative;
    display: block;
    height: 483px;
    margin-top: 73px;
    overflow: hidden;
    border-radius: 20px;
    color: #fff;
}

/* Фон уже містить віньєтку з PSD (краї ~rgb(9,9,9), центр ~rgb(131,104,84)).
   Плоский overlay її не відтворює — не повертати rgba(0,0,0,.14) поверх чистого фото. */
.guarantee-banner__background {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.guarantee-banner__background.is-active {
    opacity: 1;
}

.guarantee-banner__background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guarantee-banner__actions {
    position: absolute;
    z-index: 2;
    top: 320px;
    left: 48px;
    display: flex;
    gap: 13px;
}

.guarantee-banner__action {
    position: relative;
    display: flex;
    width: 579px;
    height: 115px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 18px 17px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: 20px;
    color: #fff;
    background: rgba(8, 13, 14, .76);
    font-family: inherit;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: width .4s cubic-bezier(.65, 0, .35, 1), color .25s ease, background-color .25s ease, border-color .25s ease;
}

.guarantee-banner__action.is-active {
    width: 280px;
    border-color: #a7c70e;
    color: #111;
    background: #a7c70e;
}

.guarantee-banner__action:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
}

.guarantee-banner__action b,
.guarantee-banner__action small {
    position: relative;
    z-index: 2;
    display: block;
    line-height: 1;
}

.guarantee-banner__action b {
    font-size: 23px;
    font-weight: 800;
}

.guarantee-banner__action small {
    margin-top: 6px;
    font-size: 9px;
    font-weight: 700;
}

/* У PSD взуття — окрема вкладена панель 278x105 (`Rectangle 3 copy 8`),
   втоплена на 5px від краю картки, а не фото на всю висоту впритул до краю. */
.guarantee-banner__panel {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: 5px;
    display: block;
    overflow: hidden;
    width: 278px;
    height: 105px;
    border-radius: 18px;
    opacity: 1;
    transition: opacity .25s ease;
}

.guarantee-banner__panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guarantee-banner__action.is-active .guarantee-banner__panel {
    opacity: 0;
}

.guarantee-banner__action .square-arrow {
    --arrow-size: 26px;
    --arrow-thickness: 5px;
    --arrow-shaft: 29px;
    position: absolute;
    z-index: 3;
    top: 26px;
    right: 17px;
    transition: transform .3s ease;
}

/* Акцентна картка в PSD має стрілку вниз-праворуч, фото-картка — вгору-праворуч. */
.guarantee-banner__action.is-active .square-arrow {
    transform: rotate(90deg);
}

.guarantee-banner__copy {
    position: absolute;
    z-index: 2;
    top: 313px;
    right: 48px;
    display: block;
    width: 540px;
    text-align: right;
}

.guarantee-banner__copy b,
.guarantee-banner__copy small {
    display: block;
}

.guarantee-banner__copy b {
    font-size: 74px;
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
    white-space: nowrap;
}

.guarantee-banner__copy small {
    margin-top: 20px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
}

@media (min-width: 768px) and (max-width: 1600px) {
    .guarantee-hero__art {
        position: absolute;
        inset: 0;
        top: 150px;
        transform: scale(.8);
        transform-origin: right top;
    }

    .team-page__media {
        width: 58%;
    }

    .team-page__media img {
        object-fit: cover;
        width: 100%;
    }

    .team-page > div:last-child {
        width: 40%;
    }

    .team-page h2 {
        font-size: clamp(46px, 4.1vw, 61px);
    }

    .team-page > div > p:last-of-type {
        width: 100%;
    }

    .guarantee-features {
        width: min(868px, 100%);
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .guarantee-banner__actions {
        left: 32px;
        width: 54%;
    }

    .guarantee-banner__action {
        width: calc(66% - 6px);
    }

    .guarantee-banner__action.is-active {
        min-width: calc(34% - 6px);
    }

    .guarantee-banner__copy {
        right: 32px;
        width: 38%;
    }

    .guarantee-banner__copy b {
        font-size: clamp(48px, 4.2vw, 64px);
    }
}

@media (max-width: 1260px) {
    .guarantee-hero__art {
        top: 0;
    }
}
@media (max-width: 1080px) {
    .guarantee-hero__copy {
        top: 500px
    }
}

/* Accessibility Utilities
	========================================================================== */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Delivery Page
	========================================================================== */
.delivery-hero {
    padding-top: 200px;
    padding-bottom: 60px;
    overflow: hidden;
    background: #191919;
}

.delivery-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 380px 1fr;
    grid-gap: 0 20px;
}

.delivery-hero__intro {
    width: 100%;
}

.delivery-hero h1 {
    margin: 0 0 14px;
    font-size: 68px;
    font-weight: 800;
}

.delivery-hero__intro > p {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}
.delivery-hero__promise {
    margin-top: 20px;
    display: block;
}
.delivery-hero__icons {
    display: flex;
    gap: 33px;
    margin: 38px 0 82px 8px;
}

.delivery-hero__icons button {
    width: 70px;
    height: 70px;
    padding: 0;
    border: 0;
    background-color: transparent;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.delivery-hero__icons button:hover,
.delivery-hero__icons button:focus-visible {
    transform: translateY(-3px);
    outline: none;
}
.delivery-hero__icons button:hover::after,
.delivery-hero__icons button:focus-visible::after {
    position: absolute;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    content: '';
    border-radius: 15px;
    box-shadow: 0 0 0 2px var(--blue);
    z-index: 1;
}


.delivery-icon--247 { background-image: url('../img/pages/delivery/icon-247.png'); }
.delivery-icon--location { background-image: url('../img/pages/delivery/icon-location.png'); }
.delivery-icon--box { background-image: url('../img/pages/delivery/icon-box.png'); }

.delivery-info-modal {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: grid;
    visibility: hidden;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: visibility .3s ease, opacity .3s ease;
}

.delivery-info-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.delivery-info-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .8);
    cursor: default;
}

.delivery-info-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border: 1px solid #262626;
    border-radius: 34px;
    color: #fff;
    background: #161616;
    transform: translateY(16px);
    transition: transform .3s ease;
}

.delivery-info-modal.is-open .delivery-info-modal__panel {
    transform: translateY(0);
}

.delivery-info-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #333;
    border-radius: 50%;
    color: #999;
    background: transparent;
    cursor: pointer;
    transition: color .2s ease;
}

.delivery-info-modal__close svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.delivery-info-modal__close:hover {
    color: var(--blue);
}

.delivery-info-modal__title {
    margin: 0;
    padding-right: 30px;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
}

.delivery-info-modal__text {
    margin: 14px 0 0;
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
}

.delivery-hero__intro strong {
    font-size: 13px;
    text-transform: uppercase;
}

.delivery-switcher {
    z-index: 1;
    display: flex;
    width: 100%;
    gap: 1%;
    overflow: hidden;
}

.delivery-panel {
    position: relative;
    display: block;
    min-width: 0;
    height: 100vh;
    flex: 0 0 calc((100% - 15px) / 3);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-color: #08353b;
    background-position: center;
    background-size: cover;
    color: #fff;
    cursor: pointer;
    appearance: none;
    text-align: left;
    transition: flex-basis .55s cubic-bezier(.65, 0, .35, 1), filter .35s ease;
}

.delivery-panel::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 35, 40, .14), rgba(0, 25, 29, .5));
    content: '';
    transition: background .35s ease;
}

.delivery-panel:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
}

.delivery-panel.is-active {
    flex-basis: calc(100% - 180px);
    cursor: default;
}

.delivery-switcher:has(.delivery-panel.is-active) .delivery-panel:not(.is-active) {
    flex-basis: 80px;
}

.delivery-switcher:has(.delivery-panel.is-active) .delivery-panel:not(.is-active) .delivery-panel__card {
    display: none;
}

.delivery-panel.is-active::before {
    background: linear-gradient(180deg, rgba(0, 35, 40, .36), rgba(18, 22, 23, .5));
}

.delivery-panel--ukr {
    background-image: url('../img/pages/delivery/ukr-bg.webp');
    background-position: 50% center;
}

.delivery-panel--nova {
    background-image: url('../img/pages/delivery/nova-bg.webp');
    background-position: center;
}

.delivery-panel--meest {
    background-image: url('../img/pages/delivery/meest-bg.webp');
    background-position: 54% center;
}

.delivery-panel__word {
    position: absolute;
    z-index: 1;
    top: -6px;
    right: -7px;
    color: rgba(255, 255, 255, .82);
    font-size: 89px;
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .84;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    transition: opacity .3s ease;
}

.delivery-panel.is-active .delivery-panel__word {
    opacity: .1;
}

.delivery-panel__content {
    position: relative;
    z-index: 2;
    padding-left: 33px;
    display: block;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease .18s, transform .35s ease .18s;
}

.delivery-panel.is-active .delivery-panel__content {
    opacity: 1;
    transform: none;
}

.delivery-panel__content b {
    display: block;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .65);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.delivery-panel__content > span {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 20px 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.delivery-panel__card {
    position: absolute;
    z-index: 2;
    bottom: 32px;
    left: 4.24%;
    display: block;
    width: 91.17%;
    height: 115px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 25px;
    background: rgba(245, 248, 246, .78);
    backdrop-filter: blur(4px);
    pointer-events: none;
    transition: left .55s cubic-bezier(.65, 0, .35, 1), width .55s cubic-bezier(.65, 0, .35, 1), background .35s ease, transform .55s cubic-bezier(.65, 0, .35, 1);
}

.delivery-panel__card-copy {
    display: none;
}

.delivery-panel.is-active .delivery-panel__card {
    left: 15.96%;
    width: 79.64%;
    background: rgba(14, 18, 19, .82);
}

.delivery-panel__card-brand {
    position: absolute;
    z-index: 2;
    top: 2px;
    right: 2px;
    left: 2px;
    display: grid;
    height: 109px;
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(244, 244, 242, .82);
    transition: left .35s ease, width .35s ease, background .35s ease;
}

.delivery-panel.is-active .delivery-panel__card-brand {
    left: auto;
    width: 48.36%;
    background: #f4f4f2;
}

.delivery-panel__card-brand img {
    display: block;
    width: auto;
    max-width: 78%;
    height: auto;
    max-height: 68%;
    object-fit: contain;
}

.delivery-panel--ukr .delivery-panel__card-brand img {
    max-width: 82%;
}

.delivery-panel--nova .delivery-panel__card-brand img {
    max-width: 75%;
    max-height: 64%;
}

.delivery-panel--meest .delivery-panel__card-brand img {
    max-width: 76%;
    max-height: 62%;
}

.delivery-panel.is-active .delivery-panel__card-copy {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 16px;
    display: flex;
    width: 49.9%;
    height: 115px;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 16px;
}

.delivery-panel__card-copy b,
.delivery-panel__card-copy small {
    display: block;
    color: #fff;
    line-height: 1;
}

.delivery-panel__card-copy b {
    font-size: 25px;
    font-weight: 800;
}

.delivery-panel__card-copy small {
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
}

.delivery-copy {
    padding: 103px 0 80px;
}

.delivery-copy .text-columns {
    margin-top: 13px;
}

@media (max-width: 1080px) {
    .delivery-hero__inner {
        display: block;
    }
    .delivery-hero__icons {
        margin-bottom: 30px;
    }
}

/* Contacts Page
	========================================================================== */
.contacts-page {
    background: radial-gradient(circle at 52% 45%, #303030, #191919 65%);
}

.contacts-page__inner {
    min-height: 100vh;
    padding-top: 15%;
}

.contacts-page h1 {
    margin: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .65);
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
}

.contacts-page__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-top: 163px;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.contacts-page__grid > div {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.contacts-page__grid address {
    display: inline-block;
    font-style: normal;
    line-height: 1.8;
}

.contacts-page__route {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: var(--blue);
}

.contacts-page__route i {
    position: relative;
    min-width: 16px;
    height: 21px;
    border: 2px solid var(--blue);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.contacts-page__route i::after {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    content: '';
}

.contacts-page__grid > div:last-child a {
    display: block;
    margin-bottom: 15px;
}

.contacts-page__socials {
    display: flex;
    gap: 10px;
    margin-top: 113px;
}

.contacts-page__socials a {
    padding: 5px 10px;
    border-radius: 12px;
    color: #171717;
    background: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.contacts-page__inner > p {
    margin-top: 36px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.back-home {
    color: #171717;
    background: #fff;
}

.back-home__inner {
    position: relative;
    padding: 90px 0;
}

.back-home h2::after {
    position: absolute;
    bottom: -20px;
    right: 0;
    left: 0;
    height: 1px;
    background: #999;
    content: '';
}

.back-home__inner > div {
    text-align: right;
}

.back-home__inner > div > div {
    max-width: 60%;
    margin-left: auto;
}

.back-home h2 {
    margin: 0;
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
    padding-left: 75px;
    position: relative;
}

.back-home p {
    margin-top: 31px;
    font-size: 13px;
}

.back-home__inner > a {
    position: absolute;
    inset: 0;
}

.back-home__arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 72px;
    height: 72px;
    border-top: 13px solid #171717;
    border-left: 13px solid #171717;
}

.back-home__arrow::after {
    position: absolute;
    top: -12px;
    left: -6px;
    width: 80px;
    height: 13px;
    background: #171717;
    content: '';
    transform: rotate(45deg);
    transform-origin: left center;
}

/* Catalog / Product Page
	========================================================================== */
.catalog-product {
    position: relative;
    overflow: hidden;
    background: #151515;
}

.catalog-product.scroll-fade-visible::after {
    opacity: .5;
    transform: translateY(15px) translateX(-50%);
}

.catalog-product::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    color: #fafafa;
    content: 'HYDROPHOB';
    font-size: 158px;
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .8;
    pointer-events: none;
    opacity: 0;
    transform: translateY(135px) translateX(-50%);
    transition: opacity .9s ease, transform .9s ease;
}

.catalog-product__background {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    background: #151515;
}

.catalog-product__background::after {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, .08);
    content: '';
}

.catalog-product__background img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity .5s ease, transform .7s ease;
}

.catalog-product__background img.is-current,
.catalog-product__background img.is-entering {
    opacity: 1;
    transform: scale(1);
}

.catalog-product__inner {
    position: relative;
    min-height: calc(100vh + 170px);
    padding-top: 170px;
}

.catalog-product__topline {
    position: relative;
    z-index:111;
    display: flex;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

.catalog-product__topline button {
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transition: color .25s ease;
}

.catalog-product__topline > button[aria-expanded='true'] {
    color: var(--blue);
}

.catalog-product__topline > button span {
    position: relative;
    display: inline-block;
    width: 43px;
    height: 24px;
    font-size: 0;
    vertical-align: middle;
    margin-top: 10px;
}

.catalog-product__topline > button span::before,
.catalog-product__topline > button span::after {
    position: absolute;
    left: 0;
    width: 43px;
    height: 2px;
    background: #fff;
    content: '';
    box-shadow: 0 10px #fff;
    transition: background-color .25s ease, box-shadow .25s ease;
}

.catalog-product__topline > button span::before {
    top: 3px;
}

.catalog-product__topline > button span::after {
    top: 3px;
    left: 10px;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #171717;
    box-shadow: 18px 10px 0 -2px #171717, 18px 10px 0 0 #fff;
    transition: left .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.catalog-product__topline > button[aria-expanded='true'] span::before {
    background: var(--blue);
    box-shadow: 0 10px var(--blue);
}

.catalog-product__topline > button[aria-expanded='true'] span::after {
    left: 28px;
    border-color: var(--blue);
    box-shadow: -18px 10px 0 -2px #171717, -18px 10px 0 0 var(--blue);
}

.catalog-product__topline nav {
    display: flex;
    gap:10px 25px;
    flex-wrap: wrap;
}

.catalog-product__topline nav a {
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    transform: translateY(0);
    transition: transform .25s ease, color .25s ease;
    position: relative;
    z-index: 1;
    display: inline-block;
    cursor: pointer;
}

.catalog-product__topline nav a:hover,
.catalog-product__topline nav a.is-active {
    color: var(--blue);
}

.catalog-product__topline nav a:not(.is-active):hover {
    transform: translateY(-10px);
}

.catalog-product__topline nav a:not(.is-active):hover:after {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    content: '';
    z-index: 111;
    cursor: pointer;
}
.catalog-product__filter {
    position: absolute;
    z-index: 111;
    flex-direction: column;
    gap: 20px;
    top: 220px;
    right: 0;
    left: 0;
    padding: 28px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px);
}

.catalog-product__filter:not([hidden]) {
    display: flex;
}

.catalog-product__filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.catalog-product__filter-title {
    margin: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.catalog-product__filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.catalog-product__filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}

.catalog-product__filter input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.catalog-product__filter i {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 1px solid #aaa;
    border-radius: 2px;
}

.catalog-product__filter input:checked + i {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: inset 0 0 0 2px #fff;
}

.catalog-product__filter-range {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
}

.catalog-product__filter-range input[type="number"] {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 13px;
}

.catalog-product__filter-range input[type="number"]::placeholder {
    color: rgba(255, 255, 255, .6);
}

.catalog-product__visual {
    display: none;
}

.catalog-product__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.catalog-product__visual img.is-main {
    opacity: 1;
}

.catalog-product__controls {
    position: absolute;
    z-index: 3;
    top: 360px;
    right: 100px;
    width: 149px;
    align-items: center;
    justify-content: space-between;
}

.catalog-product__controls:not([hidden]) {
    display: flex;
}

.catalog-product__scroll {
    display: grid;
    width: 83px;
    height: 83px;
    flex: 0 0 83px;
    place-items: center;
    border: 1px solid #fff;
    border-radius: 50%;
    font-size: 12px;
}

.catalog-product__controls button {
    position: relative;
    width: 25px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.catalog-product__controls button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}

.catalog-product__controls button span {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 20px;
    height: 1px;
    background: #fff;
    transition: background-color .2s ease;
}

.catalog-product__controls button span::after {
    position: absolute;
    top: -3px;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    content: '';
    transform: rotate(45deg);
    transition: border-color .2s ease;
}

.catalog-product__controls button:first-child span {
    transform: rotate(180deg);
}

.catalog-product__controls button:hover span {
    background: var(--blue);
}

.catalog-product__controls button:hover span::after {
    border-top-color: var(--blue);
    border-right-color: var(--blue);
}

.catalog-product__dots {
    display: none;
}

.catalog-product__copy,
.catalog-product__buy {
    transition: opacity .22s ease, transform .22s ease;
}

.catalog-product.is-group-switching .catalog-product__copy,
.catalog-product.is-group-switching .catalog-product__buy {
    opacity: 0;
    transform: translateY(8px);
}

.catalog-product__copy {
    width: 100%;
    max-width: 420px;
}

.catalog-product__copy small,
.catalog-product__buy small {
    display: block;
    font-size: 11px;
    font-weight: 700;
}

.catalog-product__buy small[hidden] {
    display: none;
}

.catalog-product__copy h1 {
    margin: 8px 0 18px;
    font-size: 28px;
}

.catalog-product__copy > strong {
    display: block;
    margin-bottom: 16px;
    font-size: 13px;
}

.lead-more {
    display: block;
    margin: -8px 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.catalog-product__thumbs {
    display: flex;
    gap: 7px;
    margin-top: 35px;
    max-width: calc(135px * 3 + 12px * 2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.catalog-product__thumbs::-webkit-scrollbar {
    display: none;
}

.catalog-product__thumbs button {
    flex-shrink: 0;
    width: 135px;
    height: 135px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .2s ease, background-color .2s ease;
}

.catalog-product__thumbs button.is-active {
    border-color: var(--blue);
    background: rgba(28, 187, 231, .12);
    box-shadow: 0 0 0 1px var(--blue) inset;
}

.catalog-product__thumbs img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.catalog-product__content {
    display: flex;
    gap: 0 30px;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(50% + 80px);
    left: calc(50% + 80px);
    transform: translate(-50%, -50%);
}
.catalog-product__buy {
    z-index: 3;
    display: flex;
    width: 280px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.catalog-product__buy > strong {
    font-size: 30px;
}

.catalog-product__buy label {
    font-size: 12px;
}

.catalog-product__buy > p {
    margin: 0;
    font-size: 12px;
}

.catalog-product__buy > p b {
    margin-left: 10px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 20px;
    font-weight: 500;
}

.catalog-product__buy [data-stock-state="available"] {
    color: var(--blue);
}

.catalog-product__buy [data-stock-state="unavailable"] {
    color: #ff7067;
}

.catalog-product__buy [data-product-volume-value] {
    display: inline-block;
    margin-left: 10px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 20px;
    color: #fff;
    font-weight: 500;
}

.catalog-product__buy > button {
    display: flex;
    min-width: 220px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 0;
    border-radius: 25px;
    color: #07151a;
    background: var(--blue);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.catalog-product__buy > button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.product-grid-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-grid-nav {
    display: flex;
    gap: 10px;
}

.product-grid-nav button {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid #171717;
    border-radius: 50%;
    background: none;
    color: #171717;
    font-size: 24px;
    padding: 0;
    cursor: pointer;
    transition: opacity .2s ease;
}

.product-grid-nav button.swiper-button-disabled {
    opacity: .3;
    pointer-events: none;
}

/* Product Description
	========================================================================== */
.product-description {
    position: relative;
    min-height: 625px;
    padding: 130px 80px 100px 80px;
    overflow: hidden;
}

.product-description::after {
    position: absolute;
    bottom: 0;
    left: 80px;
    color: #fafafa;
    content: 'HYDROPHOB';
    font-size: 158px;
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .8;
    pointer-events: none;
    opacity: 0;
    transform: translateY(36px);
    transition: opacity .9s ease, transform .9s ease;
}

/* Сама секція лишається видимою одразу — плавна поява стосується лише
   декоративного вотермарку на фоні, а не реального контенту опису. */
.product-description.scroll-fade {
    opacity: 1;
    transform: none;
}

.product-description.scroll-fade-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.product-description > .container {
    position: relative;
    z-index: 1;
}

.product-description__panel .text-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 28px;
    margin: 24px 0 0 30%;
}

.product-description__panel .text-columns p:nth-child(3) {
    grid-column: 2;
}

.product-description__tabs {
    display: flex;
    gap: 96px;
    padding-bottom: 18px;
    border-bottom: 1px solid #777;
}

.product-description__tabs button {
    padding: 0;
    border: 0;
    color: #999;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
}

.product-description__tabs button.is-active {
    color: #171717;
}

.product-description__tabs button:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 5px;
}

.product-description__panel[hidden] {
    display: none;
}

.product-characteristics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 28px;
    margin: 14px 0 0 30%;
}

.product-characteristics > div {
    display: grid;
    min-height: 62px;
    grid-template-columns: 145px 1fr;
    gap: 16px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid #d5d5d5;
}

.product-characteristics dt,
.product-characteristics dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
}

.product-characteristics dt {
    font-weight: 700;
    text-transform: uppercase;
}

.product-characteristics__product-title {
    margin: 24px 0 0 30%;
    font-size: 18px;
    font-weight: 700;
}

.product-characteristics + .product-characteristics__product-title {
    margin-top: 34px;
}

.product-characteristics--product {
    margin-top: 14px;
}

.product-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.product-gallery__item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
}

.product-gallery img {
    width: 100%;
    height: 100%;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
    transition: transform .25s ease;
}

.product-gallery__item::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    background: rgba(7, 21, 26, .35);
    color: #fff;
    content: '🔍';
    font-size: 26px;
    opacity: 0;
    pointer-events: none;
    place-items: center;
    transition: opacity .2s ease;
}

.product-gallery__item:hover::after {
    opacity: 1;
}

.product-gallery__item:hover img {
    transform: scale(1.06);
}

/* Lightbox
	========================================================================== */
.lightbox {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7, 21, 26, .92);
}

.lightbox__image {
    position: relative;
    z-index: 1;
    max-width: min(1100px, 84vw);
    max-height: 84vh;
    object-fit: contain;
    border-radius: 4px;
}

.lightbox__close,
.lightbox__nav {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background: rgba(255, 255, 255, .2);
}

.lightbox__close {
    top: 24px;
    right: 24px;
}

.lightbox__nav--prev {
    left: 24px;
}

.lightbox__nav--next {
    right: 24px;
}

.lightbox__counter {
    position: absolute;
    z-index: 2;
    bottom: 24px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
}

/* Product Video
	========================================================================== */
.product-video {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: #111;
}

.product-video__shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .82) 100%);
    pointer-events: none;
}

.product-video video {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.product-video__inner {
    position: relative;
    z-index: 2;
    height: 100%;
}

.product-video__eyebrow {
    position: absolute;
    top: 160px;
    left: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.product-video__seal {
    top: 149px;
    right: 274px;
    bottom: auto;
}

.product-video__play {
    position: absolute;
    top: 53.5%;
    left: 54.1%;
    display: grid;
    width: 82px;
    height: 82px;
    place-items: center;
    padding: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .18);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.product-video__controls {
    position: absolute;
    right: 80px;
    bottom: 31px;
    left: 80px;
    height: 176px;
}

.product-video__copy h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1;
}

.product-video__copy p {
    margin: 8px 0 0;
    font-size: 13px;
}

.product-video__progress-label {
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
}

.product-video input[type='range'] {
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 3px;
    outline: none;
    background: linear-gradient(to right, var(--blue) 0 var(--range-progress, 8%), rgba(255, 255, 255, .58) var(--range-progress, 8%) 100%);
    cursor: pointer;
    appearance: none;
}

.product-video input[type='range']::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
    appearance: none;
}

.product-video input[type='range']::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 0;
    border-radius: 50%;
    background: var(--blue);
}

.product-video__progress {
    display: block;
    width: 100%;
}

.product-video__time {
    position: absolute;
    top: 94px;
    left: 0;
    color: #fff;
    font-size: 14px;
}

.product-video__toolbar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.product-video__volume,
.product-video__options {
    display: flex;
    align-items: center;
}

.product-video__volume {
    gap: 8px;
}

.product-video__volume button,
.product-video__options button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
}

.product-video__volume svg,
.product-video__options svg {
    width: 23px;
    height: 23px;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-video__volume label {
    display: flex;
}

.product-video__volume input {
    width: 70px;
    --range-progress: 65%;
}

.product-video__options {
    gap: 18px;
}

.product-video__cc {
    border: 2px solid currentColor !important;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 800;
}

.product-video__cc[aria-pressed='true'] {
    color: var(--blue);
}

/* Product Grid
	========================================================================== */
.product-grid-section {
    padding: 117px 0 90px;
    color: #171717;
    background: #fff;
}

.product-grid {
    display: block;
    overflow: hidden;
    margin-top: 65px;
}

.product-grid .swiper-wrapper {
    align-items: stretch;
}

.product-tile {
    position: relative;
    height: 505px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(145deg, #171717 55%, var(--blue));
}

.product-tile > img {
    position: absolute;
    z-index: 1;
    top: 50%;
    height: auto;
    object-fit: contain;
    left: 50%;
    aspect-ratio: 1/1;
    width: 230px;
    transform: translate(-50%, -50%);
}

.product-tile .product-card__arrow {
    top: 22px;
    right: 22px;
    transform: scale(.6);
    transform-origin: top right;
}

.product-tile > div {
    position: absolute;
    z-index: 2;
    right: 25px;
    bottom: 25px;
    left: 25px;
}

.product-tile small,
.product-tile h2,
.product-tile p {
    margin: 0;
}

.product-tile h2 {
    margin: 6px 0;
    font-size: 22px;
}

.product-tile p {
    font-size: 11px;
    line-height: 1.25;
}

/* Checkout / Personal Info
	========================================================================== */
.page-checkout {
    color: #171717;
    background: #fff;
}

.page-checkout .header {
    height: 150px;
    background: #fbfbfb;
}

.checkout {
    min-height: 100vh;
    padding-top: 150px;
    background: #fff;
}

.checkout__layout {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 40px;
    align-items: start;
}

.checkout__form {
    position: relative;
    padding: 40px 0 120px;
}

.checkout__eyebrow {
    margin-left: auto;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    width: fit-content;
}

.checkout__section h1,
.checkout__section h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.checkout__city {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 33px;
    padding-bottom: 29px;
    border-bottom: 1px solid #bbb;
}

.checkout__city > span:first-child {
    font-size: 24px;
}

.checkout__input-wrap {
    position: relative;
    display: block;
    width: 307px;
}

.checkout__input-wrap input,
.checkout__contact-grid input,
.checkout-card input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 16px;
    border: 1px solid #aaa;
    border-radius: 25px;
    outline: 0;
    color: #171717;
    background: #f3f3f3;
    font: inherit;
}

.checkout__input-wrap i,
.checkout__dark-input i {
    position: absolute;
    top: 50%;
    right: 15px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    border: 1px solid #aaa;
    border-radius: 50%;
    color: #aaa;
    font-size: 13px;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
}

.checkout__suggest i {
    display: none;
}

.checkout__suggest.has-value i {
    display: grid;
}

.checkout__carriers {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}

.checkout__carriers button {
    position: relative;
    display: flex;
    width: clamp(160px, 24.14%, 254px);
    height: clamp(88px, 5.83vw, 112px);
    flex: 0 1 clamp(160px, 24.14%, 254px);
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    overflow: hidden;
    border: 1px solid #bbb;
    border-radius: 16px;
    color: #fff;
    background: #f5f5f5;
    cursor: pointer;
    transition: width .4s cubic-bezier(.65, 0, .35, 1), flex-basis .4s cubic-bezier(.65, 0, .35, 1), height .4s cubic-bezier(.65, 0, .35, 1), padding .4s cubic-bezier(.65, 0, .35, 1), border-color .25s ease, background-color .25s ease;
}

.checkout__carriers button.is-active {
    width: clamp(360px, 51.71%, 544px);
    flex-basis: clamp(360px, 51.71%, 544px);
    justify-content: space-between;
    padding: 0 0 0 15px;
    border-width: 3px;
    border-color: #555;
    background: #555;
}

.checkout__carrier-copy {
    display: flex;
    width: 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    text-align: left;
    text-transform: uppercase;
    transform: translateX(-12px);
    transition: width .35s ease, min-width .35s ease, opacity .2s ease, transform .35s ease;
}

.checkout__carriers button.is-active .checkout__carrier-copy {
    width: clamp(110px, 34.9%, 190px);
    min-width: clamp(110px, 34.9%, 190px);
    opacity: 1;
    transform: translateX(0);
}

.checkout__carrier-copy b {
    font-size: clamp(15px, 1.25vw, 24px);
    font-weight: 800;
    line-height: 1.15;
}

.checkout__carrier-copy small {
    margin-top: 4px;
    font-size: clamp(8px, .47vw, 9px);
    font-weight: 700;
    line-height: 1.3;
}

.checkout__carrier-logo {
    display: grid;
    width: clamp(130px, 81%, 206px);
    height: clamp(46px, 3.85vw, 74px);
    flex: 0 1 clamp(130px, 81%, 206px);
    min-width: 0;
    place-items: center;
    transition: width .4s cubic-bezier(.65, 0, .35, 1), height .4s cubic-bezier(.65, 0, .35, 1), flex-basis .4s cubic-bezier(.65, 0, .35, 1), border-radius .4s ease, background-color .25s ease;
}

.checkout__carriers button.is-active .checkout__carrier-logo {
    width: clamp(160px, 51%, 278px);
    height: clamp(64px, 5.42vw, 104px);
    flex-basis: clamp(160px, 51%, 278px);
    border-radius: inherit;
    background: #fff;
}

.checkout__carrier-logo svg {
    display: block;
    width: min(82%, 206px);
    height: min(72%, 62px);
}

.checkout__carriers button[data-checkout-carrier="nova"] .checkout__carrier-logo svg {
    width: min(76%, 176px);
}

.checkout__carriers button[data-checkout-carrier="meest"] .checkout__carrier-logo svg {
    width: min(78%, 180px);
}

.checkout__carrier-word {
    display: block;
    height: 100px;
    overflow: hidden;
    margin: 15px -80px 0;
    color: rgba(0, 0, 0, .018);
    font-size: 126px;
    font-weight: 900;
    letter-spacing: -.06em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

.checkout__shipping {
    margin-top: 7px;
}

.checkout__shipping label {
    display: grid;
    min-height: 107px;
    grid-template-columns: 18px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #bbb;
    cursor: pointer;
}

.checkout__shipping input,
.checkout__payment-option input,
.checkout__agreement input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.checkout__shipping label > i,
.checkout__payment-option > i {
    width: 15px;
    height: 15px;
    border: 1px solid #aaa;
    border-radius: 50%;
}

.checkout__shipping input:checked + i,
.checkout__payment-option input:checked + i {
    border: 4px solid #fff;
    outline: 2px solid var(--blue);
    background: var(--blue);
}

.checkout__shipping label > span {
    display: flex;
    flex-direction: column;
}

.checkout__shipping label > span b {
    font-size: 16px;
    font-weight: 400;
}

.checkout__shipping label small {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
}

.checkout__shipping label > strong {
    font-size: 14px;
    font-weight: 800;
}

.checkout__pickup {
    display: block;
    margin-top: 43px;
    font-size: 13px;
    font-weight: 700;
}

.checkout__dark-input {
    position: relative;
    display: block;
    margin-top: 15px;
}

.checkout__dark-input input,
.checkout__contact-grid input {
    width: 100%;
    height: 43px;
    padding: 0 17px;
    border: 1px solid #999;
    border-radius: 23px;
    outline: 0;
    color: #fff;
    background: #1b1b1b;
    font: inherit;
}

.checkout__contacts,
.checkout__payment-method {
    margin-top: 48px;
    padding-top: 27px;
    border-top: 1px solid #171717;
}

.checkout__contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 20px;
    margin-top: 36px;
}

.checkout__contact-grid input:first-child {
    grid-column: 1 / -1;
}

.checkout__payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.checkout__agreement {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: flex-start;
    gap: 8px;
    margin: 26px 0 0 26px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.checkout__agreement i {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 1px solid #aaa;
    border-radius: 2px;
}

.checkout__agreement input:checked + i {
    border-color: var(--blue);
    background: var(--blue);
    box-shadow: inset 0 0 0 2px #fff;
}

.checkout__submit,
.checkout-card__pay {
    position: relative;
    display: flex;
    min-width: 300px;
    height: 50px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 30px;
    padding: 0 22px;
    border: 0;
    border-radius: 28px;
    color: #fff;
    background: #171717;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.checkout__submit:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.checkout__submit .square-arrow,
.checkout-card__pay .square-arrow {
    --arrow-size: 16px;
    --arrow-thickness: 3px;
    --arrow-shaft: 19px;
}

.checkout__payment-option--cash {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid #171717;
}

.checkout-summary {
    position: sticky;
    top: 0;
    min-height: 782px;
    padding: 20px 20px 20px 40px;
    background: #fafafa;
}

.checkout-summary h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
}

.checkout-summary__delivery-note {
    margin-top: 17px;
    padding: 11px 20px;
    color: #fff;
    background: var(--blue);
    font-size: 14px;
    text-align: center;
}

.checkout-summary__product {
    display: grid;
    min-height: 190px;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 20px;
}

.checkout-summary__product > span {
    position: relative;
    display: grid;
    width: 101px;
    height: 119px;
    place-items: center;
    border-radius: 0 0 17px 17px;
    background: #171717;
}

.checkout-summary__product img {
    width: auto;
    height: 155px;
    object-fit: contain;
}

.checkout-summary__product i {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--blue);
    font-size: 12px;
    font-style: normal;
}

.checkout-summary__product p {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-size: 16px;
}

.checkout-summary__product p b {
    font-weight: 800;
}

.checkout-summary__product strong {
    font-weight: 400;
    white-space: nowrap;
}

.checkout-summary__promo {
    padding: 14px 20px 15px;
    border-radius: 8px;
    color: #fff;
    background: #191919;
    text-transform: uppercase;
}

.checkout-summary__promo > b {
    font-size: 16px;
}

.checkout-summary__promo > div {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 15px;
    margin-top: 14px;
}

.checkout-summary__promo input {
    min-width: 0;
    height: 48px;
    padding: 0 20px;
    border: 1px solid #fff;
    border-radius: 25px;
    outline: 0;
    color: #fff;
    background: transparent;
}

.checkout-summary__promo button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 0;
    border-radius: 25px;
    color: #fff;
    background: var(--blue);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.checkout-summary__promo .square-arrow {
    --arrow-size: 16px;
    --arrow-thickness: 3px;
    --arrow-shaft: 18px;
    --arrow-top: -3px;
}

.checkout-summary__promo > small {
    display: block;
    min-height: 0;
    margin-top: 5px;
    font-size: 10px;
    text-transform: none;
}

.checkout-summary__totals {
    margin: 35px 0 0;
}

.checkout-summary__totals div {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.checkout-summary__totals dt,
.checkout-summary__totals dd {
    margin: 0;
}

.checkout-summary__totals div:last-child {
    margin-top: 28px;
    font-size: 20px;
    font-weight: 800;
}

.checkout__seal {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    margin: 67px auto 0;
    place-items: center;
}

.checkout__seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: seal-spin 14s linear infinite;
}

.checkout__seal text {
    fill: #171717;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.checkout__seal i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #171717;
}

.checkout-card {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: #171717;
    background: #fff;
}

.checkout-card::backdrop {
    background: #fff;
}

.checkout-card__inner {
    position: relative;
    width: min(calc(100% - 160px), var(--container));
    height: 100%;
    margin-inline: auto;
    padding-top: 205px;
}

.checkout-card__inner > p {
    position: absolute;
    top: 55px;
    right: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
}

.checkout-card fieldset {
    width: 575px;
    padding: 0 0 40px;
    border: 0;
    border-bottom: 1px solid #aaa;
}

.checkout-card legend {
    margin-bottom: 34px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.checkout-card label {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checkout-card fieldset > label input {
    width: 280px;
}

.checkout-card fieldset > div {
    display: flex;
    gap: 17px;
    margin-top: 35px;
}

.checkout-card fieldset > div input {
    width: 132px;
}

.checkout-card fieldset > div label:last-child input {
    width: 72px;
}

.checkout-card__pay {
    margin: 40px 0 0 375px;
    min-width: 201px;
}

.checkout-card__close {
    position: absolute;
    top: 30px;
    left: 0;
    display: none;
}

/* Автокомпліт міста/відділення (checkout__city, checkout__pickup) */
.checkout__suggest {
    position: relative;
}

.checkout__suggest-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    max-height: 240px;
    margin: 0;
    padding: 6px;
    overflow: auto;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 12px;
    background: #1b1b1b;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.checkout__suggest-list.is-active {
    display: block;
}

.checkout__suggest-list li {
    padding: 9px 12px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.checkout__suggest-list li:hover {
    background: var(--blue);
}

/* Телефон з кодом країни */
.checkout__phone {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.checkout__phone-country {
    flex: 0 0 112px;
    width: 112px;
    height: 43px;
    padding: 0 26px 0 14px;
    border: 1px solid #999;
    border-radius: 23px;
    outline: 0;
    color: #fff;
    background: #1b1b1b url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="%23999" d="M4 6l4 4 4-4"/></svg>') no-repeat right 10px center / 10px;
    font: inherit;
    cursor: pointer;
    appearance: none;
}

.checkout__phone-input {
    flex: 1;
    min-width: 0;
}

.checkout__phone-input.phone-invalid {
    border-color: #e2574c;
    box-shadow: 0 0 0 1px #e2574c inset;
}

/* Intro Page
	========================================================================== */
.intro-page {
    overflow-x: hidden;
    background: #1b1b1b;
}

.intro-page .header {
    height: 160px;
}

.intro-page .header__controls,
.intro-page .menu-panel,
.intro-page .minicart {
    display: none;
}

.intro-screen {
    --intro-wrapper-w: min(calc(100% - 160px), 1760px);
    --intro-wrapper-left: calc((100% - var(--intro-wrapper-w)) / 2);
    --intro-col-w: calc((var(--intro-wrapper-w) - 50px) / 3);
    --intro-auto-left: calc(var(--intro-wrapper-left) + var(--intro-col-w) + 25px);
    --intro-heading-left: max(4.17%, calc((100% - 1760px) / 2));
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    max-height: 1080px;
    overflow: hidden;
    color: #fff;
    background: #1b1b1b;
}

.intro-screen__heading {
    position: absolute;
    z-index: 3;
    top: 22.78%;
    left: var(--intro-heading-left);
    /* Заголовок навмисно "запливає" під автомобільну картку (як у макеті) — цей max-width
       тримає ширину пропорційно відстані до картки, щоб на проміжних екранах текст
       вчасно переносився на 2 рядки, а не наростаюче наповзав на картку. */
    max-width: calc((var(--intro-auto-left) - var(--intro-heading-left)) / 0.7444);
}

.intro-screen__heading h1 {
    margin: 0;
    font-size: clamp(48px, 3.49vw, 67px);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1;
    text-transform: uppercase;
}

.intro-screen__heading h1 strong {
    color: var(--blue);
    font-weight: inherit;
}

.intro-screen__heading p {
    margin: 18px 0 0;
    font-size: clamp(10px, .84vw, 16px);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.intro-screen__cards-wrapper {
    position: absolute;
    z-index: 2;
    top: 12.2%;
    height: 74.4%;
    inset-inline: 0;
    margin-inline: auto;
    width: min(calc(100% - 160px), var(--container));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 56fr 44fr;
    gap: 25px;
}

.intro-card {
    container-type: inline-size;
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    border-radius: 40px;
    color: #171717;
    background: var(--blue);
}

.intro-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease;
}

.intro-card:hover > img {
    transform: scale(1.025);
}

.intro-card__copy {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.intro-card__copy b,
.intro-card__copy small {
    display: block;
    font: inherit;
}

.intro-card--textile {
    grid-column: 1;
    grid-row: 2;
    border: 1px solid #fff;
    color: var(--blue);
    background: #111;
}

.intro-card--textile::after,
.intro-card--nano::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(0, 0, 0, .34);
    content: '';
    pointer-events: none;
}

.intro-card--textile > img {
    object-position: center 45%;
}

.intro-card--textile .intro-card__copy {
    right: 38px;
    bottom: 46px;
    left: 38px;
}

.intro-card--textile .intro-card__copy b {
    font-size: clamp(14px, 9.12cqw, 52px);
}

.intro-card--textile .intro-card__copy small {
    margin-top: 9px;
    font-size: clamp(8px, 4.39cqw, 25px);
}

.intro-card__seal {
    position: absolute;
    z-index: 3;
    top: clamp(14px, 4.2cqw, 24px);
    right: clamp(13px, 4cqw, 23px);
    display: grid;
    width: clamp(60px, 18.2cqw, 104px);
    height: clamp(60px, 18.2cqw, 104px);
    place-items: center;
}

.intro-card__seal svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: seal-spin 14s linear infinite;
}

.intro-card__seal text {
    fill: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
}

.intro-card__seal i {
    width: clamp(18px, 4.9cqw, 28px);
    height: clamp(18px, 4.9cqw, 28px);
    border-radius: 50%;
    background: #fff;
}

.intro-card--automobile {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.intro-card--automobile > img {
    opacity: .68;
    filter: grayscale(1) contrast(1.2);
    mix-blend-mode: screen;
    object-position: center;
}

.intro-card--automobile .intro-card__copy {
    right: 42px;
    bottom: 76px;
    left: 42px;
    align-items: flex-end;
}

.intro-card--automobile .intro-card__copy b,
.intro-card--automobile .intro-card__copy small {
    font-size: clamp(16px, 10.53cqw, 60px);
}

.intro-card--automobile .intro-card__copy small {
    margin-top: clamp(8px, 6.67cqw, 38px);
    line-height: 1.7;
    text-align: right;
}

.intro-card__arrow {
    position: absolute;
    z-index: 4;
    width: clamp(48px, 14.6cqw, 83px);
    height: clamp(48px, 14.6cqw, 83px);
    border-top: clamp(8px, 2.5cqw, 14px) solid currentColor;
    border-right: clamp(8px, 2.5cqw, 14px) solid currentColor;
}

.intro-card__arrow::after {
    position: absolute;
    top: clamp(-8px, -1.4cqw, -5px);
    right: clamp(-4px, -0.7cqw, -3px);
    width: clamp(48px, 14.4cqw, 82px);
    height: clamp(8px, 2.5cqw, 14px);
    background: currentColor;
    content: '';
    transform: rotate(-45deg);
    transform-origin: right center;
}

.intro-card--automobile > .intro-card__arrow {
    top: clamp(35px, 15.4cqw, 88px);
    right: clamp(35px, 12.1cqw, 69px);
}

.intro-card--nano {
    grid-column: 3;
    grid-row: 1;
    border: 1px solid #fff;
    background: #070b03;
}

.intro-card--nano > img {
    filter: grayscale(1) sepia(1) hue-rotate(38deg) saturate(5) brightness(.58);
}

.intro-card--nano::after {
    background: rgba(0, 0, 0, .28);
}

.intro-card__nano-label {
    position: absolute;
    z-index: 3;
    top: clamp(40px, 12.98cqw, 74px);
    left: 50%;
    width: clamp(140px, 43.7cqw, 249px);
    height: clamp(140px, 43.7cqw, 249px);
    color: var(--blue);
    transform: translateX(-50%);
}

.intro-card__nano-label svg {
    width: 100%;
    height: 100%;
    animation: seal-spin 18s linear infinite reverse;
}

.intro-card__nano-label text {
    fill: currentColor;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: 2px;
}

.intro-card--nano > .intro-card__arrow {
    top: clamp(95px, 32.46cqw, 185px);
    left: 50%;
    color: var(--blue);
    transform: translate(-50%, -50%);
}

.intro-card--building {
    grid-column: 3;
    grid-row: 2;
}

.intro-card--building .intro-card__copy {
    top: 43px;
    right: 40px;
    left: 40px;
}

.intro-card--building .intro-card__copy b {
    font-size: clamp(14px, 10.53cqw, 60px);
}

.intro-card--building .intro-card__copy small {
    margin-top: 7px;
    font-size: clamp(8px, 4.39cqw, 25px);
}

.intro-card__line {
    position: absolute;
    right: clamp(130px, 41.75cqw, 238px);
    bottom: clamp(40px, 12.63cqw, 72px);
    left: clamp(22px, 7.02cqw, 40px);
    height: clamp(8px, 2.46cqw, 14px);
    background: #171717;
}

.intro-card--building > .intro-card__arrow {
    right: clamp(31px, 9.65cqw, 55px);
    bottom: clamp(27px, 6.84cqw, 39px);
}

.intro-screen__socials,
.intro-screen__copyright,
.intro-screen__credit,
.intro-screen__wordmark {
    position: absolute;
    z-index: 3;
}

.intro-screen__socials {
    right: 80px;
    bottom: 48px;
    display: flex;
    gap: 16px;
}

.intro-screen__socials a,
.intro-screen__socials svg {
    display: block;
    width: 32px;
    height: 32px;
}

.intro-screen__socials svg {
    fill: none;
    stroke: rgba(255, 255, 255, .48);
    stroke-width: 2;
}

.intro-screen__socials .is-fill {
    fill: rgba(255, 255, 255, .48);
    stroke: none;
}

.intro-screen__copyright,
.intro-screen__credit {
    bottom: 49px;
    margin: 0;
    font-size: 14px;
}

.intro-screen__copyright {
    left: 80px;
    color: rgba(255, 255, 255, .35);
}

.intro-screen__credit {
    display: none;
    left: 50%;
    transform: translateX(-50%);
}

.intro-screen__credit a {
    color: var(--blue);
    text-decoration: underline;
}

.intro-screen__wordmark {
    z-index: 0;
    right: 0;
    bottom: -43px;
    left: 0;
    overflow: hidden;
    color: rgba(0, 0, 0, .11);
    font-size: clamp(120px, 13.8vw, 265px);
    font-weight: 900;
    line-height: .75;
    text-align: center;
    white-space: nowrap;
}
@media (max-width: 1080px) {
    .intro-screen__cards-wrapper {
        height: 60%;
        width: min(calc(100% - 60px), var(--container));
    }
}
/* Legal (privacy policy)
	========================================================================== */
.legal-page {
    padding: 220px 0 120px;
}

.legal-page h1 {
    margin: 0;
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 900;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.legal-page__intro {
    max-width: 720px;
    margin: 24px 0 0;
    color: #555;
    font-size: 16px;
    line-height: 1.5;
}

.legal-page__body {
    max-width: 780px;
    margin: 56px 0 0;
    gap: 28px;
}

/* Auth modal (вхід/реєстрація)
	========================================================================== */
.auth-modal {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: grid;
    visibility: hidden;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: visibility .3s ease, opacity .3s ease;
}

.auth-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.auth-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .8);
    cursor: default;
}

.auth-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 44px;
    border: 1px solid #262626;
    border-radius: 34px;
    color: #fff;
    background: #161616;
    transform: translateY(16px);
    transition: transform .3s ease;
}

.auth-modal.is-open .auth-modal__panel {
    transform: translateY(0);
}

.auth-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #333;
    border-radius: 50%;
    color: #999;
    background: transparent;
    cursor: pointer;
}

.auth-modal__close svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.auth-modal__close:hover {
    color: var(--blue);
}

.auth-modal__eyebrow {
    margin: 0;
    color: #999;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.auth-modal__title {
    margin: 10px 0 0;
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
}

.auth-modal__title span {
    color: var(--blue);
}

.auth-modal__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 28px 0 0;
    padding: 4px;
    border: 1px solid #2a2a2a;
    border-radius: 50px;
}

.auth-modal__tab {
    padding: 11px 0;
    border: 0;
    border-radius: 50px;
    color: #999;
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.auth-modal__tab:hover {
    color: #fff;
}

.auth-modal__tab.is-active {
    color: #111;
    background: var(--blue);
}

.auth-modal__form {
    margin-top: 18px;
}

.auth-modal__field {
    position: relative;
    margin-top: 15px;
}

.auth-modal__field input {
    width: 100%;
    padding: 15px 0;
    border: 0;
    border-bottom: 1px solid #2e2e2e;
    outline: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: border-color .2s;
}

.auth-modal__field input::placeholder {
    color: #777;
}

.auth-modal__field input:focus {
    border-color: var(--blue);
}

.auth-modal__field--password input {
    padding-right: 40px;
}

.auth-modal__toggle-password {
    position: absolute;
    top: 50%;
    right: 0;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 0;
    color: #999;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.auth-modal__toggle-password svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-modal__toggle-password:hover {
    color: var(--blue);
}

.auth-modal__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 22px;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.auth-modal__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.auth-modal__remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

.auth-modal__forgot {
    border: 0;
    color: var(--blue);
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    cursor: pointer;
}

.auth-modal__forgot:hover {
    text-decoration: underline;
}

.auth-modal__submit {
    width: 100%;
    margin-top: 28px;
    padding: 16px 0;
    border: 1px solid var(--blue);
    border-radius: 50px;
    color: #111;
    background: var(--blue);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2em;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.auth-modal__submit:hover {
    color: var(--blue);
    background: transparent;
}

.auth-modal__note {
    margin: 24px 0 0;
    color: #666;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .15em;
}

/* Blog
	========================================================================== */
.blog-page {
    padding: 220px 0 120px;
}

.blog-page__title {
    margin: 12px 0 0;
    font-size: clamp(36px, 6vw, 74px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.blog-page__accent {
    color: var(--blue);
}

.blog-page__lead {
    max-width: 560px;
    margin: 24px 0 0;
    color: #999;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.blog-page__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 40px 0 0;
}

.blog-page__filter {
    padding: 13px 26px;
    border: 1px solid #333;
    border-radius: 50px;
    color: #999;
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}

.blog-page__filter:hover {
    color: #fff;
}

.blog-page__filter.is-active {
    border-color: var(--blue);
    color: #111;
    background: var(--blue);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 40px 0 0;
}

.blog-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #222;
    border-radius: 28px;
    color: #fff;
    background: #161616;
    text-decoration: none;
    transition: transform .25s;
}

.blog-card[hidden] {
    display: none;
}

.blog-card:hover {
    transform: translateY(-6px);
}

.blog-card__cover {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 20px;
    background: #161616;
}

.blog-card__cover img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card__cover--placeholder img {
    object-fit: contain;
    padding: 30px;
}

.blog-card__cover::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .75));
    content: '';
}

.blog-card__cover-label {
    position: relative;
    z-index: 2;
    padding: 7px 16px;
    border-radius: 50px;
    color: var(--blue);
    background: #111;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.blog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.blog-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    transition: color .2s;
}

.blog-card:hover .blog-card__title {
    color: var(--blue);
}

.blog-card__excerpt {
    margin: 12px 0 0;
    color: #999;
    font-size: 14px;
    line-height: 1.5;
}

.blog-card__meta {
    margin: auto 0 0;
    padding-top: 24px;
    color: #666;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.blog-grid__empty {
    margin: 40px 0 0;
    color: #999;
}

/* Blog post
	========================================================================== */
.blog-post {
    padding: 220px 0 120px;
}

.blog-post__inner {
    max-width: 820px;
}

.blog-post__back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s;
}

.blog-post__back:hover {
    color: var(--blue);
}

.blog-post__back-arrow {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    transform: rotate(45deg);
}

.blog-post__category {
    display: inline-block;
    margin-top: 24px;
    padding: 8px 18px;
    border-radius: 50px;
    color: #111;
    background: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.blog-post__title {
    margin: 18px 0 0;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.blog-post__meta {
    margin: 18px 0 0;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.blog-post__cover {
    aspect-ratio: 16 / 7;
    margin-top: 34px;
    overflow: hidden;
    border-radius: 32px;
    background: #161616;
}

.blog-post__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post__cover--placeholder img {
    object-fit: contain;
    padding: 40px;
}

.blog-post__body {
    max-width: 700px;
    margin-top: 42px;
}

.blog-post__body p {
    margin: 22px 0 0;
    color: #ccc;
    font-size: 17px;
    line-height: 1.7;
}

.blog-post__body h2 {
    margin: 34px 0 0;
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
}

.blog-post__body ul {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.blog-post__body li {
    position: relative;
    margin-top: 12px;
    padding-left: 22px;
    color: #ccc;
    font-size: 16px;
    line-height: 1.5;
}

.blog-post__body li::before {
    position: absolute;
    top: 9px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    content: '';
}

.blog-post__body blockquote {
    margin: 26px 0 0;
    padding: 26px;
    border-left: 4px solid var(--blue);
    border-radius: 24px;
    color: #fff;
    background: #161616;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
}

.blog-post__related {
    max-width: 700px;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid #222;
}

.blog-post__related h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase;
}

.blog-post__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.blog-post__related-card {
    padding: 20px;
    border: 1px solid #222;
    border-radius: 24px;
    color: #fff;
    background: #161616;
    text-decoration: none;
    transition: transform .25s;
}

.blog-post__related-card:hover {
    transform: translateY(-4px);
}

.blog-post__related-card span {
    color: var(--blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.blog-post__related-card p {
    margin: 10px 0 0;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

/* Account (особистий кабінет)
	========================================================================== */
.account-page {
    padding: 220px 0 120px;
}

.account-page__title {
    margin: 12px 0 0;
    font-size: clamp(36px, 6vw, 74px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.account-page__accent {
    color: var(--blue);
}

.account-page__guest {
    max-width: 520px;
    margin: 40px 0 0;
    padding: 48px;
    border: 1px solid #222;
    border-radius: 32px;
    text-align: center;
}

.account-page__guest p {
    margin: 0;
    color: #999;
}

.account-page__login-btn {
    margin-top: 24px;
    padding: 16px 36px;
    border: 1px solid var(--blue);
    border-radius: 50px;
    color: #111;
    background: var(--blue);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.account-page__login-btn:hover {
    color: var(--blue);
    background: transparent;
}

.account-page__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    margin-top: 32px;
}

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

.account-page__user-card {
    padding: 24px;
    border: 1px solid #222;
    border-radius: 24px;
}

.account-page__avatar {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    color: #111;
    background: var(--blue);
    font-size: 18px;
    font-weight: 900;
}

.account-page__user-name {
    margin: 16px 0 0;
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
}

.account-page__user-email {
    margin: 4px 0 0;
    overflow: hidden;
    color: #999;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-page__nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid #222;
    border-radius: 24px;
}

.account-page__nav a,
.account-page__signout {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 0;
    border-radius: 16px;
    color: #999;
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.account-page__nav a svg,
.account-page__signout svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-page__nav a:hover,
.account-page__signout:hover {
    color: #fff;
    background: #1e1e1e;
}

.account-page__nav a.is-active {
    color: #111;
    background: var(--blue);
}

.account-page__content {
    padding: 40px;
    border: 1px solid #222;
    border-radius: 32px;
}

.account-form__heading {
    margin-bottom: 24px;
}

.account-form--divider {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid #222;
}

.account-form__num {
    margin: 0;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
}

.account-form__heading h2 {
    margin: 8px 0 0;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.account-form__grid--three {
    grid-template-columns: repeat(3, 1fr);
}

.account-form__field label {
    display: block;
    margin-bottom: 8px;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.account-form input {
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid #2e2e2e;
    outline: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: border-color .2s;
}

.account-form input::placeholder {
    color: #777;
}

.account-form input:focus {
    border-color: var(--blue);
}

.account-form__submit {
    margin-top: 28px;
    padding: 16px 36px;
    border: 1px solid var(--blue);
    border-radius: 50px;
    color: #111;
    background: var(--blue);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.account-form__submit:hover {
    color: var(--blue);
    background: transparent;
}

.account-form__submit--outline {
    color: var(--blue);
    background: transparent;
}

.account-form__submit--outline:hover {
    color: #111;
    background: var(--blue);
}

/* Account: orders
	========================================================================== */
.account-orders {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-orders__item {
    border: 1px solid #222;
    border-radius: 20px;
    background: #161616;
}

.account-orders__item summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
    cursor: pointer;
    list-style: none;
}

.account-orders__item summary::-webkit-details-marker {
    display: none;
}

.account-orders__id {
    display: block;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.account-orders__date {
    display: block;
    margin-top: 4px;
    color: #999;
    font-size: 13px;
}

.account-orders__status {
    padding: 7px 16px;
    border-radius: 50px;
    background: #262626;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.account-orders__status.is-delivered {
    color: #111;
    background: var(--blue);
}

.account-orders__status.is-transit {
    border: 1px solid var(--blue);
    color: var(--blue);
    background: transparent;
}

.account-orders__status.is-cancelled {
    color: #777;
    text-decoration: line-through;
}

.account-orders__total {
    color: var(--blue);
    font-size: 18px;
    font-weight: 900;
}

.account-orders__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px 20px;
    border-top: 1px solid #222;
}

.account-orders__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding-top: 14px;
    font-size: 14px;
}

.account-orders__row span:last-child {
    color: #999;
}

/* Account: favorites
	========================================================================== */
.account-favorites {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.account-favorites__empty {
    color: #999;
}

.account-favorites__card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #222;
    border-radius: 20px;
    background: #161616;
}

.account-favorites__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.account-favorites__category {
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.account-favorites__remove {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    color: #999;
    background: transparent;
    cursor: pointer;
}

.account-favorites__remove svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-favorites__remove:hover {
    color: var(--blue);
}

.account-favorites__name {
    margin: 14px 0 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.account-favorites__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}

.account-favorites__old-price {
    margin: 0;
    color: #777;
    font-size: 13px;
    text-decoration: line-through;
}

.account-favorites__price {
    margin: 2px 0 0;
    color: var(--blue);
    font-size: 22px;
    font-weight: 900;
}

.account-favorites__cart-btn {
    padding: 12px 22px;
    border: 0;
    border-radius: 50px;
    color: #111;
    background: var(--blue);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s;
}

.account-favorites__cart-btn:hover {
    transform: translateY(-2px);
}

.account-favorites__cart-btn:disabled {
    color: #999;
    background: #2a2a2a;
    cursor: not-allowed;
    transform: none;
}

/* Reviews (відгуки клієнтів)
	========================================================================== */
.reviews-page {
    padding: 220px 0 120px;
}

.reviews-page__title {
    margin: 12px 0 0;
    font-size: clamp(36px, 6vw, 74px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.reviews-page__accent {
    color: var(--blue);
}

.reviews-page__lead {
    max-width: 560px;
    margin: 24px 0 0;
    color: #999;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.reviews-page__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin: 40px 0 0;
}

.reviews-page__control-label {
    display: block;
    margin-bottom: 10px;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.reviews-page__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reviews-page__pill {
    padding: 11px 20px;
    border: 1px solid #333;
    border-radius: 50px;
    color: #999;
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}

.reviews-page__pill:hover {
    color: #fff;
}

.reviews-page__pill.is-active {
    border-color: var(--blue);
    color: #111;
    background: var(--blue);
}

.reviews-page__layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    margin-top: 40px;
}

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

.reviews-page__panel {
    padding: 28px;
    border: 1px solid #222;
    border-radius: 28px;
    background: #161616;
}

.reviews-page__panel-num {
    margin: 0;
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
}

.reviews-page__panel-title {
    margin: 8px 0 0;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
}

.reviews-page__score {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.reviews-page__score-value {
    font-size: 56px;
    font-weight: 900;
    line-height: .9;
}

.reviews-page__score-max {
    padding-bottom: 6px;
    color: #999;
    font-size: 14px;
}

.reviews-page__stars {
    display: flex;
    gap: 3px;
    margin-top: 12px;
}

.reviews-page__stars svg {
    width: 18px;
    height: 18px;
    fill: #2a2a2a;
}

.reviews-page__stars svg.is-full,
.reviews-page__stars svg.is-half {
    fill: var(--blue);
}

.reviews-page__stars--sm svg {
    width: 14px;
    height: 14px;
}

.reviews-page__score-note {
    margin: 14px 0 0;
    color: #999;
    font-size: 13px;
}

.reviews-page__distribution {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.reviews-page__distribution-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reviews-page__distribution-star {
    width: 24px;
    color: #999;
    font-size: 13px;
    font-weight: 700;
}

.reviews-page__distribution-bar {
    display: block;
    flex: 1;
    height: 8px;
    border-radius: 50px;
    background: #262626;
    overflow: hidden;
}

.reviews-page__distribution-bar span {
    display: block;
    height: 100%;
    border-radius: 50px;
    background: var(--blue);
}

.reviews-page__distribution-count {
    width: 30px;
    color: #999;
    font-size: 12px;
    font-weight: 700;
    text-align: right;
}

.reviews-page__list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.reviews-page__list-count {
    color: #999;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.reviews-page__empty {
    margin-top: 20px;
    padding: 28px;
    border: 1px solid #222;
    border-radius: 28px;
    color: #999;
    background: #161616;
}

.reviews-page__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.reviews-page__card {
    padding: 24px;
    border: 1px solid #222;
    border-radius: 28px;
    background: #161616;
}

.reviews-page__card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.reviews-page__card-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reviews-page__card-author b {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.reviews-page__card-author small {
    display: block;
    margin-top: 3px;
    color: #999;
    font-size: 12px;
}

.reviews-page__avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #111;
    background: var(--blue);
    font-size: 15px;
    font-weight: 900;
}

.reviews-page__card-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 260px;
}

.reviews-page__product {
    display: -webkit-box;
    overflow: hidden;
    color: #999;
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

a.reviews-page__product:hover {
    color: var(--blue);
    text-decoration: underline;
}

.reviews-page__card-text {
    margin: 18px 0 0;
    color: #ccc;
    font-size: 15px;
    line-height: 1.55;
}

.reviews-page__prom-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s;
}

.reviews-page__prom-link svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reviews-page__prom-link:hover {
    color: var(--blue);
}

.reviews-page__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 32px;
}

.reviews-page__page-nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #333;
    border-radius: 50%;
    color: #fff;
    background: transparent;
    cursor: pointer;
    transition: border-color .2s, color .2s, opacity .2s;
}

.reviews-page__page-nav svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reviews-page__page-nav:hover:not(:disabled) {
    border-color: var(--blue);
    color: var(--blue);
}

.reviews-page__page-nav:disabled {
    color: #444;
    cursor: default;
    opacity: .5;
}

.reviews-page__page-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.reviews-page__page {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0 4px;
    border: 1px solid #333;
    border-radius: 50%;
    color: #999;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: color .2s, border-color .2s, background-color .2s;
}

.reviews-page__page:hover {
    color: #fff;
}

.reviews-page__page.is-active {
    border-color: var(--blue);
    color: #111;
    background: var(--blue);
}

/* Product reviews (відгуки про конкретний товар, catalog.php)
	========================================================================== */
.product-reviews {
    padding: 70px 0;
}

.product-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.product-reviews__title {
    margin: 10px 0 0;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    text-transform: uppercase;
}

.product-reviews__title span {
    color: var(--blue);
}

.product-reviews__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #999;
    font-size: 14px;
    font-weight: 700;
}

.product-reviews__stars {
    display: flex;
    gap: 2px;
}

.product-reviews__stars svg {
    width: 16px;
    height: 16px;
    fill: #2a2a2a;
}

.product-reviews__stars svg.is-full,
.product-reviews__stars svg.is-half {
    fill: var(--blue);
}

.product-reviews__add {
    flex: 0 0 auto;
    padding: 15px 30px;
    border: 1px solid var(--blue);
    border-radius: 50px;
    color: var(--blue);
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.product-reviews__add:hover {
    color: #111;
    background: var(--blue);
}

.product-reviews__empty {
    margin-top: 28px;
    color: #999;
}

.product-reviews__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
}

.product-reviews__card {
    padding: 22px;
    border: 1px solid #222;
    border-radius: 24px;
    background: #161616;
}

.product-reviews__card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.product-reviews__card-top b {
    display: block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.product-reviews__card-top small {
    display: block;
    margin-top: 2px;
    color: #999;
    font-size: 11px;
}

.product-reviews__card-stars {
    display: flex;
    gap: 2px;
    margin-left: auto;
}

.product-reviews__card-stars svg {
    width: 13px;
    height: 13px;
    fill: #2a2a2a;
}

.product-reviews__card-stars svg.is-full,
.product-reviews__card-stars svg.is-half {
    fill: var(--blue);
}

.product-reviews__avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #111;
    background: var(--blue);
    font-size: 13px;
    font-weight: 900;
}

.product-reviews__card p {
    margin: 16px 0 0;
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
}

/* Review modal (форма "Залишити відгук")
	========================================================================== */
.review-modal {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: grid;
    visibility: hidden;
    place-items: center;
    padding: 20px;
    opacity: 0;
    transition: visibility .3s ease, opacity .3s ease;
}

.review-modal.is-open {
    visibility: visible;
    opacity: 1;
}

.review-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, .8);
    cursor: default;
}

.review-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 44px;
    border: 1px solid #262626;
    border-radius: 34px;
    color: #fff;
    background: #161616;
    transform: translateY(16px);
    transition: transform .3s ease;
}

.review-modal.is-open .review-modal__panel {
    transform: translateY(0);
}

.review-modal__close {
    position: absolute;
    top: 22px;
    right: 22px;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #333;
    border-radius: 50%;
    color: #999;
    background: transparent;
    cursor: pointer;
}

.review-modal__close svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.review-modal__close:hover {
    color: var(--blue);
}

.review-modal__eyebrow {
    margin: 0;
    color: #999;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.review-modal__title {
    margin: 10px 0 0;
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
}

.review-modal__title span {
    color: var(--blue);
}

.review-modal__form {
    margin-top: 24px;
}

.review-modal__field {
    margin-top: 18px;
}

.review-modal__field label {
    display: block;
    margin-bottom: 8px;
    color: #999;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.review-modal__field input,
.review-modal__field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #2e2e2e;
    border-radius: 16px;
    outline: 0;
    color: #fff;
    background: #1b1b1b;
    font: inherit;
    font-size: 14px;
    resize: vertical;
    transition: border-color .2s;
}

.review-modal__field input::placeholder,
.review-modal__field textarea::placeholder {
    color: #777;
}

.review-modal__field input:focus,
.review-modal__field textarea:focus {
    border-color: var(--blue);
}

.review-modal__rating {
    display: flex;
    gap: 6px;
}

.review-modal__star {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.review-modal__star svg {
    width: 26px;
    height: 26px;
    fill: #2a2a2a;
    transition: fill .15s;
}

.review-modal__star.is-active svg,
.review-modal__star.is-hover svg {
    fill: var(--blue);
}

.review-modal__error {
    margin: 16px 0 0;
    color: #ff6b6b;
    font-size: 12px;
}

.review-modal__submit {
    width: 100%;
    margin-top: 24px;
    padding: 16px 0;
    border: 1px solid var(--blue);
    border-radius: 50px;
    color: #111;
    background: var(--blue);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.review-modal__submit:hover {
    color: var(--blue);
    background: transparent;
}

.review-modal__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 0;
    text-align: center;
}

.review-modal__success svg {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 50%;
    background: var(--blue);
    fill: none;
    stroke: #111;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.review-modal__success p {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
}

.review-modal__note {
    margin: 20px 0 0;
    color: #666;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ===== Галерея "Hydrophob в дії" (каталог) ===== */

.action-gallery {
    padding: 90px 0 40px;
    border-top: 1px solid #171717;
}

.action-gallery__head {
    margin-bottom: 40px;
}

.action-gallery__title {
    margin: 14px 0 0;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800;
    text-transform: uppercase;
}

.action-gallery__lead {
    max-width: 520px;
    margin: 16px 0 0;
    color: #999;
    font-size: 15px;
    line-height: 1.5;
}

.action-gallery__track {
    display: flex;
    gap: 16px;
    padding: 0 max(20px, calc((100vw - var(--container)) / 2)) 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--blue) #1a1a1a;
}

.action-gallery__item,
.howto-videos__item {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #1a1a1a;
    scroll-snap-align: start;
}

.action-gallery__item {
    width: min(480px, 82vw);
}

.action-gallery__item video,
.howto-videos__item video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.action-gallery__play {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.action-gallery__play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(21, 21, 21, .75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2332c6f4' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 26px no-repeat;
    transform: translate(-50%, -50%);
    transition: background-color .2s, transform .2s;
}

.action-gallery__play:hover::before {
    background-color: rgba(21, 21, 21, .95);
    transform: translate(-50%, -50%) scale(1.08);
}

[data-action-item].is-playing .action-gallery__play {
    display: none;
}

.action-gallery__caption,
.howto-videos__item figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    margin: 0;
    padding: 40px 16px 12px;
    background: linear-gradient(to top, rgba(17, 17, 17, .85), transparent);
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
}

[data-action-item].is-playing .action-gallery__caption,
[data-action-item].is-playing figcaption {
    display: none;
}

.action-gallery__caption span {
    display: inline-block;
    margin-right: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--blue);
    color: #111;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ===== Відео "Як застосовувати" (про нас) ===== */

.howto-videos {
    padding: 90px 0;
    border-top: 1px solid #171717;
}

.howto-videos__heading h2 {
    margin: 14px 0 0;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 800;
    text-transform: uppercase;
}

.howto-videos__heading p:not(.section-label) {
    max-width: 520px;
    margin: 16px 0 0;
    color: #999;
    font-size: 15px;
    line-height: 1.5;
}

.howto-videos__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
}

@media (max-width: 767px) {
    .action-gallery,
    .howto-videos {
        padding-top: 60px;
    }

    .howto-videos__grid {
        grid-template-columns: 1fr;
    }
}