/* --- 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-who-card --- */
/* WHO-CARD — картка «фото + назва (+ підпис)» на кремі. */

@layer components {

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

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

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

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

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

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

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

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

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

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

/* --- sense-c-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-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-about --- */
/* ABOUT — «Про SENSE». */

@layer page {

  /* 1) HERO — компонент `css/components/page-hero.css` */
  .page-hero__photo { object-position: center 30%; }

  .about-intro { margin-top: var(--rhythm-edge); }
  .about-intro__inner {
    margin-inline: var(--edge);
    position: relative;  }
  .about-intro__media { position: relative; }
  .about-intro__photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
  }
  .about-intro__flowers {
    position: absolute;
    right: -8%;
    top: -8%;
    width: 21.65%;    height: auto;
    z-index: 1;
    rotate: 9deg;
  }
  .about-intro__text {
    display: flex;
    flex-direction: column;
  }
  .about-intro__title {
    margin: 0 0 clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 615, 2.5rem);    font-size: var(--fs-h2);               /* 28 / 42 / 60 */
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .about-intro__lead {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-style: italic;  }
  .about-intro__cols {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.9375rem;                    /* 15 */
    margin-top: 0.9375rem;  }
  .about-intro__col > p {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .about-intro__col > p + p { margin-top: 0.9375rem; }  @media (min-width: 481px) and (max-width: 990.98px) {
    .about-intro__cols        { row-gap: 1.5625rem; margin-top: 1.5625rem; }   /* 25 */
    .about-intro__col > p + p { margin-top: 1.5625rem; }                       /* 25 */
  }
  .about-intro__note { font-style: italic; }

  /* 3) МІСІЯ БРЕНДУ — смуги + розворот книги */
  .about-mission {
    --stripe: clamp(2.402875rem, 2.112634rem + 1.238361vw, 2.875rem);   /* 38.4→46 */
    margin-top: var(--rhythm-edge);
    padding-block: var(--rhythm-edge);    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: clip;
  }
  .about-mission__stage {
    position: relative;
    isolation: isolate;
    --sheet: clamp(41.125rem, 41.125rem + (100vw - 375px) * 17.76 / 392, 42.235rem);   /* 658@375 → 675.76@767 */
    width:  var(--sheet);
    height: clamp(25.621875rem, 29.015625rem - (100vw - 375px) * 54.35 / 392, 29.015625rem); /* 464.297@375 → 409.95@767 */
    max-width: none;
    margin-inline: max(var(--gutter), (100% - var(--sheet)) / 2) 0;
    aspect-ratio: auto;
  }
  .about-mission__book {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .about-mission__polaroid,
  .about-mission__heart,
  .about-mission__bow,
  .about-mission__doily { position: absolute; height: auto; }
  .about-mission__title,
  .about-mission__text { position: absolute; margin: 0; }
  .about-mission__title {
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .about-mission__text {
    font-size: var(--fs-subhead);
    line-height: var(--lh-subhead);
    font-weight: var(--fw-medium);
    text-align: center;
  }

  .about-values {
    margin-top: 0;
    background: var(--color-bg-warm);
    padding-block: var(--rhythm-edge);
  }
  .about-values__inner { margin-inline: var(--edge); }
  .about-values__title {
    margin: 0 0 clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 615, 2.5rem);
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .about-values__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .about-values__card {
    width: auto;
    max-width: none;
    position: relative;
    padding-block: 3.75rem;                /* 60 */
    padding-inline: 1.5625rem;  }
  .about-values__heart { display: none; }
  .about-values__label {
    display: block;
    color: var(--color-brand);
  }

  /* 5) ОСОБИСТИЙ АКЦЕНТ — клітинка + скалоп-папір */
  .about-accent {
    margin-top: 0;    padding-block: var(--rhythm-edge);
    background: var(--color-cream) url("https://sensebaby.com/wp-content/themes/sense/img/gingham-bg-seamless.png") center center / auto repeat;
    overflow-x: clip;
  }
  .about-accent__stage {
    position: relative;
    max-width: 120rem;
    margin-inline: auto;
    padding-block: 0;
  }
  .about-accent__paper {
    display: block;
    width: 50.36%;                         /* 967/1920 */
    aspect-ratio: 561.415 / 439.299;    height: auto;
    margin-inline: auto;
    fill: var(--color-cream);
  }
  .about-accent__paper--port { display: none; }
  .about-accent__photo,
  .about-accent__bow,
  .about-accent__letter { position: absolute; height: auto; }
  .about-accent__text {
    position: absolute;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .about-accent__title {
    margin: 0 0 clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 615, 2.5rem);
    font-size: var(--fs-h2);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
  }
  .about-accent__body {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-medium);
  }
  .about-accent__note {
    margin: clamp(1.875rem, 1.875rem + (100vw - 375px) * 10 / 615, 2.5rem) 0 0;
    font-family: var(--font-accent);    font-size: var(--fs-accent-sm);    font-weight: var(--fw-regular);
    line-height: 0.9;
  }

  .about .catalog { margin-bottom: var(--rhythm-edge); }

  /* МОБІЛЬНА КОМПОЗИЦІЯ (≤990.98) */
  @media (max-width: 990.98px) {

    @media (max-width: 639.98px) {
      .about-intro__media { margin-bottom: var(--gap-xl); }               /* 40 */
      .about-intro__flowers {
        right: clamp(-0.41875rem, -0.41875rem + (100vw - 375px) * 6.7 / 264, 0rem);
        top: 0%;
        width: 26%;
      }
    }

    @media (max-width: 767.98px) {
      .about-mission__polaroid { left: 41.75%; top: -5.91%; width: 15%; }      .about-mission__heart    { left: 29%;    top:  1%;    width: 16%; }      .about-mission__title    { left:  5.88%; top: 29.57%; width: 37.86%; text-align: center; }
      .about-mission__text {
        left:  min(5.88%, calc(5.88% - (100vw - 375px) * 0.041));
        width: max(37.86%, calc(37.86% + (100vw - 375px) * 0.1061));
        top:   min(43.55%, calc(43.55% - (100vw - 375px) * 0.0265));
      }
      .about-mission__doily    { left: -17px;  top: 72.89%; width: 18.63%; z-index: auto; rotate: none; }
      .about-mission__bow      { left:  0.22%; top: 77.96%; width: 11.38%; }
    }

    .about-values__card {
      width: min(clamp(16.5625rem, 16.5625rem + (100vw - 375px) * 47 / 445, 19.5rem), 100% - 4.6875rem);  /* 265@375 → 312@820 */
      max-width: none;
      padding-block: clamp(1.875rem, 1.875rem + (100vw - 375px) * 30 / 615, 3.75rem);   /* 30→60 */
      padding-inline: 1.5625rem;           /* 25 */
    }
    @media (min-width: 820px) {
      .about-values__card {
        width: min(clamp(19.5rem, 19.5rem + (100vw - 820px) * 69 / 170, 23.8125rem), 100% - 4.6875rem);
      }
    }

    .about-accent__paper       { width: var(--container); }               /* 335 */
    /* ФОРМА РАМКИ: портрет ≤639.98, альбом з 640 */
    @media (max-width: 639.98px) {
      .about-accent__paper--land { display: none; }
      .about-accent__paper--port { display: block; aspect-ratio: 439.299 / 561.415; }
    }
    @media (min-width: 640px) {
      .about-accent__paper--port { display: none; }
      .about-accent__paper--land {
        display: block;
        height: clamp(28.5rem, 28.5rem + (100vw - 640px) * 143.4 / 350, 37.4625rem);
        aspect-ratio: auto;
      }
    }
    @media (max-width: 639.98px) {
      .about-accent__photo { display: none; }
    }

    .about-accent__text   { top: 50%; translate: 0 -50%; }
    @media (max-width: 639.98px) {
      .about-accent__bow    { left: 4%;    top:  85%;   width: 20%; }
      .about-accent__letter { left: 67.5%; top: -12.4%; width: 47.85%; }      /* НИЖЧЕ ЯКОРЯ 375 (320 · 360) */
      @media (max-width: 374.98px) {
        .about-accent__letter { top: clamp(-5.3125rem, -3.31875rem - (375px - 100vw) * 31.9 / 55, -3.31875rem); }
        .about-accent__bow    { top: calc(85% + (375px - 100vw) * 0.35); }
        .about-accent__paper { width: clamp(18.75rem, 20.9375rem - (375px - 100vw) * 35 / 55, 20.9375rem); }
      }
    }
    .about-accent__body   { width: clamp(17.25rem, 17.25rem + (100vw - 375px) * 222 / 615, 31.125rem); }   /* 276→498 */
    .about-accent__note   { width: clamp(17.25rem, 17.25rem + (100vw - 375px) * 264 / 615, 33.75rem); }    /* 276→540 */
    @media (max-width: 374.98px) {
      .about-accent__body,
      .about-accent__note { width: clamp(14.4375rem, 17.25rem - (375px - 100vw) * 45 / 55, 17.25rem); }
    }
  }

  /* Засновниця у дві колонки — від 640 */
  @media (min-width: 640px) {
    .about-intro__inner { display: grid; align-items: start; }
  }
  @media (min-width: 640px) and (max-width: 1279.98px) {
    .about-intro__inner { grid-template-columns: 36% minmax(0, 1fr); column-gap: 1.875rem; }
    .about-intro__flowers { right: -4%; top: 82.5039%; }

    .about-accent__bow    { left:  1.56%; top: 34.24%; width: 11.10%; }
    .about-accent__letter { left: 74.19%; top: -7.17%; width: 25.03%; }
    .about-accent__photo  { left: -5%; top: 43%; width: 25%; }
  }

  /* Місія: каркас широкої композиції, від 768 */
  @media (min-width: 768px) {
    .about-mission { padding-block: 0; }
    .about-mission__stage {
      container-type: inline-size;
      width: auto; max-width: 120rem; margin-inline: auto;
      aspect-ratio: auto; padding-block: 0;
      height: min(52.96875vw, 63.5625rem);    }
    .about-mission__book  {
      position: absolute; right: auto; bottom: auto;
      height: auto; aspect-ratio: 1363 / 682;
    }
    .about-mission__bow      { left: 79%;   width: 9%; }
    .about-mission__doily    { left: 76.5%; width: 11%; z-index: -1; rotate: 90deg; }
    .about-mission__text     { translate: 0 -50%; }
  }

  @media (min-width: 640px) and (max-width: 990.98px) {
    .about-accent__photo { width: calc(30.47vw - 3.3875rem); }            /* 140.8@640 → 247.7@990 */
  }

  @media (min-width: 991px) {

    .about-intro__text  { gap: 0; }
    .about-intro__title { margin-bottom: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }
    .about-intro__cols {
      margin-top: 1.5625rem;      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto;      row-gap: 1.5625rem;                                  /* 25 */
    }
    .about-intro__col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
    .about-intro__col > p + p { margin-top: 0; }

    .about-values__list {
      display: grid;
      overflow: visible;
      scroll-snap-type: none;
      gap: var(--gap-xs);    }
    .about-values__card { width: auto; max-width: none; }
    .about-values__nav,
    .about-values__dots { display: none; }
    .about-values__title { margin-bottom: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }
    .about-values__card:first-child { overflow: visible; }
    .about-values__heart {
      display: block;
      position: absolute;
      translate: -50% 0;
      rotate: -8deg;
      height: auto;
      z-index: 1;
    }

    .about-accent__stage { padding-block: 0; }
    .about-accent__text  { top: 50%; translate: 0 -50%; }
    .about-accent__title { margin-bottom: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }    .about-accent__note  { margin-top: clamp(2.5rem, 2.5rem + (100vw - 991px) * 10 / 909, 3.125rem); }     /* 40→50 */
  }

  /* ПЛАНШЕТНА КОМПОЗИЦІЯ (991 … 1279.98) */
  @media (min-width: 991px) and (max-width: 1279.98px) {

    .about-intro__cols  { column-gap: 1.875rem; }
    .about-values__list  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-values__list  { width: 87%; margin-inline: auto;
                           column-gap: 1.875rem; }                             /* 30 */
    .about-values__heart { left: 81.2%; top: 1.75rem; width: 4.4375rem; }     /* 71 */

    .about-accent__paper  { width: var(--container); aspect-ratio: 911 / 600; }
    .about-accent__body   { width: 31.125rem; }                           /* 498 */
    .about-accent__note   { width: 33.75rem; }                            /* 540 */
  }

  /* Місія: планшетна композиція, 768…1279.98 */
  @media (min-width: 768px) and (max-width: 1279.98px) {
    .about-mission__stage    { height: min(79.313825vw, 51.1875rem); max-width: 64.54375rem; }
    .about-mission__book     { left:  6.004%; top: 19.72%; width: 87.99%;
                               aspect-ratio: 872 / 529; }                     /* 872×529 */
    .about-mission__polaroid { left: 14.08%; top: calc(19.72% + 15.2367cqw); width: 27.45%; }    .about-mission__heart    { left: 18.62%; top:  8.91%; width: 14.23%; }    .about-mission__title    { left:  8.63%; top: calc(19.72% + 8.177175cqw); width: 38.24%; text-align: center; }
    .about-mission__text     { left: 55.15%; top: calc(19.72% + 26.68945cqw); width: 37.34%; }    .about-mission__bow      { left: 87.95%; top: calc(19.72% + 47.69864cqw); }
    .about-mission__doily    { left: 85.45%; top: calc(19.72% + 45.58087cqw); }
  }

  @media (min-width: 1280px) {

    .about-intro__inner {
      grid-template-columns: 25.5rem 1fr;      column-gap: 14.5rem;    }
    .about-intro__inner::before {
      content: "";
      position: absolute;
      left: calc(25.5rem + 7.25rem);      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--color-rule);
    }
    .about-intro__lead { max-width: 37.1875rem; }  /* 595 */
    .about-intro__cols { column-gap: 4.875rem; }

    .about-mission__book { left: 14.06%; top: 13.67%; width: 70.99%; }    .about-mission__polaroid { left: 23.8%;  top: calc(13.67% + 8.014167cqw); width: 18.18%; }  /* 349 */
    .about-mission__heart    { left: 19.4%;  top: calc(13.67% + 22.845417cqw); width: 6.75%; }
    .about-mission__title    { left: 23.02%; top: calc(13.67% + 3.903802cqw); }
    .about-mission__text     { top: calc(13.67% + 17.760417cqw); }    .about-mission__bow      { top: calc(13.67% + 29.837292cqw); }
    .about-mission__doily    { top: calc(13.67% + 27.718542cqw); }
    .about-mission__text     { left: 55%;    width: 24.74%; }               /* 475 */

    .about-values__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .about-values__heart { top: -2.5rem; left: 94%; width: 5.4375rem; }

    .about-accent__photo  { left: 14.9%;  top: 16.65%; width: 15.57%; }
    .about-accent__bow    { left: 21.44%; top: 7.67%;  width: 6.47%; }
    .about-accent__letter { left: 70.26%; top: 11.6%;  width: 17.16%; }
    .about-accent__body   { width: 25.94%; }    .about-accent__note   { width: 33.54%; }  }

  @media (min-width: 1920px) {
    .about-mission__stage { height: 63.5625rem; }
  }
}

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