/* 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;
}

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;
}

.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: 64px;
    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;
}
.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: -62px;
    width: 36px;
    height: 36px;
    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: -68px;
    width: 40px;
    height: 6px;
    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-bg.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__media,
.hero__video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero__media {
    z-index: 0;
    overflow: hidden;
    background: #090909 url('../img/hero-bg.webp') center center / cover no-repeat;
}

.hero__video {
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .35s ease;
}

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

.hero__video-controls {
    position: absolute;
    z-index: 3;
    top: 143px;
    right: 80px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

/* Уніфікований вигляд play/pause та гучності — однаковий у hero й reviews */
.hero__play-toggle,
.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__video {
        opacity: 1;
    }

    .hero__video-controls {
        display: 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;
    height: 820px;
}

.catalog__slider {
    position: absolute;
    top: 197px;
    left: 50%;
    width: 100%;
    overflow: visible;
    opacity: 0;
    transform: translateX(-50%);
    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: 73px;
    bottom: 8px;
    width: 338px;
    height: 702px;
    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;
}

.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;
}

@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;
    right: 0;
    bottom: 65px;
    left: 0;
}

.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;
    max-width: 40%;
}

.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: 50px;
    }
}
@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;
}

/* 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__credit {
    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: 18px auto 0 30%;
}

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

/* 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;
    min-height: 100vh;
}

.about-page-hero h1 {
    position: absolute;
    top: 240px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 20px 0;
    margin: 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 {
    position: absolute;
    bottom: 62px;
    left: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

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

.offer-page {
    min-height: 1030px;
    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;
    min-height: 100vh;
}

.experience-page__media {
    position: absolute;
    top: 150px;
    left: 0;
    width: 724px;
    max-width: 54%;
    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 {
    position: absolute;
    top: 150px;
    right: 0;
    width: 45%;
    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 {
    position: absolute;
    right: 0;
    bottom: 40px;
    left: 0;
    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;
}

.guarantee-hero__copy {
    position: absolute;
    top: 353px;
    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 span {
    width: 70px;
    height: 70px;
    border: 0;
    border-radius: 0;
    background-position: center;
    background-size: cover;
}

.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-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.jpg');
    background-position: 50% center;
}

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

.delivery-panel--meest {
    background-image: url('../img/pages/delivery/meest-bg.jpg');
    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__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 + 150px);
    padding-top: 150px;
}

.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;
}
.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: 1;
    cursor: pointer;
}
.catalog-product__filter {
    position: absolute;
    z-index:111;
    top: 220px;
    right: 0;
    left: 0;
    padding: 28px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(16px);
}

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

.catalog-product__filter input {
    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__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;
    display: flex;
    width: 149px;
    align-items: center;
    justify-content: space-between;
}

.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__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;
}

.catalog-product__copy > p {
    font-size: 13px;
    line-height: 1.35;
}

.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__thumbs img.is-scene {
    object-fit: cover;
}
.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: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid #171717;
    border-radius: 50%;
    background: none;
    color: #171717;
    font-size: 16px;
    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: 127px 0 80px;
    overflow: hidden;
}

.product-description::after {
    position: absolute;
    bottom: -38px;
    left: 80px;
    color: #fafafa;
    content: 'HYDROPHOB';
    font-size: 158px;
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: .8;
    pointer-events: none;
}

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

.product-description__panel .text-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 28px;
    margin: 14px 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: 14px 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: 15px;
}

.product-gallery img {
    aspect-ratio: 1 / 1;
    width: 100%;
    border: 1px solid #d5d5d5;
    border-radius: 8px;
    object-fit: contain;
    background: #fafafa;
}

/* Product Video
	========================================================================== */
.product-video {
    position: relative;
    height: 932px;
    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: 932px;
}

.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: -95px;
    left: 50%;
    width: 230px;
    transform: translateX(-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 {
    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: max(4.17%, calc((100% - 1760px) / 2));
}

.intro-screen__heading h1 {
    max-width: 910px;
    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-card {
    position: absolute;
    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 {
    top: 45.65%;
    left: 4.17%;
    width: 30.16%;
    height: 41.11%;
    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(31px, 2.71vw, 52px);
}

.intro-card--textile .intro-card__copy small {
    margin-top: 9px;
    font-size: clamp(15px, 1.3vw, 25px);
}

.intro-card__seal {
    position: absolute;
    z-index: 3;
    top: 24px;
    right: 23px;
    display: grid;
    width: 104px;
    height: 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: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
}

.intro-card--automobile {
    top: 12.04%;
    left: 34.9%;
    width: 30.16%;
    height: 74.72%;
}

.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(42px, 3.13vw, 60px);
}

.intro-card--automobile .intro-card__copy small {
    margin-top: 38px;
    line-height: 1.7;
    text-align: right;
}

.intro-card__arrow {
    position: absolute;
    z-index: 4;
    width: 83px;
    height: 83px;
    border-top: 14px solid currentColor;
    border-right: 14px solid currentColor;
}

.intro-card__arrow::after {
    position: absolute;
    top: -8px;
    right: -4px;
    width: 82px;
    height: 14px;
    background: currentColor;
    content: '';
    transform: rotate(-45deg);
    transform-origin: right center;
}

.intro-card--automobile > .intro-card__arrow {
    top: 88px;
    right: 69px;
}

.intro-card--nano {
    top: 12.04%;
    left: 65.73%;
    width: 30.16%;
    height: 41.11%;
    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: 74px;
    left: 50%;
    width: 249px;
    height: 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: 185px;
    left: 50%;
    color: var(--blue);
    transform: translate(-50%, -50%);
}

.intro-card--building {
    top: 54.35%;
    left: 65.73%;
    width: 30.16%;
    height: 32.41%;
}

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

.intro-card--building .intro-card__copy b {
    font-size: clamp(38px, 3.13vw, 60px);
}

.intro-card--building .intro-card__copy small {
    margin-top: 7px;
    font-size: clamp(16px, 1.3vw, 25px);
}

.intro-card__line {
    position: absolute;
    right: 238px;
    bottom: 72px;
    left: 40px;
    height: 14px;
    background: #171717;
}

.intro-card--building > .intro-card__arrow {
    right: 55px;
    bottom: 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 {
    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;
}