/* SAFEINCASE — основная таблица стилей */
/* legacy — старый bootstrap только на непеределанных страницах (legacy.css) */
@layer legacy, reset, tokens, base, vendor, layout, components, header, footer, pages, ocstore, utilities;


@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Variable.woff2") format("woff2"),
       url("../fonts/DMSans-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/NotoSans-Variable.woff2") format("woff2"),
       url("../fonts/NotoSans-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116, U+20BD;
}


@font-face {
  font-family: "Commissioner";
  src: url("../fonts/Commissioner-Variable.woff2") format("woff2"),
       url("../fonts/Commissioner-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* заглушка с похожими метриками, чтобы текст не прыгал до загрузки шрифтов (значения примерные) */
@font-face {
  font-family: "SIC Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 94%;
  descent-override: 26%;
  line-gap-override: 0%;
}


@view-transition {
  navigation: auto;
}


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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
  }

  body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    -webkit-font-smoothing: antialiased;
  }

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

  img, video {
    block-size: auto;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  p, h1, h2, h3, h4, h5, h6, li, dd, dt {
    overflow-wrap: break-word;
  }

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

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

  [hidden] {
    display: none !important;
  }
}


/* ===== переменные ===== */
@layer tokens {
  :root {
    /* «u» = 1px макета 2560 включается только на десктопе (ниже); на узких экранах 0, и в max() работают нижние границы */
    --u: 0px;

    /* цвета */
    --c-brand: #185d70;
    --c-brand-dark: #154c5a;
    --c-accent: #00bbb4;
    --c-accent-hover: #009e98;
    --c-accent-soft: #e3f5f4;
    --c-ink: #1a2630;
    --c-text: #1a2630;
    --c-muted: #5e6972;
    --c-line: #e0eaec;
    --c-surface: #f4f7f8;
    --c-surface-2: #e6eef0;
    --c-footer: #1a2630;
    --c-white: #fff;
    --c-on-dark: rgb(255 255 255 / 0.78);
    --c-on-dark-line: rgb(255 255 255 / 0.16);
    --c-danger: #d64545;
    --c-success: #1f9d6b;

    /* шрифты */
    --font-sans: "DM Sans", "Noto Sans", "SIC Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Commissioner", "SIC Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* размеры текста. Здесь значения для телефона и планшета: 360 → 1024px.
       С 64em (1024px) их заменяет блок ниже: 1024 → 2560px */
    --fs-2xs: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem);           /* 12 → 14, только дисклеймер в футере */
    --fs-xs: 0.875rem;                                             /* 14 → 14, надзаголовки и мелкий текст */
    --fs-sm: clamp(0.9375rem, 0.8697rem + 0.3012vw, 1.0625rem);   /* 15 → 17, «меньший» текст */
    --fs-base: clamp(1rem, 0.8645rem + 0.6024vw, 1.25rem);        /* 16 → 20, основной текст */
    --fs-md: clamp(1.0625rem, 0.9608rem + 0.4518vw, 1.25rem);     /* 17 → 20, вводные абзацы */
    --fs-lg: clamp(1.125rem, 1.0572rem + 0.3012vw, 1.25rem);      /* 18 → 20, заголовки карточек (h3) */
    --fs-xl: clamp(1.25rem, 1.1145rem + 0.6024vw, 1.5rem);        /* 20 → 24, заголовки блоков и форм */
    --fs-card-title: var(--fs-xl);                                 /* заголовок карточки; на десктопе 28 → см. ниже */
    --fs-section: var(--fs-h2);                                    /* заголовок секции инфо-страниц; на десктопе 42 */
    --fs-h2: clamp(1.5rem, 1.3645rem + 0.6024vw, 1.75rem);        /* 24 → 28, заголовки секций */
    --fs-stat: clamp(1.625rem, 1.4217rem + 0.9036vw, 2rem);       /* 26 → 32, крупные цифры «14+» */
    --fs-h1: clamp(1.875rem, 1.5273rem + 1.5455vw, 4rem);         /* 30 → 64 */
    --fs-display: clamp(2.125rem, 1.5727rem + 2.4545vw, 5.5rem);  /* 34 → 88 */
    --fs-price: clamp(1.625rem, 1.3591rem + 1.1818vw, 3.25rem);   /* 26 → 52 */
    --fs-phone: clamp(1.5rem, 1.275rem + 1vw, 2.875rem);          /* 24 → 46 */

    --lh-tight: 1.15;
    --lh-heading: 1.25;
    --lh-base: 1.6;

    /* отступы */
    --sp-3xs: clamp(0.25rem, 0.2091rem + 0.1818vw, 0.5rem);
    --sp-2xs: clamp(0.375rem, 0.3136rem + 0.2727vw, 0.75rem);
    --sp-xs: clamp(0.5rem, 0.4182rem + 0.3636vw, 1rem);
    --sp-s: clamp(0.75rem, 0.6273rem + 0.5455vw, 1.5rem);
    --sp-m: clamp(1rem, 0.8364rem + 0.7273vw, 2rem);
    --sp-l: clamp(1.5rem, 1.2545rem + 1.0909vw, 3rem);
    --sp-xl: clamp(2rem, 1.5909rem + 1.8182vw, 4.5rem);
    --sp-2xl: clamp(2.5rem, 1.8455rem + 2.9091vw, 6.5rem);

    /* сетка */
    --container-max: 147.5rem;                                    
    --container-narrow: 75rem;                                    
    --gutter: clamp(1rem, 0.1409rem + 3.8182vw, 6.25rem);         /* 16 → 100 */
    --grid-gap: var(--sp-m);

    /* элементы */
    --topbar-h: clamp(2.25rem, 2.0455rem + 0.9091vw, 3.5rem);
    --header-h: clamp(4rem, 3.5091rem + 2.1818vw, 7rem);
    --logo-h: clamp(2.25rem, 1.8818rem + 1.6364vw, 4.5rem);
    --btn-h: clamp(2.75rem, 2.5455rem + 0.9091vw, 4rem);
    --input-h: clamp(2.75rem, 2.5045rem + 1.0909vw, 4.25rem);
    --icon: clamp(1.125rem, 1.0227rem + 0.4545vw, 1.75rem);
    --icon-badge: clamp(2.5rem, 2.1727rem + 1.4545vw, 4.5rem);

    --r-sm: clamp(0.375rem, 0.3341rem + 0.1818vw, 0.625rem);
    --r: clamp(0.625rem, 0.5432rem + 0.3636vw, 1.125rem);
    --r-lg: clamp(0.875rem, 0.7318rem + 0.6364vw, 1.75rem);
    --r-pill: 999px;

    --shadow-s: 0 1px 2px rgb(27 39 48 / 0.06), 0 2px 8px rgb(27 39 48 / 0.05);
    --shadow-m: 0 8px 28px rgb(27 39 48 / 0.12);
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 0.2s;

    /* иконки для mask-image */
    --i-chevron-down: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --i-chevron-right: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    --i-arrow-right: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --i-check: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E");
    --i-plus: 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' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E");
    --i-minus: 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' stroke-linecap='round'%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E");
    --i-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    --i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");
    --i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E");
    --i-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h3l2.6 12.2a1 1 0 0 0 1 .8h9.7a1 1 0 0 0 1-.8L21 7H6'/%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3C/svg%3E");
    --i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7L20 8.5M20 3v5.5h-5.5'/%3E%3C/svg%3E");
    --i-cart-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4V3.2Q8 2 9.2 2h2.6Q13 2 13 3.2V4M3 5h14M4 7l.7 8.3Q4.8 17 6.5 17h6.2q1.6 0 1.7-1.7L15 7M8 9v4M12 9v4'/%3E%3C/svg%3E");
    --i-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3'/%3E%3C/svg%3E");
    --i-close: 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' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
    --i-burger: 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' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    --i-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a81' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --i-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E");
  }


  /* десктоп: от 1024px до 2560px (макет).
     Единица --u = 1px макета (2560px). Всё, что в макете измерено в пикселях,
     пишем как calc(N * var(--u)) — тогда отступы, радиусы и высоты растут и уменьшаются
     вместе с шириной экрана, и пропорции макета не едут.
     Нижняя граница в max() не даёт мелким отступам схлопнуться на узких десктопах. */
  @media (min-width: 64em) {
    :root {
      --u: 0.0390625vw;                                           /* 1px макета = 100vw / 2560 */

      /* шрифты: 24→20, 20→17, 16→14 и т.д. (значения макета 2560 → самый узкий десктоп 1024) */
      --fs-xs: clamp(0.875rem, 0.7917rem + 0.1302vw, 1rem);       /* 14 → 16, надзаголовки */
      --fs-sm: clamp(1.0625rem, 0.9375rem + 0.1953vw, 1.25rem);   /* 17 → 20, меньший текст */
      --fs-base: clamp(1.25rem, 1.0833rem + 0.2604vw, 1.5rem);    /* 20 → 24, основной текст */
      --fs-md: clamp(1.25rem, 1.0833rem + 0.2604vw, 1.5rem);      /* 20 → 24, как основной */
      --fs-lg: clamp(1.25rem, 1.0833rem + 0.2604vw, 1.5rem);      /* 20 → 24, заголовки карточек */
      --fs-xl: clamp(1.5rem, 1.1667rem + 0.5208vw, 2rem);         /* 24 → 32 */
      --fs-card-title: max(1.25rem, calc(28 * var(--u)));         /* 28 макета, не меньше 20 */
      --fs-section: max(1.75rem, calc(42 * var(--u)));            /* 42 макета, не меньше 28 */
      --fs-h2: clamp(1.75rem, 1.4167rem + 0.5208vw, 2.25rem);     /* 28 → 36 */
      --fs-stat: clamp(2rem, 1.3333rem + 1.0417vw, 3rem);         /* 32 → 48 */

      /* отступы макета: 8 / 10 / 15 / 20 / 30 / 40 / 64 / 90 */
      --sp-3xs: max(0.25rem, calc(8 * var(--u)));
      --sp-2xs: max(0.375rem, calc(10 * var(--u)));
      --sp-xs: max(0.5rem, calc(15 * var(--u)));
      --sp-s: max(0.75rem, calc(20 * var(--u)));
      --sp-m: max(1rem, calc(30 * var(--u)));
      --sp-l: max(1.5rem, calc(40 * var(--u)));
      --sp-xl: max(2rem, calc(64 * var(--u)));
      --sp-2xl: max(2.5rem, calc(90 * var(--u)));
      --section-pad: max(2.25rem, calc(72 * var(--u)));          /* обычная секция: 72px макета */

      /* сетка: поля 100px, контент 2360px */
      --gutter: max(1.5rem, calc(100 * var(--u)));
      --container-max: calc(2360 * var(--u));
      --container-narrow: 75rem;                                  /* узкие блоки (оформление заказа и т.п.): всегда до 1200px, не масштабируются */

      /* высоты элементов */
      --topbar-h: max(2.25rem, calc(57 * var(--u)));
      --header-h: max(4rem, calc(115 * var(--u)));
      --logo-h: max(2.5rem, calc(71 * var(--u)));
      --btn-h: max(2.75rem, calc(64 * var(--u)));
      --btn-h-lg: max(3.25rem, calc(91 * var(--u)));              /* кнопки в первом экране */
      --btn-px: max(1.25rem, calc(25 * var(--u)));
      --btn-px-lg: max(1.5rem, calc(50 * var(--u)));
      --input-h: max(2.75rem, calc(60 * var(--u)));
      --icon: max(1.125rem, calc(25 * var(--u)));
      --icon-badge: max(2.5rem, calc(60 * var(--u)));

      /* скругления макета: 10 / 20 / 30 */
      --r-sm: max(0.375rem, calc(10 * var(--u)));
      --r: max(0.625rem, calc(20 * var(--u)));
      --r-lg: max(0.875rem, calc(30 * var(--u)));
    }
  }

  /* выше 2560px макет не растёт: 1 единица = 1px */
  @media (min-width: 160em) {
    :root { --u: 1px; }
  }

  /* фолбэк для браузеров без clamp() */
  @supports not (font-size: clamp(1rem, 1vw, 2rem)) {
    :root {
      --fs-2xs: 0.8125rem;
      --fs-xs: 0.875rem;
      --fs-sm: 1rem;
      --fs-base: 1.125rem;
      --fs-md: 1.125rem;
      --fs-lg: 1.25rem;
      --fs-xl: 1.5rem;
      --fs-h2: 1.75rem;
      --fs-stat: 2rem;
      --fs-h1: 2.5rem;
      --fs-display: 3rem;
      --fs-price: 2rem;
      --fs-phone: 1.75rem;
      --sp-3xs: 0.25rem;
      --sp-2xs: 0.5rem;
      --sp-xs: 0.75rem;
      --sp-s: 1rem;
      --sp-m: 1.5rem;
      --sp-l: 2rem;
      --sp-xl: 3rem;
      --sp-2xl: 4rem;
      --gutter: 1.5rem;
      --topbar-h: 2.5rem;
      --header-h: 5rem;
      --logo-h: 3rem;
      --btn-h: 3rem;
      --input-h: 3rem;
      --icon: 1.25rem;
      --icon-badge: 3rem;
      --r-sm: 0.5rem;
      --r: 0.75rem;
      --r-lg: 1.25rem;
    }
  }
}


/* ===== базовые стили ===== */
@layer base {
  html {
    color-scheme: light;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-h) + var(--sp-s));
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-base);
    color: var(--c-text);
    background: var(--c-white);
    display: flex;
    flex-direction: column;
  }

  main, #content {
    flex: 1 0 auto;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    color: var(--c-ink);
    text-wrap: balance;
  }

  h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-lg); }
  h4 { font-size: var(--fs-md); }
  h5, h6 { font-size: var(--fs-base); }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--c-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--dur) var(--ease);

    &:hover {
      color: var(--c-accent);
    }
  }

  strong, b {
    font-weight: var(--fw-semibold);
  }

  :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  ::selection {
    background: var(--c-accent);
    color: var(--c-white);
  }

  img {
    font-style: italic;
    color: var(--c-muted);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--c-line);
    margin-block: var(--sp-l);
  }

  address {
    font-style: normal;
  }
}



@layer vendor {
  /* аккордеон и выпадашки от bootstrap.js */
  .collapse:not(.in) { display: none; }
  .collapse.in { display: block; }

  .collapsing {
    position: relative;
    block-size: 0;
    overflow: hidden;
    transition: height 0.3s var(--ease);
  }

  .fade {
    opacity: 0;
    transition: opacity 0.15s linear;

    &.in { opacity: 1; }
  }

  .dropdown-menu { display: none; }
  .open > .dropdown-menu { display: block; }

  /* окно с условиями при оформлении */
  .modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    overflow-y: auto;
    padding: var(--sp-l) var(--gutter);

    &.in { display: block; }
  }

  .modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgb(27 39 48 / 0.5);
  }

  .modal-dialog {
    max-inline-size: 48rem;
    margin: var(--sp-xl) auto;
  }

  .modal-content {
    background: var(--c-white);
    border-radius: var(--r);
    box-shadow: var(--shadow-m);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--sp-m) var(--sp-l);
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-end: 1px solid var(--c-line);

    & .close {
      font-size: var(--fs-xl);
      line-height: 1;
      color: var(--c-muted);
    }
  }

  .modal-open { overflow: hidden; }

  /* подсказки от common.js */
  .tooltip {
    position: absolute;
    z-index: 1070;
    padding: 0.3em 0.6em;
    font-size: var(--fs-xs);
    color: var(--c-white);
    background: var(--c-ink);
    border-radius: var(--r-sm);
    pointer-events: none;

    &.in { opacity: 0.95; }
  }

  .tooltip-arrow { display: none; }

  .pull-left { float: inline-start; }
  .pull-right { float: inline-end; }

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .text-left { text-align: start; }
  .text-right { text-align: end; }
  .text-center { text-align: center; }
  .list-unstyled { padding: 0; list-style: none; }
  .img-responsive { max-inline-size: 100%; block-size: auto; }
  .btn-block { inline-size: 100%; }


  .nav-tabs {
    display: flex;
    gap: var(--sp-m);
    margin: 0 0 var(--sp-s);
    padding: 0;
    list-style: none;
    border-block-end: 1px solid var(--c-line);

    & a {
      display: block;
      padding-block: var(--sp-xs);
      font-size: var(--fs-lg);
      color: var(--c-muted);
      text-decoration: none;
      border-block-end: 2px solid transparent;
    }

    & .active a {
      color: var(--c-ink);
      border-color: var(--c-accent);
    }
  }

  .tab-content > .tab-pane:not(.active) { display: none; }
}


/* ===== раскладка ===== */
@layer layout {
  .container {
    inline-size: 100%;
    max-inline-size: calc(var(--container-max) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .container--narrow {
    max-inline-size: calc(var(--container-narrow) + var(--gutter) * 2);
  }

  /* секция страницы */
  .section {
    padding-block: var(--section-pad, var(--sp-2xl));

    &.section--tight { padding-block: var(--sp-xl); }
    /* крупные секции главной (товары, «Безупречное мастерство», видео): 90px макета */
    &.section--xl { --section-pad: var(--sp-2xl); }
    &.section--flush-top { padding-block-start: 0; }
  }

  .section--light { background: var(--c-surface); }

  .section--brand {
    background: var(--c-brand);
    color: var(--c-on-dark);

    /* «преимущества» главной: подогнано так, чтобы вся секция была 479px, как в макете */
    @media (min-width: 64em) {
      padding-block: max(2.25rem, calc(74 * var(--u))) max(2.25rem, calc(97 * var(--u)));
    }

    & :is(h1, h2, h3, h4) { color: var(--c-white); }
  }

  .section--dark {
    background: var(--c-footer);
    color: var(--c-on-dark);

    & :is(h1, h2, h3, h4) { color: var(--c-white); }
  }

  /* разметка, которая не видна в первом экране */
  .section--lazy {
    content-visibility: auto;
    contain-intrinsic-size: auto 60rem;
  }

  /* простые сетки */
  .grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 18rem)), 1fr));
  }

  .grid--2 { --grid-min: 26rem; }
  .grid--3 { --grid-min: 20rem; }
  .grid--4 { --grid-min: 15rem; }

  @media (min-width: 64em) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  /* две колонки: текст + карточка/картинка */
  .split {
    display: grid;
    gap: var(--sp-xl);
    align-items: center;

    @media (min-width: 64em) {
      grid-template-columns: var(--split, 1fr 1fr);
    }
  }

  .split > *,
  .catalog > *,
  .page-hero > * {
    min-inline-size: 0;
  }

  .split--wide-end { --split: 1.4fr 1fr; }
  .split--wide-start { --split: 1fr 1.4fr; }
  .split--top { align-items: start; }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--sp-s));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--sp-s));
  }
}


/* ===== компоненты ===== */
@layer components {

  /* иконки: <svg class="icon"> из спрайта или inline */
  .icon {
    inline-size: var(--icon-size, var(--icon));
    block-size: var(--icon-size, var(--icon));
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* иконка в круге */
  .icon-badge {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: var(--icon-badge);
    block-size: var(--icon-badge);
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
    --icon-size: calc(var(--icon-badge) * 0.45);

    &.icon-badge--solid {
      background: var(--c-accent);
      color: var(--c-white);
    }

    &.icon-badge--dark {
      background: rgb(255 255 255 / 0.08);
      color: var(--c-accent);
    }
  }

  /* надзаголовок «SAFEINCASE · КАТАЛОГ» */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-accent);
    line-height: 1.3;
  }

  .eyebrow .icon {
    --icon-size: 1.4em;
  }

  /* расстояние от надзаголовка до заголовка — 8px везде (меняется одной переменной).
     Контейнеры ниже сообщают свой gap в --parent-gap, заголовок сдвигается на разницу.
     Если надзаголовок появится в новом контейнере с gap, добавьте его сюда */
  .eyebrow + :is(h1, h2, h3) {
    margin-block-start: calc(var(--eyebrow-gap, 0.5rem) - var(--parent-gap, 0px));
  }

  .section-head { --parent-gap: var(--sp-2xs); }
  .stack { --parent-gap: var(--stack-gap, var(--sp-s)); }
  :is(.page-head, .mheader) { --parent-gap: var(--sp-xs); }
  .page-hero__content { --parent-gap: var(--sp-s); }
  .video-proof__body { --parent-gap: var(--sp-s); }

  .badge .icon {
    --icon-size: 1.2em;
  }

  .text-accent {
    color: var(--c-accent);
  }

  /* список с иконками слева */
  .icon-list {
    display: grid;
    gap: var(--sp-s);
    margin: var(--sp-s) 0 0;
    padding: 0;
    list-style: none;

    & li {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-xs);
      color: var(--c-ink);
    }

    & .icon { color: var(--c-accent); }
  }

  .icon-list__inline {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--fs-sm);

    & .icon { color: var(--c-accent); --icon-size: 1.2em; }
    & a { color: inherit; text-decoration: none; }
  }

  /* текст статьи из админки */
  .prose {
    max-inline-size: 75ch;
    color: var(--c-text);

    & > * + * { margin-block-start: var(--sp-s); }
    & :is(h2, h3, h4) { margin-block-start: var(--sp-l); }
    & :is(ul, ol) { padding-inline-start: 1.25em; }
    & li + li { margin-block-start: var(--sp-3xs); }
    & img { border-radius: var(--r); block-size: auto; }

    & table {
      inline-size: 100%;
      font-size: var(--fs-sm);

      & :is(td, th) {
        padding: var(--sp-2xs) var(--sp-xs);
        border-block-end: 1px solid var(--c-line);
        text-align: start;
      }
    }
  }

  .lead {
    font-size: var(--fs-md);
    color: var(--c-muted);
    max-inline-size: 60ch;

    .section--brand &, .section--dark & { color: var(--c-on-dark); }
  }

  .muted {
    color: var(--c-muted);
  }

  /* шапка секции */
  .section-head {
    display: grid;
    gap: var(--sp-2xs);
    margin-block-end: var(--sp-l);

    & > :is(h1, h2) { max-inline-size: 40ch; }

    &.section-head--row {
      @media (min-width: 64em) {
        grid-template-columns: 1fr auto;
        align-items: end;
        column-gap: var(--sp-xl);

        & .section-head__aside {
          grid-column: 2;
          grid-row: 1 / span 3;
          max-inline-size: 42ch;
          text-align: end;
        }
      }
    }

    &.section-head--center {
      justify-items: center;
      text-align: center;
    }
  }

  .section-head__aside {
    font-size: var(--fs-sm);
    color: var(--c-muted);

    .section--brand & { color: var(--c-on-dark); }
  }

  /* кнопки */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--c-accent);
    --btn-bd: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2xs);
    min-block-size: var(--btn-h);
    padding: 0.4em var(--btn-px, clamp(1rem, 0.7rem + 1.2vw, 2.25rem));
    font-size: var(--btn-fs, var(--fs-base));
    font-weight: var(--fw-medium);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--btn-r, var(--r-sm));
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);

    &:hover { color: var(--btn-fg); }
    &:active { transform: translateY(1px); }

    &:disabled, &.disabled, &[aria-disabled="true"] {
      opacity: 0.5;
      pointer-events: none;
    }

    & .icon { --icon-size: 1.1em; }
  }

  .btn--primary {
    --btn-bg: var(--c-accent);
    --btn-fg: var(--c-white);
    --btn-bd: var(--c-accent);

    &:hover {
      --btn-bg: var(--c-accent-hover);
      --btn-bd: var(--c-accent-hover);
    }
  }

  .btn--outline {
    --btn-fg: var(--c-accent);
    --btn-bd: var(--c-accent);

    &:hover {
      --btn-bg: var(--c-accent);
      --btn-fg: var(--c-white);
    }
  }

  /* «Подробнее» в карточке товара */
  .btn--soft {
    --btn-bg: var(--c-surface-2);
    --btn-fg: var(--c-brand);
    --btn-bd: var(--c-surface-2);

    &:hover {
      --btn-bg: var(--c-accent);
      --btn-fg: var(--c-white);
      --btn-bd: var(--c-accent);
    }
  }

  .btn--sm {
    min-block-size: calc(var(--btn-h) * 0.75);
    font-size: var(--fs-sm);
    padding-inline: var(--sp-s);
  }

  .btn--lg {
    --btn-r: var(--r);
    --btn-px: var(--btn-px-lg, clamp(1rem, 0.7rem + 1.2vw, 2.25rem));
    min-block-size: var(--btn-h-lg, calc(var(--btn-h) * 1.15));
    font-size: var(--fs-md);
  }

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

  /* стрелка после текста кнопки */
  .btn--arrow::after {
    content: "";
    inline-size: 0.9em;
    block-size: 0.9em;
    background: currentColor;
    -webkit-mask: var(--i-arrow-right) center / contain no-repeat;
    mask: var(--i-arrow-right) center / contain no-repeat;
  }

  /* бейдж-пилюля «от 2 дней» */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3xs);
    padding: 0.3em 0.9em;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--c-brand);
    background: var(--c-surface);
    border-radius: var(--r-pill);
    white-space: nowrap;
  }

  .badge--plain {
    padding: 0;
    background: none;
    color: var(--c-brand);
  }

  /* бейдж на тёмном фоне: «Профессиональное качество с 2010 года» */
  .badge--glass {
    color: var(--c-accent);
    background: rgb(27 39 48 / 0.6);
    border: 1px solid rgb(0 183 176 / 0.4);

    @supports (backdrop-filter: blur(4px)) {
      background: rgb(27 39 48 / 0.35);
      backdrop-filter: blur(8px);
    }
  }

  /* чипы и т д*/
  .chip-list {
    display: grid;
    gap: var(--sp-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  .chip {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: var(--sp-s) var(--sp-m);
    font-size: var(--fs-base);
    color: var(--c-ink);
    background: var(--c-surface);
    border-radius: var(--r-sm);

    &::before {
      content: "";
      flex-shrink: 0;
      inline-size: 1em;
      block-size: 1em;
      background: var(--c-accent);
      -webkit-mask: var(--i-check) center / contain no-repeat;
      mask: var(--i-check) center / contain no-repeat;
    }
  }

  /* список с галочками */
  .check-list {
    display: grid;
    gap: var(--sp-xs);
    padding: 0;
    list-style: none;

    & > li {
      display: flex;
      align-items: baseline;
      gap: var(--sp-xs);

      &::before {
        content: "";
        flex-shrink: 0;
        inline-size: 1.15em;
        block-size: 1.15em;
        translate: 0 0.2em;
        border-radius: 50%;
        background: var(--c-accent) var(--i-checkbox) center / 70% no-repeat;
      }
    }
  }

  .check-list--outline > li::before {
    background: var(--c-accent);
    border-radius: 0;
    -webkit-mask: var(--i-check) center / contain no-repeat;
    mask: var(--i-check) center / contain no-repeat;
  }

  /* общая карточка */
  .card {
    container: card / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    padding: var(--card-pad, var(--sp-l));
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    color: var(--c-text);

    & :is(h3, .card__title) {
      font-size: var(--fs-lg);
      color: var(--c-ink);
    }

    & p {
      font-size: var(--fs-sm);
      color: var(--c-muted);
    }

    .section--brand & { border-color: transparent; }
  }

  .card--flat {
    background: var(--c-surface);
    border-color: var(--c-surface);
  }

  .card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-s);
    margin-block-end: var(--sp-xs);
  }

  .card__meta {
    margin-block-start: auto;
    padding-block-start: var(--sp-xs);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-brand);
  }

  /* карточка шага: номер в круге + заголовок в строку */
  .card--step {
    & .card__top {
      justify-content: flex-start;
    }

    & h3 { font-size: var(--fs-xl); }
  }

  /* узкая карточка — меньше отступов */
  @container card (max-width: 22rem) {
    .card__top { margin-block-end: 0; }
    .card__meta { font-size: var(--fs-xs); }
  }

  /* карточки-пилюли на бирюзовой ленте */
  .pill-card {
    display: flex;
    align-items: center;
    gap: var(--sp-s);
    padding: var(--sp-m) var(--sp-l);
    font-size: var(--fs-md);
    color: var(--c-white);
    background: rgb(255 255 255 / 0.06);
    border: 1px solid var(--c-on-dark-line);
    border-radius: var(--r);

    & .icon { color: var(--c-accent); }
  }

  /* номер шага в круге */
  .step-num {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: var(--icon-badge);
    block-size: var(--icon-badge);
    border-radius: 50%;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-white);
    background: var(--c-accent);
    font-variant-numeric: tabular-nums;
  }

  /* вертикальная лента шагов */
  .steps {
    counter-reset: step;
    display: grid;
    gap: var(--steps-gap, var(--sp-l));
    padding: 0;
    list-style: none;
  }

  .steps__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--icon-badge) 1fr;
    column-gap: var(--sp-m);

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-block: var(--icon-badge) calc(var(--steps-gap, var(--sp-l)) * -1);
      inset-inline-start: calc(var(--icon-badge) / 2 - 1px);
      inline-size: 2px;
      background: var(--c-accent-soft);
    }

    & h3 {
      font-size: var(--fs-lg);
      align-self: center;
    }

    & p {
      grid-column: 2;
      font-size: var(--fs-sm);
      color: var(--c-muted);
    }

    & .step-num {
      grid-row: span 2;
      position: relative;
      z-index: 1;
    }
  }

  .steps--compact {
    gap: var(--sp-s);

    & .steps__item:not(:last-child)::after { display: none; }
    & h3 { font-size: var(--fs-md); }
    & p { font-size: var(--fs-xs); }
  }

  /* карточки со стрелками между ними (оплата) */
  .flow {
    --flow-gap: var(--sp-xl);
    display: grid;
    gap: var(--flow-gap);
    padding: 0;
    list-style: none;

    @media (min-width: 64em) {
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
    }
  }

  .flow__item {
    position: relative;

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-inline-start: 50%;
      inset-block-end: calc(var(--flow-gap) / -2);
      inline-size: calc(var(--flow-gap) * 0.45);
      aspect-ratio: 1;
      background: var(--c-line);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      translate: -50% 50%;

      @media (min-width: 64em) {
        inset-block: 50% auto;
        inset-inline: auto calc(var(--flow-gap) / -2);
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        translate: 50% -50%;
      }
    }
  }

  /* строки преимуществ с иконкой */
  .feature-list {
    display: grid;
    padding: 0;
    list-style: none;
  }

  .feature-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--sp-m);
    align-items: center;
    padding-block: var(--sp-m);
    border-block-end: 1px solid var(--c-line);

    & .icon-badge {
      grid-row: span 2;
      --icon-badge: clamp(2.5rem, 2.2rem + 1.2vw, 4rem);
    }

    & h3 { font-size: var(--fs-lg); }

    & p {
      font-size: var(--fs-sm);
      color: var(--c-muted);
    }
  }

  /* три колонки «иконка — заголовок — текст» без рамки */
  .info-grid {
    display: grid;
    gap: var(--sp-xl);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));

    & h3 {
      margin-block: var(--sp-s) var(--sp-xs);
      font-size: var(--fs-lg);
    }

    & p {
      font-size: var(--fs-sm);
      color: var(--c-muted);
    }

    & .icon {
      --icon-size: calc(var(--icon) * 1.3);
      color: var(--c-accent);
    }
  }

  /* цифры «14+ лет в бизнесе» */
  .stats {
    display: grid;
    gap: var(--sp-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  .stat {
    /* по макету: 25px сверху и снизу, 40px по бокам; на узких экранах 20 и 25 */
    padding-block: clamp(1.25rem, 1.1428rem + 0.4762vw, 1.5625rem);
    padding-inline: clamp(1.5625rem, 1.2857rem + 1.2315vw, 2.5rem);
    background: rgb(224 234 236 / 0.5);
    border: 1px solid rgb(26 38 48 / 0.3);
    border-radius: var(--r-lg);
  }

  .stat__value {
    display: block;
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
  }

  .stat__label {
    font-size: var(--fs-sm);
    color: var(--c-muted);
  }

  /* три факта в первом экране: «1–3 дня / подготовка к отправке» */
  .facts {
    display: grid;
    gap: var(--sp-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    margin-block-start: var(--sp-l);
    padding: 0;
    list-style: none;
  }

  .facts__title {
    display: block;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--c-accent);
    line-height: 1.2;
  }

  .facts__text {
    display: block;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--c-muted);
  }

  .facts--small .facts__title {
    font-size: var(--fs-base);
  }

  /* картинка в рамке со скруглением и подписью */
  .media {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--c-surface-2);

    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      aspect-ratio: var(--ratio, 4 / 3);
    }
  }

  .media--wide { --ratio: 16 / 9; }
  .media--square { --ratio: 1; }

  /* подпись поверх фото: «Материалы. Технологии. Опыт.» */
  .media__caption {
    position: absolute;
    inset-inline: var(--sp-m);
    inset-block-end: var(--sp-m);
    max-inline-size: max-content;
    padding: var(--sp-s) var(--sp-m);
    font-size: var(--fs-base);
    color: var(--c-white);
    background: rgb(27 39 48 / 0.82);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    gap: var(--sp-xs);

    @supports (backdrop-filter: blur(4px)) {
      background: rgb(27 39 48 / 0.6);
      backdrop-filter: blur(10px);
    }

    & .icon { color: var(--c-accent); }
  }

  /* бирюзовая лента с призывом и карточкой телефона */
  .cta-band {
    background: var(--c-brand);
    color: var(--c-on-dark);
    padding-block: var(--sp-2xl);

    @media (min-width: 64em) { padding-block: max(2.25rem, calc(70 * var(--u))); }

    & h2 {
      color: var(--c-white);
      font-size: var(--fs-h1);
      line-height: var(--lh-tight);
    }

    & p {
      font-size: var(--fs-md);
      max-inline-size: 52ch;
    }

    & .btn--outline:not(:hover) { --btn-fg: var(--c-accent); }
  }

  .cta-band__text {
    display: grid;
    gap: var(--sp-s);
    justify-items: start;

    & .btn { margin-block-start: var(--sp-s); }
  }

  /* белая карточка «Позвоните нам» */
  .contact-card {
    container: contact-card / inline-size;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-xs) var(--sp-m);
    padding: var(--sp-l) var(--sp-xl);
    background: var(--c-white);
    color: var(--c-text);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-m);
  }

  .contact-card__icon {
    color: var(--c-accent);
    --icon-size: calc(var(--icon) * 1.4);
  }

  .contact-card__note--muted {
    font-weight: var(--fw-regular);
    color: var(--c-muted);
  }

  .contact-card__note {
    align-self: center;
    justify-self: end;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--c-brand);
  }

  .contact-card__label {
    grid-column: 1 / -1;
    margin-block-start: var(--sp-s);
    font-size: var(--fs-xs);
    color: var(--c-muted);
  }

  .contact-card__phone {
    grid-column: 1 / -1;
    font-family: var(--font-heading);
    font-size: var(--fs-phone);
    font-weight: var(--fw-semibold);
    line-height: 1.15;
    color: var(--c-ink);
    text-decoration: none;
    font-variant-numeric: tabular-nums;

    &:hover { color: var(--c-accent); }
  }

  .contact-card--accent-phone .contact-card__phone {
    color: var(--c-brand);
  }

  .contact-card__footer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-xs) var(--sp-m);
    margin-block-start: var(--sp-s);
    font-size: var(--fs-sm);

    & a {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2xs);
      color: var(--c-ink);
      text-decoration: none;

      &:hover { color: var(--c-accent); }
    }

    & .icon { color: var(--c-accent); --icon-size: 1.1em; }
  }

  @container contact-card (max-width: 26rem) {
    .contact-card__note {
      grid-column: 1 / -1;
      justify-self: start;
    }

    .contact-card__footer {
      flex-direction: column;
    }
  }

  /* десктоп: лента 500 высотой (отступы 70 + блок 360), текст 1350 слева, карточка 930 справа */
  .cta-band .split {
    @media (min-width: 64em) {
      --split: minmax(0, 1350fr) minmax(0, 930fr);
      column-gap: max(2rem, calc(80 * var(--u)));
      align-items: stretch;
      min-block-size: max(18rem, calc(360 * var(--u)));
    }
  }

  .cta-band__text {
    @media (min-width: 64em) {
      align-content: space-between;
      gap: var(--sp-m);
    }

    & .btn { margin-block-start: 0; }
  }

  .cta-band__head {
    display: grid;
    gap: max(0.5rem, calc(16 * var(--u)));
    --parent-gap: max(0.5rem, calc(16 * var(--u)));
    --eyebrow-gap: max(0.5rem, calc(16 * var(--u)));

    & h2 {
      font-family: var(--font-sans);
      font-size: max(2rem, calc(56 * var(--u)));
      font-weight: var(--fw-medium);
      line-height: 1.12;
    }
  }

  .cta-band__text > p {
    font-size: var(--fs-base);
    font-weight: 300;
    line-height: 1.5;
    color: var(--c-on-dark);
    max-inline-size: min(100%, max(30rem, calc(1100 * var(--u))));
  }

  /* карточка: сверху иконка и пометка, в середине телефон, снизу почта и часы */
  .contact-card {
    padding: max(1.25rem, calc(42 * var(--u)));
    box-shadow: none;

    @media (min-width: 64em) { align-content: space-between; }

    & .icon-badge {
      --icon-badge: max(3.25rem, calc(70 * var(--u)));
      --icon-size: max(1.5rem, calc(34 * var(--u)));
    }
  }

  .contact-card__main {
    grid-column: 1 / -1;
    display: grid;
    gap: max(0.375rem, calc(10 * var(--u)));
    margin-block: var(--sp-m);

    & .contact-card__label { margin: 0; }

    & .contact-card__phone {
      font-family: var(--font-sans);
      font-size: max(1.5rem, calc(42 * var(--u)));
      font-weight: var(--fw-bold);
      line-height: 1.2;
    }
  }

  .contact-card__note { font-size: var(--fs-xs); }

  .contact-card__footer {
    margin-block-start: 0;
    font-size: var(--fs-sm);

    & .icon { --icon-size: max(1.125rem, calc(24 * var(--u))); }
  }

  /* формы */
  .form {
    display: grid;
    gap: var(--sp-m);
  }

  .form__row {
    display: grid;
    gap: var(--sp-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }

  .form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-s) var(--sp-m);
  }

  .form__hint {
    font-size: var(--fs-xs);
    color: var(--c-muted);
  }

  .field {
    display: grid;
    gap: var(--sp-2xs);

    & > label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-semibold);
      color: var(--c-ink);
    }

    &.required > label::after {
      content: " *";
    }
  }

  /* поля ввода, в т.ч. ocStore .form-control */
  :is(.input, .form-control),
  .field :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
    inline-size: 100%;
    min-block-size: var(--input-h);
    padding: 0.5em 1em;
    font-size: var(--fs-base);
    line-height: 1.4;
    color: var(--c-ink);
    background-color: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);

    &::placeholder {
      color: var(--c-muted);
      opacity: 1;
    }

    &:hover { border-color: #c8d5d9; }

    &:focus {
      outline: none;
      border-color: var(--c-accent);
      box-shadow: 0 0 0 3px rgb(0 183 176 / 0.18);
    }

    &:user-invalid {
      border-color: var(--c-danger);
    }
  }

  textarea:is(.input, .form-control),
  .field textarea {
    min-block-size: calc(var(--input-h) * 2.2);
    resize: vertical;
    field-sizing: content;
  }

  select:is(.input, .form-control),
  .field select {
    appearance: none;
    padding-inline-end: 2.5em;
    background-image: var(--i-select);
    background-repeat: no-repeat;
    background-position: right 0.8em center;
    background-size: 1.1em;
    cursor: pointer;
  }

  /* белые поля на светлой карточке */
  .input--white,
  .form--white :is(.input, .form-control, input:not([type="checkbox"], [type="radio"]), select, textarea) {
    background-color: var(--c-white);
  }

  /* чекбоксы и радио */
  .check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-xs);
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--c-muted);
    cursor: pointer;

    & a { color: inherit; }
  }

  :is(.check, .checkbox, .radio) input:is([type="checkbox"], [type="radio"]),
  input[type="checkbox"].check__input {
    appearance: none;
    flex-shrink: 0;
    inline-size: 1.15em;
    block-size: 1.15em;
    margin: 0.15em 0 0;
    border: 1.5px solid var(--c-accent);
    border-radius: 0.25em;
    background: var(--c-white) center / 80% no-repeat;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);

    &:checked {
      background-color: var(--c-accent);
      background-image: var(--i-checkbox);
    }
  }

  :is(.check, .radio) input[type="radio"] {
    border-radius: 50%;

    &:checked {
      background-image: none;
      background-color: var(--c-white);
      box-shadow: inset 0 0 0 0.22em var(--c-white), inset 0 0 0 1em var(--c-accent);
    }
  }

  /* хлебные крошки (ocStore .breadcrumb) */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3xs) var(--sp-xs);
    margin: 0;
    padding: var(--sp-m) 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--c-muted);

    & li {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-xs);
    }

    & li + li::before {
      content: ">";
      color: var(--c-muted);
    }

    & a {
      color: var(--c-muted);
      text-decoration: none;

      &:hover { color: var(--c-accent); }
    }

    /* домик вместо font-awesome */
    & li:first-child a {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-2xs);

      &::before {
        content: "";
        inline-size: 1.1em;
        block-size: 1.1em;
        background: var(--c-accent);
        -webkit-mask: var(--i-home) center / contain no-repeat;
        mask: var(--i-home) center / contain no-repeat;
      }

      & .fa { display: none; }
    }

    & li:last-child { color: var(--c-text); }
  }

  /* заголовок страницы (ocStore .mheader) */
  :is(.page-head, .mheader) {
    display: grid;
    gap: var(--sp-xs);
    padding-block: var(--sp-xs) var(--sp-l);

    & h1 { max-inline-size: 28ch; }

    & p:not(.eyebrow) {
      font-size: var(--fs-md);
      color: var(--c-muted);
      max-inline-size: 70ch;
    }
  }

  /* пагинация (ocStore .pagination) */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2xs);
    margin: 0;
    padding: 0;
    list-style: none;

    & :is(a, span) {
      display: inline-grid;
      place-items: center;
      min-inline-size: var(--btn-h);
      block-size: var(--btn-h);
      padding-inline: var(--sp-xs);
      font-size: var(--fs-sm);
      color: var(--c-ink);
      text-decoration: none;
      background: var(--c-white);
      border: 1px solid var(--c-line);
      border-radius: var(--r-sm);
      transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }

    & a:hover {
      color: var(--c-accent);
      border-color: var(--c-accent);
    }

    & .active :is(a, span) {
      color: var(--c-white);
      background: var(--c-accent);
      border-color: var(--c-accent);
    }

    & .disabled :is(a, span) {
      color: var(--c-muted);
      background: var(--c-surface-2);
      pointer-events: none;
    }
  }

  /* уведомления */
  .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-xs);
    padding: var(--sp-s) var(--sp-m);
    padding-inline-end: calc(var(--sp-m) + 1.5em);
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-ink);
    margin-block-end: var(--sp-m);

    & a { font-weight: var(--fw-semibold); }

    & .close {
      position: absolute;
      inset-block-start: var(--sp-s);
      inset-inline-end: var(--sp-s);
      inline-size: 1.2em;
      block-size: 1.2em;
      font-size: 0;
      background: currentColor;
      opacity: 0.6;
      -webkit-mask: var(--i-close) center / contain no-repeat;
      mask: var(--i-close) center / contain no-repeat;

      &:hover { opacity: 1; }
    }

    & .fa { display: none; }
  }

  .alert-success {
    border-color: rgb(0 183 176 / 0.4);
    background: var(--c-accent-soft);
  }

  :is(.alert-danger, .alert-warning) {
    border-color: rgb(214 69 69 / 0.35);
    background: #fdf0f0;
    color: #8e2a2a;
  }

  /* всплывающее сообщение «Товар добавлен в корзину» */
  .alert-dismissible {
    position: fixed;
    z-index: 60;
    inset-block-end: var(--sp-m);
    inset-inline-start: var(--sp-m);
    max-inline-size: min(32rem, calc(100% - var(--sp-m) * 2));
    margin: 0;
    box-shadow: var(--shadow-m);
    animation: toast-in 0.3s var(--ease);
  }

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

  /* пустое состояние категории */
  .empty-state {
    display: grid;
    justify-items: center;
    gap: var(--sp-s);
    padding-block: var(--sp-2xl);
    text-align: center;

    & .icon {
      --icon-size: clamp(4rem, 3rem + 4vw, 8.5rem);
      color: var(--c-accent);
      stroke-width: 1.2;
      margin-block-end: var(--sp-m);
    }

    & h2 { font-size: var(--fs-h2); }

    & p {
      font-size: var(--fs-md);
      color: var(--c-muted);
      max-inline-size: 90ch;
    }

    & .cluster {
      justify-content: center;
      margin-block-start: var(--sp-m);
    }
  }

  /* частые вопросы */
  /* частые вопросы: на десктопе 3 колонки, карточки как в макете (700px при ширине 2560) */
  .faq {
    display: grid;
    gap: var(--sp-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));

    @media (min-width: 64em) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: calc(126 * var(--u));
      row-gap: var(--sp-m);                                     /* 30 */
    }
  }

  .faq__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);                                           /* 20 */
    padding: var(--sp-m) var(--sp-l);                           /* 30 / 40 */
    background: rgb(255 255 255 / 0.51);
    border: 1px solid var(--c-accent);
    border-radius: var(--r);

    @media (min-width: 64em) { min-block-size: calc(350 * var(--u)); }

    & :is(h3, summary) {
      padding-block: var(--sp-2xs);                             /* 10 */
      font-family: var(--font-sans);
      font-size: var(--fs-base);                                /* 24 → 20 */
      font-weight: var(--fw-regular);
      line-height: 1.3;
      color: var(--c-ink);
    }

    & p {
      padding-block-start: max(1rem, calc(24 * var(--u)));
      font-size: var(--fs-sm);                                  /* 20 → 17 */
      font-weight: 300;
      line-height: 1.3;
      color: var(--c-ink);
      border-block-start: 1px solid rgb(24 93 112 / 0.2);
    }
  }

  .section--faq {
    padding-block-start: var(--sp-xl);                          /* 64 */
    padding-block-end: max(2.5rem, calc(161 * var(--u)));      /* в макете под карточками свободное место */

    & .section-head { margin-block-end: calc(50 * var(--u)); }
  }

  /* горизонтальный слайдер на scroll-snap, работает без JS */
  .slider {
    position: relative;
  }

  .slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--slide-w, clamp(14rem, 70%, 26rem));
    gap: var(--sp-m);
    margin: 0;
    padding: var(--sp-2xs) 0 var(--sp-m);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--c-accent) transparent;

    & > * { scroll-snap-align: start; }

    @media (min-width: 48em) { --slide-w: calc((100% - var(--sp-m) * 2) / 3); }
    @media (min-width: 75em) { --slide-w: calc((100% - var(--sp-m) * 4) / 5); }
  }

  /* стрелки для JS-версии слайдера */
  .slider__nav {
    display: flex;
    gap: var(--sp-xs);
  }

  .slider__btn {
    display: grid;
    place-items: center;
    inline-size: var(--btn-h);
    block-size: var(--btn-h);
    border: 1.5px solid var(--c-accent);
    border-radius: 50%;
    color: var(--c-accent);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

    &::before {
      content: "";
      inline-size: calc(var(--btn-h) * 0.4);
      block-size: calc(var(--btn-h) * 0.4);
      background: currentColor;
      -webkit-mask: var(--i-chevron-right) center / contain no-repeat;
      mask: var(--i-chevron-right) center / contain no-repeat;
    }

    &.slider__btn--prev::before { scale: -1 1; }

    &:hover {
      background: var(--c-accent);
      color: var(--c-white);
    }
  }

  .slider__dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-2xs);
    margin-block-start: var(--sp-s);
    padding: 0;
    list-style: none;

    & button {
      inline-size: 0.75rem;
      block-size: 0.75rem;
      border-radius: 50%;
      background: var(--c-line);

      &[aria-current="true"] { background: var(--c-accent); }
    }
  }

  /* нативные точки и стрелки в новых браузерах, без JS */
  @supports selector(::scroll-marker) {
    .slider--native {
      & .slider__nav, & .slider__dots { display: none; }

      & .slider__track {
        scroll-marker-group: after;

        &::scroll-marker-group {
          display: flex;
          justify-content: center;
          gap: var(--sp-2xs);
          margin-block-start: var(--sp-s);
        }

        & > *::scroll-marker {
          content: "";
          inline-size: 0.75rem;
          block-size: 0.75rem;
          border-radius: 50%;
          background: var(--c-line);
        }

        & > *::scroll-marker:target-current {
          background: var(--c-accent);
        }
      }
    }
  }

  /* карточка категории в слайдере на главной */
  .category-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
    background: var(--c-white);
    border-radius: var(--r);
    box-shadow: var(--shadow-s);
    color: var(--c-ink);
    text-decoration: none;
    transition: box-shadow var(--dur) var(--ease), translate var(--dur) var(--ease);

    & img {
      inline-size: 100%;
      aspect-ratio: 3 / 2;
      object-fit: cover;
      background: var(--c-surface-2);
    }

    & span {
      padding: var(--sp-s) var(--sp-m) var(--sp-m);
      font-size: var(--fs-md);
      line-height: 1.3;
    }

    &:hover {
      color: var(--c-ink);
      box-shadow: var(--shadow-m);
      translate: 0 -2px;
    }
  }

  /* строка брендов через точку */
  .brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3xs) var(--sp-xs);
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--c-muted);

    & li + li::before {
      content: "•";
      margin-inline-end: var(--sp-xs);
      color: var(--c-accent);
    }
  }

  /* таблица с горизонтальной прокруткой */
  .table-responsive {
    container: table / inline-size;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ===== шапка ===== */
@layer header {

  .skip-link {
    position: absolute;
    z-index: 100;
    inset-inline-start: var(--sp-s);
    inset-block-start: -10rem;
    padding: var(--sp-xs) var(--sp-s);
    background: var(--c-accent);
    color: var(--c-white);
    border-radius: var(--r-sm);

    &:focus { inset-block-start: var(--sp-s); }
  }

  /* ===== шапка =====
     Три раскладки, как в макете:
       до 48em     — телефон (390): логотип, корзина и бургер, второй строкой телефон и кнопка
       48em–80em   — планшет (768): логотип, телефон, кнопка и корзина, ниже строка меню
       от 80em     — десктоп (2560): всё в одну строку, размеры растут вместе с экраном (--u) */

  /* иконки шапки: контуры из макета, рамка 40×40 */
  :root {
    --i-hdr-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 40 40' fill='none' stroke='%23000' stroke-width='3.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.33H30L26.67 15H7.29M28.33 21.67H8.33L5 0H0'/%3E%3Ccircle cx='8.33' cy='28.33' r='1.67'/%3E%3Ccircle cx='26.67' cy='28.33' r='1.67'/%3E%3C/svg%3E");
    --i-hdr-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 40 40' fill='none' stroke='%23000' stroke-width='3.33' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 4.17C30 18.43 18.43 30 4.17 30c-.64 0-1.28-.02-1.91-.07-.73-.05-1.09-.08-1.42-.27-.28-.16-.54-.44-.67-.73C0 28.6 0 28.2 0 27.4v-4.7c0-.67 0-1.01.11-1.3.1-.25.26-.48.46-.66.23-.2.55-.32 1.18-.55l5.34-1.94c.74-.27 1.1-.4 1.45-.38.31.02.6.13.86.3.29.2.49.54.89 1.21l1.37 2.28c4.42-2 8-5.58 10-10l-2.28-1.37c-.67-.4-1.01-.6-1.21-.89a1.6 1.6 0 0 1-.3-.86c-.02-.35.11-.72.38-1.45l1.94-5.34c.23-.63.35-.95.55-1.18.18-.2.4-.36.66-.46.29-.11.63-.11 1.3-.11h4.7c.8 0 1.2 0 1.54.17.29.14.55.4.7.67.2.33.23.7.27 1.42.05.63.07 1.27.07 1.91Z'/%3E%3C/svg%3E");
    --i-hdr-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -13 40 40' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0H16M0 7H16M0 14H16'/%3E%3C/svg%3E");
    --i-hdr-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 23 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='butt' stroke-linejoin='miter'%3E%3Cpath d='M0 0 9.5 9 19 0'/%3E%3C/svg%3E");

    /* высота шапки целиком: нужна для липких блоков и якорей */
    --header-h: 8.5rem;                                         /* телефон: 136 */
  }

  @media (min-width: 48em) { :root { --header-h: 8.125rem; } }   /* планшет: 130 */
  @media (min-width: 80em) { :root { --header-h: max(5.125rem, calc(115 * var(--u))); } }

  /* --- тёмная полоса над шапкой --- */
  .topbar {
    background: var(--c-brand);
    color: var(--c-white);
    font-size: 0.75rem;                                           /* 12 на телефоне и планшете */
  }

  .topbar__inner {
    display: flex;
    flex-wrap: wrap;
    padding-block: 0.5625rem;                                     /* 9 */
    padding-inline: 1.25rem;                                      /* поля 20 на телефоне */
    min-block-size: 0;

    @media (min-width: 48em) { padding-inline: 2rem; }           /* поля 32 на планшете */
  }

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

  /* адрес: на планшете своей строкой, на телефоне скрыт */
  .topbar__group:first-child {
    display: none;
    margin-block-end: 0.375rem;

    @media (min-width: 48em) { display: flex; }
  }

  .topbar__item {
    display: inline-flex;
    align-items: center;
    gap: max(0.25rem, calc(6 * var(--u)));
    color: var(--c-white);
    line-height: 1.3334;                                          /* 16 при 12 */
    text-decoration: none;
    white-space: nowrap;

    & .icon {
      display: none;                                              /* иконки только на десктопе */
      --icon-size: max(1.125rem, calc(25 * var(--u)));
      color: var(--c-accent);
    }
  }

  .topbar__group:first-child .topbar__item { line-height: 1.5; }

  a.topbar__item:hover { color: var(--c-accent); }

  @media (min-width: 80em) {
    .topbar { font-size: max(0.75rem, calc(16 * var(--u))); }

    .topbar__inner {
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-m);
      padding-block: 0;
      padding-inline: var(--gutter);
      min-block-size: var(--topbar-h);
    }

    .topbar__group,
    .topbar__group:first-child {
      flex: 0 1 auto;
      margin: 0;
      gap: max(1rem, calc(34 * var(--u)));
    }

    .topbar__item { line-height: 1.3; }
    .topbar__group:first-child .topbar__item { line-height: 1.3; }
    .topbar__item .icon { display: inline-block; }
  }

  /* --- основная шапка, липкая --- */
  .site-header {
    position: relative;                                           /* на телефоне шапка высокая, поэтому не липнет */
    z-index: 50;
    background: rgb(255 255 255 / 0.97);

    @media (min-width: 48em) {
      position: sticky;
      inset-block-start: 0;
    }
  }

  /* линия под шапкой: рисуем поверх, чтобы не добавлять высоты (в макете она внутри 130 и 115) */
  .site-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    block-size: 1px;                                              /* планшет: 1px */
    background: var(--c-line);
    pointer-events: none;

    @media (max-width: 47.99em) { display: none; }                /* на телефоне линии нет */
    @media (min-width: 80em) { block-size: max(1px, calc(2 * var(--u))); }   /* десктоп: 2px */
  }

  /* телефон: сетка из двух колонок. Строка 1 — логотип и значки, строка 2 — телефон и кнопка */
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;                                                    /* 16 */
    padding-block: 1rem 0.75rem;                                  /* 16 сверху, 12 снизу */
    padding-inline: 1.25rem;
    min-block-size: 0;

    & > .logo { grid-area: 1 / 1; }
    & > .site-header__icons { grid-area: 1 / 2; }

    /* вторая строка: телефон тянется, кнопка 160 справа */
    & > .site-header__actions {
      grid-area: 2 / 1 / 3 / 3;
      display: flex;
      align-items: center;
      gap: 1rem;

      & > .header-phone { flex: 1 1 0; }
    }
  }

  /* планшет: логотип, телефон, кнопка и корзина разложены по ширине, меню — строкой ниже */
  @media (min-width: 48em) {
    .site-header__inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-block: 1rem 0;
      padding-inline: 2rem;                                       /* поля 32 */

      & > .site-header__actions { display: contents; }
      & > .site-header__actions > .header-phone { flex: 0 0 auto; }
    }
  }

  /* десктоп: одна строка. Промежутки между блоками — пружины в пропорциях макета: 424 / 213 / 50 / 50 */
  @media (min-width: 80em) {
    .site-header__inner {
      display: grid;
      grid-template-columns:
        auto minmax(1rem, 424fr)
        auto minmax(1rem, 213fr)
        auto minmax(0.75rem, 50fr)
        auto minmax(0.75rem, 50fr)
        auto;
      flex-wrap: nowrap;
      padding-block: 0;
      padding-inline: var(--gutter);
      min-block-size: var(--header-h);
      gap: 0;

      & > .logo { grid-area: 1 / 1; }
      & > .main-nav { grid-area: 1 / 3; }
      & > .site-header__actions > .header-phone { grid-area: 1 / 5; }
      & > .site-header__actions > .site-header__cta { grid-area: 1 / 7; }
      & > .site-header__icons { grid-area: 1 / 9; }
    }
  }

  /* логотип (#logo в ocStore): тёмные буквы = color, «IN» и полосы — свои переменные */
  #logo,
  .logo {
    flex-shrink: 0;
    color: var(--c-ink);

    & a { display: block; color: inherit; }
  }

  .logo__svg {
    display: block;
    block-size: max(2.5rem, calc(71 * var(--u)));                /* 40 на телефоне и планшете, 71 на макете */
    inline-size: auto;
  }

  .logo__accent { fill: var(--logo-accent, #00bbb4); }
  .logo__bar { fill: var(--logo-bar, #185d70); }

  /* корзина и бургер */
  .site-header__icons {
    display: flex;
    align-items: center;
    gap: 0.75rem;                                                 /* 12 */
    justify-self: end;
  }

  /* телефон: на телефоне и планшете только текст, на десктопе с иконкой */
  .header-phone {
    display: inline-flex;
    align-items: center;
    gap: max(0.5rem, calc(20 * var(--u)));
    font-size: 0.875rem;                                          /* 14 на телефоне */
    font-weight: var(--fw-bold);
    line-height: 1.2857;
    color: var(--c-brand);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;

    &:hover { color: var(--c-accent); }

    @media (min-width: 48em) {
      font-size: 1rem;                                            /* 16 на планшете */
      line-height: 1.3125;
    }

    @media (min-width: 80em) {
      font-size: max(1rem, calc(24 * var(--u)));
      font-weight: 900;                                           /* Black в макете */
      line-height: 1.2917;
    }
  }

  .header-phone__icon {
    display: none;
    flex-shrink: 0;
    inline-size: 2.5rem;                                          /* рамка иконки 40 */
    block-size: 2.5rem;
    background: var(--c-ink);
    -webkit-mask: var(--i-hdr-phone) center / contain no-repeat;
    mask: var(--i-hdr-phone) center / contain no-repeat;
    scale: -1 1;                                                  /* трубка отзеркалена */

    @media (min-width: 80em) { display: block; }
  }

  /* кнопка «Заказать кейс» */
  .site-header__cta {
    inline-size: 10rem;                                           /* 160 на телефоне */
    min-block-size: 3.125rem;                                     /* 50 */
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: var(--fw-medium);
    line-height: 1.35;
    white-space: nowrap;
    border-width: 0;
    border-radius: 0.625rem;                                      /* 10 */

    @media (min-width: 48em) { inline-size: auto; }

    @media (min-width: 80em) {
      min-block-size: max(3.125rem, calc(61 * var(--u)));
      padding: max(0.75rem, calc(15 * var(--u))) max(1rem, calc(25 * var(--u)));
      font-size: max(1rem, calc(24 * var(--u)));
      line-height: 1.2917;
      border-radius: max(0.625rem, calc(15 * var(--u)));
    }
  }

  /* кнопка-бургер, видна только на телефоне */
  .menu-toggle {
    display: grid;
    inline-size: 2.5rem;                                          /* 40 */
    block-size: 2.5rem;
    place-items: center;
    color: var(--c-ink);

    &::before {
      content: "";
      inline-size: 100%;
      block-size: 100%;
      background: currentColor;
      -webkit-mask: var(--i-hdr-burger) center / contain no-repeat;
      mask: var(--i-hdr-burger) center / contain no-repeat;
    }

    &[aria-expanded="true"]::before {
      -webkit-mask: var(--i-close) center / 1.5rem no-repeat;
      mask: var(--i-close) center / 1.5rem no-repeat;
    }

    @media (min-width: 48em) { display: none; }
  }

  /* --- навигация (#menu) --- */
  #menu,
  .main-nav { margin: 0; }

  .nav__list {
    --nav-fs: 0.9375rem;                                          /* 15 на планшете */
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav__link {
    display: inline-flex;
    align-items: center;
    gap: max(0.25rem, calc(8 * var(--u)));
    padding-block: 0.875rem;                                      /* 14: строка меню 48 */
    font-size: var(--nav-fs);
    font-weight: var(--fw-medium);
    line-height: 1.3334;                                          /* 20 при 15 */
    color: var(--c-ink);
    text-align: start;
    text-decoration: none;
    white-space: nowrap;

    &:hover,
    &[aria-current="page"] {
      color: var(--c-accent);
    }

    &[aria-current="page"] {
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 0.25em;
    }
  }

  /* «Кейсы и кофры»: ссылки нет, это кнопка, она только открывает подменю */
  button.nav__link {
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;                                   /* тап пальцем без задержки */
    -webkit-tap-highlight-color: transparent;
  }

  /* пункт с выпадающим списком */
  .nav__item--dropdown,
  .nav-item--dropdown {
    position: relative;

    /* зелёный и подчёркнутый — только в каталоге; при наведении и открытии просто зелёный */
    &.is-active > .nav__toggle {
      color: var(--c-accent);
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-underline-offset: 0.25em;
    }

    & > .nav__toggle:is(:hover, [aria-expanded="true"]) { color: var(--c-accent); }

    /* стрелка вниз, как в макете: на десктопе */
    & > .nav__toggle::after {
      content: "";
      display: none;
      inline-size: max(0.75rem, calc(21 * var(--u)));
      block-size: max(0.4rem, calc(11 * var(--u)));
      background: currentColor;
      -webkit-mask: var(--i-hdr-chevron) center / contain no-repeat;
      mask: var(--i-hdr-chevron) center / contain no-repeat;
      transition: rotate var(--dur) var(--ease);
    }
  }

  .nav__dropdown {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 40;
    inline-size: max-content;
    min-inline-size: max(20rem, calc(484 * var(--u)));
    max-inline-size: min(36rem, 90vw);
    padding: var(--sp-s) var(--sp-m) var(--sp-m);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-block-start: 0;                                        /* верхняя граница — линия шапки */
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--shadow-m);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);

    & ul {
      margin: 0;
      padding: 0 0 0 var(--sp-s);
      list-style: none;
    }

    & a {
      display: block;
      padding-block: var(--sp-2xs);
      font-size: max(0.875rem, calc(14 * var(--u)));              /* пункты подменю: 14 в макете */
      color: var(--c-ink);
      text-decoration: none;
      border-block-end: 1px solid var(--c-line);

      &:hover { color: var(--c-accent); }
    }

    & .see-all,
    & .nav__dropdown-all {
      font-weight: var(--fw-semibold);
      padding-inline-start: 0;
    }
  }

  /* открытие: клик по кнопке (класс .open ставит js), наведение мышью, фокус с клавиатуры */
  @media (min-width: 48em) {
    :is(.nav__item--dropdown, .nav-item--dropdown):is(.open, :has(:focus-visible)) > .nav__dropdown {
      opacity: 1;
      visibility: visible;
    }

    :is(.nav__item--dropdown, .nav-item--dropdown).open > .nav__toggle::after {
      rotate: 180deg;
    }
  }

  @media (min-width: 48em) and (hover: hover) {
    :is(.nav__item--dropdown, .nav-item--dropdown):hover > .nav__dropdown {
      opacity: 1;
      visibility: visible;
    }

    :is(.nav__item--dropdown, .nav-item--dropdown):hover > .nav__toggle::after {
      rotate: 180deg;
    }
  }

  /* крестик внутри мобильного меню */
  .nav__close {
    display: grid;
    place-items: center;
    inline-size: var(--btn-h);
    block-size: var(--btn-h);
    margin: 0 0 var(--sp-s) auto;
    color: var(--c-ink);

    &::before {
      content: "";
      inline-size: calc(var(--btn-h) * 0.55);
      block-size: calc(var(--btn-h) * 0.55);
      background: currentColor;
      -webkit-mask: var(--i-close) center / contain no-repeat;
      mask: var(--i-close) center / contain no-repeat;
    }
  }

  /* планшет: меню отдельной строкой во всю ширину, пункты разложены по краям */
  @media (min-width: 48em) {
    #menu,
    .main-nav {
      position: static;
      display: block;
      order: 9;
      flex: 1 0 100%;
      inset: auto;
      inline-size: auto;
      block-size: auto;
      padding: 0;
      overflow: visible;
      color: inherit;
      background: none;
      border: 0;
      box-shadow: none;
    }

    .nav__list { justify-content: space-between; }

    .nav__mobile-extra,
    .nav__close { display: none; }
  }

  /* десктоп: меню в строке с логотипом, размеры макета */
  @media (min-width: 80em) {
    #menu,
    .main-nav { order: 0; flex: 0 1 auto; }

    .nav__list {
      --nav-fs: max(1rem, calc(24 * var(--u)));
      justify-content: flex-start;
      gap: max(1rem, calc(43 * var(--u)));
    }

    .nav__link {
      padding-block: 0;
      line-height: 1.2917;                                        /* 31 при 24 */
    }

    .nav__item--dropdown > .nav__toggle::after { display: block; }

    /* пункты растянуты на всю высоту шапки: подменю (top: 100%) начинается ровно по её нижней линии */
    .main-nav { align-self: stretch; }

    .nav__list {
      block-size: 100%;
      align-items: stretch;
    }

    .nav__item {
      display: flex;
      align-items: center;
    }
  }

  /* телефон: меню выезжает справа, <nav id="menu" popover> или класс .is-open от JS */
  @media (max-width: 47.99em) {
    #menu,
    .main-nav {
      position: fixed;
      z-index: 70;
      inset: 0 0 0 auto;
      inline-size: min(26rem, 100%);
      block-size: 100vh;
      block-size: 100dvh;
      max-block-size: none;
      margin: 0;
      padding: var(--sp-m) var(--gutter) var(--sp-xl);
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--c-white);
      border: 0;
      border-inline-start: 1px solid var(--c-line);
      box-shadow: var(--shadow-m);
      display: none;

      &:is(:popover-open, .is-open) {
        display: block;
        animation: menu-in 0.25s var(--ease);
      }

      &::backdrop {
        background: rgb(27 39 48 / 0.4);
      }
    }

    .nav__list {
      --nav-fs: var(--fs-lg);
      flex-direction: column;
      align-items: stretch;
    }

    .nav__link {
      inline-size: 100%;
      padding-block: var(--sp-s);
      border-block-end: 1px solid var(--c-line);
    }

    /* в мобильном меню подкатегории всегда раскрыты, кнопка только заголовок */
    .nav__item--dropdown > .nav__toggle { color: var(--c-ink); }

    .nav__dropdown {
      position: static;
      inline-size: auto;
      min-inline-size: 0;
      max-inline-size: none;
      margin: 0;
      padding: 0 0 var(--sp-s);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      translate: none;
      opacity: 1;
      visibility: visible;

      & ul { padding-inline-start: var(--sp-s); }
    }

    .nav__mobile-extra {
      display: grid;
      gap: var(--sp-s);
      margin-block-start: var(--sp-l);
    }
  }

  @keyframes menu-in {
    from { opacity: 0; translate: 2rem 0; }
  }

  /* мини-корзина (#cart, разметка ocStore common/cart.tpl) */
  #cart {
    position: relative;
    inline-size: auto;
    padding: 2px 8px 0 0;                                         /* общий блок 48×42: бейдж выступает за иконку */

    & > button,
    & > .cart-toggle {
      position: relative;
      display: grid;
      place-items: center;
      inline-size: 2.5rem;                                        /* 40 */
      block-size: 2.5rem;
      min-block-size: 0;
      padding: 0;
      font-size: 0;
      color: var(--c-ink);
      background: none;
      border: 0;

      &::before {
        content: "";
        inline-size: 100%;
        block-size: 100%;
        background: currentColor;
        -webkit-mask: var(--i-hdr-cart) center / contain no-repeat;
        mask: var(--i-hdr-cart) center / contain no-repeat;
      }

      &:hover { color: var(--c-accent); }

      & .fa { display: none; }
    }

    /* счётчик 20×20, цифра Light 16; в языковом файле text_items оставить только число */
    & #cart-total {
      position: absolute;
      inset-block-start: -2px;
      inset-inline-end: -8px;
      display: grid;
      place-items: center;
      min-inline-size: 1.25rem;
      block-size: 1.25rem;
      padding-inline: 0.25rem;
      font-size: 1rem;
      font-weight: var(--fw-light);
      line-height: 1;
      color: var(--c-white);
      background: var(--c-accent);
      border-radius: var(--r-pill);
    }
  }

  /* выпадающая панель корзины */
  #cart > ul,
  #cart-dropdown {
    position: absolute;
    inset-block-start: calc(100% + 1rem);                         /* панель под шапкой: на телефоне чуть ниже значка */
    inset-inline-start: auto;
    inset-inline-end: 0;
    z-index: 40;
    inline-size: min(32.75rem, calc(100vw - var(--gutter) * 2));   /* макет 524 */
    margin: 0;
    padding: 1rem 1rem;

    @media (min-width: 40em) { padding: 1.25rem 1.75rem; }
    list-style: none;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: 0 0 var(--r) var(--r);
    box-shadow: var(--shadow-m);
    font-size: var(--fs-sm);
    display: none;

    @media (min-width: 48em) { inset-block-start: calc(100% + 4.25rem); }   /* ниже строки меню (20 + 48) */
    @media (min-width: 80em) { inset-block-start: calc(100% + (var(--header-h) - 2.625rem) / 2); }

    /* строки товаров: название | количество | сумма | удалить (макет: колонки 250 / 60 / 80 / 20, зазор 10) */
    & .cart-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 3.75rem 5rem 1.25rem;
      align-items: start;
      column-gap: 0.625rem;
      padding-block: 0.625rem;
      padding-inline-end: 1.75rem;                                /* справа отступ 28, как в макете */
      overflow-wrap: anywhere;

      @media (max-width: 39.99em) {
        grid-template-columns: minmax(0, 1fr) 2.25rem 4.75rem 1.25rem;
        column-gap: 0.5rem;
        padding-inline-end: 0;
      }
      font-size: 0.875rem;
      line-height: 1.35;
      color: var(--c-ink);
      border-block-end: 1px solid var(--c-line);

      & small { display: block; color: var(--c-muted); }
    }

    & .cart-row__qty,
    & .cart-row__sum { text-align: end; white-space: nowrap; }

    & .cart-row__sum { font-weight: var(--fw-semibold); }

    /* итого: без линии, сумма в колонке цен */
    & .cart-row--total {
      border: 0;
      font-weight: var(--fw-semibold);

      & .cart-row__sum { grid-column: 3; }
    }

    /* кнопка «удалить» — корзина-иконка 20×20 акцентного цвета */
    & .cart-remove {
      inline-size: 1.25rem;
      block-size: 1.25rem;
      min-block-size: 0;
      padding: 0;
      font-size: 0;
      cursor: pointer;
      background: var(--c-accent);
      border: 0;
      -webkit-mask: var(--i-cart-trash) center / contain no-repeat;
      mask: var(--i-cart-trash) center / contain no-repeat;
      transition: background-color var(--dur) var(--ease);

      &:hover,
      &:focus-visible { background: var(--c-danger); }
    }

    & a {
      color: var(--c-ink);
      text-decoration: none;

      &:hover { color: var(--c-accent); }
    }

    /* кнопки: справа, высота 32, радиус 8, зазор 20, сверху 17 */
    & .cart-buttons {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 0.625rem 1.25rem;
      margin: 0;
      padding-block-start: 1.0625rem;

      & a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        block-size: 2rem;
        padding-inline: 0.9375rem;
        font-size: 0.875rem;
        font-weight: var(--fw-medium);
        line-height: 1;
        color: var(--c-accent);
        border: 1.3px solid var(--c-accent);
        border-radius: 0.5rem;
        transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

        &:hover { background: var(--c-surface); color: var(--c-accent); }

        &:last-child {
          color: var(--c-white);
          background: var(--c-accent);

          &:hover { background: var(--c-brand); color: var(--c-white); }
        }
      }
    }

    /* «В корзине пусто!» */
    & > li > p.text-center {
      padding-block: var(--sp-s);
      color: var(--c-muted);
    }
  }

  #cart:is(.open, :focus-within) > ul,
  #cart:is(.open, :focus-within) #cart-dropdown {
    display: block;
    animation: toast-in 0.2s var(--ease);
  }
}


/* ===== футер ===== */
@layer footer {
  /* ===== подвал =====
     Три раскладки, как в макете:
       до 48em     — телефон (390): всё в одну колонку, каталог одной ссылкой
       48em–80em   — планшет (768): бренд, каталог в две колонки, «Компания» и «Контакты» рядом
       от 80em     — десктоп (2560): пять колонок с разделителями, размеры растут вместе с экраном (--u) */
  .site-footer {
    --f-text: #bdc0c3;                                            /* серый текст ссылок */
    --f-line: rgb(224 234 236 / 0.5);                             /* вертикальные разделители */
    --f-rule: #5e6972;                                            /* линия над нижней частью на телефоне и планшете */
    --f-title: 1rem;                                              /* заголовок колонки: 16 на телефоне и планшете */
    --f-link: 0.875rem;                                           /* ссылки: 14 */
    --f-small: 0.75rem;                                           /* мелкий текст: 12 */

    background: var(--c-footer);
    color: var(--f-text);
    font-size: var(--f-link);
    line-height: 1.5;
    content-visibility: auto;
    contain-intrinsic-size: auto 40rem;

    & a {
      color: var(--f-text);
      text-decoration: none;

      &:hover { color: var(--c-accent); }
    }

    @media (min-width: 80em) {
      --f-title: max(1rem, calc(20 * var(--u)));                  /* 20 */
      --f-link: max(0.875rem, calc(16 * var(--u)));               /* 16 */
      --f-small: max(0.75rem, calc(14 * var(--u)));               /* 14 */
      line-height: 1.302;                                         /* «авто» шрифта DM Sans */
    }
  }

  /* поля: 20 на телефоне, 32 на планшете, 100 на десктопе */
  .site-footer > .container {
    padding-inline: 1.25rem;

    @media (min-width: 48em) { padding-inline: 2rem; }
    @media (min-width: 80em) { padding-inline: var(--gutter); }
  }

  /* --- верхняя часть --- */
  .site-footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.75rem;                                             /* 28 */
    padding-block: 2.5rem 2rem;                                   /* 40 сверху, 32 до линии */

    @media (min-width: 48em) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1.5rem;                                         /* 24 */
      row-gap: 1.125rem;                                          /* 18 */
      padding-block: 2.5rem 1.125rem;
    }

    @media (min-width: 80em) {
      grid-template-columns: 441fr 543fr 543fr 413fr 422fr;
      gap: 0;
      padding-block: max(2rem, calc(51 * var(--u))) max(1.5rem, calc(37 * var(--u)));
    }
  }

  .site-footer__col { min-inline-size: 0; }

  /* планшет: бренд на всю ширину, остальные колонки по две */
  @media (min-width: 48em) and (max-width: 79.99em) {
    .site-footer__col:first-child { grid-column: 1 / -1; }
  }

  /* телефон: каталог не показываем, остаётся ссылка «Каталог» в разделе «Разделы» */
  @media (max-width: 47.99em) {
    .site-footer__col--catalog,
    .site-footer__col--continue { display: none; }

    .site-footer__col:first-child { margin-block-end: 0.25rem; }   /* 28 + 4 = 32 до следующего блока */
  }

  /* десктоп: колонки с разделителями */
  @media (min-width: 80em) {
    .site-footer__col {
      min-block-size: calc(298 * var(--u));                       /* высота ряда 298, разделители во всю высоту */
      padding-inline: max(1rem, calc(114.5 * var(--u)));
      border-inline-start: 1px solid var(--f-line);

      &:first-child {
        padding-inline-start: 0;
        border: 0;
      }

      &:last-child { padding-inline-end: 0; }
    }

    /* вторая часть каталога: заголовка нет, но место под него оставлено (в макете на 4 выше первой колонки) */
    .site-footer__col--continue {
      padding-block-start: calc(42 * var(--u));
    }
  }

  /* --- бренд --- */
  .site-footer__logo {
    display: block;
    inline-size: fit-content;
    color: var(--c-white);
  }

  .site-footer__logo .logo__svg {
    block-size: max(2.5rem, calc(71 * var(--u)));                 /* 40 на планшете, 71 на макете */
  }

  .site-footer__tagline {
    margin-block: 1rem;                                           /* 16 */
    font-size: 1rem;                                              /* 16 Regular на телефоне и планшете */
    font-weight: var(--fw-regular);
    line-height: 1.5;
    color: var(--f-text);

    @media (min-width: 80em) {
      margin-block: max(0.75rem, calc(19 * var(--u))) max(1rem, calc(28 * var(--u)));
      font-size: max(1rem, calc(20 * var(--u)));                  /* 20 Light */
      font-weight: var(--fw-light);
      line-height: 1.302;
    }
  }

  /* перенос строки «кейсов / и кофров» только на десктопе */
  .site-footer__br { display: none; }
  @media (min-width: 80em) { .site-footer__br { display: inline; } }

  .site-footer__social {
    display: flex;
    gap: var(--sp-xs);

    & img {
      inline-size: max(2.25rem, calc(51 * var(--u)));             /* 36 → 51 */
      block-size: auto;
    }
  }

  /* --- колонки со ссылками --- */
  .site-footer__title {
    margin-block-end: 0.75rem;                                    /* 12 до списка (на планшете у каталога 16) */
    font-size: var(--f-title);
    font-weight: var(--fw-semibold);
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--c-white);

    @media (min-width: 80em) {
      margin-block-end: max(0.75rem, calc(20 * var(--u)));        /* 20 */
      line-height: 1.302;
    }

    & a { color: inherit; }
  }

  @media (min-width: 48em) and (max-width: 79.99em) {
    .site-footer__col--catalog .site-footer__title { margin-block-end: 1rem; }
  }

  /* «Разделы» на телефоне, «Компания» на планшете и десктопе */
  .site-footer__title-short { text-transform: none; }
  .site-footer__title-full { display: none; }

  @media (min-width: 48em) {
    .site-footer__title-short,
    .site-footer__only-mobile { display: none; }
    .site-footer__title-full { display: inline; }
  }

  .site-footer__list {
    display: grid;
    gap: 0.75rem;                                                 /* 12 */
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--f-link);
    line-height: 1.5;

    @media (min-width: 80em) {
      gap: max(0.5rem, calc(10 * var(--u)));                      /* 10 */
      line-height: 1.302;
    }
  }

  .site-footer__contacts {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--f-link);
    line-height: 1.5;

    & li { display: flex; align-items: center; }
    & address { font-style: normal; }

    /* иконки только на десктопе */
    & .icon { display: none; }

    @media (min-width: 80em) {
      gap: max(0.75rem, calc(20 * var(--u)));                     /* 20 */
      line-height: 1.302;

      & li {
        gap: max(0.5rem, calc(14 * var(--u)));                    /* иконка 25 + 14 до текста */
        min-block-size: max(1.25rem, calc(25 * var(--u)));
      }

      & li:first-child { align-items: flex-start; }               /* адрес в две строки: иконка у первой */

      & .icon {
        display: block;
        flex-shrink: 0;
        --icon-size: max(1.125rem, calc(25 * var(--u)));
        color: var(--c-accent);
      }

      & li:first-child .icon { margin-block-start: calc(3 * var(--u)); }
    }
  }

  /* --- нижняя часть --- */
  .site-footer__bottom {
    display: grid;
    gap: 0.375rem;                                                /* 6 */
    padding-block: 1.125rem 1.3125rem;                            /* 18 до текста, 21 снизу */
    border-block-start: 1px solid var(--f-rule);
    font-size: var(--f-small);
    line-height: 1.5;

    /* на телефоне и планшете сначала юридические строки, копирайт последним */
    & > .site-footer__legal { order: 1; }
    & > .site-footer__copy { order: 2; }

    @media (max-width: 47.99em) {
      padding-block: 2rem 0.9375rem;                              /* 32 до текста, 15 снизу */

      & > .site-footer__copy {
        margin-block-start: 1.25rem;                              /* 20 */
        text-align: center;
      }
    }

    @media (min-width: 48em) and (max-width: 79.99em) {
      row-gap: 1.125rem;                                          /* 18 */
    }

    @media (min-width: 80em) {
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: 0 var(--sp-m);
      padding-block: max(0.75rem, calc(12 * var(--u))) max(0.75rem, calc(12 * var(--u)));
      border-block-start: max(1px, calc(2 * var(--u))) solid var(--f-text);   /* линия 2px, серая */
      line-height: 1.302;

      & > .site-footer__legal { order: 0; }
      & > .site-footer__copy { order: 0; }
    }
  }

  .site-footer__copy {
    margin: 0;
    color: var(--f-text);

    @media (min-width: 80em) { color: var(--c-white); }
  }

  .site-footer__legal {
    display: grid;
    gap: 0.375rem;
    justify-items: start;

    @media (min-width: 80em) {
      gap: max(0.375rem, calc(9 * var(--u)));
      justify-items: end;
      text-align: end;
    }
  }

  .site-footer__disclaimer {
    margin: 0;
    color: var(--f-text);

    @media (min-width: 80em) { color: var(--c-white); }
  }

  /* ссылки на документы: на десктопе в строку через «|», на планшете и телефоне столбиком */
  .site-footer__policies {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;

    @media (min-width: 80em) {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      font-size: var(--f-link);                                   /* 16 */
      line-height: 1.302;

      & li:not(:last-child)::after {
        content: "|";
        margin-inline: 0.4em;
      }
    }
  }
}


/* ===== страницы ===== */
@layer pages {

  /* --- главная: первый экран --- */
  .hero {
    position: relative;
    isolation: isolate;
    color: var(--c-on-dark);
    padding-block: var(--sp-2xl);
    min-block-size: clamp(32rem, 22rem + 30vw, 66rem);
    display: grid;
    align-items: center;

    /* десктоп: высота первого экрана 1043px макета, дальше пропорционально */
    @media (min-width: 64em) { min-block-size: max(32rem, calc(1043 * var(--u))); }
    background-color: var(--c-footer);
    /* фото мастерской с кейсами на столе, тёмное, 2560×1300 */
    background-image: url("/image/hero-home.jpg");
    background-image: image-set(
      url("/image/hero-home.webp") type("image/webp"),
      url("/image/hero-home.jpg") type("image/jpeg")
    );
    background-size: cover;
    background-position: center;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, rgb(20 30 38 / 0.88) 0%, rgb(20 30 38 / 0.65) 45%, rgb(20 30 38 / 0.25) 100%);
    }

    @media (max-width: 47.99em) {
      /* облегчённая картинка для телефонов */
      background-image: url("/image/hero-home-mobile.jpg");
      background-image: image-set(
        url("/image/hero-home-mobile.webp") type("image/webp"),
        url("/image/hero-home-mobile.jpg") type("image/jpeg")
      );

      &::before { background: rgb(20 30 38 / 0.78); }
    }
  }

  .hero__inner {
    display: grid;
    gap: var(--sp-xl);
    align-items: center;

    @media (min-width: 64em) {
      grid-template-columns: 1fr minmax(22rem, 38rem);
    }
  }

  .hero__content {
    display: grid;
    gap: var(--sp-m);
    justify-items: start;
  }

  .hero__title {
    /* 32px на телефоне → ~50px на 1440 → 88px на 2560 */
    font-size: clamp(1.5rem, -0.1875rem + 2.9297vw, 4.5rem);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--c-white);

    & .text-accent { display: block; 
    font-size: calc(4em / 3);
    }
  }

  .hero__text {
      font-size: var(--fs-md);
      font-weight: 200;
      max-inline-size: 55ch;
  }

  .hero .check-list {
    font-size: var(--fs-sm);
    color: var(--c-white);
  }

  .hero .cluster {
    margin-block-start: var(--sp-s);
  }

  /* стеклянная форма «Получите бесплатный расчёт» */
  .hero-form {
    display: grid;
    gap: var(--sp-s);
    padding: var(--sp-l);
    color: var(--c-white);
    background: rgb(26 93 110 / 0.92);
    border: 1px solid rgb(255 255 255 / 0.12);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-m);

    @supports (backdrop-filter: blur(4px)) {
      background: rgb(26 93 110 / 0.72);
      backdrop-filter: blur(14px);
    }

    & h2 {
      font-size: var(--fs-xl);
      color: var(--c-white);
    }

    & > p { font-size: var(--fs-base); }

    & :is(.input, .form-control, input:not([type="checkbox"]), textarea) {
      background: rgb(255 255 255 / 0.14);
      border-color: rgb(255 255 255 / 0.18);
      color: var(--c-white);

      &::placeholder { color: rgb(255 255 255 / 0.75); }

      &:focus { border-color: var(--c-accent); }
    }

    & .check {
      color: rgb(255 255 255 / 0.85);
      font-size: var(--fs-xs);
    }

    & .check input:not(:checked) {
      background-color: transparent;
      border-color: rgb(255 255 255 / 0.7);
    }
  }

  /* --- главная: полоса преимуществ на бирюзовом фоне --- */
  .advantages {
    display: grid;
    gap: var(--sp-l);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));

    & .card {
      --card-pad: var(--sp-l) var(--sp-m);   /* 40 / 30 */
      gap: var(--sp-s);                       /* 20 */
      box-shadow: var(--shadow-s);

      & :is(h3, .card__title) { font-weight: var(--fw-regular); font-family: var(--font-sans); }
      & p { color: var(--c-ink); font-weight: 300; }
    }

    & .icon-badge { margin-block-end: 0; }

    /* на десктопе: 4 карточки по 460px макета, свободное место — между ними */
    @media (min-width: 64em) {
      grid-template-columns: repeat(4, calc(460 * var(--u)));
      justify-content: space-between;
    }
  }

  /* --- главная: «Безупречное мастерство» --- */
  .about-preview {
    & .media { --ratio: 1139 / 766; 
    height: -webkit-fill-available;
    }

    & .lead {
      color: var(--c-ink);
      font-weight: 300;
      max-inline-size: none;
    }

    /* картинка занимает не больше ~46% ширины, остальное — текст */
    &.split, & .split {
      --split: minmax(0, 1139fr) minmax(0, 1180fr);            /* макет: картинка 1139px, текст 1180px */
      column-gap: calc(37 * var(--u));
    }

    & .stats {
      margin-block: var(--sp-l);
      grid-template-columns: repeat(2, minmax(0, 1fr));

      @media (min-width: 64em) {
        gap: calc(50 * var(--u)) calc(70 * var(--u));         /* в макете 50 по вертикали, 70 по горизонтали */
        margin-block: calc(50 * var(--u)) calc(67 * var(--u));
      }
    }
  }

  /* --- главная: «Кейс в деле», два вертикальных видео --- */
  .video-proof {
    /* ширина карточки с видео: 184px на 1024 → 326px на 2560 */
    --video-w: clamp(11.5rem, 5.58rem + 9.245vw, 20.375rem);
    /* поля внутри карточки: 12px на 1024 → 20px на 2560 */
    --video-pad: clamp(0.625rem, 0.4rem + 0.6vw, 1.25rem);
  }

  .video-proof__inner {
    display: grid;
    gap: var(--sp-xl);
    align-items: start;

    @media (min-width: 64em) {
      /* слева текст, справа две карточки с видео */
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .video-proof__body {
    display: grid;
    gap: var(--sp-s);
    justify-items: start;
    min-inline-size: 0;

    & p:not(.eyebrow) { color: var(--c-text); }
  }

  .video-proof__subtitle {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    margin-block-end: calc(var(--sp-xs) * -1);
  }

  /* список с точками «Что проверяем» */
  .video-proof__list {
    display: grid;
    gap: var(--sp-xs);
    margin: 0;
    margin-top: 10px;
    padding: 0;
    list-style: none;
    font-size: var(--fs-sm);

    & li {
      display: flex;
      align-items: baseline;
      gap: var(--sp-xs);
      color: var(--c-ink);

      &::before {
        content: "";
        flex-shrink: 0;
        inline-size: 0.6em;
        block-size: 0.6em;
        border-radius: 50%;
        background: var(--c-accent);
      }
    }
  }

  /* призыв внизу: вопрос, пояснение и кнопка */
  .video-proof__cta {
    display: grid;
    gap: var(--sp-3xs);
    justify-items: start;
    margin-block-start: var(--sp-s);

    & .video-proof__subtitle { margin-block-end: 0; }

    & .btn {
      margin-block-start: var(--sp-s);
      min-inline-size: clamp(14rem, 10rem + 10vw, 28rem);
      text-transform: uppercase;
    }
  }

  .video-proof__videos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-m);
    max-inline-size: 38rem;

    @media (min-width: 64em) {
      grid-template-columns: repeat(2, var(--video-w));
      gap: var(--sp-l);
      max-inline-size: none;
    }
  }

  .video-card {
    display: grid;
    align-content: start;
    gap: var(--sp-s);
    padding: var(--video-pad);
    background: var(--c-white);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-s);
  }

  .video-card__head {
    display: grid;
    gap: var(--sp-3xs);
  }

  .video-card__tag {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-accent);
    line-height: 1.3;
  }

  .video-card__title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--c-ink);
    line-height: 1.25;
  }

  /* рамка 9:16 держит место под видео, пока оно не загрузилось */
  .video-card__player {
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--c-ink);

    & video {
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  }

  /* --- внутренние страницы: первый экран с фото справа во всю высоту --- */
  .page-hero {
    container: page-hero / inline-size;
    display: grid;
    background: var(--c-white);

    @media (min-width: 64em) {
      grid-template-columns: 1fr 1fr;
      min-block-size: max(28rem, calc(720 * var(--u)));   /* 720px макета */
    }
  }

  .page-hero__subtitle {
    font-family: var(--font-heading);
  }

  .page-hero__content {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--sp-s);
    padding-block: var(--sp-s) var(--sp-xl);
    padding-inline: var(--gutter);

    /* левый край совпадает с .container */
    @media (min-width: 64em) {
      padding-inline-start: max(var(--gutter), calc((100cqi - var(--container-max)) / 2));
      padding-inline-end: var(--sp-xl);
    }

    & .breadcrumb { padding-block-start: 0; }

    & h1 {
      font-size: var(--fs-h1);
      max-inline-size: 24ch;
    }

    & .page-hero__subtitle {
      font-size: var(--fs-h2);
      line-height: var(--lh-heading);
      color: var(--c-ink);
    }

    & p:not(.eyebrow, .page-hero__subtitle) {
      font-size: var(--fs-md);
      color: var(--c-muted);
      max-inline-size: 55ch;
    }

    & .cluster { margin-block-start: var(--sp-xs); }

    & .facts {
      inline-size: 100%;
      max-inline-size: 48rem;
    }
  }

  .page-hero__media {
    position: relative;
    min-block-size: 16rem;
    background: var(--c-surface-2);

    & img {
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }

    & .media__caption { inset-inline-start: var(--sp-l); }

    @media (max-width: 63.99em) {
      min-block-size: 0;
      aspect-ratio: 16 / 9;
    }
  }

  /* --- доставка ---
     Размеры в «u» = 1px макета 2560 (см. --u в tokens). Колонки макета: 1080 : 1480 в первом экране,
     1050 : 1230 в «Как проходит доставка», 1120 : 1160 в самовывозе. */

  /* кнопки на страницах доставки, оплаты и в ленте-призыве: 64 высота, радиус 12, текст 20 */
  :is(.page-hero, .delivery-pickup, .cta-band) {
    --btn-r: max(0.5rem, calc(12 * var(--u)));
    --btn-px: max(1.25rem, calc(32 * var(--u)));
    --btn-fs: var(--fs-sm);
  }

  /* заголовки секций информационных страниц: подпись 16 → заголовок 42 → текст 20 */
  .section--info {
    & :is(.section-head, .stack) {
      --eyebrow-gap: max(0.5rem, calc(16 * var(--u)));
      --parent-gap: max(0.5rem, calc(16 * var(--u)));
      gap: max(0.5rem, calc(16 * var(--u)));
    }

    & h2 {
      font-family: var(--font-sans);
      font-size: var(--fs-section);
      font-weight: var(--fw-medium);
      line-height: 1.15;
      max-inline-size: none;
    }

    & :is(.section-head, .stack) .lead {
      font-size: var(--fs-sm);
      font-weight: 300;
      line-height: 1.5;
    }
  }

  /* первый экран: текст 1080 + фото 1480, фото во всю высоту */
  .page-hero--wide-media {
    @media (min-width: 64em) {
      grid-template-columns: minmax(0, var(--hero-start, 1080fr)) minmax(0, var(--hero-end, 1480fr));

      & .page-hero__content {
        grid-template-rows: auto 1fr auto;          /* хлебные крошки — текст — факты */
        padding-inline-end: max(2rem, calc(80 * var(--u)));
        padding-block: max(1.5rem, calc(42 * var(--u))) max(2rem, calc(72 * var(--u)));
      }
    }
  }

  .page-hero__main {
    display: grid;
    align-self: center;
    justify-items: start;
    gap: max(1rem, calc(26 * var(--u)));
    --parent-gap: max(1rem, calc(26 * var(--u)));
    --eyebrow-gap: max(1rem, calc(26 * var(--u)));

    & .eyebrow { --icon-size: max(1.25rem, calc(28 * var(--u))); }

    & h1 {
      font-size: max(2.25rem, calc(72 * var(--u)));
      line-height: 1.08;
      max-inline-size: none;
    }

    & p:not(.eyebrow) {
      font-size: var(--fs-md);
      font-weight: 300;
      line-height: 1.5;
    }

    & .cluster { --cluster-gap: max(0.75rem, calc(20 * var(--u))); margin-block-start: 0; }
  }

  /* три факта: 250 + 250 + 250, зазор 50 */
  .page-hero--wide-media .facts {
    margin: 20px 0 0 0;
    gap: max(1rem, calc(50 * var(--u)));
    max-inline-size: none;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), max(9rem, calc(250 * var(--u)))));

    & .facts__title {
      font-size: clamp(1rem, calc(20 * var(--u)), 1.25rem);   /* от 16 до 20, одинаково на всех страницах */
      font-weight: var(--fw-bold);
      line-height: 1.2;
    }

    & .facts__text { margin-block-start: max(0.25rem, calc(6 * var(--u))); }
  }

  /* малые факты (о нас, оплата): отступ до кнопок 50 */
  .page-hero--wide-media .facts--small { margin-block-start: 50px; }

  /* фото грузовика на тёмном фоне, подпись слева внизу */
  .page-hero--wide-media .page-hero__media {
    background: var(--c-ink);

    & .media__caption {
      inset-inline: max(1rem, calc(50 * var(--u))) auto;
      inset-block-end: max(1rem, calc(48 * var(--u)));
      inline-size: min(calc(100% - 2rem), max(20rem, calc(700 * var(--u))));
      max-inline-size: none;
      padding: max(0.875rem, calc(24 * var(--u)));
      gap: max(0.75rem, calc(18 * var(--u)));
      font-size: var(--fs-sm);
      line-height: 1.4;
      background: rgb(26 38 48 / 0.85);
      border-radius: var(--r);

      & .icon { --icon-size: max(1.5rem, calc(36 * var(--u))); flex: none; }
    }
  }

  /* «Способы доставки»: четыре карточки по 340, зазор 28, тень */
  .delivery-options {
    & .section-head { margin-block-end: max(1.5rem, calc(42 * var(--u))); }

    & .section-head--row > :not(.section-head__aside) { max-inline-size: max(30rem, calc(1120 * var(--u))); }

    & .section-head__aside {
      max-inline-size: max(20rem, calc(650 * var(--u)));
      font-size: var(--fs-sm);
      line-height: 1.5;
      color: var(--c-on-dark);
    }

    & .grid { gap: max(1rem, calc(28 * var(--u))); }

    & .card {
      --card-pad: max(1.25rem, calc(36 * var(--u)));
      gap: max(0.5rem, calc(12 * var(--u)));
      min-block-size: max(14rem, calc(340 * var(--u)));
      box-shadow: 0 max(0.5rem, calc(16 * var(--u))) max(1.5rem, calc(40 * var(--u))) rgb(26 38 48 / 0.08);

      & .card__top { margin-block-end: auto; padding-block-end: max(1rem, calc(24 * var(--u))); }

      & .icon-badge {
        --icon-badge: max(3rem, calc(64 * var(--u)));
        --icon-size: max(1.5rem, calc(30 * var(--u)));
      }

      & .badge {
        padding: max(0.375rem, calc(9 * var(--u))) max(0.75rem, calc(18 * var(--u)));
        font-size: var(--fs-xs);
        font-weight: var(--fw-bold);
        color: var(--c-brand);
        background: var(--c-surface);
      }

      & h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
        line-height: 1.2;
      }

      & p { font-size: var(--fs-sm); font-weight: 300; line-height: 1.45; }

      & .card__meta {
        margin: 0;
        padding: 0;
        font-size: var(--fs-xs);
        font-weight: var(--fw-medium);
        line-height: 1.2;
      }
    }
  }

  /* «Как проходит доставка»: этапы 1050 + карточка упаковки 1230 */
  .delivery-process {
    --section-pad: max(2.5rem, calc(76 * var(--u)));

    & .section-head {
      margin-block-end: max(1.5rem, calc(46 * var(--u)));
      max-inline-size: min(100%, max(36rem, calc(1300 * var(--u))));
    }

    & .split {
      align-items: stretch;
      column-gap: max(2rem, calc(80 * var(--u)));

      @media (min-width: 64em) { --split: minmax(0, 1050fr) minmax(0, 1230fr); }
    }

    & .steps {
      --steps-gap: max(1.5rem, calc(76 * var(--u)));
      --icon-badge: max(2.5rem, calc(54 * var(--u)));
      align-self: start;

      & .steps__item {
        column-gap: max(1rem, calc(26 * var(--u)));
        row-gap: max(0.25rem, calc(8 * var(--u)));

        &:not(:last-child)::after { background: var(--c-line); }

        & h3 {
          align-self: start;
          padding-block-start: max(0.125rem, calc(5 * var(--u)));
          font-family: var(--font-sans);
          font-size: var(--fs-base);
          font-weight: var(--fw-medium);
          line-height: 1.2;
        }

        & p { font-size: var(--fs-xs); font-weight: 300; line-height: 1.45; }
        & .step-num { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
      }
    }
  }

  /* блок «Упаковка, которая выдержит маршрут»: фото 500 + текст 730 */
  .package-card {
    display: grid;
    block-size: 100%;
    overflow: hidden;
    background: var(--c-surface);
    border-radius: var(--r-lg);

    @container (min-width: 40rem) {
      grid-template-columns: minmax(0, 500fr) minmax(0, 730fr);
    }

    @supports not (container-type: inline-size) {
      @media (min-width: 64em) { grid-template-columns: minmax(0, 500fr) minmax(0, 730fr); }
    }

    & .package-card__media { min-inline-size: 0; }

    & .package-card__media img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      min-block-size: 14rem;
      object-fit: cover;
    }

    & .package-card__body {
      display: grid;
      gap: max(0.75rem, calc(20 * var(--u)));
      padding: max(1.25rem, calc(36 * var(--u)));
      align-content: center;
    }

    & h3 {
      font-family: var(--font-sans);
      font-size: var(--fs-card-title);
      font-weight: var(--fw-medium);
      line-height: 1.2;
    }
  }

  .package-card__wrap {
    container-type: inline-size;
    display: grid;
  }

  .mini-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: max(0.875rem, calc(20 * var(--u)));
    row-gap: max(0.25rem, calc(6 * var(--u)));
    align-items: center;
    padding: max(1rem, calc(24 * var(--u)));
    background: var(--c-white);
    border-radius: max(0.5rem, calc(12 * var(--u)));

    & .icon-badge {
      grid-row: span 2;
      --icon-badge: max(2.5rem, calc(54 * var(--u)));
      --icon-size: max(1.25rem, calc(27 * var(--u)));
    }

    & h4 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2; }

    & p {
      font-size: var(--fs-xs);
      line-height: 1.4;
      color: var(--c-muted);
    }
  }

  /* самовывоз: слева текст и условия (1120), справа тёмная карточка (1160) с картой Яндекса */
  .delivery-pickup {
    --section-pad: max(2.25rem, calc(70 * var(--u)));

    & .split {
      align-items: stretch;
      column-gap: max(2rem, calc(80 * var(--u)));

      @media (min-width: 64em) { --split: minmax(0, 1120fr) minmax(0, 1160fr); }
    }

    & .stack { display: flex; flex-direction: column; align-items: flex-start; }

    & .icon-list {
      margin: 0;
      margin-block-start: auto;
      padding-block-start: var(--sp-m);
      gap: max(0.75rem, calc(18 * var(--u)));

      & li {
        align-items: center;
        gap: max(0.625rem, calc(14 * var(--u)));
        font-size: var(--fs-sm);
        line-height: 1.4;
      }

      & .icon { flex: none; --icon-size: max(1.25rem, calc(24 * var(--u))); }
    }
  }

  /* тёмная карточка мастерской: адрес 590 + карта */
  .pickup-card {
    display: grid;
    gap: max(1.25rem, calc(46 * var(--u)));
    padding: max(1.25rem, calc(44 * var(--u)));
    color: var(--c-on-dark);
    background: var(--c-footer);
    border-radius: var(--r-lg);

    @media (min-width: 48em) { grid-template-columns: minmax(0, 590fr) minmax(0, 436fr); }

    & h3 {
      font-family: var(--font-sans);
      font-size: var(--fs-card-title);
      font-weight: var(--fw-medium);
      line-height: 1.3;
      color: var(--c-white);
    }

    & .badge {
      padding: max(0.375rem, calc(9 * var(--u))) max(0.75rem, calc(16 * var(--u)));
      font-size: var(--fs-xs);
      font-weight: var(--fw-semibold);
      color: var(--c-white);
      background: rgb(255 255 255 / 0.07);

      &::before {
        content: "";
        inline-size: max(0.5rem, calc(10 * var(--u)));
        block-size: max(0.5rem, calc(10 * var(--u)));
        border-radius: 50%;
        background: var(--c-accent);
      }
    }
  }

  .pickup-card__body {
    display: grid;
    grid-template-rows: auto auto auto auto;
    align-content: space-between;
    justify-items: start;
    gap: var(--sp-m);
  }

  .pickup-card__contacts {
    display: grid;
    gap: max(0.625rem, calc(18 * var(--u)));
    justify-items: start;

    & p {
      display: flex;
      align-items: center;
      gap: max(0.5rem, calc(14 * var(--u)));
      font-size: var(--fs-xs);
      line-height: 1.35;
      color: var(--c-on-dark);
    }

    & .icon { flex: none; --icon-size: max(1.25rem, calc(25 * var(--u))); }
    & a { color: inherit; text-decoration: none; }
  }

  .pickup-card__map {
    position: relative;
    display: block;
    overflow: hidden;
    min-block-size: 16rem;
    border-radius: var(--r);
    background: var(--c-brand);

    & :is(img, iframe) {
      position: absolute;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      border: 0;
      object-fit: cover;
    }
  }

  .pickup-card__map-label {
    position: absolute;
    inset-inline-start: max(0.75rem, calc(28 * var(--u)));
    inset-block-end: max(0.75rem, calc(28 * var(--u)));
    display: grid;
    gap: max(0.25rem, calc(6 * var(--u)));
    inline-size: min(calc(100% - 1.5rem), max(13rem, calc(300 * var(--u))));
    padding: max(0.625rem, calc(18 * var(--u)));
    font-size: var(--fs-2xs);
    line-height: 1.35;
    color: var(--c-muted);
    background: rgb(255 255 255 / 0.92);
    border-radius: max(0.5rem, calc(12 * var(--u)));

    & strong { font-size: var(--fs-xs); color: var(--c-ink); }
  }

  .pickup-card .btn { margin: 0; }


  /* --- оплата ---
     Первый экран как у доставки, но колонки 1230 : 1330 и без подписи на фото. Размеры в «u» — 1px макета 2560. */

  .page-hero--pay {
    --hero-start: 1230fr;
    --hero-end: 1330fr;

    & .page-hero__main strong { font-weight: var(--fw-medium); }
  }

  /* «Оплата заказа в несколько простых шагов»: три белые карточки по 263 */
  .pay-steps {
    @media (min-width: 64em) { min-block-size: calc(680 * var(--u)); }   /* высота секции в макете */

    & .section-head { margin-block-end: max(1.5rem, calc(42 * var(--u))); }
    & .grid { gap: max(1rem, calc(28 * var(--u))); }

    & .card {
      --card-pad: max(1.25rem, calc(36 * var(--u)));
      gap: max(1rem, calc(36 * var(--u)));
      min-block-size: max(11rem, calc(263 * var(--u)));
      box-shadow: 0 max(0.5rem, calc(16 * var(--u))) max(1.5rem, calc(40 * var(--u))) rgb(26 38 48 / 0.08);

      & .card__top {
        justify-content: flex-start;
        gap: max(0.75rem, calc(20 * var(--u)));
        margin: 0;
      }

      & .step-num {
        --icon-badge: max(3rem, calc(64 * var(--u)));
        font-size: var(--fs-base);
        font-weight: var(--fw-medium);
      }

      & h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
        line-height: 1.2;
      }

      & p { font-size: var(--fs-sm); font-weight: 300; line-height: 1.45; }
      & p strong { font-weight: var(--fw-semibold); }
    }
  }

  /* «Есть два удобных способа»: слева заказ через сайт + фото менеджера, справа заказ через менеджера */
  .order-ways {
    --section-pad: max(2.5rem, calc(76 * var(--u)));

    & .section-head {
      margin-block-end: max(1.5rem, calc(46 * var(--u)));
      max-inline-size: min(100%, max(36rem, calc(1300 * var(--u))));
    }

    & .split {
      align-items: stretch;
      column-gap: max(2rem, calc(80 * var(--u)));

      @media (min-width: 64em) { --split: minmax(0, 1050fr) minmax(0, 1230fr); }
    }

    & .stack {
      display: grid;
      align-content: start;
      gap: max(1rem, calc(35 * var(--u)));
    }

    & .card {
      --card-pad: max(1.25rem, calc(30 * var(--u)));
      gap: max(1rem, calc(35 * var(--u)));
      background: rgb(24 93 112 / 0.1);
      border: 1px solid rgb(24 93 112 / 0.3);
      border-radius: var(--r);

      & > h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
        line-height: 1.2;
      }

      & > p { font-size: var(--fs-sm); font-weight: 300; line-height: 1.5; }
      & > div:has(.btn) { justify-self: start; }
    }

    /* этапы без соединительной линии: круг 54, заголовок 24, текст 16 */
    & .steps--compact {
      --steps-gap: max(0.75rem, calc(20 * var(--u)));
      --icon-badge: max(2.5rem, calc(54 * var(--u)));

      & .steps__item {
        column-gap: max(1rem, calc(26 * var(--u)));
        row-gap: max(0.25rem, calc(8 * var(--u)));

        & h3 {
          align-self: start;
          padding-block-start: max(0.125rem, calc(5 * var(--u)));
          font-family: var(--font-sans);
          font-size: var(--fs-base);
          font-weight: var(--fw-medium);
          line-height: 1.2;
        }

        & p { font-size: var(--fs-xs); font-weight: 300; line-height: 1.45; }
        & .step-num { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
      }
    }

    /* фото менеджера: плашка 330 высотой на тёмном фоне */
    & .media {
      block-size: max(12rem, calc(330 * var(--u)));
      background: var(--c-ink);
      border-radius: var(--r);

      & img {
        block-size: 100%;
        aspect-ratio: auto;
        object-position: 70% 40%;
      }
    }

    /* список «что подготовить»: круглая галочка 30 и текст 24 */
    & .check-list {
      gap: max(1rem, calc(35 * var(--u)));
      margin: 0;

      & > li {
        align-items: center;
        gap: max(1rem, calc(26 * var(--u)));
        font-size: var(--fs-base);
        font-weight: var(--fw-medium);
        line-height: 1.2;
        color: var(--c-ink);

        &::before {
          translate: none;
          inline-size: max(1.5rem, calc(30 * var(--u)));
          block-size: max(1.5rem, calc(30 * var(--u)));
          margin-inline: max(0.5rem, calc(12 * var(--u)));
        }
      }
    }

    & .header-phone {
      justify-self: start;
      gap: max(0.5rem, calc(20 * var(--u)));
      font-size: var(--fs-base);
      font-weight: 800;

      & .icon { --icon-size: max(1.5rem, calc(40 * var(--u))); color: var(--c-brand); }
    }
  }

  /* «Оплата после подтверждения»: три белые карточки и стрелки 70 между ними */
  .pay-after {
    --section-pad: max(2.25rem, calc(70 * var(--u)));

    @media (min-width: 64em) { min-block-size: calc(520 * var(--u)); }

    & .section-head { margin-block-end: max(1.25rem, calc(36 * var(--u))); }

    & .flow {
      --flow-gap: max(2.5rem, calc(130 * var(--u)));   /* 30 + стрелка 70 + 30 */
      align-items: center;
    }

    & .flow__item {
      --card-pad: max(1.25rem, calc(40 * var(--u))) max(1rem, calc(30 * var(--u)));
      gap: max(0.75rem, calc(20 * var(--u)));
      max-inline-size: calc(1000 * var(--u));
      border: 0;

      @media (max-width: 63.99em) { max-inline-size: none; }

      &:not(:last-child)::after {
        inline-size: max(1.5rem, calc(70 * var(--u)));
        aspect-ratio: 70 / 78;
      }

      & h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-base);
        font-weight: var(--fw-regular);
        line-height: 1.2;
      }

      & p { font-size: var(--fs-sm); font-weight: 300; line-height: 1.5; }
      & p strong { font-weight: var(--fw-medium); }
    }
  }

  /* --- о нас ---
     Размеры в «u» = 1px макета 2560 (см. --u в tokens). Первый экран: текст 1050 + зазор 80 | фото 1330. */

  .page-hero--about {
    --hero-start: 1230fr;
    --hero-end: 1330fr;

    @media (min-width: 64em) {
      & .page-hero__content { padding-block-end: max(2rem, calc(64 * var(--u))); }
    }

    /* «Создаём кейсы и кофры для ваших задач»: 42, две строки */
    & .page-hero__main .page-hero__subtitle {
      font-family: var(--font-sans);
      font-size: var(--fs-section);
      font-weight: var(--fw-medium);
      line-height: 1.18;
      color: var(--c-ink);
    }

    & .page-hero__main > p:not(.eyebrow, .page-hero__subtitle) { max-inline-size: max(20rem, calc(900 * var(--u))); }


    & .page-hero__media .media__caption {
      inline-size: min(calc(100% - 2rem), max(20rem, calc(690 * var(--u))));
      border-radius: max(0.75rem, calc(20 * var(--u)));
    }
  }

  /* «Наша основная задача»: заголовок 1050 + текст 1230, ниже четыре плитки */
  .about-tasks {
    @media (min-width: 64em) { padding-block: max(2.25rem, calc(72 * var(--u))); }

    & .about-tasks__head {
      align-items: center;
      column-gap: max(2rem, calc(80 * var(--u)));
      margin-block-end: max(1.5rem, calc(42 * var(--u)));

      @media (min-width: 64em) { --split: minmax(0, 1050fr) minmax(0, 1230fr); }
    }

    & .about-tasks__text {
      font-size: var(--fs-md);
      font-weight: 300;
      line-height: 1.5;
      color: var(--c-white);
    }

    & .grid { gap: max(1rem, calc(28 * var(--u))); }

    & .pill-card {
      gap: max(0.75rem, calc(22 * var(--u)));
      padding: max(1rem, calc(28 * var(--u)));
      font-size: var(--fs-md);
      font-weight: var(--fw-medium);
      line-height: 1.25;
      background: rgb(255 255 255 / 0.05);
      border-color: rgb(255 255 255 / 0.15);
      border-radius: max(0.75rem, calc(20 * var(--u)));

      & .icon { --icon-size: max(1.75rem, calc(36 * var(--u))); flex: none; }
    }
  }

  /* «Формат под вашу задачу»: заголовок 650 + две карточки */
  .formats {
    --section-pad: max(2.5rem, calc(76 * var(--u)));

    & .split {
      align-items: center;
      column-gap: max(2rem, calc(80 * var(--u)));

      @media (min-width: 64em) { --split: minmax(0, 650fr) minmax(0, 1630fr); }
    }

    & .grid { gap: max(1rem, calc(28 * var(--u))); align-items: stretch; }

    & .card {
      --card-pad: max(1.25rem, calc(36 * var(--u)));
      gap: max(1rem, calc(24 * var(--u)));
      border-radius: max(0.75rem, calc(20 * var(--u)));

      & .card__top { margin: 0; }
      & .icon { --icon-size: max(1.75rem, calc(36 * var(--u))); }
      & .badge { font-size: var(--fs-xs); font-weight: var(--fw-medium); }

      & h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
        line-height: 1.2;
      }

      & p { font-size: var(--fs-sm); font-weight: 300; line-height: 1.5; }
    }
  }

  /* «Всё для создания кейса»: фото 870 + список из пяти строк */
  .about-materials {
    --section-pad: max(2.5rem, calc(76 * var(--u)));

    & .section-head { margin-block-end: max(1.5rem, calc(44 * var(--u))); }

    & .split {
      align-items: stretch;
      column-gap: max(2rem, calc(80 * var(--u)));

      @media (min-width: 64em) { --split: minmax(0, 870fr) minmax(0, 1410fr); }
    }

    & .media {
      min-block-size: max(18rem, calc(600 * var(--u)));
      background: var(--c-ink);
      border-radius: max(0.75rem, calc(20 * var(--u)));

      & img {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
      }

      & .media__caption {
        inset-inline: max(1rem, calc(32 * var(--u))) auto;
        inset-block-end: max(1rem, calc(32 * var(--u)));
        inline-size: min(calc(100% - 2rem), max(16rem, calc(680 * var(--u))));
        max-inline-size: none;
        padding: max(0.875rem, calc(24 * var(--u)));
        font-size: var(--fs-md);
        font-weight: var(--fw-medium);
        line-height: 1.3;
        background: rgb(26 38 48 / 0.9);
        border-radius: max(0.5rem, calc(12 * var(--u)));
      }
    }

    & .feature-list { align-content: start; }

    & .feature-list__item {
      grid-template-columns: max(2.75rem, calc(62 * var(--u))) 1fr;
      column-gap: max(1rem, calc(24 * var(--u)));
      row-gap: max(0.25rem, calc(8 * var(--u)));
      padding-block: max(0.75rem, calc(22 * var(--u)));

      & .icon-badge {
        --icon-badge: max(2.75rem, calc(62 * var(--u)));
        --icon-size: max(1.25rem, calc(28 * var(--u)));
      }

      & h3 {
        font-family: var(--font-sans);
        font-size: max(1.25rem, calc(26 * var(--u)));
        font-weight: var(--fw-medium);
        line-height: normal;
      }

      & p { font-size: var(--fs-sm); font-weight: 300; line-height: 1.45; }
    }
  }

  /* «За наше качество не бывает стыдно»: три белые карточки */
  .about-quality {
    --section-pad: max(2.5rem, calc(76 * var(--u)));

    & .section-head { margin-block-end: max(1.5rem, calc(42 * var(--u))); }
    & .grid { gap: max(1rem, calc(28 * var(--u))); align-items: stretch; }

    & .card {
      --card-pad: max(1.25rem, calc(36 * var(--u)));
      gap: max(1rem, calc(24 * var(--u)));
      border: 0;
      border-radius: max(0.75rem, calc(20 * var(--u)));

      & .icon { --icon-size: max(1.75rem, calc(36 * var(--u))); }

      & h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
        line-height: 1.2;
      }

      & p { font-size: var(--fs-sm); font-weight: 300; line-height: 1.5; }
    }
  }

  /* --- контакты ---
     Размеры в «u» — это 1px макета 2560 (см. --u в tokens); на узких экранах работают обычные токены. */

  /* верхняя секция: отступы 42 / 76, колонки 1050 : 1230, зазор 80 */
  .section--contacts {
    padding-block: var(--sp-m) var(--sp-xl);

    @media (min-width: 64em) {
      padding-block: max(1.5rem, calc(42 * var(--u))) max(2.5rem, calc(76 * var(--u)));
    }

    & .breadcrumb { margin-block-end: max(1.5rem, calc(44 * var(--u))); }
  }

  .split--contacts {
    @media (min-width: 64em) {
      --split: minmax(0, 1050fr) minmax(0, 1230fr);
      column-gap: max(2rem, calc(80 * var(--u)));
      align-items: stretch;   /* карточка адреса тянется на высоту левой колонки */
    }

    & .stack { gap: var(--sp-m); }

    /* заголовок страницы и вводный абзац крупнее, чем на других страницах */
    & h1 {
      @media (min-width: 64em) { font-size: max(2.25rem, calc(72 * var(--u))); }
      line-height: 1.08;
    }

    & .lead {
      color: var(--c-muted);
      font-weight: 300;
      line-height: 1.5;
      max-inline-size: calc(960 * var(--u));
      @media (max-width: 63.99em) { max-inline-size: none; }
    }
  }

  /* способы связи: линия сверху у каждой строки, иконка 64, крупное значение */
  .contact-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .contact-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: max(1rem, calc(24 * var(--u)));
    row-gap: max(0.375rem, calc(10 * var(--u)));
    align-content: start;
    padding-block: max(1rem, calc(26 * var(--u)));
    border-block-start: 1px solid var(--c-line);

    & .icon-badge {
      grid-row: span 3;
      --icon-badge: max(3rem, calc(64 * var(--u)));
    }
  }

  .contact-list__label {
    font-size: var(--fs-xs);
    color: var(--c-muted);
  }

  .contact-list__value {
    font-family: var(--font-sans);
    font-size: max(1.5rem, calc(42 * var(--u)));
    font-weight: var(--fw-bold);
    line-height: 1.2;
    color: var(--c-brand);
    text-decoration: none;
    overflow-wrap: anywhere;

    &:hover { color: var(--c-accent); }
  }

  .contact-list__note {
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--c-muted);
  }

  /* карточка адреса: сверху карта Яндекса (310), ниже адрес и реквизиты */
  .address-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--c-surface);
    border-radius: var(--r);
  }

  .address-card__map {
    display: block;
    flex: none;
    inline-size: 100%;
    block-size: max(14rem, calc(310 * var(--u)));
    border: 0;
    background: var(--c-surface-2);
  }

  /* адрес и реквизиты рядом (726 : 504), на узком — друг под другом */
  .address-card__cols {
    display: grid;
    flex: 1;

    & > * + * { border-block-start: 1px solid var(--c-line); }
  }

  @container (min-width: 40rem) {
    .address-card__cols {
      grid-template-columns: minmax(0, 726fr) minmax(0, 504fr);

      & > * + * {
        border-block-start: 0;
        border-inline-start: 1px solid var(--c-line);
      }
    }
  }

  .address-card__body {
    display: grid;
    align-content: start;
    gap: max(0.5rem, calc(12 * var(--u)));   /* между строками; крупнее — ниже, у заголовка и «Времени работы» */
    padding: max(1.25rem, calc(42 * var(--u)));

    & h2 {
      display: flex;
      align-items: center;
      margin-block-end: max(0.5rem, calc(14 * var(--u)));
      gap: max(0.625rem, calc(16 * var(--u)));
      font-family: var(--font-sans);
      font-size: max(1.25rem, calc(28 * var(--u)));
      font-weight: var(--fw-medium);

      & .icon { color: var(--c-accent); }
    }

    & .address-card__company {
      font-size: var(--fs-sm);
      font-weight: var(--fw-bold);
      color: var(--c-brand);
    }

    & address {
      font-style: normal;
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      line-height: 1.35;
      color: var(--c-ink);
    }

    /* «Время работы» — под линией */
    & address + .muted {
      margin-block-start: max(0.5rem, calc(14 * var(--u)));
      padding-block-start: max(1rem, calc(24 * var(--u)));
      border-block-start: 1px solid var(--c-line);
      font-size: var(--fs-xs);
      color: var(--c-muted);
    }

    & .address-card__hours {
      display: flex;
      align-items: center;
      gap: max(0.5rem, calc(14 * var(--u)));
      font-size: var(--fs-base);
      line-height: 1.4;
      color: var(--c-ink);

      & .icon { flex: none; color: var(--c-accent); }
    }
  }

  /* правая колонка: у реквизитов чуть другие отступы (51 слева, 33 справа) */
  @container (min-width: 40rem) {
    .address-card__body + .address-card__body {
      padding-inline: max(1.25rem, calc(51 * var(--u))) max(1rem, calc(33 * var(--u)));
      padding-block-start: max(1.25rem, calc(45 * var(--u)));
    }
  }

  /* реквизиты: две колонки, когда карточке хватает ширины; верхний ряд без линий, нижний — с линией */
  .requisites {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: max(1.5rem, calc(74 * var(--u)));
    row-gap: max(0.75rem, calc(25 * var(--u)));
    margin: 0;

    & > div { display: grid; gap: max(0.375rem, calc(12 * var(--u))); align-content: start; }

    & dt {
      font-size: var(--fs-xs);
      color: var(--c-muted);
    }

    & dd {
      margin: 0;
      font-size: var(--fs-base);
      line-height: 1.4;
      color: var(--c-ink);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }
  }

  @container (min-width: 62rem) {
    .requisites {
      grid-template-columns: repeat(2, max-content);

      & > div:nth-child(n+3) {
        padding-block-start: max(1rem, calc(24 * var(--u)));
        border-block-start: 1px solid var(--c-line);
      }
    }
  }

  /* нижняя секция: подсказки слева, форма справа */
  .section--project {
    @media (min-width: 64em) {
      padding-block: max(2.5rem, calc(76 * var(--u)));
    }

    & .split { gap: var(--sp-xl) max(2rem, calc(80 * var(--u))); }

    @media (min-width: 64em) {
      & .split { --split: minmax(0, 1050fr) minmax(0, 1230fr); }
    }

    & h2 {
      font-family: var(--font-sans);
      font-weight: var(--fw-medium);
      line-height: 1.12;
      @media (min-width: 64em) { font-size: max(2rem, calc(56 * var(--u))); }
    }

    & .lead {
      font-weight: 300;
      line-height: 1.5;
      color: var(--c-on-dark);
      max-inline-size: calc(940 * var(--u));
      @media (max-width: 63.99em) { max-inline-size: none; }
    }

    & .stack > p.mt-l {
      margin-block-start: 0;
      padding-block-start: max(0.25rem, calc(8 * var(--u)));
      font-size: var(--fs-sm);
      color: var(--c-white);
    }
  }

  /* подсказки «Что поможет обсудить заказ»: круглая иконка 52, заголовок 24, текст 20 */
  .hint-list {
    display: grid;
    gap: max(1rem, calc(26 * var(--u)));
    margin: 0;
    padding: 0;
    list-style: none;
    max-inline-size: calc(970 * var(--u));
    @media (max-width: 63.99em) { max-inline-size: none; }
  }

  .hint-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: max(0.875rem, calc(20 * var(--u)));
    row-gap: max(0.25rem, calc(8 * var(--u)));
    align-content: start;

    & .icon-badge {
      grid-row: span 2;
      --icon-badge: max(2.5rem, calc(52 * var(--u)));
      background: rgb(255 255 255 / 0.07);
    }

    & h3 {
      font-family: var(--font-sans);
      font-size: var(--fs-base);
      font-weight: var(--fw-medium);
      line-height: 1.2;
      color: var(--c-white);
    }

    & p {
      font-size: var(--fs-sm);
      font-weight: 300;
      line-height: 1.45;
      color: var(--c-on-dark);
    }
  }

  /* белая карточка формы «Написать в SAFEINCASE»: отступы 42, интервал 24, поля 60 / 120, кнопка 64 */
  .form-card {
    display: grid;
    align-content: start;
    gap: max(1rem, calc(24 * var(--u)));
    padding: max(1.25rem, calc(42 * var(--u)));
    background: var(--c-white);
    color: var(--c-text);
    border-radius: var(--r-lg);

    & > * { margin: 0; }

    & h2 {
      font-family: var(--font-sans);
      font-size: var(--fs-xl);
      font-weight: var(--fw-medium);
      color: var(--c-ink);
    }

    & > p {
      font-size: var(--fs-sm);
      line-height: 1.45;
      color: var(--c-muted);
    }

    & .form { gap: max(1rem, calc(24 * var(--u))); }
    & .form__row { gap: max(1rem, calc(24 * var(--u))); }
    & .field { gap: max(0.375rem, calc(10 * var(--u))); }

    & .field > label {
      font-size: var(--fs-xs);
      font-weight: var(--fw-medium);
      color: var(--c-ink);
    }

    & :is(.input, input:not([type="checkbox"], [type="radio"]), textarea) {
      min-block-size: max(2.75rem, calc(60 * var(--u)));
      padding-inline: max(0.875rem, calc(20 * var(--u)));
      font-size: var(--fs-sm);
      background-color: var(--c-surface);
      border: 1px solid var(--c-line);
      border-radius: max(0.5rem, calc(12 * var(--u)));
    }

    & textarea { min-block-size: max(5rem, calc(120 * var(--u))); }

    & .check { font-size: var(--fs-xs); line-height: 1.4; gap: max(0.5rem, calc(12 * var(--u))); }

    & .form__footer { gap: var(--sp-xs) max(1rem, calc(24 * var(--u))); }

    & .btn {
      min-block-size: max(3rem, calc(64 * var(--u)));
      padding-inline: max(1.25rem, calc(32 * var(--u)));
      font-size: var(--fs-sm);
      --btn-r: max(0.5rem, calc(12 * var(--u)));
    }
  }

  /* --- каталог: категория --- */
  .catalog {
    display: grid;
    gap: var(--sp-l);
    align-items: start;

    @media (min-width: 64em) {
      grid-template-columns: clamp(15rem, 10rem + 11vw, 27.5rem) minmax(0, 1fr);
    }
  }

  /* боковое меню категорий */
  .catalog-nav {
    padding: var(--sp-m);
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r);

    & h2 {
      margin-block-end: var(--sp-xs);
      font-size: var(--fs-lg);
    }

    & ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    & a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-xs);
      padding: var(--sp-s) var(--sp-xs);
      font-size: var(--fs-sm);
      line-height: 1.35;
      color: var(--c-ink);
      text-decoration: none;
      border-block-end: 1px solid var(--c-line);

      &::after {
        content: "";
        flex-shrink: 0;
        inline-size: 0.9em;
        block-size: 0.9em;
        background: var(--c-muted);
        -webkit-mask: var(--i-chevron-right) center / contain no-repeat;
        mask: var(--i-chevron-right) center / contain no-repeat;
      }

      &:hover { color: var(--c-accent); }
    }

    & li:last-child a { border: 0; }

    /* активная категория: подложка и иконка сетки */
    & :is(.active, [aria-current="page"]) {
      justify-content: flex-start;
      color: var(--c-brand);
      background: var(--c-surface-2);
      border-radius: var(--r-sm);
      border-block-end-color: transparent;

      &::after { display: none; }

      &::before {
        content: "";
        flex-shrink: 0;
        inline-size: 1em;
        block-size: 1em;
        background: var(--c-accent);
        -webkit-mask: var(--i-grid) center / contain no-repeat;
        mask: var(--i-grid) center / contain no-repeat;
      }
    }

    /* на мобильных — горизонтальная лента чипов */
    @media (max-width: 63.99em) {
      padding: 0;
      border: 0;
      background: none;

      & h2 { display: none; }

      & ul {
        display: flex;
        gap: var(--sp-2xs);
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-block-end: var(--sp-3xs);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
      }

      & li { scroll-snap-align: start; flex-shrink: 0; }

      & a {
        padding: var(--sp-2xs) var(--sp-s);
        white-space: nowrap;
        border: 1px solid var(--c-line);
        border-radius: var(--r-pill);
        background: var(--c-white);

        &::after { display: none; }
      }

      & :is(.active, [aria-current="page"]) {
        color: var(--c-white);
        background: var(--c-accent);
        border-color: var(--c-accent);
        border-radius: var(--r-pill);

        &::before { background: var(--c-white); }
      }
    }
  }

  .catalog__main {
    container: listing / inline-size;
    min-inline-size: 0;
  }

  /* панель «Сортировка / Показывать / вид» */
  .catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-s) var(--sp-m);
    justify-content: flex-end;
    margin-block-end: var(--sp-m);
  }

  .catalog-toolbar__control {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--fs-xs);
    color: var(--c-muted);

    & select {
      min-block-size: calc(var(--btn-h) * 0.8);
      min-inline-size: 5.5rem;
      padding-block: 0.3em;
      font-size: var(--fs-xs);
      background-color: var(--c-white);
    }

    & #input-sort { min-inline-size: clamp(10rem, 8rem + 5vw, 16rem); }
  }

  /* сетка товаров: колонки по ширине контейнера, а не экрана */
  .catalog-grid {
    display: grid;
    gap: var(--sp-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @container listing (min-width: 36rem) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @container listing (min-width: 52rem) {
    .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  }

  @container listing (min-width: 70rem) {
    .catalog-grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* карточка товара (классы ocStore .catalog-product__*) */
  .catalog-product {
    container: product-card / inline-size;
    list-style: none;
  }

  .catalog-product__wrapper {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);

    &:hover {
      border-color: transparent;
      box-shadow: var(--shadow-m);
    }

    &:hover .catalog-product__img { scale: 1.03; }
  }

  .catalog-product__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--c-ink);
    text-decoration: none;

    &:hover { color: var(--c-ink); }
  }

  .catalog-product__image {
    overflow: hidden;
    background: var(--c-surface-2);
    aspect-ratio: 29 / 20;

    @supports not (aspect-ratio: 1) {
      position: relative;
      block-size: 0;
      padding-block-start: 69%;
    }
  }

  /* <img> или старый div с фоном */
  .catalog-product__img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    transition: scale 0.4s var(--ease);

    @supports not (aspect-ratio: 1) {
      position: absolute;
      inset: 0;
    }
  }

  .catalog-product__category {
    padding: var(--sp-s) var(--sp-m) 0;
    font-size: var(--fs-xs);
    color: var(--c-muted);
  }

  .catalog-product__title {
    padding: var(--sp-xs) var(--sp-m) var(--sp-s);
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: 1.25;
    min-block-size: calc(var(--fs-lg) * 1.25 * 2 + var(--sp-xs) + var(--sp-s));
  }

  .catalog-product__cart {
    display: grid;
    gap: var(--sp-s);
    margin-block-start: auto;
    padding: 0 var(--sp-m) var(--sp-m);
  }

  .catalog-product__price {
    & :is(.price, p) {
      margin: 0;
      font-size: var(--fs-md);
      font-weight: var(--fw-medium);
      color: var(--c-brand);
    }

    & .price-old {
      margin-inline-start: 0.5em;
      font-size: 0.8em;
      color: var(--c-muted);
      text-decoration: line-through;
    }
  }

  /* кнопка в карточке; второй селектор — для опечатки «catalog=product__add» в текущем шаблоне */
  :is(.catalog-product__add, .catalog\=product__add) {
    & :is(button, a) {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-2xs);
      inline-size: 100%;
      min-block-size: calc(var(--btn-h) * 0.85);
      padding-inline: var(--sp-s);
      font-size: var(--fs-sm);
      font-weight: var(--fw-medium);
      color: var(--c-brand);
      text-decoration: none;
      background: var(--c-surface-2);
      border: 0;
      border-radius: var(--r-sm);
      transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);

      &::after {
        content: "";
        inline-size: 0.9em;
        block-size: 0.9em;
        background: currentColor;
        -webkit-mask: var(--i-arrow-right) center / contain no-repeat;
        mask: var(--i-arrow-right) center / contain no-repeat;
      }

      &:hover {
        color: var(--c-white);
        background: var(--c-accent);
      }

      & .fa { display: none; }
    }

    /* «В корзину» — иконка корзины вместо стрелки */
    & button[onclick*="cart.add"]::after {
      -webkit-mask-image: var(--i-cart);
      mask-image: var(--i-cart);
    }
  }

  /* узкая карточка */
  @container product-card (max-width: 16rem) {
    .catalog-product__title {
      font-size: var(--fs-md);
      min-block-size: 0;
    }

    .catalog-product__category,
    .catalog-product__title,
    .catalog-product__cart {
      padding-inline: var(--sp-s);
    }
  }

  /* «Страница 1» + пагинация */
  .catalog-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-s);
    margin-block-start: var(--sp-l);
    font-size: var(--fs-xs);
    color: var(--c-muted);
  }

  /* описание категории под товарами (SEO-текст) */
  .category-description {
    font-size: var(--fs-sm);
    color: var(--c-muted);
    max-inline-size: 90ch;

    & :is(h2, h3) {
      margin-block: var(--sp-l) var(--sp-xs);
      color: var(--c-ink);
    }

    & p + p { margin-block-start: var(--sp-xs); }
  }

  /* --- каталог: размеры макета ---
     «u» = 1px макета 2560 (см. --u в tokens). Сайдбар 440 + зазор 40 + товары 1880, карточки 449 с зазором 28. */

  /* шапка раздела: крошки, надзаголовок, заголовок 64, описание 24 */
  .catalog-intro {
    @media (min-width: 64em) { padding-block: max(1.5rem, calc(42 * var(--u))) max(1.5rem, calc(48 * var(--u))); }

    & .breadcrumb { padding: 0; margin-block-end: max(1.25rem, calc(36 * var(--u))); }

    & .page-head {
      gap: max(0.75rem, calc(20 * var(--u)));
      padding: 0;

      & h1 {
        font-size: max(2rem, calc(64 * var(--u)));
        line-height: 1.12;
        max-inline-size: none;
      }

      & p:not(.eyebrow) {
        font-size: var(--fs-md);
        line-height: 1.5;
        max-inline-size: max(30rem, calc(1600 * var(--u)));
      }
    }
  }

  /* когда боковое меню пустое, товары занимают всю ширину */
  .catalog.catalog--wide { grid-template-columns: minmax(0, 1fr); }

  /* стрелка справа только у категорий, в которых есть вложенные */
  .catalog-nav a:not(.has-sub)::after { display: none; }

  /* пустая категория: сайдбар слева, заглушка по центру колонки товаров (высота как у сайдбара) */
  .catalog:has(.empty-state) { align-items: stretch; }

  .catalog__main > .empty-state {
    min-block-size: 100%;
    gap: max(1.25rem, calc(36 * var(--u)));
    justify-items: center;

    @media (min-width: 64em) {
      align-content: center;
      padding-block: max(1.5rem, calc(42 * var(--u))) max(3rem, calc(140 * var(--u)));
    }

    & .icon {
      --icon-size: max(4rem, calc(133 * var(--u)));
      margin: 0;
    }

    & .empty-state__text {
      display: grid;
      gap: max(0.75rem, calc(20 * var(--u)));
      justify-items: center;
    }

    & h2 {
      font-family: var(--font-sans);
      font-size: var(--fs-section);
      font-weight: var(--fw-medium);
      line-height: 1.15;
    }

    & p {
      max-inline-size: max(30rem, calc(1738 * var(--u)));
      font-size: var(--fs-md);
      line-height: 1.5;
    }

    & .cluster {
      --cluster-gap: max(1rem, calc(50 * var(--u)));
      margin: 0;
    }
  }

  /* серая подложка: сверху 44, снизу 72 */
  .catalog-section {
    @media (min-width: 64em) { padding-block: max(1.5rem, calc(44 * var(--u))) max(2.25rem, calc(72 * var(--u))); }
  }

  .catalog {
    @media (min-width: 64em) {
      grid-template-columns: max(15rem, calc(440 * var(--u))) minmax(0, 1fr);
      column-gap: max(1.5rem, calc(40 * var(--u)));
    }
  }

  /* боковое меню: карточка с отступом 28, строки 22 с шевроном, активная — на светлой подложке */
  @media (min-width: 64em) {
    .catalog-nav {
      --nav-gap: max(0.375rem, calc(10 * var(--u)));
      padding: max(1rem, calc(28 * var(--u)));
      border-radius: max(0.75rem, calc(20 * var(--u)));

      & h2 {
        margin-block-end: var(--nav-gap);
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
        line-height: 1.25;
      }

      & ul { display: grid; gap: var(--nav-gap); }

      & a {
        gap: max(0.5rem, calc(12 * var(--u)));
        padding: max(0.625rem, calc(14 * var(--u))) max(0.375rem, calc(8 * var(--u)));
        font-size: max(1rem, calc(22 * var(--u)));

        &::after {
          inline-size: max(0.875rem, calc(18 * var(--u)));
          block-size: max(0.875rem, calc(18 * var(--u)));
        }
      }

      & :is(.active, [aria-current="page"]) {
        gap: max(0.5rem, calc(14 * var(--u)));
        padding: max(0.75rem, calc(18 * var(--u)));
        font-weight: var(--fw-medium);
        background: #e8f1f3;
        border-radius: max(0.5rem, calc(12 * var(--u)));

        &::before {
          inline-size: max(1rem, calc(22 * var(--u)));
          block-size: max(1rem, calc(22 * var(--u)));
        }
      }
    }
  }

  /* панель: заголовок 28, «Сортировка» и «Показывать» с полями 56 */
  .catalog-toolbar {
    gap: var(--sp-s) max(1rem, calc(24 * var(--u)));
    margin-block-end: max(1rem, calc(28 * var(--u)));
  }

  .catalog-toolbar__control {
    gap: max(0.5rem, calc(16 * var(--u)));
    font-size: var(--fs-sm);

    & select {
      min-block-size: max(2.5rem, calc(56 * var(--u)));
      padding-inline: max(0.75rem, calc(20 * var(--u)));
      font-size: var(--fs-sm);
      color: var(--c-ink);
      border-radius: max(0.5rem, calc(12 * var(--u)));
    }

    & #input-sort { min-inline-size: max(10rem, calc(260 * var(--u))); }
    & #input-limit { min-inline-size: max(5.5rem, calc(95 * var(--u))); }
  }

  /* сетка: 4 карточки в ряд, зазор 28 */
  .catalog-grid { gap: max(1rem, calc(28 * var(--u))); }

  @container listing (min-width: 56rem) {
    .catalog-grid { grid-template-columns: repeat(4, 1fr); }
  }

  /* карточка: фото 310, поля 26, зазор 18, название до трёх строк, кнопка 56 */
  .catalog-product__wrapper { border-radius: max(0.75rem, calc(20 * var(--u))); }

  .catalog-product__category {
    padding: max(0.875rem, calc(26 * var(--u))) max(0.875rem, calc(26 * var(--u))) 0;
    font-size: max(0.875rem, calc(17 * var(--u)));
    line-height: 1.3;

    @media (min-width: 64em) { min-block-size: calc(2lh + max(0.875rem, calc(26 * var(--u)))); }   /* две строки, чтобы карточки были одной высоты */
  }

  .catalog-product__title {
    padding: max(0.625rem, calc(18 * var(--u))) max(0.875rem, calc(26 * var(--u)));
    font-family: var(--font-sans);
    font-size: var(--fs-card-title);
    line-height: 1.25;

    @media (min-width: 64em) { min-block-size: calc(max(3lh, calc(108 * var(--u))) + max(1.25rem, calc(36 * var(--u)))); }   /* три строки */
  }

  .catalog-product__cart {
    gap: max(0.625rem, calc(18 * var(--u)));
    padding: 0 max(0.875rem, calc(26 * var(--u))) max(0.875rem, calc(26 * var(--u)));
  }

  :is(.catalog-product__add, .catalog\=product__add) :is(button, a) {
    min-block-size: max(2.5rem, calc(56 * var(--u)));
    gap: max(0.5rem, calc(12 * var(--u)));
    font-size: var(--fs-sm);
    background: #e8f1f3;
    border-radius: max(0.5rem, calc(12 * var(--u)));

    &::after {
      inline-size: max(1rem, calc(20 * var(--u)));
      block-size: max(1rem, calc(20 * var(--u)));
    }
  }

  /* «Страница 1» и номера страниц: кнопки 56, радиус 12, число 22 */
  .catalog-pager {
    margin-block-start: max(1rem, calc(28 * var(--u)));
    padding-block-start: max(0.5rem, calc(14 * var(--u)));
    font-size: var(--fs-sm);

    & .pagination { gap: max(0.5rem, calc(12 * var(--u))); }

    & .pagination :is(a, span) {
      min-inline-size: max(2.5rem, calc(56 * var(--u)));
      block-size: max(2.5rem, calc(56 * var(--u)));
      font-size: max(1rem, calc(22 * var(--u)));
      font-weight: var(--fw-medium);
      border-radius: max(0.5rem, calc(12 * var(--u)));
    }

    & .pagination .disabled :is(a, span) { background: var(--c-line); }

    /* «назад» — квадрат со стрелкой влево; «Следующая» — кнопка с текстом и стрелкой вправо */
    & .pagination .pagination__prev :is(a, span) {
      font-size: 0;

      &::before {
        content: "";
        inline-size: max(1rem, calc(22 * var(--u)));
        block-size: max(1rem, calc(22 * var(--u)));
        background: currentColor;
        scale: -1 1;
        -webkit-mask: var(--i-chevron-right) center / contain no-repeat;
        mask: var(--i-chevron-right) center / contain no-repeat;
      }
    }

    & .pagination .pagination__next a {
      display: inline-flex;
      align-items: center;
      gap: max(0.5rem, calc(12 * var(--u)));
      padding-inline: max(1rem, calc(22 * var(--u)));
      font-size: var(--fs-sm);
      font-weight: var(--fw-regular);
      color: var(--c-brand);

      &::after {
        content: "";
        inline-size: max(1rem, calc(20 * var(--u)));
        block-size: max(1rem, calc(20 * var(--u)));
        background: currentColor;
        -webkit-mask: var(--i-chevron-right) center / contain no-repeat;
        mask: var(--i-chevron-right) center / contain no-repeat;
      }
    }
  }

  /* «Кейс, спроектированный под ваше оборудование» */
  .catalog-about {
    --section-pad: max(2.5rem, calc(72 * var(--u)));

    & > .container { display: grid; gap: max(1.5rem, calc(44 * var(--u))); }
    & .section-head { margin: 0; }
    & .section-head h2 { line-height: 1.2; }

    & .info-grid {
      gap: max(1.5rem, calc(80 * var(--u)));

      @media (min-width: 64em) { grid-template-columns: repeat(3, 1fr); }

      & .icon { --icon-size: max(1.75rem, calc(36 * var(--u))); }

      & h3 {
        margin-block: max(0.75rem, calc(20 * var(--u)));
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
        line-height: 1.25;
      }

      & p { font-size: max(1rem, calc(22 * var(--u))); line-height: 1.55; }
    }

    /* варианты: линия сверху, четыре плашки по 569 */
    & .catalog-variants {
      display: grid;
      gap: max(0.75rem, calc(20 * var(--u)));
      padding-block-start: max(1.25rem, calc(30 * var(--u)));
      border-block-start: 1px solid var(--c-line);

      & h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-card-title);
        font-weight: var(--fw-medium);
      }

      & .chip-list {
        gap: max(0.75rem, calc(28 * var(--u)));
        margin: 0;

        @media (min-width: 64em) { grid-template-columns: repeat(4, 1fr); }
      }

      & .chip {
        gap: max(0.625rem, calc(14 * var(--u)));
        min-block-size: max(3rem, calc(74 * var(--u)));
        padding-inline: max(1rem, calc(24 * var(--u)));
        font-size: max(1rem, calc(22 * var(--u)));
        font-weight: var(--fw-medium);
        border-radius: max(0.5rem, calc(12 * var(--u)));

        &::before {
          inline-size: max(1.125rem, calc(24 * var(--u)));
          block-size: max(1.125rem, calc(24 * var(--u)));
        }
      }
    }
  }

  /* лента «Сконфигурируйте ваш кейс» в каталоге: 560 высотой, карточка 930 × 432 */
  .cta-band--tall {
    @media (min-width: 64em) {
      padding-block: max(2.5rem, calc(64 * var(--u)));

      & .split { align-items: start; min-block-size: 0; }

      & .cta-band__text { align-content: start; gap: max(1rem, calc(24 * var(--u))); }
    }

    & .cta-band__head {
      gap: max(0.75rem, calc(24 * var(--u)));
      --parent-gap: max(0.75rem, calc(24 * var(--u)));
      --eyebrow-gap: max(0.75rem, calc(24 * var(--u)));

      & h2 { font-size: max(2rem, calc(48 * var(--u))); line-height: 1.15; }
    }

    & .cta-band__text > p {
      font-weight: var(--fw-regular);
      max-inline-size: min(100%, max(30rem, calc(1220 * var(--u))));
    }

    & .contact-card {
      padding: max(1.25rem, calc(36 * var(--u)));

      @media (min-width: 64em) { min-block-size: max(16rem, calc(432 * var(--u))); }
    }
  }

  /* --- карточка товара ---
     «u» = 1px макета 2560 (--u в tokens). Галерея 1320 + зазор 80 + информация 960, отступы страницы 42 / 72. */

  /* крошки на странице товара: 14, шеврон-иконка вместо «>», зазор 12 */
  .container:has(> .product-page) .breadcrumb {
    gap: max(0.5rem, calc(12 * var(--u)));
    margin-block: var(--sp-m) var(--sp-m);
    padding: 0;
    font-size: max(0.8125rem, calc(14 * var(--u)));

    @media (min-width: 64em) {
      margin-block: max(1.5rem, calc(42 * var(--u))) max(1.25rem, calc(44 * var(--u)));
    }

    & li { gap: max(0.5rem, calc(12 * var(--u))); }

    & li + li::before {
      content: "";
      inline-size: max(0.5rem, calc(10 * var(--u)));
      block-size: max(0.5rem, calc(10 * var(--u)));
      background: #bdc0c3;
      -webkit-mask: var(--i-chevron-right) center / contain no-repeat;
      mask: var(--i-chevron-right) center / contain no-repeat;
    }

    & li:first-child a::before {
      inline-size: max(1rem, calc(18 * var(--u)));
      block-size: max(1rem, calc(18 * var(--u)));
    }
  }

  .product-page {
    display: grid;
    gap: var(--sp-l);
    align-items: start;
    padding-block-end: max(2.5rem, calc(72 * var(--u)));

    @media (min-width: 64em) {
      grid-template-columns: minmax(0, 1320fr) minmax(0, 960fr);
      column-gap: max(1.5rem, calc(80 * var(--u)));
    }
  }

  /* галерея: главное фото 1320×790, миниатюры 196×142 с зазором 18 */
  .product-gallery {
    display: grid;
    gap: max(0.75rem, calc(24 * var(--u)));
    min-inline-size: 0;
  }

  .product-gallery__main {
    display: block;
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: max(0.875rem, calc(20 * var(--u)));
    cursor: zoom-in;

    & img {
      inline-size: 100%;
      aspect-ratio: 1320 / 790;
      object-fit: cover;
    }
  }

  .product-gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: max(0.5rem, calc(18 * var(--u)));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* миниатюра: рамка 1px, у выбранной 2px акцентная; фото внутри не сдвигается */
  .product-gallery .thumbnail,
  .thumbnails .thumbnail {
    display: block;
    inline-size: clamp(4.5rem, 3rem + 6vw, 11rem);
    overflow: hidden;
    padding: max(3px, calc(5 * var(--u)));
    background: var(--c-white);
    border: 0;
    border-radius: max(0.5rem, calc(12 * var(--u)));
    box-shadow: inset 0 0 0 1px var(--c-line);
    transition: box-shadow var(--dur) var(--ease);

    @media (min-width: 64em) { inline-size: max(5.5rem, calc(196 * var(--u))); }

    &:hover,
    &[aria-current="true"] {
      box-shadow: inset 0 0 0 2px var(--c-accent);
    }

    & img {
      inline-size: 100%;
      aspect-ratio: 186 / 132;
      object-fit: cover;
      border-radius: max(0.375rem, calc(8 * var(--u)));
    }
  }

  /* информация: отступ сверху 10, между блоками 36 */
  .product-info {
    display: grid;
    gap: max(1.5rem, calc(36 * var(--u)));
    justify-items: stretch;
    min-inline-size: 0;
    padding-block-start: calc(10 * var(--u));
  }

  .product-info__head {
    display: grid;
    gap: max(0.75rem, calc(24 * var(--u)));
    justify-items: start;

    & h1 {
      font-size: max(1.75rem, calc(52 * var(--u)));
      font-weight: var(--fw-medium);
      line-height: 1.1154;                                        /* 116% макета */
      max-inline-size: none;
    }
  }

  .product-info__model {
    margin: 0;
    font-size: max(1rem, calc(20 * var(--u)));
    line-height: 1.4;
    color: var(--c-muted);
  }

  /* цена 48 SemiBold и кнопка 420×76 */
  .product-info__buy {
    display: grid;
    gap: max(1rem, calc(28 * var(--u)));
    justify-items: start;
    padding-block: max(0.25rem, calc(8 * var(--u))) max(0.25rem, calc(10 * var(--u)));
  }

  .product-info__price {
    margin: 0;
    font-family: var(--font-sans);
    font-size: max(1.75rem, calc(48 * var(--u)));
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;

    & .price-old {
      margin-inline-start: 0.4em;
      font-size: 0.6em;
      font-weight: var(--fw-regular);
      color: var(--c-muted);
      text-decoration: line-through;
    }
  }

  .cart-actions {
    inline-size: 100%;
    padding: 0;

    @media (min-width: 40em) { inline-size: min(100%, max(16rem, calc(420 * var(--u)))); }

    & #input-quantity { display: none; }

    & .btn,
    & #button-cart {
      inline-size: 100%;
    }
  }

  #button-cart,
  .cart-actions .btn {
    flex: 1;
    gap: max(0.375rem, calc(6 * var(--u)));                       /* 16 до текста, считая поля иконки */
    min-block-size: max(3.5rem, calc(76 * var(--u)));
    padding-inline: var(--sp-m);
    font-size: max(1.125rem, calc(24 * var(--u)));
    font-weight: var(--fw-medium);
    border-radius: max(0.625rem, calc(15 * var(--u)));
  }

  #button-cart {
    &::before {
      content: "";
      inline-size: max(2.25rem, calc(40 * var(--u)));            /* рамка 40, сама иконка 30 */
      block-size: max(2.25rem, calc(40 * var(--u)));
      background: currentColor;
      -webkit-mask: var(--i-hdr-cart) center / contain no-repeat;
      mask: var(--i-hdr-cart) center / contain no-repeat;
    }

    & .fa { display: none; }
  }

  /* описание: линия 1px, заголовок 28, текст Light 24 / 1.5, абзацы через 22 */
  .product-description,
  #tab-description {
    inline-size: 100%;
    padding-block-start: max(1.5rem, calc(36 * var(--u)));
    border-block-start: 1px solid var(--c-line);
    font-size: max(1rem, calc(24 * var(--u)));
    font-weight: var(--fw-light);
    line-height: 1.5;
    color: var(--c-muted);

    & h2 {
      margin-block-end: max(0.75rem, calc(22 * var(--u)));
      font-family: var(--font-sans);
      font-size: max(1.375rem, calc(28 * var(--u)));
      font-weight: var(--fw-medium);
      line-height: 1.3;
      color: var(--c-ink);
    }

    & h2:not(:first-child) { margin-block-start: max(1.5rem, calc(36 * var(--u))); }

    & .prose > * + *,
    & p + p { margin-block-start: max(0.75rem, calc(22 * var(--u))); }

    & .prose > :first-child { margin-block-start: 0; }

    & :is(ul, ol) {
      padding-inline-start: 1.2em;
      margin-block: max(0.75rem, calc(22 * var(--u))) 0;
    }

    & table {
      inline-size: 100%;
      margin-block: var(--sp-s);
      font-size: max(0.9375rem, calc(20 * var(--u)));

      & :is(td, th) {
        padding: var(--sp-2xs) var(--sp-xs);
        border-block-end: 1px solid var(--c-line);
        text-align: start;
      }
    }
  }

  /* --- корзина (ocStore #checkout-cart) --- */
  #checkout-cart,
  #checkout-checkout {
    padding-block-end: max(3rem, calc(140 * var(--u)));

    & h1 { margin-block-end: max(2rem, calc(90 * var(--u))); }

    & #content > :not(h1) {
      max-inline-size: var(--container-narrow);
      margin-inline: auto;
    }

    & h2 {
      font-size: var(--fs-lg);
      margin-block: var(--sp-l) var(--sp-xs);
    }

    & #content > p {
      font-size: var(--fs-sm);
      margin-block-end: var(--sp-s);
    }
  }

  /* таблица товаров */
  #checkout-cart .table-responsive table {
    inline-size: 100%;
    font-size: var(--fs-sm);

    & thead td {
      padding: var(--sp-s) var(--sp-xs);
      font-size: var(--fs-md);
      font-weight: var(--fw-medium);
      color: var(--c-ink);
      text-align: start;
      white-space: nowrap;
      border-block-end: 1px solid var(--c-line);
    }

    & tbody td:nth-child(n+5) { white-space: nowrap; }

    & tbody td {
      padding: var(--sp-s) var(--sp-xs);
      vertical-align: middle;
      border-block-end: 1px solid var(--c-line);
    }

    & td.text-center:first-child { text-align: center; }

    & .img-thumbnail {
      inline-size: clamp(3.5rem, 3rem + 2vw, 5rem);
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: var(--r-sm);
      margin-inline: auto;
    }

    & a {
      color: var(--c-ink);
      text-decoration: none;

      &:hover { color: var(--c-accent); }
    }

    & .text-danger { font-size: var(--fs-xs); }
  }

  /* количество + обновить + удалить */
  #checkout-cart .input-group {
    display: inline-flex;
    align-items: stretch;
    max-inline-size: 9rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    overflow: hidden;

    & .form-control {
      inline-size: 3.5rem;
      min-block-size: 2.25rem;
      padding: 0.2em 0.5em;
      font-size: var(--fs-xs);
      text-align: end;
      border: 0;
      border-radius: 0;
      background: var(--c-white);
    }

    & .input-group-btn {
      display: flex;
    }

    & .btn {
      min-block-size: 0;
      inline-size: 2.25rem;
      padding: 0;
      font-size: 0;
      background: var(--c-white);
      border: 0;
      border-inline-start: 1px solid var(--c-line);
      border-radius: 0;

      &::before {
        content: "";
        inline-size: 1.1rem;
        block-size: 1.1rem;
        background: var(--c-accent);
        -webkit-mask: var(--i-refresh) center / contain no-repeat;
        mask: var(--i-refresh) center / contain no-repeat;
      }

      &.btn-danger::before {
        -webkit-mask-image: var(--i-trash);
        mask-image: var(--i-trash);
      }

      &.btn-danger:hover::before { background: var(--c-danger); }

      & .fa { display: none; }
    }
  }

  /* на узком экране строки таблицы превращаются в карточки */
  @container table (max-width: 40rem) {
    #checkout-cart .table-responsive table {
      & thead { display: none; }

      & tbody tr {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "img name name"
          "img model model"
          "img qty total";
        gap: var(--sp-3xs) var(--sp-s);
        padding-block: var(--sp-s);
        border-block-end: 1px solid var(--c-line);
      }

      & tbody td {
        padding: 0;
        border: 0;
      }

      & td:nth-child(1) { grid-area: img; }
      & td:nth-child(2) { grid-area: name; font-weight: var(--fw-medium); }
      & td:nth-child(3) { grid-area: model; color: var(--c-muted); font-size: var(--fs-xs); }
      & td:nth-child(4) { grid-area: qty; }
      & td:nth-child(5) { display: none; }
      & td:nth-child(6) { grid-area: total; align-self: center; font-weight: var(--fw-semibold); }
    }
  }

  /* итоги корзины */
  .cart-totals table,
  #checkout-cart [class*="col-sm-offset"] table {
    inline-size: min(100%, 24rem);
    margin-inline-start: auto;
    margin-block: var(--sp-l);
    font-size: var(--fs-sm);

    & td {
      padding: var(--sp-2xs) 0;
      border-block-end: 1px solid var(--c-line);
    }

    & tr:last-child td {
      font-size: var(--fs-md);
      font-weight: var(--fw-semibold);
      color: var(--c-ink);
      border: 0;
    }

    & .text-right { text-align: end; }
  }

  /* кнопки «Продолжить покупки» / «Оформить заказ» */
  :is(#checkout-cart, #checkout-checkout) .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-s);
    margin-block-start: var(--sp-xl);

    & .pull-left, & .pull-right { float: none; }

    & .btn {
      min-block-size: calc(var(--btn-h) * 1.1);
      font-size: var(--fs-md);
    }
  }

  /* аккордеоны: купон, доставка, сертификат, шаги оформления */
  .panel-group {
    display: grid;
    gap: var(--sp-2xs);                                         /* 10 между шагами */
  }

  .panel {
    background: var(--c-white);
    border: 1px solid var(--c-accent);
    border-radius: var(--r-sm);
    overflow: hidden;
  }

  .panel-heading {
    padding: 0;
  }

  .panel-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);                                    /* 16 */
    font-weight: var(--fw-regular);
    line-height: 1.3;
    color: var(--c-ink);

    & > a,
    & > span {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-2xs);
      padding: var(--sp-xs) var(--sp-s);                        /* 15 / 20 */
      color: inherit;
      text-decoration: none;
    }

    & > a::after {
      content: "";
      flex-shrink: 0;
      inline-size: max(1rem, calc(20 * var(--u)));
      block-size: max(1rem, calc(20 * var(--u)));
      background: var(--c-accent);
      -webkit-mask: var(--i-plus) center / contain no-repeat;
      mask: var(--i-plus) center / contain no-repeat;
    }

    & > a[aria-expanded="true"]::after {
      -webkit-mask-image: var(--i-minus);
      mask-image: var(--i-minus);
    }

    & .fa { display: none; }
  }

  /* шаг оформления ещё недоступен — без ссылки */
  #checkout-checkout .panel-title:not(:has(a)) {
    padding: var(--sp-xs) var(--sp-s);
    color: var(--c-ink);

    &::after {
      content: "";
      float: inline-end;
      inline-size: max(1rem, calc(20 * var(--u)));
      block-size: max(1rem, calc(20 * var(--u)));
      background: var(--c-accent);
      -webkit-mask: var(--i-plus) center / contain no-repeat;
      mask: var(--i-plus) center / contain no-repeat;
    }
  }

  /* заголовки шагов — h2, но выглядят как строка аккордеона */
  #checkout-checkout h2.panel-title { margin: 0; font-size: var(--fs-xs); }

  .panel-body {
    padding: var(--sp-m) var(--sp-s);                           /* 30 / 20 */
    border-block-start: 1px solid rgb(24 93 112 / 0.2);
    font-size: var(--fs-xs);

    & .form-group {
      display: grid;
      gap: var(--sp-2xs);
      margin-block-end: var(--sp-2xs);

      & > label { font-size: var(--fs-xs); color: var(--c-ink); }
    }

    /* поля: 43px по макету, подсказка 14px */
    & .form-control {
      min-block-size: max(2.5rem, calc(43 * var(--u)));
      padding-inline: var(--sp-2xs);
      font-size: var(--fs-2xs);
      background: var(--c-white);
      border: 1px solid rgb(24 93 112 / 0.2);
      border-radius: var(--r-sm);

      &::placeholder { color: #bdc0c3; }
    }

    /* «Введите код купона» + поле + кнопка в одну строку */
    & .input-group {
      display: flex;
      flex: 1;

      & .form-control {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
      }

      & .btn {
        border-start-start-radius: 0;
        border-end-start-radius: 0;
      }
    }

    & .form-group:has(> .input-group) {
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: var(--sp-m);
      margin: 0;

      @media (max-width: 35.99em) { grid-template-columns: 1fr; }
    }

    /* маленькие кнопки внутри шагов: 16px, отступы 5 / 10, скругление 5 */
    & :is(.btn, input[type="button"], button) {
      min-block-size: 0;
      padding: max(0.25rem, calc(5 * var(--u))) max(0.5rem, calc(10 * var(--u)));
      font-size: var(--fs-xs);
      font-weight: var(--fw-regular);
      line-height: 1.3;
      border: 1px solid rgb(24 93 112 / 0.2);
      border-radius: max(0.25rem, calc(5 * var(--u)));
    }
  }

  /* шаг 1: новый покупатель / зарегистрированный */
  #collapse-checkout-option .row,
  #checkout-checkout .panel-body > .row {
    display: grid;
    gap: var(--sp-xl);
    padding-inline: var(--sp-xs);

    @media (min-width: 48em) { grid-template-columns: 1fr 1fr; }

    & h2 {
      margin-block: 0 var(--sp-2xs);
      font-family: var(--font-sans);
      font-size: var(--fs-sm);                                  /* 20 */
      font-weight: var(--fw-medium);
    }

    & p { margin-block-end: var(--sp-2xs); }

    /* в макете у полей нет подписей, только подсказки внутри */
    & .control-label {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    & .radio label {
      display: flex;
      align-items: center;
      gap: var(--sp-xs);
      margin-block: var(--sp-2xs);
      cursor: pointer;
    }

    & a:not(.btn) {
      font-size: var(--fs-xs);
      color: var(--c-ink);
    }
  }

  /* таблица подтверждения заказа */
  #collapse-checkout-confirm table {
    inline-size: 100%;
    font-size: var(--fs-sm);

    & td {
      padding: var(--sp-2xs) var(--sp-xs);
      border-block-end: 1px solid var(--c-line);
    }

    & thead td { font-weight: var(--fw-semibold); color: var(--c-ink); }
  }
  /* --- тонкое начертание (Light) там, где оно так в макете ---
     Остальные тонкие тексты заданы в своих блоках выше через font-weight: 300. */
  :is(
    .hero__text,
    .brand-list li,
    .video-proof__body > p,
    .video-proof__list li,
    .page-head > p,
    .empty-state p,
    .product-description .prose,
    .site-footer__bottom > p,
    .site-footer__disclaimer
  ) { font-weight: var(--fw-light); }
}


/* ===== совместимость с ocStore ===== */
@layer ocstore {
  #content {
    min-inline-size: 0;
  }

  /* ошибки валидации */
  .text-danger {
    color: var(--c-danger);
    font-size: var(--fs-xs);
  }

  .has-error :is(.form-control, input, textarea, select) {
    border-color: var(--c-danger);
  }

  .form-group.required > label::before,
  .required > .control-label::before {
    content: "* ";
    color: var(--c-danger);
  }

  /* кнопки ocStore → кнопки дизайна */
  .btn-primary {
    --btn-bg: var(--c-accent);
    --btn-fg: var(--c-white);
    --btn-bd: var(--c-accent);

    &:hover {
      --btn-bg: var(--c-accent-hover);
      --btn-bd: var(--c-accent-hover);
    }
  }

  .btn-default {
    --btn-fg: var(--c-accent);
    --btn-bd: var(--c-accent);

    &:hover {
      --btn-bg: var(--c-accent);
      --btn-fg: var(--c-white);
    }
  }

  .btn-lg:not(#cart > button) {
    min-block-size: calc(var(--btn-h) * 1.15);
    font-size: var(--fs-md);
  }


  /* старые иконки font-awesome скрыты: всё рисуется через mask */
  .fa { font-style: normal; }

  /* бейдж reCAPTCHA не перекрывает jivo */
  .grecaptcha-badge {
    visibility: hidden;
  }
}


/* ===== утилиты ===== */
@layer utilities {
  .visually-hidden,
  .sr-only {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .hidden { display: none !important; }

  @media (max-width: 47.99em) {
    .hide-mobile { display: none !important; }
  }

  @media (min-width: 48em) {
    .show-mobile { display: none !important; }
  }

  .mt-0 { margin-block-start: 0 !important; }
  .mb-0 { margin-block-end: 0 !important; }
  .mt-l { margin-block-start: var(--sp-l) !important; }
  .mb-l { margin-block-end: var(--sp-l) !important; }
  .text-center { text-align: center; }
}


/* меньше анимаций, если пользователь так настроил систему */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  @view-transition {
    navigation: none;
  }
}

/* печать: без шапки, меню и футера */
@media print {
  .topbar, .site-header, .site-footer, .cta-band, #cart, .breadcrumb, .alert-dismissible {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

.category-description{
  display: none !important;
}