@import url(../fonts/fonts.css);

:root {
    --red: #ff2800;
    --gray: #e6e6e6;
    --soft: #f7f7f7 ;
    --black: #000;
    --shell: min(100% - 128px, 1792px);
    --ease: cubic-bezier(.22, .61, .36, 1);
    --white: #fff;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--soft);
    color: var(--black);
    font-family: "Gotham Pro", Montserrat, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.35;
    -webkit-font-smoothing: antialiased
}

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

button,
input {
    font: inherit
}

button {
    color: inherit
}

img,
svg {
    display: block;
    max-width: 100%
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.shell {
    width: var(--shell);
    margin-inline: auto
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -100px;
    z-index: 1000;
    padding: 12px 18px;
    background: #fff;
    color: #000;
    transition: top .2s
}

.skip-link:focus {
    top: 16px
}

.topbar {
    height: 34px;
    background: #000;
    color: #fff;
    font-size: 11px;
    position: relative;
    z-index: 20
}

.topbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.topbar nav,
.topbar__contact {
    display: flex;
    gap: 32px;
    align-items: center
}

.topbar a {
    font-weight: 500;
    transition: color ease-in-out .2s;
    font-size: 14px;
    line-height: 1.2;
}

.topbar a:hover,
.topbar a:focus-visible {
    color: var(--red);
}

.contact__tel{
    font-size: 16px;
    line-height: 1.1;
}

.header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    z-index: 90;
    color: #fff;
    border-top: 1px solid rgba(255, 40, 0, .45);
    isolation: isolate;
    transition: border-color .25s ease, box-shadow .25s ease;
}

/*
 * The header remains in the document flow so position: sticky works correctly.
 * Pull main content back under it to preserve the original overlay-on-hero layout.
 */
.header + main {
    margin-top: -62px;
}

.header::before,
.header::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    pointer-events: none;
}

/* Compact surface used once the header is pinned while scrolling. */
.header::before {
    height: 100%;
    background: rgba(3, 3, 3, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: background .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}

.header.header--scrolled {
    border-top-color: rgba(255, 255, 255, .08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

.header.header--scrolled::before {
    background: rgba(3, 3, 3, .92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

/* One continuous surface behind BOTH the header and the opened catalog menu. */
.header::after {
    height: calc(100% + 576px);
    opacity: 0;
    background:
        radial-gradient(circle at 18% 54%, rgba(91, 39, 30, .28), transparent 23%),
        radial-gradient(circle at 57% 29%, rgba(126, 44, 14, .25), transparent 26%),
        radial-gradient(circle at 88% 56%, rgba(89, 18, 13, .19), transparent 26%),
        rgba(3, 0, 0, .985);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .38);
    transition: opacity .22s ease;
}

.header.header--catalog-open {
    border-top-color: rgba(255, 40, 0, .45);
    box-shadow: none;
}

.header.header--catalog-open::after {
    opacity: 1;
}

.header__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: 168px minmax(440px, auto) minmax(360px, 1fr) auto;
    gap: 56px;
    align-items: center
}

.header.header--scrolled:not(.header--catalog-open) .search {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.header__item{
    display: flex;
    align-items: center;
    width: 100%;
    gap: 38px;
}

.brand {
    display: flex;
    align-items: center;
    width: 168px;
    white-space: nowrap
}

.brand img {
    width: 168px;
    height: 34px;
    transition: opacity .2s
}

.brand:hover img {
    opacity: .82
}

.main-nav {
    display: flex;
    gap: 24px;
    align-items: center;
}

.main-nav a {
    position: relative;
    padding-block: 22px;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
}

.main-nav a:after {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 100%;
    bottom: 17px;
    background: var(--red);
    transition: right .25s
}

.main-nav a:hover:after,
.main-nav a:focus-visible:after {
    right: 0
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px
}

.search {
    height: 42px;
    display: flex;
    align-items: center;
    background: rgba(247, 247, 247, .2);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
    width: 100%;
}

.search input {
    min-width: 0;
    flex: 1;
    height: 100%;
    padding: 0 16px;
    border: 0;
    background: transparent;
    outline: 0;
    color: var(--white);
    font-size: 14px;
}

.search input::placeholder {
    color: rgba(255, 255, 255, .72)
}

.search:focus-within {
    border-color: #fff;
    background: rgba(0, 0, 0, .3)
}

.search button {
    width: 42px;
    height: 100%;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    cursor: pointer
}

.search button img,
.header-actions img {
    width: 18px;
    height: 18px
}

.header-actions {
    display: flex;
    gap: 24px;
    align-items: center
}

.header-actions a {
    position: relative;
    width: 18px;
    height: 18px;
}

.header-actions a img {
    transition: transform .2s, opacity .2s
}

.header-actions a:hover img {
    transform: translateY(-2px);
    opacity: .8
}

.cart-count {
    position: absolute;
    top: -2px;
    right: -3px;
    display: grid;
    place-items: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 50%;
    background: var(--red);
    font-size: 9px;
    font-weight: 700
}


/* Header dropdowns */
.topbar-nav {
    overflow: visible;
}

.topbar-menu {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.topbar-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.topbar-menu__trigger img {
    width: 9px;
    height: 6px;
    transition: transform .2s var(--ease);
}

.topbar-menu:hover .topbar-menu__trigger img,
.topbar-menu:focus-within .topbar-menu__trigger img {
    transform: rotate(180deg);
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% - 1px);
    left: -18px;
    z-index: 80;
    width: 225px;
    padding: 12px 0;
    background: rgba(4, 4, 4, .98);
    border-top: 1px solid rgba(255, 40, 0, .72);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.topbar-dropdown--wide {
    width: 250px;
}

.topbar-dropdown a {
    display: block;
    padding: 10px 18px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
    color: rgba(255, 255, 255, .88);
    transition: color .18s ease, background .18s ease, padding-left .18s ease;
}

.topbar-dropdown a:hover,
.topbar-dropdown a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    padding-left: 22px;
}

.topbar-menu:hover .topbar-dropdown,
.topbar-menu:focus-within .topbar-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* Catalog trigger */
.catalog-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 22px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.catalog-trigger::after {
    content: "";
    position: absolute;
    height: 2px;
    left: 0;
    right: 100%;
    bottom: 17px;
    background: var(--red);
    transition: right .25s;
}

.catalog-trigger:hover::after,
.catalog-trigger:focus-visible::after,
.catalog-trigger[aria-expanded="true"]::after {
    right: 0;
}

.catalog-trigger__icon {
    width: 17px;
    height: 12px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.catalog-trigger__icon i {
    display: block;
    width: 17px;
    height: 1px;
    background: currentColor;
    transition: transform .22s var(--ease), width .22s var(--ease);
}


/* Catalog mega menu */
.catalog-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 3;
    height: 576px;
    color: #fff;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    overflow: hidden;
    transition: opacity .22s ease, transform .22s var(--ease), visibility .22s;
}

.catalog-mega.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.catalog-mega__inner {
    height: 100%;
    padding-top: 24px;
}

.catalog-mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.catalog-mega__column {
    min-width: 0;
}

.catalog-mega__image {
    display: block;
    height: 108px;
    overflow: hidden;
    background: #252525;
}

.catalog-mega__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--ease), opacity .25s ease;
}

.catalog-mega__image:hover img,
.catalog-mega__image:focus-visible img {
    transform: scale(1.025);
    opacity: .9;
}

.catalog-mega__column h2 {
    margin: 27px 0 20px;
    font-size: 17px;
    line-height: 1.2;
    text-transform: uppercase;
}

.catalog-mega__column h2 a {
    transition: color .18s ease;
}

.catalog-mega__column h2 a:hover,
.catalog-mega__column h2 a:focus-visible {
    color: var(--red);
}

.catalog-mega__column nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.catalog-mega__column nav a {
    font-size: 14px;
    line-height: 1.28;
    color: rgba(255, 255, 255, .78);
    transition: color .18s ease, transform .18s ease;
}

.catalog-mega__column nav a:hover,
.catalog-mega__column nav a:focus-visible {
    color: #fff;
    transform: translateX(3px);
}

.catalog-mega__bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding-top: 37px;
}

.catalog-mega__quick {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-right: 72px;
}

.catalog-mega__quick a {
    position: relative;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color .18s ease;
}

.catalog-mega__quick a:hover,
.catalog-mega__quick a:focus-visible,
.catalog-mega__quick .is-red {
    color: var(--red);
}

.catalog-mega__all span {
    display: inline-block;
    margin-left: 4px;
    font-size: 22px;
    line-height: 12px;
    transform: translateY(2px);
}

.catalog-mega__promo {
    position: relative;
    display: block;
    width: 100%;
    height: 109px;
    overflow: hidden;
}

.catalog-mega__promo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s var(--ease), filter .25s ease;
}

.catalog-mega__promo:hover img,
.catalog-mega__promo:focus-visible img {
    transform: scale(1.02);
    filter: brightness(1.06);
}

.hero {
    position: relative;
    height: clamp(720px, 48.333vw, 928px);
    color: #fff;
    background: #280b06 url("../images/hero.png") center/cover no-repeat;
    overflow: hidden;
    transition: background-image .45s ease
}

.hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, .63) 0, rgba(0, 0, 0, .22) 52%, rgba(0, 0, 0, .35) 100%), linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .18))
}

.hero__content {
    position: relative;
    z-index: 2;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-top: 64px;
}

.hero h1 {
    max-width: 880px;
    margin: 0;
    font-size: clamp(64px, 3.9vw, 74px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

.hero__copy {
    max-width: 890px;
    margin: 56px 0;
    font-size: 18px;
    color: var(--white);
    font-weight: 100;
    line-height: 1.2;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 1px solid transparent;
    font-size: 14px;
    letter-spacing: 0;
    font-weight: 500;
    line-height: 1.2;
    transition: background .2s, color .2s, border-color .2s, transform .2s
}

.btn:hover {
    transform: translateY(-1px)
}

.btn--glass {
    color: #fff;
    background: rgba(255,255,255, .1);
    border-color: rgba(255,255,255, .1);
    backdrop-filter: blur(6px)
}

.btn--glass:hover {
    background: rgba(255,255,255, .2);
    border-color: var(--white);
}

.btn--red {
    background: var(--red);
    color: #fff
}

.btn--red-linear {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, #FF2800, #00000000);
    border-right: 0;
}

.btn--red-linear img{
    filter: brightness(0) saturate(100%) invert(20%) sepia(99%) saturate(7495%) hue-rotate(359deg) brightness(104%) contrast(118%);
}

.btn--red-linear::before {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #FF2800, #ff260042);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.btn--red-linear:hover::before {
    opacity: 1;
}

.btn--red:hover {
    background: #FF5333
}

.btn--red img {
    transition: transform .2s
}

.btn--red:hover img {
    transform: translateX(4px)
}

.hero__controls {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.hero__progress {
    height: 1px;
    background: rgba(255, 255, 255, .2);
    display: flex;
    flex: 1;
    margin-right: 24px;
}

.hero__progress i {
    height: 2px;
    flex: 1;
    margin-top: -1px;
    background: transparent;
    transition: background .25s
}

.hero__progress i.is-active {
    background: rgba(255, 255, 255, .5);
}

.hero__arrows,
.section__arrows {
    display: flex;
    gap: 14px
}

.hero__arrows button,
.section__arrows button {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .05);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: .2s;
    backdrop-filter: blur(6px);
}

.hero__arrows button:hover {
    border: 1px solid var(--white);
}

.hero__arrows button img {
    width: 18px;
    height: 15px
}

.hero__arrows button:first-child img {
    transform: rotate(180deg)
}

.section {
    padding: 64px 0;
    background: var(--soft)
}

.section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 38px
}

.section__head h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1
}

.section__arrows button {
    border-color: #d7d7d7;
    background: #fff;
    color: #000
}

.section__arrows button:hover {
    border-color: #000
}

.products {
    overflow: hidden;
    padding-top: 66px;
    padding-bottom: 54px
}

.product-viewport {
    position: relative;
    overflow: hidden;
    padding-left: max(64px, calc((100vw - 1792px)/2))
}

.product-track {
    display: flex;
    gap: 16px;
    transition: transform .45s var(--ease);
    will-change: transform
}

.product-card {
    position: relative;
    flex: 0 0 clamp(436px, 23.2vw, 445px);
    height: 100%;
    background: #fff;
    border: 1px solid #eee;
    overflow: hidden;
    transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.product-card:hover,
.product-card:focus-within {
    border-color: #dedede;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .08)
}

.product-card__visual {
    height: 100%;
    max-height: 436px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}

.product-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__favorite {
    position: absolute;
    z-index: 4;
    top: 18px;
    right: 18px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    transition: opacity .2s, background .2s;
}

.product-card__favorite svg {
    width: 100%;
    height: 100%;
    filter: invert(1);
}

.product-card:hover .product-card__favorite,
.product-card:focus-within .product-card__favorite {
    opacity: 1
}

.product-card__favorite.is-active svg {
    fill: white;
}

.product-card__quick {
    position: absolute;
    z-index: 2;
    width: 100%;
    bottom: 75px;
    height: fit-content;
    padding: 16px;
    clip-path: inset(0);
    opacity: 0;
    transform: translateY(18px);
    backdrop-filter: blur(15px);
    pointer-events: none;
    transition: opacity .3s var(--ease), transform .35s var(--ease);
}

.product-card__quick::before{
    content: '';
    position: absolute;
    width: 100%;
    height: calc(100% + 1px);
    background: linear-gradient(1deg, #ffffff, #ffffff91);
    left: 0;
    bottom: -1px;
    z-index: -1;
}

.product-card:hover .product-card__quick,
.product-card:focus-within .product-card__quick {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.product-card__quick ul {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    font-size: 11px;
    line-height: 1.35
}

.product-card__quick li {
    position: relative;
    margin: 0 0 6px;
    padding-left: 11px;
    font-size: 12px;
    font-weight: 100;
}

.product-card__quick li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: 4px;
    height: 4px;
    background: var(--red)
}

.product-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    color: #8a8a8a;
    font-size: 10px
}

.product-option>span {
    min-width: 38px;
    padding-top: 4px
}

.product-card__swatches,
.product-card__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.product-card__swatches button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #dadada;
    background: var(--swatch);
    outline: 1px solid transparent;
    outline-offset: 1px;
    cursor: pointer
}

.product-card__swatches button.is-active {
    outline-color: #000;
}

.product-card__sizes button {
    min-width: 26px;
    height: 22px;
    padding: 0 5px;
    border: 1px solid #dedede;
    background: #fff;
    color: #8c8c8c;
    font-size: 9px;
    cursor: pointer
}

.product-card__sizes button:hover,
.product-card__sizes button.is-active {
    color: #fff;
    background: #E6E6E6;
}

.product-card__body {
    position: relative;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-card__body>a {
    display: block;
    font-size: 16px;
    line-height: 0.5;
    font-weight: 100;
}

.product-card__body strong {
    font-size: 18px;
    font-weight: 500;
}

.product-card__body s {
    margin-left: 16px;
    color: #808080;
    font-size: 12px;
    font-weight: 500;
}

.product-card__add {
    position: absolute;
    right: 16px;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 39px;
    height: 39px;
    border: 1px solid #dadada;
    background: #fff;
    font-size: 21px;
    font-weight: 300;
    cursor: pointer;
    transition: .2s;
}

.product-card__add:hover {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

.products__more {
    text-align: right;
    padding-top: 32px
}

.products__more a,
.news__all a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    position: relative;
}

.products__more a::after,
.news__all a::after {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -2px;
    background: #000;
    transition: all 0.2s ease-in-out;
    left: 0;
    right: 0;
    margin: auto;
}

.products__more img,
.news__all img {
    width: 14px;
    height: 12px
}

.products__more a,
.news__all a {
    transition: color .2s
}

.products__more a:hover,
.news__all a:hover {
    color: var(--red)
}

.products__more a:hover::after,
.news__all a:hover::after {
    background: var(--red);
    width: 85%;
}

.product-nav {
    position: absolute;
    z-index: 6;
    top: 50%;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #F2F2F2;
    background: #FBFBFB;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s, border-color .2s;
}

.product-nav:hover {
    border: 2px solid var(--black);
}

.product-nav img {
    width: 16px;
    height: 14px;
    filter: invert(1)
}

.product-nav--prev {
    left: 16px
}

.product-nav--next {
    right: 16px
}

.product-nav--prev img {
    transform: rotate(180deg)
}

.categories {
    background: #fff
}

.feature {
    position: relative;
    min-height: 660px;
    overflow: hidden;
    color: #fff
}

.feature__image,
.feature__overlay {
    position: absolute;
    inset: 0
}

.feature__image {
    background-position: center;
    background-size: cover;
    transition: transform 1s var(--ease)
}

.feature:hover .feature__image {
    transform: scale(1.025)
}

.feature__overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, .63), rgba(0, 0, 0, .06) 72%);
    transition: background .35s
}

.feature:hover .feature__overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, .69), rgba(0, 0, 0, .13) 72%)
}

.feature__content {
    position: relative;
    z-index: 2;
    min-height: 660px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.feature h2 {
    margin: 0 0 18px;
    font-size: 36px;
    line-height: 1.05
}

.feature p {
    max-width: 680px;
    margin: 0 0 28px;
    color: rgba(255, 255, 255, .85);
    font-size: 15px
}

.feature__content h2,
.feature__content p,
.feature__content .btn {
    transition: transform .35s var(--ease)
}

.feature:hover .feature__content h2,
.feature:hover .feature__content p,
.feature:hover .feature__content .btn {
    transform: translateX(8px)
}

.feature--active .feature__image {
    background-image: url("../images/active.png")
}

.feature--tactics .feature__image {
    background-image: url("../images/tactics.png")
}

.feature--city .feature__image {
    background-image: url("../images/city.png")
}

.categories__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px
}

.categories__grid .feature__content {
    padding: 0 clamp(32px, 4vw, 84px)
}

.news {
    padding-block: 82px 76px
}

.news__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(370px, .92fr);
    gap: 48px
}

.news__featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.news-card__image {
    position: relative;
    height: 355px;
    display: block;
    background-position: center;
    background-size: auto 100%;
    overflow: hidden;
    transition: background-size .65s var(--ease)
}

.news-card:hover .news-card__image {
    background-size: auto 105%
}

.news-card__image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .32));
    transition: background .25s
}

.news-card__image:hover:after {
    background: rgba(0, 0, 0, .1)
}

.news-card__image--one {
    background-image: url("../images/tactics.png")
}

.news-card__image--two {
    background-image: url("../images/active.png")
}

.news-card__image span,
.news-card__image em {
    position: absolute;
    z-index: 1;
    left: 20px;
    padding: 7px 11px;
    background: rgba(0, 0, 0, .38);
    color: #fff;
    font-size: 10px;
    font-style: normal;
    backdrop-filter: blur(5px)
}

.news-card__image span {
    top: 20px
}

.news-card__image em {
    bottom: 20px
}

.news-card h3 {
    margin: 18px 0 9px;
    font-size: 17px;
    line-height: 1.25
}

.news-card h3 a,
.news-list h3 a {
    transition: color .2s
}

.news-card:hover h3 a,
.news-list article:hover h3 a {
    color: var(--red)
}

.news-card p {
    margin: 0;
    color: #626262;
    font-size: 12px
}

.news-list {
    display: flex;
    flex-direction: column
}

.news-list article {
    padding: 0 0 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #d7d7d7
}

.news-list article:last-child {
    margin-bottom: 0
}

.news-list time {
    display: block;
    color: #8a8a8a;
    font-size: 10px
}

.news-list h3 {
    margin: 9px 0;
    font-size: 16px
}

.news-list p {
    margin: 0 0 12px;
    font-size: 12px;
    color: #676767
}

.news-list__more {
    font-size: 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #aaa
}

.news__all {
    margin-top: 35px;
    text-align: right
}

.story {
    position: relative;
    min-height: 680px;
    display: flex;
    align-items: center;
    color: #fff;
    background: #101713 url("../images/active.png") 70% center/cover no-repeat;
    overflow: hidden
}

.story:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #101713 4%, rgba(10, 15, 12, .93) 32%, rgba(10, 15, 12, .1) 75%), linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .2))
}

.story__pattern {
    position: absolute;
    inset: 0 48% 0 0;
    background-image: radial-gradient(circle at center, transparent 0 28%, rgba(160, 168, 161, .18) 28.2% 28.5%, transparent 28.7%), radial-gradient(circle at center, transparent 0 44%, rgba(160, 168, 161, .13) 44.2% 44.5%, transparent 44.7%);
    opacity: .75
}

.story__content {
    position: relative;
    z-index: 2
}

.story__content h2 {
    max-width: 726px;
    margin: 0 0 48px;
    font-size: 48px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
}

.story__content p {
    max-width: 650px;
    margin: 0 0 48px;
    color: var(--gray);
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 100;
}

.story__content .btn img {
    width: 18px;
    height: 15px;
    margin-left: 24px
}

.story__play {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    transition: .2s
}

.story__play img {
    width: 18px
}

.story__play:hover {
    background: var(--red);
    border-color: var(--red)
}

.footer {
    position: relative;
    min-height: 570px;
    padding: 90px 0 28px;
    background: #000;
    color: #fff;
    overflow: hidden
}

.footer__pattern {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 420px;
    background: url("../images/footer-pattern.svg") center bottom/cover no-repeat;
    opacity: .8
}

.footer__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2.4fr .7fr .8fr 1.15fr;
    gap: 52px
}

.footer h2 {
    margin: 0 0 48px;
    font-size: 40px;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
}

.footer h3 {
    margin: 0 0 8px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.2;
}

.footer__about p {
    max-width: 480px;
    margin: 0;
    color: var(--gray);
    line-height: 1.2;
    font-size: 14px;
    font-weight: 100;
}

.footer nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer__nav {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.footer nav a {
    color: var(--gray);
    font-size: 14px;
}

.footer nav a:hover {
    color: #fff
}

.footer__connect .socials {
    display: flex;
    gap: 13px;
    margin: 32px 0;
}

.socials img {
    width: 24px;
    height: 24px
}

.socials a {
    transition: transform .2s
}

.socials a:hover {
    transform: translateY(-3px)
}

.footer__connect>.btn {
    width: 100%;
    margin-bottom: 48px;
}

.subscribe {
    display: flex;
    border-bottom: 1px solid #555;
    margin-top: 24px;
}

.subscribe input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff;
    padding: 8px 0;
    outline: 0
}

.subscribe button {
    width: 40px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer
}

.subscribe button img {
    width: 18px;
    height: 15px
}

.footer__bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin-top: 90px;
    padding-top: 20px;
    color: #777;
    font-size: 10px
}

.footer__bottom a, .footer__bottom span{
    font-size: 14px;
    line-height: 1.2;
    font-weight: 100;
    color: #CCCCCC;
}

.footer__bottom-item {
    width: 50%;
    justify-content: space-between;
    display: flex;
}

.toast {
    position: fixed;
    z-index: 100;
    right: 24px;
    bottom: 24px;
    padding: 14px 18px;
    background: #000;
    color: #fff;
    border-left: 3px solid var(--red);
    box-shadow: 0 10px 35px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(15px);
    pointer-events: none;
    transition: .25s
}

.toast.is-visible {
    opacity: 1;
    transform: none
}

@media (max-width:1250px) {
    :root {
        --shell: min(100% - 48px, 1792px)
    }

    .header__inner {
        grid-template-columns: 150px 1fr minmax(210px, 300px) auto;
        gap: 18px
    }

    .brand,
    .brand img {
        width: 150px
    }

    .main-nav {
        gap: 16px
    }

    .main-nav a,
    .catalog-trigger {
        font-size: 12px
    }

    .news__layout {
        grid-template-columns: 1.5fr 1fr
    }

    .news-card__image {
        height: 300px
    }

    .footer__grid {
        grid-template-columns: 2fr repeat(3, 1fr)
    }

    .footer__connect {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: auto 160px minmax(220px, 330px) auto minmax(220px, 330px);
        gap: 20px;
        align-items: center
    }

    .footer__connect h3,
    .footer__connect .socials,
    .footer__connect>.btn {
        margin: 0
    }
}

@media (max-width:1024px) {
    .header__inner {
        grid-template-columns: auto 1fr auto
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-direction: column;
        justify-content: center;
        justify-self: start;
        color: #fff
    }

    .menu-toggle span {
        width: 19px;
        height: 1px;
        background: currentColor
    }

    .menu-toggle em {
        position: absolute;
        clip: rect(0, 0, 0, 0)
    }

    .brand {
        grid-column: 1
    }

    .menu-toggle {
        grid-column: 2
    }

    .search {
        display: none
    }

    .header-actions {
        grid-column: 3
    }

    .main-nav {
        position: absolute;
        z-index: 30;
        inset: 100% 0 auto 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 25px 32px;
        background: #000;
        transform: translateY(-140%);
        opacity: 0;
        transition: .3s;
        pointer-events: none
    }

    .main-nav.is-open {
        transform: none;
        opacity: 1;
        pointer-events: auto
    }

    .main-nav a,
    .catalog-trigger {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #222;
        justify-content: flex-start
    }

    .catalog-trigger::after {
        display: none
    }

    .catalog-mega {
        position: absolute;
        top: 100%;
        bottom: auto;
        height: calc(100dvh - 62px);
        overflow-y: auto
    }

    .header.header--catalog-open::after {
        height: 100dvh;
    }

    .catalog-mega__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .catalog-mega__bottom {
        grid-template-columns: 1fr;
        padding-bottom: 30px
    }

    .catalog-mega__quick {
        padding-right: 0;
        flex-wrap: wrap
    }

    .hero {
        height: 760px;
        min-height: 720px
    }

    .hero__content {
        padding-top: 75px
    }

    .hero h1 {
        font-size: 58px
    }

    .hero__copy {
        max-width: 650px
    }

    .product-card__quick {
        display: none
    }

    .product-card:hover .product-card__visual svg,
    .product-card:focus-within .product-card__visual svg {
        transform: scale(1.035)
    }

    .product-card__favorite {
        opacity: 1
    }

    .categories__grid {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 8px
    }

    .feature,
    .feature__content {
        min-height: 560px
    }

    .news__layout {
        grid-template-columns: 1fr
    }

    .news-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px
    }

    .news-list article {
        margin: 0
    }

    .story:before {
        background: linear-gradient(90deg, rgba(10, 15, 12, .96), rgba(10, 15, 12, .48) 70%, rgba(10, 15, 12, .2))
    }

    .story__play {
        left: auto;
        right: 9%;
        top: 50%
    }

    .footer__grid {
        grid-template-columns: 2fr repeat(3, 1fr)
    }

    .footer__connect {
        display: block;
        grid-column: 1/-1
    }

    .footer__connect .socials {
        margin-bottom: 20px
    }

    .footer__connect>.btn {
        width: auto;
        margin-bottom: 30px
    }

    .subscribe {
        max-width: 380px
    }
}

@media (max-width:767px) {
    :root {
        --shell: min(100% - 32px, 1792px)
    }

    body {
        font-size: 14px
    }

    .topbar {
        display: none
    }

    .header {
        top: 0;
        height: 64px;
        border: 0
    }

    .header + main {
        margin-top: -64px;
    }

    .header::before {
        background: rgba(0, 0, 0, .35);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }

    .header.header--scrolled::before {
        background: rgba(3, 3, 3, .94);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
    }

    .header__inner {
        gap: 12px
    }

    .brand,
    .brand img {
        width: 130px;
        height: auto
    }

    .header-actions {
        gap: 4px
    }

    .header-actions a:first-child {
        display: none
    }

    .header-actions img {
        width: 17px;
        height: 17px
    }

    .main-nav {
        inset: 100% 0 auto 0
    }

    .catalog-mega {
        top: 100%;
        height: calc(100dvh - 64px)
    }

    .header.header--catalog-open::after {
        height: 100dvh;
    }

    .catalog-mega__inner {
        padding-top: 16px
    }

    .catalog-mega__grid {
        grid-template-columns: 1fr
    }

    .catalog-mega__image {
        height: 92px
    }

    .catalog-mega__column h2 {
        margin: 16px 0 12px
    }

    .catalog-mega__column nav {
        gap: 6px
    }

    .catalog-mega__quick {
        align-items: flex-start;
        flex-direction: column
    }

    .hero {
        height: 720px;
        min-height: 100svh;
        background-position: 57% center
    }

    .hero__shade {
        background: linear-gradient(90deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .14)), linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .22))
    }

    .hero__content {
        justify-content: flex-end;
        padding: 0 0 140px
    }

    .hero h1 {
        font-size: clamp(35px, 10.5vw, 51px);
        line-height: 1.02
    }

    .hero__copy {
        margin: 25px 0 28px;
        font-size: 13px;
        max-width: 92%
    }

    .hero__controls {
        bottom: 20px
    }

    .hero__progress {
        margin-right: 24px;
    }

    .hero__arrows button {
        width: 40px;
        height: 40px
    }

    .section {
        padding-block: 42px
    }

    .section__head {
        margin-bottom: 24px
    }

    .section__head h2 {
        font-size: 25px
    }

    .section__arrows button {
        width: 40px;
        height: 40px
    }

    .product-viewport {
        padding-left: 16px
    }

    .product-track {
        gap: 10px
    }

    .product-card {
        flex-basis: 76vw;
        min-height: 414px
    }

    .product-card__visual {
        height: 310px
    }

    .product-card__visual svg {
        height: 278px
    }

    .products__more {
        padding-top: 23px
    }

    .product-nav {
        display: none
    }

    .feature,
    .feature__content {
        min-height: 470px
    }

    .feature__content {
        justify-content: flex-end;
        padding-bottom: 44px
    }

    .feature h2 {
        font-size: 31px
    }

    .feature p {
        font-size: 13px
    }

    .categories__grid .feature__content {
        padding: 0 16px 44px
    }

    .feature__overlay {
        background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .02) 75%)
    }

    .feature--active .feature__content {
        width: calc(100% - 32px)
    }

    .news {
        padding-block: 50px
    }

    .news__featured {
        grid-template-columns: 1fr
    }

    .news-card__image {
        height: 300px
    }

    .news-list {
        display: block;
        margin-top: 20px
    }

    .news-list article {
        margin-bottom: 22px
    }

    .news__all {
        margin-top: 28px
    }

    .story {
        min-height: 620px;
        background-position: 63% center;
        align-items: flex-end
    }

    .story:before {
        background: linear-gradient(0deg, rgba(10, 15, 12, .96) 10%, rgba(10, 15, 12, .58) 75%, rgba(10, 15, 12, .2))
    }

    .story__pattern {
        inset: 0;
        opacity: .45
    }

    .story__content {
        padding-bottom: 58px
    }

    .story__content h2 {
        font-size: 35px
    }

    .story__content p {
        font-size: 13px;
        max-width: 100%
    }

    .story__play {
        top: 24%;
        right: auto;
        left: 50%;
        width: 58px;
        height: 58px
    }

    .footer {
        padding-top: 60px
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 38px 26px
    }

    .footer__about {
        grid-column: 1/-1
    }

    .footer__connect {
        grid-column: 1/-1
    }

    .footer h2 {
        font-size: 31px
    }

    .footer__bottom {
        margin-top: 65px;
        flex-direction: column;
        gap: 10px
    }

    .footer__pattern {
        bottom: -20px;
        height: 260px
    }
}

@media (max-width:430px) {
    .header-actions a:nth-child(2) {
        display: none
    }

    .hero__copy {
        display: none
    }

    .hero__content {
        padding-bottom: 126px
    }

    .hero h1 {
        font-size: 36px
    }

    .news-card__image {
        height: 245px
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr
    }
}
/* =========================================================
   Responsive header/navigation fixes
   ========================================================= */

.search--mobile,
.mobile-subnav {
    display: none;
}

body.header-overlay-open {
    overflow: hidden;
}

@media (max-width: 1024px) {
    .header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "brand actions toggle";
        gap: 16px;
    }

    .brand {
        grid-area: brand;
    }

    .header__item {
        grid-area: actions;
        justify-self: end;
        width: auto;
        min-width: 0;
        gap: 0;
    }

    .header-actions {
        display: flex;
        grid-column: auto;
        gap: 18px;
    }

    .menu-toggle {
        grid-area: toggle;
        justify-self: end;
        position: relative;
        width: 38px;
        height: 38px;
        padding: 9px;
        gap: 5px;
        border-radius: 0;
        cursor: pointer;
        z-index: 35;
    }

    .menu-toggle span {
        width: 20px;
        height: 1px;
        flex: 0 0 1px;
        transition: transform .22s var(--ease), opacity .18s ease;
        transform-origin: center;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .header.header--nav-open::after,
    .header.header--catalog-open::after {
        height: 100dvh;
        opacity: 1;
    }

    .main-nav {
        position: absolute;
        z-index: 30;
        top: 100%;
        left: calc((100vw - 100%) / -2);
        right: calc((100vw - 100%) / -2);
        inset-block-end: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100vw;
        max-height: calc(100dvh - 62px);
        padding: 18px max(24px, calc((100vw - var(--shell)) / 2)) 30px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: transparent;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity .2s ease, transform .22s var(--ease), visibility .2s;
        -webkit-overflow-scrolling: touch;
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    .main-nav > a,
    .main-nav > .catalog-trigger {
        width: 100%;
        min-height: 48px;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        font-size: 15px;
        line-height: 1.25;
    }

    .main-nav > a::after,
    .catalog-trigger::after {
        display: none;
    }

    .catalog-trigger {
        justify-content: flex-start;
    }

    .catalog-trigger__icon {
        margin-right: 2px;
    }

    .search--mobile {
        display: flex;
        flex: 0 0 auto;
        width: 100%;
        height: 46px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, .09);
        border-color: rgba(255, 255, 255, .15);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .search--mobile input {
        font-size: 16px; /* prevents iOS input zoom */
    }

    .catalog-mega {
        z-index: 32;
        height: calc(100dvh - 62px);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,.25) transparent;
    }

    .catalog-mega__inner {
        height: auto;
        min-height: 100%;
        padding-bottom: 30px;
    }

    .catalog-mega__grid {
        gap: 22px 16px;
    }

    .catalog-mega__column h2 {
        margin-top: 18px;
    }

    .catalog-mega__bottom {
        gap: 24px;
    }

    .catalog-mega__promo {
        min-height: 96px;
    }
}

@media (max-width: 767px) {
    .header__inner {
        grid-template-columns: minmax(112px, 1fr) auto auto;
        gap: 10px;
    }

    .brand,
    .brand img {
        width: 122px;
    }

    .header-actions {
        gap: 14px;
    }

    .header-actions a {
        width: 20px;
        height: 20px;
    }

    .header-actions img {
        width: 20px;
        height: 20px;
    }

    .menu-toggle {
        width: 36px;
        height: 36px;
        padding-inline: 8px;
    }

    .main-nav {
        max-height: calc(100dvh - 64px);
        padding: 14px 16px calc(28px + env(safe-area-inset-bottom));
    }

    .mobile-subnav {
        display: block;
        margin-top: 16px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, .16);
    }

    .mobile-subnav__group {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .mobile-subnav__trigger {
        width: 100%;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 13px 0;
        border: 0;
        background: transparent;
        color: #fff;
        font: inherit;
        font-size: 15px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

    .mobile-subnav__trigger img {
        width: 10px;
        height: 7px;
        flex: 0 0 auto;
        transition: transform .2s var(--ease);
    }

    .mobile-subnav__trigger[aria-expanded="true"] img {
        transform: rotate(180deg);
    }

    .mobile-subnav__panel {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition: grid-template-rows .25s var(--ease), opacity .2s ease;
    }

    .mobile-subnav__panel::before {
        content: "";
        min-height: 0;
    }

    .mobile-subnav__group.is-open .mobile-subnav__panel {
        grid-template-rows: 1fr;
        opacity: 1;
        padding-bottom: 10px;
    }

    /* Use a simple max-height fallback for browsers that do not animate grid rows here. */
    .mobile-subnav__panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s var(--ease), opacity .2s ease;
    }

    .mobile-subnav__group.is-open .mobile-subnav__panel {
        max-height: 360px;
    }

    .mobile-subnav__panel a {
        display: block;
        min-height: 0;
        padding: 9px 0 9px 14px;
        border: 0;
        color: rgba(255, 255, 255, .72);
        font-size: 13px;
        font-weight: 400;
    }

    .mobile-subnav__panel a:hover,
    .mobile-subnav__panel a:focus-visible {
        color: #fff;
    }

    .mobile-subnav__single,
    .mobile-subnav__phone {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        font-size: 15px;
        font-weight: 500;
    }

    .mobile-subnav__phone {
        margin-top: 12px;
        border: 0;
        color: var(--red);
        font-weight: 700;
    }

    .catalog-mega {
        height: calc(100dvh - 64px);
    }

    .catalog-mega__inner {
        padding: 14px 16px calc(30px + env(safe-area-inset-bottom));
    }

    .catalog-mega__grid {
        gap: 0;
        padding-bottom: 18px;
    }

    .catalog-mega__column {
        padding: 16px 0 18px;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }

    .catalog-mega__column:first-child {
        padding-top: 0;
    }

    .catalog-mega__image {
        height: 84px;
        border-radius: 0;
    }

    .catalog-mega__column h2 {
        margin: 14px 0 10px;
        font-size: 16px;
    }

    .catalog-mega__column nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 16px;
    }

    .catalog-mega__column nav a {
        font-size: 13px;
        line-height: 1.35;
    }

    .catalog-mega__bottom {
        padding-top: 22px;
        padding-bottom: 0;
    }

    .catalog-mega__quick {
        gap: 0;
        width: 100%;
    }

    .catalog-mega__quick a {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
        font-size: 14px;
    }

    .catalog-mega__promo {
        height: 88px;
        min-height: 88px;
    }

    /* Native horizontal swipe for product cards on touch devices. */
    .product-viewport {
        overflow-x: auto;
        overflow-y: hidden;
        padding-left: 16px;
        padding-right: 16px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .product-viewport::-webkit-scrollbar {
        display: none;
    }

    .product-track {
        width: max-content;
        transform: none !important;
        transition: none;
        will-change: auto;
    }

    .product-card {
        scroll-snap-align: start;
        flex-basis: min(78vw, 340px);
        min-height: 0;
    }

    .product-card__body > a {
        line-height: 1.25;
    }

    .footer__bottom-item {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .toast {
        left: 16px;
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        width: auto;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .catalog-mega__image {
        display: none;
    }

    .catalog-mega__column {
        padding: 14px 0 16px;
    }

    .catalog-mega__column h2 {
        margin-top: 0;
    }

    .catalog-mega__column nav {
        grid-template-columns: 1fr;
    }

    .footer__grid,
    .footer__grid > div:first-child {
        grid-template-columns: 1fr;
    }

    .footer__grid {
        gap: 30px;
    }
}

/* Touch fallback for topbar dropdowns (tablet devices without hover). */
.topbar-menu.is-open .topbar-dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

.topbar-menu.is-open .topbar-menu__trigger img {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .mobile-subnav__panel {
        display: block;
        grid-template-rows: none;
    }

    .mobile-subnav__panel::before {
        display: none;
    }
}

/* Product card interactive states */
.product-card.is-options-open .product-card__quick {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.product-card__swatches button {
    position: relative;
}

.product-card__swatches button.is-active::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
}

.product-card__sizes button:hover:not(:disabled) {
    color: #000;
    border-color: var(--red);
    background: #fff;
}

.product-card__sizes button.is-active {
    color: #000;
    border-color: var(--red);
    background: #fff;
}

.product-card__sizes button:disabled,
.product-card__sizes button.is-disabled {
    color: #c9c9c9;
    border-color: #ededed;
    background: #f4f4f4;
    cursor: not-allowed;
    opacity: .72;
}

.product-card__purchase {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 39px;
    min-height: 39px;
}

.product-card__purchase .product-card__add {
    position: static;
    margin: 0;
    inset: auto;
    flex: none;
}

.product-card__add.is-size-required {
    width: 154px;
    padding: 0 14px;
    border: 1px solid #dedede;
    background: #fff;
    color: var(--red);
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
}

.product-card__add.is-initial {
    width: 39px;
    border-color: #dadada;
    background: #fff;
    color: #000;
}

.product-card__add.is-initial:hover {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

.product-card__add.is-ready {
    width: 39px;
    border-color: var(--red);
    background: var(--red);
    color: #fff;
}

.product-card__add.is-ready:hover {
    background: #dc2300;
    border-color: #dc2300;
}

.product-card__quantity {
    height: 39px;
    min-width: 96px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
}

.product-card__quantity[hidden] {
    display: none !important;
}

.product-card__qty-btn {
    width: 34px;
    height: 39px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 19px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

.product-card__qty-btn:hover {
    background: rgba(0, 0, 0, .08);
}

.product-card__qty-value {
    min-width: 28px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .product-card.is-options-open .product-card__quick {
        display: block;
    }
}

@media (max-width: 767px) {
    .product-card__purchase {
        right: 12px;
    }

    .product-card__add.is-size-required {
        width: 132px;
        padding-inline: 10px;
        font-size: 11px;
    }

    .product-card__quantity {
        min-width: 92px;
    }
}

/* ========================================================================== 
   Product detail page
   ========================================================================== */
.product-detail-page {
    background: #f7f7f7;
}

.product-detail-page .header + main {
    margin-top: 0;
}

.product-detail-page .header::before {
    background: #080808;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.product-detail-page .header.header--scrolled::before {
    background: rgba(3, 3, 3, .95);
}

.product-detail-page .search {
    background: #222;
    border-color: #343434;
}

.product-page {
    background: #f7f7f7;
    min-height: 100vh;
    overflow: hidden;
}

.breadcrumbs {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 2px;
    color: #8b8b8b;
    font-size: 11px;
    line-height: 1.2;
}

.breadcrumbs a {
    transition: color .2s ease;
}

.breadcrumbs a:hover {
    color: #000;
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.78fr) minmax(430px, 1fr);
    gap: 34px;
    align-items: start;
    padding-bottom: 48px;
}

.product-detail__gallery {
    min-width: 0;
}

.product-gallery__top,
.product-gallery__details,
.product-gallery__more-grid {
    display: grid;
    gap: 8px;
}

.product-gallery__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-gallery__details {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
}

.product-gallery__more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
}

.product-gallery__more-grid[hidden] {
    display: none !important;
}

.product-gallery__image,
.product-gallery__zoom {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
}

.product-gallery__image > img,
.product-gallery__zoom > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s var(--ease);
}

.product-gallery__top .product-gallery__image {
    aspect-ratio: 537 / 760;
}

.product-gallery__details > .product-gallery__image,
.product-gallery__details > .product-gallery__image--actions {
    aspect-ratio: 354 / 501;
}

.product-gallery__details .product-gallery__zoom {
    height: 100%;
}

.product-gallery__more-grid .product-gallery__image--wide {
    grid-column: 1 / -1;
    aspect-ratio: 1091 / 614;
}

.product-gallery__more-grid .product-gallery__image--portrait {
    aspect-ratio: 537 / 760;
}

.product-gallery__image:hover > img,
.product-gallery__zoom:hover > img {
    transform: scale(1.015);
}

.product-gallery__image--actions {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.product-gallery__actions {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 6px;
}

.product-gallery__actions button {
    min-width: 104px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(0, 0, 0, .08);
    background: rgba(255, 255, 255, .92);
    color: #111;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: background .2s ease, color .2s ease;
}

.product-gallery__actions button:hover {
    background: #000;
    color: #fff;
}

.product-gallery__actions span {
    color: #858585;
    margin-left: 4px;
}

.product-gallery__actions button:hover span {
    color: inherit;
}

.product-gallery__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .22);
    color: #fff;
    font-size: 15px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.product-info {
    padding: 4px 0 0;
    min-width: 0;
}

.product-info h1 {
    margin: 0 0 16px;
    font-size: clamp(28px, 1.65vw, 38px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.02em;
}

.product-info__lead {
    max-width: 610px;
    margin: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 300;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 44px 0 30px;
}

.product-price strong {
    font-size: 28px;
    line-height: 1;
    font-weight: 500;
}

.product-price s {
    color: #aaa;
    font-size: 13px;
}

.product-choice {
    margin-top: 20px;
}

.product-choice__row {
    margin-bottom: 10px;
    color: #6d6d6d;
    font-size: 11px;
}

.product-choice__row b {
    color: #111;
    font-weight: 400;
}

.product-colors,
.product-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.product-colors button {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #d9d9d9;
    background: var(--product-color);
    cursor: pointer;
}

.product-colors button::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid transparent;
    pointer-events: none;
}

.product-colors button.is-active::after {
    border-color: #111;
}

.product-choice--sizes {
    margin-top: 26px;
}

.product-sizes button {
    min-width: 48px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #777;
    font-size: 11px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.product-sizes button:hover,
.product-sizes button.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}

.product-size-link {
    display: inline-block;
    margin-top: 12px;
    border-bottom: 1px solid #111;
    font-size: 10px;
    line-height: 1.4;
}

.product-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
    margin-top: 42px;
}

.product-buy__button,
.product-buy__favorite {
    height: 48px;
    border: 0;
    cursor: pointer;
}

.product-buy__button {
    background: var(--red);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    transition: background .2s ease;
}

.product-buy__button:hover {
    background: #dd2300;
}

.product-buy__button.is-error {
    animation: product-shake .32s ease;
}

@keyframes product-shake {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
}

.product-buy__favorite {
    display: grid;
    place-items: center;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #111;
}

.product-buy__favorite svg {
    width: 22px;
    height: 22px;
}

.product-buy__favorite.is-active {
    border-color: #111;
    background: #111;
    color: #fff;
}

.product-accordion {
    margin-top: 54px;
    border-top: 1px solid #ddd;
}

.product-accordion__item {
    border-bottom: 1px solid #ddd;
}

.product-accordion__trigger {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.product-accordion__trigger i {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
}

.product-accordion__trigger i::before,
.product-accordion__trigger i::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 10px;
    height: 1px;
    background: #111;
    transition: transform .2s ease;
}

.product-accordion__trigger i::after {
    transform: rotate(90deg);
}

.product-accordion__item.is-open .product-accordion__trigger i::after {
    transform: rotate(0);
}

.product-accordion__panel {
    padding: 0 0 24px;
    color: #555;
    font-size: 11px;
    line-height: 1.5;
}

.product-accordion__panel[hidden] {
    display: none !important;
}

.product-spec-group + .product-spec-group {
    margin-top: 22px;
}

.product-spec-group h2 {
    margin: 0 0 7px;
    color: #111;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
}

.product-spec-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-spec-group li {
    position: relative;
    padding-left: 11px;
    margin: 3px 0;
}

.product-spec-group li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: 4px;
    height: 4px;
    background: var(--red);
}

.product-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
}

.product-section-heading h2,
.alpha-look__head h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.05;
    font-weight: 500;
}

.product-features {
    background: #f7f7f7;
}

.product-features__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.product-feature-card {
    position: relative;
    min-height: 630px;
    overflow: hidden;
    background: #222;
    color: #fff;
}

.product-feature-card--wide {
    grid-column: 1 / -1;
    min-height: 660px;
}

.product-feature-card > img {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
    transform: scale(1.01);
}

.product-feature-card--compact:nth-child(1) > img {
    object-position: 55% 42%;
}

.product-feature-card--compact:nth-child(2) > img {
    object-position: 58% 42%;
}

.product-feature-card--wide > img {
    object-position: 50% 50%;
}

.product-feature-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.06) 30%, rgba(0,0,0,.72) 100%);
}

.product-feature-card__content {
    position: absolute;
    z-index: 2;
    left: 48px;
    right: 48px;
    bottom: 42px;
    max-width: 560px;
}

.product-feature-card__content h3 {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.08;
    font-weight: 500;
}

.product-feature-card__content p {
    margin: 0;
    color: rgba(255,255,255,.9);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 300;
}

.section-lite {
    padding: 64px 0;
    background: #f7f7f7;
}

.alpha-look {
    padding-top: 70px;
    padding-bottom: 48px;
}

.alpha-look__head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 32px;
    margin-bottom: 30px;
}

.alpha-look__head > div:first-child {
    max-width: 870px;
}

.alpha-look__head p {
    max-width: 860px;
    margin: 12px 0 0;
    color: #5e5e5e;
    font-size: 12px;
    line-height: 1.45;
}

.inline-arrows {
    display: flex;
    gap: 6px;
    flex: none;
}

.inline-arrows button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.inline-arrows button:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.horizontal-rail {
    width: var(--shell);
    margin-inline: auto;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.horizontal-rail::-webkit-scrollbar {
    display: none;
}

.look-card {
    flex: 0 0 calc((100% - 24px) / 4);
    aspect-ratio: .72;
    overflow: hidden;
    background: #ddd;
    scroll-snap-align: start;
}

.look-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ease);
}

.look-card:nth-child(1) img { object-position: 57% center; }
.look-card:nth-child(2) img { object-position: 58% center; }
.look-card:nth-child(3) img { object-position: 50% center; }
.look-card:nth-child(4) img { object-position: 48% center; }

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

.recommendations {
    padding-top: 34px;
    padding-bottom: 58px;
}

.product-section-heading--rail {
    min-height: 64px;
    margin-bottom: 20px;
}

.horizontal-rail--products {
    gap: 12px;
}

.recommendation-card {
    position: relative;
    flex: 0 0 calc((100% - 36px) / 4);
    min-width: 0;
    background: #fff;
    border: 1px solid #ededed;
    scroll-snap-align: start;
}

.recommendation-card__image {
    height: 390px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: #fff;
}

.recommendation-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--ease);
}

.recommendation-card:hover .recommendation-card__image img {
    transform: scale(1.015);
}

.recommendation-card__body {
    position: relative;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 62px 14px 14px;
}

.recommendation-card__body > a {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 300;
}

.recommendation-card__body strong {
    font-size: 14px;
    font-weight: 500;
}

.recommendation-card__add {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 38px;
    height: 38px;
    transform: translateY(-50%);
    border: 1px solid #ddd;
    background: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.recommendation-card__add:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.product-tests {
    padding-top: 20px;
    padding-bottom: 82px;
}

.product-tests__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.test-card {
    min-width: 0;
}

.test-card__image {
    position: relative;
    height: 300px;
    display: block;
    overflow: hidden;
    background: #222;
}

.test-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s var(--ease);
}

.test-card:hover .test-card__image img {
    transform: scale(1.02);
}

.test-card__image span {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 6px 10px;
    background: rgba(255,255,255,.9);
    font-size: 9px;
}

.test-card h3 {
    margin: 12px 0 7px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
}

.test-card p {
    margin: 0;
    color: #777;
    font-size: 10px;
    line-height: 1.4;
}

.product-tests__more {
    margin-top: 26px;
    text-align: right;
}

.product-tests__more a {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 1px solid #111;
    font-size: 10px;
}

.product-lightbox,
.product-video-modal {
    position: fixed;
    z-index: 250;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0, 0, 0, .92);
}

.product-lightbox.is-open,
.product-video-modal.is-open {
    display: flex;
}

.product-lightbox > img {
    max-width: min(90vw, 1200px);
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
}

.product-lightbox__close,
.product-video-modal__close {
    position: absolute;
    right: 28px;
    top: 22px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
    color: #fff;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.product-video-modal__frame {
    position: relative;
    width: min(1100px, 90vw);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}

.product-video-modal__frame > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
}

.product-video-modal__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    text-align: center;
}

.product-video-modal__placeholder span {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.75);
    background: rgba(0,0,0,.24);
}

.product-video-modal__placeholder strong {
    font-size: 18px;
    font-weight: 500;
}

.product-video-modal__placeholder p {
    max-width: 420px;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-size: 12px;
}

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

@media (max-width: 1500px) {
    .product-detail {
        grid-template-columns: minmax(0, 1.65fr) minmax(390px, 1fr);
        gap: 28px;
    }

    .product-price {
        margin-top: 34px;
    }

    .product-accordion {
        margin-top: 42px;
    }

    .product-feature-card {
        min-height: 540px;
    }

    .product-feature-card--wide {
        min-height: 580px;
    }

    .recommendation-card__image {
        height: 330px;
    }

    .test-card__image {
        height: 250px;
    }
}

@media (max-width: 1250px) {
    .product-detail {
        grid-template-columns: minmax(0, 1.45fr) minmax(360px, 1fr);
        gap: 24px;
    }

    .product-info h1 {
        font-size: 26px;
    }

    .product-info__lead {
        font-size: 12px;
    }

    .product-price {
        margin: 28px 0 24px;
    }

    .product-buy {
        margin-top: 32px;
    }

    .product-accordion {
        margin-top: 34px;
    }

    .product-gallery__actions {
        right: 8px;
        bottom: 8px;
        gap: 4px;
    }

    .product-gallery__actions button {
        min-width: 88px;
        height: 30px;
        padding: 0 8px;
        font-size: 9px;
    }

    .product-feature-card {
        min-height: 470px;
    }

    .product-feature-card--wide {
        min-height: 520px;
    }

    .product-feature-card__content {
        left: 34px;
        right: 34px;
        bottom: 30px;
    }

    .look-card {
        flex-basis: calc((100% - 16px) / 3);
    }

    .recommendation-card {
        flex-basis: calc((100% - 24px) / 3);
    }
}

@media (max-width: 1024px) {
    .breadcrumbs {
        padding-top: 12px;
    }

    .product-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-info {
        max-width: 760px;
        padding-bottom: 14px;
    }

    .product-info h1 {
        font-size: 30px;
    }

    .product-feature-card,
    .product-feature-card--wide {
        min-height: 440px;
    }

    .product-feature-card__content h3 {
        font-size: 20px;
    }

    .test-card__image {
        height: 220px;
    }
}

@media (max-width: 767px) {
    .product-detail-page .header + main {
        margin-top: 0;
    }

    .breadcrumbs {
        min-height: 42px;
        gap: 6px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        font-size: 9px;
    }

    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    .product-detail {
        width: 100%;
        gap: 0;
        padding-bottom: 34px;
    }

    .product-detail__gallery {
        width: 100%;
    }

    .product-gallery__top {
        display: flex;
        overflow-x: auto;
        gap: 4px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .product-gallery__top::-webkit-scrollbar {
        display: none;
    }

    .product-gallery__top .product-gallery__image {
        flex: 0 0 86vw;
        scroll-snap-align: start;
    }

    .product-gallery__details {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin-top: 4px;
    }

    .product-gallery__more-grid {
        gap: 4px;
        margin-top: 4px;
    }

    .product-gallery__actions {
        left: 6px;
        right: 6px;
        bottom: 6px;
        flex-direction: column;
    }

    .product-gallery__actions button {
        min-width: 0;
        width: 100%;
        height: 28px;
    }

    .product-info {
        width: var(--shell);
        margin-inline: auto;
        padding-top: 30px;
    }

    .product-info h1 {
        font-size: 26px;
    }

    .product-info__lead {
        font-size: 12px;
    }

    .product-price {
        margin: 26px 0 24px;
    }

    .product-price strong {
        font-size: 24px;
    }

    .product-colors button {
        width: 31px;
        height: 31px;
    }

    .product-sizes {
        gap: 5px;
    }

    .product-sizes button {
        min-width: 44px;
        height: 40px;
    }

    .product-buy {
        position: sticky;
        z-index: 35;
        bottom: 0;
        margin: 32px -16px 0;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(247,247,247,.96);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .product-accordion {
        margin-top: 26px;
    }

    .product-section-heading {
        min-height: 68px;
    }

    .product-section-heading h2,
    .alpha-look__head h2 {
        font-size: 22px;
    }

    .product-features__grid {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .product-feature-card,
    .product-feature-card--wide {
        grid-column: auto;
        min-height: 420px;
    }

    .product-feature-card__content {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }

    .product-feature-card__content h3 {
        font-size: 19px;
    }

    .section-lite {
        padding: 44px 0;
    }

    .alpha-look {
        padding-top: 46px;
        padding-bottom: 34px;
    }

    .alpha-look__head {
        align-items: center;
        margin-bottom: 20px;
    }

    .alpha-look__head p {
        font-size: 10px;
    }

    .inline-arrows {
        display: none;
    }

    .horizontal-rail {
        width: 100%;
        padding-inline: 16px;
        scroll-padding-inline: 16px;
    }

    .look-card {
        flex-basis: 74vw;
    }

    .recommendations {
        padding-top: 20px;
        padding-bottom: 36px;
    }

    .recommendation-card {
        flex-basis: 72vw;
    }

    .recommendation-card__image {
        height: 340px;
    }

    .product-tests {
        padding-top: 10px;
        padding-bottom: 56px;
    }

    .product-tests__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .test-card__image {
        height: 58vw;
        max-height: 380px;
    }

    .test-card h3 {
        font-size: 13px;
    }

    .product-tests__more {
        text-align: left;
    }

    .product-lightbox,
    .product-video-modal {
        padding: 16px;
    }

    .product-lightbox__close,
    .product-video-modal__close {
        right: 16px;
        top: 14px;
    }

    .product-video-modal__frame {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .product-info h1 {
        font-size: 23px;
    }

    .product-gallery__details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-gallery__details > :nth-child(3) {
        grid-column: 1 / -1;
        aspect-ratio: 1091 / 614;
    }

    .product-gallery__more-grid {
        grid-template-columns: 1fr;
    }

    .product-gallery__more-grid .product-gallery__image--wide {
        grid-column: auto;
    }

    .product-gallery__actions {
        flex-direction: row;
        left: auto;
    }

    .product-gallery__actions button {
        width: auto;
        min-width: 90px;
    }

    .product-buy {
        grid-template-columns: minmax(0, 1fr) 46px;
    }

    .look-card {
        flex-basis: 82vw;
    }

    .recommendation-card {
        flex-basis: 82vw;
    }

    .recommendation-card__image {
        height: 310px;
    }
}

/* Product page carousel corrections: reuse the homepage slider mechanics. */
.product-detail-page .product-viewport--look,
.product-detail-page .product-viewport--related {
    padding-left: max(64px, calc((100vw - 1792px) / 2));
    padding-right: 0;
}

.product-detail-page .product-track--look {
    gap: 8px;
}

.product-detail-page .product-track--look .look-card {
    flex: 0 0 clamp(330px, 22.2vw, 420px);
    aspect-ratio: .72;
}

.product-detail-page .product-track--related {
    gap: 16px;
}

.product-detail-page .product-viewport--related .product-card {
    flex: 0 0 clamp(330px, 23.2vw, 445px);
}

/* Video is an actual styled control with a poster, not a static image. */
.product-gallery__video {
    position: relative;
    padding-left: 34px !important;
}

.product-gallery__video::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background: currentColor;
    clip-path: polygon(25% 10%, 25% 90%, 88% 50%);
}

.product-gallery__video-preview {
    position: relative;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 420px;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #111;
    cursor: pointer;
}

.product-gallery__video-preview > img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    display: block;
    object-fit: cover;
    transition: transform .45s var(--ease);
}

.product-gallery__video-preview:hover > img {
    transform: scale(1.015);
}

.product-gallery__video-preview-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.28));
}

.product-gallery__video-preview-control {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #fff;
    pointer-events: none;
}

.product-gallery__video-preview-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.72);
    background: rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: transform .2s ease, background .2s ease;
}

.product-gallery__video-preview-icon img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.product-gallery__video-preview:hover .product-gallery__video-preview-icon {
    transform: scale(1.08);
    background: var(--red);
    border-color: var(--red);
}

.product-gallery__video-preview-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
}

.product-video-modal__play {
    min-width: 210px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 22px;
    border: 0;
    background: var(--red);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.product-video-modal__play:hover {
    transform: translateY(-2px);
    background: #000;
}

.product-video-modal__play-icon {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
}

.product-video-modal__play-icon img {
    width: 13px;
    height: 13px;
    filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
    .product-detail-page .product-viewport--look,
    .product-detail-page .product-viewport--related {
        padding-left: 16px;
        padding-right: 16px;
    }

    .product-detail-page .product-track--look .look-card,
    .product-detail-page .product-viewport--related .product-card {
        flex-basis: min(78vw, 340px);
        scroll-snap-align: start;
    }

    .product-gallery__video-preview,
    .product-gallery__video-preview > img {
        min-height: 250px;
    }
}

/* Product detail: Swiper rails */
.product-detail-page .js-product-swiper {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.product-detail-page .js-product-swiper .product-track.swiper-wrapper {
    display: flex;
    gap: 0;
    transition-property: transform;
    will-change: transform;
}

.product-detail-page .product-viewport--look .look-card.swiper-slide {
    width: clamp(330px, 22.2vw, 420px);
    flex: 0 0 auto;
    aspect-ratio: .72;
}

.product-detail-page .product-viewport--related .product-card.swiper-slide {
    width: clamp(330px, 23.2vw, 445px);
    flex: 0 0 auto;
}

.product-detail-page .js-product-swiper .product-nav {
    z-index: 20;
}

.product-detail-page .js-product-swiper .product-nav.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

/* Inline video block from Figma: 16:9 poster with a translucent square play control. */
.product-detail-page .product-gallery__video-preview {
    position: relative;
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 1098 / 616;
    min-height: 0;
    overflow: hidden;
    background: #e9e9e9;
}

.product-detail-page .product-gallery__video-element {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #e9e9e9;
}

.product-detail-page .product-gallery__video-element::-webkit-media-controls-panel {
    background-image: linear-gradient(transparent, rgba(0, 0, 0, .22));
}

.product-detail-page .product-gallery__video-play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .88);
    background: rgba(106, 106, 106, .42);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.product-detail-page .product-gallery__video-play:hover {
    background: rgba(70, 70, 70, .56);
    transform: translate(-50%, -50%) scale(1.04);
}

.product-detail-page .product-gallery__video-play img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.product-detail-page .product-gallery__video-preview.is-playing .product-gallery__video-play {
    opacity: 0;
    pointer-events: none;
}

/* The old popup video treatment is intentionally disabled; video runs in the gallery itself. */
.product-detail-page .product-video-modal {
    display: none !important;
}

@media (max-width: 767px) {
    .product-detail-page .product-viewport--look .look-card.swiper-slide,
    .product-detail-page .product-viewport--related .product-card.swiper-slide {
        width: min(78vw, 340px);
        flex-basis: auto;
    }

    .product-detail-page .product-gallery__video-preview {
        min-height: 0;
    }

    .product-detail-page .product-gallery__video-play {
        width: 58px;
        height: 58px;
    }

    .product-detail-page .product-gallery__video-play img {
        width: 16px;
        height: 16px;
    }
}