.product-page{ background:var(--paper) }
.product-page .nav{ background:#14120FF7; border-bottom-color:#FFFFFF1F }
.product-page .nav__word b{ color:#fff }
.product-page .nav__word span{ color:#FFFFFF8F }
.product-page .nav__links a{ color:#FFFFFFC9 }
.product-page .nav__links a:hover{ color:#fff; background:#FFFFFF14 }
.product-page .nav__links a[aria-current="page"]{ color:#fff }
.product-page .nav__cta .btn{ --bg:var(--red); --fg:#fff; --bd:var(--red) }
.product-page .nav__burger{ border-color:#FFFFFF38 }
.product-page .nav__burger i,.product-page .nav__burger i::before,.product-page .nav__burger i::after{ background:#fff }
.product-page main{ padding-top:68px }
.visually-hidden{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important }

.catalog-hero{ position:relative; overflow:hidden; min-height:610px; background:var(--ink); color:#fff; isolation:isolate }
.catalog-hero::before{ content:""; position:absolute; width:500px; height:500px; border-radius:50%; right:-170px; top:-220px; background:var(--red); opacity:.93; z-index:-1 }
.catalog-hero::after{ content:""; position:absolute; width:270px; height:270px; border-radius:50%; right:25%; bottom:-190px; background:var(--yellow); z-index:-1 }
.catalog-hero__stripe{ position:absolute; inset:0 auto 0 0; width:7px; background:linear-gradient(var(--red) 0 66%,var(--yellow) 66%) }
.catalog-hero__in{ display:grid; align-items:center; gap:50px; min-height:610px; padding-top:66px; padding-bottom:58px }
@media (min-width:850px){ .catalog-hero__in{ grid-template-columns:minmax(0,.9fr) minmax(430px,1.1fr) } }
.catalog-kicker{ display:inline-flex; margin-bottom:20px; color:var(--yellow); font-size:.72rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase }
.catalog-hero h1{ font-size:clamp(3rem,5.8vw,5rem); line-height:.84; font-variation-settings:"wdth" 116,"wght" 850; text-transform:uppercase; letter-spacing:-.05em; white-space:nowrap }
.catalog-hero h1 span{ color:var(--red) }
.catalog-hero__copy>p{ max-width:580px; margin-top:30px; color:#FFFFFFB3; font-size:clamp(1.05rem,1.5vw,1.24rem); line-height:1.55 }
.catalog-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }
.catalog-hero__actions .btn svg,.catalog-cta__actions .btn svg{ width:19px; height:19px }
.catalog-hero__display{ position:relative; min-height:420px; align-self:stretch; display:grid; place-items:center }
.catalog-hero__stage{ position:relative; width:min(100%,610px); height:390px; border-radius:36px; background:linear-gradient(145deg,#fff,#eeeae3); border:6px solid #fff; box-shadow:0 32px 90px #0008; transform:rotate(-1.5deg); overflow:hidden }
.catalog-hero__stage::before{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 0 36%,#D8241C12 36% 62%,#FFB81C24 62%); pointer-events:none }
.catalog-hero__product{ position:absolute; display:block; width:46%; aspect-ratio:1; object-fit:contain; border-radius:24px; background:#fff; box-shadow:0 18px 40px #14120F20 }
.catalog-hero__product--back{ width:42%; left:5%; top:7%; transform:rotate(-7deg) }
.catalog-hero__product--main{ width:47%; left:28%; top:16%; z-index:2; transform:rotate(3deg) }
.catalog-hero__product--front{ width:39%; right:3%; bottom:5%; z-index:3; transform:rotate(8deg) }
.catalog-hero__display span{ position:absolute; padding:9px 16px; border-radius:999px; background:var(--red); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; box-shadow:0 8px 26px #0005 }
.catalog-hero__display span:first-of-type{ left:0; top:19%; transform:rotate(-6deg) }
.catalog-hero__display span:last-of-type{ right:-4px; bottom:17%; background:var(--yellow); color:var(--ink); transform:rotate(5deg) }

.catalog{ padding:92px 0 110px }
.catalog__head{ display:grid; gap:22px; align-items:end; margin-bottom:38px }
@media (min-width:760px){ .catalog__head{ grid-template-columns:1.2fr .8fr } }
.catalog__head .label{ margin-bottom:12px }
.catalog__head>p{ color:var(--ink-2); max-width:48ch; justify-self:end }
.red-dot{ color:var(--red) }.yellow-dot{ color:var(--yellow) }

.catalog-tools{ position:sticky; top:82px; z-index:25; display:grid; gap:12px; padding:14px; margin:0 -14px 14px; background:#FAF8F4E8; border:1px solid var(--line); border-radius:24px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:var(--shadow-sm) }
.catalog-search{ display:flex; align-items:center; gap:11px; min-height:54px; padding:0 18px; background:#fff; border:1px solid var(--line-2); border-radius:999px }
.catalog-search:focus-within{ border-color:var(--red); box-shadow:0 0 0 3px #D8241C12 }
.catalog-search svg{ width:20px; height:20px; flex:none; color:var(--ink-3) }
.catalog-search input{ width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:.95rem }
.catalog-search input::placeholder{ color:var(--ink-3) }
.brand-filters{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none }
.brand-filters::-webkit-scrollbar{ display:none }
.brand-filter{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 17px; border:1px solid var(--line-2); border-radius:999px; background:#fff; color:var(--ink-2); font-size:.78rem; font-weight:800; letter-spacing:.03em; cursor:pointer; transition:.25s var(--ease) }
.brand-filter span{ display:grid; min-width:24px; height:24px; place-items:center; padding:0 6px; border-radius:999px; background:#14120F0C; color:var(--ink-3); font-size:.64rem }
.brand-filter:hover{ border-color:var(--red); color:var(--red) }
.brand-filter.is-active{ background:var(--ink); border-color:var(--ink); color:#fff }
.brand-filter.is-active span{ background:#FFFFFF1A; color:#fff }
@media (min-width:980px){ .catalog-tools{ grid-template-columns:minmax(260px,.62fr) 1.38fr; align-items:center } }

.catalog-status{ min-height:32px; display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:20px; color:var(--ink-3); font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase }
.catalog-status button{ border:0; background:transparent; color:var(--red); font:inherit; cursor:pointer; text-decoration:underline }
.product-grid{ display:grid; gap:58px }
.product-group{ min-width:0 }
.product-group__head{ display:grid; gap:12px; align-items:end; padding:0 0 20px; margin-bottom:20px; border-bottom:1px solid var(--line-2) }
.product-group__head>div{ display:flex; flex-direction:column-reverse; gap:7px }
.product-group__head h3{ font-family:var(--f-display); font-size:clamp(2rem,4.4vw,3.45rem); line-height:.92; letter-spacing:-.045em; text-transform:uppercase; font-variation-settings:"wdth" 116,"wght" 850 }
.product-group__head h3 span{ color:var(--red) }
.product-group__count{ color:var(--red); font-size:.66rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase }
.product-group__head p{ max-width:48ch; color:var(--ink-2); line-height:1.5 }
.product-group__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
@media (min-width:720px){ .product-group__head{ grid-template-columns:1fr minmax(260px,.72fr) }.product-group__head p{ justify-self:end }.product-group__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px } }
@media (min-width:1080px){ .product-group__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px } }
.product-card{ position:relative; display:flex; min-width:0; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:24px; overflow:hidden; transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease) }
.product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--line-2) }
/* grid-template-rows gives the row a definite height, so the img's height:100%
   resolves; without it the row is content-sized and tall portrait packshots
   overflow the box and get clipped by overflow:hidden. */
.product-card__media{ position:relative; display:grid; grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr); place-items:center; aspect-ratio:1.06; overflow:hidden; padding:24px 20px 16px; background:linear-gradient(145deg,var(--product-tone,#fff),color-mix(in srgb,var(--product-tone,#fff) 92%,#e8e3db)); border-bottom:1px solid var(--line) }
.product-card__media img{ width:100%; height:100%; min-width:0; min-height:0; display:block; object-fit:contain; object-position:center; mix-blend-mode:multiply; transition:transform .38s var(--ease) }
.product-card:hover .product-card__media img{ transform:scale(1.035) }
.product-card__media img.is-crop{ object-fit:cover; object-position:var(--product-pos,center); mix-blend-mode:normal; transform:scale(var(--product-zoom,1)) }
.product-card:hover .product-card__media img.is-crop{ transform:scale(calc(var(--product-zoom,1) * 1.025)) }
.product-card__media::after{ content:""; position:absolute; inset:auto 0 0; height:25%; background:linear-gradient(transparent,#14120F0A); pointer-events:none }
.product-card__brand{ position:absolute; left:12px; top:12px; z-index:1; display:inline-flex; align-items:center; min-height:30px; padding:6px 10px; border-radius:999px; background:#14120FEF; color:#fff; font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; box-shadow:0 5px 18px #0003 }
.product-card__body{ display:flex; flex:1; flex-direction:column; padding:18px }
.product-card__type{ color:var(--red); font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:8px }
.product-card h3{ font-size:clamp(1rem,1.7vw,1.18rem); line-height:1.12; font-variation-settings:"wdth" 112,"wght" 750; text-wrap:balance }
.product-card__code{ margin-top:7px; color:var(--ink-3); font-size:.74rem; font-weight:600 }
.product-card__actions{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:auto; padding-top:20px }
.product-card__actions .btn{ min-width:0; padding:11px 8px; font-size:.75rem }
.product-card__actions .btn svg{ width:18px; height:18px }
@media (max-width:430px){ .product-card__body{ padding:14px 12px }.product-card__actions{ grid-template-columns:1fr }.product-card__actions .btn{ width:100% } }
.catalog-empty{ padding:70px 20px; text-align:center; border:1px dashed var(--line-2); border-radius:24px; color:var(--ink-2) }
.catalog-empty span{ display:block; margin-bottom:18px; font-family:var(--f-display); font-size:1.5rem; font-weight:800 }

.catalog-cta{ padding:0 0 100px }
.catalog-cta__card{ display:grid; gap:32px; align-items:center; overflow:hidden; position:relative; padding:42px; border-radius:32px; background:var(--ink); color:#fff }
.catalog-cta__card::before{ content:""; position:absolute; width:230px; height:230px; border-radius:50%; right:-90px; top:-120px; background:var(--red) }
.catalog-cta__card .label{ color:var(--yellow); margin-bottom:12px }
.catalog-cta__card p{ max-width:55ch; margin-top:16px; color:#FFFFFFA8 }
.catalog-cta__actions{ position:relative; display:flex; gap:10px; flex-wrap:wrap }
@media (min-width:760px){ .catalog-cta__card{ grid-template-columns:1fr auto; padding:58px }.catalog-cta__actions{ justify-content:flex-end } }

@media (max-width:849px){ .catalog-hero{ min-height:auto }.catalog-hero__in{ padding-top:88px; padding-bottom:62px }.catalog-hero__display{ min-height:280px }.catalog-hero__display span:first-of-type{ left:4px } }
@media (max-width:620px){ .product-page main{ padding-top:68px }.catalog-hero__display{ min-height:265px }.catalog-hero__stage{ height:250px; border-width:4px; border-radius:22px }.catalog-hero__display span{ font-size:.6rem }.catalog{ padding:68px 0 82px }.catalog-tools{ top:75px; border-radius:20px }.product-grid{ gap:44px }.product-card__media{ padding:16px 12px 10px }.catalog-cta__card{ padding:34px 24px } }