/* --- sense-main --- */
/* SENSE — main.css: єдине місце оголошення токенів (`:root`) і порядку шарів; сторінковий CSS лише споживає `var(--*)`. */

@layer reset, tokens, base, vendor, components, page, wp;

/* @layer tokens */
@layer tokens {
  :root {
    /* Палітра: бренд-аркуш */
    --color-bg:            var(--color-cream);    --color-cream:         #FFFBEF;    --color-bg-warm:       #FAF6EB;    --color-product-cream: #DBD8C8;    --color-product-grey:  #C6C4BC;    /* ПАЛІТРА (текст/бренд) */
    --color-text:          #000000;    --color-brand:         #9CBBCA;    --color-deep-blue:     #3D464B;    --color-gold:          #B5945A;    --color-brand-sage:    #8EA093;    --color-muted-base:    #8F8D86;
    --color-text-muted:     #6D6B66;    --color-control-border: #86847E;
    --color-focus:          var(--color-brand);
    --color-error:         #A33A2B;    --color-success:       #4F6B57;
    /* ПАЛІТРА (функціональні дрібні) */
    --color-rule:          #585551;
    --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);
    --color-text-rgb: 0 0 0;

    /* ШРИФТИ */
    --font-main:   "EB Garamond", Georgia, "Times New Roman", serif;    --font-accent: "Great Vibes", "Segoe Script", cursive;    --fw-regular: 400;    --fw-medium: 500;    --fw-bold:   700;
    /* Типо-шкала: базовий сегмент 375→991 */
    --fs-h1:             clamp(1.8750rem, 1.289444rem + 2.459016vw, 2.8125rem);    --fs-h2:             clamp(1.7500rem, 1.2173rem + 2.2727vw, 2.6250rem); /* 28→42 */
    --fs-subhead:        clamp(1.2500rem, 0.8695rem + 1.6234vw, 1.5000rem);    --fs-subhead-lg:     clamp(1.2500rem, 0.8695rem + 1.6234vw, 1.8750rem);    --fs-body:           clamp(0.9375rem, 0.8614rem + 0.3247vw, 1.0625rem);    --fs-accent-lg:      clamp(2.1250rem, 1.6684rem + 1.9481vw, 2.8750rem);    /* Роль «рукопис» (Great Vibes sm) */
    --fs-accent-sm:      1.0625rem;  /* 17 @375–639 */
    --fs-ui:             clamp(0.8125rem, 0.8125rem + (100vw - 375px) * 2 / 616, 0.9375rem); /* 13→15 */

    --lh-heading: 0.83;    --lh-subhead: 1;    --lh-body:    1.25;    --lh-ui:      1.34;    --lh-accent-lg: 1.1;
    --lh-accent-sm: 0.9;
    --ls-accent-lg: -0.02em;
    /* КАРКАС (фluїд, сегмент 375→991) */
    --gutter:    clamp(1.25rem, 0.489042rem + 3.246753vw, 2.5rem);    --header-h:  clamp(6.9375rem,  5.4536rem + 6.3312vw, 9.3750rem);  /* 111→150 */
    --container: min(99rem, 100% - 2 * var(--gutter));               /* 335 / 911 / 1584 */
    --edge:      max(var(--gutter), (100% - 99rem) / 2);
    /* РАДІУСИ / ТІНІ / РУХ */
    --radius-card:  1.875rem;    --radius-input: 1.25rem;    --radius-pill:  6.25rem;    --shadow-text:  0 4px 4px rgba(0, 0, 0, 0.25);    --transition:   0.2s ease;
    --gap-3xs: 0.625rem;    --gap-2xs: 1.125rem;    --gap-xs:  1.25rem;    --gap-sm:  1.5625rem;    --gap-card-stack: clamp(0.9375rem, 0.5532rem + 1.639344vw, 1.5625rem);  /* 15→25 */
    --gap-md:  1.875rem;    --gap-lg:  2.25rem;    --gap-xl:  2.5rem;    --gap-section-heading: 5.875rem;    --gap-cue: 0.125rem;  /* 2 */
    --size-cue: 0.3125rem; /* 5 */

    /* РОЗМІР КОНТРОЛУ (степер, свотч) */
    --control-size: clamp(1.75rem, 1.673156rem + 0.327869vw, 1.875rem);   /* 28→30 */

    --control-form: clamp(1rem, 1rem + (100vw - 375px) * 2 / 616, 1.125rem);   /* 16→18 */

    /* Ритм краю секції */
    --rhythm-edge: clamp(2.5rem, 2.5rem + (100vw - 375px) * 30 / 615, 4.375rem);   /* 40→70 */

    /* Відступ під заголовком */
    --gap-under-heading: clamp(1.875rem, 1.487624rem + 1.652893vw, 2.5rem);  /* 30→40 */

    --card-pad-block:  clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 616, 2.5rem);   /* 30→40 */
    --card-pad-inline: clamp(1.5625rem, 1.5625rem + (100vw - 375px) * 15 / 616, 2.5rem);   /* 25→40 */

    /* ШИРИНА КНОПКИ */
    --btn-min: 0;
  }

  @media (min-width: 640px) {
    :root { --btn-min: 14.375rem; }   /* 230 */
  }

  @media (min-width: 640px)  { :root { --fs-accent-sm: 1.1875rem; } }  /* 19 */
  @media (min-width: 860px)  { :root { --fs-accent-sm: 1.3125rem; } }  /* 21 */
  @media (min-width: 991px)  { :root { --fs-accent-sm: 1.4375rem; } }  /* 23 */
  @media (min-width: 1208px) { :root { --fs-accent-sm: 1.7500rem; } }  /* 28 */
  @media (min-width: 1424px) { :root { --fs-accent-sm: 2.0625rem; } }  /* 33 */
  @media (min-width: 1727px) { :root { --fs-accent-sm: 2.5000rem; } }  /* 40 */

  @media (min-width: 991px) {
    :root {
      --fs-h1:             clamp(2.8125rem, 1.1457rem + 2.6911vw, 4.3750rem); /* 45→70 */
      --fs-h2:             clamp(2.6250rem, 1.4249rem + 1.9376vw, 3.7500rem); /* 42→60 */
      --fs-subhead:        1.8750rem;      --fs-subhead-lg:     clamp(1.8750rem, 1.2083rem + 1.0764vw, 2.5000rem); /* 30→40 */
      --fs-body:           clamp(1.0625rem, 0.8625rem + 0.3229vw, 1.2500rem); /* 17→20 */
      --fs-accent-lg:      clamp(2.8750rem, 1.6082rem + 2.0452vw, 4.0625rem); /* 46→65 */
      --gutter:   clamp(2.5rem, -6.0801rem + 13.852814vw, 10.5rem);     /* 40→168 */
      --header-h: clamp(9.3750rem,  8.0416rem +  2.1529vw, 10.6250rem); /* 150→170 */
      --control-size: clamp(1.875rem, 1.338163rem + 0.866739vw, 2.375rem); /* 30→38 */
      --control-form: clamp(1.125rem, 1.125rem + (100vw - 991px) * 2 / 929, 1.25rem);  /* 18→20 */
      --rhythm-edge:  clamp(4.375rem, 4.375rem + (100vw - 991px) * 30 / 909, 6.25rem);  /* 70→100 */
      --gap-under-heading: clamp(2.5rem, 1.818627rem + 1.100110vw, 3.125rem);          /* 40→50 */
    }
  }

  @media (min-width: 1920px) {
    :root {
      --fs-h1:              4.3750rem;  /* 70 */
      --fs-h2:              3.7500rem;  /* 60 */
      --fs-subhead:         1.8750rem;      --fs-subhead-lg:      2.5000rem;  /* 40 */
      --fs-body:            1.2500rem;  /* 20 */
      --fs-accent-lg:       4.0625rem;  /* 65 */
      --gutter:            10.5rem;      --header-h:          10.6250rem;  /* 170 */
      --control-size:       2.375rem;      --control-form:       1.25rem;      --rhythm-edge:        6.25rem;      --gap-under-heading:  3.125rem;    }
  }
}

/* @layer reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  img, svg, video { max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button { padding: 0; }
  /* ⚠️ iOS зумить сторінку від подвійного тапу (швидкі «+»/«−»); `manipulation` гасить лише це, pinch-zoom лишається. */
  button, a, label, summary, [role="button"] { touch-action: manipulation; }
}

/* @layer base */
@layer base {
  html {
    /* ⚠️ iOS бере колір пружного overscroll із html: верх = крем шапки, низ = бренд підвалу. */
    background: linear-gradient(var(--color-cream) 0 50%, var(--color-brand) 50% 100%);
    scroll-padding-top: calc(var(--header-h) - 3.375rem); /* фокус не пірнає під sticky-шапку (2.4.11) */
    scrollbar-color: var(--color-brand) var(--color-cream);
  }
  body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-main);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* Skip-link (2.4.1) */
  .skip-link {
    position: absolute;
    top: 0; left: 0;
    z-index: 200;
    translate: 0 -200%;
    padding: 0.75rem 1.25rem;
    background: var(--color-cream);
    color: var(--color-text);
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    text-decoration: underline;
    border-radius: 0 0 var(--radius-input) 0;
    box-shadow: 0 2px 8px rgb(16 5 5 / 0.25);
  }
  .skip-link:focus {
    translate: 0 0;
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
  }
  #main:focus { outline: none; }

  h1, .text-h1 {
    margin: 0;
    font-size: var(--fs-h1);              /* 30 → 45 → 70 */
    line-height: var(--lh-heading);
    font-weight: var(--fw-medium);
  }
  h2, .text-h2 {
    margin: 0;
    font-size: var(--fs-h2);              /* 28 → 42 → 60 */
    line-height: var(--lh-heading);
    font-weight: var(--fw-medium);
  }
  h3, h4, .text-h3 {
    margin: 0;
    font-size: var(--fs-subhead);    line-height: var(--lh-subhead);
    font-weight: var(--fw-medium);
  }
  .text-subhead-lg {
    margin: 0;
    font-size: var(--fs-subhead-lg);
    line-height: var(--lh-subhead);
    font-weight: var(--fw-medium);
  }
  p {
    margin: 0;
    font-size: var(--fs-body);            /* 15 → 17 → 20 */
    line-height: var(--lh-body);
  }
  .text-ui {
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
  }
  .text-accent {
    font-family: var(--font-accent);
    font-weight: var(--fw-regular);    font-size: var(--fs-accent-lg);       /* 34 → 46 → 65 */
    line-height: var(--lh-accent-lg);
    letter-spacing: var(--ls-accent-lg);
  }
  .text-accent--sm {
    font-size: var(--fs-accent-sm);       /* 25 → 31 → 40 */
    line-height: var(--lh-accent-sm);
    letter-spacing: normal;
  }

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

@layer components {
  /* ⚠️ Фокус-кільце гасне під вказівником: Chrome матчить `:focus-visible` на кнопці й після кліку мишею. */
  html.is-pointer.is-pointer.is-pointer :focus-visible,
  html.is-pointer.is-pointer.is-pointer :focus-visible + * {
    outline: none;
  }
}
@layer wp {
  a.header__lang-option { text-decoration: none; }
}

/* @font-face — self-host .woff2 */
@font-face {
  font-family: "EB Garamond";
  src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-cyrillic.woff2") format("woff2");
  font-weight: 500 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "EB Garamond";
  src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-italic-latin.woff2") format("woff2");
  font-weight: 500 700; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  src: url("https://sensebaby.com/wp-content/themes/sense/fonts/eb-garamond-var-italic-cyrillic.woff2") format("woff2");
  font-weight: 500 700; font-style: italic; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Great Vibes";
  src: url("https://sensebaby.com/wp-content/themes/sense/fonts/great-vibes-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Great Vibes";
  src: url("https://sensebaby.com/wp-content/themes/sense/fonts/great-vibes-400-cyrillic.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: block;  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- sense-c-header --- */
/* HEADER — шапка всіх сторінок. ⚠️ Хуки JS, не міняти: `#burgerBtn` `#mobileNav` `#navOverlay` `#catalogWrap` `#catalogBtn` `.header__cart-badge`. */
@layer components {

  .header {
    position: sticky;
    top: 0;
    z-index: 70;
    background: var(--color-cream);    transition: opacity 0.3s ease;
  }
  /* ⚠️ In-app браузер Telegram на iOS при overscroll угору показує щілину над шапкою; смуга кольору шапки закриває її. */
  .header::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: 100vh;
    background: var(--color-cream);
    pointer-events: none;
  }
  html.nav-open .header {
    opacity: 0;
    pointer-events: none;
  }

  /* Верхній ряд */
  .header__bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100%, 120rem);    margin-inline: auto;
    height: calc(var(--header-h) - 3.375rem);    padding-inline: var(--gutter);
  }

  /* Лого */
  .header__logo {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    flex-shrink: 0;
    width: clamp(3.125rem, 0.880175rem + 9.577922vw, 6.8125rem);
    color: var(--color-text);  }
  .header__logo svg { display: block; width: 100%; height: auto; }

  /* Навігація (лише десктоп) */
  .header__nav { display: none; }
  .header__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--gap-md); /* 30 */
    align-items: center;
  }
  .header__menu-link {
    display: block;
    padding: 0;    border: 0;
    background: none;
    font-family: var(--font-main);
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
  }
  @media (hover: hover) {
    .header__menu-link:hover { color: var(--color-brand-sage); }
  }

  .header__catalog { position: relative; display: inline-flex; align-items: center; gap: 0.15625rem; /* 2.5 */ }
  .header__catalog-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size-cue); height: var(--size-cue);    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }
  .header__catalog-toggle::before {
    content: "";
    position: absolute;
    inset:
      calc((1.5rem - var(--size-cue)) / -2)      calc(var(--size-cue) - 1.5rem)      calc((1.5rem - var(--size-cue)) / -2)      0;  }
  .header__catalog-toggle:focus-visible { outline: none; }
  .header__catalog-toggle:focus-visible::before {
    outline: 2px solid var(--color-text);
    outline-offset: 0;
  }
  /* Пташка */
  .header__catalog-toggle svg,
  .header__pill svg {
    width: var(--size-cue);
    height: auto;
    flex-shrink: 0;
    transition: transform var(--transition);
  }
  @media (hover: hover) {
    .header__catalog:hover .header__catalog-toggle svg,
    .header__select:hover .header__pill svg { transform: rotate(180deg); }
  }
  .header__catalog.is-open .header__catalog-toggle svg,
  .header__select.is-open .header__pill svg { transform: rotate(180deg); }
  .header__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 30;
    display: none;
    width: max-content;
    padding: var(--gap-xs) 1.5625rem;  /* 20 / 25 */
    background: var(--color-cream);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-input);
  }
  .header__catalog.is-open .header__dropdown { display: block; }
  .header__dropdown-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--gap-3xs);
  }
  .header__dropdown-link {
    display: block;
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--color-text);
    text-decoration: none;
  }
  @media (hover: hover) {
    .header__dropdown-link:hover { color: var(--color-brand-sage); }
  }

  /* Правий кластер дій */
  .header__actions {
    display: flex;
    align-items: center;
    gap: var(--gap-3xs); /* 10 */
  }

  .header__select { position: relative; display: none; }  .header__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-cue);    width: 3.25rem; height: 3.25rem; /* 52 */
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    background: none;
    font-family: var(--font-main);
    font-size: var(--fs-ui);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color var(--transition);
  }
  @media (hover: hover) {
    .header__pill:hover { border-color: var(--color-text-muted); }
  }
  .header__select-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50%;
    z-index: 30;
    display: none;
    width: 100%;    padding: 0;
    background: var(--color-cream);
    border: 1px solid var(--color-control-border);
    border-top: 0;
    border-radius: 0 0 var(--radius-pill) var(--radius-pill);
    text-align: center;
  }
  .header__select.is-open .header__select-dropdown { display: grid; gap: 0; }
  .header__select.is-open .header__pill {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .header__lang-option,
  .header__currency-option {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-main);
    font-size: var(--fs-ui);
    font-weight: var(--fw-medium);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-pill);
  }
  .header__lang-option.is-active,
  .header__currency-option.is-active { background: var(--color-bg-warm); }
  .header__lang-option[hidden],
  .header__currency-option[hidden] { display: none; }
  @media (hover: hover) {
    .header__lang-option:hover,
    .header__currency-option:hover { color: var(--color-brand); }
  }
  .header__lang-option:active,
  .header__currency-option:active { color: var(--color-brand); }

  .header__icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem; height: 1.75rem;   /* 28 */
    border-radius: var(--radius-pill);
    color: var(--color-brand);    transition: color var(--transition), border-color var(--transition);
  }
  .header__icon-btn svg { display: block; width: 100%; height: 100%; }
  .header__tg {
    display: none;
    border: 1px solid var(--color-control-border);
  }
  @media (hover: hover) {
    .header__tg:hover {
      border-color: var(--color-text-muted);
      color: var(--color-brand-sage);    }
    .header__cart:hover { color: var(--color-brand-sage); }  }

  /* Бейдж кошика: двигун перемикає `.visible`. */
  .header__cart-badge {
    position: absolute;
    top: -0.375rem; right: -0.375rem;    display: none;
    min-width: 1.375rem; height: 1.375rem; /* 22 */
    padding-inline: 0.25rem;
    align-items: center; justify-content: center;
    background: var(--color-brand);
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 0.125rem var(--color-cream);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--color-cream);
  }
  .header__cart-badge.visible { display: inline-flex; }

  .header__contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-size);    padding-inline: var(--gap-3xs);    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-brand);    font-family: var(--font-main);
    font-size: var(--fs-ui);    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    text-decoration: none;    color: var(--color-cream);    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition);
  }
  @media (hover: hover) {
    .header__contact:hover { background: var(--color-brand-sage); }  }
  .header__contact:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .header__burger {
    position: relative;
    display: inline-block;
    width: 1.625rem; height: 1.5rem;  /* зона ≥24px (2.5.8); гліф 26×17 */
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }
  .header__burger-line {
    position: absolute;
    left: 0;
    width: 100%; height: 1px;
    translate: 0 -50%;
    background: currentColor;
    transition: top 0.3s ease, rotate 0.3s ease, opacity 0.3s ease;
  }
  .header__burger-line:nth-child(1) { top: calc(50% - 0.5rem); }
  .header__burger-line:nth-child(2) { top: 50%; }
  .header__burger-line:nth-child(3) { top: calc(50% + 0.5rem); }
  .header__burger.is-active .header__burger-line:nth-child(1) { top: 50%; rotate: 45deg; }
  .header__burger.is-active .header__burger-line:nth-child(2) { opacity: 0; }
  .header__burger.is-active .header__burger-line:nth-child(3) { top: 50%; rotate: -45deg; }

  /* Корпоративна стрічка */
  .header__ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-3xs);
    height: clamp(2.75rem, 2.3657rem + 1.639344vw, 3.375rem);
    padding-inline: var(--gutter);
    background: var(--color-brand-sage);
    text-align: center;
    text-decoration: none;
    font-family: var(--font-main);
    font-size: clamp(0.6250rem, 0.429819rem + 0.819672vw, 0.9375rem); /* 10→15 */
    font-weight: var(--fw-medium);
    line-height: 1.19;
    text-transform: uppercase;
    color: var(--color-cream);  }
  .header__ribbon svg {
    flex-shrink: 0;
    width: clamp(0.3125rem, 0.1011rem + 0.901639vw, 0.65625rem);
    height: auto;
  }
  .header__ribbon-link {
    color: inherit;
    text-decoration: none;
  }
  .header__ribbon[hidden] { display: none; }

  .header__ribbon-close {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .header__ribbon-close::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 1.5rem;
    height: 1.5rem;
  }
  .header__ribbon-close:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 2px;
  }
  .header__ribbon-cue { text-underline-offset: 0.15em; }
  @media (min-width: 495px) {
    .header__ribbon-br { display: none; }
  }

  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gap-xl) var(--gutter);
    background: var(--color-cream);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; }
  .mobile-nav__menu {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    gap: var(--gap-md);                /* 30 */
    justify-items: center;
    text-align: center;
  }
  .mobile-nav__link {
    /* ціль ≥24 (2.5.8) */
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    font-size: var(--fs-subhead);    font-weight: var(--fw-medium);
    line-height: var(--lh-subhead);
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
  }
  @media (hover: hover) {
    .mobile-nav__link:hover { color: var(--color-brand-sage); }
  }
  .mobile-nav__link:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 4px;
  }
  .mobile-nav__catalog {
    flex-wrap: wrap;    justify-content: center;
    --size-cue: 0.5625rem;    gap: 0.5rem;  }
  .mobile-nav__catalog .header__dropdown {
    position: static;    translate: none;
    width: 100%;
    margin-top: 0.9375rem;    padding: 0;
    border: 0;    background: none;
  }
  .mobile-nav__catalog .header__dropdown-list {
    justify-items: center;
    gap: 0.75rem;  }
  .mobile-nav__catalog .header__dropdown-link {
    color: var(--color-text-muted);    font-size: 1.0625rem;  }
  .mobile-nav__close {
    position: absolute;
    top: calc((var(--header-h) - 3.375rem) / 2 - 0.75rem);
    right: var(--gutter);
    width: 1.625rem; height: 1.5rem;    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
  }
  .mobile-nav__close::before,
  .mobile-nav__close::after {
    content: "";
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 1px;
    translate: 0 -50%;
    background: currentColor;
  }
  .mobile-nav__close::before { rotate: 45deg; }
  .mobile-nav__close::after  { rotate: -45deg; }
  .mobile-nav__extras {
    position: absolute;
    bottom: var(--gap-xl);
    left: 50%;
    translate: -50%;
    display: flex;
    align-items: center;
    gap: var(--gap-xs);                /* 20 */
  }
  .mobile-nav__extras .header__select { display: inline-block; }
  .mobile-nav__extras .header__select-dropdown {
    top: auto;
    bottom: 100%;    border-top: 1px solid var(--color-control-border);
    border-bottom: 0;
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  }
  .mobile-nav__extras .header__select.is-open .header__pill {
    border-bottom: 1px solid var(--color-control-border);
    border-bottom-left-radius: var(--radius-pill);
    border-bottom-right-radius: var(--radius-pill);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .mobile-nav__tg {
    display: inline-flex;
    width: 2.75rem; height: 2.75rem;  }
  .mobile-nav__close:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 4px;
  }
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    background: rgb(var(--color-text-rgb) / 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .nav-overlay.is-visible { opacity: 1; }

  /* Планшет */
  @media (min-width: 640px) {
    .header__actions { gap: var(--gap-xs); }          /* 20 */
    .header__select { display: inline-block; }
    .header__tg { display: inline-flex; }
    .header__icon-btn { width: 3.25rem; height: 3.25rem; } /* 52 */
    .header__contact { display: none; }
    .header__burger { width: 1.8125rem; height: 1.5rem; }  }

  /* 991 → 1920: лише розміри */
  @media (min-width: 991px) {
    .header__logo { width: clamp(6.8125rem, 2.3165rem + 7.258938vw, 11rem); }
    .header__ribbon {
      font-size: clamp(0.9375rem, 0.599946rem + 0.541712vw, 1.2500rem); /* 15→20 */
    }
  }

  /* Десктоп */
  @media (min-width: 1280px) {
    .header__nav { display: block; }
    .header__menu-item:last-child { display: none; }
    .header__logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .header__burger { display: none; }
    .mobile-nav, .nav-overlay { display: none; }
  }

  @media (min-width: 1920px) {
    .header__menu-item:last-child { display: block; }
  }
}

@layer components {

  .cart-fly {
    position: fixed;
    z-index: 80;    width: 3.25rem; height: 3.25rem;    margin: -1.625rem 0 0 -1.625rem;    border-radius: 50%;
    overflow: hidden;
    background: var(--color-brand);
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.25);
    pointer-events: none;
    animation: sense-cart-fly 0.55s cubic-bezier(0.15, 0.75, 0.35, 1) forwards;
  }
  .cart-fly img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  @keyframes sense-cart-fly {
    0%   { translate: 0 0; scale: 1; opacity: 1; }
    100% { translate: var(--fly-x) var(--fly-y); scale: 0.22; opacity: 0.35; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .header__cart.is-catch  { animation: sense-cart-catch 0.4s ease; }
    .header__cart-badge.is-catch { animation: sense-cart-catch 0.4s ease 0.08s; }
  }
  @keyframes sense-cart-catch {
    0%   { translate: 0 0; }
    35%  { translate: 0 0.25rem; }
    70%  { translate: 0 -0.125rem; }
    100% { translate: 0 0; }
  }
}

/* --- sense-c-footer --- */
/* FOOTER — підвал усіх сторінок; меню = `ul > li > a` під `wp_nav_menu`. ⚠️ Крем-текст на блакиті (1.97:1) — свідомий виняток 1.4.3 з дизайну, не недогляд. */
@layer components {

  .footer {
    position: relative;
    background: var(--color-brand);
    color: var(--color-cream);    padding-block: 1.5625rem 1.25rem;  }

  .footer__inner {
    width: min(100%, 120rem);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .footer__logo {
    display: block;
    width: clamp(9.28125rem, 2.0002rem + 31.065574vw, 21.125rem);
    color: currentColor;
  }
  .footer__logo svg { display: block; width: 100%; height: auto; }

  /* Колонки лінків */
  .footer__cols {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);    margin-top: var(--gap-xl);
  }
  .footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gap-3xs);    align-content: start;
  }
  .footer__link {
    font-family: var(--font-main);
    font-size: var(--fs-ui);    font-weight: var(--fw-bold);    line-height: var(--lh-ui);
    text-transform: uppercase;
    color: currentColor;
    text-decoration: none;
  }
  @media (hover: hover) {
    .footer__link:hover { text-decoration: underline; }
  }

  /* Акцент «Збирай сенси!» — живий шрифт, не картинка */
  .footer__accent {
    display: block;
    margin-top: var(--gap-xl);
    font-family: var(--font-accent);    font-size: var(--fs-accent-lg);     /* 34→46→65 */
    font-weight: var(--fw-regular);    line-height: var(--lh-accent-lg);   /* 110% */
    letter-spacing: var(--ls-accent-lg);
    color: currentColor;    padding-inline-end: 0.18em;
    margin-bottom: 0.2em;
  }

  /* Нижній ряд політик */
  .footer__policy {
    display: flex;
    flex-wrap: wrap;    gap: var(--gap-3xs) 1.75rem;    margin: var(--gap-xl) 0 0;
    padding: 0;
    list-style: none;
  }
  .footer__policy .footer__link { font-weight: var(--fw-medium); }

  /* Мобайл */
  @media (max-width: 639.98px) {
    .footer__list { gap: 0.3125rem; }   /* 5 */
    .footer__cols { gap: 1.875rem; }    .footer__cols   { margin-top: 1.875rem; }
    .footer__accent { margin-top: 1.875rem; }
    .footer__policy { margin-top: 1.875rem; gap: 0.3125rem 1.75rem; }
  }

  /* Планшет */
  @media (min-width: 640px) {
    .footer { padding-block: 3.125rem; }    .footer__inner {
      display: grid;
      grid-template-columns: 1fr auto;      row-gap: 0;    }
    .footer__logo {
      grid-column: 1 / -1;
      justify-self: start;
    }
    .footer__inner > nav {
      grid-column: 1 / -1;
      justify-self: stretch;      margin-top: 3.75rem;    }
    .footer__cols {
      display: grid;
      grid-template-columns: repeat(3, max-content);
      justify-content: space-between;
      gap: var(--gap-xl);      margin: 0;
    }
    .footer__policy {
      grid-column: 1; grid-row: 3;
      align-self: end;
      margin: 3.75rem 0 0;      gap: 2.9375rem;                   /* 47 */
    }
    .footer__accent {
      grid-column: 2; grid-row: 3;
      justify-self: end;
      align-self: end;
      margin: 0 0 0.2em;
    }
  }

  /* Десктоп */
  @media (min-width: 1280px) {
    .footer { padding-block: 3.125rem 1.875rem; }    .footer__inner {
      grid-template-columns: 1fr 1fr;
      align-content: space-between;      min-height: 18.9375rem;      column-gap: var(--gap-xl);
    }
    .footer__logo { grid-column: 1; grid-row: 1; align-self: start; }
    .footer__inner > nav {
      grid-column: 2; grid-row: 1;
      justify-self: stretch;      align-self: start;
      margin-top: 0;
    }
    .footer__policy { grid-column: 1; grid-row: 2; margin: 0; }
    .footer__accent { grid-column: 2; grid-row: 2; margin: 0 0 0.2em; }
  }

}

/* --- sense-c-to-top --- */

@layer components {
  .to-top {
    position: fixed;
    right: min(var(--gutter), 2.5rem);
    bottom: 1.5625rem;                   /* 25 */
    z-index: 40;
    display: inline-flex;
    flex-direction: row;    align-items: center;
    gap: 0.5rem;    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.625rem);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    -webkit-tap-highlight-color: transparent;
  }
  .to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
  .to-top svg { width: 2.875rem; height: 2.875rem; }  .to-top__label {
    color: var(--color-brand-sage);    font-family: var(--font-main);    font-size: var(--fs-ui);    font-weight: var(--fw-medium);
    line-height: 1.19;
    letter-spacing: -0.03125rem;    text-align: left;
  }
  .to-top:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }
  @media (max-width: 990.98px) {
    .to-top { flex-direction: column; gap: var(--gap-cue); }
    .to-top__label { text-align: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .to-top { transition: opacity var(--transition), visibility var(--transition); transform: none; }
    .to-top.is-visible { transform: none; }
  }
}

/* --- sense-c-buttons --- */
/* BUTTONS — кнопки (primary заливка / outline контурна). */
@layer components {

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: clamp(2.8125rem, 2.4282rem + 1.639344vw, 3.4375rem);
    padding-inline: clamp(2rem, 1.6926rem + 1.311475vw, 2.5rem); /* 32→40 */
    min-width: var(--btn-min);
    max-width: 100%;
    border-radius: var(--radius-pill);
    font-family: var(--font-main);
    font-size: var(--fs-ui);           /* 13→15 */
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition);
  }
  .btn:focus-visible {
    outline: 2px solid var(--color-text);    outline-offset: 2px;
  }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;    cursor: not-allowed;
  }

  /* Primary */
  .btn--primary {
    border: 1px solid var(--color-brand);
    background: var(--color-brand);
    color: var(--color-cream);
  }
  @media (hover: hover) {
    .btn--primary:hover:not(:disabled) {      background: var(--color-brand-sage);
      border-color: var(--color-brand-sage);
      color: var(--color-cream);
    }
  }
  .btn--primary:active:not(:disabled) {
    background: color-mix(in srgb, var(--color-brand) 85%, var(--color-text));
    border-color: transparent;
    color: var(--color-cream);
  }

  /* Outline */
  .btn--outline {
    min-width: 20.6875rem;
    border: 1px solid var(--color-control-border);
    background: transparent;
    color: var(--color-text);
  }
  @media (hover: hover) {
    .btn--outline:hover:not(:disabled) {      background: var(--color-brand);
      border-color: var(--color-brand);
      color: var(--color-cream);
    }
  }
  .btn--outline:active:not(:disabled) {
    background: color-mix(in srgb, var(--color-brand) 85%, var(--color-text));
    border-color: transparent;
    color: var(--color-cream);
  }

  /* Мобайл */
  @media (max-width: 639.98px) {
    .btn--outline { width: 100%; min-width: 0; }
  }
}

@layer components {
  /* Light */
  .btn--light {
    border: 1px solid var(--color-cream);
    background: var(--color-cream);
    color: var(--color-brand-sage);
  }
  @media (hover: hover) {
    .btn--light:hover:not(:disabled) {
      background: var(--color-brand);
      border-color: var(--color-brand);
      color: var(--color-cream);
    }
  }
  .btn--light:active:not(:disabled) {
    background: color-mix(in srgb, var(--color-brand) 85%, var(--color-text));
    border-color: transparent;
    color: var(--color-cream);
  }
}

/* --- sense-c-form-field --- */
/* FORM-FIELD — єдиний рецепт поля вводу (кошик, чекаут, модалка). */
@layer components {

  .field[hidden] { display: none; }
  .field {
    display: grid;
    gap: var(--gap-3xs);
    align-content: start;
  }

  .field__label {
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--color-text);
  }

  /* Спільний контрол: input / select / textarea. */
  .field__control {
    display: block;
    width: 100%;
    padding: 0.9375rem 1.5625rem;    /* ⚠️ Висота явна (падінги + рамки + рядок): поля з нативним редактором інакше виростають над сусідами. */
    height: calc(1.875rem + 2px + 1em * var(--lh-body));
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    background: none;
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .field__control::placeholder { color: var(--color-text-muted); }

  /* ⚠️ Автозаповнення: Chrome і Safari фарбують фон через UA `!important`, перекрити можна лише внутрішньою тінню. */
  .field__control {
    --field-surface: var(--color-bg-warm, var(--color-cream));
  }
  .field__control:-webkit-autofill,
  .field__control:-webkit-autofill:hover,
  .field__control:-webkit-autofill:focus,
  .field__control:-webkit-autofill:active {
    box-shadow: inset 0 0 0 100vmax var(--field-surface);
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    transition: background-color 0s;
  }

  textarea.field__control {
    height: 6.5rem;    padding: 0.9375rem 1.5625rem;    border-radius: var(--radius-input);
    resize: vertical;
  }

  select.field__control {
    padding-right: 3rem;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5.19615 4.5'%3E%3Cpath d='M2.59808 4.5L0 0h5.19615z' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.5625rem center;
    background-size: 0.5625rem auto;    cursor: pointer;
  }

  /* ⚠️ Нативний `input[type=date]` у Safari роздуває коробку, тому дата — текстове поле з маскою (`js/checkout.js`). */
  input[type="date"].field__control::-webkit-date-and-time-value { text-align: left; }

  .field__control:focus {
    outline: none;
    border-color: var(--color-focus);
    border-width: 2px;
    padding-block: calc(0.9375rem - 1px);
    padding-inline: calc(1.5625rem - 1px);
  }
  select.field__control:focus { padding-right: calc(3rem - 1px); }

  .field__hint {
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--color-text-muted);
  }

  .field__error {
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--color-error);
    margin-top: calc(0.3125rem - var(--gap-3xs));   /* 10 → 5 */
  }
  .field__error:empty { display: none; }
  .field--invalid .field__control {
    border-color: var(--color-error);
    border-width: 2px;
    padding-block: calc(0.9375rem - 1px);
    padding-inline: calc(1.5625rem - 1px);
  }

  .field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--gap-xs);
  }
  .field-row--address { grid-template-columns: minmax(0, 1fr) 10rem 10rem; }
  .field-row--street  { grid-template-columns: minmax(0, 1fr) 10rem; }
  .field-row--nums {
    grid-template-columns: repeat(3, 10rem);
    justify-content: start;
  }
  @media (max-width: 639.98px) {
    .field-row--address,
    .field-row--street { grid-template-columns: minmax(0, 1fr); }
    .field-row--nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .check,
  .radio {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-3xs);
    min-height: 1.5rem;                /* ціль ≥24 (2.5.8) */
    cursor: pointer;
  }
  .radio-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-3xs) var(--gap-md);  }

  .check__input,
  .radio__input {
    position: absolute;
    width: var(--control-form);
    height: var(--control-form);
    opacity: 0;
    cursor: pointer;
  }
  .check__box,
  .radio__box {
    position: relative;
    flex-shrink: 0;
    width: var(--control-form);
    height: var(--control-form);
    box-shadow: 0 0 0 1px var(--color-control-border);
    transition: box-shadow var(--transition), background-color var(--transition);
  }
  .radio__box { border-radius: 50%; }
  .check__box { border-radius: 0.25rem; }
  .radio__input:checked + .radio__box {
    background: radial-gradient(circle at 50% 50%,
                var(--color-brand) 0 34%, transparent 34.5%);
    box-shadow: 0 0 0 1px var(--color-brand);
  }
  .check__input:checked + .check__box {
    background: var(--color-brand);
    box-shadow: 0 0 0 1px var(--color-brand);
  }
  .check__input:checked + .check__box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-cream);
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 52% no-repeat;
  }
  .check__input:focus-visible + .check__box,
  .radio__input:focus-visible + .radio__box {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  .check__label,
  .radio__label {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .check__label a,
  .radio__label a {
    color: var(--color-text);
    text-underline-offset: 0.1875rem;
  }

  .fieldset {
    margin: 0;
    border: 0;
    min-inline-size: 0;  }
  .fieldset:not(.panel) { padding: 0; }
  .fieldset__legend {
    width: 100%;
    padding: 0;
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
  }

  .field--float { position: relative; }
  .field--float .field__label {
    position: absolute;
    z-index: 1;
    left: 1.5625rem;    top: calc((1.875rem + 2px + 1em * var(--lh-body)) / 2);
    transform: translateY(-50%);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
    pointer-events: none;    transition: top var(--transition), transform var(--transition),
                font-size var(--transition), color var(--transition);
  }
  .field--float .field__control {
    padding-top: 1.5rem;               /* 24 */
    padding-bottom: 0.375rem;          /* 6 */
  }
  .field--float .field__control:focus,
  .field--float.field--invalid .field__control {
    padding-top: calc(1.5rem - 1px);
    padding-bottom: calc(0.375rem - 1px);
  }
  .field--float .field__control::placeholder {
    opacity: 0;
    transition: opacity var(--transition);
  }
  .field--float .field__control:focus::placeholder { opacity: 1; }

  .field--float:has(.field__control:focus) .field__label,
  .field--float:has(.field__control:not(:placeholder-shown)) .field__label {
    top: 0.375rem;                     /* 6 */
    transform: none;
    font-size: var(--fs-ui);
    line-height: 1;
    color: var(--color-text);
  }
  .field--float:has(textarea) .field__label {
    top: 1.5rem;
    left: 0.9375rem;
    right: 0.9375rem;
    transform: none;
  }
  /* ⚠️ Довгий коментар прокручується вгору під підпис — підпис стає смугою кольору панелі, текст іде під неї.
     Відступи від 2px — під рамку фокуса; положення тексту підпису те саме, що вище. */
  .field--float:has(textarea.field__control:focus) .field__label,
  .field--float:has(textarea.field__control:not(:placeholder-shown)) .field__label {
    top: 2px;
    left: 2px;
    right: 2px;
    padding: calc(0.375rem - 2px) calc(0.9375rem - 2px) 0.125rem;
    border-radius: calc(var(--radius-input) - 2px) calc(var(--radius-input) - 2px) 0 0;
    background: var(--color-bg-warm);
  }
  @media (prefers-reduced-motion: reduce) {
    .field--float .field__label,
    .field--float .field__control::placeholder { transition: none; }
  }

  /* ⚠️ iOS Safari зумить сторінку при фокусі поля з кеглем <16px. */
  @media (max-width: 990.98px) {
    .field__control { font-size: 1rem; }
  }
}

/* --- sense-c-form-modal --- */
/* FORM-MODAL — модалка «Звʼяжіться з нами» та її відео- й подарунковий варіанти; поля — з `form-field.css`. */
@layer components {

  .form-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--gutter);
    padding-block: var(--gap-xs);
    background: rgb(16 5 5 / 0.55);
  }
  .form-modal[hidden] { display: none; }

  .form-modal__dialog {
    position: relative;
    width: min(31.25rem, 100%);    background: var(--color-cream);
    border-radius: var(--radius-input); /* 20 */
  }
  .form-modal__scroll {
    max-height: calc(100dvh - 2 * var(--gap-xs)); /* ⚠️ dvh: на iOS vh ховає низ під панеллю браузера */
    overflow-y: auto;    padding: 3.75rem;                  /* 60 */
    border-radius: var(--radius-input);
  }

  .form-modal__decor {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    width: 5.75rem;    height: auto;
    pointer-events: none;
    translate: -52% -52%;  }

  .form-modal__title {
    margin: 0 0 var(--gap-md);    font-size: var(--fs-subhead-lg);    line-height: var(--lh-subhead);
    font-weight: var(--fw-medium);
    text-align: center;
  }

  .form-modal__close {
    position: absolute;
    top: 0.9375rem; right: 0.9375rem;
    z-index: 3;    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem; height: 1.875rem; /* 30 — ціль ≥24 (2.5.8) */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-cream);    color: var(--color-text);
    font-size: 1.25rem;    line-height: 1;
    cursor: pointer;
  }
  .form-modal--video .form-modal__close {
    top: -0.9375rem; right: -0.9375rem;
    box-shadow: 0 1px 4px rgb(16 5 5 / 0.3);
  }
  .form-modal__close:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .form-modal__form {
    display: grid;
    gap: 0.9375rem;                    /* 15 */
  }
  .form-modal textarea.field__control { height: 4.5625rem; }   /* 73 */

  .form-modal .check__label {
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
  }

  .form-modal__submit { width: 100%; }
  .form-modal__status {
    margin: var(--gap-2xs) 0 0;
    font-size: var(--fs-ui);
    line-height: var(--lh-body);
    text-align: center;
    color: var(--color-text-muted);
  }
  .form-modal__status:empty { display: none; }
  .form-modal__status.is-ok { color: var(--color-brand-sage); }
  .form-modal__status.is-error { color: var(--color-error); }

  .form-modal--video .form-modal__dialog {
    width: fit-content;
    max-width: 100%;
    padding: var(--gap-xs);
  }
  .form-modal__video {
    --video-h: min(80dvh, 46.875rem);    aspect-ratio: 9 / 16;
    width: min(
      calc(100vw - 2 * var(--gutter) - 2 * var(--gap-xs)),
      calc(var(--video-h) * 9 / 16)
    );
    height: auto;
    margin-inline: auto;
    border-radius: var(--radius-input);
    overflow: hidden;
  }
  .form-modal__video iframe {
    width: 100%; height: 100%;
    display: block;
    border: 0;
  }

  @media (max-width: 639.98px) {
    .form-modal__scroll { padding: 1.5625rem; }  /* 25 */
    .form-modal__decor {
      width: 4.75rem;
      translate: -25% -45%;    }
  }

  .gift-modal__lead {
    margin: 0 0 var(--gap-xs);
    text-align: center;
  }
  .gift-modal__list {
    margin: 0 0 var(--gap-sm);
    padding: 0;
    list-style: none;
    text-align: center;
  }
  .gift-modal__item {
    font-weight: var(--fw-medium);
  }
  .gift-modal__item + .gift-modal__item { margin-top: 0.25rem; }

  .gift-modal__note {
    margin: 0 0 var(--gap-md);
    color: var(--color-text-muted);
    font-size: var(--fs-ui);
    text-align: center;
  }
  .gift-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    justify-content: center;
  }
  .gift-modal__actions .btn { flex: 1 1 12rem; }

}

/* --- sense-c-breadcrumbs --- */
/* BREADCRUMBS — хлібні крихти. */
@layer components {

  .breadcrumbs { font-family: var(--font-main); }
  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.1875rem;                 /* 3 */
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-ui);    font-weight: var(--fw-medium);
    line-height: 1;  }
  .breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
    min-width: 0;
    color: var(--color-text-muted);  }
  .breadcrumbs__sep { color: var(--color-text-muted); }
  .breadcrumbs__link {
    color: inherit;
    text-decoration: none;
  }
  @media (hover: hover) {
    .breadcrumbs__link:hover { color: var(--color-brand-sage); text-decoration: underline; }
  }
  .breadcrumbs__link:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  .breadcrumbs__item[aria-current="page"],
  .breadcrumbs__link[aria-current="page"] { color: var(--color-text); }
}

/* --- sense-c-who-card --- */
/* WHO-CARD — картка «фото + назва (+ підпис)» на кремі. */

@layer components {

  .who-card {
    border-radius: var(--radius-card);
    background: var(--color-cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;    gap: 0;    padding: 1.875rem 1.5625rem;
    text-align: center;
  }
  .who-card__photo {
    flex: 0 0 auto;    width: 17.3125rem;    max-width: 100%;    aspect-ratio: 1;
    height: auto;
    border-radius: var(--radius-card);
    object-fit: cover;
  }
  .who-card__title {
    margin: 0.9375rem 0 0;    max-width: 20.625rem;    min-height: 3.75rem;    font-size: var(--fs-subhead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-subhead);
  }
  .who-card__sub {
    margin: 0.9375rem 0 0;    max-width: 20.625rem;
    min-height: 3.5625rem;    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
  }
}

/* --- sense-c-product-card --- */
/* PRODUCT CARD — картка товару (каталог, «Вам сподобається»). */
@layer components {

  .product-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-card-stack);
    color: var(--color-text);
    text-decoration: none;  }
  .product-card .btn { margin-top: auto; }

  .product-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 370 / 474;    border-radius: var(--radius-card);
    overflow: hidden;
    /* Підкладка на час завантаження фото. */
    background: var(--color-bg-warm);
  }
  .product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .product-card__title {
    margin: 0;
    font-size: var(--fs-subhead);  /* 20→30→40 */
    font-weight: var(--fw-medium);
    line-height: var(--lh-subhead);
  }

  .product-card__colour::before {
    content: ' — ';
  }

  .product-card__price,
  .product-card .price {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
  }
  .product-card .price del {
    text-decoration: line-through;
    color: var(--color-text-muted);
    margin-inline-end: 0.5em;
  }
  .product-card .price ins { text-decoration: none; }

  @media (hover: hover) {
    .product-card__media img { transition: transform var(--transition); }
    .product-card:hover .product-card__media img { transform: scale(1.03); }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-card__media img { transition: none; }
    .product-card:hover .product-card__media img { transform: none; }
  }
  a.product-card:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 4px;
    border-radius: var(--radius-card);
  }

  a.product-card__media:focus-visible,
  .product-card__link:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 4px;
    border-radius: var(--radius-input);
  }
  .product-card__link {
    color: inherit;
    text-decoration: none;
  }
  @media (hover: hover) {
    .product-card__link:hover { text-decoration: underline; text-underline-offset: 0.1875rem; }
    .product-card:has(.product-card__link:hover) .product-card__media img { transform: scale(1.03); }
  }

  /* Сітка карток */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));    gap: var(--gap-lg);              /* 36 */
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

/* --- sense-c-slider --- */
/* SLIDER — стрічка + крапки + стрілки для всіх слайдерів сайту; двигун `js/slider.js`. */
@layer components {

  .slider {
    display: flex;
    align-items: stretch;    gap: clamp(1.25rem, 0.6352rem + 2.622951vw, 2.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overflow-anchor: none;    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  }
  .slider::-webkit-scrollbar { display: none; }

  .slider > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .slider--peek {
    margin-inline-end: calc(-1 * var(--gutter));
    padding-inline-end: var(--gutter);
  }
  .slider:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 4px;
  }

  .slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.125rem;      /* 50 */
    margin-top: 3.125rem;
  }

  /* Крапки: видимий гліф — `::before`, клік-ціль 24×24 */
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 0;    margin-top: 0.9375rem;  }
  .slider-dot {
    position: relative;
    width: 1.5rem; height: 1.5rem;      /* 24×24 ціль (2.5.8) */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .slider-dot::before {
    content: "";
    position: absolute;
    inset: 50%;
    translate: -50% -50%;
    width: 0.5rem; height: 0.5rem;    border-radius: var(--radius-pill);
    background: var(--color-muted-base);    transition: background-color var(--transition);
  }
  .slider-dot.is-active::before { background: var(--color-text); }
  .slider-dot:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 0;
    border-radius: var(--radius-pill);
  }

  /* Стрілки prev/next */
  .slider-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4375rem; height: 3.4375rem;    padding: 0;
    color: var(--color-cream);    border: 1px solid var(--color-brand);
    border-radius: var(--radius-pill);
    background: var(--color-brand);    cursor: pointer;
    transition: color var(--transition), background-color var(--transition),
                border-color var(--transition);
  }
  .slider-arrow svg { display: block; width: 1.3125rem; height: auto; } /* 21×15 */
  .slider-arrow--next svg { transform: rotate(180deg); }
  @media (hover: hover) {
    .slider-arrow:hover {
      background: var(--color-brand-sage);
      border-color: var(--color-brand-sage);
    }
  }
  .slider-arrow:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  /* ⚠️ До 991 керування — крапки, з 992 — стрілки; в обох режимах свайп має кнопки-альтернативу (2.5.7). */
  @media (max-width: 991.98px) {
    .slider-arrow,
    .slider-nav { display: none; }
  }
  @media (min-width: 992px) {
    .slider-dots { display: none; }
  }

  .slider-nav[hidden],
  .slider-arrow[hidden],
  .slider-dots[hidden] { display: none; }

}

/* --- sense-c-gallery --- */
/* GALLERY — галерея фото на сторінці товару. */
@layer components {

  .gallery-wrap {
    position: relative;
    width: 100%;
    max-width: clamp(23.5rem, 20.0756rem + 14.6104vw, 29.125rem);  /* 376→466 */
  }

  .gallery {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 466 / 428;  }
  @media (min-width: 991px) {
    .gallery-wrap { max-width: clamp(29.125rem, 9.9238rem + 31.0011vw, 47.125rem); } /* 466→754 */
  }
  @media (min-width: 1280px) {
    .gallery { aspect-ratio: 754 / 800; }  }
  /* ⚠️ На дробовому dpr (Windows 125–150%) край слайда згладжується з 1px сусіднього фото; зсувом це не лікується, тож шов ховає 1px смужка фону по краях. */
  .gallery::before,
  .gallery::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--color-bg);
    z-index: 2;
    pointer-events: none;
  }
  .gallery::before { left: 0; }
  .gallery::after { right: 0; }

  .gallery__track {    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overflow-anchor: none;    scrollbar-width: none;
  }
  .gallery__track::-webkit-scrollbar { display: none; }
  .gallery__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
  .gallery__slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  .gallery__arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem; height: 3.25rem;   /* 52 */
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;    cursor: pointer;
  }
  .gallery__arrow--prev { left: 1.5rem; }  .gallery__arrow--next { right: 1.5rem; }
  .gallery__arrow--next svg { transform: rotate(180deg); }
  .gallery__arrow svg { display: block; width: 100%; height: 100%; }
  .gallery__arrow circle { fill: var(--color-cream); transition: fill var(--transition); }
  .gallery__arrow path { fill: var(--color-text); transition: fill var(--transition); }
  @media (hover: hover) {
    .gallery__arrow:hover circle { fill: var(--color-brand); }
    .gallery__arrow:hover path { fill: var(--color-cream); }  }
  .gallery__arrow:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  @media (max-width: 991.98px) {
    .gallery__arrow { display: none; }
  }
}

/* --- sense-c-gift-badge --- */
/* GIFT-BADGE — плашка «Ідеальний подарунок»: блоб-SVG + текст усередині. */
@layer components {

  .gift-badge {
    --badge-size: clamp(6.25rem, 2.4963rem + 6.060606vw, 9.75rem);  /* 100→156 */
    position: absolute;
    top: calc(var(--badge-size) * -0.32);    /* −32@100 → −50@156 */
    right: calc(var(--badge-size) * -0.32);
    z-index: 2;
    width: var(--badge-size);
    color: var(--color-brand-sage);    pointer-events: none;
  }
  .gift-badge svg { display: block; width: 100%; height: auto; }

  .gift-badge__text {
    position: absolute;
    top: 50%; left: 50%;    translate: -50% -50%;
    width: 91%;    text-align: center;
    color: var(--color-cream);    font-family: var(--font-main);    font-size: 0.8125rem;    font-weight: var(--fw-medium);
    line-height: 0.88;
  }
  @media (min-width: 1180px) { .gift-badge__text { font-size: 0.875rem; } }
  @media (min-width: 1400px) { .gift-badge__text { font-size: 1rem; } }
  @media (min-width: 1660px) { .gift-badge__text { font-size: 1.125rem; } }
  @media (min-width: 1840px) { .gift-badge__text { font-size: 1.25rem; } }

  @media (max-width: 639.98px) {
    .gift-badge { right: -1rem; }      /* 16 */
  }

  .product-card:has(.badge-sale) { position: relative; }
  .badge-sale {
    --sale-size: clamp(4.5rem, 3.0rem + 2.4vw, 5.5rem);   /* 72→88 */
    position: absolute;
    top: calc(var(--sale-size) * -0.28);    right: calc(var(--sale-size) * -0.28);
    z-index: 2;
    width: var(--sale-size);
    color: var(--color-brand-sage);    pointer-events: none;
  }
  .badge-sale svg { display: block; width: 100%; height: auto; }
  .badge-sale__text {
    position: absolute;
    top: 50%; left: 50%;
    translate: -50% -50%;
    text-align: center;
    color: var(--color-cream);    font-family: var(--font-main);    font-size: var(--fs-ui);
    font-weight: var(--fw-medium);
    line-height: 1;
    letter-spacing: -0.01em;
  }

}

/* --- sense-c-buy-controls --- */
/* BUY CONTROLS — контролі покупки картки товару. ⚠️ Класи степера `.qty` — хук-контракт `js/card-buy-controls.js`: не міняти. */
@layer components {

  /* Степер .qty */
  .qty {
    display: inline-flex;
    align-items: center;
    gap: 0.9375rem;
  }
  .qty__btn {
    position: relative;
    display: inline-flex;
    width: var(--control-size); height: var(--control-size);   /* 28→30→38 */
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-brand);
    font-size: 0;
    color: transparent;
    cursor: pointer;
    transition: background-color var(--transition), filter var(--transition),
                opacity var(--transition);
  }
  .qty__btn::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% -50%;
    width: 0.5rem; height: 0.09375rem;   /* 8 × 1.5 */
    border-radius: 1px;
    background: var(--color-cream);  }
  .qty__btn--plus::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    translate: -50% -50%;
    width: 0.09375rem; height: 0.5rem;
    border-radius: 1px;
    background: var(--color-cream);
  }
  .qty__btn--minus.is-min {
    background: color-mix(in srgb, var(--color-brand) 45%, var(--color-cream));
  }
  @media (hover: hover) {
    .qty__btn:hover { background: var(--color-brand-sage); }
    .qty__btn--minus.is-min:hover {
      background: color-mix(in srgb, var(--color-brand-sage) 45%, var(--color-cream));
    }
  }
  .qty__btn:disabled { cursor: default; }
  .qty__btn:disabled,
  .qty__btn:disabled:hover,
  .qty__btn--minus.is-min:disabled:hover {
    background: color-mix(in srgb, var(--color-brand) 45%, var(--color-cream));
  }
  .qty__btn:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
  .qty__value {
    min-width: 1.25rem;
    text-align: center;
    font-family: var(--font-main);
    font-size: 1.5625rem;         /* 25 */
    color: var(--color-text);  }

  /* ⚠️ Radio вибору кольору. */
  .option-group {
    display: flex;
    align-items: center;
    gap: var(--gap-3xs);          /* 10 */
    margin: 0; padding: 0; border: 0;
  }
  .option-group,
  .option-extra,
  .buy-row {
    --buy-label-col: clamp(7.5625rem, 7.5625rem + (100vw - 992px) * 7 / 928, 8rem);
    --buy-row-gap:   var(--gap-xl);
  }
  .option-group__legend,
  .option-extra__label {
    flex: none;
    width: var(--buy-label-col);
    min-width: var(--buy-label-col);  }
  .option-group__legend {
    padding: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .option-color,
  .option-check {
    --swatch-size: var(--control-size);    --swatch-gap:  0.375rem;              /* 6 */
    /* ⚠️ Різкий стоп градієнта браузер не згладжує; ±0.5px дають один проміжний піксель. */
    --swatch-aa:   0.5px;
  }
  @media (max-width: 990.98px) {
    .option-color,
    .option-check {
      --swatch-gap:  clamp(0.25rem, 0.211575rem + 0.163934vw, 0.3125rem);  /* 4→5 */
    }
  }
  @media (min-width: 991px) {
    .option-color,
    .option-check {
      --swatch-gap:  clamp(0.3125rem, 0.245394rem + 0.108342vw, 0.375rem); /* 5→6 */
    }
  }
  .option-color {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-3xs);
    cursor: pointer;
  }
  .option-color input {    position: absolute;
    opacity: 0;
    margin: 0;
    width: var(--swatch-size); height: var(--swatch-size);
    cursor: pointer;
  }
  .option-color__swatch {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    width: var(--swatch-size); height: var(--swatch-size);
    border-radius: 50%;
    border: 1px solid var(--color-control-border);
    background: var(--swatch, var(--color-brand));    transition: border-color var(--transition), background-color var(--transition);
  }
  /* ⚠️ Крапка — радіальний градієнт у тому ж елементі, не ::before: два елементи на дробовому dpr з'їжджають від центру. */
  .option-color input:checked + .option-color__swatch {
    background: radial-gradient(circle closest-side,
        var(--swatch, var(--color-brand)) calc(100% - var(--swatch-gap) - var(--swatch-aa)),
        transparent calc(100% - var(--swatch-gap) + var(--swatch-aa)));
  }
  .option-color input:focus-visible + .option-color__swatch {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }
  .option-color__label {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  /* ⚠️ iOS Safari має ширші гліфи шрифту: без тісніших зазорів ряд кольорів переносився б. 10 → 6 */
  @media (max-width: 480px) {
    .option-group { gap: 0.375rem; }
    .option-color,
    .option-check { gap: 0.375rem; }
  }

  /* Чекбокс «Додати вітальну листівку» */
  .option-check {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-3xs);    cursor: pointer;
  }
  .option-check input {
    position: absolute;
    opacity: 0;
    margin: 0;    width: var(--swatch-size); height: var(--swatch-size);
    cursor: pointer;
  }
  .option-check__box {
    position: relative;
    display: inline-block;
    width: var(--swatch-size); height: var(--swatch-size);    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition);
  }
  .option-check input:checked + .option-check__box {
    background: radial-gradient(circle closest-side,
        var(--color-control-border) calc(100% - var(--swatch-gap) - var(--swatch-aa)),
        transparent calc(100% - var(--swatch-gap) + var(--swatch-aa)));
  }
  .option-check input:focus-visible + .option-check__box {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .option-extra {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-3xs);          /* 10 */
  }
  .option-extra__label {
    display: flex;
    align-items: center;
    min-height: var(--control-size);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .option-extra__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-3xs);    flex: 1 1 auto;
    min-width: 0;
  }
  .option-check__price {
    margin-inline-start: var(--gap-3xs);    color: var(--color-deep-blue);
    white-space: nowrap;
  }
  .option-check__box { flex: none; }
  .option-check--addon .option-color__label { min-width: 0; }

  /* Textarea листівки */
  .buy-textarea[hidden] { display: none; }
  .buy-textarea {
    display: block;
    width: 29.0625rem;    max-width: 100%;
    height: 5rem;                 /* 80 */
    padding: 0.9375rem;    border: 1px solid var(--color-control-border);    border-radius: var(--radius-input);
    background: none;
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
    resize: vertical;
  }
  .buy-textarea::placeholder { color: var(--color-text-muted); }  .buy-textarea:focus {   /* :focus — поле показує рамку і від кліку мишею */
    outline: none;
    border-color: var(--color-focus);
    border-width: 2px;
    padding: calc(0.9375rem - 1px);
  }

  /* Ряд ціна / степер / CTA */
  .buy-row {
    display: flex;
    align-items: center;
    column-gap: var(--buy-row-gap);
    row-gap: var(--gap-xl);       /* 40 */
    flex-wrap: wrap;
  }
  .buy-row__price {
    flex: none;
    width: calc(var(--buy-label-col) + var(--gap-3xs) - var(--buy-row-gap));
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* Мобайл */
  @media (max-width: 639.98px) {
    .qty { gap: 0.625rem; }    .qty__value { font-size: 1.25rem; }
    .option-group,
    .option-extra,
    .buy-row { --buy-label-col: 0px; }

    .option-group { flex-wrap: wrap; }
    .option-group__legend {
      float: none;      width: 100%;      min-width: 0;      margin-bottom: var(--gap-3xs);    }
    .option-extra__label { width: 100%; min-width: 0; }
    .buy-textarea { width: 100%; }

    .buy-row {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--gap-xs);         /* 20 */
      width: 100%;
    }
    .buy-row__price { flex: 1 0 100%; width: auto; }
    .buy-row .btn { width: 100%; }
  }

  /* ⚠️ iOS Safari зумить сторінку при фокусі поля з кеглем <16px. */
  @media (max-width: 990.98px) {
    .buy-textarea { font-size: 1rem; }   /* 16 */
  }

  .option-edition {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;                /* ціль ≥24 (2.5.8) */
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-input);
    cursor: pointer;
  }
  .option-edition input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .option-edition:has(input:checked) {
    border-color: var(--color-brand);
    background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  }
  .option-edition:has(input:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
  .option-edition:has(input:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .option-group--edition {
    flex-wrap: wrap;
  }
  .option-group__preview {
    flex: 1 0 100%;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--fs-ui);
    line-height: var(--lh-body);
  }

  .option-edition__label {
    font-size: var(--fs-ui);
    line-height: var(--lh-body);
  }

}

/* --- sense-c-logo-strip --- */
/* LOGO-STRIP — рухома стрічка-вордмарк. ⚠️ Свідомий виняток WCAG 2.2.2: кнопки пауза/стоп немає, рух вимикає лише `prefers-reduced-motion`. */
@layer components {

  .logo-strip {
    position: relative;
    --strip-h: clamp(2.8125rem, 1.5829rem + 5.245902vw, 4.8125rem);
    --strip-bg: var(--color-brand);
    height: var(--strip-h);
    background: var(--strip-bg);
    border: 1px solid var(--strip-bg);
    color: var(--color-cream);    overflow: hidden;  }

  .logo-strip__row {
    position: absolute;
    inset-block: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: max-content;
    animation: logo-strip-scroll var(--logo-strip-duration, 90s) linear infinite;
    will-change: transform;
  }

  .logo-strip__group {
    display: flex;
    align-items: center;
    gap: calc(var(--strip-h) * 1.233766);                /* 95@77 → 55.5@45 */
    padding-inline-end: calc(var(--strip-h) * 1.233766);  }
  .logo-strip__group svg {
    flex-shrink: 0;    width: calc(var(--strip-h) * 1.415584);              /* 109@77 → 63.7@45 */
    height: auto;
  }

  @keyframes logo-strip-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }  }

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

/* --- sense-c-reveal --- */
/* REVEAL — анімації появи при скролі; `.is-in` і `.is-done` ставить `js/main.js`, затримку `--rv-i` — теж він. */
@layer components {

  html.js-reveal [data-reveal] { opacity: 0; }

  html.js-reveal [data-reveal][data-reveal-now] {
    animation: rv-fade 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  html.js-reveal [data-reveal].is-in {
    animation: rv-up 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--rv-i, 0) * 0.12s);
  }
  html.js-reveal [data-reveal="fade"].is-in,
  html.js-reveal [data-reveal="write"].is-in {
    animation-name: rv-fade;
    animation-duration: 0.9s;
  }

  html.js-reveal [data-reveal].is-done { animation: none; opacity: 1; }

  @keyframes rv-up {
    from { opacity: 0; transform: translate3d(0, 2.5rem, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes rv-fade {
    from { opacity: 0; transform: translate3d(0, 1rem, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  html.js-reveal [data-reveal="write"] .rv-line {
    display: inline-block;
    clip-path: inset(-50% 102% -50% -8%);
  }
  html.js-reveal [data-reveal="write"].is-in .rv-line {
    animation: rv-line 1.1s cubic-bezier(0.33, 0, 0.67, 1) forwards;
  }
  html.js-reveal [data-reveal="write"].is-in .rv-line:nth-of-type(1) { animation-delay: 1.2s; }
  html.js-reveal [data-reveal="write"].is-in .rv-line:nth-of-type(2) { animation-delay: 1.95s; }
  html.js-reveal [data-reveal="write"].is-in .rv-line:nth-of-type(3) { animation-delay: 2.7s; }
  html.js-reveal [data-reveal="write"].is-in .rv-line:nth-of-type(4) { animation-delay: 3.45s; }
  html.js-reveal [data-reveal="write"].is-in .rv-line:nth-of-type(5) { animation-delay: 4.2s; }
  html.js-reveal [data-reveal="write"].is-in .rv-line:nth-of-type(6) { animation-delay: 4.95s; }

  @keyframes rv-line {
    to { clip-path: inset(-50% -8% -50% -8%); }
  }
}

/* --- sense-c-story --- */
@layer page {
  .story {
      --stripe: clamp(2.402875rem, 2.112634rem + 1.238361vw, 2.875rem);     /* 38.446→46 */
      background: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--color-brand) 64%, transparent) 0 var(--stripe),
        var(--color-bg-warm) var(--stripe) calc(2 * var(--stripe))
      );
      overflow-x: clip;    }
  .story__stage {
      position: relative;
      height: clamp(53.125rem, 46.708504rem + 27.377049vw, 63.5625rem);     /* 850→1017 */
      max-width: 120rem;
      margin-inline: auto;
    }
  .story__paper {
      position: absolute;
      max-width: none;
      top: 8.6875rem;                        /* 139 */
      left: 50%;
      transform: translateX(-50%);
      width: clamp(27.45625rem, 10.331506rem + 73.065574vw, 55.3125rem);    /* 439.3→885 */
      height: clamp(35.0875rem, 30.050359rem + 21.491803vw, 43.28125rem);   /* 561.4→692.5 */
      fill: var(--color-cream);
    }
  .story__title {
      margin: 0;
      max-width: clamp(14.25rem, 4.644467rem + 40.983607vw, 29.875rem);     /* 228→478 */
      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
    }
  .story__title-brand { color: var(--color-brand); }
  .story__body {
      max-width: clamp(18.25rem, 6.185451rem + 51.47541vw, 37.875rem);      /* 292→606 */
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }
  .story__body p { margin: 0; }
  .story__body p + p { margin-top: 1.5625rem; }
  .story__note {
      position: absolute;
      margin: 0;
      top: clamp(-3.21rem, 64.210375rem - 108.852273vw, 38.698125rem);      /* 619.2→−51.4 */
      left: calc(50% + clamp(-1.794375rem, -9.058500rem + 30.993506vw, 10.138125rem)); /* −28.7→162.2 */
      width: clamp(14.625rem, 8.583000rem + 25.779221vw, 24.55rem);         /* 234→392.8 */
    }
  .story__note img { width: 100%; height: auto; display: block; }
  .story__paper--port { display: none; }
  .story__polaroid { display: none; }
}

/* --- sense-product-base --- */
/* PRODUCT-BASE — спільний кістяк сторінки товару. */
@layer page {

  /* база (375) */

  .pp {
    margin-inline: var(--edge);
    padding-top: 0.9375rem;                /* 15 */
    padding-bottom: 3.125rem;  }

  .pp__crumbs { margin-bottom: 1.25rem; }

  .logo-strip {
    background: var(--color-brand);
    border: 1px solid var(--color-brand);
  }

  .hero .gallery__arrow circle,
  .hero .gallery__arrow path { transition: fill var(--transition); }

  .hero .gallery__arrow circle { fill: var(--color-cream); }

  .hero .gallery__arrow path { fill: var(--color-text); }

  @media (hover: hover) {
    .hero .gallery__arrow:hover { filter: none; }

    .hero .gallery__arrow:hover circle { fill: var(--color-brand); }

    .hero .gallery__arrow:hover path { fill: var(--color-cream); }

  }

  .for-whom .slider-arrow,
  .liked .slider-arrow {
    color: var(--color-cream);
    background: var(--color-brand);
    border-color: var(--color-brand);
  }

  @media (hover: hover) {

    .for-whom .slider-arrow:hover,
    .liked .slider-arrow:hover {
      background: var(--color-brand-sage);
      border-color: var(--color-brand-sage);
    }

  }

  .hero .qty__btn {
    transition: background-color var(--transition), filter var(--transition),
                opacity var(--transition);  }

  @media (hover: hover) {
    .hero .qty__btn:hover {
      filter: none;
      background: var(--color-brand-sage);
    }

    .hero .qty__btn--minus.is-min:hover {
      background: color-mix(in srgb, var(--color-brand-sage) 45%, var(--color-cream));
    }

    .hero .qty__btn:disabled:hover,
    .hero .qty__btn--minus.is-min:disabled:hover {
      background: color-mix(in srgb, var(--color-brand) 45%, var(--color-cream));
    }

  }

  .for-whom .slider-nav,
  .liked .slider-nav {
    gap: 3.125rem;         /* 50 */
    margin-top: 3.125rem;  /* 50 */
  }

  .for-whom .slider-arrow--next svg,
  .liked .slider-arrow--next svg { transform: rotate(180deg); }

  .hero__media { margin-inline: calc(-1 * var(--gutter)); }

  .hero__media .gallery-wrap { margin-inline: auto; }

  .hero__info {
    margin-top: 1.4375rem;                 /* 23 (546.9−524) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__title {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }

  .hero__stock {
    margin: 1.25rem 0 0;
    font-size: var(--fs-ui);
    line-height: 1;
    color: var(--color-text-muted);
  }

  .hero__desc {
    margin-top: 1.25rem;                   /* 20 (461:10156→10159 82−62) */
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  .hero__desc p { margin: 0; }

  .hero__desc .hero__desc-label { margin-top: 1.25rem; }

  .hero__desc.hero__senses .hero__desc-label { margin-top: 0; }

  .hero__desc ul { margin: 0; padding-inline-start: 0; list-style: none; }

  .hero__desc li::before { content: "•"; margin-right: var(--gap-3xs); }

  .hero__video-btn,
  .hero .option-group,
  .hero .option-extra,
  .hero .buy-textarea,
  .hero .buy-row { margin-top: var(--gap-xs); }

  .hero .buy-textarea { width: 100%; }

  .hero .buy-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;    --buy-row-gap: var(--gap-xs);
    column-gap: var(--buy-row-gap);
    row-gap: var(--gap-xs);
    width: 100%;
  }

  .hero .buy-row .qty { align-self: flex-start; }

  .hero .buy-row__note {
    margin: var(--gap-3xs) 0 0;
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--color-text-muted);
  }

  .story__text {
    position: absolute;
    top: clamp(14.5625rem, 13.563525rem + 4.262295vw, 16.1875rem);        /* 233→259 */
    left: 50%;
    transform: translateX(-50%);
    width: clamp(18.25rem, 1.344262rem + 72.131148vw, 45.75rem);          /* 292→732 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.875rem, 1.487624rem + 1.652893vw, 2.5rem);    text-align: center;
  }

  .story__note-text {
    position: absolute;
    top: clamp(5.058125rem, 2.171063rem + 12.318182vw, 9.800625rem);      /* 80.9→156.8 */
    left: clamp(1.169375rem, 0.424375rem + 3.178571vw, 2.393125rem);      /* 18.7→38.3 */
    width: clamp(12.03125rem, 7.097848rem + 21.04918vw, 20.05625rem);     /* 192.5→320.9 */
    font-family: var(--font-accent);
    font-size: var(--fs-accent-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-accent-sm);
    text-align: center;
    transform: rotate(-13.7deg);
    transform-origin: center;
  }

  .story__ultrasound {
    aspect-ratio: 302 / 394;
    object-fit: contain;
    object-position: top center;
  }

  .collect__frame {
    position: relative;
    height: clamp(35.1875rem, 20.663934rem + 61.967213vw, 58.8125rem);    /* 563→941 */
    overflow: hidden;
  }

  .collect__photo {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }

  .collect__card { display: none; }

  @keyframes inside-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-cream) 55%, transparent); }
    70%  { box-shadow: 0 0 0 0.875rem color-mix(in srgb, var(--color-cream) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-cream) 0%, transparent); }
  }

  .inside__pop {
    position: absolute;
    z-index: 2;
    --tail-x: 50%;
    width: 16.25rem;                       /* 260 */
    max-width: calc(100% - 1rem);
    padding: 1.25rem;                      /* 20 */
    border-radius: 0.9375rem;              /* 15 */
    background: var(--color-cream);
    color: var(--color-text);
    text-align: left;
    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.18);
  }

  .inside__pop[hidden] { display: none; }

  .inside__pop::after {
    content: '';
    position: absolute;
    left: var(--tail-x);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border: 0.625rem solid transparent;  }

  .inside__pop::after {
    top: 100%;
    border-bottom-width: 0;
    border-top-color: var(--color-cream);
  }

  .inside__pop--below::after {
    top: auto;
    bottom: 100%;
    border-top-width: 0;
    border-bottom-width: 0.625rem;
    border-bottom-color: var(--color-cream);
  }

  .inside__pop-text {
    margin: 0;
    font-size: var(--fs-ui);    line-height: var(--lh-body);
    color: var(--color-text-muted);
  }

  .inside__pop-title {
    font-weight: var(--fw-medium);
    color: var(--color-text);
  }

  .for-whom {
    margin-top: 0;    padding-block: 3.125rem;    background: var(--color-bg-warm);  }

  .for-whom__title {
    margin: 0 0 1.875rem;    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    text-align: center;
  }

  .for-whom__stage { max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }

  .who-card {
    width: min(clamp(20.625rem, 16.014344rem + 19.672131vw, 28.125rem), 100% - 3.125rem); /* 330→450 */
  }

  .why { margin-top: 0; display: flex; flex-direction: column; overflow-x: clip; }

  .why__panel { background: var(--color-brand); }

  .why__panel-in {
    margin-inline: var(--edge);
    padding-block: 3.125rem;  }

  .why__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    color: var(--color-cream);
  }

  .why__list {
    margin: 1.875rem 0 0;    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;  }

  .why__item {
    display: flex;
    gap: clamp(1.25rem, 0.366291rem + 3.770492vw, 2.6875rem);             /* 20→43 */
    align-items: flex-start;
  }

  .why__icon {
    flex: 0 0 auto;
    width: clamp(2.875rem, 2.413934rem + 1.967213vw, 3.625rem);           /* 46→58 */
    height: auto;
  }

  .why__item-title {
    margin: 0;
    max-width: clamp(16.5rem, 8.047131rem + 36.065574vw, 30.25rem);       /* 264→484 */
    font-size: var(--fs-subhead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-subhead);
    color: var(--color-bg-warm);
  }

  .why__media { position: relative; width: 28.875rem; height: 31rem; }

  .why__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .why__caption, .why__play { display: none; }

  .liked { margin-top: 3.125rem; }

  .liked:has(+ .footer) { margin-bottom: var(--rhythm-edge); }

  .liked__title {
    margin: 0 0 1.875rem;    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    text-align: center;
  }

  .liked__stage { max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }

  .liked__slider {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(23.125rem, 100% - 3.125rem);
    grid-template-rows: repeat(4, auto);    row-gap: var(--gap-card-stack);
  }

  .liked .product-card {
    width: auto;    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    justify-items: start;
  }

  .delivery {
    margin-top: 3.125rem;    margin-bottom: 3.125rem;               /* 50 */
  }

  .delivery__title {
    margin: 0 0 1.875rem;    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    text-align: center;
  }

  .delivery__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;    align-items: center;
    gap: 1.25rem;                          /* 20 (461:10466) */
  }

  .delivery__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;    text-align: center;
  }

  .delivery__item-title {
    margin: 0;
    max-width: 14.4375rem;                 /* 231 (461:10471) */
    font-size: var(--fs-subhead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-subhead);
  }

  .delivery__item img { width: 6.8125rem; height: 6.8125rem; }

  /* 991 */

  @media (min-width: 991px) {

    .pp {
      margin-inline: var(--edge);
      padding-top: 1.25rem;                /* 20 */
      padding-bottom: 4.375rem;    }

    .pp__crumbs { margin-bottom: 2.1875rem; }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 461fr) minmax(0, 420fr);
      column-gap: 1.875rem;                /* 30 */
      align-items: start;
    }

    .hero__info { display: contents; }

    .hero__info > * { grid-column: 2; }

    .hero__media {
      margin-inline: 0;      grid-column: 1;
      grid-row: 1 / span 20;    }

    .hero__media .gallery-wrap { max-width: 100%; }

    .hero__title {
      margin: 0;
      max-width: 100%;
      font-size: var(--fs-h1);      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
    }

    .hero__stock {
      margin: 1.25rem 0 0;
      font-size: var(--fs-ui);
      line-height: 1;
      color: var(--color-text-muted);
    }

    .hero__desc {
      width: auto;
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }

    .hero__desc p { margin: 0; }

    .hero__desc .hero__desc-label { margin-top: 1.25rem; }

    .hero__desc ul { margin: 0; padding-inline-start: 0; list-style: none; }

    .hero__video-btn,
    .hero .option-group,
    .hero .option-extra,
    .hero .buy-textarea,
    .hero .buy-row { margin-top: var(--gap-xs); }

    .hero .buy-textarea {
      width: clamp(20.6875rem, 11.69549rem + 14.517876vw, 29.0625rem);     /* 331→465 */
    }

    .hero .buy-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      --buy-row-gap: var(--gap-xs);        /* 20 */
      column-gap: var(--buy-row-gap);
      row-gap: var(--gap-xs);
    }

    .story {
      background: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--color-brand) 64%, transparent) 0 2.875rem,
        var(--color-bg-warm) 2.875rem 5.75rem
      );
      overflow-x: clip;    }

    .story__stage {
      position: relative;
      height: clamp(41.3125rem, 17.577500rem + 38.320775vw, 63.5625rem);   /* 661→1017 */
      max-width: 120rem;
      margin-inline: auto;
    }

    .story__paper {
      position: absolute;
      top: clamp(3.75rem, 0.016250rem + 6.027988vw, 7.25rem);      left: 50%;
      transform: translateX(-50%);
      width: clamp(46.25rem, 31.115625rem + 24.434876vw, 60.4375rem);      /* 740→967 */
      height: clamp(33.82125rem, 20.555623rem + 21.418085vw, 46.2575rem);    }

    .story__text {
      position: absolute;
      top: clamp(12.0625rem, 5.595625rem + 10.441335vw, 18.125rem);      left: 50%;
      transform: translateX(-50%);
      width: clamp(41.25rem, 28.04925rem + 21.313240vw, 53.625rem);        /* 660→858 */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(2.5rem, 1.818627rem + 1.100110vw, 3.125rem);      text-align: center;
    }

    .story__title {
      margin: 0;
      max-width: clamp(29.875rem, 10.41468rem + 31.419285vw, 48rem);       /* 478→768 */
      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
    }

    .story__title-brand { color: var(--color-brand); }

    .story__body {
      max-width: clamp(36.625rem, 39.217091rem - 2.166847vw, 37.875rem);   /* 606→586 */
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }

    .story__body p { margin: 0; }

    .story__body p + p { margin-top: 1.5625rem; }

    .story__note {
      position: absolute;
      margin: 0;
      top: clamp(-4.403125rem, -16.961742rem + 20.276273vw, 7.29375rem);   /* −70.45→116.7 */
      left: calc(50% + clamp(6.90625rem, -8.091617rem + 24.214518vw, 20.875rem)); /* 110.5→334 */
      width: clamp(30.27375rem, 23.966593rem + 10.183099vw, 36.148125rem); /* 484.38→578.37 */
    }

    .story__note img { width: 100%; height: auto; display: block; }

    .story__note-text {
      position: absolute;
      top: clamp(10.99375rem, 7.531155rem + 5.590466vw, 14.21875rem);      /* 175.9→227.5 */
      left: clamp(5.625rem, 4.618432rem + 1.625135vw, 6.5625rem);          /* 90→105 */
      width: clamp(20.05625rem, 17.566671rem + 4.019502vw, 22.375rem);     /* 320.9→358 */
      font-family: var(--font-accent);
      font-size: var(--fs-accent-sm);
      font-weight: var(--fw-regular);
      line-height: var(--lh-accent-sm);
      text-align: center;
    }

    .story__polaroid {
      display: block;      position: absolute;
      top: clamp(27.5rem, 22.966250rem + 7.319698vw, 31.75rem);      left: calc(50% + clamp(-49.375rem, -7.523750rem - 34.876211vw, -29.125rem)); /* −466→−790 */
      width: clamp(8.625rem, -6.176000rem + 23.896663vw, 22.5rem);         /* 138→360 */
    }

    .story__ultrasound { width: 100%; height: auto; display: block; }

    .story__flower {
      position: absolute;
      top: clamp(-0.5rem, 0.145875rem - 0.538213vw, -0.1875rem);           /* −3→−8 */
      left: clamp(4.8125rem, -3.520625rem + 13.454252vw, 12.625rem);       /* 77→202 */
      width: clamp(4.8125rem, -3.387500rem + 13.239505vw, 12.5rem);        /* 77→200 */
      height: auto;
    }

    .collect__frame {
      position: relative;
      height: 58.8125rem;                  /* 941 (461:10039) */
      overflow: hidden;
    }

    .collect__photo {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
      border-radius: 0;
    }

    .collect__card {
      position: absolute;
      top: clamp(2.6875rem, 9.167728rem - 5.417118vw, 5.8125rem);          /* 93→43 */
      left: 50%;
      transform: translateX(-50%);
      width: 42.75rem;                     /* 684 */
      height: 45.4375rem;                  /* 727 */
      border-radius: var(--radius-card);
      background: var(--color-cream);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6.75rem 3.375rem 0;
      text-align: center;
    }

    .collect__bow { width: 13.125rem; height: 7.3125rem; object-fit: contain; }

    .collect__title {
      margin: 1.5rem 0 0;
      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
    }

    .collect__body {
      margin-top: clamp(2.5rem, 1.818627rem + 1.100110vw, 3.125rem);      max-width: 30.625rem;
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }

    .collect__body p { margin: 0; }

    .collect__body p + p { margin-top: 1.5625rem; }

    .for-whom {
      margin-top: 0;      padding-block: 4.375rem;    }

    .for-whom__title {
      margin: 0 0 2.5rem;      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      text-align: center;
    }

    .for-whom__stage {
      width: 88.875rem;
      max-width: calc(100% - 2 * var(--gutter));
      margin-inline: auto;
    }

    .who-card {
      width: 28.125rem;                    /* 450 */
      border-radius: var(--radius-card);
      background: var(--color-cream);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;      gap: 0;
      padding: 3.125rem 2.5rem;      text-align: center;
    }

    .who-card__photo {
      width: 17.3125rem; height: 17.3125rem;   /* 277 */
      border-radius: var(--radius-card);
      object-fit: cover;
    }

    .who-card__title {
      margin: 1.25rem 0 0;      max-width: 20.625rem;      min-height: 5.625rem;      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
    }

    .who-card__sub {
      margin: 1.25rem 0 0;      max-width: 20.625rem;
      min-height: 4rem;      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--color-text-muted);
    }

    .why { margin-top: 0; display: flex; flex-direction: column; }

    .why__panel { background: var(--color-brand); }

    .why__panel-in {
      width: 42rem;      margin-inline: auto;
      padding-block: 4.375rem;      box-sizing: content-box;
    }

    .why__title {
      margin: 0;
      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      color: var(--color-cream);
    }

    .why__list {
      margin: 2.5rem 0 0;      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;    }

    .why__item { display: flex; gap: 2.6875rem; align-items: flex-start; }

    .why__icon { flex: 0 0 auto; width: 3.625rem; height: auto; }

    .why__item-title {
      margin: 0;
      max-width: 30.25rem;
      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
      color: var(--color-bg-warm);
    }

    .why__media { position: relative; width: auto; height: auto; }

    .why__media > img { width: 100%; height: auto; display: block; }

    .why__caption {
      display: block;      position: absolute;
      left: 2.5rem;      top: auto;
      bottom: 4.375rem;      margin: 0;
      width: 27.375rem;                    /* 438 */
      font-size: var(--fs-subhead);      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
      color: var(--color-bg-warm);    }

    .why__play {
      position: absolute;
      right: 2.5rem;      bottom: 4.375rem;      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1.625rem;                       /* 26 */
      width: 13.5625rem;                   /* 217 */
      height: 15.625rem;                   /* 250 */
      padding: 0;
      border: 1px solid var(--color-cream);
      border-radius: var(--radius-card);
      background: none;
      cursor: pointer;
      font-family: var(--font-main);
      color: var(--color-cream);
    }

    .why__play-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 6.125rem; height: 6.125rem;   /* 98 */
      margin-top: 0;
      border: 1px solid var(--color-cream);
      border-radius: 50%;
      background: none;
      color: var(--color-cream);
    }

    .why__play-circle svg { width: 1.0625rem; height: 1.25rem; margin-left: 0.1875rem; }

    /* 17×20 */

    .why__play-label {
      margin-top: 0;
      align-self: stretch;
      font-size: var(--fs-ui);             /* 15 */
      font-weight: var(--fw-bold);
      line-height: var(--lh-ui);
      text-transform: uppercase;
      text-align: center;
      color: var(--color-cream);
    }

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

    .liked { margin-top: 4.375rem; }

    .liked__title {
      margin: 0 0 2.5rem;      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      text-align: center;
    }

    .liked__stage {
      width: 73.875rem;
      max-width: calc(100% - 2 * var(--gutter));
      margin-inline: auto;
    }

    .delivery {
      margin-top: 4.375rem;      margin-bottom: 4.375rem;             /* 70 */
    }

    .delivery__title {
      margin: 0 0 2.5rem;      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      text-align: center;
    }

    .delivery__list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: row;      justify-content: center;
      align-items: flex-start;
      gap: 1.875rem;
    }

    .delivery__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.875rem;
      text-align: center;
    }

    .delivery__item:first-child { flex: 0 1 26rem; }

    .delivery__item:last-child  { flex: 0 1 26rem; padding: 0; }

    .delivery__item img { width: 6.8125rem; height: 6.8125rem; }

    .delivery__item-title {
      margin: 0;
      max-width: none;      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
    }

  }

  @media (min-width: 991px) and (max-width: 1279.98px) {

    .hero__lead {
      margin-top: 1.25rem;      max-width: 100%;
    }

    .hero__senses {
      grid-column: 2;
      margin-top: 1.25rem;      max-width: none;    }

    .hero .buy-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      --buy-row-gap: 0.9375rem;           /* 15 */
      column-gap: var(--buy-row-gap);
      row-gap: var(--gap-xs);
    }

    .hero .buy-row .qty {
      align-self: center;
      gap: 0.3125rem;    }

    .hero .buy-row .btn--primary {
      flex: 1 1 0;
      min-width: 0;
    }

    .hero .option-color,
    .hero .option-check {
      --swatch-size: 1.875rem;            /* 30 */
      --swatch-gap: 0.3125rem;            /* 5 */
    }

    .hero .qty__btn {
      width: 1.875rem;      height: 1.875rem;
    }

    .hero .hero__video-btn { min-width: 0; justify-self: start; }

  }

  /* СКІН ПІГУЛКИ ВІДЕО */

  .hero__video-badge,
    .hero .hero__video-btn,
    .why__play {
      flex-direction: row;
      align-items: center;
      gap: 0.75rem;                        /* 12 */
      width: auto;
      height: auto;
      padding: 0.5rem 1.25rem 0.5rem 0.5rem;           /* 8 / 20 / 8 / 8 */
      border: 0;
      border-radius: 6.25rem;      background: var(--color-cream);
      box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12);
      cursor: pointer;
      font-family: var(--font-main);
      color: var(--color-text);
    }

  .video-badge__circle,
    .why__play-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 2.375rem; height: 2.375rem;   /* 38 */
      border: 0;
      border-radius: 50%;
      background: var(--color-brand);
      color: var(--color-cream);
    }

  .video-badge__circle svg,
    .why__play-circle svg {
      width: 0.75rem; height: 0.875rem;    /* 12×14 */
      margin-left: 0.125rem;    }

  .video-badge__label,
    .why__play-label {
      align-self: auto;
      margin-top: 0;
      font-size: var(--fs-ui);             /* 15 */
      font-weight: var(--fw-bold);
      line-height: var(--lh-ui);
      text-transform: uppercase;
      text-align: left;
      color: var(--color-text);
    }

  .hero .hero__video-btn {
      min-width: 0;      max-width: 100%;
      height: revert-layer;
    }

  .hero .hero__video-btn .video-badge__circle {
      width: auto;
      height: 100%;
      aspect-ratio: 1;
    }

  /* Десктопна зона — з 1280 */

  @media (min-width: 1280px) {

    .hero__info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-top: -0.125rem;    }

    .hero__info > * { grid-column: auto; }

    .hero__media { grid-column: 1; grid-row: auto; margin-inline: 0; }

    .hero__desc {
      margin-top: 1.25rem;                 /* 20 */
      width: calc(100% + clamp(0rem, -6.813875rem + 8.517350vw, 3.375rem));
      max-width: none;
    }

    .hero__senses { grid-column: auto; margin-top: 1.25rem; }

    .hero .buy-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      --buy-row-gap: clamp(0.9375rem, -2.217063rem + 3.943220vw, 2.5rem);   /* 15→40 */
      gap: var(--buy-row-gap);
    }

    .hero .buy-row .qty { align-self: center; }

    @media (max-width: 1439.98px) {
      .hero .buy-row .btn--primary {
        padding-inline: clamp(1.5625rem, 1.5625rem + (100vw - 1280px) * 15 / 160, 2.5rem);
      }
    }

    .hero__video-badge { display: none; }

    .hero .hero__video-btn {
      display: inline-flex;
      min-width: 0;
      max-width: 100%;
      box-shadow: none;      border: 1px solid var(--color-control-border);
    }

    .for-whom__stage,
    .liked__stage {
      width: auto;
      max-width: none;
      margin-left: max(var(--gutter), (100% - var(--container)) / 2);
      margin-right: 0;
    }

    .for-whom__slider,
    .liked__slider { column-gap: 3.75rem; margin-inline-end: 0; }

  }

  /* «У ЦЬОМУ БОКСІ» — десктопна композиція з 1740 */

  @media (min-width: 1740px) {
    .collect { margin-top: 0; overflow-x: clip; background: var(--color-brand); }

    .collect__frame {
      position: relative;
      display: block;
      width: 100%;
      max-width: 120rem;
      margin-inline: auto;
      height: auto;
      padding-block: 0;
      overflow: visible;
    }

    .collect__photo { position: static; inset: auto; display: block; width: 100%; height: auto; }

    .collect__card {
      position: absolute;
      z-index: 1;
      top: 2.6875rem;                      /* 43 */
      right: 3.125rem;                     /* 50 */
      left: auto;
      transform: none;
      width: 42.75rem;                     /* 684 */
      height: auto;
      padding: 6.75rem 3.375rem;           /* 108 / 54 */
    }

  }

  @media (min-width: 1920px) {

    .pp {
      margin-inline: var(--edge);            /* 1584 */
      padding-top: 2.5625rem;             /* 41 */
      padding-bottom: 6.25rem;            /* 100 */
    }

    .pp__crumbs { margin-bottom: 2.75rem; }

    .hero {
      display: grid;
      grid-template-columns: 47.125rem 42.6875rem;  /* 754 / 683 */
      column-gap: 5.6875rem;                        /* 91 */
      align-items: start;
    }

    .hero__info {
      margin-top: -0.125rem;              /* −2 */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .hero__title {
      margin: 0;
      max-width: 41.9375rem;      font-size: var(--fs-h1);      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);     /* 0.83 */
    }

    .hero__stock {
      margin: 1.25rem 0 0;      font-size: var(--fs-ui);      line-height: 1;
      color: var(--color-text-muted);    }

    .hero__desc {
      margin-top: 1.25rem;      width: 46.0625rem;                  /* 737 */
      font-size: var(--fs-body);          /* 20 */
      line-height: var(--lh-body);        /* 1.25 */
    }

    .hero__desc p { margin: 0; }

    .hero__desc .hero__desc-label { margin-top: 1.25rem; }

    .hero__desc ul {
      margin: 0;
      padding-inline-start: 0;      list-style: none;
    }

    .hero__video-btn,
    .hero .option-group,
    .hero .option-extra,
    .hero .buy-textarea,
    .hero .buy-row { margin-top: var(--gap-xs); }

    .hero .hero__video-btn {
      box-shadow: none;
      border: 1px solid var(--color-control-border);
    }

    .hero .buy-textarea {
      width: 29.0625rem;                  /* 465 (124:4427) */
    }

    .hero .buy-row {
      flex-direction: row;
      align-items: center;
      --buy-row-gap: var(--gap-xl);       /* 40 */
      gap: var(--buy-row-gap);
    }

    .hero .buy-row .qty { align-self: center; }

    .story {
      margin-top: 0;
      background: repeating-linear-gradient(
        to right,
        color-mix(in srgb, var(--color-brand) 64%, transparent) 0 2.875rem,  /* 46 */
        var(--color-bg-warm) 2.875rem 5.75rem                                /* 46 */
      );
    }

    .story__stage {
      position: relative;
      height: 63.5625rem;                 /* 1017 */
      max-width: 120rem;      margin-inline: auto;
    }

    .story__paper {
      position: absolute;
      top: 7.25rem;                       /* 116 (1266−1150) */
      left: calc(50% + 1.4375rem);      transform: translateX(-50%);
      width: 60.4375rem;                  /* 967 */
      height: 46.2575rem;                 /* 740.1 */
    }

    .story__text {
      position: absolute;
      top: 18.125rem;                     /* 290 (1440−1150) */
      left: 50%;
      transform: translateX(-50%);
      width: 53.625rem;      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3.125rem;      text-align: center;
    }

    .story__title {
      margin: 0;
      max-width: 48rem;                   /* 768 */
      font-size: var(--fs-h2);            /* 60 */
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
    }

    .story__title-brand { color: var(--color-brand); }

    .story__body {
      max-width: 36.625rem;               /* 586 */
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }

    .story__body p { margin: 0; }

    .story__body p + p { margin-top: 1.5625rem; }

    .story__note {
      position: absolute;
      margin: 0;
      top: 8.718125rem;                   /* 139.49 */
      left: calc(50% + 24.73375rem);      /* +395.74 */
      width: 29.32125rem;                 /* 469.14 */
    }

    .story__note img { width: 100%; height: auto; display: block; }

    .story__note-text {
      position: absolute;
      top: 12.794375rem;                  /* 204.71 */
      left: 49.8%;
      transform: translateX(-50%) rotate(-13.7deg);
      width: 22.375rem;                   /* 358 */
      font-family: var(--font-accent);
      font-size: var(--fs-accent-sm);      font-weight: var(--fw-regular);
      line-height: var(--lh-accent-sm);   /* 0.9 */
      text-align: center;
    }

    .story__polaroid {
      position: absolute;
      top: 30.1875rem;                    /* 483 (508−25) */
      left: calc(50% - 44.8125rem);       /* 243 − 960 = −717 */
      width: 18.875rem;    }

    .story__ultrasound { width: 100%; height: auto; display: block; }

    .story__flower {
      position: absolute;
      top: -0.5rem;                       /* 1650 − 1658 */
      left: 10.59375rem;                  /* 169.5 (202×0.839) */
      width: 9.9375rem;      height: auto;
    }

    .collect {
      margin-top: 0;      overflow-x: clip;      background: var(--color-brand);
    }

    .collect__frame {
      position: relative;
      width: 100%;
      max-width: 120rem;      margin-inline: auto;
      height: auto;      overflow: visible;
    }

    .collect__photo {
      display: block;
      width: 100%;
      height: auto;
    }

    .collect__card {
      position: absolute;
      top: 2.6875rem;                     /* 43 (2285−2242) */
      right: 3.125rem;                    /* 50 (1872−1822) */
      left: auto;      transform: none;
      width: 42.75rem;                    /* 684 */
      height: 45.4375rem;                 /* 727 */
      border-radius: var(--radius-card);
      background: var(--color-cream);      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 6.75rem 3.375rem 0;      text-align: center;
    }

    .collect__bow { width: 13.125rem; height: 7.3125rem; object-fit: contain; }

    /* 210×117 */

    .collect__title {
      margin: 1.5rem 0 0;                 /* 24 (2534−2510) */
      font-size: var(--fs-h2);            /* 60 */
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
    }

    .collect__body {
      margin-top: clamp(2.5rem, 1.818627rem + 1.100110vw, 3.125rem);      max-width: 30.625rem;               /* 490 */
      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }

    .collect__body p { margin: 0; }

    .collect__body p + p { margin-top: 1.5625rem; }

    .for-whom {
      margin-top: 0;      padding-block: 6.25rem;             /* 100 (5-10) */
      background: var(--color-bg-warm);    }

    .for-whom__title {
      margin: 0 0 3.125rem;      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      text-align: center;
    }

    .for-whom__stage {
      width: auto;      max-width: none;
      margin-left: max(var(--gutter), (100% - var(--container)) / 2);
      margin-right: 0;
    }

    .for-whom__slider,
    .liked__slider {
      column-gap: 3.75rem;      margin-inline-end: 0;
    }

    .who-card {
      width: 28.125rem;                   /* 450 */
      height: 36.375rem;                  /* 582 */
      min-height: 0;      border-radius: var(--radius-card);
      background: var(--color-cream);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      padding: 3.125rem 2.5rem;           /* 50 / 40 / 50 */
      text-align: center;
    }

    .who-card__photo { flex: 0 0 auto; }

    .who-card__photo {
      width: 17.3125rem; height: 17.3125rem;  /* 277 */
      border-radius: var(--radius-card);
      object-fit: cover;
    }

    .who-card__title {
      margin: 1.25rem 0 0;      max-width: 20.625rem;               /* 330 */
      min-height: 5.625rem;      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
    }

    .who-card__sub {
      margin: 1.25rem 0 0;      max-width: 20.625rem;      min-height: 4.6875rem;      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--color-text-muted);    }

    .why {
      margin-top: 0;      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow-x: clip;      padding-inline: max(0px, (100% - 120rem) / 2);
      background: var(--color-brand);
    }

    .why__panel { background: var(--color-brand); }

    .why__panel-in {
      padding: 6.25rem 0 6.25rem var(--gutter);      width: 42rem;                       /* 672 */
      margin-inline: 0;      box-sizing: content-box;
    }

    .why__title {
      margin: 0;
      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      color: var(--color-cream);
    }

    .why__list {
      margin: 3.125rem 0 0;      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 4rem;    }

    .why__item {
      display: flex;
      gap: 2.6875rem;                     /* 43 */
      align-items: flex-start;
    }

    .why__icon { flex-shrink: 0; width: 3.625rem; height: 3.75rem; }

    .why__item-title {
      margin: 0;
      max-width: 30.25rem;      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
      color: var(--color-bg-warm);    }

    .why__media { position: relative; }

    .why__media > img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    .why__caption {
      position: absolute;
      left: 5.3125rem;                    /* 85 (1042−957) */
      top: auto;      bottom: 6.25rem;      margin: 0;
      width: 27.375rem;                   /* 438 */
      font-weight: var(--fw-medium);      /* 500 */
      line-height: var(--lh-subhead);     /* 100% */
      color: var(--color-bg-warm);    }

    .why__play {
      position: absolute;
      right: 1.3125rem;                   /* 21 (1920−1682−217) */
      top: auto;
      bottom: 6.25rem;      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1.625rem;                      /* 26 */
      width: 13.5625rem;                  /* 217 */
      height: 15.625rem;
      padding: 0;
      border: 1px solid var(--color-cream);
      border-radius: var(--radius-card);  /* 30 */
      background: none;
      box-shadow: none;
      cursor: pointer;
      font-family: var(--font-main);
      color: var(--color-cream);
    }

    .why__play-circle {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      width: 6.125rem; height: 6.125rem;  /* 98 (1:793) */
      margin-top: 0;
      border: 1px solid var(--color-cream);
      border-radius: 50%;      background: none;
      color: var(--color-cream);    }

    .why__play-circle svg { width: 1.0625rem; height: 1.25rem; margin-left: 0.1875rem; }

    .why__play-label {
      margin-top: 0;
      align-self: stretch;
      font-size: var(--fs-ui);            /* 15 */
      font-weight: var(--fw-bold);        /* 700 */
      line-height: var(--lh-ui);          /* 134% = 20.1 */
      text-transform: uppercase;
      text-align: center;
      color: inherit;    }

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

    .liked { margin-top: 6.25rem; }

    /* 100 (5-10) */

    .liked__title {
      margin: 0 0 3.125rem;      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      text-align: center;
    }

    .liked__stage {
      width: auto;      max-width: none;
      margin-left: max(var(--gutter), (100% - var(--container)) / 2);
      margin-right: 0;
    }

    .delivery {
      margin-top: 6.25rem;                /* 100 (5-10) */
      margin-bottom: 6.25rem;             /* 100 (5-10) */
    }

    .delivery__title {
      margin: 0 0 3.125rem;      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      text-align: center;
    }

    .delivery__list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 1.875rem;                      /* 30 */
    }

    .delivery__item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.875rem;                      /* 30 */
      text-align: center;
    }

    .delivery__item:first-child,
    .delivery__item:last-child { flex: 0 0 auto; width: 26rem; padding: 0; }

    .delivery__item img { width: 6.8125rem; height: 6.8125rem; }

    .delivery__item-title {
      margin: 0;
      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
    }

  }

  .hero__video-badge { display: none; }

  /* АДАПТИВ <1280 — планшетна/мобільна ідентичність */

  @media (max-width: 1279.98px) {

    .inside__title,
    .why__title { text-align: center; }

    .why__media {
      height: clamp(25rem, 19.687500rem + 22.668394vw, 46.875rem);
      overflow: hidden;
    }

    .why__media > img {
      width: 100%;
      height: 150%;      object-fit: cover;
      will-change: transform;
    }

    @media (prefers-reduced-motion: reduce) {
      .why__media > img { height: 100%; }

    }

    .hero__media .gallery { aspect-ratio: 3 / 4; }

    .hero__video-badge,
    .hero .hero__video-btn,
    .why__play {
      animation: video-badge-pulse 2s ease-out infinite;
    }

    .hero__video-badge:focus-visible,
    .hero .hero__video-btn:focus-visible,
    .why__play:focus-visible { animation: none; }

    @media (hover: hover) {
      .hero__video-badge:hover,
      .hero .hero__video-btn:hover,
      .why__play:hover { animation: none; }

    }

    @keyframes video-badge-pulse {
      0%   { box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12),
                         0 0 0 0 color-mix(in srgb, var(--color-brand) 45%, transparent); }
      70%  { box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12),
                         0 0 0 1rem color-mix(in srgb, var(--color-brand) 0%, transparent); }
      100% { box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.12),
                         0 0 0 0 color-mix(in srgb, var(--color-brand) 0%, transparent); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero__video-badge,
      .why__play { animation: none; }

    }

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

  }

  @media (min-width: 991px) and (max-width: 1919.98px) {

    .story__note {
      top: -2.98625rem;      left: calc(50% + 15.125rem);         /* +242 */
      width: 15.21875rem;                  /* 243.5 */
    }

    .story__note-text {
      top: 54%;
      left: 49.8%;
      width: 10.9375rem;                   /* 175 */
      transform: translate(-50%, -50%) rotate(-13.7deg);
    }

    .story__note-text br:nth-of-type(2) { display: none; }

    .who-card { width: 25rem; }

  }

  @media (min-width: 720px) and (max-width: 1279.98px) {

    .why__panel-in { width: var(--container); }

    .why__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 2.5rem;    }

    .why__item { gap: 1.5rem; }

    .why__item-title { max-width: none; }

  }

  @media (max-width: 1279.98px) {
    .why__play-label br { display: none; }

    .hero__video-badge:focus-visible,
    .why__play:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }

  }

  @media (min-width: 991px) and (max-width: 1279.98px) {

    .why__play { display: inline-flex; }

    .hero__video-badge {
      display: inline-flex;
      position: absolute;
      left: auto;
      right: 1.25rem;                      /* 20 */
      bottom: 0.75rem;      z-index: 2;
    }

    .hero .hero__video-btn { display: none; }

    .inside__pop { width: 18.75rem; }

    .inside__pop-text { font-size: 1.0625rem; }

  }

  /* «У цьому боксі…» — власний поріг 1740 */

  @media (min-width: 991px) and (max-width: 1739.98px) {

    .collect__frame {
      height: auto;
      padding-block: 5.8125rem;      display: flex;
      justify-content: center;
    }

    .collect__photo { position: absolute; inset: 0; }

    .collect__card {
      position: relative;
      z-index: 1;
      top: auto;
      left: auto;
      transform: none;
      height: auto;
      padding: 3.75rem;    }

  }

  /* МОБАЙЛ <991: картка «У цьому боксі» */

  @media (max-width: 990.98px) {

    .why__play {
      display: inline-flex;
      position: absolute;
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      bottom: 0.75rem;                   /* 12 */
      z-index: 2;
    }

    .why__caption {
      display: block;
      position: absolute;
      left: 1.25rem;                     /* 20 */
      top: 1.25rem;
      bottom: auto;
      margin: 0;
      width: min(calc(100% - 2.5rem), calc(100vw - 2.5rem));
      font-size: var(--fs-subhead);
      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);
      color: var(--color-bg-warm);    }

    .collect__frame {
      height: auto;      padding-block: 3.125rem;      display: flex;
      justify-content: center;
    }

    .collect__photo { position: absolute; inset: 0; }

    .collect__card {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: var(--container);      padding: 2.5rem 1.5625rem;      border-radius: var(--radius-card);
      background: var(--color-cream);
      text-align: center;
    }

    .collect__bow { width: 8.125rem; height: 4.526786rem; object-fit: contain; }

    .collect__title {
      margin: 0.9375rem 0 0;             /* 15 */
      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
    }

    .collect__body {
      margin-top: clamp(1.875rem, 1.487624rem + 1.652893vw, 2.5rem);      font-size: var(--fs-body);
      line-height: var(--lh-body);
    }

    .collect__body p { margin: 0; }

    .collect__body p + p { margin-top: 1.5625rem; }

    .hero__media { margin-inline: 0; }

    .hero__video-badge {
      display: inline-flex;
      position: absolute;
      left: 1.25rem;                     /* 20 */
      right: auto;
      bottom: 0.75rem;                   /* 12 */
      z-index: 2;
      height: clamp(2.8125rem, 2.4282rem + 1.639344vw, 3.4375rem);   /* 45→55 */
    }

    .hero__video-badge .video-badge__circle {
      width: auto;
      height: 100%;
      aspect-ratio: 1;
    }

    .hero .hero__video-btn { display: none; }

    .hero__video-verb { display: none; }

    .hero .option-group__legend {
      float: left;      width: auto;
      min-width: 0;
      margin-bottom: 0;
    }

    .hero .buy-row {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      --buy-row-gap: var(--gap-xs);
      gap: var(--buy-row-gap);    }

    .hero .buy-row .qty { align-self: auto; }

    @media (max-width: 639.98px) {
      .story__paper--land { display: none; }

      .story__paper--port { display: block; }

    }

    .story__note {
      top: clamp(-2.98625rem, -1.197500rem - 2.891057vw, -1.875rem);     /* −30→−47.8 */
      left: auto;
      right: clamp(0.59375rem, 1.650000rem - 1.707317vw, 1.25rem);       /* 20→9.5 */
      width: clamp(11.25rem, 8.830000rem + 10.325203vw, 15.21875rem);    /* 180→243.5 */
    }

    .story__note-text {
      top: 54%;
      left: 51.4%;
      width: clamp(7.625rem, 5.605000rem + 8.617886vw, 10.9375rem);      /* 122→175 */
      transform: translate(-50%, -50%) rotate(-13.7deg);
    }

    .delivery__list {
      margin-inline: var(--edge);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 26rem));
      justify-content: center;
      gap: clamp(1.25rem, 0.865781rem + 1.639344vw, 1.875rem);   /* 20→30 */
      align-items: start;
    }

    .delivery__item { max-width: 100%; }

    .delivery__item-title { max-width: 100%; }

    .delivery__item img { width: min(6.8125rem, 60%); height: auto; }

    .why__play { width: max-content; max-width: calc(100% - 2.5rem); }

    .hero__info { margin-top: 0.9375rem; }

    .pp { padding-bottom: clamp(2.5rem, 1.347338rem + 4.918033vw, 4.375rem); }

    .for-whom { padding-block: clamp(2.5rem, 1.347338rem + 4.918033vw, 4.375rem); }

    .why__panel-in { padding-block: clamp(2.5rem, 1.347338rem + 4.918033vw, 4.375rem); }

    .liked { margin-top: clamp(2.5rem, 1.347338rem + 4.918033vw, 4.375rem); }

    .delivery {
      margin-top: clamp(2.5rem, 1.347338rem + 4.918033vw, 4.375rem);
      margin-bottom: clamp(2.5rem, 1.347338rem + 4.918033vw, 4.375rem);
    }

    .collect__frame { padding-block: clamp(2.5rem, 0.463625rem + 8.688525vw, 5.8125rem); }   /* 40→93 */

    .collect__card {
      width: min(var(--container), 42.75rem);                                /* ..684 */
      padding: clamp(2.5rem, 1.731556rem + 3.278689vw, 3.75rem)              /* 40→60 */
               clamp(1.5625rem, 0.217725rem + 5.737705vw, 3.75rem);          /* 25→60 */
    }

    .for-whom__title { margin-bottom: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem); }

    .liked__title { margin-bottom: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem); }

    .delivery__title { margin-bottom: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem); }

    .why__list { margin-top: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem); }

    .pp { padding-top: clamp(0.9375rem, 0.745388rem + 0.819672vw, 1.25rem); }

    .pp__crumbs { margin-bottom: clamp(1.25rem, 0.673669rem + 2.459016vw, 2.1875rem); }

    .hero .option-color,
    .hero .option-check {
      --swatch-size: clamp(1.75rem, 1.673156rem + 0.327869vw, 1.875rem);     /* 28→30 */
      --swatch-gap: clamp(0.25rem, 0.211575rem + 0.163934vw, 0.3125rem);     /* 4→5 */
    }

    .hero .qty__btn {
      width: clamp(1.75rem, 1.673156rem + 0.327869vw, 1.875rem);
      height: clamp(1.75rem, 1.673156rem + 0.327869vw, 1.875rem);
    }

    .hero__media .gallery-wrap {
      max-width: min(100%, 34rem);    }

    .who-card {
      width: min(clamp(20.625rem, 17.935451rem + 11.475410vw, 25rem), 100% - 3.125rem);  /* 330→400 */
      padding: clamp(1.875rem, 1.106500rem + 3.278689vw, 3.125rem)           /* 30→50 */
               clamp(1.5625rem, 0.986169rem + 2.459016vw, 2.5rem);           /* 25→40 */
    }

    .who-card__title { min-height: clamp(3.75rem, 2.597338rem + 4.918033vw, 5.625rem); }   /* 60→90 */

    .who-card__sub { min-height: clamp(3.5625rem, 3.293544rem + 1.147541vw, 4rem); }   /* 57→64 */

    .inside__pop { width: clamp(16.25rem, 14.713113rem + 6.557377vw, 18.75rem); }

    @media (min-width: 640px) {
      .inside__pop-text { font-size: 1rem; }

    }

    @media (min-width: 860px) {
      .inside__pop-text { font-size: 1.0625rem; }

    }

    .story__stage { height: clamp(41.3125rem, 48.254575rem - 11.219512vw, 45.625rem); }   /* 730→661 */

    @media (max-width: 639.98px) {

      .story__paper {
        width: min(clamp(25.1875rem, 18.351563rem + 29.166667vw, 30rem),
                   100% - 2.5rem);        height: auto;
        aspect-ratio: 403 / 480;        top: clamp(4.025rem, 13.192469rem - 22.954545vw, 7.8125rem);        /* 125→64.4 */
      }

      .story__text {
        width: min(var(--container),
                   min(clamp(25.1875rem, 18.351563rem + 29.166667vw, 30rem),
                       100% - 2.5rem) - 4.25rem);
      }

    }

    @media (min-width: 640px) {
      .story__paper {
        width: min(clamp(46.25rem, 47.4875rem - 2vw, 46.6875rem), 100% - 2.5rem);        height: clamp(33.821875rem, 39.232562rem - 8.742857vw, 35.734375rem); /* 571.7→541.1 */
        top: clamp(3.75rem, 4.510188rem - 1.228571vw, 4.01875rem);          /* 64.3→60 */
      }

      .story__text {
        width: min(var(--container),
                   min(clamp(46.25rem, 47.4875rem - 2vw, 46.6875rem), 100% - 2.5rem) - 5rem);
      }

    }

    .story__text {
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .story__title,
    .story__body { max-width: 100%; }

    .story__polaroid {
      display: block;
      position: absolute;
      top: auto;
      bottom: 1.25rem;      left: var(--gutter);      transform: none;
      width: 6.875rem;                     /* 110 */
    }

    .story__ultrasound { width: 100%; height: auto; display: block; }

    .story__flower {
      position: absolute;
      top: -0.1875rem;      left: 56%;      width: 56%;
      height: auto;
    }

    .why__media { width: 100%; }

  }

  /* Планшетна смуга 991–1919 */

  @media (min-width: 991px) and (max-width: 1919.98px) {

    .pp { padding-bottom: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem); }

    .for-whom { padding-block: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem); }

    .why__panel-in { padding-block: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem); }

    .liked { margin-top: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem); }

    .delivery {
      margin-top: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem);
      margin-bottom: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem);
    }

    .for-whom__title { margin-bottom: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }

    .liked__title { margin-bottom: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }

    .delivery__title { margin-bottom: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }

    .why__list { margin-top: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }

    .pp { padding-top: clamp(1.25rem, -0.159300rem + 2.275189vw, 2.5625rem); }

    .pp__crumbs { margin-bottom: clamp(2.1875rem, 1.583556rem + 0.975081vw, 2.75rem); }

    .hero {
      grid-template-columns:
        clamp(28.8125rem, 9.150869rem + 31.744312vw, 47.125rem)     /* 461→754 */
        clamp(26.25rem, 8.601500rem + 28.494041vw, 42.6875rem);     /* 420→683 */
      column-gap: clamp(1.875rem, -2.218400rem + 6.608884vw, 5.6875rem);  /* 30→91 */
    }

    .hero .option-color,
    .hero .option-check {
      --swatch-size: clamp(1.875rem, 1.338163rem + 0.866739vw, 2.375rem);  /* 30→38 */
      --swatch-gap: clamp(0.3125rem, 0.245394rem + 0.108342vw, 0.375rem);  /* 5→6 */
    }

    .hero .qty__btn {
      width: clamp(1.875rem, 1.338163rem + 0.866739vw, 2.375rem);
      height: clamp(1.875rem, 1.338163rem + 0.866739vw, 2.375rem);
    }

    .who-card { width: clamp(25rem, 21.644775rem + 5.417118vw, 28.125rem); }

    .story__note {
      top: clamp(-2.98625rem, -15.553000rem + 20.289274vw, 8.718125rem);   /* −47.78→139.49 */
      left: calc(50% + clamp(15.125rem, 4.808344rem + 16.656555vw, 24.73375rem)); /* 242→395.74 */
      width: clamp(15.21875rem, 0.077275rem + 24.446371vw, 29.32125rem);   /* 243.5→469.14 */
    }

    .story__note-text {
      width: clamp(10.9375rem, -1.342631rem + 19.826652vw, 22.375rem);     /* 175→358 */
    }

    @media (min-width: 1727px) {

      .story__note-text br:nth-of-type(2) { display: inline; }

    }

  }

  /* ⚠️ «Чому це важливо» поруч — з 1280 Той самий поріг у js/why-parallax.js (BAND = 1279.98) — міняти обидва разом. */

  @media (min-width: 1280px) and (max-width: 1919.98px) {
    .why {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .why__panel-in {
      width: auto;
      max-width: 42rem;      margin-inline: 0;
      padding-left: var(--gutter);      padding-right: 0;
    }

    .why__play {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1.625rem;                       /* 26 */
      width: 13.5625rem;                   /* 217 */
      height: 15.625rem;                   /* 250 */
      padding: 0;
      border: 1px solid var(--color-cream);
      border-radius: var(--radius-card);
      background: none;
      box-shadow: none;
      color: var(--color-cream);
    }

    .why__play-circle {
      width: 6.125rem; height: 6.125rem;   /* 98 */
      border: 1px solid var(--color-cream);
      background: none;
      color: var(--color-cream);
    }

    .why__play-circle svg { width: 1.0625rem; height: 1.25rem; margin-left: 0.1875rem; }

    .why__play-label { align-self: stretch; text-align: center; color: inherit; }

    .why__title { text-align: left; }

    .why__list {
      display: flex;      grid-template-columns: none;      flex-direction: column;
      gap: clamp(2.5rem, 0.889488rem + 2.600217vw, 4rem);   /* 40→64 */
    }

    .why__item { gap: 2.6875rem; }

    .why__item-title { max-width: 30.25rem; }

    .why__media { height: auto; }

    .why__media > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      will-change: auto;
    }

    .why__caption {
      left: 5.3125rem;                     /* 85 */
      top: auto;
      bottom: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem);   /* →100 */
      width: 27.375rem;                    /* 438 */
    }

    .why__play {
      right: 1.3125rem;                    /* 21 */
      bottom: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem);
    }

  }

  /* Герой: дві колонки на 769–990 */

  @media (min-width: 769px) and (max-width: 990.98px) {
    .hero { display: flex; align-items: flex-start; column-gap: 1.25rem; }

    .hero__info {
      flex: 0 0 20rem;      display: flex; flex-direction: column; align-items: flex-start;
    }

    .hero__media { flex: 1 1 0; min-width: 0; margin-inline: 0; }

    .hero__media .gallery-wrap { width: auto; max-width: none; margin-inline: 0; }

    .hero__media { position: relative; }

    .hero__media .gallery { aspect-ratio: 3 / 4; height: auto; }

    .hero__video-badge { left: auto; right: 1.25rem; }

    .hero__video-verb { display: inline; }

    .hero .buy-row {
      flex-direction: row; flex-wrap: wrap; align-items: center;
      --buy-row-gap: 0.9375rem;
      column-gap: var(--buy-row-gap); row-gap: var(--gap-xs);
    }

    .hero .buy-row .qty { align-self: center; }

    .hero .buy-row .btn--primary { flex: 1 0 100%; min-width: 0; }

    .hero .buy-textarea { width: 100%; }

  }

  /* «Чому це важливо»: підпис і play планшетно від 830 */

  @media (min-width: 830px) and (max-width: 990.98px) {
    .why__caption {
      left: 2.5rem;      top: auto;
      bottom: 4.375rem;                    /* 70 */
      width: 27.375rem;                    /* 438 */
    }

    .why__play {
      left: auto;
      right: 2.5rem;      transform: none;
      bottom: 4.375rem;                    /* 70 */
    }

  }

  @media (min-width: 1740px) {
    .collect__card {
      left: auto;
      right: calc((100% - var(--container)) / 2);
      transform: none;
    }

  }

  @media (min-width: 1281px) and (max-width: 1739.98px) {
    .collect__card {
      margin-left: auto;
      margin-right: calc((100% - var(--container)) / 2);
      left: auto; right: auto;
      transform: none;
    }

  }

  @media (min-width: 991px) and (max-width: 1280px) {
    .collect__card {
      left: auto; right: auto;
      transform: none;    }

  }

  @media (min-width: 1280px) and (max-width: 1440px) {
    .why__item { gap: 1.5rem; }

    .why__item-title { max-width: 22rem; }

  }

  @media (max-width: 1279.98px) {

    .why__caption { left: var(--gutter); width: var(--container); }

  }

  @media (min-width: 830px) and (max-width: 1279.98px) {
    .why__caption { top: 1.25rem; bottom: auto; }

    .why__play { left: auto; right: var(--gutter); }

  }

  @media (min-width: 1280px) and (max-width: 1440px) {
    .why__caption { top: 6.25rem; bottom: auto; }

  }

  @media (min-width: 1280px) {
    .why__play { left: auto; right: calc((100% - var(--container)) / 2); }

  }

  @media (min-width: 1280px) and (max-width: 1440px) {
    .hero__media .gallery { aspect-ratio: 5 / 6; }

  }

  @media (min-width: 640px) and (max-width: 990.98px) {
    .hero .option-group,
    .hero .option-extra,
    .hero .buy-row { --buy-label-col: 6.25rem; }   /* 100 */

    .hero .option-group__legend,
    .hero .option-extra__label {
      width: var(--buy-label-col);
      min-width: var(--buy-label-col);
    }
  }

  @media (max-width: 639.98px) {
    .hero .option-group,
    .hero .option-extra,
    .hero .buy-row { --buy-label-col: 0px; }

    .hero .option-group,
    .hero .option-extra { flex-wrap: wrap; }

    .hero .option-group__legend,
    .hero .option-extra__label {
      width: 100%;
      min-width: 0;
      min-height: 0;
    }

    .hero .buy-row__price { flex: 1 0 100%; width: auto; }
  }

  @media (min-width: 769px) and (max-width: 990.98px) {

    .hero__info { margin-top: 0; }

    .hero__title { margin-top: -0.055em; }

  }

  @media (min-width: 1441px) and (max-width: 1919.98px) {
    .hero__media .gallery { aspect-ratio: auto; height: calc(31.160625rem + 15.6994vw); }

  }

  @media (min-width: 1281px) and (max-width: 1919.98px) {
    .hero__desc { max-width: 31.5rem; }

  }

  @media (min-width: 700px) and (max-width: 990.98px) {
    .hero {
      grid-template-columns: minmax(0, 1fr) 25rem;      column-gap: 1.25rem;
    }

  }

  @media (max-width: 430px) {
    .story__note { left: auto; right: 1.25rem; margin-inline: 0; transform: none; }

    .story__polaroid { bottom: 2.5rem; }

    .story__stage { height: clamp(45.25rem, 63.18rem - 66.7vw, 46.875rem); }   /* 750 → 724 */

    .story__paper {
      height: calc(100% - clamp(4.025rem, 13.192469rem - 22.954545vw, 7.8125rem) - 3.75rem);
      aspect-ratio: auto;
    }

  }

  @media (max-width: 390px) {
    .story__note { top: -1.5625rem; right: 0.5rem; }

    .story__stage { height: clamp(46.875rem, 92.14rem - 185.7vw, 55rem); }   /* 880 → 750 */

    .story__polaroid {
      bottom: clamp(2.4375rem, 13.23rem - 44.29vw, 4.375rem);             /* 70@320 → 39@390 */
      left: clamp(0rem, -4.571rem + 22.857vw, 1rem);                      /* 0@320 → 16@390 */
    }

  }

  @media (max-width: 480px) {
    .hero__desc { margin-top: 0.9375rem; }

    .hero__desc .hero__desc-label { margin-top: 0.9375rem; }

    .collect__body p + p { margin-top: 0.9375rem; }

    .story__body p + p { margin-top: 0.9375rem; }

  }

  @media (max-width: 990.98px) {
    .for-whom { padding-bottom: clamp(3.4375rem, 2.8656rem + 2.439vw, 4.375rem); }   /* 55→70 */

  }

  /* Одна геометрія сцени історії для всіх товарів */

  @media (min-width: 991px) {
    .story__text {
      top: 50%;
      transform: translate(-50%, calc(-50% + 1.5rem - 2.422vw));
    }

  }

  @media (min-width: 1920px) {
    .story__text { transform: translate(calc(-50% + 1.46875rem), calc(-50% - 1.40625rem)); }

    .collect__card {
      justify-content: center;
      padding-block: 3.375rem;    }

  }

}

/* --- sense-memory-box-pregnancy --- */
/* MEMORY-BOX-PREGNANCY — пейджеві стилі сторінки товару. */
@layer page {

  .hero__media .gift-badge {
    left: 2.5rem;                          /* 40 */
    right: auto;
    top: 1.3125rem;                        /* 21 */
  }

  .inside { display: flex; flex-direction: column; }

  .inside__panel { background: var(--color-brand); order: -1; }

  .inside__panel-in {
    margin-inline: var(--edge);
    padding-block: 3.125rem;  }

  .inside__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    color: var(--color-cream);
  }

  .inside__list { display: none; }

  .inside__item {
    display: flex;
    gap: clamp(1.25rem, 0.366291rem + 3.770492vw, 2.6875rem);             /* 20→43 */
    align-items: flex-start;
  }

  .inside__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8125rem; height: 2.8125rem;    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 1.5rem;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-cream);
  }

  .inside__item-text { display: flex; flex-direction: column; gap: 0.9375rem; }

  .inside__item-title {
    margin: 0;
    font-size: var(--fs-subhead);
    font-weight: var(--fw-medium);
    line-height: var(--lh-subhead);
    color: var(--color-bg-warm);
  }

  .inside__item-sub {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-bg-warm);
    opacity: 0.67;
  }

  .inside__media { position: relative; }

  .inside__media img { width: 100%; height: auto; display: block; }

  .inside__marker {
    --marker-size: clamp(1.5625rem, 0.794057rem + 3.278689vw, 2.8125rem);  /* 25→45 */
    position: absolute;
    left: clamp(0px, var(--mx), calc(100% - var(--marker-size)));
    top: clamp(0px, var(--my), calc(100% - var(--marker-size)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--marker-size);
    height: var(--marker-size);
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 1.5rem;
    font-size: var(--fs-ui);    line-height: 1;
    color: var(--color-cream);
    background: none;
    appearance: none;
    font-family: inherit;
    padding: 0;
  }

  .inside--interactive .inside__marker {
    --marker-size: 2.8125rem;    background: var(--color-brand);
    border-color: var(--color-brand);
    cursor: pointer;
    animation: inside-pulse 2s ease-out infinite;
  }

  .inside--interactive .inside__marker[aria-expanded="true"] {
    background: var(--color-brand-sage);    border-color: var(--color-brand-sage);
    animation: none;
  }

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

  }

  @media (min-width: 991px) {

    .hero__media .gift-badge {
      left: auto;
      right: calc(var(--badge-size) * -0.32);
      top: calc(var(--badge-size) * -0.32);
    }

    .collect__title-brand { color: var(--color-brand); }

    .inside { display: flex; flex-direction: column; }

    .inside__panel { background: var(--color-brand); order: -1; }

    .inside__panel-in {
      width: 42rem;      margin-inline: auto;
      padding: 4.375rem 0;      box-sizing: content-box;
    }

    .inside__title {
      margin: 0;
      font-size: var(--fs-h2);
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      color: var(--color-cream);
    }

    .inside__media { position: relative; }

    .inside__media img { width: 100%; height: auto; display: block; }

    .inside__marker {
      position: absolute;
      left: var(--mx); top: var(--my);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.8125rem; height: 2.8125rem;
      border: 1px solid rgb(255 255 255 / 0.5);
      border-radius: 1.5rem;
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--color-cream);
    }

  }

  @media (min-width: 1280px) {

    .hero__media .gift-badge {
      left: auto;
      right: calc(var(--badge-size) * -0.32);
      top: calc(var(--badge-size) * -0.32);
    }

    .inside {
      display: grid;
      grid-template-columns: 1fr 1fr;
      overflow-x: clip;
      padding-inline: max(0px, (100% - 120rem) / 2);
      background: var(--color-brand);
    }

    .inside__panel-in {
      width: auto;
      max-width: 42rem;
      margin-inline: 0;
      padding-inline: var(--gutter) 0;      box-sizing: content-box;
    }

    .inside__list {
      display: flex;      flex-direction: column;
      margin: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem) 0 0;
      padding: 0;
      list-style: none;
      gap: 1.625rem;                       /* 26 */
    }

    .inside__item { gap: 2.6875rem; }

    .inside__item-text { gap: 0.3125rem; }

    .inside__media img { width: 100%; height: 100%; object-fit: cover; }

  }

  @media (min-width: 1920px) {

    .hero__media .gift-badge {
      left: auto;
      right: calc(var(--badge-size) * -0.32);
      top: calc(var(--badge-size) * -0.32);
    }

    .collect__title-brand { color: var(--color-brand); }

    .inside {
      display: grid;
      grid-template-columns: 1fr 1fr;      overflow-x: clip;      padding-inline: max(0px, (100% - 120rem) / 2);
      background: var(--color-brand);
    }

    .inside__panel { background: var(--color-brand); }

    .inside__panel-in {
      padding: 6.25rem 0 6.25rem var(--gutter);      width: 42rem;      margin-inline: 0;      box-sizing: content-box;
    }

    .inside__title {
      margin: 0;
      font-size: var(--fs-h2);            /* 60 */
      font-weight: var(--fw-medium);
      line-height: var(--lh-heading);
      color: var(--color-cream);    }

    .inside__list {
      margin: 3.125rem 0 0;      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.625rem;                      /* 26 */
    }

    .inside__item {
      display: flex;
      gap: 2.6875rem;                     /* 43 */
      align-items: flex-start;
    }

    .inside__num {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.8125rem; height: 2.8125rem;  /* 45 */
      border: 1px solid rgb(255 255 255 / 0.5);
      border-radius: 1.5rem;      font-size: var(--fs-body);          /* 20 */
      line-height: var(--lh-body);
      color: var(--color-cream);
    }

    .inside__item-text { display: flex; flex-direction: column; gap: 0.3125rem; }

    .inside__item-title {
      margin: 0;
      font-weight: var(--fw-medium);
      line-height: var(--lh-subhead);     /* 1 */
      color: var(--color-bg-warm);    }

    .inside__item-sub {
      margin: 0;
      font-size: var(--fs-body);          /* 20 */
      line-height: var(--lh-body);
      color: var(--color-bg-warm);
      opacity: 0.67;    }

    .inside__media { position: relative; }

    .inside__media img {
      width: 100%; height: 100%;
      object-fit: cover;      display: block;
    }

    .inside__marker {
      position: absolute;
      left: var(--mx); top: var(--my);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.8125rem; height: 2.8125rem;  /* 45 */
      border: 1px solid rgb(255 255 255 / 0.5);
      border-radius: 1.5rem;
      font-size: var(--fs-body);
      line-height: var(--lh-body);
      color: var(--color-cream);
    }

  }

  @media (max-width: 1279.98px) {
    /* Цифри на фото більші, пульс частіший (2s → 1.4s). */

    .inside--interactive .inside__marker {
      --marker-size: clamp(3.25rem, 2.788938rem + 1.967213vw, 4rem);  /* 52→64 */
      width: var(--marker-size);
      height: var(--marker-size);
      font-size: 1.0625rem;      animation-duration: 1.4s;
      left: min(var(--mx), 100% - var(--marker-size));
      top: min(var(--my), 100% - var(--marker-size));
      border-radius: 50%;
    }

  }

  @media (min-width: 991px) and (max-width: 1279.98px) {

    .inside--interactive .inside__marker {
      font-size: 1.375rem;                 /* 22 */
    }

  }

  @media (max-width: 990.98px) {
    .collect__title-brand { color: var(--color-brand); }

    .hero__media .gift-badge {
      left: auto;
      right: -1rem;      top: -2rem;    }

    .inside__panel-in { padding-block: clamp(2.5rem, 1.347338rem + 4.918033vw, 4.375rem); }

    @media (min-width: 640px) {
      .inside--interactive .inside__marker { font-size: 1.1875rem; }

    }

    @media (min-width: 860px) {
      .inside--interactive .inside__marker { font-size: 1.3125rem; }

    }

  }

  @media (min-width: 991px) and (max-width: 1919.98px) {
    .inside__panel-in { padding-block: clamp(4.375rem, 2.361800rem + 3.250271vw, 6.25rem); }

  }

  @media (min-width: 1280px) and (max-width: 1440px) {
    .inside__item { gap: 1.34375rem; }   /* 43 / 2 */

    .inside__panel-in { max-width: 37rem; }

  }

  @media (min-width: 1280px) and (max-width: 1919.98px) {
    .inside__panel-in { padding-right: 2.5rem; }

  }

  @media (max-width: 390px) {

    .hero__media .gift-badge { --badge-size: 5.625rem; }

  }

  @media (max-width: 639.98px) {

    .inside .inside__media .inside__marker {
      left: clamp(0px, var(--mx-m, var(--mx)), calc(100% - var(--marker-size)));
      top:  clamp(0px, var(--my-m, var(--my)), calc(100% - var(--marker-size)));
    }

  }

}

/* --- sense-c-phone-intl --- */
@layer components {

  .iti { display: block; width: 100%; }

  .field .iti__country-container {
    inset-block: 1px;
    inset-inline-start: 1px;
    padding: 0;
  }

  .field .iti__selected-country {
    height: 100%;
    padding-inline-start: 1.5625rem;    border: 0;
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    background: transparent;
    font-family: var(--font-main);
    color: var(--color-text);
    cursor: pointer;
  }
  .field .iti__selected-country-primary {
    display: flex;
    align-items: center;
    padding: 0 0.5rem 0 0;
  }
  .field .iti__selected-country:hover,
  .field .iti__selected-country-primary:hover { background: transparent; }
  .field .iti__selected-country:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: -2px;
  }

  .field .iti__arrow {
    flex-shrink: 0;
    align-self: center;    width: 0.5625rem;    height: 0.5rem;
    margin: 0 0 0 0.375rem;
    border: 0;
    background: var(--color-text);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform: none;
  }
  .field .iti__arrow--up { rotate: 180deg; }

  .field--float:has(.iti) .field__label { left: var(--iti-w, 1.5625rem); }

  /* Випадний список */
  .iti__country-selector {
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-input);
    background: var(--color-cream);
    font-family: var(--font-main);
    color: var(--color-text);
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-text) 12%, transparent);
  }

  .iti__search-input {
    padding: 0.75rem 1.25rem 0.75rem 2.75rem;
    border: 0;
    border-bottom: 1px solid var(--color-control-border);
    background: none;
    font-family: var(--font-main);
    /* ⚠️ 16: iOS зумить сторінку при фокусі поля з меншим кеглем. */
    font-size: 1rem;
    color: var(--color-text);
  }
  .iti__search-input::placeholder { color: var(--color-text-muted); }
  .iti__search-input:focus {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
  }
  .iti__search-icon-svg,
  .iti__search-clear-svg { color: var(--color-text-muted); }

  .iti__country {
    /* ціль ≥24 (2.5.8) */
    min-height: 1.5rem;
    padding: 0.5rem 1.25rem;
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    color: var(--color-text);
  }
  .iti__country.iti__highlight {
    background: color-mix(in srgb, var(--color-brand) 30%, transparent);
  }
  .iti__dial-code { color: var(--color-text-muted); }
  .iti__country-check-svg { color: var(--color-brand); }
  .iti__no-results { color: var(--color-text-muted); }

  .iti--fullscreen-popup .iti__country-selector {
    border: 0;
    border-radius: 0;
    background: var(--color-cream);
  }

  /* Мʼяке попередження */
  .field__hint--warn { color: var(--color-text); }
  .field__hint--warn:empty { display: none; }
}