/* --- 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-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-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-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-catalog --- */

@layer components {

  .catalog { margin-top: var(--rhythm-edge); }
  .catalog__title {
    margin: 0;
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .catalog__filters {
    margin: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem) 0 0;    display: flex;
    flex-wrap: nowrap;
    justify-content: center;    justify-content: safe center;
    gap: clamp(1.25rem, 0.6352rem + 2.622951vw, 2.25rem);    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;  }
  .catalog__filters::-webkit-scrollbar { display: none; }
  .catalog__filter {
    flex: 0 0 auto;
    justify-content: center;
    text-transform: uppercase;
    background: var(--color-cream);
    border: 1px solid var(--color-brand);
    color: var(--color-text);
  }
  .catalog__filter.is-active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-cream);
  }  @media (hover: hover) {

    .catalog__filter:not(.is-active):hover {
      background: color-mix(in srgb, var(--color-brand-sage) 18%, var(--color-cream));
      border-color: var(--color-brand-sage);
    }
  }

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

  .catalog .product-card.is-hidden { display: none; }
  .catalog.is-filtered .catalog__dots { display: none; }

  .catalog__slider .product-card {
    transition: opacity 0.55s ease;
    will-change: opacity;
  }
  .catalog__slider.is-swapping .product-card {
    transition-duration: 0.26s;
    opacity: 0;
  }  @media (prefers-reduced-motion: reduce) {

    .catalog__slider .product-card { transition: none; }
    .catalog__slider.is-swapping .product-card { opacity: 1; }
  }

  .catalog__slider { padding-top: 2rem; margin-top: -2rem; }

  .catalog__stage { margin-top: var(--gap-xl); }

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

  .catalog__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);  }
  .catalog .product-card {
    width: auto;    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    justify-items: start;  }
  .catalog .slider-arrow--next svg { transform: rotate(180deg); }  @media (min-width: 991px) {

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

    .catalog__stage {
      width: 73.875rem;
      max-width: calc(100% - 2 * var(--gutter));
      margin-left: max(var(--gutter), (100% - var(--container)) / 2);
      margin-right: auto;
    }
    .catalog__slider,
    .catalog__filters { column-gap: clamp(2.25rem, 2.25rem + (100vw - 991px) * 24 / 909, 3.75rem); }
  }
  @media (min-width: 1395px) {

    .catalog__stage { width: auto; max-width: none; margin-right: 0; }
    .catalog__slider { margin-inline-end: 0; }
  }

}

/* --- 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-faq --- */
/* FAQ — акордеон питань на нативних <details name> (ексклюзивна група). */
@layer components {

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

  .faq__head { text-align: center; }
  .faq__title {
    margin: 0;
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .faq__sub {
    max-width: 33rem;    margin: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem) auto 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }

  .faq__list {
    margin: clamp(1.875rem, 1.875rem + (100vw - 375px) * 20 / 605, 3.125rem) 0 0;   /* 30→50 */
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 991px) {
    .faq__list { margin-top: clamp(3.125rem, 3.125rem + (100vw - 991px) * 20 / 909, 4.375rem); }   /* 50→70 */
  }

  .faq__item {
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
  }

  .faq__q {
    list-style: none;    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);    padding: 1.5625rem 0;    cursor: pointer;
    font-size: var(--fs-subhead);    font-weight: var(--fw-regular);
    line-height: var(--lh-heading);
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
  }
  .faq__q-title {
    margin: 0;
    font: inherit;
    color: inherit;
  }
  .faq__item:first-child .faq__q { padding-top: 0; }
  .faq__q::-webkit-details-marker { display: none; }   /* Safari трикутник */
  .faq__q:focus-visible { outline: 2px solid var(--color-text); outline-offset: 4px; }

  .faq__icon {
    position: relative;
    flex-shrink: 0;
    width: var(--control-size); height: var(--control-size);   /* 28→30→38 */
    border: 1px solid var(--color-brand);
    border-radius: 50%;
    transition: background-color var(--transition), border-color var(--transition);
  }
  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    inset: 50%;
    width: calc(var(--control-size) * 0.304); height: 1px;
    margin: -0.5px 0 0 calc(var(--control-size) * -0.152);
    background: var(--color-brand-sage);    transition: transform var(--transition), opacity var(--transition);
  }
  .faq__icon::after { transform: rotate(90deg); }
  .faq__item[open] .faq__icon::before { transform: rotate(45deg); }
  .faq__item[open] .faq__icon::after  { transform: rotate(-45deg); }

  .faq__item[open] .faq__icon {
    background: var(--color-brand);
    border-color: var(--color-brand);
  }
  .faq__item[open] .faq__icon::before,
  .faq__item[open] .faq__icon::after { background: var(--color-cream); }

  @media (hover: hover) {
    .faq__q:hover .faq__icon {
      background: var(--color-brand);
      border-color: var(--color-brand);
    }
    .faq__q:hover .faq__icon::before,
    .faq__q:hover .faq__icon::after { background: var(--color-cream); }
  }

  .faq__a {
    margin: 0;
    padding: 0 calc(var(--control-size) + var(--gap-md)) 1.5625rem 0;    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);  }
  .faq__a > * { margin: 0; }
  .faq__a > * + * { margin-top: 0.625rem; }
  @media (prefers-reduced-motion: reduce) {
    .faq__icon, .faq__icon::before, .faq__icon::after { transition: 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-insta --- */
/* INSTA — смуга «Слідкуйте за нами в Instagram»: дві панелі + мокап телефона. */

@layer components {

  .insta {
    margin-top: 0;    display: grid;
    grid-template-columns: 1fr;
    overflow: clip;
  }

  .insta__pane { display: flex; }
  .insta__pane--text {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: calc(var(--rhythm-edge) + var(--tear-overhang, 0px)) var(--rhythm-edge);
    padding-inline: var(--gutter);
    background: var(--color-brand-sage);
    color: var(--color-cream);
  }
  .insta__pane--text > * + * { margin-top: var(--gap-xs); }  .insta__pane--text .insta__title + * { margin-top: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem); }  .insta__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
  .insta__lead {
    margin: 0;
    max-width: clamp(15.125rem, 15.125rem + (100vw - 375px) * 158 / 615, 25rem);   /* 242→400 */
    font-size: var(--fs-body); line-height: var(--lh-body);
  }
  .insta__cta { text-transform: uppercase; }
  .insta__pane--text .insta__cta { margin-top: 3.125rem; }  .insta__pane--text .insta__cta + * { margin-top: 3.125rem; }  .insta__handle { margin: 0; font-size: var(--fs-subhead-lg); font-weight: var(--fw-medium); }
  .insta__handle-link { color: inherit; text-decoration: none; }
  @media (hover: hover) {
    .insta__handle-link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
  }
  .insta__handle-link:focus-visible { outline: 2px solid var(--color-cream); outline-offset: 4px; }
  .insta__pane--media {
    position: relative;
    overflow: clip;
    min-height: 20rem;    background: var(--color-cream) url("https://sensebaby.com/wp-content/themes/sense/img/gingham-bg-seamless.png") center center / auto repeat;
  }
  .insta__phone-wrap {
    position: absolute; z-index: 1;
    left: 50%; bottom: 0; transform: translateX(-50%);
    width: 56.875%;                        /* 546/960 */
    display: block;
  }
  .insta__phone { display: block; width: 100%; height: auto; }
  .insta__heart {
    position: absolute; z-index: 5;
    left: 55.8%; top: 28.6%;
    width: 25.4%;
    height: auto;
    aspect-ratio: 135 / 134;    rotate: -40deg;
  }

  /* Колаж збоку телефона */
  .insta__polaroid-wrap {
    position: absolute; z-index: 3;
    left: 76.1%; top: 18.9%;
    width: 31%;
    display: block;
  }
  .insta__polaroid { display: block; width: 100%; height: auto; }
  .insta__flowers {
    position: absolute; z-index: 6;
    left: 100.6%; top: 16.3%;
    width: 12.2%;
    height: auto;
    aspect-ratio: 159 / 283;
    rotate: -20deg;
  }

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

  @media (max-width: 639.98px) {
    .insta__pane--text .insta__cta {
      margin-top: clamp(1.875rem, 1.875rem + (100vw - 375px) * 20 / 615, 3.125rem);    }
    .insta__pane--media {
      background: var(--color-brand-sage);
      min-height: clamp(11.875rem, 11.875rem + (100vw - 375px) * 160 / 615, 21.875rem);    }
    .insta__phone-wrap {
      width: clamp(9.375rem, 9.375rem + (100vw - 375px) * 131.8 / 615, 17.6125rem);   /* 150→281.8 */
    }
  }

  /* З 640 — дві колонки */
  @media (min-width: 640px) and (max-width: 990.98px) {
    .insta { grid-template-columns: 1fr 1fr; }
    .insta__pane--media { min-height: clamp(20rem, 20rem + (100vw - 640px) * 160 / 350, 30rem); }   /* 320→480 */
  }

  @media (min-width: 991px) {
    .insta__pane--text .insta__title + * { margin-top: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }    .insta { margin-top: 0; grid-template-columns: 1fr 1fr; }    .insta__lead { max-width: 25rem; }
    .insta__pane--media { min-height: clamp(30rem, 30rem + (100vw - 991px) * 276 / 909, 47.25rem); }   /* 480→756 */
    .insta__phone-wrap {
      left: calc(50% - clamp(0px, (100vw - 991px) * 24 / 909, 1.5rem));      width: clamp(17.6125rem, 17.6125rem + (100vw - 991px) * 178.2 / 909, 28.75rem);           /* 281.8→460 */
    }
  }

  /* Від 1920 контент фіксований, тягнеться лише фон */
  @media (min-width: 1920px) {
    .insta   { margin-top: 0; }    .insta__pane--media { min-height: 47.25rem; }
    .insta__phone-wrap {
      left: 14.125rem;      transform: none;
      width: 28.75rem;                     /* 460 = 498 × 0.924 */
    }
  }

  /* ⚠️ Телефон висувається з-під нижнього краю панелі (`overflow: clip`); позицію тримає обгортка, тож transform вільний. */
  html.js-reveal [data-reveal="phone"].is-in {
    animation: rv-phone 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  @keyframes rv-phone {
    from { opacity: 1; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

/* --- 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-index --- */
/* INDEX / ГОЛОВНА — посторінковий CSS (споживає токени `main.css :root`). */
@layer page {

  /* Спільне для сторінки */
  .home {
    overflow-x: clip;    --tear-overhang: clamp(20px, 20px + (100vw - 375px) * 34 / 616, 54px);   /* 20@375 → 54@991 */
  }
  @media (min-width: 991px) {
    .home { --tear-overhang: clamp(54px, 54px + (100vw - 991px) * 51 / 909, 105px); }   /* 54@991 → 105@1920 */
  }

  .wrap { width: var(--container); margin-inline: auto; }

  .hh { position: relative; display: grid; isolation: isolate; }
  .hh__photos {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 1fr;    min-height: 27.5rem;  }
  .hh__photo {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .hh__photo--right { display: none; }
  .hh::after {
    content: "";
    grid-area: 1 / 1;
    z-index: 1;
    background: linear-gradient(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.30));
    pointer-events: none;
  }

  .hh__content {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--gap-xs);    width: var(--container);
    padding-block: var(--gap-xl);    color: var(--color-cream);
  }
  .hh__title {
    margin: 0;
    font-size: var(--fs-h1);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    text-shadow: 0 0.0625rem 1.5rem rgb(0 0 0 / 0.28);  }
  .hh__text {
    max-width: 34rem;    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-shadow: 0 0.0625rem 1rem rgb(0 0 0 / 0.28);
  }
  .hh__cta { margin-top: var(--gap-3xs); }
  /* ДВА ФОТО з 693 */
  @media (min-width: 693px) {
    .hh__photos { grid-template-columns: 1fr 1fr; min-height: 43.75rem; }  /* 700 */
    .hh__photo--right { display: block; }
    .hh__photo--left  { grid-area: 1 / 1; }
    .hh__photo--right { grid-area: 1 / 2; }
  }

  .founder {
    margin-top: var(--rhythm-edge);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-xl);  }
  .founder__cell--text-b  { order: 3; }
  .founder__cell--photo-b { order: 4; }
  .founder__title {
    margin: 0 0 clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem);    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .founder__text > p { margin: 0; }
  .founder__text > p + p { margin-top: var(--gap-xs); }  .founder__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
  }
  .founder__photo { position: relative; margin: 0; }
  .founder__photo > img:not(.founder__decor) {    display: block;
    width: 100%; height: auto;
    border-radius: 1.25rem;  }
  .founder__decor { display: none; position: absolute; z-index: 2; height: auto; pointer-events: none; }
  .founder__flower { left: -6%;  bottom: 13%;  width: 21%; }  .founder__holder { left: -24%; bottom: 2%;   width: 27%; z-index: 3; }  .founder__heart  { left: -11%; top: -6%;     width: 24%; }  .founder__patch  { right: -16%; bottom: -5%; width: 47%; }
  @media (max-width: 667.98px) {
    .founder__decor { display: block; }
    .founder__holder { right: 15%;  top: -10%;  bottom: auto; left: auto; width: 15.75%; z-index: 3;
                       transform: rotate(90deg) scaleY(-1); }
    .founder__flower { right: 7%;   top: -9%;   bottom: auto; left: auto; width: 11.25%; z-index: 2;
                       transform: rotate(90deg) scaleX(-1); }
    .founder__heart  { left: -4%;  top: -4%;             width: 22%; }
    .founder__patch  { right: -6%; bottom: -3%;          width: 34%; }
  }

  /* ДВІ КОЛОНКИ засновниці: дно = 668 */
  @media (min-width: 668px) {
    .founder {
      grid-template-columns: 1fr 1fr;
      gap: var(--gap-xl);
      align-items: start;
    }
    .founder__cell--photo-a { grid-column: 2; grid-row: 1; }
    .founder__cell--text-a  { grid-column: 1; grid-row: 1; align-self: start; }
    .founder__cell--photo-b { grid-column: 1; grid-row: 2; order: 0; }
    .founder__cell--text-b  { grid-column: 2; grid-row: 2; order: 0; align-self: start; }    .founder__decor { display: block; }
    .founder__photo--a { max-width: 38.125rem; margin-inline: auto 0; }    .founder__photo--b { max-width: 37.8125rem; margin-inline: 0 auto; }  }

  @media (min-width: 668px) and (max-width: 990.98px) {
    .founder__holder { left: -1.875rem; }  }

  /* Відгуки */
  .reviews {
    background: var(--color-bg-warm);
    padding-top: var(--rhythm-edge);
    padding-bottom: calc(var(--rhythm-edge) / 2);
  }
  .reviews__stage {
    max-width: calc(100% - 2 * var(--gutter));
    margin-inline: auto;
  }
  @media (min-width: 1280px) {
    .reviews__stage {
      width: auto;
      max-width: none;
      margin-left: max(var(--gutter), (100% - var(--container)) / 2);
      margin-right: 0;
    }
  }
  /* ⚠️ Зайва закривальна дужка тут мовчки обірвала б `@layer page`, і весь CSS нижче став би нешарованим. */
  .reviews__title {
    margin: 0;
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .reviews__widget {
    margin-top: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem);  }
  .reviews__fallback {
    margin: 0;
    padding: var(--gap-xl);
    text-align: center;
    font-size: var(--fs-body);
    color: var(--color-text-muted);
  }

  /* 6) INSTA — смуга «Слідкуйте за нами в Instagram». */

  .paper-tear {
    position: relative;
    z-index: 2;    width: 100%;
    height: clamp(38px, 38px + (100vw - 375px) * 63 / 616, 101px);   /* 38@375 -> 101@991 */
    margin-bottom: calc(-1 * var(--tear-overhang));
    background: linear-gradient(var(--color-bg-warm) 0 46.4286%, transparent 46.4286%);
  }
  .paper-tear img { position: absolute; height: auto; }
  .paper-tear__p1 { left: -0.3125%;  top: 0%;       width: 14.0104%; }
  .paper-tear__p2 { left: 12.4479%;  top: 8.6735%;  width: 13.3854%; }
  .paper-tear__p3 { left: 24.7396%;  top: 6.6327%;  width: 13.3854%; }
  .paper-tear__p4 { left: 36.9271%;  top: 4.0816%;  width: 14.0104%; }
  .paper-tear__p5 { left: 48.8021%;  top: 6.6327%;  width: 14.0104%; }
  .paper-tear__p6 { left: 61.6146%;  top: 15.3061%; width: 13.3854%; }
  .paper-tear__p7 { left: 74.1667%;  top: 17.8571%; width: 13.3854%; }
  .paper-tear__p8 { left: 86.3542%;  top: 15.3061%; width: 14.0104%; }

  .blog {
    margin-top: 0;    background: var(--color-brand);    padding-block: clamp(2.5rem, 2.5rem + (100vw - 375px) * 20 / 615, 3.75rem);
    overflow-x: clip;  }
  .blog__stage {
    position: relative;
    display: block;
    width: clamp(41.125rem, 41.125rem + (100vw - 375px) * 252 / 615, 56.875rem);
    margin-inline: auto;
    left: clamp(0px, 1.25rem - (100vw - 375px) * 20 / 615, 1.25rem);   /* +20@375 → 0@990 */
    aspect-ratio: 2520 / 1778;  }
  .blog__book { display: block; position: absolute; inset: 0; width: 100%; height: auto; z-index: 1; }
  .blog__stage {
    --blog-photo-left:  clamp(15.0625rem, 15.0625rem + (100vw - 375px) * 383 / 615, 39rem);
    --blog-photo-top:   clamp(-0.1875rem, -0.1875rem + (100vw - 375px) * 35 / 615, 2rem);   /* −3→32 */
    --blog-photo-width: clamp(8.3125rem, 8.3125rem + (100vw - 375px) * 231 / 615, 22.75rem); /* 133→364 */
  }
  .blog__photo {
    display: block; position: absolute; z-index: 3; height: auto;
    left:  var(--blog-photo-left);
    top:   var(--blog-photo-top);
    width: var(--blog-photo-width);
  }
  .blog__bouquet {
    display: block; position: absolute; z-index: 4; height: auto;
    left:  calc(var(--blog-photo-left)  - var(--blog-photo-width) * 0.0875);
    top:   calc(var(--blog-photo-top)   - var(--blog-photo-width) * 0.08824);
    width: calc(var(--blog-photo-width) * 0.3504);
  }
  .blog__tulips {
    display: block; position: absolute; z-index: 3; height: auto;
    left:  clamp(-1.625rem, 1.25rem - (100vw - 375px) * 46 / 615, 1.25rem);    top:   clamp(20.9375rem, 20.9375rem + (100vw - 375px) * 102 / 615, 27.3125rem);    width: clamp(5.375rem, 5.375rem + (100vw - 375px) * 51 / 615, 8.5625rem);         /* 86→137 */
  }
  .blog__envelope, .blog__doily { display: none; }
  .blog__arrow {
    display: block; position: absolute; z-index: 3; height: auto;
    top: 60%;
    width: 5.2%;
  }
  @media (max-width: 639.98px) {
    .blog__arrow { left: clamp(3.1rem, 3.1rem + (100vw - 375px) * 21.3 / 264, 4.43125rem); }   /* 49.6 → 70.9 */
  }
  @media (min-width: 640px) {
    .blog__arrow { left: clamp(1.66875rem, 1.66875rem + (100vw - 640px) * 28.5 / 350, 3.45rem); }   /* 26.7 → 55.2 */
  }
  .blog__content {
    position: absolute; z-index: 4;
    left:  calc(25% - clamp(12.4375rem, 12.4375rem + (100vw - 375px) * 74 / 615, 17.0625rem) / 2);
    top:   clamp(8.5625rem, 8.5625rem + (100vw - 375px) * 88 / 615, 14.0625rem);     /* 137→225 */
    width: clamp(12.4375rem, 12.4375rem + (100vw - 375px) * 74 / 615, 17.0625rem);                                                                 /* 199→273 */
    display: flex; flex-direction: column;
    align-items: flex-start; text-align: left;
    color: var(--color-text);
  }
  .blog__content > * + * { margin-top: var(--gap-xs); }  .blog__content .blog__title + * { margin-top: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 605, 2.5rem); }  .blog__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: var(--lh-heading); }
  .blog__lead {
    margin: 0; align-self: center; text-align: center;
    max-width: clamp(12.4375rem, 6.768375rem + 24.188312vw, 21.75rem);
    font-size: var(--fs-body); line-height: var(--lh-body);
  }
  .blog__cta {
    align-self: center;
  }

  .logo-strip { --strip-bg: var(--color-brand-sage); margin-top: 0; }
  .faq { position: relative; margin-top: var(--rhythm-edge); margin-bottom: var(--rhythm-edge); }
  .faq__heart {
    display: block; position: absolute; z-index: 0;
    top: 0;
    right: calc(-1 * var(--gutter));
    width: 6.5625rem;    height: auto;
    pointer-events: none;
  }
  @media (max-width: 990.98px) {
    .faq__heart {
      top:   clamp(-1.5625rem, -1.5625rem + (100vw - 375px) * 60 / 615, 2.1875rem);   /* −25→35 */
      right: clamp(-1.25rem, -1.25rem + (100vw - 375px) * 4 / 615, -1rem);      width: clamp(5rem, 5rem + (100vw - 375px) * 25 / 615, 6.5625rem);               /* 80→105 */
    }
  }

  /* STORY — той самий блок, що на сторінці товару */
  .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.875rem + (100vw - 375px) * 10 / 605, 2.5rem);    text-align: center;
  }
  /* STORY ≤990.98 — мобільний блок як на картці товару */
  @media (max-width: 990.98px) {

    .story__stage {
      height: clamp(35.4375rem, 35.4375rem + (100vw - 375px) * 73 / 264, 40rem);      --paper-reserve: clamp(3.74375rem, 4.60625rem - (100vw - 375px) * 13.8 / 615, 4.60625rem);   /* 73.7@375 → 59.9@990 */
    }
    @media (max-width: 374.98px) {
      .story__stage { height: clamp(35.4375rem, 35.4375rem + (375px - 100vw) * 33 / 55, 37.5rem); }   /* 567@375 → 600@320 */
    }
    @media (min-width: 640px) {
      .story__stage { height: clamp(40rem, 40rem + (100vw - 640px) * 21 / 350, 41.3125rem); }   /* 640@640 → 661@990 */
    }

    @media (max-width: 639.98px) {
      .story__paper--land { display: none; }
      .story__paper--port { display: block; }
      .story__stage {
        --paper-w: min(clamp(25.1875rem, 18.351563rem + 29.166667vw, 30rem), 100% - 2.5rem);  /* ≤403→480 */
        --paper-top: clamp(4.025rem, 5rem - (100vw - 375px) * 15.6 / 264, 5rem);              /* 80→64.4 */
        --paper-pad: 2.125rem;      }
      .story__paper,
      .story__text { aspect-ratio: 403 / 480; height: auto; }
    }
    @media (min-width: 640px) {
      .story__stage {
        --paper-w: min(clamp(46.25rem, 47.4875rem - 2vw, 46.6875rem), 100% - 2.5rem);   /* ≤747→740 */
        --paper-h: clamp(33.821875rem, 39.232562rem - 8.742857vw, 35.734375rem);        /* 571.7→541.1 */
        --paper-top: clamp(3.75rem, 4.510188rem - 1.228571vw, 4.01875rem);              /* 64.3→60 */
        --paper-pad: 2.5rem;      }
      .story__paper,
      .story__text { height: var(--paper-h); aspect-ratio: auto; }
    }

    .story__paper { width: var(--paper-w); top: var(--paper-top); }

    .story__text {
      top: var(--paper-top);
      width: var(--paper-w);
      max-width: none;
      padding-inline: var(--paper-pad);
      justify-content: center;
      transform: translateX(-50%);
    }

    .story__note {
      top: var(--paper-top);      left: auto;
      right: clamp(1.25rem, 1.25rem + (100vw - 375px) * 17.5 / 615, 2.34375rem);   /* 20→37.5 */
      width: clamp(7.0625rem, 7.0625rem + (100vw - 375px) * 137 / 615, 15.625rem); /* 113→250 */
    }

    .story__polaroid {
      display: block;
      position: absolute;
      top: auto;
      bottom: clamp(0px, (100vw - 375px) * 15 / 615, 0.9375rem);   /* 0@375 → 15@990 */
      left: 0;      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;
    }
    /* Кластер і кулон на ≤480 */
    @media (max-width: 639.98px) {
      .story__ultrasound { width: 80%; }
    }
    @media (max-width: 374.98px) {
      .story__polaroid { width: clamp(5.625rem, 6.875rem - (375px - 100vw) * 20 / 55, 6.875rem); }   /* 110@375 → 90@320 */
    }
    .story__note { top: calc(var(--paper-top) - clamp(0px, 2.5rem - (100vw - 480px) * 40 / 160, 2.5rem)); }

    @media (max-width: 390px) {
      .story__paper,
      .story__text {
        aspect-ratio: auto;
        height: calc(100% - var(--paper-top) - 73.7px);
      }
    }

    /* Стеля висоти аркуша */
    @media (min-width: 391px) {
      .story__stage { --paper-cap: calc(490px - (100vw - 391px) * 50 / 377); }   /* 490@391 → 440@768 */
    }
    @media (min-width: 768px) {
      .story__stage { --paper-cap: calc(440px + (100vw - 768px) * 101 / 222); }    }
    @media (min-width: 391px) and (max-width: 639.98px) {
      .story__stage {
        --paper-h-real: min(min(clamp(25.1875rem, 18.351563rem + 29.166667vw, 30rem), 100vw - 2.5rem) * 1.191067, var(--paper-cap));
        height: calc(var(--paper-top) + var(--paper-h-real) + var(--paper-reserve));
      }
      .story__paper,
      .story__text { aspect-ratio: auto; height: var(--paper-h-real); }
    }
    @media (min-width: 640px) {
      .story__stage {
        --paper-h-real: min(var(--paper-h), var(--paper-cap));
        height: calc(var(--paper-top) + var(--paper-h-real) + var(--paper-reserve));
      }
      .story__paper,
      .story__text { height: var(--paper-h-real); }
    }
  }
  /* @media 991 (планшет) */
  @media (min-width: 991px) {
    .hh__content { padding-block: clamp(2.5rem, 2.5rem + (100vw - 991px) * 60 / 909, 6.25rem); }    .founder__title   { margin-bottom: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }
    .blog__content .blog__title + * { margin-top: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }    .faq__sub         { margin-top: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }    .reviews__widget  { margin-top: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }
    .paper-tear { height: clamp(101px, 101px + (100vw - 991px) * 95 / 909, 196px); }

    .blog { margin-top: 0; padding-block: 3.75rem; }    .blog__stage {
      display: block;
      width: var(--container);
      margin-inline: auto;
      left: 0;      max-width: 82.5rem;      aspect-ratio: 2520 / 1778;    }
    .blog__book { display: block; position: absolute; inset: 0; width: 100%; height: auto; z-index: 1; }
    .blog__content {
      position: absolute; z-index: 4;
      left: 10%; top: 35%; width: 30%;      align-items: flex-start; text-align: left;
      color: var(--color-text);
    }
    .blog__lead { align-self: center; text-align: center; color: var(--color-text);
                  max-width: clamp(21.75rem, 19.683188rem + 3.336922vw, 23.6875rem); }   /* 348→379 */
    .blog__cta  { align-self: center; }
    .blog__arrow { display: none; position: absolute; z-index: 3; left: 10.5%; top: 57%; width: 4.05%; height: auto; }
    /* ⚠️ Букет приклеєний до кутика фото, тож обидва рахуються в одній системі координат (rem-крива); rem поруч із % сцени збігались би лише на одній ширині. */
    .blog__stage {
      --blog-photo-left:  clamp(39rem, 39rem + (100vw - 991px) * 326.4 / 909, 59.4rem);
      --blog-photo-width: clamp(22.75rem, 22.75rem + (100vw - 991px) * 203.6 / 909, 35.475rem); /* 364→567.6 */
      --blog-photo-top:   5%;
    }
    .blog__photo {
      display: block; position: absolute; z-index: 3; height: auto;
      top:   var(--blog-photo-top);
      left:  var(--blog-photo-left);
      width: var(--blog-photo-width);
    }
    /* ⚠️ Конверт лежить на сторінці нотатника, тож позиція — у частках сцени; доданок гасне до нуля на 1900. */
    .blog__envelope {
      display: block; position: absolute; z-index: 3; top: 60%; height: auto;
      left:  calc(82% + clamp(0px, 1.31125rem - (100vw - 991px) * 20.98 / 909, 1.31125rem));
      width: calc(30% - clamp(0px, 2.26875rem - (100vw - 991px) * 36.3 / 909, 2.26875rem));
    }
    .blog__tulips   { display: block; position: absolute; z-index: 3; left: -2.89%; top: 68%; width: 15%; height: auto; }
    .blog__bouquet  {
      display: block; position: absolute; z-index: 4; height: auto; top: 0%;
      left:  clamp(37.009375rem, 37.009375rem + (100vw - 991px) * 331.85 / 909, 57.75rem);
      width: clamp(7.97125rem, 7.97125rem + (100vw - 991px) * 57.26 / 909, 11.55rem);
    }
    .blog__doily    { position: absolute; z-index: 0; left: -15%; top: 60%; width: 25%; height: auto;
                      transform: rotate(180deg); }
    .logo-strip { margin-top: 0; }    /* Ширина блока FAQ — крива, а не пін */
    .faq { width: min(82.5rem, var(--container)); }
    /* Серце сповзає до першого питання рампом */
    .faq__heart {
      top: clamp(2.1875rem, 2.1875rem + (100vw - 991px) * 245 / 909, 17.5rem);   /* 35→280 */
      right: clamp(-7rem, 5.540951rem - 10.560528vw, -1rem);
    }

    .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 { height: clamp(41.3125rem, 17.577500rem + 38.320775vw, 63.5625rem); max-width: 120rem; margin-inline: auto; }  /* 661→1017 */
    .story__paper {
      top: clamp(3.75rem, 0.016250rem + 6.027988vw, 7.25rem);               /* 60→116 */
      width: clamp(46.25rem, 31.115625rem + 24.434876vw, 60.4375rem);      /* 740→967 */
      height: clamp(33.82125rem, 20.555623rem + 21.418085vw, 46.2575rem);  /* 541.1→740.1 */
      left: calc(50% + clamp(0px, (100vw - 991px) * 23 / 909, 1.4375rem));
    }
    .story__text {
      top: clamp(12.0625rem, 5.595625rem + 10.441335vw, 18.125rem);        /* 193→290 */
      width: clamp(41.25rem, 28.04925rem + 21.313240vw, 53.625rem);        /* 660→858 */
      gap: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem);    }
    .story__title { max-width: clamp(29.875rem, 10.41468rem + 31.419285vw, 48rem); }       /* 478→768 */
    .story__body { max-width: clamp(28.625rem, 37.875rem - (100vw - 991px) * 148 / 909, 37.875rem); }    /* 606→458 */
    .story__note {
      top: clamp(3.75rem, 3.75rem + (100vw - 991px) * 52 / 909, 7rem);                /* 60→112 */
      left: calc(50% + clamp(13rem, 13rem + (100vw - 991px) * 208 / 909, 26rem));      width: clamp(15.625rem, 15.625rem + (100vw - 991px) * 62.8 / 909, 19.55rem);         /* 250→312.8 */
    }
    .story__polaroid {
      display: block;
      position: absolute;
      top: clamp(27.5rem, 27.5rem + (100vw - 991px) * 88 / 909, 33rem);                 /* 440→528 */
      left: calc(50% + clamp(-44rem, -26.875rem - (100vw - 991px) * 274 / 909, -26.875rem));   /* −430→−704 */
      width: clamp(10.625rem, 10.625rem + (100vw - 991px) * 126 / 909, 18.5rem);           /* 170→296 */
    }
    .story__ultrasound { width: 100%; height: auto; display: block; }
    .story__flower {
      position: absolute;
      top:   clamp(-0.1875rem, -0.1875rem + (100vw - 991px) * 23 / 909, 1.25rem);   /* −3→20 */
      left:  clamp(4.8125rem, 4.8125rem + (100vw - 991px) * 131 / 909, 13rem);      /* 77→208 */
      width: clamp(6.875rem, 6.875rem + (100vw - 991px) * 94 / 909, 12.75rem);      /* 110→204 */
      height: auto;
    }  }

  /* ПЛАНШЕТНА СМУГА 991–1279 — власні дельти */
  @media (min-width: 668px) and (max-width: 1279.98px) {
    .founder__photo--b { max-width: 90%; }
    .founder__heart { width: 18%; }
    .founder__patch  { width: 32%; right: -6%; }
  }

  /* ДЕСКТОПНИЙ КОЛАЖ з 1280 */
  @media (min-width: 1280px) {
    .founder {
      grid-template-columns: 53.3460% 46.6540%;      column-gap: 0;
      row-gap: 0;
    }
    .founder__cell--photo-a { justify-self: end; }    .founder__cell--text-a  { max-width: 43.9375rem; }    .founder__cell--photo-b {
      justify-self: start;
      margin-left: clamp(1.85625rem, 1.85625rem + (100vw - 1280px) * 12.3 / 634, 2.625rem);   /* 29.7@1280 → 42@1920 */
      margin-top:  clamp(-4.875rem, -3.45rem - (100vw - 1280px) * 22.8 / 634, -3.45rem);    }
    .founder__cell--text-b  {
      justify-self: end;
      width: 96.0758%;      margin-top: clamp(3.09375rem, 3.09375rem + (100vw - 1280px) * 20.5 / 634, 4.375rem);    }
    /* Декор колажу: плоскі дельти смуги → РАМПИ */
    .founder__photo--b { max-width: clamp(29.3875rem, 29.3875rem + (100vw - 1280px) * 134.8 / 634, 37.8125rem); }   /* 470.2→605 */
    .founder__heart {
      left: -3.25rem;      top:  clamp(-2.9375rem, -2.18125rem - (100vw - 1280px) * 12.1 / 634, -2.18125rem);          /* −34.9→−47 */
      width: clamp(5.2875rem, 5.2875rem + (100vw - 1280px) * 60.6 / 634, 9.075rem);               /* 84.6→145.2 */
    }
    .founder__patch {
      right: clamp(-6.05rem, -1.7625rem - (100vw - 1280px) * 68.6 / 634, -1.7625rem);             /* −28.2→−96.8 */
      width: clamp(9.40625rem, 9.40625rem + (100vw - 1280px) * 133.9 / 634, 17.771875rem);        /* 150.5→284.3 */
    }

    /* Блог: десктопний склад колажу */
    .blog__arrow { display: block; }
    .blog__stage { --blog-photo-top: 4%; }
  }

  /* Серветка: власний поріг 1716, не спільний 1280 */
  @media (min-width: 1716px) {
    .blog__doily { display: block; }
  }

  /* @media 1920 (десктоп-пін) */
  @media (min-width: 1920px) {
    .hh__photos { min-height: 60.625rem; }
    .blog    { margin-top: 0; }    .logo-strip { margin-top: 0; }    .faq__heart { top: 17.5rem; }
    .story {
      margin-top: 0;
      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
      );
    }
    .story__stage { height: 63.5625rem; max-width: 120rem; margin-inline: auto; }   /* 1017 */
    .story__paper {
      top: 7.25rem;                       /* 116 */
      left: calc(50% + 1.4375rem);      width: 60.4375rem;                  /* 967 */
      height: 46.2575rem;                 /* 740.1 */
    }
    .story__text {
      top: 18.125rem;                     /* 290 */
      left: 50%;
      width: 53.625rem;                   /* 858 */
      gap: 3.125rem;    }
    .story__title { max-width: 48rem; }   /* 768 */
    .story__body { max-width: 28.625rem; }    .story__note {      top: 7rem;
      left: calc(50% + 26rem);
      width: 19.55rem;                    /* 469 × 2/3 ≈ 313 (−1/3) */
    }
    .story__polaroid {      top: 33rem;
      left: calc(50% - 44rem);
      width: 18.5rem;                     /* 296 */
    }
    .story__flower {      top: 1.25rem;
      left: 13rem;                        /* 208 */
      width: 12.75rem;                    /* 204 */
    }  }

  html.js-reveal [data-reveal="doily"].is-in {
    animation: rv-up-doily 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: calc(var(--rv-i, 0) * 0.12s);
  }
  @keyframes rv-up-doily {
    from { opacity: 0; transform: translate3d(0, 2.5rem, 0) rotate(180deg); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) rotate(180deg); }
  }
}

/* --- sense-c-reviews --- */
/* REVIEWS — картка відгуку; стрічка й стрілки — зі `slider.css`. */
@layer components {

  /* ⚠️ Тіні в картки немає: `overflow-x: auto` стрічки робить прокруткою і `overflow-y`, тож тінь різалась би по краях. */
  .reviews__list {
    /* ⚠️ Власні поля `<ul>` зсунули б початок скролу і крок стрілок. */
    margin-block: 0;
    padding-block: 0;
    margin-inline-start: 0;
    padding-inline-start: 0;
    list-style: none;
  }
  @media (min-width: 1280px) {
    .reviews__list {
      margin-inline-end: 0;
    }
  }

  .review {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xs);
    flex: 0 0 min(clamp(18.75rem, 11.14875rem + 32.432432vw, 22.5rem), 100%);   /* 300@375 → 360@560 */
    padding-block: clamp(1.875rem, 1.106500rem + 3.278689vw, 3.125rem);   /* 30→50 */
    padding-inline: clamp(1.5625rem, 0.986169rem + 2.459016vw, 2.5rem);   /* 25→40 */
    border-radius: var(--radius-card);
    /* ⚠️ Картку від фону відділяє теплий беж секції (`index.css`): міняти обидва фони разом, інакше картка зникне. */
    background: var(--color-cream);
  }
  @media (min-width: 640px) {
    .review { flex-basis: 22.5rem; }  }
  @media (min-width: 1280px) {
    .review { flex-basis: 24.375rem; }  }

  .review__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: var(--gap-2xs);
  }

  .review__avatar {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    object-fit: cover;
  }
  .review__avatar--letter {
    display: grid;
    place-items: center;
    background: var(--color-brand);
    color: var(--color-cream);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: 1;
  }

  .review__who { min-width: 0; }
  .review__author {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    overflow-wrap: anywhere;
  }

  .review__rating {
    margin: 0;
    font-size: var(--fs-body);
    line-height: 1;
    color: var(--color-star);
  }

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

  .review__google {
    display: grid;
    place-items: center;
    /* ціль 24×24 (2.5.8) */
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
  }
  .review__google svg { display: block; width: 100%; height: auto; }
  .review__google:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 3px;
  }

  .review__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;    overflow: hidden;
  }
  .review.is-open .review__text {
    -webkit-line-clamp: none;
    display: block;
    overflow: visible;
  }
  .review__text p { margin: 0 0 0.5em; }
  .review__text p:last-child { margin-bottom: 0; }

  .review__more {
    align-self: start;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    font-family: var(--font-main);
    font-size: var(--fs-ui);
    line-height: var(--lh-ui);
    text-decoration: underline;
    cursor: pointer;
  }
  .review__more:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
  }

  .reviews__cta {
    display: flex;
    justify-content: center;
    margin: 3.125rem 0 0;  }
}

/* --- 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; }
}