:root {
  background: #171b1e;
  color: #f8f8f8;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 1180px;
  margin: 0;
  background: #171b1e;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

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

.hero {
  height: 498px;
  overflow: hidden;
  background: #111518;
}

.site-header {
  --header-gutter: clamp(5.3333px, 1.833333vw, 26.6667px);
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 78px;
  padding: 0 var(--header-gutter);
  border-bottom: 1px solid rgba(238, 239, 240, 0.26);
  background: #171b1e;
}

html.home-page-document,
body.home-page {
  min-width: 0;
}

.home-page .site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.home-page #catalog-preview,
.home-page #about,
.home-page #delivery,
.home-page #video-reviews,
.home-page #consultation {
  scroll-margin-top: 94px;
}

.brand {
  display: block;
  width: 170px;
  flex: 0 0 170px;
}

.brand img {
  display: block;
  width: 170px;
  height: auto;
}

.site-nav {
  position: absolute;
  left: calc(50% - 25px);
  display: flex;
  align-items: center;
  gap: 40px;
  transform: translateX(-50%);
  color: #f1f1f2;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.consultation-link {
  display: inline-flex;
  order: 1;
  align-items: center;
  justify-content: center;
  width: 221px;
  height: 46px;
  margin-left: auto;
  border: 1px solid #fa1422;
  border-radius: 5px;
  color: #ff1a27;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.cart-toggle {
  position: relative;
  display: inline-grid;
  order: 2;
  width: 42px;
  height: 46px;
  padding: 0;
  margin-left: var(--header-gutter);
  place-items: center;
  border: 0;
  background: transparent;
  color: #f8f8f8;
  cursor: pointer;
}

.cart-toggle svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.cart-toggle__count {
  position: absolute;
  top: 5px;
  right: 0;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid #171b1e;
  border-radius: 50%;
  background: #ef1824;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.hero-content {
  position: relative;
  isolation: isolate;
  height: 498px;
  overflow: hidden;
  background: #111518;
}

.hero-content::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: url("assets/hero-concept-photo-outpainted.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-content::after {
  display: none;
}

.hero-visual {
  display: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  width: 570px;
  padding-top: 84px;
  margin-left: 5.05vw;
}

.hero-copy h1,
.hero-copy p {
  margin: 0;
}

.hero-copy h1 {
  color: #f8f8f8;
  font-size: 55px;
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.05;
}

.hero-copy p {
  margin-top: 19px;
  color: #efeff0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.35px;
  line-height: 1.29;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 27px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 61px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.button--primary {
  width: 282px;
  background: #fb1221;
  color: #fff;
}

.button--secondary {
  width: 225px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
}

.hero-vehicles {
  position: absolute;
  z-index: 1;
  right: auto;
  bottom: -57px;
  left: 37.5%;
  display: none;
  width: 60%;
  height: auto;
  pointer-events: none;
}

.catalog-preview {
  padding: 20px 0 28px;
  background: #ffffff;
  color: #111216;
}

.catalog-preview__container {
  width: calc(100% - 96px);
  margin: 0 auto;
}

.catalog-preview__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.catalog-preview__heading-row h2 {
  margin: 0;
  color: #111216;
  font-size: 39px;
  font-weight: 700;
  letter-spacing: -0.9px;
  line-height: 1.15;
}

.catalog-preview__all-link {
  display: inline-flex;
  align-items: center;
  gap: 21px;
  color: #666a70;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.catalog-preview__all-link svg,
.catalog-card__footer svg {
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.catalog-preview__all-link svg {
  width: 20px;
  height: 20px;
}

.catalog-preview__carousel {
    position: relative;
    margin-top: 18px;
    padding: 0 62px;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.catalog-preview__viewport {
  overflow: hidden;
}

.catalog-preview__grid {
  display: flex;
  margin-top: 0;
  transition: transform 280ms ease;
  will-change: transform;
}

.catalog-preview__grid.is-dragging {
  cursor: grabbing;
  transition: none;
}

.catalog-card {
  display: grid;
  flex: 0 0 100%;
  grid-template-rows: auto 54px;
  overflow: hidden;
  border: 1px solid #d7d9dc;
  border-radius: 6px;
  background: #ffffff;
  color: #111216;
}

.catalog-card__media {
  aspect-ratio: 1.82;
  overflow: hidden;
  padding: 0;
  background: #ffffff;
}

.catalog-card__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  -webkit-user-drag: none;
  user-drag: none;
}

.catalog-card--atv .catalog-card__media img {
  max-width: 470px;
  margin: 0 auto;
}

.catalog-preview__arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 9px;
  padding: 0;
  border: 1px solid #bfc3c7;
  border-radius: 50%;
  background: #ffffff;
  color: #171b1e;
  cursor: pointer;
  transform: translateY(-50%);
}

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

.catalog-preview__arrow--previous {
  left: 0;
}

.catalog-preview__arrow--next {
  right: 0;
}

.catalog-preview__arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.catalog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 19px;
  border-top: 1px solid #eff0f1;
  color: #111216;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.55px;
  line-height: 1;
}

.catalog-card__footer svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.7;
}

.cart-added-notification {
  position: fixed;
  z-index: 1000;
  right: auto;
  bottom: 24px;
  left: 50%;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  background: #171b1e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 140%);
  transition: opacity .2s ease, transform .2s ease;
}

.cart-added-notification.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 1200px) {
  .catalog-preview__carousel {
    padding: 0;
    touch-action: auto;
  }

  .catalog-preview__viewport {
    overflow: visible;
  }

  .catalog-preview__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    transform: none !important;
    transition: none;
  }

  .catalog-card {
    min-width: 0;
    flex: none;
  }

  .catalog-preview__arrow {
    display: none !important;
  }
}

.why-sazan {
  --why-sazan-background: url("assets/why-sazan-warehouse.png");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 720px;
  padding: 38px 0 30px;
  background: #171b1e;
  color: #f8f8f8;
}

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

.why-sazan::before {
  background-image: var(--why-sazan-background, none);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
}

.why-sazan::after {
  background: linear-gradient(90deg, rgba(23, 27, 30, 0.94) 0%, rgba(23, 27, 30, 0.74) 42%, rgba(23, 27, 30, 0.18) 100%);
}

.why-sazan__container {
  position: relative;
  z-index: 0;
  width: calc(100% - 144px);
  min-height: 642px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.why-sazan__intro {
  min-height: 257px;
}

.why-sazan__eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.why-sazan__eyebrow span {
  display: block;
  width: 39px;
  height: 3px;
  margin-top: 8px;
  background: #fb1221;
}

.why-sazan__eyebrow p {
  margin: 0;
  color: #b9bdc2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.05px;
  line-height: 1.4;
  text-transform: uppercase;
}

.why-sazan h2 {
  margin: 18px 0 0;
  color: #f8f8f8;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.12;
}

.why-sazan__description {
  max-width: 410px;
  margin: 13px 0 0;
  color: #d9dcdf;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.45;
}

.why-sazan__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: auto;
}

.why-card {
  min-height: 185px;
  padding: 15px 18px 16px;
  border: 1px solid rgba(232, 235, 237, 0.16);
  border-radius: 5px;
  background: #1b2023;
}

.why-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(232, 235, 237, 0.14);
  border-radius: 6px;
}

.why-card__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #fb1221;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.why-card h3,
.why-card p {
  margin: 0;
}

.why-card h3 {
  margin-top: 10px;
  color: #f8f8f8;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.1;
}

.why-card p {
  margin-top: 8px;
  color: #d2d5d8;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.15px;
  line-height: 1.32;
}

.delivery {
  padding: 57px 0 68px;
  background: #ffffff;
  color: #111216;
}

.delivery__container {
  width: calc(100% - 144px);
  margin: 0 auto;
}

.delivery__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}

.delivery__eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.delivery__eyebrow span {
  display: block;
  width: 39px;
  height: 3px;
  margin-top: 8px;
  background: #fb1221;
}

.delivery__eyebrow p {
  margin: 0;
  color: #6e7480;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.05px;
  line-height: 1.4;
  text-transform: uppercase;
}

.delivery h2 {
  margin: 15px 0 0;
  color: #111216;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.45px;
  line-height: 1.1;
}

.delivery__lead {
  margin: 0 0 3px;
  color: #747b86;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 1.35;
}

.delivery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 23px;
}

.delivery-card {
  overflow: hidden;
  border: 1px solid #eceef0;
  border-radius: 5px;
  background: #f3f4f6;
}

.delivery-card__media {
  aspect-ratio: 300 / 169;
  border-bottom: 1px solid #e3e5e8;
  background: #eceef0;
}

.delivery-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.delivery-card__body {
  min-height: 107px;
  padding: 15px 19px 16px;
}

.delivery-card h3,
.delivery-card p {
  margin: 0;
}

.delivery-card h3 {
  color: #191c20;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.35px;
  line-height: 1.15;
}

.delivery-card p {
  margin-top: 8px;
  color: #69717c;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.15px;
  line-height: 1.32;
}

.video-reviews {
  padding: 0 0 68px;
  background: #ffffff;
  color: #111216;
}

.video-reviews__container {
  width: calc(100% - 144px);
  margin: 0 auto;
}

.video-reviews__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: end;
  gap: 56px;
}

.video-reviews__eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.video-reviews__eyebrow span {
  display: block;
  width: 39px;
  height: 3px;
  margin-top: 8px;
  background: #fb1221;
}

.video-reviews__eyebrow p {
  margin: 0;
  color: #6e7480;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.05px;
  line-height: 1.4;
  text-transform: uppercase;
}

.video-reviews h2 {
  margin: 15px 0 0;
  color: #111216;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -1.45px;
  line-height: 1.1;
}

.video-reviews__more-button { width:100%; height:61px; margin:0 0 3px; padding:0 18px; border:0; border-radius:5px; background:#fb1221; color:#fff; font:inherit; font-size:16px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer; }
.video-reviews-modal[hidden] { display:none; }
.video-reviews-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:20px; }
.video-reviews-modal__backdrop { position:absolute; inset:0; background:rgba(9,12,14,.68); }
.video-reviews-modal__dialog { position:relative; z-index:1; width:min(100%, 430px); padding:30px; border:1px solid #343b40; border-radius:8px; background:#171b1e; box-shadow:0 22px 70px rgba(0,0,0,.32); color:#f7f8f9; }
.video-reviews-modal__dialog h2 { margin:0; padding-right:30px; font-size:25px; line-height:1.15; }
.video-reviews-modal__close { position:absolute; top:10px; right:12px; display:grid; width:34px; height:34px; place-items:center; padding:0; border:0; background:transparent; color:#c2c7cc; font:inherit; font-size:30px; line-height:1; cursor:pointer; }
.video-reviews-modal__close:hover { color:#fff; }
.video-reviews-modal__close:focus-visible { outline:2px solid #fb1221; outline-offset:2px; border-radius:4px; }
.video-reviews-modal__actions { display:grid; gap:12px; margin-top:24px; }
.video-reviews-modal__actions .button { display:flex; min-height:48px; align-items:center; justify-content:center; width:100%; box-sizing:border-box; text-decoration:none; }
.contact-modal[hidden] { display:none; }
.contact-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:20px; }
.contact-modal__backdrop { position:absolute; inset:0; background:rgba(9,12,14,.68); }
.contact-modal__dialog { position:relative; z-index:1; width:min(100%, 430px); padding:30px; border:1px solid #343b40; border-radius:8px; background:#171b1e; box-shadow:0 22px 70px rgba(0,0,0,.32); color:#f7f8f9; }
.contact-modal__dialog h2 { margin:0; padding-right:30px; font-size:25px; line-height:1.15; }
.contact-modal__close { position:absolute; top:10px; right:12px; display:grid; width:34px; height:34px; place-items:center; padding:0; border:0; background:transparent; color:#c2c7cc; font:inherit; font-size:30px; line-height:1; cursor:pointer; }
.contact-modal__close:hover { color:#fff; }
.contact-modal__close:focus-visible { outline:2px solid #fb1221; outline-offset:2px; border-radius:4px; }
.contact-modal__actions { display:grid; gap:12px; margin-top:24px; }
.contact-modal__actions .button { display:flex; min-height:48px; align-items:center; justify-content:center; width:100%; box-sizing:border-box; text-decoration:none; }

/* Telegram choices use the same neutral treatment as the other modal actions. */
.video-reviews-modal__actions .button--primary,
.contact-modal__actions .button--primary {
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: #171b1e;
  color: #fff;
}

.video-reviews-modal__actions .button--primary:hover,
.contact-modal__actions .button--primary:hover {
  background: #252b30;
}

.video-reviews-modal__actions .button--primary:focus-visible,
.contact-modal__actions .button--primary:focus-visible {
  outline: 2px solid #fb1221;
  outline-offset: 2px;
}
.video-reviews__carousel { position:relative; }
.video-reviews__viewport { overflow:hidden; }
.video-reviews__track { display:grid; grid-auto-columns:calc((100% - 28px) / 3); grid-auto-flow:column; gap:14px; margin-top:23px; transition:transform .32s ease; will-change:transform; }
.video-reviews__previous,.video-reviews__next { position:absolute; z-index:2; top:calc(50% + 11px); display:grid; width:clamp(44px, 4vw, 56px); height:clamp(44px, 4vw, 56px); margin:0; padding:0; place-items:center; transform:translateY(-50%); border:1px solid #d8dce0; border-radius:50%; background:#fff; color:#17191d; cursor:pointer; }
.video-reviews__previous { left:-28px; }
.video-reviews__next { right:-28px; }
.video-reviews__previous[hidden],.video-reviews__next[hidden] { display:none; }

.video-reviews__previous svg,.video-reviews__next svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.video-reviews__previous svg { transform:scaleX(-1); }
.video-reviews__previous:hover,.video-reviews__next:hover { border-color:#ef1824; color:#ef1824; }
.video-reviews__previous:focus-visible,.video-reviews__next:focus-visible { outline:2px solid #ef1824; outline-offset:3px; }

.video-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 23px;
}

.video-reviews__grid[hidden] {
  display: none;
}

.video-review-card {
  min-width: 0;
}

.video-review-card__media {
  position:relative;
  display: grid;
  aspect-ratio: 300 / 169;
  place-items: center;
  overflow: hidden;
  border: 1px solid #31373c;
  border-radius: 5px;
  background: #1b2023;
}

.video-review-card__video { width:100%; height:100%; object-fit:cover; background:#1b2023; }

.video-review-card__play {
  position:absolute;
  z-index:1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 61px;
  height: 61px;
  padding: 0;
  border: 2px solid #f7f8f9;
  border-radius: 50%;
  background: transparent;
  color: #f7f8f9;
  opacity: 1;
}

.video-review-card__play { cursor:pointer; }

.video-review-card__play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
  fill: currentColor;
}

.video-review-card p {
  margin: 10px 0 0;
  color: #69717c;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.15px;
  line-height: 1.3;
  text-align: center;
}

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

.consultation {
  padding: 40px 0 42px;
  background-color: #171b1e;
  background-image: url("assets/consultation-motorcycle-background.png");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  color: #f7f8f9;
}

.consultation__container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 1.08fr);
  align-items: start;
  gap: 64px;
  width: calc(100% - 144px);
  min-height: 174px;
  margin: 0 auto;
}

.consultation__eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
}

.consultation__eyebrow span {
  display: block;
  width: 39px;
  height: 3px;
  background: #fb1221;
}

.consultation__eyebrow p {
  margin: 0;
  color: #c2c7cc;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.05px;
  line-height: 1.4;
  text-transform: uppercase;
}

.consultation h2 {
  margin: 15px 0 0;
  color: #f7f8f9;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.35px;
  line-height: 1.06;
}

.consultation__form {
  min-width: 0;
}

.consultation__fields {
  display: grid;
  gap: 10px;
}

.consultation__fields label {
  display: grid;
  gap: 5px;
  color: #c2c7cc;
  font-size: 13px;
}

.consultation__fields input,
.consultation__fields textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid #4a5157;
  border-radius: 6px;
  background: #20262a;
  color: #f7f8f9;
  font: inherit;
  font-size: 15px;
  resize: vertical;
}

.consultation__fields input:focus,
.consultation__fields textarea:focus {
  border-color: #fb1221;
  outline: none;
}

.consultation__fields input:focus-visible,
.consultation__fields textarea:focus-visible {
  outline: 2px solid rgba(251, 18, 33, 0.65);
  outline-offset: 2px;
}

.consultation__fields input[aria-invalid="true"],
.consultation__fields textarea[aria-invalid="true"] {
  border-color: #ff5b65;
  box-shadow: 0 0 0 1px #ff5b65;
}

.form-field__error {
  color: #ff9ea5;
  font-size: 12px;
  line-height: 1.3;
}

/* The hint sits beneath the entered characters, so only the remaining zeros
   are visible as a soft phone-number mask. */
.phone-mask {
  position: relative;
  display: block;
  min-width: 0;
}

.phone-mask__hint {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: inline-flex;
  align-items: center;
  padding: inherit;
  border: 1px solid transparent;
  color: currentColor;
  font: inherit;
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
  white-space: nowrap;
}

.phone-mask__prefix,
.phone-mask__group,
.phone-mask__slot,
.phone-mask__gap {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.phone-mask__prefix {
  margin-right: .24em;
}

.phone-mask__group {
  gap: 0;
}

.phone-mask__slot {
  width: .62em;
  min-width: .62em;
  text-align: center;
}

.phone-mask__slot.is-empty {
  opacity: .38;
}

.phone-mask__gap {
  width: .24em;
  min-width: .24em;
}

.phone-mask > input[type="tel"] {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  caret-color: currentColor;
}

.consultation__fields .phone-mask {
  font: inherit;
  font-size: 15px;
}

.consultation__fields .phone-mask__hint {
  padding: 11px 14px;
  color: #f7f8f9;
}

.cart-page__request .phone-mask {
  margin-top: 5px;
  font: inherit;
  font-size: 14px;
}

.cart-page__request .phone-mask > input[type="tel"] {
  margin-top: 0;
}

.cart-page__request .phone-mask__hint {
  padding: 9px 10px;
  color: #20242a;
}

.consultation__controls {
  display: grid;
  grid-template-columns: minmax(0, 206px);
  justify-content: end;
  gap: 12px;
}

.consultation__submit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 206px;
  align-items: center;
  gap: 18px;
  margin-top: 13px;
}

.consultation__submit-row p {
  margin: 0;
}

.consultation__controls button[type="submit"] {
  width: 100%;
}

.consultation__form button[aria-disabled="true"] {
  border-color: #6d747b;
  background: #6d747b;
  color: #e4e7e9;
  cursor: not-allowed;
}

.consultation__controls input,
.consultation__controls button {
  min-width: 0;
  height: 54px;
  border-radius: 6px;
  font: inherit;
  font-size: 15px;
}

.consultation__controls input {
  padding: 0 16px;
  border: 1px solid #4a5157;
  background: #20262a;
  color: #f7f8f9;
  outline: none;
}

.consultation__controls input::placeholder {
  color: #a2aab2;
  opacity: 1;
}

.consultation__controls input:focus {
  border-color: #fb1221;
}

.consultation__controls button {
  border: 1px solid #fb1221;
  background: #fb1221;
  color: #ffffff;
  cursor: pointer;
  font-weight: 600;
}

.consultation__form p {
  margin: 13px 0 0;
  color: #c2c7cc;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.1px;
  line-height: 1.35;
}

.consultation__groups {
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid rgba(194, 199, 204, 0.22);
}

.consultation__form .consultation__groups-title {
  margin: 0;
  color: #f7f8f9;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.1px;
  line-height: 1.35;
}

.consultation__groups-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 11px;
}

.consultation__group-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  color: #f7f8f9;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.consultation__group-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: #fb1221;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.consultation__max-icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  border: 1px solid #fb1221;
  border-radius: 4px;
  color: #fb1221;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: -0.35px;
  line-height: 1;
}

.contact-details {
  padding: 58px 0;
  border-top: 1px solid rgba(194, 199, 204, 0.22);
  background: #111518;
  color: #c2c7cc;
}

.contact-details__container {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 34px 72px;
  width: calc(100% - 144px);
  margin: 0 auto;
}

.contact-details__eyebrow {
  margin: 0 0 9px;
  color: #fb1221;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-details h2 {
  margin: 0;
  color: #f7f8f9;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
}

.contact-details__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 15px 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.contact-details__list li {
  display: grid;
  grid-template-columns: minmax(122px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
  font-size: 14px;
  line-height: 1.35;
}

.contact-details__list li > :last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-details__list {
  grid-auto-flow: row;
}

.contact-details__list a,
.site-footer a {
  color: #f7f8f9;
}

.contact-details__list a:hover,
.contact-details__list a:focus-visible,
.site-footer a:hover,
.site-footer a:focus-visible {
  color: #fb1221;
}

.site-footer {
  padding: 32px 0;
  border-top: 1px solid rgba(194, 199, 204, 0.22);
  background: #111518;
  color: #c2c7cc;
}

.site-footer__container {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 28px 48px;
  width: calc(100% - 144px);
  margin: 0 auto;
}

.site-footer__intro strong {
  display: block;
  color: #f7f8f9;
  font-size: 16px;
}

.site-footer p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.4;
}

.site-footer__contacts,
.site-footer__links {
  display: grid;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}

.site-footer__contacts > *,
.site-footer__links > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .site-footer__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 64px);
  }

  .site-footer__intro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .contact-details {
    padding: 42px 0;
  }

  .contact-details__container {
    grid-template-columns: 1fr;
    gap: 28px;
    width: calc(100% - 32px);
  }

  .contact-details__list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 13px;
  }

  .contact-details__list li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .site-footer {
    padding: 28px 0;
  }

  .site-footer__container {
    grid-template-columns: 1fr;
    gap: 22px;
    width: calc(100% - 32px);
  }

  .site-footer__intro {
    grid-column: auto;
  }
}

.consultation__group-link:focus-visible {
  outline: 2px solid #fb1221;
  outline-offset: 4px;
  border-radius: 3px;
}

@media (max-width: 640px) {
  .catalog-preview {
    width: 100vw;
    min-width: 0;
  }

  .catalog-preview__container {
    width: calc(100% - 32px);
  }

  .catalog-preview__heading-row {
    gap: 12px;
  }

  .catalog-preview__heading-row h2 {
    font-size: 30px;
  }

  .catalog-preview__all-link {
    gap: 10px;
    font-size: 13px;
  }

  .catalog-preview__carousel {
    padding: 0 48px;
  }

  .catalog-preview__arrow {
    width: 38px;
    height: 38px;
  }

  .catalog-card__media {
    padding: 0;
  }

  .catalog-card__footer {
    padding: 0 14px;
    font-size: 17px;
  }

  .catalog-card__footer span {
    white-space: nowrap;
  }

  .catalog-card__footer svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .hero-content {
    background: #111518;
  }

  .hero-content::before {
    width: 100%;
    background-position: left center;
    background-size: cover;
  }

  .hero-content::after {
    display: none;
  }

  .why-sazan {
    width: 100vw;
    min-width: 0;
  }

  .why-sazan__container {
    width: calc(100% - 16px);
  }

  .delivery {
    width: 100vw;
    min-width: 0;
    padding: 40px 0;
  }

  .delivery__container {
    width: calc(100% - 32px);
  }

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

  .delivery h2 {
    font-size: 36px;
  }

  .delivery__lead {
    max-width: 330px;
  }

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

  .video-reviews {
    width: 100vw;
    min-width: 0;
    padding: 40px 0;
  }

  .video-reviews__container {
    width: calc(100% - 32px);
  }

  .video-reviews__heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .video-reviews h2 {
    font-size: 36px;
  }

  .video-reviews__more-button { width:min(100%, 330px); }
  .video-reviews__track { grid-auto-columns:100%; gap:18px; margin-top:22px; }
  .video-reviews__previous { left:12px; }
  .video-reviews__next { right:12px; }

  .video-reviews__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 22px;
  }

  .consultation {
    width: 100vw;
    min-width: 0;
    padding: 40px 0;
  }

  .consultation__container {
    grid-template-columns: 1fr;
    gap: 28px;
    width: calc(100% - 32px);
    min-height: 0;
  }

  .consultation h2 {
    font-size: 36px;
  }

  .consultation__controls {
    grid-template-columns: 1fr;
  }

  .consultation__submit-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .consultation__submit-row .consultation__controls {
    justify-content: stretch;
  }

  .consultation__controls input,
  .consultation__controls button {
    width: 100%;
  }

  .consultation__groups-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .home-page .site-header {
    height: auto;
    min-height: 78px;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .home-page .site-nav {
    order: 3;
    width: 100%;
    gap: 14px;
    overflow-x: auto;
  }

}

/* Responsive layout: desktop geometry remains untouched from 1280px upward. */
@media (max-width: 1199px) {
  .catalog-preview__container,
  .why-sazan__container,
  .delivery__container,
  .video-reviews__container,
  .consultation__container {
    width: calc(100% - 96px);
  }

  .hero-copy {
    width: min(500px, calc(100% - 96px));
  }

  .hero-copy h1 {
    font-size: 48px;
  }

  .why-sazan {
    min-height: 0;
  }

  .why-sazan__container {
    min-height: 0;
  }

  .why-sazan__intro {
    min-height: 230px;
  }

  .consultation__container {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .site-header {
    height: auto;
    min-height: 78px;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .site-nav {
    position: static;
    order: 3;
    width: 100%;
    justify-content: space-between;
    transform: none;
  }

  .consultation-link {
    margin-left: 0;
  }

  .hero,
  .hero-content {
    height: 520px;
  }

  .hero-copy {
    width: min(470px, calc(100% - 64px));
    padding-top: 68px;
    margin-left: 32px;
  }

  .hero-copy h1 {
    font-size: 43px;
  }

  .hero-copy p {
    font-size: 19px;
  }

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

  .delivery__heading,
  .video-reviews__heading {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 32px;
  }

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

@media (max-width: 640px) {
  .site-header {
    gap: 12px;
    padding: 12px var(--header-gutter);
  }

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

  .brand {
    flex-basis: 150px;
  }

  .cart-toggle {
    height: 42px;
  }

  .consultation-link {
    order: 3;
    width: 100%;
    height: 44px;
  }

  .cart-toggle {
    order: 4;
    margin-left: 0;
  }

  .site-nav,
  .home-page .site-nav {
    order: 5;
    justify-content: flex-start;
    gap: 18px;
    padding-bottom: 2px;
    overflow-x: auto;
  }

  .hero,
  .hero-content {
    height: 570px;
  }

  .hero-content::before {
    background-position: left center;
  }

  .hero-copy {
    width: calc(100% - 32px);
    padding-top: 48px;
    margin-left: 16px;
  }

  .hero-copy h1 {
    font-size: 38px;
    letter-spacing: -1px;
  }

  .hero-copy p {
    max-width: 340px;
    font-size: 18px;
  }

  .hero-actions {
    width: min(100%, 320px);
    flex-direction: column;
  }

  .button--primary,
  .button--secondary {
    width: 100%;
    height: 54px;
  }

  .why-sazan {
    padding: 36px 0;
  }

  .why-sazan__container,
  .delivery__container,
  .video-reviews__container,
  .consultation__container {
    width: calc(100% - 32px);
  }

  .why-sazan__intro {
    min-height: 0;
  }

  .why-sazan h2,
  .delivery h2,
  .video-reviews h2,
  .consultation h2 {
    font-size: 36px;
  }

  .why-sazan__grid {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .why-card {
    min-height: 0;
  }

  .delivery__heading,
  .video-reviews__heading {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .delivery__lead {
    max-width: 100%;
  }

  .consultation {
    background-position: 66% center;
  }
}

@media (max-width: 768px) {
  .hero,
  .hero-content {
    height: 590px;
  }

  .hero-content::before {
    background-position: left center;
  }

  .hero-copy {
    width: calc(100% - 48px);
    max-width: 420px;
    padding-top: 52px;
    margin-left: 24px;
  }

  .hero-copy h1 {
    font-size: 40px;
  }

  .hero-copy p {
    max-width: 380px;
    font-size: 18px;
  }

  .hero-actions {
    width: min(100%, 320px);
    flex-direction: column;
  }

  .button--primary,
  .button--secondary {
    width: 100%;
    height: 54px;
  }
}

@media (max-width: 390px) {
  .brand,
  .brand img {
    width: 136px;
  }

  .brand {
    flex-basis: 136px;
  }

  .hero-copy h1 {
    font-size: 34px;
  }

  .hero-copy p {
    font-size: 17px;
  }
}

/* Only the 600 px header: a compact two-row layout without a scrolling nav. */
@media (min-width: 561px) and (max-width: 640px) {
  .home-page .site-header {
    display: grid;
    grid-template-areas:
      "brand consultation cart"
      "nav nav nav";
    grid-template-columns: 150px minmax(0, 1fr) 42px;
    grid-template-rows: 44px auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 12px;
    min-height: 0;
    padding: 12px var(--header-gutter) 10px;
  }

  .home-page .site-header .brand {
    grid-area: brand;
    min-width: 0;
  }

  .home-page .site-header .consultation-link {
    grid-area: consultation;
    width: auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    justify-self: end;
  }

  .home-page .site-header .cart-toggle {
    grid-area: cart;
    width: 42px;
    min-width: 42px;
    margin: 0;
    justify-self: end;
  }

  .home-page .site-header .site-nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    gap: 0;
    padding-inline: var(--header-gutter);
    overflow: visible;
  }

  .home-page .site-header .site-nav a {
    min-width: 0;
    text-align: center;
  }
}

/* Align the Hero copy with the header logo only at the 1920 px desktop layout. */
@media (min-width: 1900px) and (max-width: 1950px) {
  .hero,
  .hero-content {
    height: 677px;
  }

  .hero-content::before {
    background-image: url("assets/hero-concept-photo-1920-expanded.png");
  }

  .hero-copy {
    margin-left: calc(5.05vw + 8.64px);
  }
}

/* Use the protected 1280 px Hero composition without affecting other layouts. */
@media (min-width: 1250px) and (max-width: 1310px) {
  .hero-content::before {
    background-image: url("assets/hero-concept-photo-1280-balanced.png");
    background-size: 104% auto;
    background-position: center bottom;
  }
}

/* Stack Hero copy and the untouched full-width photograph below it on narrow layouts. */
@media (max-width: 1024px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    background-color: #111518;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .hero-content {
    flex: 0 0 auto;
    height: auto;
    min-height: 383px;
    overflow: visible;
    background: #111518;
  }

  .hero-content::before {
    display: none;
  }

  .hero-copy {
    width: min(570px, calc(100% - 96px));
    padding: 52px 0 48px;
    margin-left: 5.05vw;
  }

  .hero-visual {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 2390 / 756;
    background-color: #111518;
    background-image: url("assets/hero-concept-photo-outpainted.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* 1024px layout: use the client-approved stacked Hero photograph. */
@media (min-width: 901px) and (max-width: 1024px) {
  .hero-visual {
    background-image: url("assets/hero-concept-photo-1024-attached.png");
    background-position: center center;
    background-size: cover;
  }
}

@media (max-width: 900px) {
  .hero-copy {
    width: min(470px, calc(100% - 64px));
    padding: 48px 0 42px;
    margin-left: 32px;
  }
}

@media (max-width: 768px) {
  .hero-content {
    min-height: 0;
  }

  .hero-copy {
    width: calc(100% - 48px);
    max-width: 420px;
    padding: 44px 0 46px;
    margin-left: 24px;
  }
}

@media (max-width: 640px) {
  .hero-copy {
    width: calc(100% - 32px);
    padding: 40px 0 42px;
    margin-left: 16px;
  }

  .hero-visual {
    height: clamp(170px, 46vw, 220px);
    aspect-ratio: auto;
    background-position: right center;
    background-size: auto 100%;
  }
}

/* This source swap is deliberately isolated to the 1024 px stacked Hero. */
@media (min-width: 1000px) and (max-width: 1050px) {
  .site-header {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 42px 221px;
    column-gap: 16px;
    padding-right: 4.8vw;
    padding-left: 4.8vw;
  }

  .site-nav {
    position: static;
    min-width: 0;
    gap: 26px;
    transform: none;
  }

  .cart-toggle {
    flex-shrink: 0;
    margin-left: 0;
  }

  .consultation-link {
    margin-left: 0;
  }

  .hero {
    background-color: #24262a;
    background-image: url("assets/hero-concept-photo-1024-new-background.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 520px;
  }

  .hero-content {
    background: transparent;
    min-height: 344.90625px;
    text-align: center;
  }

  .hero-copy {
    margin-right: auto;
    margin-left: auto;
    top: 30px;
    padding-bottom: 0;
    text-align: center;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-visual {
    background: transparent;
  }
}

/* The 1024 px Hero is intentionally composed from a wall and a separate photo. */
@media (min-width: 1024px) and (max-width: 1024px) {
  .hero {
    background-color: #111518;
    background-image: none;
    background-size: auto;
  }

  .hero-content {
    min-height: 400px;
    z-index: 1;
    background: transparent;
  }

  .hero-content::before {
    display: block;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 56px), transparent 100%);
  }

  .hero-visual {
    position: relative;
    z-index: 0;
    height: calc(323.90625px + 56px);
    margin-top: -56px;
    background-image: url("assets/hero-1024-wide-extended.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

/* Individually tuned stacked Hero compositions below the approved 1024 px layout. */
@media (min-width: 850px) and (max-width: 999px) {
  .hero {
    background-color: #17191b;
    background-image: url("assets/hero-concept-photo-1024-seamless.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 650px;
  }

  .hero-content {
    display: flex;
    flex: 0 0 378px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 378px;
    background: transparent;
    text-align: center;
  }

  .hero-copy {
    position: static;
    width: min(600px, calc(100% - 64px));
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 40px;
    letter-spacing: -1px;
    line-height: 1.08;
  }

  .hero-copy p {
    margin-top: 17px;
    font-size: 18px;
    line-height: 1.32;
  }

  .hero-actions {
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
  }

  .button--primary {
    width: 272px;
    height: 56px;
    font-size: 15px;
  }

  .button--secondary {
    width: 220px;
    height: 56px;
    font-size: 15px;
  }

  .hero-visual {
    flex: 0 0 272px;
    height: 272px;
    aspect-ratio: auto;
    background: transparent;
  }
}

@media (min-width: 700px) and (max-width: 849px) {
  .hero {
    background-color: #17191b;
    background-image: url("assets/hero-concept-photo-1024-seamless.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 625px;
  }

  .hero-content {
    display: flex;
    flex: 0 0 362px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 362px;
    background: transparent;
    text-align: center;
  }

  .hero-copy {
    position: static;
    width: min(560px, calc(100% - 64px));
    max-width: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 36px;
    letter-spacing: -0.8px;
    line-height: 1.1;
  }

  .hero-copy p {
    max-width: none;
    margin-top: 16px;
    font-size: 17px;
    line-height: 1.32;
  }

  .hero-actions {
    width: auto;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
  }

  .button--primary {
    width: 250px;
    height: 54px;
    font-size: 15px;
  }

  .button--secondary {
    width: 210px;
    height: 54px;
    font-size: 15px;
  }

  .hero-visual {
    flex: 0 0 263px;
    height: 263px;
    aspect-ratio: auto;
    background: transparent;
  }
}

@media (min-width: 550px) and (max-width: 699px) {
  .hero {
    background-color: #17191b;
    background-image: url("assets/hero-concept-photo-1024-seamless.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 570px;
  }

  .hero-content {
    display: flex;
    flex: 0 0 330px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 330px;
    background: transparent;
    text-align: center;
  }

  .hero-copy {
    position: static;
    width: min(504px, calc(100% - 48px));
    max-width: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 32px;
    letter-spacing: -0.6px;
    line-height: 1.1;
  }

  .hero-copy p {
    max-width: none;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.34;
  }

  .hero-actions {
    width: min(100%, 360px);
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
  }

  .button--primary,
  .button--secondary {
    width: 100%;
    height: 52px;
    font-size: 15px;
  }

  .hero-visual {
    flex: 0 0 240px;
    height: 240px;
    aspect-ratio: auto;
    background: transparent;
  }
}

@media (min-width: 450px) and (max-width: 549px) {
  .hero {
    background-color: #17191b;
    background-image: url("assets/hero-concept-photo-1024-seamless.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 540px;
  }

  .hero-content {
    display: flex;
    flex: 0 0 310px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 310px;
    background: transparent;
    text-align: center;
  }

  .hero-copy {
    position: static;
    width: calc(100% - 32px);
    max-width: none;
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 29px;
    letter-spacing: -0.45px;
    line-height: 1.12;
  }

  .hero-copy p {
    max-width: none;
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.34;
  }

  .hero-actions {
    width: min(100%, 360px);
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin: 18px auto 0;
  }

  .button--primary,
  .button--secondary {
    width: 100%;
    height: 50px;
    font-size: 14px;
  }

  .hero-visual {
    flex: 0 0 230px;
    height: 230px;
    aspect-ratio: auto;
    background: transparent;
  }
}

@media (min-width: 376px) and (max-width: 449px) {
  .hero {
    background-color: #17191b;
    background-image: url("assets/hero-concept-photo-1024-seamless.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 510px;
  }

  .hero-content {
    display: flex;
    flex: 0 0 295px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 295px;
    background: transparent;
    text-align: center;
  }

  .hero-copy {
    position: static;
    width: calc(100% - 48px);
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 28px;
    letter-spacing: -0.4px;
    line-height: 1.12;
  }

  .hero-copy p {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.34;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    margin: 16px auto 0;
  }

  .button--primary,
  .button--secondary {
    width: 100%;
    height: 48px;
    font-size: 14px;
  }

  .hero-visual {
    flex: 0 0 215px;
    height: 215px;
    aspect-ratio: auto;
    background: transparent;
  }
}

@media (max-width: 375px) {
  .hero {
    background-color: #17191b;
    background-image: url("assets/hero-concept-photo-1024-seamless.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: auto 485px;
  }

  .hero-content {
    display: flex;
    flex: 0 0 282px;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 282px;
    background: transparent;
    text-align: center;
  }

  .hero-copy {
    position: static;
    width: calc(100% - 32px);
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 26px;
    letter-spacing: -0.35px;
    line-height: 1.12;
  }

  .hero-copy p {
    margin-top: 11px;
    font-size: 14px;
    line-height: 1.36;
  }

  .hero-actions {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    margin: 15px auto 0;
  }

  .button--primary,
  .button--secondary {
    width: 100%;
    height: 48px;
    font-size: 14px;
  }

  .hero-visual {
    flex: 0 0 203px;
    height: 203px;
    aspect-ratio: auto;
    background: transparent;
  }
}

/* Two-photo Hero compositions below the approved 1024 px layout. */
@media (min-width: 900px) and (max-width: 1023px) {
  .hero {
    background: #111518;
  }

  .hero-content {
    display: flex;
    flex: 0 0 370px;
    min-height: 370px;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: transparent;
    text-align: center;
  }

  .hero-content::before {
    display: block;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 52px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 52px), transparent 100%);
  }

  .hero-copy {
    position: static;
    width: min(600px, calc(100% - 64px));
    padding: 0;
    margin: 0;
    text-align: center;
  }

  .hero-copy h1 {
    font-size: 40px;
    line-height: 1.08;
  }

  .hero-copy p {
    margin-top: 17px;
    font-size: 18px;
    line-height: 1.32;
  }

  .hero-actions {
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
  }

  .button--primary { width: 272px; height: 56px; font-size: 15px; }
  .button--secondary { width: 220px; height: 56px; font-size: 15px; }

  .hero-visual {
    position: relative;
    z-index: 0;
    flex: 0 0 322px;
    width: 100%;
    height: 322px;
    margin-top: -52px;
    background-image: url("assets/hero-1024-wide-extended.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .hero { background: #111518; }
  .hero-content {
    display: flex;
    flex: 0 0 350px;
    min-height: 350px;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: transparent;
    text-align: center;
  }
  .hero-content::before {
    display: block;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 48px), transparent 100%);
  }
  .hero-copy { position: static; width: min(560px, calc(100% - 56px)); padding: 0; margin: 0; text-align: center; }
  .hero-copy h1 { font-size: 36px; line-height: 1.1; }
  .hero-copy p { margin-top: 16px; font-size: 17px; line-height: 1.32; }
  .hero-actions { justify-content: center; gap: 10px; margin-top: 20px; }
  .button--primary { width: 250px; height: 54px; font-size: 15px; }
  .button--secondary { width: 210px; height: 54px; font-size: 15px; }
  .hero-visual {
    position: relative;
    z-index: 0;
    flex: 0 0 304px;
    width: 100%;
    height: 304px;
    margin-top: -48px;
    background-image: url("assets/hero-1024-wide-extended.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media (min-width: 600px) and (max-width: 767px) {
  .hero { background: #111518; }
  .hero-content {
    display: flex;
    flex: 0 0 326px;
    min-height: 326px;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: transparent;
    text-align: center;
  }
  .hero-content::before {
    display: block;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 44px), transparent 100%);
  }
  .hero-copy { position: static; width: min(504px, calc(100% - 48px)); padding: 0; margin: 0; text-align: center; }
  .hero-copy h1 { font-size: 32px; line-height: 1.1; }
  .hero-copy p { margin-top: 14px; font-size: 16px; line-height: 1.34; }
  .hero-actions { width: min(100%, 360px); flex-direction: column; gap: 10px; margin: 18px auto 0; }
  .button--primary, .button--secondary { width: 100%; height: 52px; font-size: 15px; }
  .hero-visual {
    position: relative;
    z-index: 0;
    flex: 0 0 284px;
    width: 100%;
    height: 284px;
    margin-top: -44px;
    background-image: url("assets/hero-1024-wide-extended.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media (min-width: 391px) and (max-width: 599px) {
  .hero { background: #111518; }
  .hero-content {
    display: flex;
    flex: 0 0 310px;
    min-height: 310px;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: transparent;
    text-align: center;
  }
  .hero-content::before {
    display: block;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 40px), transparent 100%);
  }
  .hero-copy { position: static; width: calc(100% - 32px); padding: 0; margin: 0; text-align: center; }
  .hero-copy h1 { font-size: 29px; line-height: 1.12; }
  .hero-copy p { margin-top: 13px; font-size: 15px; line-height: 1.34; }
  .hero-actions { width: min(100%, 360px); flex-direction: column; gap: 10px; margin: 18px auto 0; }
  .button--primary, .button--secondary { width: 100%; height: 50px; font-size: 14px; }
  .hero-visual {
    position: relative;
    z-index: 0;
    flex: 0 0 256px;
    width: 100%;
    height: 256px;
    margin-top: -40px;
    background-image: url("assets/hero-1024-wide-extended.png"), url("assets/hero-1024-wall-top.png");
    background-position: center bottom, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: calc(100% + 140px) auto, cover;
  }
}

@media (max-width: 390px) {
  .hero { background: #111518; }
  .hero-content {
    display: flex;
    flex: 0 0 294px;
    min-height: 294px;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: transparent;
    text-align: center;
  }
  .hero-content::before {
    display: block;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 38px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000000 0, #000000 calc(100% - 38px), transparent 100%);
  }
  .hero-copy { position: static; width: calc(100% - 32px); padding: 0; margin: 0; text-align: center; }
  .hero-copy h1 { font-size: 26px; line-height: 1.12; }
  .hero-copy p { margin-top: 11px; font-size: 14px; line-height: 1.36; }
  .hero-actions { width: 100%; flex-direction: column; gap: 9px; margin: 15px auto 0; }
  .button--primary, .button--secondary { width: 100%; height: 48px; font-size: 14px; }
  .hero-visual {
    position: relative;
    z-index: 0;
    flex: 0 0 242px;
    width: 100%;
    height: 242px;
    margin-top: -38px;
    background-image: url("assets/hero-1024-wide-extended.png"), url("assets/hero-1024-wall-top.png");
    background-position: center bottom, center bottom;
    background-repeat: no-repeat, no-repeat;
    background-size: 620px auto, cover;
  }
}

/* The 390 px header keeps all controls readable in two compact rows. */
@media (max-width: 390px) {
  .home-page .site-header {
    display: grid;
    grid-template-areas:
      "brand consultation cart"
      "nav nav nav";
    grid-template-columns: 112px minmax(0, 1fr) 42px;
    grid-template-rows: 46px auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 12px;
    min-height: 0;
    padding: 12px var(--header-gutter);
  }

  .home-page .site-header .brand,
  .home-page .site-header .brand img {
    width: 112px;
  }

  .home-page .site-header .brand {
    grid-area: brand;
    min-width: 0;
    flex-basis: auto;
  }

  .home-page .site-header .consultation-link {
    grid-area: consultation;
    width: auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    justify-self: end;
    font-size: 12px;
  }

  .home-page .site-header .cart-toggle {
    grid-area: cart;
    width: 42px;
    min-width: 42px;
    margin: 0;
    justify-self: end;
  }

  .home-page .site-header .site-nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: auto;
    width: 100%;
    gap: 10px 0;
    padding-inline: var(--header-gutter);
    overflow: visible;
  }

  .home-page .site-header .site-nav a {
    min-width: 0;
    text-align: center;
  }

  .home-page .site-header .site-nav a:nth-child(-n + 3) {
    grid-column: span 2;
  }

  .home-page .site-header .site-nav a:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .home-page .site-header .site-nav a:nth-child(5) {
    grid-column: 4 / span 2;
  }
}

/* Blend the two 390 px Hero photos without changing either photograph. */
@media (max-width: 390px) {
  .hero-visual {
    overflow: hidden;
  }

  .hero-visual::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 58px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      #111518 0%,
      rgba(17, 21, 24, 0.86) 30%,
      rgba(17, 21, 24, 0.44) 65%,
      rgba(17, 21, 24, 0) 100%
    );
  }
}

/* A distinct wall photo above a separate vehicle photo at 390 px and below. */
@media (max-width: 390px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
    background-color: #111518;
    background-image: url("assets/hero-1024-wall-top.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    flex: 0 0 314px;
    min-height: 314px;
    overflow: hidden;
    background: transparent;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero-content::before {
    display: none;
    content: none;
  }

  .hero-content::after {
    display: block;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 66px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(17, 21, 24, 0) 0%,
      rgba(17, 21, 24, 0.65) 100%
    );
  }

  .hero-visual {
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    flex: 0 0 264px;
    width: 100%;
    height: 264px;
    margin-top: -66px;
    padding-top: 90px;
    overflow: hidden;
    background-color: transparent;
    background-image: url("assets/hero-1024-wide-extended.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 532px auto;
    background-origin: content-box;
    background-clip: content-box;
  }

  .hero-visual::before {
    display: block;
    content: "";
    position: absolute;
    top: 66px;
    right: 0;
    left: 0;
    z-index: 2;
    height: 60px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(17, 21, 24, 0.65) 0%,
      rgba(17, 21, 24, 0) 100%
    );
  }
}

/* Fluid safety rules for the narrowest browser windows. Keep section controls
   within their containers instead of relying on a horizontal overflow area. */
@media (max-width: 640px) {
  .catalog-preview__container {
    width: calc(100% - 32px);
  }

  .catalog-preview__carousel {
    padding-right: 48px;
  }

  .catalog-preview__arrow--next {
    right: 0;
    left: auto;
  }

  .video-reviews__heading,
  .video-reviews__heading > * {
    min-width: 0;
  }

  .video-reviews__more-button {
    max-width: 100%;
    white-space: normal;
  }
}

/* Keep header controls and navigation in separate flex rows at intermediate
   widths. This follows the specialised 1024px rules above, so it also wins
   where that layout would otherwise place the cart over the last nav item. */
@media (min-width: 900px) and (max-width: 1280px) {
  .site-header,
  .home-page .site-header {
    display: flex;
    grid-template-columns: none;
    height: auto;
    min-height: 78px;
    flex-wrap: wrap;
    gap: 14px 16px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .site-nav,
  .home-page .site-nav {
    position: static;
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 12px 18px;
    transform: none;
  }

  .consultation-link {
    margin-left: 0;
  }
}


/* Keep every primary navigation link reachable on phone widths. This mirrors
   the compact catalogue and product headers without changing desktop layout. */
@media (max-width: 640px) {
  .home-page .site-header {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr) 42px;
    grid-template-areas:
      "brand consultation cart"
      "nav nav nav";
    min-height: 0;
    padding: 12px 16px 14px;
    gap: 12px;
  }

  .home-page .site-header .brand,
  .home-page .site-header .brand img {
    width: 126px;
  }

  .home-page .site-header .brand {
    grid-area: brand;
    min-width: 0;
    flex-basis: auto;
  }

  .home-page .site-header .cart-toggle {
    grid-area: cart;
    justify-self: end;
    margin: 0;
  }

  .home-page .site-header .consultation-link {
    grid-area: consultation;
    width: auto;
    min-height: 44px;
    margin: 0;
    justify-self: end;
    padding-inline: clamp(8px, 2.4vw, 16px);
    font-size: clamp(11px, 2.8vw, 13px);
  }

  .home-page .site-header .site-nav {
    grid-area: nav;
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 14px;
    overflow: visible;
  }

  .home-page .site-header .site-nav a {
    font-size: 14px;
  }
}

/* The category cards share the same horizontal container as the section heading. */
.catalog-preview__carousel {
  padding-right: 0;
  padding-left: 0;
}

.catalog-preview__viewport,
.catalog-preview__grid {
  width: 100%;
}

@media (min-width: 600px) and (max-width: 767px) {
  .catalog-preview__grid {
    gap: 16px;
  }

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

/* Keep the preview carousel progressive between the phone and desktop
   layouts: two complete cards on tablets, then three on medium desktops. */
@media (min-width: 768px) and (max-width: 899px) {
  .catalog-preview__grid {
    gap: 16px;
  }

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

@media (min-width: 900px) and (max-width: 1199px) {
  .catalog-preview__grid {
    gap: 16px;
  }

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

/* The carousel control is a sibling of the viewport, never part of the card/grid. */
@media (max-width: 1199px) {
  .catalog-preview__carousel {
    padding-right: 0;
  }

  .catalog-preview__arrow--next {
    top: calc((100% - 54px) / 2);
    right: auto;
    left: calc(100% + 3px);
    z-index: 2;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .catalog-preview__arrow--next {
    left: calc(100% + 9px);
  }
}

@media (min-width: 1200px) {
  .catalog-preview__carousel {
    padding-right: 0;
  }
}

/* One prepared mobile Hero composition: wall, transition, vehicles and floor. */
@media (max-width: 390px) {
  .hero {
    display: block;
    height: calc(216.1782vw - 218px);
    overflow: hidden;
    background-color: #111518;
    background-image: url("assets/hero-mobile-composite.png");
    background-position: center -218px;
    background-repeat: no-repeat;
    background-size: 100% auto;
  }

  .hero-content {
    display: flex;
    background: transparent;
  }

  .hero-content::before,
  .hero-content::after,
  .hero-visual,
  .hero-visual::before {
    display: none;
    content: none;
  }
}

/* Final narrow-window override: it follows the carousel presets above so the
   next arrow remains inside the visible content area at every phone width. */
@media (max-width: 640px) {
  .catalog-preview__container {
    width: calc(100% - 32px);
  }

  .catalog-preview__carousel {
    padding-right: 48px;
  }

  .catalog-preview__arrow--next {
    right: 0;
    left: auto;
  }
}

/* Mirror the outside placement of the next arrow without covering the first
   card. Narrow screens get a matching left gutter so both controls remain
   fully visible and clickable inside the page bounds. */
@media (max-width: 1199px) {
  .catalog-preview__arrow--previous {
    right: calc(100% + 3px);
    left: auto;
  }
}

@media (max-width: 640px) {
  .catalog-preview__carousel {
    padding-left: 48px;
  }

  .catalog-preview__arrow--previous {
    right: auto;
    left: 0;
  }
}

/* Both controls share one vertical anchor: the centre of the visible card
   area, independent of the number or height of the cards. */
@media (max-width: 1199px) {
  .catalog-preview__arrow--previous,
  .catalog-preview__arrow--next {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
  }
}

/* Header layout: keep the two actions on the right without absolute
   positioning. Wide screens keep the navigation in the centre; medium
   screens give the navigation its own row so the actions stay right-aligned. */
@media (min-width: 1281px) {
  .site-header,
  .home-page .site-header {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 0;
  }

  .site-nav,
  .home-page .site-nav {
    position: static;
    width: auto;
    padding-inline: var(--header-gutter);
    justify-content: space-between;
    transform: none;
  }

  .consultation-link {
    margin-left: 0;
  }

  .cart-toggle {
    margin-left: var(--header-gutter);
  }
}

@media (min-width: 900px) and (max-width: 1280px) {
  .site-header,
  .home-page .site-header {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto auto;
    grid-template-areas: "brand nav consultation cart";
    align-items: center;
    height: auto;
    min-height: 78px;
    gap: 0;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .site-header .brand {
    grid-area: brand;
  }

  .site-header .site-nav {
    grid-area: nav;
    position: static;
    width: auto;
    padding-inline: var(--header-gutter);
    justify-content: space-between;
    transform: none;
    gap: clamp(14px, 2vw, 40px);
  }

  .site-header .consultation-link {
    grid-area: consultation;
    margin-left: 0;
  }

  .site-header .cart-toggle {
    grid-area: cart;
    margin-left: var(--header-gutter);
  }
}

@media (max-width: 640px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) 42px;
    grid-template-areas:
      "brand consultation cart"
      "nav nav nav";
    align-items: center;
    min-width: 0;
    gap: 12px var(--header-gutter);
  }

  .site-header .brand {
    grid-area: brand;
  }

  .site-header .cart-toggle {
    grid-area: cart;
    margin-left: 0;
    justify-self: end;
  }

  .site-header .consultation-link {
    grid-area: consultation;
    width: auto;
    min-width: 0;
    margin-left: 0;
    justify-self: end;
    padding-inline: clamp(8px, 2.4vw, 16px);
    font-size: clamp(11px, 2.8vw, 14px);
  }

  .site-header .site-nav {
    grid-area: nav;
    position: static;
    width: 100%;
    min-width: 0;
    padding-inline: var(--header-gutter);
    transform: none;
  }
}

@media (max-width: 390px) {
  .site-header {
    grid-template-columns: clamp(96px, 31vw, 112px) minmax(0, 1fr) 38px;
    column-gap: clamp(5px, 2vw, 8px);
  }

  .site-header .brand,
  .site-header .brand img {
    width: clamp(96px, 31vw, 112px);
  }

  .site-header .brand {
    flex-basis: auto;
  }

  .site-header .cart-toggle {
    width: 38px;
    min-width: 38px;
  }

  .site-header .consultation-link {
    padding-inline: 4px;
    font-size: clamp(10px, 3vw, 12px);
  }
}

@media (max-width: 320px) {
  .home-page .site-header {
    grid-template-columns: clamp(96px, 31vw, 104px) minmax(0, 1fr) 38px;
    column-gap: clamp(5px, 2vw, 7px);
  }

  .home-page .site-header .brand,
  .home-page .site-header .brand img {
    width: clamp(96px, 31vw, 104px);
  }

  .home-page .site-header .cart-toggle {
    width: 38px;
    min-width: 38px;
  }

  .home-page .site-header .consultation-link {
    padding-inline: 4px;
    font-size: 10px;
  }
}

/* Medium and narrow layouts do not retain the desktop section height that
   normally separates the copy from the cards, so reserve that gap directly. */
@media (max-width: 1199px) {
  .why-sazan__grid {
    margin-top: clamp(28px, 4vw, 48px);
  }
}

@media (max-width: 640px) {
  .why-sazan__grid {
    margin-top: clamp(24px, 7vw, 32px);
  }
}

/* At medium widths the heading and action compete for the same row. Stack
   them before the carousel so neither the title nor its controls can overlap. */
@media (min-width: 641px) and (max-width: 1199px) {
  .video-reviews__heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(18px, 3vw, 28px);
  }

  .video-reviews__more-button {
    width: min(100%, 330px);
    margin: 0;
  }

  .video-reviews__grid {
    margin-top: clamp(22px, 3vw, 32px);
  }
}

/* The two-column delivery heading becomes too narrow immediately above the
   mobile breakpoint. Keep the approved two-line reading there without
   changing its natural wrapping at other widths. */
@media (min-width: 641px) and (max-width: 720px) {
  .delivery__title-first,
  .delivery__title-second {
    display: block;
  }

  .delivery__title-first {
    white-space: nowrap;
  }
}

/* The delivery lead is intentionally removed, so the heading no longer
   reserves a second column for it at any responsive width. */
.delivery__heading {
  grid-template-columns: minmax(0, 1fr);
}

/* Keep this heading on one line at every viewport width. The fluid size is
   limited to this title so the delivery cards and the rest of the page keep
   their existing dimensions. */
.delivery h2#delivery-title {
  white-space: nowrap;
  font-size: clamp(20px, 6vw, 48px);
}

.delivery h2#delivery-title .delivery__title-first,
.delivery h2#delivery-title .delivery__title-second {
  display: inline;
  white-space: inherit;
}

/* Keep the compact header actions against the right edge throughout the
   narrow Safari window range. The flexible middle track is only a spacer. */
@media (min-width: 391px) and (max-width: 640px) {
  .home-page .site-header {
    grid-template-columns: 126px minmax(0, 1fr) 42px;
    grid-template-areas:
      "brand consultation cart"
      "nav nav nav";
  }

  .home-page .site-header .consultation-link {
    grid-area: consultation;
    width: min(221px, 100%);
    margin-left: auto;
    justify-self: end;
  }

  .home-page .site-header .cart-toggle {
    grid-area: cart;
    justify-self: end;
  }
}

/* Let navigation use the space between the logo and header actions whenever
   it fits. If that container becomes too narrow, move only the nav to its
   own row while keeping the consultation button and cart on the right. */
.site-header {
  container-type: inline-size;
}

@container (min-width: 900px) {
  .site-header,
  .home-page .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    row-gap: 14px;
  }

  .site-header .brand {
    order: 0;
    flex: 0 0 170px;
  }

  .site-header .site-nav {
    position: static;
    order: 1;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding-inline: var(--header-gutter);
    justify-content: space-between;
    gap: clamp(14px, 2vw, 40px);
    transform: none;
  }

  .site-header .consultation-link {
    order: 2;
    flex: 0 0 auto;
    margin-left: 0;
  }

  .site-header .cart-toggle {
    order: 3;
    flex: 0 0 auto;
    margin-left: var(--header-gutter);
  }
}

@container (min-width: 641px) and (max-width: 899px) {
  .site-header,
  .home-page .site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    row-gap: 14px;
  }

  .site-header .brand {
    order: 0;
    flex: 0 0 170px;
  }

  .site-header .consultation-link {
    order: 1;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .site-header .cart-toggle {
    order: 2;
    flex: 0 0 auto;
    margin-left: var(--header-gutter);
  }

  .site-header .site-nav {
    position: static;
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    padding-inline: var(--header-gutter);
    justify-content: space-between;
    gap: 12px 18px;
    transform: none;
  }
}

/* Keep the catalogue and cart navigation stretched across its own row in the
   intermediate range, before the 900px container layout takes over. */
@media (min-width: 601px) and (max-width: 899px) {
  .catalog-page .site-header .site-nav,
  .cart-page .site-header .site-nav {
    position: static;
    display: flex;
    flex: 1 0 100%;
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: clamp(12px, 2.5vw, 24px);
    padding-inline: var(--header-gutter);
    transform: none;
  }
}

/* Mobile navigation uses two explicit rows instead of an automatic wrap:
   three links on the first row and two centred links on the second row. */
@media (max-width: 640px) {
  .site-header,
  .home-page .site-header {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto;
  }

  .site-header .site-nav,
  .home-page .site-header .site-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    align-items: center;
    justify-items: center;
    justify-content: stretch;
    gap: 10px 0;
    padding-inline: 0;
    white-space: nowrap;
  }

  .site-header .site-nav a,
  .home-page .site-header .site-nav a {
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }

  .site-header .site-nav a:nth-child(-n + 3),
  .home-page .site-header .site-nav a:nth-child(-n + 3) {
    grid-column: span 2;
    grid-row: 1;
  }

  .site-header .site-nav a:nth-child(4),
  .home-page .site-header .site-nav a:nth-child(4) {
    grid-column: 2 / span 2;
    grid-row: 2;
  }

  .site-header .site-nav a:nth-child(5),
  .home-page .site-header .site-nav a:nth-child(5) {
    grid-column: 4 / span 2;
    grid-row: 2;
  }
}

/* On phones and tablets the header stays in normal document flow so it does
   not cover the hero or content while the page is being scrolled. */
@media (max-width: 1024px) {
  .home-page .site-header {
    position: static;
  }
}

/* Legal pages and consent controls. */
html.legal-page-document,
body.legal-page {
  min-width: 0;
}

.legal-page {
  background: #f6f7f8;
  color: #17191d;
}

.legal-document {
  width: min(calc(100% - 48px), 960px);
  margin-inline: auto;
  padding: clamp(32px, 6vw, 72px) 0;
}

.legal-document__back {
  display: inline-flex;
  margin-bottom: clamp(24px, 4vw, 40px);
  color: #5d6672;
  text-decoration: none;
}

.legal-document__back:hover,
.legal-document__back:focus-visible {
  color: #ef1c2a;
  text-decoration: underline;
}

.legal-document h1 {
  max-width: 850px;
  margin: 0 0 clamp(30px, 5vw, 56px);
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.08;
}

.legal-document__text {
  display: grid;
  gap: 16px;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.55;
}

.legal-document__text h2 {
  margin: 28px 0 0;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.legal-document__text p,
.legal-document__text ul {
  margin: 0;
}

.legal-document__text ul {
  display: grid;
  gap: 10px;
  padding-left: 1.35em;
}

.site-footer--legal {
  min-width: 0;
}

.site-footer--legal .site-footer__container {
  display: block;
}

.site-footer--legal .site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.consent-field {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin-top: 16px;
  color: #5d6672;
  font-size: 13px;
  line-height: 1.4;
}

.consent-field input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: #ef1c2a;
}

.consent-field a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-field .form-field__error {
  grid-column: 1 / -1;
}

.consultation .consent-field {
  color: #c2c7cc;
}

.consultation .consent-field a {
  color: #f7f8f9;
}

.cookie-consent {
  position: fixed;
  z-index: 1100;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cookie-consent__content {
  display: flex;
  width: min(100%, 760px);
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  color: #fff;
  background: #17191d;
  border: 1px solid #363d45;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgb(0 0 0 / 22%);
  pointer-events: auto;
}

.cookie-consent__content p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.cookie-consent__content a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-consent__actions {
  display: flex;
  flex: none;
  gap: 8px;
}

.cookie-consent__actions button {
  min-height: 40px;
  padding: 8px 14px;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: 1px solid #d8dce0;
  border-radius: 8px;
}

.cookie-consent__actions button:first-child {
  background: #ef1c2a;
  border-color: #ef1c2a;
}

.cookie-consent__actions button:focus-visible,
.consent-field input:focus-visible {
  outline: 2px solid #ef1c2a;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .legal-document {
    width: min(calc(100% - 32px), 960px);
  }

  .cookie-consent {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }

  .cookie-consent__content {
    display: grid;
    gap: 14px;
    padding: 14px;
  }

  .cookie-consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}