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

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--space-20);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    background-color: var(--color-bg);
    min-block-size: 100dvh;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: var(--lh-heading);
    text-wrap: balance;
    overflow-wrap: break-word;
    margin: 0;
  }

  @media not (min-width: 30rem) {
    h1, h2, h3, h4, h5, h6 {
      -webkit-hyphens: auto;
      hyphens: auto;
    }
  }

  p, ul, ol, dl, dd, figure, blockquote {
    margin: 0;
  }

  ul[class], ol[class] {
    padding: 0;
    list-style: none;
  }

  a {
    color: var(--color-link);
    text-underline-offset: .2em;
    transition: color var(--dur) var(--ease);
    text-decoration-thickness: 1px;
  }

  a:hover {
    color: var(--color-link-hover);
  }

  img, svg, video {
    max-inline-size: 100%;
    display: block;
  }

  img, video {
    block-size: auto;
  }

  button, input, select, textarea {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    margin: 0;
  }

  button {
    cursor: pointer;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  ::selection {
    background-color: var(--blue-500);
    color: var(--white);
  }

  [hidden] {
    display: none !important;
  }

  .visually-hidden {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
}

@layer tokens {
  :root {
    --navy-950: #05080f;
    --navy-900: #0a1022;
    --navy-800: #101936;
    --navy-700: #17234b;
    --navy-600: #203266;
    --blue-700: #1746b8;
    --blue-600: #1f5be0;
    --blue-500: #2b6bff;
    --blue-400: #6392ff;
    --blue-100: #dfe8ff;
    --blue-50: #f0f4ff;
    --red-700: #a8112f;
    --red-600: #c4183f;
    --red-500: #d9234c;
    --red-400: #ea5173;
    --red-50: #fdeef1;
    --gray-900: #0e1524;
    --gray-800: #1f2838;
    --gray-700: #343f52;
    --gray-600: #48556a;
    --gray-500: #5f6c81;
    --gray-400: #8d99ac;
    --gray-300: #bcc5d3;
    --gray-200: #d9dfe8;
    --gray-100: #e9edf3;
    --gray-50: #f4f6fa;
    --white: #fff;
    --green-600: #17794f;
    --green-50: #e8f6ef;
    --amber-600: #955800;
    --amber-50: #fdf3e1;
    --font-heading: "Sofia Sans Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
    --font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 5.25rem);
    --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
    --fs-h2: clamp(1.625rem, 1.3rem + 1.5vw, 2.625rem);
    --fs-h3: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
    --fs-h4: 1.125rem;
    --fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
    --fs-body: 1rem;
    --fs-s: .875rem;
    --fs-xs: .75rem;
    --lh-tight: 1.05;
    --lh-heading: 1.15;
    --lh-body: 1.55;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --section-gap: clamp(3rem, 2rem + 5vw, 6.5rem);
    --container-max: 82.5rem;
    --container-pad: clamp(1rem, .4rem + 2.6vw, 2rem);
    --radius-s: 2px;
    --radius-m: 4px;
    --cut: .625rem;
    --shadow-raised: 0 1px 2px #0e15240f, 0 12px 32px -12px #0e152438;
    --shadow-overlay: 0 24px 64px -16px #05080f73;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .2s;
    --control-height: 3rem;
    --gradient-thermo: linear-gradient(90deg, var(--blue-500), var(--red-500));
    color-scheme: light;
  }

  :root, .theme-light {
    --color-bg: var(--white);
    --color-bg-subtle: var(--gray-50);
    --color-surface: var(--white);
    --color-text: var(--gray-900);
    --color-text-muted: var(--gray-500);
    --color-border: var(--gray-200);
    --color-border-strong: var(--gray-300);
    --color-link: var(--blue-600);
    --color-link-hover: var(--blue-700);
    --color-focus: var(--blue-500);
    --color-action: var(--red-500);
    --color-action-hover: var(--red-600);
    --color-accent: var(--blue-600);
    --color-accent-hover: var(--blue-700);
    --color-heading-accent: var(--blue-600);
    --color-success: var(--green-600);
    --color-success-bg: var(--green-50);
    --color-warning: var(--amber-600);
    --color-warning-bg: var(--amber-50);
    --color-danger: var(--red-600);
    --color-danger-bg: var(--red-50);
  }

  .theme-light {
    background-color: var(--color-bg);
    color: var(--color-text);
    color-scheme: light;
  }

  .theme-dark {
    --color-bg: var(--navy-950);
    --color-bg-subtle: var(--navy-900);
    --color-surface: #ffffff0a;
    --color-text: #eef2f8;
    --color-text-muted: #9aa9c2;
    --color-border: #ffffff1f;
    --color-border-strong: #ffffff3d;
    --color-link: var(--blue-400);
    --color-link-hover: #8fb1ff;
    --color-focus: var(--blue-400);
    --color-accent: var(--blue-500);
    --color-accent-hover: var(--blue-600);
    --color-heading-accent: #7da3cc;
    --color-success: #4fd19a;
    --color-success-bg: #4fd19a1f;
    --color-warning: #f0b655;
    --color-warning-bg: #f0b6551f;
    --color-danger: var(--red-400);
    --color-danger-bg: #ea51731f;
    background-color: var(--color-bg);
    color: var(--color-text);
    color-scheme: dark;
  }
}

@layer vendor {
  :root {
    --swiper-theme-color: #007aff;
  }

  :host {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    display: block;
    position: relative;
  }

  .swiper {
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    list-style: none;
    display: block;
    position: relative;
    overflow: hidden;
  }

  .swiper-vertical > .swiper-wrapper {
    flex-direction: column;
  }

  .swiper-wrapper {
    z-index: 1;
    width: 100%;
    height: 100%;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
    display: flex;
    position: relative;
  }

  .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
    transform: translate3d(0, 0, 0);
  }

  .swiper-horizontal {
    touch-action: pan-y;
  }

  .swiper-vertical {
    touch-action: pan-x;
  }

  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    transition-property: transform;
    display: block;
    position: relative;
  }

  .swiper-slide-invisible-blank {
    visibility: hidden;
  }

  .swiper-autoheight, .swiper-autoheight .swiper-slide {
    height: auto;
  }

  .swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height;
  }

  .swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px;
  }

  .swiper-3d .swiper-wrapper {
    transform-style: preserve-3d;
  }

  .swiper-3d {
    perspective: 1200px;
  }

  .swiper-3d .swiper-slide, .swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d;
  }

  .swiper-css-mode > .swiper-wrapper {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: auto;
  }

  .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
    display: none;
  }

  .swiper-css-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }

  .swiper-css-mode.swiper-horizontal > .swiper-wrapper {
    scroll-snap-type: x mandatory;
  }

  .swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-slides-offset-before);
    scroll-margin-inline-start: var(--swiper-slides-offset-before);
  }

  .swiper-css-mode.swiper-horizontal > .swiper-wrapper > .swiper-slide:last-child {
    margin-inline-end: var(--swiper-slides-offset-after);
  }

  .swiper-css-mode.swiper-vertical > .swiper-wrapper {
    scroll-snap-type: y mandatory;
  }

  .swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-slides-offset-before);
    scroll-margin-block-start: var(--swiper-slides-offset-before);
  }

  .swiper-css-mode.swiper-vertical > .swiper-wrapper > .swiper-slide:last-child {
    margin-block-end: var(--swiper-slides-offset-after);
  }

  .swiper-css-mode.swiper-free-mode > .swiper-wrapper {
    scroll-snap-type: none;
  }

  .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: none;
  }

  .swiper-css-mode.swiper-centered > .swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999;
  }

  .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always;
  }

  .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before);
  }

  .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after);
  }

  .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before);
  }

  .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after);
  }

  .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-slide-shadow-bottom {
    pointer-events: none;
    z-index: 10;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .swiper-3d .swiper-slide-shadow {
    background: #00000026;
  }

  .swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, #00000080, #0000);
  }

  .swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, #00000080, #0000);
  }

  .swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, #00000080, #0000);
  }

  .swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(#00000080, #0000);
  }

  .swiper-lazy-preloader {
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-top-color: #0000;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    margin-left: -21px;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  :is(.swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader {
    animation: 1s linear infinite swiper-preloader-spin;
  }

  .swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff;
  }

  .swiper-lazy-preloader-black {
    --swiper-preloader-color: #000;
  }

  @keyframes swiper-preloader-spin {
    0% {
      transform: rotate(0);
    }

    100% {
      transform: rotate(360deg);
    }
  }
}

@layer blocks {
  .page {
    flex-direction: column;
    display: flex;
  }

  .page__main {
    flex: 1;
  }

  .skip-link {
    z-index: 200;
    padding: var(--space-2) var(--space-4);
    background-color: var(--white);
    color: var(--navy-900);
    font-weight: 600;
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    translate: 0 -200%;
  }

  .skip-link:focus {
    translate: 0;
  }

  .container {
    inline-size: 100%;
    max-inline-size: calc(var(--container-max) + var(--container-pad) * 2);
    padding-inline: var(--container-pad);
    margin-inline: auto;
  }

  .container--narrow {
    --container-max: 56rem;
  }

  .section {
    padding-block: var(--section-gap);
  }

  .section--subtle {
    background-color: var(--color-bg-subtle);
  }

  .section--flush-top {
    padding-block-start: 0;
  }

  .section__header {
    margin-block-end: clamp(var(--space-6), 4vw, var(--space-12));
  }

  .section-head {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4) var(--space-8);
    flex-wrap: wrap;
    margin-block-end: clamp(var(--space-6), 4vw, var(--space-10));
    display: flex;
  }

  .scene {
    isolation: isolate;
    position: relative;
    overflow: hidden;
  }

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

  .scene:before {
    background: radial-gradient(60% 70% at 0% 100%, #1746b88c, transparent 70%),
    radial-gradient(50% 65% at 100% 55%, #a8112f80, transparent 70%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  }

  .scene:after {
    mix-blend-mode: screen;
    opacity: .9;
    background: url("../img/facets.svg") center / cover no-repeat;
  }

  .scene--calm:before {
    background: radial-gradient(50% 60% at 0% 100%, #1746b859, transparent 70%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  }

  .split {
    gap: var(--space-8);
    display: grid;
  }

  @media (min-width: 56rem) {
    .split {
      align-items: center;
      gap: clamp(var(--space-8), 5vw, var(--space-16));
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .split__media {
    position: relative;
  }

  .split__img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    inline-size: 100%;
  }

  .split__media:after {
    content: "";
    background: var(--gradient-thermo);
    block-size: 4px;
    position: absolute;
    inset: auto 0 0;
  }

  .split__content {
    justify-items: start;
    gap: var(--space-5);
    display: grid;
  }

  .split__text {
    color: var(--color-text-muted);
    font-size: var(--fs-lead);
    text-wrap: pretty;
  }

  @media (min-width: 56rem) {
    .split--reverse .split__media {
      order: 1;
    }
  }

  .split--top {
    align-items: start;
  }

  .split__content > :is(.info-grid, .props, .list, .heading, .form) {
    justify-self: stretch;
  }

  .icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75px;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
    block-size: 1.25em;
    inline-size: 1.25em;
  }

  .icon--l {
    stroke-width: 1.5px;
    block-size: 2rem;
    inline-size: 2rem;
  }

  .logo {
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    text-decoration: none;
    display: inline-flex;
  }

  .logo:hover {
    color: var(--color-text);
  }

  .logo__mark {
    flex: none;
    block-size: 2.5rem;
    inline-size: 2.5rem;
  }

  .logo__text {
    line-height: 1;
    display: grid;
  }

  .logo__caption {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: .625rem;
    font-weight: 500;
  }

  .logo__name {
    font-family: var(--font-heading);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-block-start: .2em;
    font-size: 1.5rem;
    font-weight: 800;
  }

  .heading {
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 58rem;
    display: grid;
  }

  .heading__eyebrow {
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
  }

  .heading__eyebrow:before {
    content: "";
    background: var(--gradient-thermo);
    block-size: 2px;
    inline-size: 2.5rem;
  }

  .heading__title {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: .01em;
    text-transform: uppercase;
  }

  .heading__title--xl {
    font-size: var(--fs-h1);
  }

  .heading__accent {
    color: var(--color-heading-accent);
  }

  .heading__lead {
    max-inline-size: 44rem;
    color: var(--color-text-muted);
    font-size: var(--fs-lead);
    text-wrap: pretty;
  }

  .theme-dark .heading__title {
    background: linear-gradient(#fff 15%, #b4c3d6 100%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .theme-dark .heading__accent {
    background: linear-gradient(#8eb1d6 10%, #4c77a5 100%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }

  @media (forced-colors: active) {
    .theme-dark .heading__title, .theme-dark .heading__accent {
      color: canvastext;
      background: none;
    }
  }

  .btn {
    --btn-bg: var(--color-action);
    --btn-bg-hover: var(--color-action-hover);
    --btn-color: var(--white);
    --btn-color-hover: var(--btn-color);
    --btn-cut: var(--cut);
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--control-height);
    padding: var(--space-2) var(--space-6);
    background-color: var(--btn-bg);
    color: var(--btn-color);
    font-family: var(--font-heading);
    letter-spacing: .05em;
    text-align: center;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--btn-cut)), calc(100% - var(--btn-cut)) 100%, 0 100%);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    border: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    display: inline-flex;
    position: relative;
  }

  .btn:hover:not(:disabled, [aria-disabled="true"]) {
    background-color: var(--btn-bg-hover);
    color: var(--btn-color-hover);
  }

  .btn:active:not(:disabled, [aria-disabled="true"]) {
    translate: 0 1px;
  }

  .btn:focus-visible {
    outline-offset: -5px;
    outline: 2px solid;
  }

  .btn:disabled, .btn[aria-disabled="true"] {
    --btn-bg: var(--color-border);
    --btn-color: var(--color-text-muted);
    cursor: not-allowed;
  }

  .btn--secondary {
    --btn-bg: var(--color-accent);
    --btn-bg-hover: var(--color-accent-hover);
  }

  .btn--outline {
    --btn-bg: transparent;
    --btn-bg-hover: var(--color-text);
    --btn-color: var(--color-text);
    --btn-color-hover: var(--color-bg);
    box-shadow: inset 0 0 0 1.5px;
  }

  .btn--outline:after {
    content: "";
    inline-size: calc(var(--btn-cut) * 1.4142);
    transform-origin: 100%;
    background-color: currentColor;
    block-size: 1.5px;
    position: absolute;
    inset-block-end: var(--btn-cut);
    inset-inline-end: 0;
    rotate: -45deg;
  }

  .btn--outline:disabled, .btn--outline[aria-disabled="true"] {
    --btn-bg: transparent;
  }

  .btn--ghost {
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-color: var(--color-link);
    --btn-color-hover: var(--color-link-hover);
    padding-inline: var(--space-2);
    clip-path: none;
  }

  .btn--ghost:focus-visible {
    outline-color: var(--color-focus);
    outline-offset: 2px;
  }

  .btn--ghost:disabled, .btn--ghost[aria-disabled="true"] {
    --btn-bg: transparent;
  }

  .btn--s {
    --btn-cut: .5rem;
    min-block-size: 2.5rem;
    padding-inline: var(--space-4);
    font-size: .9375rem;
  }

  .btn--l {
    --btn-cut: .75rem;
    min-block-size: 3.5rem;
    padding-inline: var(--space-8);
    font-size: 1.1875rem;
  }

  .btn--block {
    inline-size: 100%;
  }

  .btn--icon {
    inline-size: var(--control-height);
    padding: 0;
  }

  .btn--icon.btn--s {
    inline-size: 2.5rem;
  }

  @media (forced-colors: active) {
    .btn {
      clip-path: none;
      border: 1px solid buttontext;
    }
  }

  .link {
    align-items: center;
    gap: var(--space-2);
    color: var(--color-link);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
  }

  .link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  .link--arrow .icon {
    transition: translate var(--dur) var(--ease);
  }

  .link--arrow:hover .icon {
    translate: .25rem;
  }

  .link--muted {
    color: var(--color-text-muted);
  }

  .link--muted:hover {
    color: var(--color-text);
  }

  .badge {
    align-items: center;
    gap: var(--space-1);
    background-color: var(--badge-bg, var(--gray-100));
    color: var(--badge-color, var(--gray-700));
    font-family: var(--font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .3em .7em;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    display: inline-flex;
  }

  .badge--accent {
    --badge-bg: var(--blue-600);
    --badge-color: var(--white);
  }

  .badge--action {
    --badge-bg: var(--red-500);
    --badge-color: var(--white);
  }

  .badge--dark {
    --badge-bg: var(--navy-900);
    --badge-color: var(--white);
  }

  .badge--success {
    --badge-bg: var(--color-success-bg);
    --badge-color: var(--color-success);
  }

  .badge--warning {
    --badge-bg: var(--color-warning-bg);
    --badge-color: var(--color-warning);
  }

  .status {
    align-items: center;
    gap: var(--space-2);
    color: var(--status-color, var(--color-text-muted));
    font-size: var(--fs-s);
    font-weight: 500;
    line-height: 1.3;
    display: inline-flex;
  }

  .status:before {
    content: "";
    background-color: currentColor;
    border-radius: 50%;
    flex: none;
    block-size: .5rem;
    inline-size: .5rem;
  }

  .status--in-stock {
    --status-color: var(--color-success);
  }

  .status--on-order {
    --status-color: var(--color-warning);
  }

  .status--on-order:before {
    background-color: #0000;
    border: 2px solid;
  }

  .status--out {
    --status-color: var(--color-text-muted);
  }

  .sku {
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    font-size: var(--fs-s);
    flex-wrap: wrap;
    line-height: 1.35;
    display: flex;
  }

  .sku__label {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
  }

  .sku__value {
    border-radius: var(--radius-s);
    background-color: var(--color-bg-subtle);
    min-inline-size: 0;
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-text);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
    -webkit-user-select: all;
    user-select: all;
    padding: .15em .45em;
    font-weight: 600;
  }

  .sku--l {
    font-size: 1.0625rem;
  }

  .sku--l .sku__label {
    font-size: var(--fs-s);
  }

  .price {
    font-family: var(--font-heading);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .3em;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    display: inline-flex;
  }

  .price__currency {
    font-size: .8em;
    font-weight: 600;
  }

  .price__note {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    white-space: normal;
    flex-basis: 100%;
    font-weight: 400;
  }

  .price--request {
    color: var(--color-text-muted);
    white-space: normal;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .price--l {
    font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  }

  .field {
    gap: var(--space-2);
    display: grid;
  }

  .field__label {
    font-size: var(--fs-s);
    font-weight: 500;
  }

  .field__required {
    color: var(--color-danger);
  }

  .field__optional {
    color: var(--color-text-muted);
    font-weight: 400;
  }

  .field__control {
    inline-size: 100%;
    min-block-size: var(--control-height);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
    font-size: 1rem;
    line-height: 1.4;
  }

  .field__control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
  }

  .field__control:hover:not(:disabled, :focus) {
    border-color: var(--color-text-muted);
  }

  .field__control:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-focus) 25%, transparent);
    outline: 0;
  }

  .field__control:disabled {
    border-color: var(--color-border);
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
  }

  textarea.field__control {
    resize: vertical;
    min-block-size: 7.5rem;
  }

  select.field__control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6c81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    appearance: none;
    cursor: pointer;
    background-size: 1.25rem;
    padding-inline-end: var(--space-10);
  }

  .field__hint {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .field__error {
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-danger);
    font-size: var(--fs-s);
    display: none;
  }

  .field__error .icon {
    margin-block-start: .1em;
  }

  .field--invalid .field__control {
    border-color: var(--color-danger);
    background-color: var(--color-danger-bg);
  }

  .field--invalid .field__control:focus {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-danger) 25%, transparent);
  }

  .field--invalid .field__error {
    display: flex;
  }

  .field--invalid .field__hint {
    display: none;
  }

  .field--valid .field__control {
    border-color: var(--color-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317794f' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1.25rem;
    padding-inline-end: var(--space-10);
  }

  .field__group {
    position: relative;
  }

  .field__group .field__control {
    padding-inline-end: var(--space-12);
  }

  .field__toggle {
    inline-size: var(--control-height);
    color: var(--color-text-muted);
    background: none;
    border: 0;
    place-content: center;
    padding: 0;
    display: grid;
    position: absolute;
    inset: 0 0 0 auto;
  }

  .field__toggle:hover {
    color: var(--color-text);
  }

  .field__toggle:focus-visible {
    outline-offset: -4px;
  }

  .check {
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    min-block-size: 1.5rem;
    display: inline-flex;
  }

  .check__input {
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-color: var(--color-bg);
    appearance: none;
    cursor: pointer;
    block-size: 1.375rem;
    inline-size: 1.375rem;
    transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
    flex: none;
    place-content: center;
    margin-block-start: .1em;
    display: grid;
  }

  .check__input:before {
    content: "";
    background-color: var(--white);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    block-size: .75rem;
    inline-size: .75rem;
    transition: scale var(--dur) var(--ease);
    scale: 0;
  }

  .check__input:hover:not(:disabled) {
    border-color: var(--color-accent);
  }

  .check__input:checked {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
  }

  .check__input:checked:before {
    scale: 1;
  }

  .check__input:disabled {
    border-color: var(--color-border);
    background-color: var(--color-bg-subtle);
    cursor: not-allowed;
  }

  .check__input:disabled:checked {
    background-color: var(--color-border-strong);
  }

  .check__input[type="radio"] {
    border-radius: 50%;
  }

  .check__input[type="radio"]:before {
    clip-path: none;
    border-radius: 50%;
    block-size: .5rem;
    inline-size: .5rem;
  }

  .check__label {
    font-size: var(--fs-body);
    line-height: 1.4;
  }

  .check__count {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .check:has(.check__input:disabled) {
    color: var(--color-text-muted);
    cursor: not-allowed;
  }

  .check--s .check__label {
    font-size: var(--fs-s);
  }

  @media (forced-colors: active) {
    .check__input:checked {
      background-color: highlight;
    }
  }

  .check__error {
    color: var(--color-danger);
    font-size: var(--fs-s);
    margin-block-start: var(--space-1);
    display: none;
  }

  .check--invalid .check__input {
    border-color: var(--color-danger);
    background-color: var(--color-danger-bg);
  }

  .check--invalid .check__error {
    display: block;
  }

  .counter {
    --counter-size: var(--control-height);
    grid-template-columns: var(--counter-size) minmax(3rem, 4rem) var(--counter-size);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-color: var(--color-bg);
    display: inline-grid;
  }

  .counter__btn {
    min-block-size: calc(var(--counter-size) - 2px);
    color: var(--color-text);
    transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    background: none;
    border: 0;
    place-content: center;
    padding: 0;
    display: grid;
  }

  .counter__btn:hover:not(:disabled) {
    background-color: var(--color-bg-subtle);
    color: var(--color-accent);
  }

  .counter__btn:focus-visible {
    outline-offset: -2px;
  }

  .counter__btn:disabled {
    color: var(--color-border-strong);
    cursor: not-allowed;
  }

  .counter__input {
    border: 0;
    border-inline: 1px solid var(--color-border);
    min-inline-size: 0;
    font-family: var(--font-mono);
    text-align: center;
    appearance: textfield;
    background: none;
    padding: 0;
    font-size: 1rem;
    font-weight: 500;
  }

  .counter__input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }

  .counter__input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .counter__input:focus-visible {
    outline-offset: -2px;
  }

  .counter--s {
    --counter-size: 2.5rem;
  }

  .upload {
    align-items: center;
    gap: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .upload__btn {
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--control-height);
    padding: var(--space-2) var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-s);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    font-weight: 500;
    display: inline-flex;
  }

  .upload__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .upload__input:focus-visible + .upload__btn {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .upload__name {
    min-inline-size: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    overflow-wrap: anywhere;
  }

  .upload--filled .upload__name {
    color: var(--color-text);
  }

  .form {
    gap: var(--space-5);
    display: grid;
  }

  .form__row {
    align-items: start;
    gap: var(--space-5);
    display: grid;
  }

  @media (min-width: 40rem) {
    .form__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .form__actions {
    align-items: center;
    gap: var(--space-4) var(--space-6);
    flex-wrap: wrap;
    display: flex;
  }

  .form__note {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    flex: 14rem;
    line-height: 1.45;
  }

  .form__success {
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-s);
    background-color: var(--color-success-bg);
    justify-items: start;
    display: none;
  }

  .form__success .icon {
    color: var(--color-success);
  }

  .form__success-title {
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-heading);
  }

  .form--sent > :not(.form__success) {
    display: none;
  }

  .form--sent .form__success {
    display: grid;
  }

  .form__success:focus {
    outline: 0;
  }

  .form__links {
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    display: flex;
  }

  .form__legend {
    font-family: var(--font-heading);
    padding: 0;
    font-size: 1.125rem;
    font-weight: 600;
  }

  .form__fieldset {
    gap: var(--space-5);
    border: 0;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    display: grid;
  }

  .switch {
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    min-block-size: 1.5rem;
    display: inline-flex;
    position: relative;
  }

  .switch__input {
    opacity: 0;
    cursor: pointer;
    block-size: 1.5rem;
    inline-size: 2.75rem;
    margin: 0;
    position: absolute;
  }

  .switch__track {
    background-color: var(--color-border-strong);
    block-size: 1.5rem;
    inline-size: 2.75rem;
    transition: background-color var(--dur) var(--ease);
    border-radius: 1.5rem;
    flex: none;
    position: relative;
  }

  .switch__track:after {
    content: "";
    background-color: var(--white);
    block-size: 1.125rem;
    inline-size: 1.125rem;
    transition: translate var(--dur) var(--ease);
    border-radius: 50%;
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    box-shadow: 0 1px 2px #0e152440;
  }

  .switch__input:checked + .switch__track {
    background-color: var(--color-accent);
  }

  .switch__input:checked + .switch__track:after {
    translate: 1.25rem;
  }

  .switch__input:focus-visible + .switch__track {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .switch__input:disabled + .switch__track {
    opacity: .5;
  }

  .switch__label {
    font-size: var(--fs-s);
    line-height: 1.35;
  }

  @media (forced-colors: active) {
    .switch__track {
      border: 1px solid buttontext;
    }

    .switch__input:checked + .switch__track {
      background-color: highlight;
    }
  }

  .chip {
    cursor: pointer;
    display: inline-flex;
  }

  .chip__label {
    min-block-size: 2.25rem;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-color: var(--color-bg);
    font-size: var(--fs-s);
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    align-items: center;
    font-weight: 500;
    line-height: 1.2;
    display: inline-flex;
  }

  .chip:hover .chip__input:not(:disabled, :checked) + .chip__label {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .chip__input:checked + .chip__label {
    border-color: var(--navy-900);
    background-color: var(--navy-900);
    color: var(--white);
  }

  .chip__input:focus-visible + .chip__label {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .chip__input:disabled + .chip__label {
    border-color: var(--color-border);
    background-color: var(--color-bg-subtle);
    color: var(--color-border-strong);
    cursor: not-allowed;
  }

  .chip-list {
    gap: var(--space-2);
    flex-wrap: wrap;
    display: flex;
  }

  .tag {
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-s);
    background-color: var(--blue-50);
    min-block-size: 1.875rem;
    max-inline-size: 100%;
    color: var(--blue-700);
    font-size: var(--fs-xs);
    text-align: start;
    transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    border: 0;
    padding: .2em .4em .2em .7em;
    font-weight: 500;
    line-height: 1.25;
    display: inline-flex;
  }

  .tag .icon {
    block-size: 1rem;
    inline-size: 1rem;
  }

  .tag:hover {
    background-color: var(--blue-600);
    color: var(--white);
  }

  .tag__text {
    overflow-wrap: anywhere;
  }

  .range {
    --range-thumb: 1.25rem;
    --range-from: 0;
    --range-to: 1;
    gap: var(--space-4);
    display: grid;
  }

  @media (pointer: coarse) {
    .range {
      --range-thumb: 1.75rem;
    }
  }

  .range__fields {
    gap: var(--space-2);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .range__field {
    align-items: center;
    gap: var(--space-2);
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-color: var(--color-bg);
    transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
    display: flex;
  }

  .range__field:focus-within {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-focus) 25%, transparent);
  }

  .range__prefix {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .range__input {
    inline-size: 100%;
    min-inline-size: 0;
    font-family: var(--font-mono);
    background: none;
    border: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 500;
  }

  .range__input:focus {
    outline: 0;
  }

  .range__slider {
    block-size: var(--range-thumb);
    position: relative;
  }

  .range__slider:before {
    --from: calc(var(--range-thumb) / 2 + var(--range-from) * (100% - var(--range-thumb)));
    --to: calc(var(--range-thumb) / 2 + var(--range-to) * (100% - var(--range-thumb)));
    content: "";
    background: linear-gradient(to right,
      var(--color-border) var(--from),
      var(--color-accent) var(--from) var(--to),
      var(--color-border) var(--to));
    border-radius: 2px;
    block-size: 4px;
    position: absolute;
    inset: 50% 0 auto;
    translate: 0 -50%;
  }

  .range__thumb {
    appearance: none;
    pointer-events: none;
    background: none;
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
    position: absolute;
    inset: 0;
  }

  .range__thumb:focus {
    outline: 0;
  }

  .range__thumb::-webkit-slider-runnable-track {
    background: none;
    block-size: 100%;
  }

  .range__thumb::-moz-range-track {
    background: none;
  }

  .range__thumb::-webkit-slider-thumb {
    inline-size: var(--range-thumb);
    block-size: var(--range-thumb);
    border: 3px solid var(--color-bg);
    border-radius: var(--radius-s);
    background-color: var(--navy-900);
    box-shadow: 0 0 0 1px var(--navy-900);
    appearance: none;
    pointer-events: auto;
    cursor: grab;
  }

  .range__thumb::-moz-range-thumb {
    box-sizing: border-box;
    inline-size: var(--range-thumb);
    block-size: var(--range-thumb);
    border: 3px solid var(--color-bg);
    border-radius: var(--radius-s);
    background-color: var(--navy-900);
    box-shadow: 0 0 0 1px var(--navy-900);
    pointer-events: auto;
    cursor: grab;
  }

  .range__thumb:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  .range__thumb:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  .breadcrumbs {
    scrollbar-width: none;
    overflow-x: auto;
  }

  .breadcrumbs__list {
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    white-space: nowrap;
    margin: 0;
    display: flex;
  }

  .breadcrumbs__item {
    align-items: center;
    gap: var(--space-2);
    display: flex;
  }

  .breadcrumbs__item:not(:last-child):after {
    content: "/";
    color: var(--color-border-strong);
  }

  .breadcrumbs__link {
    color: inherit;
    text-decoration: none;
  }

  .breadcrumbs__link:hover {
    color: var(--color-link);
  }

  .breadcrumbs__current {
    color: var(--color-text);
  }

  .pagination__list {
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin: 0;
    display: flex;
  }

  .pagination__link {
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
    padding-inline: var(--space-2);
    border-radius: var(--radius-s);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    border: 1px solid #0000;
    place-content: center;
    font-weight: 500;
    text-decoration: none;
    display: grid;
  }

  .pagination__link:hover {
    border-color: var(--color-border-strong);
    color: var(--color-link);
  }

  .pagination__link--current {
    border-color: var(--navy-900);
    background-color: var(--navy-900);
    color: var(--white);
  }

  .pagination__link--current:hover {
    border-color: var(--navy-900);
    color: var(--white);
  }

  .pagination__link--disabled {
    color: var(--color-border-strong);
    pointer-events: none;
  }

  .pagination__gap {
    min-inline-size: 2rem;
    color: var(--color-text-muted);
    place-content: center;
    display: grid;
  }

  .tabs__list {
    gap: var(--space-6);
    border-block-end: 1px solid var(--color-border);
    scrollbar-width: none;
    display: flex;
    overflow-x: auto;
  }

  .tabs__tab {
    min-block-size: var(--control-height);
    padding: var(--space-3) 0;
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    letter-spacing: .03em;
    text-transform: uppercase;
    transition: color var(--dur) var(--ease);
    background: none;
    border: 0;
    flex: none;
    font-size: 1.125rem;
    font-weight: 600;
    position: relative;
  }

  .tabs__tab:after {
    content: "";
    background: var(--gradient-thermo);
    block-size: 2px;
    transition: scale .3s var(--ease);
    position: absolute;
    inset: auto 0 0;
    scale: 0 1;
  }

  .tabs__tab:hover {
    color: var(--color-text);
  }

  .tabs__tab[aria-selected="true"] {
    color: var(--color-text);
  }

  .tabs__tab[aria-selected="true"]:after {
    scale: 1;
  }

  .tabs__tab:focus-visible {
    outline-offset: -2px;
  }

  .tabs__count {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
  }

  .tabs__panel {
    padding-block-start: var(--space-6);
  }

  .tabs__panel:focus-visible {
    outline-offset: 4px;
  }

  .accordion {
    border-block-start: 1px solid var(--color-border);
  }

  .accordion__item {
    border-block-end: 1px solid var(--color-border);
  }

  .accordion__item::details-content {
    block-size: 0;
    transition: block-size .3s var(--ease),
      content-visibility .3s allow-discrete;
    overflow: clip;
  }

  .accordion__item[open]::details-content {
    block-size: auto;
  }

  @supports (interpolate-size: allow-keywords) {
    .accordion {
      interpolate-size: allow-keywords;
    }
  }

  .accordion__summary {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
    font-weight: 500;
    list-style: none;
    display: flex;
  }

  .accordion__summary::-webkit-details-marker {
    display: none;
  }

  .accordion__summary:hover {
    color: var(--color-link);
  }

  .accordion__summary .icon {
    transition: rotate .3s var(--ease);
  }

  .accordion__item[open] > .accordion__summary .icon {
    rotate: 180deg;
  }

  .accordion__body {
    color: var(--color-text-muted);
    padding-block-end: var(--space-5);
  }

  .table-wrap {
    border: 1px solid var(--color-border);
    max-inline-size: 100%;
    overflow-x: auto;
  }

  .table-wrap:focus-visible {
    outline-offset: 2px;
  }

  .table {
    inline-size: 100%;
    font-size: var(--fs-s);
    line-height: 1.4;
  }

  .table th, .table td {
    padding: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: middle;
  }

  @media (min-width: 40rem) {
    .table th, .table td {
      padding-inline: var(--space-4);
    }
  }

  .table tr:last-child > * {
    border-block-end: 0;
  }

  .table thead th {
    background-color: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 600;
  }

  .table tbody th {
    font-weight: 500;
  }

  .table--spec th[rowspan] {
    border-inline-end: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    vertical-align: top;
    font-weight: 600;
  }

  .table--spec td:last-child {
    font-family: var(--font-mono);
    font-weight: 500;
  }

  @media (min-width: 40rem) {
    .table--spec td:last-child {
      white-space: nowrap;
    }
  }

  .table--spec td:not(:last-child) {
    color: var(--color-text-muted);
  }

  .table--striped tbody tr:nth-child(2n) > td {
    background-color: color-mix(in oklab, var(--color-bg-subtle) 60%, transparent);
  }

  .table--qty th:last-child, .table--qty td:last-child {
    font-family: var(--font-mono);
    text-align: end;
    white-space: nowrap;
    font-weight: 500;
  }

  .table--qty thead th:last-child {
    font-weight: 600;
  }

  .table__muted {
    color: var(--color-text-muted);
  }

  .table__nowrap {
    white-space: nowrap;
  }

  .table-wrap--stack {
    container: table-stack / inline-size;
  }

  @container table-stack (inline-size < 40rem) {
    .table--stack {
      display: block;
    }

    .table--stack thead {
      display: none;
    }

    .table--stack tbody, .table--stack tr {
      display: block;
    }

    .table--stack tr {
      padding: var(--space-3) var(--space-4);
    }

    .table--stack tr:not(:last-child) {
      border-block-end: 1px solid var(--color-border);
    }

    .table--stack td, .table--stack tbody th {
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-4);
      padding: var(--space-1) 0;
      text-align: end;
      border: 0;
      display: flex;
    }

    :is(.table--stack td, .table--stack tbody th):before {
      content: attr(data-label);
      color: var(--color-text-muted);
      font-size: var(--fs-xs);
      text-align: start;
      flex: none;
      font-weight: 400;
    }

    .table--stack tbody th {
      font-size: var(--fs-body);
      padding-block-end: var(--space-2);
    }
  }

  .prose {
    overflow-wrap: break-word;
    max-inline-size: 48rem;
    font-size: 1.0625rem;
  }

  .prose > * + * {
    margin-block-start: 1.1em;
  }

  .prose h2 {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-block-start: 1.8em;
  }

  .prose h3 {
    font-size: var(--fs-h3);
    margin-block-start: 1.6em;
  }

  .prose h4 {
    font-size: var(--fs-h4);
    margin-block-start: 1.4em;
  }

  .prose :is(h2, h3, h4):first-child {
    margin-block-start: 0;
  }

  .prose p {
    text-wrap: pretty;
  }

  .prose :is(ul, ol) {
    gap: .5em;
    padding-inline-start: 1.5em;
    display: grid;
  }

  .prose ul {
    list-style: none;
  }

  .prose ul > li {
    position: relative;
  }

  .prose ul > li:before {
    content: "";
    background-color: var(--color-action);
    block-size: 2px;
    inline-size: .5em;
    position: absolute;
    inset-block-start: .65em;
    inset-inline-start: -1.25em;
  }

  .prose ol > li::marker {
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: .9em;
    font-weight: 600;
  }

  .prose blockquote {
    padding: var(--space-4) var(--space-6);
    border-inline-start: 3px solid #0000;
    border-image: linear-gradient(180deg, var(--blue-500), var(--red-500)) 1;
    background-color: var(--color-bg-subtle);
    font-size: var(--fs-lead);
  }

  .prose img {
    inline-size: 100%;
  }

  .prose figcaption {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    margin-block-start: var(--space-2);
  }

  .prose table {
    border: 1px solid var(--color-border);
    max-inline-size: 100%;
    font-size: var(--fs-s);
    display: block;
    overflow-x: auto;
  }

  .prose table th, .prose table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    text-align: start;
  }

  .prose table th {
    background-color: var(--color-bg-subtle);
    white-space: nowrap;
    font-weight: 600;
  }

  .prose table tr:last-child td {
    border-block-end: 0;
  }

  .prose figure, .prose .video {
    margin-block: 1.6em;
  }

  .list {
    gap: .65em;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .list__item {
    text-wrap: pretty;
    padding-inline-start: 1.75em;
    position: relative;
  }

  .list__item:before {
    content: "";
    background-color: var(--color-action);
    block-size: 2px;
    inline-size: .75em;
    position: absolute;
    inset-block-start: .7em;
    inset-inline-start: 0;
  }

  .list .list {
    margin-block-start: .65em;
  }

  .list .list .list__item:before {
    background-color: var(--color-border-strong);
    inline-size: .4em;
  }

  .list--check > .list__item:before {
    background-color: var(--color-accent);
    block-size: 1.15em;
    inline-size: 1.15em;
    inset-block-start: .2em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .list--ordered {
    gap: var(--space-4);
    counter-reset: list;
  }

  .list--ordered > .list__item {
    counter-increment: list;
    padding-inline-start: 3rem;
  }

  .list--ordered > .list__item:before {
    content: counter(list, decimal-leading-zero);
    block-size: auto;
    inline-size: auto;
    color: var(--color-heading-accent);
    font-family: var(--font-mono);
    background: none;
    font-weight: 600;
    inset-block-start: 0;
  }

  @media (min-width: 48rem) {
    .list--columns {
      column-gap: var(--space-8);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .list__title {
    font-weight: 600;
    display: block;
  }

  .list__text {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .props {
    gap: var(--space-2);
    font-size: var(--fs-s);
    margin: 0;
    display: grid;
  }

  .props__row {
    align-items: baseline;
    gap: var(--space-2);
    display: flex;
  }

  .props__name {
    align-items: baseline;
    gap: var(--space-2);
    min-inline-size: 40%;
    color: var(--color-text-muted);
    flex: auto;
    display: flex;
  }

  .props__name:after {
    content: "";
    min-inline-size: var(--space-4);
    border-block-end: 1px dotted var(--color-border-strong);
    flex: 1;
  }

  .props__value {
    text-align: end;
    overflow-wrap: anywhere;
    max-inline-size: 60%;
    margin: 0;
    font-weight: 500;
  }

  .doc-list {
    border-block-start: 1px solid var(--color-border);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .doc-list__item {
    border-block-end: 1px solid var(--color-border);
  }

  .doc-list__link {
    align-items: center;
    gap: var(--space-1) var(--space-4);
    padding-block: var(--space-3);
    color: var(--color-text);
    grid-template-columns: auto 1fr auto;
    text-decoration: none;
    display: grid;
  }

  .doc-list__link .icon {
    color: var(--color-text-muted);
    transition: color var(--dur) var(--ease);
  }

  .doc-list__link:hover {
    color: var(--color-link);
  }

  .doc-list__link:hover .icon {
    color: var(--color-link);
  }

  .doc-list__icon {
    stroke-width: 1.5px;
    grid-row: span 2;
    block-size: 1.75rem;
    inline-size: 1.75rem;
  }

  .doc-list__name {
    overflow-wrap: anywhere;
    font-weight: 500;
  }

  .doc-list__meta {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    grid-column: 2;
  }

  .doc-list__download {
    grid-area: 1 / 3 / span 2;
  }

  .feature-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    padding: 0 1px 1px 0;
    display: grid;
  }

  .feature {
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    margin: 0 -1px -1px 0;
    display: grid;
  }

  .theme-dark .feature {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: #05080fb8;
  }

  .feature__head {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-heading-accent);
    display: flex;
  }

  .feature__num {
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    opacity: .55;
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 1;
  }

  .feature__title {
    letter-spacing: .01em;
    font-size: 1.375rem;
    font-weight: 600;
  }

  .feature__text {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .product-card {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    block-size: 100%;
    transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
    flex-direction: column;
    display: flex;
    position: relative;
    container: product-card / inline-size;
  }

  .product-card:before {
    content: "";
    background: var(--gradient-thermo);
    transform-origin: 0;
    block-size: 2px;
    transition: scale .35s var(--ease);
    position: absolute;
    inset: -1px -1px auto;
    scale: 0 1;
  }

  .product-card:hover, .product-card:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-raised);
  }

  :is(.product-card:hover, .product-card:focus-within):before {
    scale: 1;
  }

  .product-card__media {
    --media-pad: var(--space-5);
    aspect-ratio: 4 / 3;
    padding: var(--media-pad);
    background-color: var(--color-bg-subtle);
    place-items: center;
    display: grid;
    position: relative;
  }

  .product-card__img {
    inset: var(--media-pad);
    inline-size: calc(100% - var(--media-pad) * 2);
    block-size: calc(100% - var(--media-pad) * 2);
    object-fit: contain;
    transition: scale .4s var(--ease);
    position: absolute;
  }

  .product-card:hover .product-card__img {
    scale: 1.04;
  }

  .product-card__media--empty {
    align-content: center;
    gap: var(--space-2);
    color: var(--gray-400);
    font-size: var(--fs-xs);
    text-align: center;
  }

  .product-card__media--empty .icon {
    stroke-width: 1.25px;
    block-size: 2.5rem;
    inline-size: 2.5rem;
    margin-inline: auto;
  }

  .product-card__badges {
    gap: var(--space-1);
    flex-wrap: wrap;
    display: flex;
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
  }

  .product-card__body {
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) 0;
    flex: 1;
    display: grid;
  }

  .product-card__brand {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .6875rem;
    font-weight: 500;
  }

  .product-card__title {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    text-wrap: pretty;
    overflow-wrap: anywhere;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-weight: 500;
    line-height: 1.35;
  }

  .product-card__link {
    color: var(--color-text);
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    text-decoration: none;
    display: -webkit-box;
    overflow: hidden;
  }

  .product-card__link:hover {
    color: var(--color-link);
  }

  .product-card__link:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .product-card__link:focus-visible {
    outline: 0;
  }

  .product-card__link:focus-visible:after {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .product-card__footer {
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-4);
    display: grid;
  }

  .product-card__action {
    z-index: 1;
    position: relative;
  }

  @container product-card (inline-size >= 21rem) {
    .product-card__footer {
      grid-template-columns: 1fr auto;
      align-items: center;
    }
  }

  @container product-card (inline-size < 15rem) {
    .product-card__media {
      --media-pad: var(--space-3);
    }

    .product-card__body {
      gap: var(--space-2);
      padding: var(--space-3) var(--space-3) 0;
    }

    .product-card__title {
      font-size: var(--fs-s);
    }

    .product-card__link {
      -webkit-line-clamp: 4;
      line-clamp: 4;
    }

    .product-card__footer {
      padding: var(--space-3);
      margin-block-start: var(--space-3);
    }

    .product-card .price {
      font-size: 1.25rem;
    }

    .product-card .price--request {
      font-size: 1rem;
    }
  }

  .product-grid {
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  @media (min-width: 40rem) {
    .product-grid {
      gap: var(--space-5);
      grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    }
  }

  .filter {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
  }

  .filter__head {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    display: flex;
  }

  .filter__heading {
    align-items: center;
    gap: var(--space-2);
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
  }

  .filter__tags {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    flex-wrap: wrap;
    display: flex;
  }

  .filter__group {
    border-block-end: 1px solid var(--color-border);
  }

  .filter__summary {
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--control-height);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
    font-weight: 600;
    list-style: none;
    display: flex;
  }

  .filter__summary::-webkit-details-marker {
    display: none;
  }

  .filter__summary:hover {
    color: var(--color-link);
  }

  .filter__summary:focus-visible {
    outline-offset: -2px;
  }

  .filter__summary .icon {
    color: var(--color-text-muted);
    transition: rotate .3s var(--ease);
    margin-inline-start: auto;
  }

  .filter__group[open] > .filter__summary .icon {
    rotate: 180deg;
  }

  .filter__unit {
    color: var(--color-text-muted);
    font-weight: 400;
  }

  .filter__count {
    background-color: var(--color-accent);
    block-size: 1.25rem;
    min-inline-size: 1.25rem;
    color: var(--white);
    font-family: var(--font-mono);
    border-radius: 1rem;
    place-content: center;
    padding-inline: .3em;
    font-size: .6875rem;
    font-weight: 600;
    display: grid;
  }

  .filter__body {
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
    display: grid;
  }

  .filter__options {
    gap: var(--space-3);
    margin: 0;
    display: grid;
  }

  .filter__search {
    min-block-size: 2.5rem;
    padding-block: var(--space-2);
    font-size: 1rem;
  }

  .filter__more {
    color: var(--color-link);
    font-size: var(--fs-s);
    background: none;
    border: 0;
    justify-self: start;
    padding: 0;
    font-weight: 500;
  }

  .filter__more:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  .filter__empty {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .filter__row {
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    display: grid;
  }

  .filter__footer {
    gap: var(--space-2);
    padding: var(--space-4);
    display: grid;
  }

  .article-card {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    block-size: 100%;
    transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
    flex-direction: column;
    display: flex;
    position: relative;
    container: article-card / inline-size;
  }

  .article-card:before {
    content: "";
    z-index: 1;
    background: var(--gradient-thermo);
    transform-origin: 0;
    block-size: 2px;
    transition: scale .35s var(--ease);
    position: absolute;
    inset: -1px -1px auto;
    scale: 0 1;
  }

  .article-card:hover, .article-card:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-raised);
  }

  :is(.article-card:hover, .article-card:focus-within):before {
    scale: 1;
  }

  .article-card__media {
    aspect-ratio: 3 / 2;
    background-color: var(--color-bg-subtle);
    flex: none;
    overflow: hidden;
  }

  .article-card__img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
    transition: scale .5s var(--ease);
  }

  .article-card:hover .article-card__img {
    scale: 1.05;
  }

  .article-card__body {
    gap: var(--space-3);
    padding: var(--space-5);
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  .article-card__meta {
    align-items: center;
    gap: var(--space-2) var(--space-3);
    flex-wrap: wrap;
    display: flex;
  }

  .article-card__date {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
  }

  .article-card__title {
    letter-spacing: .005em;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .article-card__link {
    color: var(--color-text);
    text-decoration: none;
  }

  .article-card__link:hover {
    color: var(--color-link);
  }

  .article-card__link:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .article-card__link:focus-visible {
    outline: 0;
  }

  .article-card__link:focus-visible:after {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .article-card__text {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    text-wrap: pretty;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .article-card__more {
    align-items: center;
    gap: var(--space-2);
    color: var(--color-link);
    font-size: var(--fs-s);
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    font-weight: 500;
    display: inline-flex;
  }

  .article-card__more .icon {
    transition: translate var(--dur) var(--ease);
  }

  .article-card:hover .article-card__more .icon {
    translate: .25rem;
  }

  @media (min-width: 48rem) {
    .article-card--row {
      flex-direction: row;
    }

    .article-card--row .article-card__media {
      aspect-ratio: auto;
      min-block-size: 17rem;
      inline-size: 42%;
    }

    .article-card--row .article-card__body {
      padding: var(--space-8);
      justify-content: center;
    }

    .article-card--row .article-card__title {
      font-size: var(--fs-h3);
    }

    .article-card--row .article-card__more {
      margin-block-start: 0;
    }
  }

  .article-grid {
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr));
    display: grid;
  }

  .article-grid__lead {
    grid-column: 1 / -1;
  }

  .slider {
    --slider-gap: var(--space-5);
    gap: var(--space-5);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  @media not (min-width: 40rem) {
    .slider {
      --slider-gap: var(--space-3);
    }
  }

  .slider__head {
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4);
    display: flex;
  }

  .slider__title {
    font-size: var(--fs-h3);
    letter-spacing: .01em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .slider__nav {
    gap: var(--space-2);
    flex: none;
    display: flex;
  }

  .slider__arrow {
    inline-size: var(--control-height);
    block-size: var(--control-height);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    place-content: center;
    padding: 0;
    display: grid;
  }

  .slider__arrow:hover:not(:disabled) {
    border-color: var(--navy-900);
    background-color: var(--navy-900);
    color: var(--white);
  }

  .slider__arrow:disabled {
    color: var(--color-border-strong);
    cursor: default;
  }

  @media not (min-width: 40rem) {
    .slider__arrow {
      block-size: 2.5rem;
      inline-size: 2.5rem;
    }
  }

  .slider__arrow--hidden {
    display: none;
  }

  .slider__viewport {
    margin: -1rem;
    padding: 1rem;
  }

  .slider__viewport:not(.swiper-initialized) {
    scrollbar-width: none;
    overflow-x: auto;
  }

  .slider__viewport:not(.swiper-initialized) .slider__slide:not(:last-child) {
    margin-inline-end: var(--slider-gap);
  }

  .slider__slide {
    block-size: auto;
  }

  .slider--cards .slider__slide {
    inline-size: 16.5rem;
  }

  @media not (min-width: 40rem) {
    .slider--cards .slider__slide {
      inline-size: 11.5rem;
    }
  }

  .slider--photos {
    position: relative;
  }

  .slider--photos .slider__viewport {
    margin: 0;
    padding: 0;
  }

  .slider--photos .slider__slide {
    inline-size: 100%;
  }

  .slider__photo {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    inline-size: 100%;
  }

  .slider__caption {
    padding: var(--space-12) var(--space-5) var(--space-4);
    color: var(--white);
    font-size: var(--fs-s);
    background: linear-gradient(0deg, #05080fcc, #0000);
    position: absolute;
    inset: auto 0 0;
  }

  @media (min-width: 40rem) {
    .slider__caption {
      padding-inline-end: 13rem;
    }
  }

  .slider__panel {
    inset: var(--space-3) var(--space-3) auto auto;
    z-index: 2;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: #05080fa6;
    align-items: center;
    display: flex;
    position: absolute;
  }

  @media (min-width: 40rem) {
    .slider__panel {
      inset: auto var(--space-4) var(--space-4) auto;
    }
  }

  .slider__counter {
    min-inline-size: 4rem;
    color: var(--white);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    text-align: center;
    font-weight: 500;
  }

  .slider--photos .slider__arrow {
    block-size: 2.75rem;
    inline-size: 2.75rem;
    color: var(--white);
    background-color: #0000;
    border: 0;
  }

  .slider--photos .slider__arrow:hover:not(:disabled) {
    background-color: var(--white);
    color: var(--navy-900);
  }

  .slider--photos .slider__arrow:disabled {
    color: #ffffff59;
  }

  .video {
    gap: var(--space-3);
    margin: 0;
    display: grid;
  }

  .video__frame {
    aspect-ratio: 16 / 9;
    background-color: var(--navy-950);
    position: relative;
    overflow: hidden;
    container-type: inline-size;
  }

  .video__media {
    object-fit: cover;
    border: 0;
    block-size: 100%;
    inline-size: 100%;
    position: absolute;
    inset: 0;
  }

  .video__play {
    inline-size: 100%;
    color: var(--white);
    text-align: start;
    background: linear-gradient(0deg, #05080fbf, #05080f26 60%);
    border: 0;
    place-items: center;
    padding: 0;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .video__play:focus-visible {
    outline-offset: -4px;
    outline-color: var(--white);
  }

  .video__play:after {
    content: "";
    background: var(--gradient-thermo);
    block-size: 3px;
    position: absolute;
    inset: auto 0 0;
  }

  .video__play-icon {
    aspect-ratio: 1 / 1.1547;
    background-color: var(--color-action);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    inline-size: clamp(4rem, 12cqi, 6rem);
    transition: background-color var(--dur) var(--ease),
    scale .3s var(--ease);
    place-content: center;
    display: grid;
  }

  .video__play-icon .icon {
    aspect-ratio: 1;
    fill: currentColor;
    stroke: none;
    block-size: auto;
    inline-size: 40%;
    margin-inline: auto;
    translate: 8%;
  }

  .video__play:hover .video__play-icon {
    background-color: var(--color-action-hover);
    scale: 1.08;
  }

  .video__info {
    inset: auto var(--space-5) var(--space-5);
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    display: flex;
    position: absolute;
  }

  .video__title {
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem);
    font-weight: 600;
    line-height: var(--lh-heading);
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  .video__duration {
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    flex: none;
  }

  .video__caption {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  @container (inline-size < 30rem) {
    .video__play {
      padding-block-end: 3.5rem;
    }

    .video__info {
      inset: auto var(--space-4) var(--space-4);
    }

    .video__title {
      font-size: 1rem;
    }
  }

  .video--playing .video__play {
    display: none;
  }

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

  .modal {
    inline-size: min(100% - var(--space-8), var(--modal-width, 32rem));
    max-block-size: min(100dvh - var(--space-8), 48rem);
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    transition: opacity .25s var(--ease),
    translate .25s var(--ease),
    overlay .25s allow-discrete,
    display .25s allow-discrete;
    border: 0;
    padding: 0;
    translate: 0 1rem;
  }

  .modal[open] {
    opacity: 1;
    translate: 0;
  }

  @starting-style {
    .modal[open] {
      opacity: 0;
      translate: 0 1rem;
    }
  }

  .modal::backdrop {
    transition: background-color .25s var(--ease),
      overlay .25s allow-discrete,
      display .25s allow-discrete;
    background-color: #05080f00;
  }

  .modal[open]::backdrop {
    background-color: #05080fb3;
  }

  @starting-style {
    .modal[open]::backdrop {
      background-color: #05080f00;
    }
  }

  .modal:before {
    content: "";
    background: var(--gradient-thermo);
    block-size: 3px;
    display: block;
  }

  @media not (min-width: 36rem) {
    .modal {
      max-block-size: 92dvh;
      inline-size: 100%;
      max-inline-size: none;
      margin-block-end: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .modal {
      transition-duration: .1s;
      translate: none;
    }

    @starting-style {
      .modal[open] {
        translate: none;
      }
    }
  }

  .modal--wide {
    --modal-width: 44rem;
  }

  .modal__inner {
    gap: var(--space-5);
    padding: var(--space-8) clamp(var(--space-5), 5vw, var(--space-10)) clamp(var(--space-6), 5vw, var(--space-10));
    display: grid;
    overflow-y: auto;
  }

  .modal__title {
    font-size: var(--fs-h3);
    letter-spacing: .01em;
    text-transform: uppercase;
    padding-inline-end: var(--space-10);
    font-weight: 600;
  }

  .modal__text {
    color: var(--color-text-muted);
  }

  .modal__close {
    block-size: 2.75rem;
    inline-size: 2.75rem;
    color: var(--color-text-muted);
    transition: color var(--dur) var(--ease);
    background: none;
    border: 0;
    place-content: center;
    padding: 0;
    display: grid;
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-2);
  }

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

  .modal__close .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  html:has(.modal[open]) {
    overflow: hidden;
  }

  .drawer {
    background-color: var(--color-bg);
    block-size: 100dvh;
    max-block-size: none;
    inline-size: min(100%, 22rem);
    max-inline-size: none;
    color: var(--color-text);
    box-shadow: var(--shadow-overlay);
    transition: translate .3s var(--ease),
    overlay .3s allow-discrete,
    display .3s allow-discrete;
    border: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: none;
    inset: 0 auto 0 0;
    translate: -100%;
  }

  .drawer[open] {
    display: flex;
    translate: 0;
  }

  @starting-style {
    .drawer[open] {
      translate: -100%;
    }
  }

  .drawer::backdrop {
    transition: background-color .3s var(--ease),
      overlay .3s allow-discrete,
      display .3s allow-discrete;
    background-color: #05080f00;
  }

  .drawer[open]::backdrop {
    background-color: #05080fb3;
  }

  @starting-style {
    .drawer[open]::backdrop {
      background-color: #05080f00;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .drawer {
      transition-duration: 10ms;
    }
  }

  html:has(.drawer[open]) {
    overflow: hidden;
  }

  .drawer__head {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    flex: none;
    display: flex;
  }

  .drawer__close {
    block-size: 2.75rem;
    inline-size: 2.75rem;
    color: var(--color-text);
    background: none;
    border: 0;
    place-content: center;
    margin-inline-end: calc(var(--space-2) * -1);
    padding: 0;
    display: grid;
  }

  .drawer__close .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  .drawer__body {
    overscroll-behavior: contain;
    flex: 1;
    overflow-y: auto;
  }

  .drawer__group {
    border-block-end: 1px solid var(--color-border);
  }

  .drawer__summary {
    min-block-size: 3.25rem;
    padding-inline: var(--space-4);
    font-family: var(--font-heading);
    letter-spacing: .03em;
    text-transform: uppercase;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 600;
    list-style: none;
    display: flex;
  }

  .drawer__summary::-webkit-details-marker {
    display: none;
  }

  .drawer__summary .icon {
    transition: rotate .3s var(--ease);
  }

  .drawer__group[open] > .drawer__summary .icon {
    rotate: 180deg;
  }

  .drawer__list {
    padding: 0 var(--space-4) var(--space-3);
    margin: 0;
    display: grid;
  }

  .drawer__link {
    padding-block: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    display: block;
  }

  .drawer__link--accent {
    color: var(--color-link);
    font-weight: 500;
  }

  .drawer__nav {
    padding: var(--space-2) var(--space-4);
    margin: 0;
    display: grid;
  }

  .drawer__nav-link {
    padding-block: var(--space-3);
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    display: block;
  }

  .drawer__footer {
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    flex: none;
    display: grid;
  }

  .drawer__phone {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
  }

  .toast-stack {
    inset: auto var(--space-4) var(--space-4) auto;
    z-index: 1000;
    gap: var(--space-3);
    inline-size: min(100% - var(--space-8), 24rem);
    pointer-events: none;
    background: none;
    border: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: flex;
    position: fixed;
    overflow: visible;
  }

  @media not (min-width: 36rem) {
    .toast-stack {
      inset-inline: var(--space-4);
      inline-size: auto;
    }
  }

  .toast {
    align-items: start;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    background-color: var(--navy-900);
    color: var(--white);
    box-shadow: var(--shadow-overlay);
    pointer-events: auto;
    animation: toast-in .3s var(--ease);
    grid-template-columns: auto 1fr auto;
    display: grid;
    position: relative;
  }

  .toast:before {
    content: "";
    background: var(--gradient-thermo);
    block-size: 2px;
    position: absolute;
    inset: 0 0 auto;
  }

  .toast > .icon {
    color: #4fd19a;
    margin-block-start: .1em;
  }

  .toast--error > .icon {
    color: var(--red-400);
  }

  .toast--leaving {
    opacity: 0;
    transition: opacity .2s var(--ease),
    translate .2s var(--ease);
    translate: 0 .5rem;
  }

  .toast__title {
    font-weight: 600;
    line-height: 1.35;
  }

  .toast__text {
    color: #b9c4d6;
    font-size: var(--fs-s);
    overflow-wrap: anywhere;
    grid-column: 2;
  }

  .toast__link {
    color: #8fb1ff;
    font-size: var(--fs-s);
    grid-column: 2;
    justify-self: start;
    font-weight: 500;
  }

  .toast__link:hover {
    color: var(--white);
  }

  .toast__close {
    color: #9aa9c2;
    background: none;
    border: 0;
    grid-area: 1 / 3;
    place-content: center;
    block-size: 1.75rem;
    inline-size: 1.75rem;
    margin: -.25rem -.25rem 0 0;
    padding: 0;
    display: grid;
  }

  .toast__close:hover {
    color: var(--white);
  }

  .toast__close:focus-visible {
    outline-color: var(--white);
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      translate: 0 .75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .toast {
      animation: none;
    }
  }

  .alert {
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-inline-start: 3px solid var(--alert-color, var(--color-accent));
    background-color: var(--alert-bg, var(--blue-50));
    font-size: var(--fs-s);
    display: flex;
  }

  .alert .icon {
    color: var(--alert-color, var(--color-accent));
    margin-block-start: .1em;
  }

  .alert--error {
    --alert-color: var(--color-danger);
    --alert-bg: var(--color-danger-bg);
  }

  .alert--success {
    --alert-color: var(--color-success);
    --alert-bg: var(--color-success-bg);
  }

  .header {
    --header-top: 2.75rem;
    z-index: 100;
    position: sticky;
    inset-block-start: calc(var(--header-top) * -1);
  }

  @media not (min-width: 64rem) {
    .header {
      inset-block-start: 0;
    }
  }

  .header__top {
    border-block-end: 1px solid var(--color-border);
    font-size: var(--fs-s);
  }

  @media not (min-width: 64rem) {
    .header__top {
      display: none;
    }
  }

  .header__top-inner {
    align-items: center;
    gap: var(--space-5);
    min-block-size: var(--header-top);
    display: flex;
  }

  .header__nav {
    margin-inline-end: auto;
  }

  .header__nav-list {
    gap: var(--space-5);
    margin: 0;
    display: flex;
  }

  .header__nav-link {
    color: var(--color-text-muted);
    white-space: nowrap;
    text-decoration: none;
  }

  .header__nav-link:hover {
    color: var(--color-text);
  }

  @media not (min-width: 80rem) {
    .header__nav-extra {
      display: none;
    }
  }

  .header__action {
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
  }

  .header__action:hover {
    color: var(--color-link-hover);
  }

  .header__badge {
    background-color: var(--color-action);
    block-size: 1.25rem;
    min-inline-size: 1.25rem;
    color: var(--white);
    font-family: var(--font-mono);
    border-radius: 1rem;
    place-content: center;
    padding-inline: .3em;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    display: grid;
  }

  .header__phone {
    color: var(--color-text);
    font-family: var(--font-heading);
    letter-spacing: .02em;
    white-space: nowrap;
    font-size: 1.1875rem;
    font-weight: 700;
    text-decoration: none;
  }

  .header__phone:hover {
    color: var(--color-link-hover);
  }

  .header__callback {
    min-block-size: 2rem;
    font-size: .875rem;
  }

  .header__main {
    background-color: var(--navy-900);
    position: relative;
  }

  .header__main:after {
    content: "";
    background: var(--gradient-thermo);
    block-size: 2px;
    position: absolute;
    inset: auto 0 0;
  }

  .header__main-inner {
    align-items: center;
    gap: var(--space-5);
    min-block-size: 4.5rem;
    display: flex;
  }

  @media not (min-width: 64rem) {
    .header__main-inner {
      gap: var(--space-3);
      padding-block: var(--space-3);
      flex-wrap: wrap;
    }
  }

  .header__burger, .header__mobile-cart {
    block-size: 2.75rem;
    inline-size: 2.75rem;
    color: var(--color-text);
    background: none;
    border: 0;
    place-content: center;
    padding: 0;
    display: none;
  }

  :is(.header__burger, .header__mobile-cart) > .icon {
    block-size: 1.625rem;
    inline-size: 1.625rem;
  }

  @media not (min-width: 64rem) {
    .header__burger, .header__mobile-cart {
      display: grid;
    }
  }

  .header__burger {
    margin-inline-start: calc(var(--space-2) * -1);
  }

  .header__mobile-cart {
    margin-inline-start: auto;
    position: relative;
  }

  .header__mobile-cart .header__badge {
    position: absolute;
    inset-block-start: .125rem;
    inset-inline-end: 0;
  }

  @media not (min-width: 64rem) {
    .header__catalog, .header__link {
      display: none;
    }
  }

  .header__link {
    color: var(--color-text);
    font-family: var(--font-heading);
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 1.0625rem;
    font-weight: 600;
    text-decoration: none;
  }

  .header__link:hover {
    color: var(--color-link-hover);
  }

  @media not (min-width: 80rem) {
    .header__link--extra {
      display: none;
    }
  }

  .header__search {
    flex: 1;
  }

  @media not (min-width: 64rem) {
    .header__search {
      flex-basis: 100%;
      order: 1;
    }
  }

  @media not (min-width: 30rem) {
    .header .logo__mark {
      block-size: 2rem;
      inline-size: 2rem;
    }

    .header .logo__name {
      font-size: 1.25rem;
    }
  }

  .search {
    background: none;
    position: relative;
  }

  .search__form {
    display: flex;
  }

  .search__input {
    min-block-size: 2.75rem;
    min-inline-size: 0;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-s) 0 0 var(--radius-s);
    background-color: var(--color-bg);
    color: var(--color-text);
    border: 1px solid #0000;
    border-inline-end: 0;
    flex: 1;
    font-size: 1rem;
  }

  .search__input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
  }

  .search__input:focus {
    border-color: var(--color-focus);
    outline: 0;
  }

  .search__input::-webkit-search-cancel-button {
    appearance: none;
  }

  .search__submit {
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    background-color: var(--color-accent);
    inline-size: 3rem;
    color: var(--white);
    transition: background-color var(--dur) var(--ease);
    border: 0;
    place-content: center;
    padding: 0;
    display: grid;
  }

  .search__submit:hover {
    background-color: var(--color-accent-hover);
  }

  .search__submit:focus-visible {
    outline-color: var(--white);
    outline-offset: -4px;
  }

  .search--bordered .search__input {
    border-color: var(--color-border-strong);
  }

  .search--bordered .search__input:focus {
    border-color: var(--color-focus);
  }

  .search__suggest {
    inset: calc(100% + var(--space-2)) 0 auto;
    z-index: 20;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-overlay);
    position: absolute;
  }

  .search__caption {
    padding: var(--space-1) var(--space-2);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .search__list {
    margin: 0;
    display: grid;
  }

  .search__item {
    align-items: center;
    gap: 0 var(--space-3);
    padding: var(--space-2);
    color: var(--color-text);
    grid-template-columns: 3rem minmax(0, 1fr);
    text-decoration: none;
    display: grid;
  }

  .search__item:hover {
    background-color: var(--color-bg-subtle);
    color: var(--color-link);
  }

  .search__thumb {
    background-color: var(--color-bg-subtle);
    object-fit: contain;
    grid-row: span 2;
    block-size: 3rem;
    inline-size: 3rem;
  }

  .search__thumb--empty {
    color: var(--gray-400);
    place-content: center;
    display: grid;
  }

  .search__name {
    font-size: var(--fs-s);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    overflow: hidden;
  }

  .search__sku {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .search__all {
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) var(--space-2) 0;
    color: var(--color-link);
    font-size: var(--fs-s);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
  }

  .search__all:hover {
    text-decoration: underline;
  }

  .search--page {
    max-inline-size: 44rem;
  }

  .search--page + .catalog__content {
    margin-block-start: var(--space-8);
  }

  .catalog-menu {
    z-index: 10;
    border-block-end: 1px solid var(--color-border);
    box-shadow: var(--shadow-overlay);
    position: absolute;
    inset: 100% 0 auto;
  }

  .catalog-menu__inner {
    gap: var(--space-6) var(--space-10);
    padding-block: var(--space-8);
    grid-template-columns: 1fr 1.25fr 18rem;
    display: grid;
  }

  .catalog-menu__title {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-block-end: var(--space-3);
    font-weight: 500;
  }

  .catalog-menu__list {
    margin: 0;
    display: grid;
  }

  .catalog-menu__link {
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
    display: flex;
  }

  .catalog-menu__link .icon {
    color: var(--color-text-muted);
    transition: color var(--dur) var(--ease);
  }

  .catalog-menu__link:hover {
    color: var(--color-link);
  }

  .catalog-menu__link:hover .icon {
    color: var(--color-link);
  }

  .catalog-menu__promo {
    align-content: start;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-6);
    grid-row: span 2;
    text-decoration: none;
    display: grid;
  }

  .catalog-menu__promo:hover {
    color: var(--color-text);
  }

  .catalog-menu__promo-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.1;
  }

  .catalog-menu__promo-text {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .catalog-menu__all {
    grid-column: 1 / 3;
    justify-self: start;
  }

  .social {
    gap: var(--space-2);
    margin: 0;
    display: flex;
  }

  .social__link {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    block-size: 2rem;
    inline-size: 2rem;
    color: var(--color-text);
    transition: background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    place-content: center;
    display: grid;
  }

  .social__link:hover {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--white);
  }

  .footer {
    padding-block: clamp(var(--space-10), 6vw, var(--space-16)) var(--space-6);
  }

  .footer__grid {
    gap: var(--space-8);
    display: grid;
  }

  @media (min-width: 40rem) {
    .footer__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .footer__grid {
      gap: var(--space-10);
      grid-template-columns: 1.3fr 1.2fr .9fr 1.1fr;
    }
  }

  .footer__brand {
    align-content: start;
    justify-items: start;
    gap: var(--space-4);
    display: grid;
  }

  .footer__text {
    max-inline-size: 22rem;
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .footer__col {
    align-content: start;
    justify-items: start;
    gap: var(--space-3);
    display: grid;
  }

  .footer__title {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .footer__list {
    gap: var(--space-2);
    font-size: var(--fs-s);
    margin: 0;
    display: grid;
  }

  .footer__link {
    color: var(--color-text);
    text-decoration: none;
  }

  .footer__link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  .footer__phone {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
  }

  .footer__phone:hover {
    color: var(--color-link-hover);
  }

  .footer__contacts {
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-s);
    display: grid;
  }

  .footer__contacts li {
    align-items: flex-start;
    gap: var(--space-2);
    display: flex;
  }

  .footer__contacts .icon {
    color: var(--color-text-muted);
    margin-block-start: .15em;
  }

  .footer__bottom {
    gap: var(--space-2) var(--space-6);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    flex-wrap: wrap;
    margin-block-start: clamp(var(--space-8), 5vw, var(--space-12));
    padding-block-start: var(--space-5);
    display: flex;
  }

  .footer__note {
    margin-inline-start: auto;
  }

  @media not (min-width: 48rem) {
    .footer__note {
      margin-inline-start: 0;
    }
  }

  .hero {
    isolation: isolate;
    align-items: end;
    min-block-size: min(46rem, 100dvh - 7.25rem);
    display: grid;
    position: relative;
    overflow: hidden;
  }

  @media not (min-width: 64rem) {
    .hero {
      min-block-size: min(38rem, 100dvh - 8.5rem);
    }
  }

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

  .hero__media:after {
    content: "";
    background: linear-gradient(90deg, #05080fe0 0%, #05080f8c 45%, #05080f26 100%),
      linear-gradient(0deg, var(--navy-950) 0%, transparent 45%);
    position: absolute;
    inset: 0;
  }

  .hero__video {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }

  .hero__inner {
    gap: var(--space-6);
    padding-block: clamp(var(--space-12), 9vw, 7rem) clamp(6rem, 12vw, 9.5rem);
    display: grid;
  }

  .hero__eyebrow {
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
  }

  .hero__eyebrow:before {
    content: "";
    background: var(--gradient-thermo);
    block-size: 2px;
    inline-size: 2.5rem;
  }

  .hero__title {
    background: linear-gradient(#fff 15%, #b4c3d6 100%);
    color: #0000;
    max-inline-size: 16ch;
    font-size: var(--fs-display);
    letter-spacing: .005em;
    text-transform: uppercase;
    -webkit-hyphens: manual;
    hyphens: manual;
    -webkit-background-clip: text;
    background-clip: text;
    font-weight: 500;
    line-height: .98;
  }

  @media not (min-width: 30rem) {
    .hero__title {
      font-size: 2.25rem;
    }
  }

  .hero__accent {
    background: linear-gradient(#8eb1d6 10%, #4c77a5 100%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .hero__lead {
    color: #d3dbe8;
    max-inline-size: 36rem;
    font-size: var(--fs-lead);
    text-wrap: pretty;
  }

  .hero__actions {
    gap: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    display: flex;
  }

  .hero__toggle {
    inset: var(--space-4) var(--space-4) auto auto;
    block-size: 2.75rem;
    inline-size: 2.75rem;
    color: var(--white);
    transition: background-color var(--dur) var(--ease);
    background-color: #05080f73;
    border: 1px solid #ffffff4d;
    border-radius: 50%;
    place-content: center;
    padding: 0;
    display: grid;
    position: absolute;
  }

  .hero__toggle:hover {
    background-color: #05080fcc;
  }

  @media (forced-colors: active) {
    .hero__title, .hero__accent {
      color: canvastext;
      background: none;
    }
  }

  .promo {
    z-index: 1;
    margin-block-start: clamp(-6rem, -8vw, -3.5rem);
    position: relative;
  }

  .promo__grid {
    gap: var(--space-4);
    display: grid;
  }

  @media (min-width: 48rem) {
    .promo__grid {
      gap: var(--space-5);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .promo__card {
    align-content: start;
    justify-items: start;
    gap: var(--space-3);
    min-block-size: 14rem;
    padding: clamp(var(--space-5), 3vw, var(--space-8));
    border: 1px solid var(--color-border);
    background-color: var(--navy-900);
    color: var(--color-text);
    transition: border-color var(--dur) var(--ease);
    text-decoration: none;
    display: grid;
    position: relative;
    overflow: hidden;
  }

  .promo__card:before {
    content: "";
    background: radial-gradient(70% 90% at 100% 100%, var(--promo-glow), transparent 70%);
    opacity: .55;
    transition: opacity .3s var(--ease);
    position: absolute;
    inset: 0;
  }

  .promo__card:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }

  .promo__card:hover:before {
    opacity: .9;
  }

  .promo__card > * {
    position: relative;
  }

  .promo__card--cn {
    --promo-glow: var(--red-600);
  }

  .promo__card--by {
    --promo-glow: var(--blue-600);
  }

  .promo__code {
    inset: auto var(--space-5) calc(var(--space-2) * -1) auto;
    color: #ffffff12;
    font-family: var(--font-heading);
    pointer-events: none;
    font-size: clamp(6rem, 12vw, 10rem);
    font-weight: 800;
    line-height: .8;
    position: absolute;
  }

  .promo__title {
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-tight);
    text-transform: uppercase;
  }

  .promo__text {
    max-inline-size: 26rem;
    color: var(--color-text-muted);
  }

  .promo__more {
    align-items: center;
    gap: var(--space-2);
    margin-block-start: auto;
    padding-block-start: var(--space-3);
    font-weight: 500;
    display: inline-flex;
  }

  .promo__more .icon {
    transition: translate var(--dur) var(--ease);
  }

  .promo__card:hover .promo__more .icon {
    translate: .25rem;
  }

  .category-grid {
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  @media (min-width: 40rem) {
    .category-grid {
      gap: var(--space-5);
      grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    }
  }

  .category-card {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
    flex-direction: column;
    text-decoration: none;
    display: flex;
    position: relative;
  }

  .category-card:before {
    content: "";
    background: var(--gradient-thermo);
    transform-origin: 0;
    block-size: 2px;
    transition: scale .35s var(--ease);
    position: absolute;
    inset: -1px -1px auto;
    scale: 0 1;
  }

  .category-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-raised);
    color: var(--color-text);
  }

  .category-card:hover:before {
    scale: 1;
  }

  .category-card__media {
    aspect-ratio: 16 / 10;
    background-color: var(--color-bg-subtle);
    place-items: center;
    display: grid;
    position: relative;
  }

  .category-card__img {
    inset: var(--space-4);
    inline-size: calc(100% - var(--space-4) * 2);
    block-size: calc(100% - var(--space-4) * 2);
    object-fit: contain;
    transition: scale .4s var(--ease);
    position: absolute;
  }

  .category-card:hover .category-card__img {
    scale: 1.05;
  }

  .category-card__icon {
    block-size: 3.5rem;
    inline-size: 3.5rem;
    color: var(--gray-400);
    stroke-width: 1px;
  }

  .category-card__body {
    gap: var(--space-1);
    padding: var(--space-4);
    flex: 1;
    align-content: start;
    padding-inline-end: var(--space-10);
    display: grid;
  }

  .category-card__title {
    font-family: var(--font-heading);
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
  }

  .category-card__count {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }

  .category-card__arrow {
    inset: auto var(--space-4) var(--space-4) auto;
    color: var(--color-text-muted);
    transition: color var(--dur) var(--ease),
    translate var(--dur) var(--ease);
    position: absolute;
  }

  .category-card:hover .category-card__arrow {
    color: var(--color-action);
    translate: .25rem;
  }

  .category-card--accent {
    background-color: var(--navy-900);
    min-block-size: 9rem;
    color: var(--white);
    border-color: #0000;
    grid-column: span 2;
    justify-content: flex-end;
  }

  .category-card--accent:hover {
    color: var(--white);
  }

  .category-card--accent .category-card__count {
    color: #9aa9c2;
  }

  .category-card--accent .category-card__arrow {
    color: var(--white);
  }

  .category-card--accent .category-card__body {
    flex: none;
  }

  @media not (min-width: 40rem) {
    .category-card__title {
      font-size: 1.0625rem;
    }

    .category-card__body {
      padding: var(--space-3);
      padding-inline-end: var(--space-3);
    }

    .category-card__arrow {
      display: none;
    }
  }

  .supply__grid {
    gap: var(--space-8);
    display: grid;
  }

  @media (min-width: 64rem) {
    .supply__grid {
      align-items: center;
      gap: var(--space-10);
      grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }
  }

  .supply__features {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  @media (min-width: 64rem) {
    .supply__features {
      grid-template-columns: 1fr;
    }
  }

  .supply-map {
    margin: 0;
  }

  .supply-map--solo {
    max-inline-size: 58rem;
    margin-inline: auto;
  }

  .supply-map__svg {
    block-size: auto;
    inline-size: 100%;
    overflow: visible;
  }

  .supply-map__land {
    stroke-width: 4.2px;
  }

  .supply-map__land--ru {
    stroke: #4c77a5;
  }

  .supply-map__land--cn {
    stroke: var(--red-500);
  }

  .supply-map__land--by {
    stroke: var(--blue-400);
  }

  .supply-map__land--muted {
    stroke: #ffffff17;
  }

  .supply-map__country {
    fill: #ffffff24;
    font-family: var(--font-heading);
    letter-spacing: .08em;
    text-anchor: middle;
    text-transform: uppercase;
    font-size: 64px;
    font-weight: 700;
  }

  .supply-map__route {
    stroke: var(--white);
    stroke-width: 1.75px;
    stroke-dasharray: 2 9;
    animation: 1.4s linear infinite supply-flow;
  }

  .supply-map__route--main {
    stroke-width: 2.25px;
    filter: drop-shadow(0 0 6px #ffffff8c);
  }

  .supply-map__route--branch {
    opacity: .55;
  }

  @keyframes supply-flow {
    to {
      stroke-dashoffset: -11px;
    }
  }

  .supply-map__marker {
    fill: var(--white);
  }

  .supply-map__city--hub .supply-map__marker {
    fill: var(--blue-400);
    stroke: var(--white);
    stroke-width: 2.5px;
  }

  .supply-map__city--office .supply-map__marker, .supply-map__city--factory .supply-map__marker {
    fill: var(--white);
    stroke: var(--red-500);
    stroke-width: 3px;
  }

  .supply-map__pulse {
    fill: none;
    stroke: var(--white);
    stroke-width: 1.5px;
    transform-box: fill-box;
    transform-origin: center;
    animation: 2.4s ease-out infinite supply-pulse;
  }

  @keyframes supply-pulse {
    from {
      opacity: .9;
      scale: 1;
    }

    to {
      opacity: 0;
      scale: 3.4;
    }
  }

  .supply-map__label {
    fill: var(--white);
    font-family: var(--font-body);
    paint-order: stroke;
    stroke: var(--navy-950);
    stroke-width: 4px;
    stroke-linejoin: round;
    font-size: 15px;
    font-weight: 500;
  }

  .supply-map__city--hub .supply-map__label, .supply-map__city--office .supply-map__label, .supply-map__city--factory .supply-map__label {
    font-family: var(--font-heading);
    letter-spacing: .03em;
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 700;
  }

  .supply-map__note {
    fill: #9aa9c2;
    font-family: var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
  }

  .supply-map__legend {
    gap: var(--space-2) var(--space-5);
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    flex-wrap: wrap;
    margin-block-start: var(--space-4);
    display: flex;
  }

  .supply-map__legend-item {
    align-items: center;
    gap: var(--space-2);
    display: inline-flex;
  }

  .supply-map__legend-item:before {
    content: "";
    background-color: var(--legend-color);
    border-radius: 50%;
    block-size: .625rem;
    inline-size: .625rem;
  }

  @media not (min-width: 48rem) {
    .supply-map__city--minor .supply-map__label, .supply-map__note, .supply-map__country {
      display: none;
    }

    .supply-map__label {
      stroke-width: 9px;
      font-size: 36px;
    }

    .supply-map__city--hub .supply-map__label, .supply-map__city--office .supply-map__label, .supply-map__city--factory .supply-map__label {
      font-size: 44px;
    }

    .supply-map__land {
      stroke-width: 5px;
    }

    .supply-map__route {
      stroke-width: 4px;
      stroke-dasharray: 3 12;
    }

    .supply-map__marker, .supply-map__pulse {
      transform-box: fill-box;
      transform-origin: center;
      scale: 2.2;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .supply-map__route, .supply-map__pulse {
      animation: none;
    }

    .supply-map__pulse {
      display: none;
    }
  }

  .portfolio-grid {
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    display: grid;
  }

  .portfolio-card {
    background-color: var(--navy-900);
    block-size: 100%;
    color: var(--white);
    isolation: isolate;
    flex-direction: column;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .portfolio-card__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .portfolio-card__img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
    transition: scale .6s var(--ease);
  }

  .portfolio-card:hover .portfolio-card__img {
    scale: 1.06;
  }

  .portfolio-card__body {
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-5);
    border-block-start: 3px solid #0000;
    border-image: var(--gradient-thermo) 1;
    flex: 1;
    display: grid;
  }

  .portfolio-card__title {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
  }

  .portfolio-card__link {
    color: inherit;
    text-decoration: none;
  }

  .portfolio-card__link:hover {
    color: #8fb1ff;
  }

  .portfolio-card__link:after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .portfolio-card__link:focus-visible {
    outline: 0;
  }

  .portfolio-card__link:focus-visible:after {
    outline: 2px solid var(--white);
    outline-offset: -4px;
  }

  .portfolio-card__facts {
    gap: var(--space-2);
    font-size: var(--fs-s);
    margin: 0;
    display: grid;
  }

  .portfolio-card__facts div {
    gap: var(--space-2);
    grid-template-columns: 7.5rem 1fr;
    display: grid;
  }

  .portfolio-card__facts dt {
    color: #9aa9c2;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .portfolio-card__facts dd {
    margin: 0;
  }

  .request__inner {
    gap: var(--space-8);
    display: grid;
  }

  @media (min-width: 60rem) {
    .request__inner {
      gap: clamp(var(--space-10), 6vw, var(--space-20));
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .request__content {
    align-content: start;
    gap: var(--space-8);
    display: grid;
  }

  .request__mail {
    gap: var(--space-1);
    display: grid;
  }

  .request__mail-label {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .request__mail-link {
    color: var(--color-text);
    font-family: var(--font-heading);
    overflow-wrap: anywhere;
    -webkit-text-decoration-color: var(--color-action);
    text-decoration-color: var(--color-action);
    text-underline-offset: .25em;
    justify-self: start;
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
    text-decoration-thickness: 2px;
  }

  .request__mail-link:hover {
    color: var(--color-link-hover);
  }

  .request__form {
    padding: clamp(var(--space-5), 3vw, var(--space-8));
    border: 1px solid var(--color-border);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: #05080fb8;
  }

  .page-head {
    padding-block: var(--space-5) clamp(var(--space-6), 4vw, var(--space-10));
  }

  .page-head--dark {
    padding-block-end: clamp(var(--space-8), 5vw, var(--space-12));
  }

  .page-head__title {
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-block-start: var(--space-5);
  }

  .page-head--dark .page-head__title {
    background: linear-gradient(#fff 15%, #b4c3d6 100%);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .page-head__lead {
    max-inline-size: 46rem;
    color: var(--color-text-muted);
    font-size: var(--fs-lead);
    text-wrap: pretty;
    margin-block-start: var(--space-4);
  }

  .subnav {
    gap: var(--space-2);
    scrollbar-width: none;
    margin: 0;
    display: flex;
    overflow-x: auto;
  }

  .subnav__link {
    align-items: center;
    gap: var(--space-2);
    min-block-size: 2.5rem;
    padding: var(--space-1) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-s);
    color: var(--color-text);
    font-size: var(--fs-s);
    white-space: nowrap;
    transition: border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
  }

  .subnav__link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .subnav__link--current {
    border-color: var(--navy-900);
    background-color: var(--navy-900);
    color: var(--white);
  }

  .subnav__link--current:hover {
    border-color: var(--navy-900);
    color: var(--white);
  }

  .subnav__count {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
  }

  .subnav__link--current .subnav__count {
    color: #9aa9c2;
  }

  .catalog {
    gap: var(--space-8);
    display: grid;
  }

  @media (min-width: 64rem) {
    .catalog {
      grid-template-columns: 18.5rem minmax(0, 1fr);
      align-items: start;
    }
  }

  .subnav + .catalog {
    margin-block-start: var(--space-8);
  }

  .catalog__content {
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .catalog__toolbar {
    align-items: center;
    gap: var(--space-3) var(--space-5);
    flex-wrap: wrap;
    display: flex;
  }

  .catalog__count {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    margin-inline-end: auto;
  }

  .catalog__sort {
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-s);
    display: flex;
  }

  .catalog__sort .field__control {
    min-block-size: 2.5rem;
    inline-size: auto;
    padding-block: var(--space-2);
    font-size: var(--fs-s);
  }

  @media (min-width: 64rem) {
    .catalog__filter-btn {
      display: none;
    }
  }

  .catalog__panel-head, .catalog__backdrop {
    display: none;
  }

  @media not (min-width: 64rem) {
    .catalog__sidebar {
      z-index: 300;
      background-color: var(--color-bg);
      inline-size: min(100%, 23rem);
      box-shadow: var(--shadow-overlay);
      overscroll-behavior: contain;
      visibility: hidden;
      transition: translate .3s var(--ease),
      visibility .3s;
      flex-direction: column;
      display: flex;
      position: fixed;
      inset: 0 auto 0 0;
      overflow-y: auto;
      translate: -100%;
    }

    .catalog__sidebar--open {
      visibility: visible;
      translate: 0;
    }

    .catalog__panel-head {
      z-index: 1;
      padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
      border-block-end: 1px solid var(--color-border);
      background-color: var(--color-bg);
      font-family: var(--font-heading);
      text-transform: uppercase;
      justify-content: space-between;
      align-items: center;
      font-size: 1.25rem;
      font-weight: 600;
      display: flex;
      position: sticky;
      inset-block-start: 0;
    }

    .catalog__sidebar .filter {
      border: 0;
    }

    .catalog__sidebar .filter__head .filter__heading {
      display: none;
    }

    .catalog__sidebar .filter__footer {
      border-block-start: 1px solid var(--color-border);
      background-color: var(--color-bg);
      position: sticky;
      inset-block-end: 0;
    }

    .catalog__backdrop {
      z-index: 299;
      opacity: 0;
      visibility: hidden;
      transition: opacity .3s var(--ease),
      visibility .3s;
      background-color: #05080fb3;
      display: block;
      position: fixed;
      inset: 0;
    }

    .catalog__sidebar--open + .catalog__backdrop {
      opacity: 1;
      visibility: visible;
    }
  }

  .catalog__close {
    block-size: 2.75rem;
    inline-size: 2.75rem;
    color: var(--color-text);
    background: none;
    border: 0;
    place-content: center;
    padding: 0;
    display: grid;
  }

  .catalog__close .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }

  .pager {
    justify-content: center;
    margin-block-start: var(--space-8);
    display: flex;
  }

  .subnav + :is(.article-grid, .portfolio-grid, .product-grid) {
    margin-block-start: var(--space-8);
  }

  .catalog-group + .catalog-group {
    margin-block-start: clamp(var(--space-10), 6vw, var(--space-16));
  }

  .catalog-group__title {
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--fs-h3);
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-block-end: var(--space-5);
    font-weight: 600;
    display: flex;
  }

  .catalog-group__note {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--fs-s);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 400;
  }

  .gallery {
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .gallery__viewport {
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    inline-size: 100%;
    margin: 0;
    position: relative;
  }

  .gallery__viewport:not(.swiper-initialized) .gallery__slide:not(:first-child) {
    display: none;
  }

  .gallery__slide {
    aspect-ratio: 4 / 3;
    padding: clamp(var(--space-5), 5%, var(--space-10));
    place-items: center;
    display: grid;
  }

  .gallery__img {
    object-fit: contain;
    block-size: 100%;
    inline-size: 100%;
  }

  .gallery__badges {
    inset: var(--space-4) auto auto var(--space-4);
    z-index: 2;
    gap: var(--space-1);
    display: flex;
    position: absolute;
  }

  .gallery__thumbs {
    gap: var(--space-2);
    scrollbar-width: none;
    margin: 0;
    display: flex;
    overflow-x: auto;
  }

  .gallery__thumb {
    aspect-ratio: 4 / 3;
    inline-size: 5rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    transition: border-color var(--dur) var(--ease);
    flex: none;
  }

  .gallery__thumb img {
    object-fit: contain;
    block-size: 100%;
    inline-size: 100%;
  }

  .gallery__thumb:hover {
    border-color: var(--color-border-strong);
  }

  .gallery__thumb[aria-current="true"] {
    border-color: var(--navy-900);
    box-shadow: inset 0 0 0 1px var(--navy-900);
  }

  .product {
    gap: var(--space-8);
    display: grid;
  }

  @media (min-width: 56rem) {
    .product {
      align-items: start;
      gap: clamp(var(--space-8), 4vw, var(--space-12));
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }
  }

  @media (min-width: 56rem) {
    .product__gallery {
      position: sticky;
      inset-block-start: 6rem;
    }
  }

  .product__info {
    gap: var(--space-5);
    display: grid;
  }

  .product__brand {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .product__title {
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.1;
  }

  .product__meta {
    align-items: center;
    gap: var(--space-3) var(--space-6);
    flex-wrap: wrap;
    display: flex;
  }

  .product__option {
    gap: var(--space-2);
    display: grid;
  }

  .product__option-title {
    font-size: var(--fs-s);
    font-weight: 500;
  }

  .product__buy {
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    display: grid;
  }

  .product__buy-row {
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    display: flex;
  }

  .product__buy-row .btn {
    flex: 12rem;
  }

  .product__note {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .product__perks {
    gap: var(--space-3);
    font-size: var(--fs-s);
    margin: 0;
    display: grid;
  }

  .product__perks li {
    align-items: flex-start;
    gap: var(--space-3);
    display: flex;
  }

  .product__perks .icon {
    color: var(--color-accent);
    margin-block-start: .1em;
  }

  .product__tabs {
    margin-block-start: clamp(var(--space-10), 6vw, var(--space-16));
  }

  .product__panel {
    max-inline-size: 56rem;
  }

  .cart {
    gap: var(--space-8);
    display: grid;
  }

  @media (min-width: 64rem) {
    .cart {
      align-items: start;
      gap: var(--space-10);
      grid-template-columns: minmax(0, 1fr) 24rem;
    }
  }

  .cart__list {
    border-block-start: 1px solid var(--color-border);
    margin: 0;
    display: grid;
  }

  .cart__aside {
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    display: grid;
  }

  @media (min-width: 64rem) {
    .cart__aside {
      position: sticky;
      inset-block-start: 6rem;
    }
  }

  .cart__title {
    font-size: var(--fs-h3);
    text-transform: uppercase;
    font-weight: 600;
  }

  .cart__summary {
    gap: var(--space-2);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--fs-s);
    margin: 0;
    padding-block-end: var(--space-5);
    display: grid;
  }

  .cart__summary div {
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    display: flex;
  }

  .cart__summary dt {
    color: var(--color-text-muted);
  }

  .cart__summary dd {
    white-space: nowrap;
    margin: 0;
    font-weight: 600;
  }

  .cart__total dd {
    font-family: var(--font-heading);
    font-size: 1.5rem;
  }

  .cart__hint {
    color: var(--color-text-muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
  }

  .cart-item {
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding-block: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    grid-template-columns: 6.5rem minmax(0, 1fr) auto auto auto;
    display: grid;
  }

  .cart-item__media {
    aspect-ratio: 4 / 3;
    padding: var(--space-2);
    background-color: var(--color-bg-subtle);
    color: var(--gray-400);
    place-items: center;
    display: grid;
  }

  .cart-item__media .icon {
    stroke-width: 1.25px;
    block-size: 2rem;
    inline-size: 2rem;
  }

  .cart-item__img {
    object-fit: contain;
    block-size: 100%;
    inline-size: 100%;
  }

  .cart-item__info {
    gap: var(--space-2);
    display: grid;
  }

  .cart-item__title {
    color: var(--color-text);
    overflow-wrap: anywhere;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
  }

  .cart-item__title:hover {
    color: var(--color-link);
  }

  .cart-item__qty {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
    white-space: nowrap;
  }

  .cart-item__price {
    text-align: end;
    min-inline-size: 8.5rem;
  }

  .cart-item__price .price {
    font-size: 1.25rem;
  }

  .cart-item__price .price--request {
    font-size: var(--fs-s);
  }

  .cart-item__remove {
    block-size: 2.5rem;
    inline-size: 2.5rem;
    color: var(--color-text-muted);
    transition: color var(--dur) var(--ease);
    background: none;
    border: 0;
    place-content: center;
    padding: 0;
    display: grid;
  }

  .cart-item__remove:hover {
    color: var(--color-danger);
  }

  @media not (min-width: 48rem) {
    .cart-item {
      align-items: start;
      gap: var(--space-3);
      grid-template-columns: 5rem minmax(0, 1fr) auto;
    }

    .cart-item__media {
      grid-row: span 2;
    }

    .cart-item__info {
      grid-column: 2;
    }

    .cart-item__remove {
      margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
      grid-area: 1 / 3;
    }

    .cart-item__counter, .cart-item__qty {
      grid-area: 2 / 2;
      place-self: center start;
    }

    .cart-item__price {
      grid-area: 2 / 3;
      align-self: center;
      min-inline-size: 0;
    }
  }

  .empty {
    justify-items: center;
    gap: var(--space-4);
    max-inline-size: 36rem;
    padding-block: clamp(var(--space-8), 6vw, var(--space-16));
    text-align: center;
    margin-inline: auto;
    display: grid;
  }

  .empty__icon {
    aspect-ratio: 1 / 1.1547;
    background-color: var(--color-bg-subtle);
    inline-size: 5rem;
    color: var(--color-text-muted);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    place-content: center;
    display: grid;
  }

  .empty__icon .icon {
    stroke-width: 1.5px;
    block-size: 2rem;
    inline-size: 2rem;
  }

  .empty--success .empty__icon {
    background-color: var(--color-success-bg);
    color: var(--color-success);
  }

  .empty__title {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-tight);
    text-transform: uppercase;
  }

  .empty__text {
    color: var(--color-text-muted);
    font-size: var(--fs-lead);
    text-wrap: pretty;
  }

  .empty__actions {
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-start: var(--space-2);
    display: flex;
  }

  .lk {
    gap: var(--space-6);
    display: grid;
  }

  @media (min-width: 60rem) {
    .lk {
      align-items: start;
      gap: var(--space-10);
      grid-template-columns: 17rem minmax(0, 1fr);
    }
  }

  .lk__nav {
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    display: grid;
  }

  @media (min-width: 60rem) {
    .lk__nav {
      position: sticky;
      inset-block-start: 6rem;
    }
  }

  .lk__user {
    gap: var(--space-1);
    border-block-end: 1px solid var(--color-border);
    padding-block-end: var(--space-4);
    display: grid;
  }

  .lk__user-name {
    font-weight: 600;
  }

  .lk__user-mail {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    overflow-wrap: anywhere;
  }

  .lk__menu {
    gap: var(--space-1);
    margin: 0;
    display: grid;
  }

  @media not (min-width: 60rem) {
    .lk__menu {
      scrollbar-width: none;
      grid-auto-columns: max-content;
      grid-auto-flow: column;
      overflow-x: auto;
    }
  }

  .lk__link {
    align-items: center;
    gap: var(--space-3);
    min-block-size: 2.75rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-s);
    color: var(--color-text);
    transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
    font-weight: 500;
    text-decoration: none;
    display: flex;
  }

  .lk__link .icon {
    color: var(--color-text-muted);
  }

  .lk__link:hover {
    background-color: var(--color-bg);
    color: var(--color-link);
  }

  .lk__link--current {
    background-color: var(--navy-900);
    color: var(--white);
  }

  .lk__link--current .icon {
    color: inherit;
  }

  .lk__link--current:hover {
    background-color: var(--navy-900);
    color: var(--white);
  }

  .lk__content {
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .lk__section {
    gap: var(--space-5);
    max-inline-size: 44rem;
    display: grid;
  }

  .lk__section + .lk__section {
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--space-8);
  }

  .lk__subtitle {
    font-size: var(--fs-h3);
    font-weight: 600;
  }

  .lk__order-head {
    align-items: center;
    gap: var(--space-3) var(--space-5);
    flex-wrap: wrap;
    display: flex;
  }

  .lk__order-date {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .lk__order-back {
    margin-inline-start: auto;
  }

  .lk__block {
    gap: var(--space-4);
    display: grid;
  }

  .article-page {
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 52rem;
    margin-inline: auto;
    display: grid;
  }

  .article-page__meta {
    align-items: center;
    gap: var(--space-2) var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--fs-s);
    flex-wrap: wrap;
    display: flex;
  }

  .article-page__cover {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    inline-size: 100%;
  }

  .article-page__back {
    justify-self: start;
  }

  .info-grid {
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    display: grid;
  }

  .info-card {
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    display: grid;
  }

  .info-card__label {
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
  }

  .info-card__value {
    font-family: var(--font-heading);
    overflow-wrap: anywhere;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
  }

  a.info-card__value {
    color: var(--color-text);
    text-decoration: none;
  }

  a.info-card__value:hover {
    color: var(--color-link);
  }

  .info-card__text {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .map-box {
    place-content: center;
    justify-items: center;
    gap: var(--space-2);
    min-block-size: clamp(18rem, 40vw, 28rem);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-subtle);
    background-image: linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    color: var(--color-text-muted);
    text-align: center;
    background-size: 3rem 3rem;
    display: grid;
    position: relative;
  }

  .map-box .icon {
    block-size: 2.5rem;
    inline-size: 2.5rem;
    color: var(--color-action);
  }

  .map-box__title {
    color: var(--color-text);
    font-weight: 600;
  }

  .map-box__text {
    max-inline-size: 26rem;
    font-size: var(--fs-s);
  }

  .text-layout {
    gap: var(--space-8);
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  @media (min-width: 60rem) {
    .text-layout {
      align-items: start;
      gap: var(--space-16);
      grid-template-columns: minmax(0, 1fr) 16rem;
    }
  }

  .side-nav {
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    display: grid;
  }

  @media (min-width: 60rem) {
    .side-nav {
      position: sticky;
      inset-block-start: 6rem;
    }
  }

  .side-nav__title {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .side-nav__list {
    gap: var(--space-2);
    margin: 0;
    display: grid;
  }

  .side-nav__link {
    color: var(--color-text);
    text-decoration: none;
  }

  .side-nav__link:hover {
    color: var(--color-link);
  }

  .side-nav__link--current {
    color: var(--color-action);
    font-weight: 600;
  }

  .error-page {
    justify-items: center;
    gap: var(--space-5);
    padding-block: clamp(var(--space-12), 10vw, 8rem);
    text-align: center;
    display: grid;
  }

  .error-page__code {
    background: var(--gradient-thermo);
    color: #0000;
    font-family: var(--font-heading);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(7rem, 4rem + 18vw, 15rem);
    font-weight: 800;
    line-height: .85;
  }

  .error-page__search {
    inline-size: min(100%, 32rem);
  }
}

@layer pages {
  .ui__header {
    padding-block: var(--space-6) clamp(var(--space-10), 7vw, var(--space-20));
  }

  .ui__top {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-block-end: clamp(var(--space-10), 7vw, var(--space-20));
    display: flex;
  }

  .ui__nav {
    z-index: 10;
    border-block-end: 1px solid var(--color-border);
    background-color: color-mix(in oklab, var(--color-bg) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    position: sticky;
    inset-block-start: 0;
  }

  .ui__nav-list {
    gap: var(--space-5);
    white-space: nowrap;
    scrollbar-width: none;
    margin: 0;
    display: flex;
    overflow-x: auto;
  }

  .ui__nav-link {
    padding-block: var(--space-4);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    display: block;
  }

  .ui__nav-link:hover {
    color: var(--color-text);
  }

  .ui__section {
    padding-block: clamp(var(--space-10), 6vw, var(--space-20));
    border-block-end: 1px solid var(--color-border);
  }

  .ui__group {
    margin-block-start: var(--space-10);
  }

  .ui__group-title {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-block-end: var(--space-4);
    font-weight: 500;
  }

  .ui__row {
    align-items: center;
    gap: var(--space-4) var(--space-5);
    flex-wrap: wrap;
    display: flex;
  }

  .ui__row--top {
    align-items: flex-start;
  }

  .ui__cols {
    gap: var(--space-6) var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    display: grid;
  }

  .ui__cols--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  }

  .ui__panel {
    padding: clamp(var(--space-5), 4vw, var(--space-10));
    border: 1px solid var(--color-border);
  }

  .ui__caption {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    margin-block-start: var(--space-2);
  }

  .ui__swatches {
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    display: grid;
  }

  .ui__swatch {
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.4;
    display: grid;
  }

  .ui__swatch:before {
    content: "";
    block-size: 4.5rem;
    border: 1px solid var(--color-border);
    background: var(--swatch);
    margin-block-end: var(--space-1);
  }

  .ui__swatch-value {
    color: var(--color-text-muted);
  }

  .ui__type {
    gap: var(--space-6);
    display: grid;
  }

  .ui__type-row {
    gap: var(--space-2);
    border-block-end: 1px solid var(--color-border);
    grid-template-columns: minmax(0, 1fr);
    padding-block-end: var(--space-6);
    display: grid;
  }

  @media (min-width: 56rem) {
    .ui__type-row {
      align-items: baseline;
      gap: var(--space-8);
      grid-template-columns: 13rem 1fr;
    }
  }

  .ui__type-meta {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.5;
  }

  .ui__h1, .ui__h2 {
    overflow-wrap: break-word;
  }

  @media not (min-width: 30rem) {
    .ui__h1, .ui__h2 {
      -webkit-hyphens: auto;
      hyphens: auto;
    }
  }

  .ui__h1 {
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: .01em;
    text-transform: uppercase;
  }

  .ui__h2 {
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-tight);
    letter-spacing: .01em;
    text-transform: uppercase;
  }

  .ui__h3 {
    font-size: var(--fs-h3);
  }

  .ui__h4 {
    font-size: var(--fs-h4);
  }

  .ui__lead {
    max-inline-size: 44rem;
    font-size: var(--fs-lead);
  }

  .ui__small {
    color: var(--color-text-muted);
    font-size: var(--fs-s);
  }

  .ui__icons {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    padding: 0 1px 1px 0;
    display: grid;
  }

  .ui__icon {
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    text-align: center;
    margin: 0 -1px -1px 0;
    font-size: .6875rem;
    display: grid;
  }

  .ui__icon .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
    color: var(--color-text);
  }

  .ui__card-narrow {
    flex: none;
    inline-size: 10.5rem;
  }

  .ui__pages {
    inline-size: 100%;
  }

  .ui__pages th, .ui__pages td {
    padding: var(--space-3) var(--space-4) var(--space-3) 0;
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
  }

  .ui__pages th {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .ui__pages td:first-child {
    font-weight: 500;
  }

  .ui__pages-file {
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-s);
  }

  .ui__pages-group > td {
    color: var(--color-text-muted);
    font-family: var(--font-heading);
    letter-spacing: .03em;
    text-transform: uppercase;
    padding-block-start: var(--space-8);
    font-size: 1.25rem;
    font-weight: 600;
  }

  .ui__media {
    max-inline-size: 56rem;
  }

  .ui__filters {
    align-items: start;
    gap: var(--space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 20rem));
    display: grid;
  }
}

@font-face {
  font-family: Sofia Sans Semi Condensed;
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../fonts/sofia-sans-semi-condensed-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Sofia Sans Semi Condensed;
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../fonts/sofia-sans-semi-condensed-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Sofia Sans Semi Condensed;
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url("../fonts/sofia-sans-semi-condensed-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Golos Text;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Golos Text;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-text-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Golos Text;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/golos-text-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: JetBrains Mono;
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}