/*!
 * RESIN LAB — мобільний шар (M-шар). Етап 1: фундамент.
 * ------------------------------------------------------------------------------------------
 * ПРАВИЛО: десктоп (≥1024px) не змінюється ні на піксель.
 *   • ≥1024px  — усі .m-* приховані (перший блок нижче), більше нічого.
 *   • <1024px  — усі інші правила файлу, лише для <body class="m-page">.
 * Режими сторінки:
 *   body.m-page              — M-шар готовий: полотно (#canvas / секції головної / #footer) приховане.
 *   body.m-page.m-interim    — проміжний стан (контент сторінки ще не перебудовано): нові хедер, меню,
 *                              чипи і футер, а між ними — десктопне полотно в масштабі.
 * Кольори й шрифти — лише існуючі на сайті (див. MOBILE_REPORT.md → токени).
 * ------------------------------------------------------------------------------------------
 */

@media (min-width: 1024px) {
  main.m, .m-bar, .m-drawer, .m-frame { display: none !important; }
}

@media (max-width: 1023.98px) {

  /* ============ токени ============ */
  body.m-page {
    --m-black: #000; --m-white: #FFFFFF; --m-panel: #F5F5F5;
    --m-yellow: #FFEE00; --m-yellow-press: #F2DF00;
    --m-pill: #F1F1F1; --m-pill-press: #E6E6E6; --m-tag: #DADADB; --m-chip-border: #ECECEC;
    --m-line: #CACACA; --m-grey: #727272; --m-field: #B3B3B3; --m-error: #D32F2F;
    --m-f-head: 'Unbounded', sans-serif;
    --m-f-mono: 'IBM Plex Mono', ui-monospace, monospace;
    --mu: calc(min(100vw, 430px) / 390);   /* 1 px макета «Вспливаюче меню остання версія» (ширина 390) */
    --m-bar-h: calc(63.64 * var(--mu) + env(safe-area-inset-top, 0px));   /* хедер за макетом: лінія під ним y 63.64 */
    --m-hs: 1;                /* лінії макета волосяні: 1 фізичний піксель екрана (масштаб 1px-лінії) */
    --m-edge: calc(10 * var(--mu));   /* вертикалі рамки від краю (макет: x 10.5 / 379.5) */
    --m-pad: 20px;            /* поля сторінки */
    --m-gap-sec: 48px;        /* між секціями */
    --m-fs-h1: clamp(24px, 6.4vw, 30px);
    --m-fs-h2: clamp(20px, 5.4vw, 24px);
    --m-fs-h3: 16px;
    --m-fs-body: 15px;
    --m-fs-small: 13px;
    --m-fs-btn: 13px;
    --m-r: 8px;
    -webkit-tap-highlight-color: transparent;
  }

  @media (min-resolution: 2dppx) { body.m-page { --m-hs: .5; } }
  @media (min-resolution: 3dppx) { body.m-page { --m-hs: .334; } }

  /* ============ що ховаємо ============ */
  body.m-page .rlh { display: none !important; }                       /* десктопний хедер */
  body.m-page:not(.m-interim) #canvas,
  body.m-page:not(.m-interim) #page > .hero,
  body.m-page:not(.m-interim) #page > .sec,
  body.m-page:not(.m-interim) #page > .frame { display: none !important; }
  body.m-page #footer,
  body.m-page #page > .prefooter { display: none !important; }                    /* футер — мобільний .m-footer */

  /* ============ базова сторінка ============ */
  html.m-has-bar { scroll-padding-top: calc(var(--m-bar-h) + 8px); }
  html.m-has-bar body.m-page { padding-top: var(--m-bar-h); background: #fff; }
  main.m { display: block; font-family: var(--m-f-mono); font-size: var(--m-fs-body); line-height: 1.55; color: #000; }
  main.m *, .m-bar *, .m-drawer * { box-sizing: border-box; }
  .m-bar, .m-drawer { box-sizing: border-box; }
  /* базові скидання — через :where(), щоб будь-який клас компонента їх перекривав */
  :where(main.m) img { max-width: 100%; height: auto; display: block; }
  :where(main.m) :where(p, figure) { margin: 0; }
  :where(main.m) ul { margin: 0; padding: 0; list-style: none; }
  :where(main.m) a { color: inherit; text-decoration: none; }
  .m-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* проміжний режим: між мобільними хедером/чипами і футером — десктопне полотно */
  body.m-page.m-interim { display: flex; flex-direction: column; }
  body.m-page.m-interim > main.m { display: contents; }
  body.m-page.m-interim > main.m > .m-subnav { order: -1; }
  body.m-page.m-interim > main.m > .m-footer { order: 1; }
  body.m-page.m-interim #page { overflow: hidden; }
  body.m-page.m-interim #canvas,
  body.m-page.m-interim #page > .hero { margin-top: calc(-1 * var(--rlh-h, 0px)); }

  /* ============ рамка бренду ============ */
  .m-frame { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; pointer-events: none; z-index: 90; }
  .m-frame::before, .m-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--m-line); transform: scaleX(var(--m-hs)); transform-origin: 100% 0; }
  .m-frame::before { left: var(--m-edge); }
  .m-frame::after { right: var(--m-edge); }

  .m-sec { position: relative; padding: calc(var(--m-gap-sec) / 2) var(--m-pad); }
  .m-sec:first-child, .m-subnav + .m-sec { padding-top: 24px; }
  .m-sec + .m-sec::before { content: ""; position: absolute; left: var(--m-edge); right: var(--m-edge); top: 0; height: 1px; background: var(--m-line); }

  /* ============ типографіка ============ */
  .m-h1 { font-family: var(--m-f-head); font-weight: 600; font-size: var(--m-fs-h1); line-height: 1.15; margin: 0 0 20px; overflow-wrap: anywhere; }
  .m-h2 { font-family: var(--m-f-head); font-weight: 600; font-size: var(--m-fs-h2); line-height: 1.2; margin: 0 0 16px; }
  .m-h3 { font-family: var(--m-f-head); font-weight: 600; font-size: var(--m-fs-h3); line-height: 1.25; margin: 0 0 8px; }
  .m-note { font-size: var(--m-fs-small); line-height: 1.4; color: var(--m-grey); }
  main.m b.m { display: inline; font-weight: 500; }

  /* ============ кнопки ============ */
  .m-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
    border: 0; border-radius: 999px; background: var(--m-pill); color: #000; cursor: pointer;
    font-family: var(--m-f-mono); font-weight: 500; font-size: var(--m-fs-btn); line-height: 1.2;
    letter-spacing: .075em; text-transform: uppercase; text-align: center; text-decoration: none;
    -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none;
  }
  .m-btn--sm { min-height: 44px; padding: 0 18px; }
  .m-btn--block { display: flex; width: 100%; }
  .m-btn--yellow { background: var(--m-yellow); }
  .m-btn--grey { background: var(--m-pill); }
  .m-btn--white { background: #fff; }
  .m-btn--black { background: #000; color: #fff; }
  .m-btn--yellow:active { background: var(--m-yellow-press); }
  .m-btn--grey:active, .m-btn--white:active { background: var(--m-pill-press); }
  .m-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }

  /* ============ хедер і меню — макет «Вспливаюче меню остання версія» (390×844), 1 в 1 ============
   * Усі розміри — у px макета × var(--mu) (див. токени): 1 px макета = 1 px на ширині 390,
   * пропорційно на 320–430, далі — як на 430. Лінії — завжди 1px.
   * Порядок зліва направо: лого (прив'язане до лівого краю) … телефон → telegram → бургер (прив'язані до правого краю, на широких екранах не з'їжджають).
   * Координати в коментарях — px макета. */
  .m-bar {
    position: fixed; left: 0; right: 0; top: 0; z-index: 100; height: var(--m-bar-h);
    padding-top: env(safe-area-inset-top, 0px); background: #fff;
    /* власний композитний шар: у деяких WebKit-обгортках (внутрішні браузери месенджерів, низький заряд/Low Power Mode)
       position:fixed без цього інколи «пропускає» прокручений контент над собою або зникає на мить */
    transform: translateZ(0); -webkit-transform: translateZ(0);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .m-bar::before, .m-bar::after, .m-drawer::before, .m-drawer::after {   /* вертикалі рамки (x 10.5 / 379.5) */
    content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--m-line); pointer-events: none; z-index: 3;
    transform: scaleX(var(--m-hs)); transform-origin: 100% 0;
  }
  .m-bar::before, .m-drawer::before { left: var(--m-edge); }
  .m-bar::after, .m-drawer::after { right: var(--m-edge); }
  .mn-head { position: relative; height: calc(63.64 * var(--mu)); }
  .mn-head::before, .mn-head::after {         /* горизонталі y 20.5 і 63.64 — на всю ширину, поверх логотипа */
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--m-line); z-index: 2; pointer-events: none;
    transform: scaleY(var(--m-hs)); transform-origin: 0 100%;
  }
  .mn-head::before { top: calc(20.5 * var(--mu) - .5px); }
  .mn-head::after { top: calc(63.64 * var(--mu) - .5px); }
  .mn-logo {                                  /* ліва половина смуги (x 10.6–194.9), на всю висоту рядка */
    position: absolute; left: var(--m-edge); top: 0; width: calc(184.3 * var(--mu)); height: 100%; display: block;
  }
  .mn-logo__b {                               /* чорний блок — заповнює висоту рядка між лініями y 20.6–63.64 */
    position: absolute; left: 0; right: 0; top: calc(20.6 * var(--mu)); height: calc(43.04 * var(--mu)); background: #000;
  }
  .mn-logo svg { display: block; width: 100%; height: 100%; fill: #fff; }
  /* риски-розділювача між лого і колами немає: центральна вертикаль починається з рядка підменю (.m-dd-row) */
  .mn-circ {                                  /* зона натискання 44×44, видиме коло — .mn-circ__c */
    position: absolute; width: 44px; height: 44px; margin: -22px -22px 0 0; padding: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #000; -webkit-tap-highlight-color: transparent; border-radius: 50%;
    z-index: 1; top: calc(42.07 * var(--mu));
  }
  .mn-circ__c {
    position: relative; display: block; flex: none; border-radius: 50%; background: var(--m-pill);
    width: calc(30.47 * var(--mu)); height: calc(30.47 * var(--mu));
  }
  .mn-circ__c svg { display: block; width: 100%; height: 100%; fill: #000; }
  .mn-circ--phone { right: calc(111.73 * var(--mu)); }  /* центр кола x 278.27 = 111.73 від правого краю */
  .mn-circ--tg { right: calc(73.23 * var(--mu)); }      /* центр кола x 316.77 = 73.23 від правого краю */
  .mn-circ--menu { right: calc(34.16 * var(--mu)); }    /* центр кола x 355.84 = 34.16 від правого краю */
  .mn-circ--menu .mn-circ__c { width: calc(30.99 * var(--mu)); height: calc(30.99 * var(--mu)); }
  .mn-circ--menu i {                          /* три лінії 15×1, y 37/42/47 = центр ±5 */
    position: absolute; left: 50%; top: 50%; width: calc(15 * var(--mu)); height: 1px; margin: -.5px 0 0 calc(-7.5 * var(--mu)); background: #000;
  }
  .m-burger i:nth-child(1) { transform: translateY(calc(-5 * var(--mu))); }
  .m-burger i:nth-child(3) { transform: translateY(calc(5 * var(--mu))); }
  /* відкрите меню: у тому ж колі — хрестик із двох ліній 15×1 (рішення власника) */
  .m-close i:nth-child(1) { transform: rotate(45deg); }
  .m-close i:nth-child(2) { transform: rotate(-45deg); }
  .mn-circ:active .mn-circ__c { background: var(--m-pill-press); }
  .mn-circ:focus-visible, .mn-logo:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

  /* ============ меню .m-drawer ============ */
  .m-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; z-index: 200; background: #fff; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
    font-family: var(--m-f-mono); color: #000; overscroll-behavior: contain;
    transform: translateZ(0); -webkit-transform: translateZ(0);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .m-drawer.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
  .m-drawer__top { flex: none; position: relative; height: var(--m-bar-h); padding-top: env(safe-area-inset-top, 0px); }
  .m-drawer__nav { position: relative; flex: 1 1 auto; overflow: hidden; }
  .m-panel {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    background: #fff; transform: translateX(100%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .m-panel.is-left { transform: translateX(-30%); }
  .m-panel.is-current { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .mn-list { list-style: none; margin: 0; padding: 0; }
  .mn-list li { position: relative; }
  .mn-list li::after {                        /* лінія під рядком: y 113.5, 160.5 … 395.5 */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--m-line); pointer-events: none;
    transform: scaleY(var(--m-hs)); transform-origin: 0 100%;
  }
  .mn-row {                                   /* ряд 47 px: 46 вміст + 1 лінія */
    position: relative; display: flex; align-items: center; width: 100%; height: calc(47 * var(--mu)); margin: 0;
    padding: 0 0 1px calc(23.32 * var(--mu)); border: 0; background: transparent; cursor: pointer; text-align: left;
    color: #000; text-decoration: none; -webkit-tap-highlight-color: transparent; font: inherit;
  }
  .mn-pill {                                  /* пігулка #F1F1F1, висота 30.47, поля 13.85 */
    display: inline-flex; align-items: center; height: calc(30.47 * var(--mu)); padding: 0 calc(13.85 * var(--mu));
    border-radius: 999px; background: transparent; white-space: nowrap;
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(10.67 * var(--mu)); line-height: 1;
    letter-spacing: .0904em; text-transform: uppercase; color: #000;
  }
  .mn-pill.raw { text-transform: none; }
  .mn-pill__t { position: relative; top: -.026em; }          /* центр великих літер = центр пігулки */
  .mn-row:active .mn-pill { background: transparent; opacity: .55; }
  .mn-row:focus-visible { outline: 2px solid #000; outline-offset: -4px; }

  @media (max-height: 560px) {             /* ландшафт телефону: меню прокручується цілком */
    .m-drawer { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .m-drawer__nav { flex: none; min-height: calc(14 * 47 * var(--mu)); }   /* найдовший рівень (кейси) */
  }
  @media (prefers-reduced-motion: reduce) {
    .m-drawer, .m-drawer.is-open, .m-panel, .m-panel.is-current { transition: none; }
  }

  /* ============ чипи підменю .m-subnav ============ */
  .m-subnav { padding: 12px 0 0; }
  .m-subnav[hidden] { display: none; }
  .m-chips { position: relative; }
  .m-chips + .m-chips { margin-top: 0; }
  .m-chips__row {
    display: flex; gap: 8px; list-style: none; margin: 0; padding: 0 var(--m-pad);
    overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--m-pad);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .m-chips__row::-webkit-scrollbar { display: none; }
  .m-chips__row li { flex: none; scroll-snap-align: start; display: flex; align-items: center; }
  .m-chip {
    display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 999px;
    border: solid transparent; border-width: 4px 0; background: var(--m-pill) padding-box;   /* видно 36px, зона натискання 44px */
    color: #000; white-space: nowrap;
    font-family: var(--m-f-mono); font-weight: 500; font-size: 13px; letter-spacing: .075em; text-transform: uppercase;
  }
  .m-chip.raw { text-transform: none; }
  .m-chip.is-active { background-color: #000; color: #fff; }
  .m-chip:active { background-color: var(--m-pill-press); }
  .m-chip.is-active:active { background-color: #000; }
  .m-chip:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
  .m-chips::before, .m-chips::after {        /* м'які краї — підказка прокрутки */
    content: ""; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 1;
  }
  .m-chips::before { left: calc(var(--m-edge) + 1px); background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
  .m-chips::after { right: calc(var(--m-edge) + 1px); background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
  .m-chips.has-l::before, .m-chips.has-r::after { opacity: 1; }


  /* ============ карусель .m-carousel ============ */
  .m-carousel { position: relative; margin: 0 calc(-1 * var(--m-pad)); }
  .m-carousel__track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0;
    padding: 0 var(--m-pad); scroll-padding: 0 var(--m-pad); scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .m-carousel__track::-webkit-scrollbar { display: none; }
  .m-carousel__track:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
  .m-carousel__track > * { flex: 0 0 84%; scroll-snap-align: start; }
  .m-carousel__ui { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; padding: 0 var(--m-pad); }
  .m-carousel__count { font-family: var(--m-f-mono); font-size: 13px; color: #000; min-width: 3.5em; text-align: center; }
  .m-carousel__arrow {
    display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--m-pill); cursor: pointer;
    font-family: var(--m-f-mono); font-size: 20px; line-height: 1; color: #000;
  }
  .m-carousel__arrow:disabled { opacity: .35; cursor: default; }
  @media (hover: hover) and (pointer: fine) { .m-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; } }

  /* ============ футер .m-footer — макет «футер 1» (390), 1 в 1 ============
   * Ряди по 29.86 px макета × var(--mu) (як рядки меню), лінії #404040 на всю ширину, вертикалі рамки #404040.
   * Групи — <details> (працює без JS): закрито — «+» білий, підпис білий; відкрито — «×», підпис #404040,
   * пункти з відступом під заголовком (без ліній між ними). Далі — порожній ряд, 3 контакти, логотип.
   * Футер вище за .m-frame (z 91), тож на ньому видно лише його власні вертикалі #404040. */
  .m-footer {
    --f-row: calc(29.86 * var(--mu)); --f-line: #404040;
    position: relative; z-index: 91; background: #000; color: #fff;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(11.33 * var(--mu)); line-height: 1; letter-spacing: .0904em;   /* 8,5pt = 11.33px */
  }
  .m-footer::before, .m-footer::after {       /* вертикалі рамки x 10.5 / 379.5 */
    content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--f-line); pointer-events: none; z-index: 2;
    transform: scaleX(var(--m-hs)); transform-origin: 100% 0;
  }
  .m-footer::before { left: var(--m-edge); }
  .m-footer::after { right: var(--m-edge); }
  .m-footer a { color: #fff; text-decoration: none; }
  .m-footer__gap, .m-footer__h, .m-footer__contacts li { position: relative; }
  .m-footer__gap { height: var(--f-row); }
  .m-footer__gap::after, .m-footer__h::after, .m-footer__group[open] .m-footer__list::after, .m-footer__contacts li::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--f-line); pointer-events: none;
    transform: scaleY(var(--m-hs)); transform-origin: 0 100%;
  }
  .m-footer__h {
    display: flex; align-items: center; height: var(--f-row); padding: 0 0 0 calc(var(--m-edge) + 13.8 * var(--mu));
    list-style: none; cursor: pointer; text-transform: uppercase; color: #fff; -webkit-tap-highlight-color: transparent;
  }
  .m-footer__h::-webkit-details-marker { display: none; }
  .m-footer__h::marker { content: ""; }
  .m-footer__t, .m-footer__a > span, .m-footer__c > span { position: relative; top: -.026em; }
  .m-footer__group[open] > .m-footer__h { color: var(--f-line); }
  .m-footer__pm {                              /* «+» 6.17 × 6.17, лінії 1px, центр x 360.45 (19 від правої вертикалі) */
    position: absolute; top: 50%; right: calc(var(--m-edge) + 19.04 * var(--mu) - 3.085 * var(--mu));
    width: calc(6.17 * var(--mu)); height: calc(6.17 * var(--mu)); margin-top: calc(-3.085 * var(--mu));
  }
  .m-footer__pm::before, .m-footer__pm::after { content: ""; position: absolute; background: #fff; }
  .m-footer__pm::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
  .m-footer__pm::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
  .m-footer__group[open] .m-footer__pm { transform: rotate(45deg); }   /* «×» 4.36 × 4.36 */
  .m-footer__list { list-style: none; margin: 0; padding: 0; position: relative; }
  .m-footer__a, .m-footer__c { display: flex; align-items: center; height: var(--f-row); white-space: nowrap; }
  .m-footer__a { padding-left: calc(var(--m-edge) + 33.2 * var(--mu)); text-transform: uppercase; }
  .m-footer__contacts { list-style: none; margin: 0; padding: 0; }
  .m-footer__c { padding-left: calc(var(--m-edge) + 13.8 * var(--mu)); }
  .m-footer__logo { display: flex; align-items: center; justify-content: center; height: calc(59.71 * var(--mu)); }
  .m-footer__logo-b { display: block; width: calc(184.3 * var(--mu)); height: calc(43.04 * var(--mu)); }
  .m-footer__logo svg { display: block; width: 100%; height: 100%; fill: #fff; }
  .m-footer a:focus-visible, .m-footer__h:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }


  /* ============ сторінка товару — мобільний макет «CR1» (Corel SVG/PDF, 390 × 4052), 1 в 1 ============
   * Усі розміри — px макета × var(--pu) (= --mu: 1 px макета на ширині 390, пропорційно 320–430, далі як на 430).
   * .m-pin — колонка макета шириною 390 px макета (на 431–767 — по центру; планшет — ширша, сітка в 3 колонки).
   * Вертикаль тексту — від лінії основи макета: IBM Plex Mono при line-height 1.3 → лінія основи = верх рядка + 1.025em;
   * Unbounded при line-height 1 → верх + .875em; дрібні поправки (≈1 px) — за звіркою з PDF на 390 @4x. Координати в коментарях — px макета. */
  body.m-page { --pu: var(--mu); --p-fs: calc(14.67 * var(--pu)); --p-lh: calc(19.07 * var(--pu)); }
  .m-ps { position: relative; }
  .m-ps + .m-ps::before {                       /* лінії-розділювачі на всю ширину екрана (y 1200.4 / 2606.1 / 3438.7 / 3659.5) */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--m-line); pointer-events: none;
    transform: scaleY(var(--m-hs)); transform-origin: 0 0;
  }
  .m-pin { position: relative; width: calc(390 * var(--pu)); max-width: 100%; margin: 0 auto; font-family: var(--m-f-mono); font-weight: 400; font-size: var(--p-fs); line-height: var(--p-lh); color: #000; }
  .m-p-h1, .m-p-h2 {
    margin: 0; font-family: var(--m-f-head); font-weight: 600; font-size: calc(20 * var(--pu)); line-height: 1; letter-spacing: 0;
    text-align: center; color: #000; height: calc(20 * var(--pu)); white-space: nowrap;
  }

  /* --- перший екран: галерея → назва → опис → розміри → переваги → кнопка --- */
  .m-ps--top { padding: calc(11.33 * var(--pu)) 0 calc(30.25 * var(--pu)); }          /* фото: y 104.77 */
  main.m .m-gallery { margin: 0 auto; width: calc(347.71 * var(--pu)); }
  .m-gallery .m-carousel__track { gap: 0; padding: 0; scroll-padding: 0; border-radius: calc(7.5 * var(--pu)); }
  .m-gallery .m-carousel__track > * { flex: 0 0 100%; }
  .m-gallery__slide { margin: 0; aspect-ratio: 347.71 / 529.73; overflow: hidden; border-radius: calc(7.5 * var(--pu)); }
  main.m .m-gallery__slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .m-gallery__ui { display: flex; justify-content: center; height: calc(5.54 * var(--pu)); margin-top: calc(16.53 * var(--pu)); }  /* крапки: центр y 653.8 */
  .m-gallery .m-carousel__dots { display: flex; gap: calc(7.04 * var(--pu)); }
  .m-gallery .m-carousel__dots i {                /* Ø 5.54, крок 12.58; активна — чорна, інші — #CACACA */
    display: block; width: calc(5.54 * var(--pu)); height: calc(5.54 * var(--pu)); border-radius: 50%; background: var(--m-line); cursor: pointer;
  }
  .m-gallery .m-carousel__dots i.is-on { background: #000; }
  .m-p-h1 { margin-top: calc(25.53 * var(--pu)); }                                  /* лінія основи y 698.85 */
  .m-p-lead, .m-p-spec-h, .m-p-spec, .m-p-bul { margin-left: calc(27.75 * var(--pu)); width: calc(338 * var(--pu)); max-width: calc(100% - 27.75 * var(--pu)); }
  .m-p-bul { width: calc(var(--p-bul-w, 346) * var(--pu)); }   /* --p-bul-w — зі style .m-ps--top рядки як у макеті: опис — до 38 знаків, переваги — до 37 знаків (текст до x 369); CR5 — 351, рядок «… Cordura 1000D» цілим */
  .m-p-lead { margin-top: calc(21.41 * var(--pu)); }
  .m-p-lead { width: calc(var(--p-lead-w, 338) * var(--pu)); }                     /* --p-lead-w — зі style .m-ps--top (CR3: 346, рядок «… фурнітурою YKK» цілим, як у макеті) */                                /* 1-й рядок — основа y 737.8, крок 19.07 */
  .m-p-spec-h { margin-top: calc(var(--p-gap-spec, 22.52) * var(--pu)); margin-bottom: 0; font: inherit; font-weight: 500; letter-spacing: 0; }   /* «РОЗМІРИ» — основа y 893.8; IBM Plex Mono Medium (рішення власника) */
  main.m .m-p-spec, main.m .m-p-bul { margin-bottom: 0; }
  .m-p-bul { margin-top: calc(var(--p-gap-bul, 22.67) * var(--pu)); }           /* 1-й пункт — основа y 992.8 */
  /* --p-gap-spec / --p-gap-bul — відступи сторінки (style на .m-ps--top, з product.json «gaps»); без них — як CR1 */
  .m-p-bul > li { position: relative; padding-left: calc(15.75 * var(--pu)); }     /* текст x 43.5, маркер x 26.65 */
  .m-p-bul > li::before { content: "•"; position: absolute; left: calc(-2.1 * var(--pu)); top: 0; }
  .m-p-note { display: block; color: var(--m-grey); margin-left: calc(var(--p-gap-note, 0) * var(--pu)); }   /* --p-gap-note: CR2 −5.14 (x 38.36 у макеті) */
  .m-p-cta {                                    /* жовта пігулка 150.16 × 31.23 по центру (x 195), текст 9.87 / 500 / .075em */
    position: relative; display: flex; align-items: center; justify-content: center;
    width: calc(150.16 * var(--pu)); height: calc(31.23 * var(--pu)); margin: 0 auto; border-radius: 999px;
    background: var(--m-yellow); color: #000; text-decoration: none; -webkit-tap-highlight-color: transparent;
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(9.87 * var(--pu)); line-height: 1; letter-spacing: .075em;
    text-transform: uppercase; white-space: nowrap;
  }
  .m-p-cta::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }   /* зона натискання ≥44px */
  .m-p-cta__t { position: relative; top: -.026em; padding-left: .075em; }
  .m-p-cta:active { background: var(--m-yellow-press); }
  .m-p-cta:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000; }
  .m-ps--top .m-p-cta { margin-top: calc(26.95 * var(--pu)); }                     /* верх y 1138.2 */

  /* --- «Приклад кастому»: три картки одна під одною, виноски — на фото --- */
  .m-ps--ex { padding: calc(25.36 * var(--pu)) 0 calc(30.88 * var(--pu)); }        /* заголовок — основа y 1243.25 */
  .m-ex {                                       /* картка #FAFAFA 348.72 × 416.75, радіус 12.32, по осі галереї (x 20.64) */
    position: relative; width: calc(348.72 * var(--pu)); height: calc(416.75 * var(--pu)); margin: calc(25.44 * var(--pu)) auto 0;
    background: #FAFAFA; border-radius: calc(12.32 * var(--pu));
  }
  .m-p-h2 + .m-ex { margin-top: calc(28.37 * var(--pu)); }                         /* 1-ша картка: верх y 1274.1 */
  .m-ex__img { position: absolute; left: calc(var(--ex-img-l, 29.59) * var(--pu)); top: calc(34.34 * var(--pu)); width: calc(var(--ex-img-w, 289.53) * var(--pu)); height: calc(347.99 * var(--pu)); }   /* --ex-img-l / -w — зі style .m-ps--ex (CR2: квадрат 347.99 по центру) */
  main.m .m-ex__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ex-img-pos, 50% 50%); }   /* --ex-img-pos — HR3 xl: кадр від лівого краю, як у макеті */
  .m-ex__cap { position: absolute; left: 0; right: 0; top: calc(385.51 * var(--pu)); text-align: center; white-space: nowrap; }   /* основа 399.35 від верху картки */
  .m-ex__co { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
  .m-co__t {                                    /* підпис 11.19 px, центр — cx, лінія основи 1-го рядка — bl */
    position: absolute; left: calc(var(--cx) * var(--pu)); top: calc((var(--bl) - 9.57) * var(--pu)); transform: translateX(-50%);
    font-size: calc(11.19 * var(--pu)); line-height: calc(14.55 * var(--pu)); text-align: center; white-space: nowrap; color: #000;
  }
  .m-co__l {                                    /* лінія-вказівник 0.756 px, #2B2B2A (або --lc виноски, напр. #666666 «Піни» на CR2) */
    position: absolute; left: calc(var(--x1) * var(--pu)); width: calc((var(--x2) - var(--x1)) * var(--pu));
    top: calc((var(--ly) - .378) * var(--pu)); height: calc(.756 * var(--pu)); background: var(--lc, #2B2B2A);
  }
  .m-co__l--d {                                 /* похила виноска (CR5): від (x1, ly), довжина --len, кут --ang */
    width: calc(var(--len) * var(--pu)); transform-origin: 0 50%; transform: rotate(var(--ang));
  }
  /* запасний варіант без мобільного макета: виноски тегами під фото, картка росте за вмістом */
  .m-ex--tags { height: auto; padding: calc(34.34 * var(--pu)) calc(29.59 * var(--pu)) calc(16 * var(--pu)); }
  .m-ex--tags .m-ex__img { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 289.53 / 347.99; }
  .m-ex--tags .m-ex__cap { position: static; margin-top: calc(8 * var(--pu)); }
  .m-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; justify-content: center; }
  .m-tag { padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--m-chip-border); font-size: var(--m-fs-small); line-height: 1.3; }

  /* --- «Що можна кастомізувати»: сітка 2 × 3 (планшет 3 × 2) + 2 пункти --- */
  .m-ps--cust { padding: calc(25.25 * var(--pu)) 0 calc(26.31 * var(--pu)); }      /* заголовок — основа y 2648.9 */
  main.m .m-cust__grid {                        /* x 21.15–368.87, верх y 2680.2, рядки 191.24, лінії #CACACA */
    display: grid; grid-template-columns: 1fr 1fr; width: calc(347.72 * var(--pu)); margin: calc(28.41 * var(--pu)) auto 0; padding: 0;
    border-top: calc(1px * var(--m-hs)) solid var(--m-line); border-left: calc(1px * var(--m-hs)) solid var(--m-line);
  }
  .m-cust__cell {
    position: relative; display: block; height: calc(191.24 * var(--pu)); padding: 0; min-width: 0;
    border-right: calc(1px * var(--m-hs)) solid var(--m-line); border-bottom: calc(1px * var(--m-hs)) solid var(--m-line);
  }
  main.m .m-cust__label {                       /* 12 px, крок 15.6; лінія основи — 35.8 від верхньої лінії клітинки */
    position: absolute; z-index: 1; left: calc(6 * var(--pu)); right: calc(6 * var(--pu)); top: calc(24.75 * var(--pu)); margin: 0;
    font-size: calc(12 * var(--pu)); line-height: calc(15.6 * var(--pu)); text-align: center;
  }
  .m-cust__img { position: absolute; left: 50%; top: calc(95 * var(--pu)); width: calc(124 * var(--pu)); height: calc(80 * var(--pu)); margin-left: calc(-62 * var(--pu)); }
  .m-cust__img.is-fit {                         /* положення з макета: dx від центру клітинки, dy від верхньої лінії */
    left: calc(50% + var(--dx) * var(--pu)); top: calc(var(--dy) * var(--pu)); width: calc(var(--w) * var(--pu)); height: calc(var(--h) * var(--pu)); margin: 0;
  }
  main.m .m-cust__img img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
  .m-p-bul--cust { margin: calc(24.45 * var(--pu)) 0 0 calc(36.95 * var(--pu)); width: calc(339 * var(--pu)); max-width: calc(100% - 36.95 * var(--pu)); }  /* основа y 3292.9 */
  .m-p-bul--cust > li { padding-left: 0; }
  .m-p-bul--cust > li + li { margin-top: var(--p-lh); }
  .m-p-bul--cust > li::before { left: calc(-17.83 * var(--pu)); }                   /* маркер x 19.12 */

  /* --- «Орієнтовні ціни:» — без рамки, 4 рядки з крок 35.77 і лініями #E6E6E6 --- */
  .m-ps--price { padding: calc(25.28 * var(--pu)) 0 calc(18.51 * var(--pu)); }    /* заголовок — основа y 3481.45 */
  main.m .pricebox.m-price { position: static; display: block; border: 0; padding: 0; margin: 0; width: auto; height: auto; }  /* .pricebox — для prices.js; десктопні стилі перекрито */
  .m-price__table { display: block; width: calc(334.79 * var(--pu)); max-width: calc(100% - 55.24 * var(--pu)); margin: calc(13.97 * var(--pu)) 0 0 calc(27.62 * var(--pu)); border-collapse: collapse; }
  .m-price__table tbody { display: block; }
  .m-price__table tr { position: relative; display: flex; justify-content: space-between; height: calc(35.77 * var(--pu)); padding-top: calc(8.59 * var(--pu)); }
  .m-price__table tr + tr::before {             /* лінія між рядками: x 30.04–359.99, 0.5 px */
    content: ""; position: absolute; top: 0; left: calc(2.42 * var(--pu)); right: calc(2.42 * var(--pu)); height: calc(.5 * var(--pu));
    margin-top: calc(-.25 * var(--pu)); background: #E6E6E6;
  }
  .m-price__table th, .m-price__table td { display: block; padding: 0; border: 0; font-weight: 400; white-space: nowrap; text-align: left; }

  /* --- нижня кнопка --- */
  .m-ps--cta { padding: calc(31 * var(--pu)) 0 calc(30.98 * var(--pu)); }          /* пігулка: верх y 3690.5; футер — y 3752.7 */

  /* ============ розділ «Каталог і брендування»: випадайки + сітка ============
   * Макети «Рюкзаки / Поясні сумки / Слінг беги / Шоппери / Чохли / Аксесуари — …» і «сторінка товару усі товари» (390).
   * Сітка — 2 колонки між вертикалями рамки, центральна лінія починається з рядка підменю (left:50%).
   * Рядок випадайок і вміст клітинок — у --cu = 1 px макета при ширині клітинки 185 px (екран 390): на 320–430
   * це те саме, що --mu (хедер і меню), ширше (планшет) — росте разом із клітинками. Лінії — волосяні (--m-hs).
   * Шари: вміст клітинок < панель випадайки (z 5) < лінії сітки (z 6) < рамка .m-frame (z 90). */
  body.m-page { --cu: calc((100vw - 2 * var(--m-edge)) / 370); }
  /* Рядок випадайок («УСІ ТОВАРИ» / «УСІ МОДЕЛІ») закріплений разом з хедером: при прокрутці стоїть одразу під .m-bar.
   * Лише розділ «Каталог і брендування» і сторінки товарів (data-m-subnav="dropdowns"); на головній і в меню його немає.
   * z 80: над вмістом сторінки (лінії сітки z 6), під рамкою .m-frame (z 90), хедером (z 100) і меню (z 200). */
  .m-subnav--dd {
    padding: 0; position: -webkit-sticky; position: sticky; top: var(--m-bar-h); z-index: 80; background: #fff;
  }
  /* sticky-рядок — окремий шар, тож лінії сітки (z 6) більше не малюються поверх відкритої панелі.
     Ті лінії, що припадають на край панелі, малює сама панель — вигляд як до закріплення. */
  .m-subnav--dd .m-dd__panel::after {           /* нижня лінія клітинки (y +184.33) */
    content: ""; position: absolute; left: 0; right: 0; top: calc(184.33 * var(--cu) - 1px); height: 1px; background: var(--m-line);
    pointer-events: none; transform: scaleY(var(--m-hs)); transform-origin: 0 100%;
  }
  .m-subnav--dd .m-dd + .m-dd .m-dd__panel::before {   /* центральна вертикаль — лівий край правої панелі */
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--m-line); pointer-events: none; z-index: 1;
    transform: scaleX(var(--m-hs)); transform-origin: 0 0;
  }
  /* якорі на цих сторінках не ховаються під хедером + рядком випадайок */
  body.m-page.m-has-dd main.m [data-anchor], body.m-page.m-has-dd main.m [id] { scroll-margin-top: calc(var(--m-bar-h) + 29.8 * var(--cu) + 8px); }
  .m-dd-row {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 0 var(--m-edge);
    height: calc(29.8 * var(--cu));
  }
  .m-dd-row::before, .m-cell:nth-child(odd)::after {   /* центральна вертикаль (x 195) */
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--m-line); pointer-events: none; z-index: 6;
    transform: scaleX(var(--m-hs)); transform-origin: 0 0;
  }
  .m-dd-row::after, .m-cell:nth-child(odd):not(:first-child)::before {   /* горизонталі на всю ширину екрана */
    content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--m-line); pointer-events: none; z-index: 6;
    transform: scaleY(var(--m-hs));
  }
  .m-dd-row::after { bottom: -.5px; }
  .m-dd { position: relative; min-width: 0; }
  .m-dd__btn {
    display: flex; align-items: center; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent;
    padding: 0 0 0 calc(12.7 * var(--cu)); cursor: pointer; color: #000; text-align: left; -webkit-appearance: none; appearance: none;
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(9.9 * var(--cu)); line-height: 1; letter-spacing: .0904em;
    text-transform: uppercase; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .m-dd__t, .m-dd__a > span { position: relative; top: -.026em; overflow: hidden; text-overflow: ellipsis; }
  /* overflow:hidden потрібен лише для «…» по горизонталі. Щоб він не зрізав верх/низ літер (Safari: бокс text-box = рівно
     від верху великих літер до основи, а круглі С/О/З/6 виходять за ці межі) — запас .25em зверху й знизу, компенсований
     від'ємним margin: положення тексту не змінюється, змінюється лише зона обрізання. */
  .m-dd__t, .m-dd__a > span { padding: .25em 0; margin: -.25em 0; }
  .m-dd__chev {                                 /* «v» 5.83 × 4.28, правий край — 14 від вертикалі */
    position: absolute; top: 50%; right: calc(14.1 * var(--cu)); width: calc(5.83 * var(--cu)); height: calc(4.28 * var(--cu));
    margin-top: calc(-2.14 * var(--cu)); fill: #000; pointer-events: none;
  }
  .m-dd__btn:focus-visible { outline: 2px solid #000; outline-offset: -3px; }
  .m-dd__panel {                                /* #FAFAFA поверх першої клітинки: ширина колонки, висота — не менша за клітинку */
    position: absolute; left: 0; top: 100%; width: 100%; min-height: calc(184.33 * var(--cu)); z-index: 5;
    background: #FAFAFA; overflow: hidden;
  }
  .m-dd__panel[hidden] { display: none; }
  .m-dd__list { list-style: none; margin: 0; padding: 0; }
  .m-dd__a {
    display: flex; align-items: center; height: calc(29.86 * var(--cu)); padding-left: calc(12.7 * var(--cu)); color: #000; text-decoration: none;
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(9.9 * var(--cu)); line-height: 1; letter-spacing: .0904em;
    text-transform: uppercase; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  }
  .m-dd__a.raw, .m-dd__btn.raw { text-transform: none; }
  .m-dd__a:focus-visible { outline: 2px solid #000; outline-offset: -3px; }

  .m-cat { position: relative; }
  .m-cat__grid { display: grid; grid-template-columns: 1fr 1fr; list-style: none; margin: 0; padding: 0 var(--m-edge); }
  .m-cell { position: relative; height: calc(184.33 * var(--cu)); min-width: 0; }
  .m-cell:nth-child(odd):not(:first-child)::before { top: -.5px; left: calc(-1 * var(--m-edge)); right: auto; width: 100vw; }
  .m-cell:nth-child(odd)::after { left: 100%; }
  .m-card { position: absolute; inset: 0; display: block; color: #000; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .m-card__t {                                  /* назва: 9.135 px (макет 7.91 + 10% + 5%), лінія основи 12.23 від верхньої лінії клітинки */
    position: absolute; left: calc(4.5 * var(--cu)); top: calc(5.31 * var(--cu)); z-index: 3; margin: 0;
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(9.135 * var(--cu)); line-height: 1; letter-spacing: .09em;
    color: #000; white-space: nowrap;
  }
  .m-card__img {                                /* положення й розмір — з макета, по кожному товару (style="--x…") */
    position: absolute; left: calc(var(--x) * var(--cu)); top: calc(var(--y) * var(--cu));
    width: calc(var(--w) * var(--cu)); height: calc(var(--h) * var(--cu));
  }
  main.m .m-card__img img { width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; color: transparent; }
  main.m .m-card__img .colorframe { position: absolute; inset: 0; opacity: 0; transition: opacity .32s ease; }   /* анімація фото (каталог) */
  main.m .m-card__img .colorframe.is-front { opacity: 1; }
  .m-card__btn {                                /* пігулка 125.19 × 27.93 (макет 108.86 × 24.29 + 15%), #F1F1F1; 4.75 від правої і 6.34 від нижньої лінії */
    position: absolute; right: calc(4.75 * var(--cu)); bottom: calc(6.34 * var(--cu)); z-index: 3;
    display: flex; align-items: center; width: calc(125.19 * var(--cu)); height: calc(27.93 * var(--cu));
    padding-left: calc(10.32 * var(--cu)); border-radius: 999px; background: transparent;
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(8.84 * var(--cu)); line-height: 1; letter-spacing: .076em;
    text-transform: uppercase; white-space: nowrap; color: #000;
  }
  .m-card__t--2 { line-height: calc(11.33 / 9.135); white-space: normal; }   /* «КОНВЕРТ БАНДЕРОЛЬНИЙ / МЕТАЛІЗОВАНИЙ» — два рядки, крок 11.33 */
  .m-card__bt { position: relative; top: -.026em; }
  .m-card:active .m-card__btn { background: transparent; }
  .m-card:focus-visible { outline: 2px solid #000; outline-offset: -3px; }
  .m-cat + .m-footer { margin-top: 0; }

  /* --- сторінка «Кейси та відгуки» (макет «меню усі кейси» / «… відкрите меню», 390): панель випадайки — дві клітинки --- */
  .m-subnav--cases .m-dd__panel { min-height: calc(368.66 * var(--cu)); }
  .m-subnav--cases .m-dd__panel::after { top: calc(368.66 * var(--cu) - 1px); }   /* нижня лінія панелі — по 2-й клітинці */
  .m-cat--cases .m-card__img img { object-fit: contain; }

  /* --- розділ «Готові рішення» (макети «усі готові рішення» / «… відкрите меню», 390 × 1868) ---
     Панель випадайки — 7 пунктів: 214.56 (7 × 29.86 + 5.55 запасу), нижня лінія — по краю панелі.
     Сітка: 8 рядків × 184.33. Перша клітинка — плейсхолдер #F1F1F1 з текстом #999. */
  .m-subnav--sol .m-dd__panel { min-height: calc(214.56 * var(--cu)); }
  .m-subnav--sol .m-dd__a { height: calc(30 * var(--cu)); }   /* крок пунктів у цьому макеті — 30.0 (на каталозі 29.86) */
  .m-subnav--sol .m-dd__panel::after { top: calc(214.56 * var(--cu) - 1px); }
  .m-cell--ph { background: #F1F1F1; }
  .m-ph {
    position: absolute; left: calc(28.1 * var(--cu)); top: calc(62.1 * var(--cu)); margin: 0; z-index: 1;
    font-family: var(--m-f-mono); font-weight: 500; font-size: calc(14.67 * var(--cu)); line-height: calc(19.17 * var(--cu));
    letter-spacing: .075em; text-transform: uppercase; color: #999; white-space: nowrap;
  }
  .m-ph span { display: block; }

  /* Вертикаль тексту не залежить від метрик шрифту: де підтримується text-box, бокс = від верху великих літер
     до лінії основи (центрування по великих літерах, як у макеті). Інакше — розрахунок за hhea (зсув -.026em). */
  @supports (text-box: trim-both cap alphabetic) {
    .m-dd__t, .m-dd__a > span, .m-card__bt, .m-footer__t, .m-card__t, .m-footer__a > span, .m-footer__c > span { text-box: trim-both cap alphabetic; }
    .m-dd__t, .m-dd__a > span, .m-card__bt, .m-footer__t, .m-footer__a > span, .m-footer__c > span { top: 0; }
    .m-card__t { top: calc(6.71 * var(--cu)); }    /* верх великих літер — 6.71 від верхньої лінії клітинки */
  }

  /* меню без JS (noscript у M-шарі) */
  .m-noscript { display: flex; flex-wrap: wrap; gap: 0 16px; padding: 12px var(--m-pad); font: 500 16px/1.4 var(--m-f-mono); text-transform: uppercase; letter-spacing: .06em; }
  .m-noscript a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ховери — лише на пристроях з наведенням */
  @media (hover: hover) {
    .m-btn--yellow:hover, .m-p-cta:hover { background: var(--m-yellow-press); }
    .m-ct-l a:hover { text-decoration: underline; text-underline-offset: .25em; }
    .m-footer__a:hover, .m-footer__c:hover { text-decoration: underline; text-underline-offset: .25em; }
    .mn-circ:hover .mn-circ__c { background: var(--m-pill-press); }
    .m-dd__a:hover { text-decoration: underline; text-underline-offset: .25em; }
  }

  /* ============ рух ============ */
  @media (prefers-reduced-motion: reduce) {
    .m-drawer, .m-drawer.is-open, .m-panel, .m-panel.is-current, .m-chips::before, .m-chips::after { transition: none !important; }
  }

  /* ============ сторінка кейсу — мобільний макет «Superhumans» (Corel SVG/PDF, 390 × 4521.6), 1 в 1 ============
   * Розділ «Кейси та відгуки» (шаблон case у build_mobile.py). Рядок випадайки «SUPERHUMANS ˅» — header.js (як у каталозі).
   * Розміри — px макета × var(--pu) (= --mu: 1 px макета на ширині 390, пропорційно 320–430, далі як на 430).
   * Текст: IBM Plex Mono 400 / 14.67, крок рядка 22, рівно ліворуч; підзаголовки — по центру; колонка x 16.2–373.9
   * (≤ 40 знаків у рядку, переноси як у макеті). Лінія основи рядка = верх рядка + 16.5 (line-height 22, ascent 1.025em).
   * Відступи — між лініями основи, як у макеті: абзац → абзац / підзаголовок → абзац 38; абзац → підзаголовок 40.6;
   * рядок → фото 31.3; фото → рядок 39; фото → фото 26.47; H1 (Unbounded 600 / 20, крок 28.5) — основа y 137.5 / 166. */
  .m-cs { position: relative; }
  /* відкритий список кейсів: під ним немає сітки каталогу — лінію клітинки (y +184.33) не малюємо; межі панелі — волосяні #CACACA
     (права — продовження центральної вертикалі рядка, нижня — край списку) */
  main.m[data-m-template="case"] .m-subnav--dd .m-dd__panel::after { content: none; }
  main.m[data-m-template="case"] .m-subnav--dd .m-dd__panel { box-shadow: inset calc(-1px * var(--m-hs)) 0 0 var(--m-line), inset 0 calc(-1px * var(--m-hs)) 0 var(--m-line); }
  .m-cs__pin {
    position: relative; width: calc(390 * var(--pu)); max-width: 100%; margin: 0 auto;
    padding: calc(22.31 * var(--pu)) 0 calc(var(--cs-pb, 26.25) * var(--pu));           /* H1: верх рядка y 115.75; футер — y 4223 (макет) */
    font-family: var(--m-f-mono); font-weight: 400; font-size: calc(var(--cs-fs, 14.67) * var(--pu)); line-height: calc(21.93 * var(--pu)); color: #000;
  }
  .m-cs__pin > * { margin: 0; }
  .m-cs-h1 {
    font-family: var(--m-f-head); font-weight: 600; font-size: calc(20 * var(--pu)); line-height: calc(28.5 * var(--pu));
    letter-spacing: 0; text-align: center; color: #000; padding: 0 calc(var(--cs-h1x, 0) * var(--pu));
    padding-left: calc((var(--cs-h1x, 0) + 2 * var(--cs-h1dx, 0)) * var(--pu));   /* зсув центру H1 вправо на --cs-h1dx (px макета; Tonic 2.3) без виходу за край; за замовчуванням 0 */
  }
  .m-cs-h2, .m-cs-p, .m-cs-lead, .m-cs-list, .m-cs-key {
    margin-left: calc(16.2 * var(--pu)); width: calc(357.7 * var(--pu)); max-width: calc(100% - 16.2 * var(--pu));
  }
  .m-nw { white-space: nowrap; }                   /* слово без переносу (кейс ITSTAR: «TPU-плівку.» цілим, як у макеті) */
  .m-cs-p a { color: inherit; text-decoration: none; }   /* посилання в тексті — як на десктопі (a{color:inherit;text-decoration:none}) */
  .m-cs-p b { font-weight: 500; }                  /* жирний усередині абзацу — Medium, як на десктопі (.t b) і в Superhumans */
  .m-cs-h2, .m-cs-lead { font: inherit; font-weight: 500; letter-spacing: 0; color: #000; }      /* підзаголовки й «ключові» — Medium */
  .m-cs-h2 { text-align: center; max-width: calc(100% - (var(--cs-x, 16.2) + var(--cs-h2rx, var(--cs-rx, 0))) * var(--pu)); }                 /* підзаголовки — по центру (макет «Superhumans», v2) */
  .m-cs-p, .m-cs-lead { text-align: left; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; word-break: normal; }   /* абзаци — рівно ліворуч, без вирівнювання по ширині */
  .m-cs-h2, .m-cs-p, .m-cs-lead, .m-cs-list { margin-left: calc(var(--cs-x, 16.2) * var(--pu)); max-width: calc(100% - (var(--cs-x, 16.2) + var(--cs-rx, 0)) * var(--pu)); }   /* лівий край колонки: 16.2 (Superhumans), Lifecell — 20 (підзаголовки центруються по тій самій колонці) */
  .m-cs-h2 { max-width: calc(100% - (var(--cs-x, 16.2) + var(--cs-h2rx, var(--cs-rx, 0))) * var(--pu)); }   /* центр підзаголовків: власний правий відступ (Lofant) */
  .m-cs-key > p { margin: 0; width: auto; max-width: none; }
  /* лінії основи — як у макеті: текст у рядку на 1.5 нижче від розрахунку метрик шрифту (зсув лише візуальний, розкладка не змінюється) */
  .m-cs-h2, .m-cs-p, .m-cs-lead, .m-cs-list { position: relative; top: calc((.25 + var(--cs-ty, 0)) * var(--pu)); }
  .m-cs-key > .m-cs-p, .m-cs-key > .m-cs-lead { top: 0; }
  .m-cs-key { position: relative; top: calc((.25 + var(--cs-ty, 0)) * var(--pu)); }
  .m-cs-h1 { position: relative; top: calc((.75 + var(--cs-ty, 0) + var(--cs-h1dy, 0)) * var(--pu)); }
  /* Oboard: заголовок у двох стилях — назва (Unbounded 600 / 20) + підзаголовок (Unbounded 600 / 14.67, крок 21.3), один <h1> */
  .m-cs-h1--split { top: calc((.75 + var(--cs-ty, 0) - .5) * var(--pu)); }
  .m-cs-h1--split .m-cs-h1__a { display: block; }
  .m-cs-h1--split .m-cs-h1__b { display: block; font-size: calc(14.67 * var(--pu)); line-height: calc(var(--cs-h1b-lh, 21) * var(--pu)); margin-top: calc(var(--cs-h1b-gap, -0.7) * var(--pu)); }
  /* «ключові» пункти (Oboard): виноска Medium, під нею текст із відступом першого рядка на один знак, як у макеті */
  .m-cs-key--ind { margin-left: calc(var(--cs-kx, 16.2) * var(--pu)); max-width: calc(100% - var(--cs-kx, 16.2) * var(--pu)); }
  .m-cs-key--ind > .m-cs-p { text-indent: 1ch; }
  .m-cs-list { list-style: none; padding: 0; }
  .m-cs-list > li { position: relative; padding-left: calc((var(--cs-mk, 1.55) + 6.25) * var(--pu) + .6em); }   /* текст пункту — через один пробіл (.6em моно) після маркера «●» (рішення власника; було x 64.1 як у макеті) */
  .m-cs-list--flat > li { padding-left: 0; text-indent: calc((var(--cs-mk, 1.55) + 6.25) * var(--pu) + .6em); }      /* Oboard: перенесений рядок пункту — від лівого краю колонки (без висячого відступу), як у макеті */
  .m-cs-list > li + li { margin-top: calc(var(--cs-li, 0) * var(--pu)); }   /* відступ між пунктами (Lofant: 16, як між абзацами) */
  .m-cs-list > li::before {                        /* маркер «●» Ø 6.25: x 17.25–23.5, центр на 4.1 над лінією основи */
    content: ""; position: absolute; left: calc(var(--cs-mk, 1.55) * var(--pu)); top: calc(8.4 * var(--pu));
    width: calc(6.25 * var(--pu)); height: calc(6.25 * var(--pu)); border-radius: 50%; background: #000;
  }
  .m-cs-img { width: calc(var(--w) * var(--pu)); max-width: 100%; aspect-ratio: var(--ar); margin: 0 auto; }
  main.m .m-cs-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
  /* відступи між блоками (margin-top наступного блоку) */
  .m-cs-h1 + .m-cs-p { margin-top: calc(var(--cs-h1p, 0) * var(--pu)); }         /* H1 → перший абзац (блок-реквізити Softserve) */
  .m-cs-h1 + .m-cs-h2 { margin-top: calc(var(--cs-h1h2, 19.25) * var(--pu)); }
  .m-cs-h2 + *, .m-cs-p + .m-cs-p, .m-cs-p + .m-cs-list, .m-cs-list + .m-cs-p, .m-cs-key + .m-cs-key,
  .m-cs-p + .m-cs-key, .m-cs-list + .m-cs-list { margin-top: calc(16 * var(--pu)); }
  .m-cs-p + .m-cs-list { margin-top: calc(var(--cs-plist, 16) * var(--pu)); }             /* абзац → список: 16 (Superhumans); Lifecell — впритул, як у макеті */
  .m-cs__pin > .m-cs-p + .m-cs-lead, .m-cs__pin > .m-cs-lead + .m-cs-p { margin-top: calc(16 * var(--pu)); }             /* «lead» (Medium) окремим абзацом — той самий крок 16 (Lifecell) */
  .m-cs-p + .m-cs-h2, .m-cs-list + .m-cs-h2, .m-cs-key + .m-cs-h2 { margin-top: calc(var(--cs-ph2, 18.6) * var(--pu)); }
  .m-cs__pin > :not(.m-cs-img) + .m-cs-img { margin-top: calc(var(--mt, 25.8) * var(--pu)); }
  .m-cs-img + .m-cs-img { margin-top: calc(var(--mt, 26.47) * var(--pu)); }
  .m-cs-img + :not(.m-cs-img) { margin-top: calc(22.5 * var(--pu)); }
  .m-cs-img { margin-bottom: calc(var(--mb, 0) * var(--pu)); }
  /* група фото макета «Softserve»: велике на всю колонку (347.71) + два впритул під ним (по 173.17, проміжок 1.36) */
  .m-cs-trio { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.36 * var(--pu)); width: calc(347.71 * var(--pu)); max-width: 100%; margin: 0 auto; }
  .m-cs-trio__c { display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: calc(var(--cs-r, 0) * var(--pu)); }
  .m-cs-trio__c--big { grid-column: 1 / -1; }
  /* Cloudfresh: 4 фото — сітка 2×2 (макет: 340.2 px завширшки, зазор 1.8 px, кут 3.3 px) */
  .m-cs-quad { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--cs-qgr, var(--cs-qg, 1.8)) * var(--pu)) calc(var(--cs-qg, 1.8) * var(--pu)); width: calc(340.2 * var(--pu)); max-width: 100%; margin: 0 auto; }
  .m-cs-quad__c { display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: calc(var(--cs-qr, var(--cs-r, 0)) * var(--pu)); }
  .m-cs-quad--pair { column-gap: calc(var(--cs-pg, var(--cs-qg, 1.8)) * var(--pu)); }   /* пара фото: свій зазор (Lofant .87 — 2×2 1.74) */
  main.m .m-cs-quad__c img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .m-cs__pin > :not(.m-cs-img):not(.m-cs-trio):not(.m-cs-quad) + .m-cs-quad { margin-top: calc(var(--mt, 25.8) * var(--pu)); }
  .m-cs-quad + :not(.m-cs-img):not(.m-cs-trio):not(.m-cs-quad) { margin-top: calc(22.5 * var(--pu)); }

  main.m .m-cs-trio__c img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .m-cs-img { border-radius: calc(var(--cs-r, 0) * var(--pu)); overflow: hidden; }
  /* --cs-zoom / --cs-qzoom: легке збільшення фото в рамці (>1), щоб прибрати закруглення, запечене у файлі, і задати власний радіус (Tonic); за замовчуванням 1 — без змін */
  main.m .m-cs-img img { transform: scale(var(--cs-zoom, 1)); }
  main.m .m-cs-quad__c img { transform: scale(var(--cs-qzoom, 1)); }
  main.m .m-cs-img--fill img { object-fit: cover; }
  .m-cs__pin > :not(.m-cs-img):not(.m-cs-trio) + .m-cs-trio { margin-top: calc(var(--mt, 25.8) * var(--pu)); }
  .m-cs-trio + :not(.m-cs-img):not(.m-cs-trio) { margin-top: calc(22.5 * var(--pu)); }
  .m-cs-trio + .m-cs-img, .m-cs-img + .m-cs-trio { margin-top: calc(26.47 * var(--pu)); }
  /* ряд із 3 однакових фото впритул (макет «Molfar»: 112.82 × 3, зазор 0.85; колонка 340.2 по осі галереї) */
  .m-cs-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--cs-tg, .85) * var(--pu)); width: calc(340.2 * var(--pu)); max-width: 100%; margin: 0 auto; }
  .m-cs-tri__c { display: block; aspect-ratio: var(--ar); overflow: hidden; }
  main.m .m-cs-tri__c img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .m-cs__pin > :not(.m-cs-img):not(.m-cs-trio):not(.m-cs-quad):not(.m-cs-tri) + .m-cs-tri { margin-top: calc(var(--mt, 25.8) * var(--pu)); }
  .m-cs-tri + :not(.m-cs-img):not(.m-cs-trio):not(.m-cs-quad):not(.m-cs-tri) { margin-top: calc(22.5 * var(--pu)); }
  .m-cs-tri + .m-cs-img, .m-cs-img + .m-cs-tri, .m-cs-tri + .m-cs-quad, .m-cs-quad + .m-cs-tri, .m-cs-quad + .m-cs-img, .m-cs-img + .m-cs-quad { margin-top: calc(26.47 * var(--pu)); }
            /* поправка з case.json (схлопується з відступом наступного) */
}

/* ============ Mobile S (<360) ============ */
@media (max-width: 359.98px) {
  body.m-page { --m-pad: 16px; --m-fs-body: 14px; }
}

/* ============ Tablet (768–1023) ============ */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.m-page { --m-edge: 12px; --m-pad: 32px; --m-gap-sec: 64px; --m-fs-h1: 34px; --m-fs-h2: 28px; --m-fs-h3: 18px; --m-fs-body: 16px; --m-fs-small: 14px; --m-fs-btn: 14px; }
  .m-carousel__track > * { flex-basis: 44%; }
  .m-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; }
  /* сторінка товару: колонка ширша, «Що можна кастомізувати» — 3 колонки; фото, картки й типографіка — як на 430 */
  .m-pin { width: min(680px, 100% - 2 * var(--m-edge) - 24px); }
  .m-gallery .m-carousel__track > * { flex-basis: 100%; }
  main.m .m-cust__grid { grid-template-columns: repeat(3, 1fr); width: calc(100% - 42.3 * var(--pu)); }
  .m-p-lead, .m-p-spec-h, .m-p-spec, .m-p-bul { width: auto; margin-right: calc(27.75 * var(--pu)); }
  .m-br-phone { display: none; }                  /* розрив рядка макета лише для телефону (CR2: «… YKK / і тканиною …») */
  .m-p-bul--cust { width: auto; margin-right: calc(27.75 * var(--pu)); }
  .m-price__table { width: auto; margin-right: calc(27.62 * var(--pu)); }
  /* сторінка кейсу: колонка ширша (як на товарах), текст по ширині колонки; фото й типографіка — як на 430 */
  .m-cs__pin { width: min(680px, 100% - 2 * var(--m-edge) - 24px); }
  .m-cs-h2, .m-cs-p, .m-cs-lead, .m-cs-list, .m-cs-key { width: auto; margin-right: calc(16.2 * var(--pu)); }
}

/* ======================================================================================================================
 * ГОЛОВНА (мобільний макет «головна», 390 × 2658.5) — шаблон `home` у tools/build_mobile.py
 * 1 px макета = --hu = 100vw / 390 (без обмеження зверху: на 320–1023 усе масштабується пропорційно).
 * Усі блоки — абсолютні, координати в px макета; текст стоїть за лінією основи (top порахований генератором).
 * Десктоп (≥1024) не зачіпається: весь блок — лише в медіа <1024.
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  main.m[data-m-template="home"] { --hu: calc(100vw / 390); background: #fff; }
  .mh { position: relative; width: 100%; overflow-x: clip; padding-top: calc(.77 * var(--hu)); }   /* макет: лінія під хедером y 64.41 (у хедері сайту 63.64) */
  .mh-sec { position: relative; width: 100%; height: calc(var(--H) * var(--hu)); }
  .mh-sec * { box-sizing: border-box; }
  .mh-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mh-anc { position: absolute; left: 0; top: 0; width: 0; height: 0; }
  .mh-sec > .mh-anc:last-child { top: auto; bottom: 0; }

  /* --- текст --- */
  .mh-t { position: absolute; left: calc(var(--x, 0) * var(--hu)); top: calc(var(--y) * var(--hu)); margin: 0; padding: 0;
          font-size: calc(var(--s) * var(--hu)); line-height: calc(var(--p, var(--s)) * var(--hu)); letter-spacing: var(--ls, 0);
          white-space: nowrap; color: #000; font-synthesis: none; text-decoration: none; }
  .mh-t.mh-block { position: absolute; }
  .mh-u { font-family: var(--m-f-head); font-weight: 600; }
  .mh-m { font-family: var(--m-f-mono); font-weight: 400; }
  .mh-m.mh-w5 { font-weight: 500; }
  .mh-r { left: auto; right: calc(var(--r) * var(--hu)); text-align: right; }
  h1.mh-h1 { margin: 0; font: inherit; }

  /* --- прямокутники --- */
  .mh-box, .mh-card, .mh-card__fr, .mh-pill, .mh-qp__in, .mh-qp__frame, .mh-case, .mh-sq, .mh-bulb, .mh-dev__img, .mh-case__logo {
    position: absolute; left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu));
    width: calc(var(--w) * var(--hu)); height: calc(var(--h) * var(--hu));
  }
  .mh-hl { position: absolute; left: 0; right: 0; top: calc(var(--y) * var(--hu)); height: 1px; transform: scaleY(var(--m-hs)); transform-origin: 0 0; pointer-events: none; z-index: 2; }
  .mh-hl--l { background: var(--m-line); }
  .mh-hl--d { background: #404040; }

  /* --- 1. головний екран --- */
  .mh-hero { overflow: hidden; }
  .mh-hero__img { position: absolute; left: var(--m-edge); top: 0; width: calc(100% - 2 * var(--m-edge)); height: 100%; object-fit: cover; display: block; }
  .mh-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--m-line); transform: scaleY(var(--m-hs)); transform-origin: 0 100%; pointer-events: none; }
  .mh-hero .mh-t { color: #000; }
  .mh-qp { position: absolute; inset: 0; pointer-events: none; }          /* шар лише для позиціювання — не перехоплює натискання */
  .mh-qp__in, .mh-qp__go { pointer-events: auto; }
  .mh-qp__frame { border: .5px solid #fff; border-radius: calc(var(--br) * var(--hu)); border-width: calc(.5 * var(--hu)); box-sizing: border-box; pointer-events: none; }
  .mh-qp__in { border-radius: calc(var(--br) * var(--hu)); background: #fff; }
  .mh-qp__in input {
    display: block; width: 100%; height: 100%; margin: 0; padding: 0 0 0 calc(12.4 * var(--hu)); border: 0; border-radius: inherit; background: transparent;
    font: 400 calc(12 * var(--hu)) / 1 var(--m-f-mono); color: #000; letter-spacing: 0; outline: 0; -webkit-appearance: none; appearance: none; box-shadow: none;
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  }
  .mh-qp__in input::placeholder { color: transparent; opacity: 1; }   /* рідна підказка невидима — її роль виконує .mh-qp__ph (центрується по осі Y однаково в усіх браузерах) */
  /* T5 (як .bf-input у brief.css): iOS зумить сторінку при фокусі в поле з текстом < 16px. Лише сенсорні пристрої.
     .mh-qp__ph (візуальна підказка) — окремий елемент, цей рядок на неї не впливає. */
  @media (pointer: coarse) { .mh-qp__in input { font-size: 16px; } }
  .mh-qp__ph { position: absolute; left: calc(12.4 * var(--hu)); right: 0; top: 0; bottom: 0; display: flex; align-items: center; pointer-events: none; white-space: nowrap; overflow: hidden;
               font: 400 calc(9.67 * var(--hu)) / 1 var(--m-f-mono); color: #999; letter-spacing: 0; }
  .mh-qp__in input:not(:placeholder-shown) + .mh-qp__ph { display: none; }
  .mh-qp__in input[aria-invalid="true"] { box-shadow: inset 0 0 0 calc(1.5 * var(--hu)) #000; border-radius: calc(var(--br) * var(--hu)); }
  .mh-qp__in:focus-within { box-shadow: 0 0 0 calc(1.5 * var(--hu)) #fff, 0 0 0 calc(3 * var(--hu)) #000; }
  /* --- пігулки --- */
  .mh-pill { display: block; border: 0; padding: 0; margin: 0; border-radius: 999px; text-decoration: none; cursor: pointer; color: #000; -webkit-appearance: none; appearance: none; font: inherit; -webkit-tap-highlight-color: transparent; }
  .mh-pill .mh-bt { color: inherit; }
  .mh-pill--dark { background: #000; color: #fff; }
  .mh-pill--y { background: #FFEE00; }
  .mh-pill--y:active { background: #F2DF00; }
  .mh-pill--g { background: #E6E6E6; }
  .mh-pill--g:active { background: #D9D9D9; }
  .mh-pill--w { background: #fff; border-radius: calc(8.87 * var(--hu)); }
  .mh-pill:focus-visible, .mh-case__a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
  .mh-hero .mh-pill:focus-visible { outline-color: #fff; }

  /* --- картки --- */
  .mh-card { border-radius: calc(var(--br) * var(--hu)); }
  .mh-card::after { content: ""; position: absolute; inset: calc(-.25 * var(--hu)); border: calc(.5 * var(--hu)) solid var(--m-line); border-radius: calc((var(--br) + .25) * var(--hu)); pointer-events: none; z-index: 3; }
  .mh-card--tile { background: #fff; }      /* «Готові рішення»: картки білі на тлі секції #F5F5F5 */
  .mh-card--cat { background: #fff; }
  .mh-card__fr { overflow: hidden; }
  .mh-card__img { position: absolute; left: calc(var(--ix, 0) * var(--hu)); top: calc(var(--iy, 0) * var(--hu)); width: calc(var(--is, 151.22) * var(--hu)); height: calc(var(--is, 151.22) * var(--hu)); object-fit: contain; display: block; max-width: none; }
  .mh-card--tile { overflow: hidden; }
  .mh-card .mh-t { color: #000; }
  .mh-ready { background: #F5F5F5; }
  .mh-ready::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; }
  .mh-bulb { fill: #666; color: #666; }

  /* --- 3. чорний блок --- */
  .mh-dev { background: #000; z-index: 91; }
  .mh-dev::before, .mh-dev::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #404040; transform: scaleX(var(--m-hs)); transform-origin: 100% 0; z-index: 3; pointer-events: none; }
  .mh-dev::before { left: var(--m-edge); }
  .mh-dev::after { right: var(--m-edge); }
  .mh-sq { background: #FFEE00; }
  .mh-dev__img { object-fit: cover; border-radius: calc(var(--br) * var(--hu)); display: block; max-width: none; }

  /* --- 4. каталог --- */
  .mh-cat { background: #F5F5F5; }

  /* --- 5. кейси --- */
  .mh-cases { background: #fff; }
  .mh-case { background: #F5F5F5; border-radius: calc(var(--br) * var(--hu)); }
  .mh-case::after { content: ""; position: absolute; inset: calc(-.45 * var(--hu)); border: calc(.9 * var(--hu)) solid var(--m-line); border-radius: calc((var(--br) + .45) * var(--hu)); pointer-events: none; z-index: 3; }
  .mh-case__a { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
  .mh-case__logo { pointer-events: none; }
  .mh-case__logo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
  .mh-case .mh-pill { pointer-events: none; z-index: 2; }
  .mh-case .mh-pill.mh-pill--w { box-shadow: 0 0 0 calc(.378 * var(--hu)) #fff; }

  /* ======================================================================================================================
   * «ПІДІБРАТИ МЕРЧ ПІД БЮДЖЕТ» — розкритий стан (макет «Підібрати мерч під бюджет», 390 × 1489; верх панелі y 299.27).
   * Поведінка як на десктопі: після «Показати варіанти» (home-mobile.js ставить data-mstate="expanded") біла панель
   * розтягується на всю ширину між вертикалями рамки, під полями розкривається панель із трьома варіантами
   * (grid 0fr→1fr), решта сторінки зсувається вниз; результати з'являються з iOS-блюром, який зникає, коли панель відкрилась.
   * Поля, кнопка й заголовок стоять на місці. Закритий стан не змінено. Лише <1024px.
   * ====================================================================================================================== */
  main.m[data-m-template="home"] { --mqp-ease: cubic-bezier(.32, .72, 0, 1); }
  .mh-qp__frame { transition: left .9s var(--mqp-ease), width .9s var(--mqp-ease), height .9s var(--mqp-ease), border-radius .9s var(--mqp-ease), background-color .9s var(--mqp-ease); }
  #mqp-title { transition: color .9s var(--mqp-ease); }
  .mh-qp__in::after { content: ""; position: absolute; inset: calc(-.24 * var(--hu)) calc(-.35 * var(--hu)) calc(-.66 * var(--hu)) calc(-.55 * var(--hu));
                      border: calc(.9 * var(--hu)) solid var(--m-line); border-radius: calc((var(--br) + .45) * var(--hu)); opacity: 0; pointer-events: none; transition: opacity .9s var(--mqp-ease); }
  .mh-qp__frame { scroll-margin-top: calc(var(--m-bar-h) + 8px); }   /* скрол до панелі після розкриття не ховає поля під фіксованим хедером */
  .mh-hero::after { transition: opacity .3s ease; }
  .mh-hero[data-mstate="expanded"] .mh-qp__frame { left: calc(10.4 * var(--hu)); width: calc(368.99 * var(--hu)); height: calc(134.35 * var(--hu));
                                                   border-radius: calc(7.75 * var(--hu)) calc(7.75 * var(--hu)) 0 0; background: #fff; }
  .mh-hero[data-mstate="expanded"] #mqp-title { color: #000 !important; }
  .mh-hero[data-mstate="expanded"] .mh-qp__in::after { opacity: 1; }
  .mh-hero[data-mstate="expanded"]::after { opacity: 0; }

  .mh-res { position: relative; z-index: 2; width: 100%; background: #fff; margin-top: 0; transition: margin-top .9s var(--mqp-ease); }
  .mh-res *, .mh-res *::before, .mh-res *::after { box-sizing: border-box; }
  .mh-res[hidden] { display: none; }
  .mh-res[data-mstate="expanded"] { margin-top: calc(-25.89 * var(--hu)); }     /* верх панелі = низ рамки з полями (y 407.51 макета) */
  .mh-res__collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s var(--mqp-ease); }
  .mh-res[data-mstate="expanded"] .mh-res__collapse { grid-template-rows: 1fr; }
  .mh-res__inner { min-height: 0; overflow: hidden; }
  .mh-res__list { position: relative; height: calc(var(--RH) * var(--hu)); }
  .mh-res .mh-t { color: #000; }
  .mh-var { display: contents; }
  .mh-sq--k { background: #000; }
  .mh-ap { margin-right: calc(2.5 * var(--hu)); }   /* у макеті після «≈» вужчий проміжок, ніж звичайний пробіл */
  .mh-rc-list { list-style: none; margin: 0; padding: 0; }
  .mh-rc { position: absolute; left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu)); width: calc(var(--w) * var(--hu)); height: calc(var(--h) * var(--hu));
           background: #F5F5F5; border-radius: calc(var(--br) * var(--hu)); list-style: none; }
  .mh-rc__ph { position: absolute; left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu)); width: calc(var(--w) * var(--hu)); height: calc(var(--h) * var(--hu)); overflow: hidden; pointer-events: none; }
  .mh-rc__act { position: absolute; left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu)); width: calc(var(--w) * var(--hu)); height: calc(var(--h) * var(--hu));
                margin: 0; padding: 0; border: 0; background: transparent; color: #2B2B2A; font: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
  .mh-rc__act::after { content: ""; position: absolute; inset: -6px -4px; }                         /* зона натискання більша за видимий напис */
  .mh-rc__act:focus-visible { outline: 2px solid #000; outline-offset: 2px; border-radius: 2px; }
  .mh-ic { position: absolute; left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu)); width: calc(var(--w) * var(--hu)); height: calc(var(--h) * var(--hu)); display: block; fill: currentColor; }
  .mh-rc__ln { position: absolute; left: calc(var(--x) * var(--hu)); top: calc(var(--y) * var(--hu)); width: calc(var(--w) * var(--hu)); height: 1px; background: var(--m-line); transform: scaleY(var(--m-hs)); transform-origin: 0 0; pointer-events: none; }
  .mh-res__sep { position: absolute; left: 0; right: 0; top: calc(var(--y) * var(--hu)); height: 1px; background: var(--m-line); transform: scaleY(var(--m-hs)); transform-origin: 0 0; pointer-events: none; }
  .mh-res__go { cursor: pointer; }
  .mh-var[hidden] { display: none; }
  .mh-rest[hidden] { display: none; }
  .mh-rc__ph img.mh-card__img { mix-blend-mode: normal; }
  /* порожній стан і нотатка про запас — у потоці під списком */
  .mh-res__empty, .mh-res__reserve { padding: calc(26 * var(--hu)) calc(26 * var(--hu)) calc(8 * var(--hu)); text-align: center; background: #fff; }
  .mh-res__empty[hidden], .mh-res__reserve[hidden], .mh-res__list[hidden] { display: none; }
  .mh-res__reserve { padding-top: calc(4 * var(--hu)); padding-bottom: calc(26 * var(--hu)); }
  .mh-res__msg { margin: 0; font: 500 calc(11.4 * var(--hu)) / 1.55 var(--m-f-mono); color: #000; }
  .mh-res__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(8 * var(--hu)); margin-top: calc(16 * var(--hu)); }
  .mh-res__btn { display: inline-flex; align-items: center; justify-content: center; min-height: calc(31.2 * var(--hu)); padding: 0 calc(16 * var(--hu)); border-radius: 999px; background: #E6E6E6; color: #000; text-decoration: none;
                 font: 500 calc(9.67 * var(--hu)) / 1 var(--m-f-mono); letter-spacing: .06em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; }
  .mh-res__btn:active { background: #D9D9D9; }
  .mh-res__btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

  /* iOS-блюр лише в момент розкриття (як на десктопі): результати 22px→0, заголовок і кнопка полів — 0→14→0; поля не розмиваються */
  .mh-res[data-mstate="expanded"] .mh-res__list { animation: mqp-ios-blur 1.1s cubic-bezier(.25, .1, .25, 1) both; }
  .mh-hero[data-mstate="expanded"] #mqp-title, .mh-hero[data-mstate="expanded"] .mh-qp__go { animation: mqp-ios-blur-form 1.1s cubic-bezier(.25, .1, .25, 1) both; }
  .mh.mqp-anim .mh-res__list { will-change: filter, opacity, transform; }
  .mh.mqp-anim #mqp-title, .mh.mqp-anim .mh-qp__go { will-change: filter, opacity; }
  @keyframes mqp-ios-blur { 0% { opacity: 0; -webkit-filter: blur(22px); filter: blur(22px); } 35% { opacity: .75; -webkit-filter: blur(12px); filter: blur(12px); } 100% { opacity: 1; -webkit-filter: blur(0); filter: blur(0); } }
  @keyframes mqp-ios-blur-form { 0% { -webkit-filter: blur(0); filter: blur(0); } 25% { -webkit-filter: blur(14px); filter: blur(14px); } 100% { -webkit-filter: blur(0); filter: blur(0); } }
  @media (prefers-reduced-motion: reduce) {
    .mh-qp__frame, #mqp-title, .mh-qp__in::after, .mh-hero::after, .mh-res, .mh-res__collapse { transition: none !important; }
    .mh-res[data-mstate="expanded"] .mh-res__list, .mh-hero[data-mstate="expanded"] #mqp-title, .mh-hero[data-mstate="expanded"] .mh-qp__go { animation: none; }
  }
}
@media (prefers-reduced-motion: reduce) { .mh-pill { transition: none; } }

/* ======================================================================================================================
 * «РОЗРОБКА З НУЛЯ» (мобільний макет «Розробка з нуля», 390 × 1647) — шаблон `text-dev` у tools/build_mobile.py
 * 1 px макета = --pu (= --mu: пропорційно 320–430, далі як на 430; на 431–1023 колонка по центру).
 * Блоки абсолютні (--y — px макета від низу хедера), рядки 1:1 як у макеті; лише @media <1024 — десктоп не зачіпається.
 * Рішення власника: проміжок між «Індивідуальна конструкція» і її текстом прибрано (усі пункти однакові),
 * один пробіл після «•», заголовки/підсумок — Medium 500, картки кейсів праворуч на мобільному не показуються.
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  .m-dv { background: #fff; }
  .m-dv__pin {
    position: relative; width: calc(390 * var(--pu)); max-width: 100%; margin: 0 auto; height: calc(1268.53 * var(--pu));
    font-family: var(--m-f-mono); font-weight: 400; font-size: calc(14.67 * var(--pu)); line-height: calc(21.9 * var(--pu)); color: #000;
    font-synthesis: none;
  }
  .m-dv__pin > * { position: absolute; margin: 0; white-space: nowrap; }
  .m-dv-h1 {
    left: calc(19 * var(--pu)); width: calc(360 * var(--pu)); top: calc(29.64 * var(--pu)); text-align: center;
    font-family: var(--m-f-head); font-weight: 600; font-size: calc(20 * var(--pu)); line-height: 1; letter-spacing: 0;
  }
  .m-dv-sub, .m-dv-h2 { left: calc(19 * var(--pu)); width: calc(360 * var(--pu)); text-align: center; font-weight: 500; letter-spacing: 0; text-transform: uppercase; }
  .m-dv-sub { top: calc(71.3 * var(--pu)); font-size: calc(14.67 * var(--pu)); }
  .m-dv-intro { left: calc(19 * var(--pu)); top: calc(108.89 * var(--pu)); }
  .m-dv-h2 { font-size: calc(14.67 * var(--pu)); }
  .m-dv-h2--1 { top: calc(408.64 * var(--pu)); }
  .m-dv-h2--2 { top: calc(530.14 * var(--pu)); }
  .m-dv-pipe { left: calc(19 * var(--pu)); top: calc(446.3 * var(--pu)); }
  .m-dv-arr { white-space: pre; }
  .m-dv-ar { display: inline-block; width: .6em; height: 1em; vertical-align: -.2em; fill: currentColor; overflow: visible; }
  .m-dv-list { left: calc(19 * var(--pu)); top: calc(568.49 * var(--pu)); list-style: none; padding: 0; }
  .m-dv-ih, .m-dv-it { display: block; }
  .m-dv-ih, .m-dv-sum { font-weight: 500; }
  .m-dv-sum { left: calc(19 * var(--pu)); top: calc(1095.02 * var(--pu)); }
  .m-dv-cta { left: 50%; margin-left: calc(-75.08 * var(--pu)) !important; }
  .m-dv-cta--1 { top: calc(352.61 * var(--pu)); }
  .m-dv-cta--2 { top: calc(1207.55 * var(--pu)); }
}

/* ======================================================================================================================
 * «ПРО НАС» (мобільний макет «Про нас», 390 × 1268.5) — шаблон `text-about` у tools/build_mobile.py
 * 1 px макета = --pu (= --mu: пропорційно 320–430, далі як на 430; на 431–1023 колонка по центру).
 * Блоки абсолютні (px макета від низу хедера), рядки 1:1 як у макеті; лише @media <1024 — десктоп не зачіпається.
 * Рішення власника: «команди. Від» з пробілом; «КЕЙСИ ТА ВІДГУКИ» → keisy-ta-vidhuky.html, «ОБГОВОРИТИ ПРОЄКТ» → форма брифу;
 * картки кейсів праворуч на мобільному не показуються (як у макеті).
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  .m-ab { background: #fff; }
  .m-ab__pin {
    position: relative; width: calc(390 * var(--pu)); max-width: 100%; margin: 0 auto; height: calc(906.61 * var(--pu));
    font-family: var(--m-f-mono); font-weight: 400; font-size: calc(14.67 * var(--pu)); line-height: calc(21.94 * var(--pu)); color: #000;
    font-synthesis: none;
  }
  .m-ab__pin > * { position: absolute; margin: 0; white-space: nowrap; }
  .m-ab-h1 {
    left: calc(19 * var(--pu)); width: calc(360 * var(--pu)); top: calc(29.64 * var(--pu)); text-align: center;
    font-family: var(--m-f-head); font-weight: 600; font-size: calc(20 * var(--pu)); line-height: 1; letter-spacing: 0;
  }
  .m-ab-p { left: calc(19.5 * var(--pu)); letter-spacing: calc(-.207 * var(--pu)); }   /* трекінг макета: −0.207 px на символ */
  .m-ab-p--1 { top: calc(68.65 * var(--pu)); }
  .m-ab-p--2 { top: calc(344.1 * var(--pu)); }
  .m-ab-p--3 { top: calc(706.75 * var(--pu)); }
  .m-ab-b { font-weight: 500; }
  .m-ab-cta { left: 50%; margin-left: calc(-75.08 * var(--pu)) !important; }
  .m-ab-cta--1 { top: calc(290.36 * var(--pu)); }
  .m-ab-cta--2 { top: calc(653.36 * var(--pu)); }
  .m-ab-cta .m-p-cta__t { top: calc(.55 * var(--pu)); }
}

/* ======================================================================================================================
 * «УМОВИ СПІВПРАЦІ» (мобільний макет «Умови співпраці», 390 × 1853.4) — шаблон `text-terms` у tools/build_mobile.py
 * 1 px макета = --pu (= --mu). Потік, а не абсолютні координати: основний текст — IBM Plex Mono (рішення власника; у макеті
 * був Arial), тому переноси природні, а відступи між блоками взято з макета (px макета від низу хедера):
 * H1 верх 29.64 → H2 +18.2 → текст +19.2; текст → H2 15; текст → кнопка 25.5; кнопка → H2 21.8; низ тексту → футер 24.8.
 * Один лівий край x 16.5 (у макеті 16.5 / 19 — вирівняно за рішенням власника). Лише @media <1024 — десктоп не зачіпається.
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  .m-tr { background: #fff; }
  .m-tr__pin {
    width: calc(390 * var(--pu)); max-width: 100%; margin: 0 auto;
    padding: calc(29.64 * var(--pu)) calc(16.5 * var(--pu)) calc(24.8 * var(--pu));
    font-family: var(--m-f-mono); font-weight: 400; font-size: calc(14.67 * var(--pu)); line-height: calc(19.5 * var(--pu)); color: #000;
    font-synthesis: none;
  }
  .m-tr__pin > * { margin: 0; }
  .m-tr-h1 {
    height: calc(20 * var(--pu)); text-align: center; white-space: nowrap;
    font-family: var(--m-f-head); font-weight: 600; font-size: calc(20 * var(--pu)); line-height: 1; letter-spacing: 0;
  }
  .m-tr-h2 { margin-top: calc(15 * var(--pu)) !important; text-align: center; white-space: nowrap; font-weight: 500; font-size: calc(14.67 * var(--pu)); line-height: calc(19.5 * var(--pu)); }
  .m-tr-h1 + .m-tr-h2 { margin-top: calc(18.2 * var(--pu)) !important; }
  .m-tr-cta + .m-tr-h2 { margin-top: calc(21.8 * var(--pu)) !important; }
  .m-tr-h2 + .m-tr-p { margin-top: calc(19.2 * var(--pu)) !important; }
  .m-tr-p { overflow-wrap: break-word; }
  .m-tr-p--strong { font-weight: 500; line-height: calc(21.75 * var(--pu)); }
  .m-tr-p--strong + .m-tr-p { margin-top: calc(18.6 * var(--pu)) !important; }
  .m-tr-cta { margin: calc(25.5 * var(--pu)) auto 0 !important; }   /* по центру (x 195) */
  .m-tr-cta .m-p-cta__t { top: calc(.55 * var(--pu)); }
}

/* ======================================================================================================================
 * «УМОВИ СПІВПРАЦІ» (мобільний макет «Умови співпраці», 390 × 1853.4) — шаблон `text-terms` у tools/build_mobile.py
 * 1 px макета = --pu (= --mu). Потік, а не абсолютні координати: основний текст — IBM Plex Mono (рішення власника; у макеті
 * був Arial), тому переноси природні, а відступи між блоками взято з макета (px макета від низу хедера):
 * H1 верх 29.64 → H2 +18.2 → текст +19.2; текст → H2 15; текст → кнопка 25.5; кнопка → H2 21.8; низ тексту → футер 24.8.
 * Один лівий край x 16.5 (у макеті 16.5 / 19 — вирівняно за рішенням власника). Лише @media <1024 — десктоп не зачіпається.
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  .m-tr { background: #fff; }
  .m-tr__pin {
    width: calc(390 * var(--pu)); max-width: 100%; margin: 0 auto;
    padding: calc(29.64 * var(--pu)) calc(16.5 * var(--pu)) calc(24.8 * var(--pu));
    font-family: var(--m-f-mono); font-weight: 400; font-size: calc(14.67 * var(--pu)); line-height: calc(19.5 * var(--pu)); color: #000;
    font-synthesis: none;
  }
  .m-tr__pin > * { margin: 0; }
  .m-tr-h1 {
    height: calc(20 * var(--pu)); text-align: center; white-space: nowrap;
    font-family: var(--m-f-head); font-weight: 600; font-size: calc(20 * var(--pu)); line-height: 1; letter-spacing: 0;
  }
  .m-tr-h2 { margin-top: calc(15 * var(--pu)) !important; text-align: center; white-space: nowrap; font-weight: 500; font-size: calc(14.67 * var(--pu)); line-height: calc(19.5 * var(--pu)); }
  .m-tr-h1 + .m-tr-h2 { margin-top: calc(18.2 * var(--pu)) !important; }
  .m-tr-cta + .m-tr-h2 { margin-top: calc(21.8 * var(--pu)) !important; }
  .m-tr-h2 + .m-tr-p { margin-top: calc(19.2 * var(--pu)) !important; }
  .m-tr-p { overflow-wrap: break-word; }
  .m-tr-p--strong { font-weight: 500; line-height: calc(21.75 * var(--pu)); }
  .m-tr-p--strong + .m-tr-p { margin-top: calc(18.6 * var(--pu)) !important; }
  .m-tr-cta { margin-top: calc(25.5 * var(--pu)) !important; }
  .m-tr-cta .m-p-cta__t { top: calc(.55 * var(--pu)); }
}

/* ======================================================================================================================
 * «КОНТАКТИ» (мобільний макет «контакти», 390 × 905.35) — шаблон `text-contacts` у tools/build_mobile.py
 * 1 px макета = --pu (= --mu: пропорційно 320–430, далі як на 430; на 431–1023 колонка по центру).
 * Блоки абсолютні (px макета від низу хедера, y макета − 63.64), біле поле 543.44 до футера (y 607.08 макета).
 * На високих екранах біле поле розтягується, футер притиснутий до низу. Кейс-картки — лише десктоп (як у макеті).
 * Лише @media <1024 — десктоп не зачіпається.
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  main.m[data-m-template="contacts"] { display: flex; flex-direction: column; background: #fff; min-height: calc(100vh - var(--m-bar-h)); min-height: calc(100svh - var(--m-bar-h)); }
  main.m[data-m-template="contacts"] > .m-ct { flex: 1 0 auto; }
  .m-ct { background: #fff; }
  .m-ct__pin {
    position: relative; width: calc(390 * var(--pu)); max-width: 100%; margin: 0 auto; height: calc(543.44 * var(--pu));
    font-family: var(--m-f-mono); font-weight: 400; font-size: calc(14.67 * var(--pu)); line-height: calc(20 * var(--pu)); color: #000;
    font-synthesis: none;
  }
  .m-ct__pin > * { position: absolute; margin: 0; white-space: nowrap; }
  .m-ct-l { left: calc(72 * var(--pu)); }
  .m-ct-l a { position: relative; color: inherit; text-decoration: none; }
  .m-ct-l a::after { content: ""; position: absolute; left: -12px; right: -12px; top: 50%; height: 38px; margin-top: -19px; }   /* невидима зона натискання = крок рядків 38 px */
  .m-ct-l a:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
  .m-ct-l--1 { top: calc(79.16 * var(--pu)); }
  .m-ct-l--2 { top: calc(117.26 * var(--pu)); }
  .m-ct-l--3 { top: calc(155.36 * var(--pu)); }
  .m-ct-l--4 { top: calc(193.46 * var(--pu)); }
  .m-ct-cta { left: 50%; margin-left: calc(-75.08 * var(--pu)) !important; top: calc(313.09 * var(--pu)); }
  .m-ct-cta .m-p-cta__t { top: calc(.9 * var(--pu)); }
}

/* ======================================================================================================================
 * «ДОСТАВКА» (мобільний макет «ДОСТАВКА», 390 × 1234.5) — шаблон `text-delivery` у tools/build_mobile.py
 * Контент — на стилях `.m-tr*` («Умови співпраці»); тут лише відмінності від них. 1 px макета = --pu.
 * Текст: лівий край x 28, крок рядків 22, жирні фрагменти Medium 500; H1 — центр на x 191.2 (як у макеті, не 195).
 * Як на «Контактах»: main — flex-колонка висотою не менше екрана, біле поле (.m-tr) розтягується, футер притиснутий донизу.
 * Лише @media <1024 — десктоп не зачіпається.
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  main.m[data-m-template="delivery"] { display: flex; flex-direction: column; background: #fff; min-height: calc(100vh - var(--m-bar-h)); min-height: calc(100svh - var(--m-bar-h)); }
  main.m[data-m-template="delivery"] > .m-tr { flex: 1 0 auto; }
  main.m[data-m-template="delivery"] .m-tr__pin { padding-left: calc(28 * var(--pu)); padding-right: calc(16.5 * var(--pu)); }
  main.m[data-m-template="delivery"] .m-tr-cta { margin-left: calc(91.92 * var(--pu)) !important; margin-right: 0 !important; }   /* кнопка по центру x 195 макета */
  main.m[data-m-template="delivery"] .m-tr-h1 { padding-right: calc(19.1 * var(--pu)); }   /* центр H1 на x 191.2 макета */
  .m-dl-p { line-height: calc(22 * var(--pu)); }   /* без трекінгу: ширина рядка = макет (IBM Plex Mono 14.67, 8.8 px/знак) */
  .m-tr-h1 + .m-dl-p { margin-top: calc(var(--dl-h1-p, 19) * var(--pu)) !important; }
  .m-dl-p + .m-tr-cta { margin-top: calc(var(--dl-p-cta, 23.7) * var(--pu)) !important; }
  .m-dl-p b { font-weight: 500; }
}

/* ======================================================================================================================
 * Вікно «Ми працюємо з корпоративними подарунками від 30 одиниць або від 30 000 грн» (макет «ми працюємо від», 75 × 20.106 мм =
 * 283.46 × 75.99 px). Показується home-mobile.js по центру екрана (як .mrm), коли кількість людей < 10 і бюджет < 30 000.
 * 1 px макета = --bu (= min(100vw, 430px) / 390 — як у брифі). Хрестик — той самий, що в брифі. Лише <1024px.
 * ==================================================================================================================== */
/* ---- Єдиний масштаб спливаючих вікон (--pop-u = 1 px макета 390) ----
   Внутрішні сторінки: колонка ≤430px по центру (як було). Головна: росте разом із сайтом, як --hu (100vw / 390). ---- */
@media (max-width: 1023.98px) {
  :root { --pop-u: calc(min(100vw, 430px) / 390); }
  html:has(main.m[data-m-template="home"]) { --pop-u: calc(100vw / 390); }
}
@media (max-width: 1023.98px) {
  .mqp-note {
    --bu: var(--pop-u, calc(min(100vw, 430px) / 390));
    position: fixed; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%);
    box-sizing: border-box; margin: 0; padding: 0; overflow: visible;
    width: calc(283.46 * var(--bu)); height: calc(75.99 * var(--bu));
    background: #fff; color: #000; border: calc(.9 * var(--bu)) solid #CACACA; border-radius: calc(4.56 * var(--bu)) / calc(3.78 * var(--bu));
    pointer-events: auto;
  }
  .mqp-note::backdrop { background: rgba(43, 43, 42, .5); }
  .mqp-note__t {
    position: absolute; left: calc(20.5 * var(--bu)); top: calc(var(--mn-ty, 24.3) * var(--bu)); margin: 0; white-space: nowrap;
    font: 400 calc(var(--mn-fs, 10) * var(--bu)) / calc(var(--mn-lh, 13.5) * var(--bu)) var(--m-f-mono, 'IBM Plex Mono', ui-monospace, monospace);
    letter-spacing: 0; color: #000; font-synthesis: none;
  }
  /* хрестик — як у брифі: лінії 8 × 1 px, колір #4D4D4D; зона 40 × 40 (на вузьких екранах пропорційно, щоб не налізти на текст) */
  .mqp-note .mqp-note__x {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; left: auto; margin: 0; z-index: 2;
    width: calc(40 * var(--bu)); height: calc(40 * var(--bu)); padding: 0; border: 0; border-radius: 0; background: none;
    color: #4D4D4D; font-size: 0; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mqp-note .mqp-note__x::before, .mqp-note .mqp-note__x::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: calc(8 * var(--bu)); height: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg);
  }
  .mqp-note .mqp-note__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .mqp-note .mqp-note__x:focus-visible { outline: 2px solid #000; outline-offset: -4px; }
  html:has(.mqp-note[open]) { overflow: hidden; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .mqp-note[open] { animation: mqp-note-fade .15s ease-out; }
}
@keyframes mqp-note-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1024px) { .mqp-note { display: none !important; } }

/* ======================================================================================================================
 * Заголовки секцій головної («Готові рішення», «Індивідуальна розробка», «Каталог і брендування», «Кейси та відгуки») — посилання.
 * Вигляд заголовка той самий; зона натискання трохи більша за текст (псевдоелемент, макет не зсувається). Лише <1024px.
 * ==================================================================================================================== */
@media (max-width: 1023.98px) {
  a.mh-hlink { position: relative; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  a.mh-hlink::after { content: ""; position: absolute; inset: calc(-9 * var(--hu)) calc(-8 * var(--hu)); }
  a.mh-hlink:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
}

/* ===== Вікно «Ви прибрали продукт» (сценарії при видаленні позиції в «Підібрати мерч під бюджет») — мобільне, 1:1 з макета «вспливаюче вікно при видаленні продукту» (325,63 × 343,47) ===== */
.mrm { display: none; }
@media (max-width: 1023.98px) {
  .mrm {
    --bu: var(--pop-u, calc(min(100vw, 430px) / 390));
    --mrm-H: 343.47;
    --bu: min(var(--pop-u, calc(min(100vw, 430px) / 390)), calc((100vh - 24px) / var(--mrm-H)));
    --mrm-ink: #4D4D4D; --mrm-sub: #727272;
    position: fixed; inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; border: 0;
    box-sizing: border-box; width: calc(325.63 * var(--bu)); height: min(calc(var(--mrm-H) * var(--bu)), calc(100dvh - 24px)); max-width: calc(100vw - 8px);
    background: #fff; color: var(--mrm-ink); overflow: visible; pointer-events: auto;
    border-radius: calc(1.22 * var(--bu)) / calc(3.99 * var(--bu));
  }
  .mrm:not([open]) { display: none; }
  .mrm[open] { display: block; }
  .mrm::backdrop { background: rgba(43, 43, 42, .5); }
  .mrm:focus, .mrm:focus-visible { outline: 0; }
  .mrm::before { content: ""; position: absolute; inset: calc(-.45 * var(--bu)); border: calc(.9 * var(--bu)) solid #CACACA; border-radius: calc(1.67 * var(--bu)) / calc(4.44 * var(--bu)); pointer-events: none; }
  .mrm__in { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-radius: inherit; }
  .mrm__in > * { font-synthesis: none; }
  .mrm__title { position: absolute; left: calc(-.6 * var(--bu)); right: calc(.6 * var(--bu)); top: calc(var(--mrm-t1, 14.96) * var(--bu)); margin: 0; text-align: center; white-space: nowrap;
    font: 600 calc(13.33 * var(--bu)) / 1 'Unbounded', sans-serif; color: var(--mrm-ink); }
  .mrm__sub { position: absolute; left: 0; right: 0; top: calc(var(--mrm-t2, 40.6) * var(--bu)); margin: 0; text-align: center; white-space: nowrap;
    font: var(--mrm-w2, 400) calc(10.67 * var(--bu)) / 1 'IBM Plex Mono', ui-monospace, monospace; color: var(--mrm-ink); }
  .mrm__opt { position: absolute; left: calc(9.73 * var(--bu)); width: calc(306.17 * var(--bu)); height: calc(52.91 * var(--bu)); margin: 0; padding: 0; border: 0; border-radius: calc(6.68 * var(--bu)) / calc(3.78 * var(--bu));
    background: #F5F5F5; color: var(--mrm-ink); text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; appearance: none; overflow: visible; }
  .mrm__opt::before { content: ""; position: absolute; inset: calc(-.45 * var(--bu)); border: calc(.9 * var(--bu)) solid #CACACA; border-radius: calc(7.13 * var(--bu)) / calc(4.23 * var(--bu)); pointer-events: none; }
  .mrm__opt:nth-of-type(1) { top: calc(68.06 * var(--bu)); }
  .mrm__opt:nth-of-type(2) { top: calc(136.09 * var(--bu)); }
  .mrm__opt:nth-of-type(3) { top: calc(204.12 * var(--bu)); }
  .mrm__opt:nth-of-type(4) { top: calc(272.15 * var(--bu)); }
  /* режим «перша картка варіанта» (макет 325,63 × 275,44): 3 пункти — без «дорожчого», решта піднімається */
  .mrm[data-mrm-mode="first"] { --mrm-H: 275.44; }
  .mrm[data-mrm-mode="first"] .mrm__opt[data-mrm-choice="pricier"] { display: none; }
  .mrm[data-mrm-mode="first"] .mrm__opt[data-mrm-choice="keep"] { top: calc(136.09 * var(--bu)); }
  .mrm[data-mrm-mode="first"] .mrm__opt[data-mrm-choice="cancel"] { top: calc(204.12 * var(--bu)); }
  .mrm__opt:focus-visible { outline: 2px solid #000; outline-offset: 1px; }
  .mrm__h { position: absolute; left: calc(var(--mrm-hx, 8.25) * var(--bu)); top: calc(var(--mrm-ht, 5.4) * var(--bu)); white-space: nowrap;
    font: var(--mrm-w1, 500) calc(12 * var(--bu)) / 1 'IBM Plex Mono', ui-monospace, monospace; color: var(--mrm-ink); }
  .mrm__d { position: absolute; left: calc(var(--mrm-dx, 30.75) * var(--bu)); top: calc(var(--mrm-dt, 20.96) * var(--bu)); white-space: nowrap;
    font: 400 calc(10.67 * var(--bu)) / calc(var(--mrm-dlh, 13.5) * var(--bu)) 'IBM Plex Mono', ui-monospace, monospace; color: var(--mrm-sub); }
  html:has(.mrm[open]) { overflow: hidden; }
}
/* вікно висоти 343.47: не вилазить за екран у ландшафті (dvh — лише там, де підтримується; custom property не має fallback-а) */
@supports (height: 100dvh) {
  @media (max-width: 1023.98px) { .mrm { --bu: min(var(--pop-u, calc(min(100vw, 430px) / 390)), calc((100dvh - 24px) / var(--mrm-H))); } }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .mrm[open] { animation: mqp-note-fade .15s ease-out; }
}
@media (min-width: 1024px) { .mrm { display: none !important; } }

/* --- центрування тексту в пілюлях (мобільна версія) ---
   Раніше текст у частині пілюль стояв на «макетних» координатах (--x/--y з Corel) або з лівим відступом, тому на різних ширинах і між
   пілюлями він трохи з'їжджав. Тепер текст центрується самою пілюлею (flex) — по горизонталі й вертикалі, на будь-якій ширині.
   Хвостовий letter-spacing компенсується відступом зліва (як у .m-p-cta__t), щоб оптичний центр збігався з геометричним. */
@media (max-width: 1023.98px) {
  .mh-pill:has(> .mh-bt) { display: flex; align-items: center; justify-content: center; }   /* a, button і span (пілюлі «ДИВИТИСЬ КЕЙС →» у кейсах — span) */
  .mh-pill > .mh-bt { position: relative; left: auto; top: -.026em; padding-left: var(--ls, 0); }
  .m-card__btn { justify-content: center; padding-left: 0; }
  .m-card__bt { padding-left: .076em; }
}

/* ======================================================================================================================
 * «ГАРАНТІЯ» (мобільний макет, 390 × 1553.7) — шаблон на стилях `.m-tr*` («Умови співпраці»/«Доставка»), тут лише відмінності.
 * 1 px макета = --pu. Текст: лівий край x 20, IBM Plex Mono 14.67, розриви рядків 1:1 з макета, жирні вступи Medium 500;
 * підзаголовки Medium по центру. Як на «Контактах»/«Доставці»: біле поле розтягується, футер притиснутий донизу.
 * Лише @media <1024 — десктоп не зачіпається.
 * ====================================================================================================================== */
@media (max-width: 1023.98px) {
  main.m[data-m-template="guarantee"] { display: flex; flex-direction: column; background: #fff; min-height: calc(100vh - var(--m-bar-h)); min-height: calc(100svh - var(--m-bar-h)); }
  main.m[data-m-template="guarantee"] > .m-tr { flex: 1 0 auto; }
  main.m[data-m-template="guarantee"] .m-tr__pin { padding-left: calc(var(--gr-x, 19.3) * var(--pu)); padding-right: calc(10 * var(--pu)); padding-top: calc(var(--gr-pt, 28.74) * var(--pu)); padding-bottom: calc(var(--gr-pb, 23.4) * var(--pu)); }
  main.m[data-m-template="guarantee"] .m-tr-h1 { padding-right: 0; margin-left: calc(-1 * var(--gr-x, 19.3) * var(--pu) + 10 * var(--pu)); margin-right: 0; width: calc(370 * var(--pu)); }
  main.m[data-m-template="guarantee"] .m-gr-p { letter-spacing: calc(-0.207 * var(--pu)); white-space: nowrap; line-height: calc(var(--gr-lh, 21.9) * var(--pu)); }
  main.m[data-m-template="guarantee"] .m-gr-p b { font-weight: 500; }
  main.m[data-m-template="guarantee"] .m-gr-h2 { letter-spacing: calc(-0.207 * var(--pu)); margin-left: calc(-1 * var(--gr-x, 19.3) * var(--pu) + 10 * var(--pu)); width: calc(370 * var(--pu)); margin-top: calc(var(--gr-h2-t, 17.3) * var(--pu)) !important; line-height: calc(19.5 * var(--pu)); }
  main.m[data-m-template="guarantee"] .m-gr-h2 + .m-gr-p { margin-top: calc(var(--gr-h2-p, 18.2) * var(--pu)) !important; }
  main.m[data-m-template="guarantee"] .m-gr-h2--1 + .m-gr-p { margin-top: calc(17.75 * var(--pu)) !important; }
  main.m[data-m-template="guarantee"] .m-gr-h2--2 + .m-gr-p { margin-top: calc(17.3 * var(--pu)) !important; }
  main.m[data-m-template="guarantee"] .m-gr-h2--3 + .m-gr-p { margin-top: calc(16.9 * var(--pu)) !important; }
  main.m[data-m-template="guarantee"] .m-tr-h1 + .m-gr-p { margin-top: calc(var(--gr-h1-p, 19.0) * var(--pu)) !important; }
  main.m[data-m-template="guarantee"] .m-gr-p + .m-gr-p { margin-top: calc(var(--gr-pp, 0) * var(--pu)) !important; }
  main.m[data-m-template="guarantee"] .m-gr-p + .m-gr-cta { margin-top: calc(var(--gr-p-cta, 23.8) * var(--pu)) !important; }
  main.m[data-m-template="guarantee"] .m-tr-cta { margin-left: calc(100.6 * var(--pu)) !important; margin-right: 0 !important; }   /* жовта кнопка: x 119.92–269.82 макета (ліве поле колонки 19.3) */
  main.m[data-m-template="guarantee"] .m-gr-cta + .m-gr-h2 { margin-top: calc(var(--gr-cta-h2, 22.8) * var(--pu)) !important; }
}

/* ============ «Коробка чорна» — мобільний макет (Corel SVG/PDF, 390 × 3935), на шаблоні CR1 ============
 * Лише main.m.m-pk. Відмінності від CR1: приклади кастому — квадратні фото 300×300 у картках, «Що можна кастомізувати» —
 * список (без сітки), «Орієнтовні ціни» — три групи розмірів з лініями на всю ширину. Кути фото — як на CR1 (радіус 7.5 / 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk .m-p-h1 { margin-top: calc(23.5 * var(--pu)); }
  main.m.m-pk .m-p-lead { margin-top: calc(26.4 * var(--pu)); }
  main.m.m-pk .m-ps--ex { padding-top: calc(26.36 * var(--pu)); }
  main.m.m-pk .m-ps--cust .m-p-bul--cust { margin-top: calc(20.4 * var(--pu)); }
  main.m.m-pk .m-ex--sq .m-ex__cap { top: calc(383.8 * var(--pu)); }
  main.m.m-pk .m-ex--sq .m-ex__img { left: calc(24.36 * var(--pu)); top: calc(57.4 * var(--pu)); width: calc(300 * var(--pu)); height: calc(300 * var(--pu)); }
  main.m.m-pk .m-ex--sq .m-ex__img img { object-fit: contain; }
  main.m.m-pk .m-p-bul--cust > li + li { margin-top: calc(19.2 * var(--pu)); }
  main.m.m-pk .m-ps--price { overflow-x: clip; }
  main.m.m-pk .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(24.5 * var(--pu)); }
  main.m.m-pk .m-pk-grp { position: relative; padding-bottom: calc(31.2 * var(--pu)); }
  main.m.m-pk .m-pk-grp + .m-pk-grp { padding-top: calc(26 * var(--pu)); }
  main.m.m-pk .m-pk-grp:not(:last-child)::after { content: ""; position: absolute; left: -100vw; right: -100vw; bottom: 0; height: 1px; background: var(--m-line); transform: scaleY(var(--m-hs)); transform-origin: 0 100%; pointer-events: none; }
  main.m.m-pk .m-pk-grp:last-child { padding-bottom: calc(12.4 * var(--pu)); }
  main.m.m-pk .m-pk-grp__h { margin: 0 0 0 calc(24.7 * var(--pu)); font: inherit; font-weight: 500; white-space: nowrap; }
  main.m.m-pk .m-pk-grp .m-price__table { margin-top: calc(13.2 * var(--pu)); }
  main.m.m-pk .m-pk-grp .m-price__table tr + tr::before { content: none; }
  main.m.m-pk--bila .m-pk-grp .m-price__table td, main.m.m-pk--kraft .m-pk-grp .m-price__table td { padding-right: calc(9.4 * var(--pu)); }   /* «Коробка біла»: колонка цін у макеті закінчується на x 353 (ліній — 360) */
  main.m.m-pk .m-pk-grp .m-price__table tr::after { content: ""; position: absolute; left: calc(2.42 * var(--pu)); right: calc(2.42 * var(--pu)); bottom: 0; height: calc(.5 * var(--pu)); background: #E6E6E6; }
}

/* ============ «Пакет чорний» — мобільний макет (Corel SVG/PDF, 390 × 3935), на шаблоні m-pk (як «Коробка чорна/біла/крафтова») ============
 * Відмінність від коробок: опис у 7 рядків, 6 пунктів переваг; відступи «РОЗМІРИ» / переваги / кнопка — як у макеті. */
@media (max-width: 1023.98px) {
  main.m.m-pk--paket .m-p-lead { margin-top: calc(27.4 * var(--pu)); }
  main.m.m-pk--paket .m-ps--top .m-p-cta { margin-top: calc(45.7 * var(--pu)); }
  /* колонка цін — зліва, з x 221.61 макета (у макеті «90 грн» і «115 грн» починаються з однієї вертикалі) */
  main.m.m-pk--paket .m-pk-grp .m-price__table tr { justify-content: flex-start; }
  main.m.m-pk--paket .m-pk-grp .m-price__table th { width: calc(193.99 * var(--pu)); flex: none; }
}

/* ============ «Мішечок чорний / білий» — мобільний макет (Corel SVG/PDF, 390 × 3936), на шаблоні m-pk (як «Пакет») ============
 * Геометрія двох мішечків однакова. Відмінності від базового m-pk: кнопка нижче, ціни на 1 px вище підписів.
 * Відступи «РОЗМІРИ» / переваги — у style .m-ps--top сторінки (--p-gap-spec / --p-gap-bul). Кути фото — як на CR1 (7.5 / 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk--mishok .m-ps--top .m-p-cta { margin-top: calc(46.95 * var(--pu)); }
  main.m.m-pk--mishok .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(22.5 * var(--pu)); }
  main.m.m-pk--mishok .m-pk-grp:not(:last-child) { padding-bottom: calc(32.7 * var(--pu)); }
  main.m.m-pk--mishok .m-pk-grp:last-child { padding-bottom: calc(13.4 * var(--pu)); }
  main.m.m-pk--mishok .m-pk-grp .m-price__table { margin-top: calc(12.7 * var(--pu)); }
  main.m.m-pk--mishok .m-pk-grp .m-price__table td { position: relative; top: calc(-1 * var(--pu)); }
}

/* ============ «Конверт чорний» — мобільний макет (Corel SVG/PDF, 390 × 3935), на шаблоні m-pk (як «Мішечок чорний») ============
 * Відмінності від базового m-pk: кнопка нижче. Відступи «РОЗМІРИ» / переваги — у style .m-ps--top сторінки. Кути фото — як на CR1 (7.5 / 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk--konvert .m-ps--top .m-p-cta { margin-top: calc(46.2 * var(--pu)); }
  main.m.m-pk--konvert .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(22.5 * var(--pu)); }
  main.m.m-pk--konvert .m-pk-grp:not(:last-child) { padding-bottom: calc(32.7 * var(--pu)); }
  main.m.m-pk--konvert .m-pk-grp:last-child { padding-bottom: calc(13.4 * var(--pu)); }
  main.m.m-pk--konvert .m-pk-grp .m-price__table { margin-top: calc(12.7 * var(--pu)); }
  main.m.m-pk--konvert .m-pk-grp .m-price__table tr { justify-content: flex-start; }
  main.m.m-pk--konvert .m-pk-grp .m-price__table th { width: calc(193.99 * var(--pu)); flex: none; }
  main.m.m-pk--konvert .m-pk-grp .m-price__table td { position: relative; top: calc(-1 * var(--pu)); }
  /* «Конверт металізований»: у макеті 4 переваги замість 6, але кнопка і все нижче стоять на тих самих місцях, що в «Конверт крафтовий» — лишаємо вільний простір двох рядків (2 × 19.06) */
  main.m.m-pk--metal .m-ps--top .m-p-cta { margin-top: calc(84.32 * var(--pu)); }
}

/* ============ «Шоппер чорний» — мобільний макет (Corel SVG/PDF, 390 × 3973), на шаблоні m-pk (як «Конверт білий») ============
 * Опис у 7 рядків, 6 переваг. Відступи «РОЗМІРИ» / переваги — у style .m-ps--top сторінки. Кути фото — як на CR1 (7.5 / 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk--shopper .m-ps--top .m-p-cta { margin-top: calc(26.2 * var(--pu)); }
  main.m.m-pk--shopper .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(22.5 * var(--pu)); }
  main.m.m-pk--shopper .m-pk-grp:not(:last-child) { padding-bottom: calc(32.7 * var(--pu)); }
  main.m.m-pk--shopper .m-pk-grp:last-child { padding-bottom: calc(13.4 * var(--pu)); }
  main.m.m-pk--shopper .m-pk-grp .m-price__table { margin-top: calc(12.7 * var(--pu)); }
  main.m.m-pk--shopper .m-pk-grp .m-price__table tr { justify-content: flex-start; }
  main.m.m-pk--shopper .m-pk-grp .m-price__table th { width: calc(193.99 * var(--pu)); flex: none; }
  main.m.m-pk--shopper .m-pk-grp .m-price__table td { position: relative; top: calc(-1 * var(--pu)); }
}

/* ============ «Термочашка D1» — мобільний макет (Corel SVG/PDF, 390 × 3472), на шаблоні m-pk (як «Конверт білий») ============
 * Відмінності від базового m-pk: текст опису/характеристик/переваг — від x 19.5 (а не 27.75); замість «РОЗМІРИ» — «ХАРАКТЕРИСТИКИ»
 * (центрована по Y між описом і списком переваг — рішення власника); фото прикладів 264.6 × 264.6 по осі картки; одна група цін «Один розмір».
 * Кути фото — як на CR1 / «Конверт білий» (радіус 7.5 / 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk--cup .m-p-lead, main.m.m-pk--cup .m-p-spec-h, main.m.m-pk--cup .m-p-spec { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--cup .m-p-bul:not(.m-p-bul--cust) { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--cup .m-p-bul:not(.m-p-bul--cust) > li { padding-left: calc(12.2 * var(--pu)); }
  main.m.m-pk--cup .m-p-bul:not(.m-p-bul--cust) > li::before { left: calc(-5.7 * var(--pu)); }
  main.m.m-pk--cup .m-p-h1 { margin-top: calc(24.5 * var(--pu)); }
  main.m.m-pk--cup .m-p-lead { margin-top: calc(25.9 * var(--pu)); }
  main.m.m-pk--cup .m-ps--top .m-p-cta { margin-top: calc(27 * var(--pu)); }
  main.m.m-pk--cup .m-ps--ex { padding-top: calc(24.86 * var(--pu)); }
  main.m.m-pk--cup .m-ex { margin-top: calc(25.25 * var(--pu)); }
  main.m.m-pk--cup .m-p-h2 + .m-ex { margin-top: calc(29.12 * var(--pu)); }
  main.m.m-pk--cup .m-ps--cust { padding-bottom: calc(34.55 * var(--pu)); }
  main.m.m-pk--cup .m-ps--cust .m-p-bul--cust { margin-top: calc(21.4 * var(--pu)); }
  main.m.m-pk--cup .m-ps--cust .m-p-bul--cust { margin-left: calc(35.95 * var(--pu)); max-width: calc(100% - 35.95 * var(--pu)); }
  main.m.m-pk--cup .m-p-bul--cust > li + li { margin-top: calc(18.8 * var(--pu)); }
  main.m.m-pk--cup .m-ex--sq .m-ex__cap { top: calc(383.8 * var(--pu)); }
  main.m.m-pk--cup .m-ex--sq .m-ex__img { left: calc(42.06 * var(--pu)); top: calc(75.9 * var(--pu)); width: calc(264.6 * var(--pu)); height: calc(264.6 * var(--pu)); }
  main.m.m-pk--cup .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(24 * var(--pu)); }
  main.m.m-pk--cup .m-pk-grp:not(:last-child) { padding-bottom: calc(32.7 * var(--pu)); }
  main.m.m-pk--cup .m-pk-grp:last-child { padding-bottom: calc(13.4 * var(--pu)); }
  main.m.m-pk--cup .m-pk-grp .m-price__table { margin-top: calc(11.2 * var(--pu)); }
  main.m.m-pk--cup .m-pk-grp .m-price__table tr { justify-content: flex-start; }
  main.m.m-pk--cup .m-pk-grp .m-price__table th { width: calc(193.99 * var(--pu)); flex: none; }
  main.m.m-pk--cup .m-pk-grp .m-price__table td { position: relative; top: calc(-1 * var(--pu)); }
  main.m.m-pk--cup .m-pk-grp .m-price__table tr { height: calc(36 * var(--pu)); }
}


/* ============ «Пляшка F1» — мобільний макет (Corel SVG/PDF, 390 × 3866), на шаблоні m-pk (як «Термочашка D1» / «Конверт білий») ============
 * Відмінності від D1: «ХАРАКТЕРИСТИКИ» — таблиця 3 × 4 з двома вертикальними лініями; три групи цін (500 / 800 / 1000 мл).
 * Кути фото — як на CR1 / «Конверт білий» (галерея 7.5, картки 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk--bottle .m-p-lead, main.m.m-pk--bottle .m-p-spec-h, main.m.m-pk--bottle .m-p-spec { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--bottle .m-p-bul:not(.m-p-bul--cust) { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--bottle .m-p-bul:not(.m-p-bul--cust) > li { padding-left: calc(12.2 * var(--pu)); }
  main.m.m-pk--bottle .m-p-bul:not(.m-p-bul--cust) > li::before { left: calc(-5.7 * var(--pu)); }
  main.m.m-pk--bottle .m-p-h1 { margin-top: calc(24.5 * var(--pu)); }
  main.m.m-pk--bottle .m-p-lead { margin-top: calc(25.4 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--top .m-p-cta { margin-top: calc(27 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--cta { padding: calc(33 * var(--pu)) 0 calc(29 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--top { padding-bottom: calc(29.25 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--ex { padding-top: calc(25.86 * var(--pu)); padding-bottom: calc(33.38 * var(--pu)); }
  main.m.m-pk--bottle .m-ex { margin-top: calc(25.25 * var(--pu)); }
  main.m.m-pk--bottle .m-p-h2 + .m-ex { margin-top: calc(29.12 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--cust { padding-bottom: calc(26.55 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--cust .m-p-bul--cust { margin-top: calc(21.4 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--cust .m-p-bul--cust { margin-left: calc(35.95 * var(--pu)); max-width: calc(100% - 35.95 * var(--pu)); }
  main.m.m-pk--bottle .m-p-bul--cust > li + li { margin-top: calc(18.8 * var(--pu)); }
  main.m.m-pk--bottle .m-ex--sq .m-ex__cap { top: calc(381.8 * var(--pu)); }
  main.m.m-pk--bottle .m-ex--sq .m-ex__img { left: calc(3.3 * var(--pu)); top: calc(34.7 * var(--pu)); width: calc(340.8 * var(--pu)); height: calc(340.8 * var(--pu)); }
  main.m.m-pk--bottle .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(24 * var(--pu)); }
  main.m.m-pk--bottle .m-pk-grp:not(:last-child) { padding-bottom: calc(32.2 * var(--pu)); }
  main.m.m-pk--bottle .m-pk-grp:nth-of-type(2) { padding-bottom: calc(31.7 * var(--pu)); }
  main.m.m-pk--bottle .m-pk-grp:last-child { padding-bottom: calc(20.4 * var(--pu)); }
  main.m.m-pk--bottle .m-pk-grp .m-price__table { margin-top: calc(12.25 * var(--pu)); }
  main.m.m-pk--bottle .m-pk-grp .m-price__table tr { justify-content: flex-start; }
  main.m.m-pk--bottle .m-pk-grp .m-price__table th { width: calc(193.99 * var(--pu)); flex: none; }
  main.m.m-pk--bottle .m-pk-grp .m-price__table td { position: relative; top: calc(-1 * var(--pu)); }
  main.m.m-pk--bottle .m-pk-grp .m-price__table tr { height: calc(35.8 * var(--pu)); }
  main.m.m-pk--bottle .m-pk-grp .m-price__table tr::after { bottom: calc(-1 * var(--pu)); }
}

@media (max-width: 1023.98px) {
  /* «ХАРАКТЕРИСТИКИ» — таблиця 3 × 4: колонки з x 19.3 / 108.95 / 201.48 / 293.99, вертикалі #CACACA на x 194.5 і 287.07 */
  main.m.m-pk--bottle .m-p-spect { position: relative; margin: calc(-.5 * var(--pu)) 0 0 calc(19.3 * var(--pu)); width: calc(100% - 19.3 * var(--pu)); }
  main.m.m-pk--bottle .m-p-spect table { table-layout: fixed; border-collapse: collapse; width: calc(354.7 * var(--pu)); max-width: 100%; }
  main.m.m-pk--bottle .m-p-spect th, main.m.m-pk--bottle .m-p-spect td { padding: 0; text-align: left; font-weight: 400; white-space: nowrap; height: var(--p-lh); }
  main.m.m-pk--bottle .m-p-spect th { width: calc(89.65 * var(--pu)); }
  main.m.m-pk--bottle .m-p-spect td:nth-child(2) { width: calc(92.53 * var(--pu)); }
  main.m.m-pk--bottle .m-p-spect td:nth-child(3) { width: calc(92.51 * var(--pu)); }
  main.m.m-pk--bottle .m-p-spect::before, main.m.m-pk--bottle .m-p-spect::after {
    content: ""; position: absolute; top: calc(var(--spt-top, 2) * var(--pu)); height: calc(48.5 * var(--pu)); width: calc(1px * var(--m-hs)); background: var(--m-line); pointer-events: none;
  }
  main.m.m-pk--bottle .m-p-spect::before { left: calc(175.2 * var(--pu)); }
  main.m.m-pk--bottle .m-p-spect::after { left: calc(267.77 * var(--pu)); }
}

@media (max-width: 1023.98px) {
  main.m.m-pk--bottle .m-ex { height: calc(411 * var(--pu)); margin-top: calc(30.97 * var(--pu)); }
  main.m.m-pk--bottle .m-p-h2 + .m-ex { margin-top: calc(30.6 * var(--pu)); }
}

@media (max-width: 1023.98px) {
  /* новий текст переваг: рядки 41–42 знаки не вміщувались у колонку — трекінг −0.02em на всьому списку (рішення при заміні тексту) */
  main.m.m-pk--bottle .m-p-bul:not(.m-p-bul--cust) { letter-spacing: -.02em; }
}


/* ============ «Термопляшка G1» — мобільний макет (Corel SVG/PDF, 390 × 3662), на шаблоні m-pk (як «Термочашка D1» / «Конверт білий») ============
 * Відмінності від D1: «ХАРАКТЕРИСТИКИ» — таблиця 3 × 4 з двома вертикальними лініями; три групи цін (500 / 800 / 1000 мл).
 * Кути фото — як на CR1 / «Конверт білий» (галерея 7.5, картки 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk--flask .m-p-lead, main.m.m-pk--flask .m-p-spec-h, main.m.m-pk--flask .m-p-spec { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--flask .m-p-bul:not(.m-p-bul--cust) { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--flask .m-p-bul:not(.m-p-bul--cust) > li { padding-left: calc(12.2 * var(--pu)); }
  main.m.m-pk--flask .m-p-bul:not(.m-p-bul--cust) > li::before { left: calc(-5.7 * var(--pu)); }
  main.m.m-pk--flask .m-p-h1 { margin-top: calc(23.9 * var(--pu)); }
  main.m.m-pk--flask .m-p-lead { margin-top: calc(24.9 * var(--pu)); }
  main.m.m-pk--flask .m-ps--top .m-p-cta { margin-top: calc(17.7 * var(--pu)); }
  main.m.m-pk--flask .m-ps--cta { padding: calc(33 * var(--pu)) 0 calc(29 * var(--pu)); }
  main.m.m-pk--flask .m-ps--top { padding-bottom: calc(21.95 * var(--pu)); }
  main.m.m-pk--flask .m-ps--ex { padding-top: calc(25.86 * var(--pu)); padding-bottom: calc(30.7 * var(--pu)); }
  main.m.m-pk--flask .m-ex { margin-top: calc(25.25 * var(--pu)); }
  main.m.m-pk--flask .m-p-h2 + .m-ex { margin-top: calc(29.12 * var(--pu)); }
  main.m.m-pk--flask .m-ps--cust { padding-bottom: calc(26.55 * var(--pu)); }
  main.m.m-pk--flask .m-ps--cust .m-p-bul--cust { margin-top: calc(21.4 * var(--pu)); }
  main.m.m-pk--flask .m-ps--cust .m-p-bul--cust { margin-left: calc(35.95 * var(--pu)); max-width: calc(100% - 35.95 * var(--pu)); }
  main.m.m-pk--flask .m-p-bul--cust > li + li { margin-top: calc(18.8 * var(--pu)); }
  main.m.m-pk--flask .m-ex--sq .m-ex__cap { top: calc(382.5 * var(--pu)); }
  main.m.m-pk--flask .m-ex--sq .m-ex__img { left: calc(3.3 * var(--pu)); top: calc(38.5 * var(--pu)); width: calc(340.8 * var(--pu)); height: calc(340.8 * var(--pu)); }
  main.m.m-pk--flask .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(24 * var(--pu)); }
  main.m.m-pk--flask .m-pk-grp:not(:last-child) { padding-bottom: calc(32.2 * var(--pu)); }
  main.m.m-pk--flask .m-pk-grp:last-child { padding-bottom: calc(14.4 * var(--pu)); }
  main.m.m-pk--flask .m-pk-grp .m-price__table { margin-top: calc(12.25 * var(--pu)); }
  main.m.m-pk--flask .m-pk-grp .m-price__table tr { justify-content: flex-start; }
  main.m.m-pk--flask .m-pk-grp .m-price__table th { width: calc(193.99 * var(--pu)); flex: none; }
  main.m.m-pk--flask .m-pk-grp .m-price__table td { position: relative; top: calc(-1 * var(--pu)); }
  main.m.m-pk--flask .m-pk-grp .m-price__table tr { height: calc(35.8 * var(--pu)); }
  main.m.m-pk--flask .m-pk-grp .m-price__table tr::after { bottom: calc(-1 * var(--pu)); }
}

@media (max-width: 1023.98px) {
  /* «ХАРАКТЕРИСТИКИ» — таблиця 3 × 4: колонки з x 19.3 / 108.95 / 201.48 / 293.99, вертикалі #CACACA на x 194.5 і 287.07 */
  main.m.m-pk--flask .m-p-spect { position: relative; margin: calc(-.5 * var(--pu)) 0 0 calc(19.3 * var(--pu)); width: calc(100% - 19.3 * var(--pu)); }
  main.m.m-pk--flask .m-p-spect table { table-layout: fixed; border-collapse: collapse; width: calc(354.7 * var(--pu)); max-width: 100%; }
  main.m.m-pk--flask .m-p-spect th, main.m.m-pk--flask .m-p-spect td { padding: 0; text-align: left; font-weight: 400; white-space: nowrap; height: var(--p-lh); }
  main.m.m-pk--flask .m-p-spect th { width: calc(108.7 * var(--pu)); }
  main.m.m-pk--flask .m-p-spect td:nth-child(2) { width: calc(148 * var(--pu)); }
    main.m.m-pk--flask .m-p-spect::before {
    content: ""; position: absolute; top: calc(var(--spt-top, 2) * var(--pu)); height: calc(48.5 * var(--pu)); width: calc(1px * var(--m-hs)); background: var(--m-line); pointer-events: none;
  }
  main.m.m-pk--flask .m-p-spect::before { left: calc(222 * var(--pu)); }
}

@media (max-width: 1023.98px) {
  main.m.m-pk--flask .m-ex { height: calc(416 * var(--pu)); margin-top: calc(26 * var(--pu)); }
  main.m.m-pk--flask .m-p-h2 + .m-ex { margin-top: calc(27.3 * var(--pu)); }
}

/* ============ «Брелок B1» — мобільний макет (Corel SVG, 390 × 3465), на шаблоні m-pk (як «Термочашка D1») ============
 * Кути фото — як на CR1 / «Конверт білий» (галерея 7.5, картки 12.32). */
@media (max-width: 1023.98px) {
  main.m.m-pk--keychain .m-p-lead, main.m.m-pk--keychain .m-p-spec-h, main.m.m-pk--keychain .m-p-spec { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--keychain .m-p-bul:not(.m-p-bul--cust) { margin-left: calc(19 * var(--pu)); max-width: calc(100% - 19 * var(--pu)); }
  main.m.m-pk--keychain .m-p-bul:not(.m-p-bul--cust) > li { padding-left: calc(12.2 * var(--pu)); }
  main.m.m-pk--keychain .m-p-bul:not(.m-p-bul--cust) > li::before { left: calc(-5.7 * var(--pu)); }
  main.m.m-pk--keychain .m-p-h1 { margin-top: calc(24.5 * var(--pu)); }
  main.m.m-pk--keychain .m-p-lead { margin-top: calc(25.9 * var(--pu)); }
  main.m.m-pk--keychain .m-ps--top .m-p-cta { margin-top: calc(32.7 * var(--pu)); }
  main.m.m-pk--keychain .m-ps--ex { padding-top: calc(27.36 * var(--pu)); }
  main.m.m-pk--keychain .m-ex { margin-top: calc(25.25 * var(--pu)); }
  main.m.m-pk--keychain .m-p-h2 + .m-ex { margin-top: calc(27.12 * var(--pu)); }
  main.m.m-pk--keychain .m-ps--cust { padding-bottom: calc(25.4 * var(--pu)); }
  main.m.m-pk--keychain .m-ps--cust .m-p-bul--cust { margin-top: calc(21.4 * var(--pu)); }
  main.m.m-pk--keychain .m-ps--cust .m-p-bul--cust { margin-left: calc(35.95 * var(--pu)); max-width: calc(100% - 35.95 * var(--pu)); }
  main.m.m-pk--keychain .m-p-bul--cust > li + li { margin-top: calc(19.45 * var(--pu)); }
  main.m.m-pk--keychain .m-ex--sq .m-ex__cap { top: calc(385.5 * var(--pu)); }
  main.m.m-pk--keychain .m-ex--sq .m-ex__img { left: calc(3.3 * var(--pu)); top: calc(38.5 * var(--pu)); width: calc(340.8 * var(--pu)); height: calc(340.8 * var(--pu)); }
  main.m.m-pk--keychain .m-ps--price .m-p-h2 + .m-pk-grp { margin-top: calc(24 * var(--pu)); }
  main.m.m-pk--keychain .m-pk-grp:not(:last-child) { padding-bottom: calc(32.7 * var(--pu)); }
  main.m.m-pk--keychain .m-pk-grp:last-child { padding-bottom: calc(13.4 * var(--pu)); }
  main.m.m-pk--keychain .m-pk-grp .m-price__table { margin-top: calc(11.2 * var(--pu)); }
  main.m.m-pk--keychain .m-pk-grp .m-price__table tr { justify-content: flex-start; }
  main.m.m-pk--keychain .m-pk-grp .m-price__table th { width: calc(193.99 * var(--pu)); flex: none; }
  main.m.m-pk--keychain .m-pk-grp .m-price__table td { position: relative; top: calc(-1 * var(--pu)); }
  main.m.m-pk--keychain .m-pk-grp .m-price__table tr { height: calc(36 * var(--pu)); }
}
@media (max-width: 1023.98px) {
  main.m.m-pk--keychain .m-ps--top { padding-bottom: calc(33.25 * var(--pu)); }
  main.m.m-pk--keychain .m-ps--cta { padding: calc(33 * var(--pu)) 0 calc(31 * var(--pu)); }
}