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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer components {

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}

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

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

/* --- sense-c-page-hero --- */

@layer components {

  .page-hero {
    position: relative;
    isolation: isolate;  }

  .page-hero__photo {
    display: block;
    width: 100%;
    height: clamp(21.8876953rem, 22.6875rem - (100vw - 375px) * 12.796875 / 615, 22.6875rem);
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  .page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--color-text) 20%, transparent);
    pointer-events: none;
  }

  .page-hero__inner {
    position: absolute;
    inset: 0;
    z-index: 1;    margin-inline: var(--edge);    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 1.25rem;    pointer-events: none;  }

  .page-hero__crumbs {
    position: absolute;
    left: 0;
    top: 1.25rem;    pointer-events: auto;
  }
  .page-hero__crumbs .breadcrumbs__item,
  .page-hero__crumbs .breadcrumbs__sep,
  .page-hero__crumbs .breadcrumbs__link { color: var(--color-cream); }

  .page-hero__text {
    margin-block: auto;
    align-self: stretch;
    text-align: center;
    color: var(--color-cream);
  }
  .page-hero__title {
    margin: 0;
    font-size: var(--fs-h1);               /* 30 / 45 / 70 */
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .page-hero__lead {
    margin: 0.9375rem auto 0;
    max-width: 31rem;                      /* 496 */
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  @media (min-width: 481px) {
    .page-hero__lead { margin-top: 1.5625rem; }   /* 25 */
  }

  @media (min-width: 991px) {
    .page-hero__photo {
      height: clamp(21.8876953rem, 21.8876953rem + (100vw - 991px) * 27.13 / 289, 23.583125rem);
      aspect-ratio: auto;
    }
  }

  @media (min-width: 1280px) {
    .page-hero__photo { height: auto; aspect-ratio: 1920 / 566; }
  }
}

/* --- sense-c-contact-circles --- */
/* CONTACT-CIRCLES — кола каналів звʼязку; гліф інлайновий, колір веде CSS. */

@layer components {

  .contact-circle {
    display: grid;
    place-items: center;
    --circle-size: 5.625rem;    width: var(--circle-size);
    aspect-ratio: 1;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-brand-sage);
    color: var(--color-bg-warm);
    text-decoration: none;
    touch-action: manipulation;    transition: background-color var(--transition), color var(--transition);
  }

  .contact-circle svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .contact-circle--cta {
    background: var(--color-brand);
    color: var(--color-cream);
    font-family: var(--font-main);
    font-size: clamp(0.8125rem, 0.8125rem + (100vw - 991px) * 2 / 289, 0.9375rem);   /* 13 → 15 */
    font-weight: var(--fw-bold);
    line-height: var(--lh-ui);
    text-transform: uppercase;
    cursor: pointer;
  }

  /* Ряд із CTA-колом: спільна вісь */
  :where(li, div):has(> .contact-circle),
  .contact-circle { align-self: center; }

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

  @media (max-width: 359.98px) {
    .contact-circle {
      --circle-size: clamp(4.875rem, 4.875rem + (100vw - 320px) * 12 / 40, 5.625rem);   /* 78 → 90 */
    }
    .contact-circle--cta {
      font-size: clamp(0.6875rem, 0.6875rem + (100vw - 320px) * 2 / 40, 0.8125rem);     /* 11 → 13 */
    }
  }

  @media (min-width: 992px) {
    .contact-circle {
      --circle-size: clamp(5.625rem, 5.625rem + (100vw - 991px) * 10 / 289, 6.25rem);   /* 90 → 100 */
    }
  }

  @media (hover: hover) {
    .contact-circle:hover {
      background: var(--color-cream);
      color: var(--color-brand-sage);
    }
    .contact-circle--cta:hover { color: var(--color-brand); }
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* --- sense-dostavka --- */
/* ДОСТАВКА ТА ОПЛАТА — посторінковий шар. */

@layer page {

  /* Наскрізні змінні сторінки */
  .dostavka {
    --sub: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 615, 2.5rem);
    --lead-gap: calc(var(--fs-body) * var(--lh-body));
    --card-pad: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 615, 2.5rem);   /* 30 → 40 */
  }

  .dostavka .logo-strip { --strip-bg: var(--color-brand-sage); }

  /* СПІЛЬНА КАРТКА «заголовок + текст» */
  .info-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;    gap: var(--gap-xs);    margin: 0;
    padding: 0;
    list-style: none;
  }
  .info-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    align-content: start;
    background: var(--color-cream);
    border-radius: var(--radius-card);     /* 30 */
    padding: var(--card-pad);
  }
  .info-grid--warm .info-card { background: var(--color-bg-warm); }

  .info-card__title {
    margin: 0;
    text-wrap: balance;
    font-size: var(--fs-subhead);          /* 20 / 30 / 30 */
    font-weight: var(--fw-medium);
    line-height: var(--lh-subhead);
  }
  .info-card__text {
    margin: var(--gap-md) 0 0;    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* 3) ДОСТАВКА — теплa панель */
  .ship {
    background: var(--color-bg-warm);
    padding-block: var(--rhythm-edge);     /* 40 / 70 / 100 */
  }
  .ship__block { margin-inline: var(--edge); }
  .ship__block--world { margin-top: var(--rhythm-edge); }

  .ship__title,
  .pay__title,
  .help__title {
    margin: 0 0 var(--sub);
    text-align: center;
    font-size: var(--fs-h2);               /* 30 / 42 / 60 */
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }

  .help__lead { text-wrap: balance; }

  .ship__lead { text-wrap: pretty; }
  @media (min-width: 768px) {
    .ship__lead { text-wrap: balance; }
  }
  /* МІРА ЛІДА */
  .ship__lead {
    margin: 0 auto;
    max-width: min(100%, 41em);
    text-align: center;
  }
  .ship__lead--next { margin-top: var(--lead-gap); }

  .ship__cards {
    position: relative;
    margin-top: var(--sub);
  }
  .ship__hearts {
    position: absolute;
    z-index: 2;
    top: 0;    --hearts-w: clamp(2.5rem, 2.5rem + (100vw - 375px) * 10 / 219, 3.125rem);
    left: max(calc(var(--card-pad) - var(--hearts-w)), calc(-1 * var(--edge)));
    width: var(--hearts-w);
    height: auto;
    pointer-events: none;
  }

  .ship__cta {
    margin-top: var(--sub);
    display: flex;
    justify-content: center;
  }

  /* 5) ВАРІАНТИ ОПЛАТИ */
  .pay { padding-block: var(--rhythm-edge); }
  .pay__inner { margin-inline: var(--edge); }
  .pay__cards {
    position: relative;
    margin-top: var(--sub);
  }
  .pay__heart {
    position: absolute;
    z-index: 2;
    --heart-w: clamp(3.125rem, 3.125rem + (100vw - 375px) * 10 / 219, 3.75rem);
    right: 0;
    bottom: calc(var(--card-pad) - var(--heart-w));
    width: var(--heart-w);
    height: auto;
    pointer-events: none;
  }

  /* 6) ПОТРІБНА ДОПОМОГА */
  .help { display: grid; }

  .help__text {
    background: var(--color-bg-warm);
    display: grid;
    place-items: center;
    padding-block: var(--rhythm-edge);
    padding-inline: var(--edge);
  }
  .help__text-inner {
    max-width: clamp(19.4375rem, 19.4375rem + (100vw - 375px) * 167 / 616, 29.875rem);  /* 311 → 478 */
    text-align: center;
  }
  .help__lead {
    margin: 0 0 var(--sub);
  }
  .help__channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-xs);                    /* 20 */
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .help__media {
    background: url("https://sensebaby.com/wp-content/themes/sense/img/help-fabric-pink.png") center / cover no-repeat;
    display: grid;
    place-items: center;
    padding: var(--gutter);
  }
  .help__scene {
    position: relative;
    width: min(100%, 40rem);               /* 640 */
    aspect-ratio: 1;
  }
  .help__envelope {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .help__note {
    position: absolute;
    left: 36%;
    top: 34%;
    width: 30%;
    margin: 0;
    text-align: center;
    font-family: var(--font-accent);
    font-size: var(--fs-accent-sm);    font-weight: var(--fw-regular);
    line-height: var(--lh-accent-sm);
    color: var(--color-text);
  }
  .help__flowers {
    position: absolute;
    left: 58.5%;
    top: 42%;
    width: 21%;
    height: auto;
    rotate: 42deg;
  }

  @media (min-width: 594px) {
    .info-grid--3,
    .info-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ship__hearts {
      --hearts-w: clamp(3.125rem, 3.125rem + (100vw - 594px) * 10 / 397, 3.75rem);  /* 50 → 60 */
    }

    .pay__heart {
      --heart-w: clamp(3.75rem, 3.75rem + (100vw - 594px) * 14 / 397, 4.625rem);  /* 60 → 74 */
    }
  }

  /* 892: 2 → 3 колонки в «Доставці» */
  @media (min-width: 892px) {
    .info-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* 768: «Потрібна допомога» стає двома половинами */
  @media (min-width: 768px) {
    .help { grid-template-columns: 1fr 1fr; }

  }

  /* 991: верхні кінці ролей */
  @media (min-width: 991px) {
    .dostavka {
      --sub: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem);            /* 40 → 50 */
    }
    .help__text-inner { max-width: 29.875rem; }

    .help__media { padding: clamp(2.5rem, 2.5rem + (100vw - 991px) * 60 / 929, 6.25rem); }

    .ship__hearts {
      --hearts-w: 3.75rem;                 /* 60 */
    }

    .pay__heart {
      --heart-w: clamp(4.25rem, 4.625rem - (100vw - 991px) * 6 / 929, 4.625rem);   /* 74 → 68 */
      right: clamp(calc(var(--card-pad) - var(--heart-w)),
                   -1 * (100vw - 991px) * 80 / 289,
                   0px);
    }
  }

  /* 1280: 2 → 4 колонки в «Оплаті» */
  @media (min-width: 1280px) {
    .info-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}

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