/** Shopify CDN: Minification failed

Line 5234:12 Expected ":"

**/
/* ═══════════════════════════════
   Velora Theme — Soft Modern Feminine Palette
   ═══════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Palette: Soft Blush + Rose (white bg, pink blocks) ── */
  --accent: #d14d6e; /* rose primary CTA */
  --accent-rgb: 209, 77, 110;
  --promo-a: #ff3d8a;
  --promo-b: #d12767;
  --promo-rgb: 255, 61, 138;
  --accent-hover: #b83a5c;
  --accent-light: #fdf2f4; /* blush */
  --accent-soft: #fbe4e8; /* rose-50 */
  --forest: #2a1f26; /* deep ink (replaces forest/plum) */
  --forest-hover: #1a1218;
  --peach: #f8d7dd; /* rose-100 (warm pink) */
  --peach-soft: #fbe4e8;
  --gold: #d14d6e;
  --sale-red: #d14d6e;

  /* backgrounds */
  --bg-white: #ffffff; /* page background — pure white */
  --bg-sand: #fdf2f4; /* blush block */
  --bg-card: #ffffff;
  --bg-benefit: #fbe4e8; /* rose-50 block */
  --bg-dark: #2a1f26; /* footer / dark surface */

  /* text */
  --text-primary: #2a1f26;
  --text-secondary: #6b5560;
  --text-light: #9b8088;
  --text-on-dark: rgba(255, 255, 255, 0.92);
  --text-on-dark-2: rgba(255, 255, 255, 0.6);

  /* misc */
  --border: rgba(42, 31, 38, 0.08);
  --border-soft: rgba(42, 31, 38, 0.12);
  --border-dark: rgba(255, 255, 255, 0.1);
  --font: "DM Sans", sans-serif;
  --font-display: "DM Sans", sans-serif;
  --max-w: 1380px;
  --r-btn: 999px; /* pill buttons */
  --r-card: 16px;
  --r-md: 12px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 2px 12px rgba(42, 31, 38, 0.05);
  --shadow-md: 0 8px 32px rgba(42, 31, 38, 0.08);
  --shadow-lg: 0 16px 48px rgba(42, 31, 38, 0.12);
}

/* ——— Мужской режим ———
   Переопределяем те же токены, что уже есть у женской версии. Отдельной темы
   и отдельных правил нет: класс men на <body> меняет восемь переменных,
   всё остальное — вёрстка, типографика, скругления — общее. */
body.men {
  --accent: #1f5fc0;
  --accent-rgb: 31, 95, 192;
  --promo-a: #2f7ae5;
  --promo-b: #1a4fa8;
  --promo-rgb: 47, 122, 229;
  --accent-hover: #174c9c;
  --accent-light: #f0f5fd;
  --accent-soft: #dde7f8;
  --gold: #1f5fc0;
  --sale-red: #1f5fc0;
  --bg-sand: #f0f5fd;
  --bg-benefit: #dde7f8;
  --bg-dark: #161d2b;
  --forest: #161d2b;
  --text-primary: #161d2b;
  --text-secondary: #536178;
  --text-light: #7d8ba6;
  --border: rgba(22, 29, 43, 0.08);
  --border-soft: rgba(22, 29, 43, 0.12);
  --shadow-sm: 0 2px 12px rgba(22, 29, 43, 0.05);
  --shadow-md: 0 8px 32px rgba(22, 29, 43, 0.08);
  --shadow-lg: 0 16px 48px rgba(22, 29, 43, 0.12);
}

/* ——— Унисекс-режим ———
   Третья витрина: тот же товар Original, но для обоих полов. Бирюза выбрана
   намеренно — она лежит между розовым и кобальтом на круге, поэтому читается
   роднёй обеим витринам, а не чужой маркой, и при этом не гендерит страницу.
   Механика та же, что у men: переопределяем токены, вёрстка общая. */
body.unisex {
  --accent: #0f6f6b;
  --accent-rgb: 15, 111, 107;
  --promo-a: #17908a;
  --promo-b: #0b5a57;
  --promo-rgb: 23, 144, 138;
  --accent-hover: #0b5a57;
  --accent-light: #eff7f6;
  --accent-soft: #d6ebe9;
  --peach: #d6ebe9;
  --peach-soft: #eff7f6;
  --gold: #0f6f6b;
  --sale-red: #0f6f6b;
  --bg-sand: #eff7f6;
  --bg-benefit: #d6ebe9;
  --bg-dark: #16232a;
  --forest: #16232a;
  --forest-hover: #0d171c;
  --text-primary: #16232a;
  --text-secondary: #4f6570;
  --text-light: #7d919b;
  --border: rgba(22, 35, 42, 0.08);
  --border-soft: rgba(22, 35, 42, 0.12);
  --shadow-sm: 0 2px 12px rgba(22, 35, 42, 0.05);
  --shadow-md: 0 8px 32px rgba(22, 35, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(22, 35, 42, 0.12);
}

/* переключатель аудитории в шапке */
.aud-switch {
  display: inline-flex;
  background: var(--accent-light);
  border-radius: var(--r-btn);
  padding: 3px;
  gap: 2px;
  flex: 0 0 auto;
}
.aud-switch a {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 15px;
  border-radius: var(--r-btn);
  color: var(--text-secondary);
  white-space: nowrap;
  transition:
    background 0.22s,
    color 0.22s;
}
.aud-switch a[aria-current="true"] {
  background: var(--accent);
  color: #fff;
}
.aud-switch a:hover:not([aria-current="true"]) {
  color: var(--text-primary);
}
.aud-switch a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* В выдвижном меню переключатель попадает под .mobile-nav a: получает
   отбивку, подчёркивание и растягивается в колонку. Здесь он — сегментный
   переключатель на всю ширину, поэтому раскладку и отступы задаём заново. */
.mobile-nav .aud-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 0.35rem;
}
.mobile-nav .aud-switch a {
  padding: 0.65rem 0;
  text-align: center;
  font-size: 0.9rem;
  border-bottom: 0;
}
.header-divider {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex: 0 0 auto;
}
.mobile-nav .aud-switch {
  margin-bottom: 0.6rem;
}
.header-lead {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 19px;
  overflow-x: clip;
}
body {
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-white);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  width: 100%;
}
@media (max-width: 600px) {
  html {
    font-size: 17.5px;
  }
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
ul {
  list-style: none;
}

/* ══════════════════════════════════════
         ANNOUNCEMENT BAR
      ══════════════════════════════════════ */
.announcement-bar {
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 9px 48px;
  position: relative;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.announcement-bar__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  transition: color 0.2s;
}
.announcement-bar__close:hover {
  color: #fff;
}

/* ══════════════════════════════════════
         HEADER
      ══════════════════════════════════════ */
.site-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 70px;
}
.header-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.header-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.header-nav a:hover {
  color: var(--accent);
}
.header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-wordmark {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-family: var(--font);
  line-height: 1;
}
.header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}
.header-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  color: var(--text-secondary);
  transition: color 0.2s;
  border-radius: 8px;
}
.header-actions button:hover {
  color: var(--accent);
  background: var(--accent-light);
}
.header-actions svg {
  display: block;
}

/* ══════════════════════════════════════
         HERO
      ══════════════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 560px;
  overflow: hidden;
}
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5rem 3rem 4.5rem 5rem;
  background: #f6f6f6;
  position: relative;
}
.hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
  letter-spacing: 0.03em;
  width: fit-content;
}
.hero__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.hero__rating .stars {
  color: var(--gold);
  letter-spacing: -1px;
}
.hero__title {
  font-size: clamp(2.6rem, 4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}
.hero__sub {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 380px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.9rem 1.85rem;
  border-radius: var(--r-btn);
  border: none;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  width: fit-content;
  letter-spacing: 0.01em;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
}
.hero__offer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent, var(--accent));
  letter-spacing: 0.01em;
}
.hero__offer-flower {
  font-size: 0.95rem;
}
.hero__image {
  position: relative;
  overflow: hidden;
  background: #f6f6f6;
}
.hero__image img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: top;
  display: block;
}

/* ══════════════════════════════════════
         CLINICIANS' CHOICE
      ══════════════════════════════════════ */
.clinicians {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}
.clinicians__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  letter-spacing: 0.01em;
}
.clinicians__brace {
  font-family: var(--font);
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--text-light);
  line-height: 1;
}
.clinicians__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.clinicians__avatars {
  display: flex;
  align-items: center;
}
.clinicians__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.clinicians__avatar + .clinicians__avatar {
  margin-left: -8px;
}
.clinicians__text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.clinicians__text a {
  text-decoration: underline;
  color: var(--text-secondary);
}

/* ══════════════════════════════════════
         SECTION WRAPPERS
      ══════════════════════════════════════ */
.section {
  /* Full-bleed background, content inside max-width column */
  width: 100%;
  padding: 2rem 2rem;
  display: grid;
  grid-template-columns: 1fr min(var(--max-w), 100%) 1fr;
}
.section > * {
  grid-column: 2;
}
.section > .full-bleed {
  grid-column: 1 / -1;
}
.section--sand {
  background: var(--bg-sand);
}
.section__heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.section__subheading {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.section__eyebrow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* ══════════════════════════════════════
         PRODUCT GRID
      ══════════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 1.5rem;
  justify-content: center;
}
.featured-collection .product-grid {
  max-width: 1200px;
  margin: 0 auto;
}
.product-card {
  cursor: pointer;
  transition: transform 0.25s;
}
.product-card:hover {
  transform: translateY(-5px);
}
.product-card__image {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 9/10;
  background: #f0ece6;
  margin-bottom: 1rem;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s;
}
.product-card:hover .product-card__image {
  box-shadow: var(--shadow-md);
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.product-card:hover .product-card__image img {
  transform: scale(1.04);
}
.product-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 1;
}
.badge--sale {
  background: var(--sale-red);
  color: #fff;
}
.badge--limited {
  background: var(--accent);
  color: #fff;
}
.badge--new {
  background: var(--text-primary);
  color: #fff;
}
.product-card__name {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}
.product-card__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.price-sale {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}
.price-regular {
  font-size: 0.8125rem;
  color: var(--text-light);
  text-decoration: line-through;
}
.product-card__rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
}
.stars-small {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: -0.5px;
}
.review-count {
  font-size: 0.75rem;
  color: var(--text-light);
}
.product-card__swatches {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
.swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.swatch:hover {
  box-shadow: 0 0 0 2.5px var(--accent);
  transform: scale(1.15);
}
.color-swatches {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.color-swatches .swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.color-swatches .swatch.selected {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--accent);
}
.swatch-more {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ══════════════════════════════════════
         REVIEWS CAROUSEL
      ══════════════════════════════════════ */
.reviews-carousel-section {
  background: var(--bg-sand);
  padding: 4rem 0;
  overflow: hidden;
}
.reviews-carousel-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}
.reviews-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-right: 3.5rem;
}
.reviews-carousel__track::-webkit-scrollbar {
  display: none;
}
.review-card {
  flex: 0 0 calc(20% - 1rem);
  min-width: 210px;
  background: var(--bg-card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}
.review-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.review-card__photo {
  position: relative;
  aspect-ratio: 1;
  background: #e0dbd3;
  overflow: hidden;
}
.review-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-card__stars-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #fff;
  border-radius: 8px;
  padding: 0.28rem 0.55rem;
  display: flex;
  gap: 1px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}
.review-card__stars-badge span {
  color: var(--gold);
  font-size: 0.875rem;
}
.review-card__body {
  padding: 1rem 1rem 1.25rem;
}
.review-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}
.verified-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1e9cf0;
  color: #fff;
  font-size: 0.45rem;
  font-weight: 900;
  flex-shrink: 0;
}
.review-card__text {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: center;
}
.reviews-carousel__btn {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s;
  z-index: 2;
}
.reviews-carousel__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* ══════════════════════════════════════
         BENEFITS
      ══════════════════════════════════════ */
.benefits-wrap {
  background: var(--bg-white);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.benefit-card {
  background: var(--bg-benefit);
  border-radius: var(--r-card);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border: 1px solid rgba(var(--accent-rgb), 0.08);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.benefit-card__icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.benefit-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}
.benefit-card__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ══════════════════════════════════════
         FAQ
      ══════════════════════════════════════ */
/* Ширина контента у всех секций после товара должна совпадать: было
   FAQ 720, таблица 860, лента видео 900 против 1380 у остальных —
   блоки визуально гуляли по ширине. */
.faq-section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 5rem 2rem;
}
.faq-section .faq-item,
.faq-section .faq-support {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.faq-section .section__heading {
  margin-bottom: 0.5rem;
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item:first-of-type {
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
}
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  gap: 1rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  transition: color 0.2s;
}
.faq-question:hover {
  color: var(--accent);
}
.faq-question svg {
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
  color: var(--text-light);
}
.faq-item.open .faq-question {
  color: var(--accent);
}
.faq-item.open .faq-question svg {
  transform: rotate(45deg);
  color: var(--accent);
}
.faq-answer {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  overflow: hidden;
  max-height: 0;
  transition:
    max-height 0.45s var(--ease),
    padding 0.3s var(--ease);
}
.faq-item.open .faq-answer {
  max-height: 1200px;
  padding-bottom: 1.25rem;
}
.faq-support {
  text-align: center;
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--bg-benefit);
  border-radius: var(--r-card);
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.6;
}
.faq-support strong {
  color: var(--accent);
  display: block;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

/* ══════════════════════════════════════
         REVIEWS GRID
      ══════════════════════════════════════ */
.reviews-grid-section {
  padding: 5rem 0 3.5rem;
  background: var(--bg-white);
  border-top: 1px solid var(--border);
}
.reviews-grid-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
}
.reviews-grid__header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 2rem;
}
.stars-large {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: -0.5px;
}
.reviews-total-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.reviews-photos-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}
.review-photo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.review-photo-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.review-photo-card__img {
  aspect-ratio: 4/3;
  background: #e8e4dc;
  overflow: hidden;
}
.review-photo-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.review-photo-card:hover .review-photo-card__img img {
  transform: scale(1.05);
}
.review-photo-card__meta {
  padding: 0.65rem 0.75rem;
}
.reviewer-name-sm {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.reviewer-date {
  font-size: 0.6875rem;
  color: var(--text-light);
  margin-top: 0.1rem;
}
.reviews-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.review-full-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.review-full-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.review-full-card__photo {
  width: 100%;
  aspect-ratio: 16/10;
  background: #e8e4dc;
  overflow: hidden;
}
.review-full-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-full-card__body {
  padding: 1.25rem;
}
.review-full-card__reviewer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.review-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.review-reviewer-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.review-reviewer-date {
  font-size: 0.75rem;
  color: var(--text-light);
}
.review-full-card__stars {
  color: var(--gold);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.review-full-card__text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.review-product-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  background: var(--bg-sand);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}
.show-more-btn {
  display: block;
  margin: 0 auto;
  padding: 0.875rem 2.5rem;
  background: none;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
.show-more-btn:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.25);
}

/* ══════════════════════════════════════
         FOOTER  — dark
      ══════════════════════════════════════ */
.site-footer {
  background: var(--bg-dark);
  padding: 5rem 2rem 2.5rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
}
.footer-logo {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #fff;
  font-family: var(--font);
  line-height: 1;
  margin-bottom: 1.25rem;
  display: block;
}
.footer-brand__desc {
  font-size: 0.875rem;
  color: var(--text-on-dark-2);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 300px;
}
.footer-social {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-dark);
  border-radius: 50%;
  color: var(--text-on-dark-2);
  transition: all 0.2s;
}
.footer-social a:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.footer-newsletter {
  display: flex;
  max-width: 280px;
}
.footer-newsletter input {
  flex: 1;
  font-family: var(--font);
  font-size: 0.875rem;
  padding: 0.65rem 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-dark);
  border-right: none;
  border-radius: var(--r-btn) 0 0 var(--r-btn);
  outline: none;
  color: #fff;
  transition: border-color 0.2s;
}
.footer-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.footer-newsletter input:focus {
  border-color: rgba(255, 255, 255, 0.3);
}
.footer-newsletter button {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.65rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.footer-newsletter button:hover {
  background: var(--accent-hover);
}
.footer-col__title {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer-col ul li a {
  font-size: 0.875rem;
  color: var(--text-on-dark-2);
  transition: color 0.2s;
}
.footer-col ul li a:hover {
  color: #fff;
}
.footer-help__email {
  font-size: 0.875rem;
  color: var(--text-on-dark-2);
  margin-bottom: 0.75rem;
}
.footer-help__email a {
  color: #6fcfa4;
  font-weight: 500;
}
.footer-help__email a:hover {
  color: #9de4c1;
}
.footer-help__note {
  font-size: 0.8125rem;
  color: var(--text-on-dark-2);
  line-height: 1.65;
  opacity: 0.7;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copyright {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.3);
}
.footer-payments {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.payment-icon {
  height: 24px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  min-width: 36px;
}

/* ══════════════════════════════════════
         RESPONSIVE
      ══════════════════════════════════════ */
@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .reviews-photos-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .reviews-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
  .review-card {
    min-width: 200px;
  }
}
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr;
    background: linear-gradient(
      180deg,
      var(--accent-light) 0%,
      var(--bg-white) 50%
    );
    overflow: visible;
  }
  .hero__image {
    order: -1;
    min-height: auto;
    position: relative;
    border-radius: 0 0 32px 32px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(42, 31, 38, 0.08);
    background: var(--bg-sand);
  }
  .hero__image img {
    width: 100%;
    height: 44vh;
    max-height: 380px;
    object-fit: cover;
    object-position: center 35%;
  }
  .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      transparent 55%,
      rgba(253, 242, 244, 0.5) 85%,
      var(--bg-white) 100%
    );
    pointer-events: none;
  }
  .hero__content {
    margin-top: -28px;
    padding: 1.6rem 1.5rem 3rem;
    max-width: 100%;
    text-align: center;
    align-items: center;
    background: transparent;
    position: relative;
    z-index: 2;
  }
  .hero__tag {
    margin-bottom: 0.85rem;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
  }
  .hero__rating {
    justify-content: center;
    margin-bottom: 1rem;
  }
  .hero__title {
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.08;
    margin-bottom: 0.85rem;
  }
  .hero__sub {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 auto 1.4rem;
    max-width: 36ch;
  }
  .hero .btn-primary {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
  .header-inner {
    padding: 0 1rem;
  }
  .header-nav {
    gap: 1rem;
  }
  .header-nav a {
    font-size: 0.8rem;
  }
  .section {
    padding: 1.5rem 1.5rem;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .reviews-photos-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .reviews-masonry {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  .header-nav {
    display: none;
  }
}

/* Shopify overrides */
.shopify-section {
  display: block;
}
.shopify-challenge__container {
  max-width: 500px;
  margin: 4rem auto;
  padding: 2rem;
}

/* ═══════════════════════════════
   Product Page Styles
   ═══════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* second :root removed — overridden by primary palette at top of file */

html {
  scroll-behavior: smooth;
  font-size: 19px;
  overflow-x: clip;
}
body {
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-white);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  width: 100%;
}
@media (max-width: 600px) {
  html {
    font-size: 17.5px;
  }
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
ul {
  list-style: none;
}

/* ══ ANNOUNCEMENT BAR ══ */
.announcement-bar {
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 9px 48px;
  position: relative;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.announcement-bar__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
}
.announcement-bar__close:hover {
  color: #fff;
}

/* ══ HEADER ══ */
.site-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 70px;
}
.header-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.header-nav a {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: color 0.2s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--accent);
}
.header-burger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--text-primary);
}
.mobile-nav {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #eee;
  padding: 0.5rem 1rem 1rem;
}
.mobile-nav.open {
  display: flex;
}
.mobile-nav a {
  padding: 0.85rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid #f1f1f1;
}
.mobile-nav a:last-child {
  border-bottom: 0;
}
.header-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo-wordmark {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-family: var(--font);
  line-height: 1;
}
.header-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
}
.header-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  color: var(--text-secondary);
  transition: color 0.2s;
  border-radius: 8px;
}
.header-actions button:hover {
  color: var(--accent);
  background: var(--accent-light);
}
.cart-btn {
  position: relative;
}
.cart-count {
  position: absolute;
  top: 1px;
  right: 1px;
  background: var(--accent);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══ BREADCRUMB ══ */
.breadcrumb {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1rem 2rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-light);
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb span {
  color: var(--text-light);
}

/* ══ PRODUCT MAIN ══ */
.product-main {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* Gallery */
.product-gallery {
  position: sticky;
  top: 90px;
  min-width: 0;
}
.gallery-main {
  border-radius: var(--r-card);
  overflow: hidden;
  background: #ffffff;
  aspect-ratio: 1 / 1;
  position: relative;
  cursor: zoom-in;
  /* Горизонтальный жест отдаём свайпу галереи, вертикальный оставляем
     странице. Без этого браузер иногда трактует диагональ как прокрутку
     и свайп не долетает до touchend. */
  touch-action: pan-y;
}
/* Долгий тап по фотографии не должен запускать перетаскивание картинки
   и выделение — на телефоне это выглядит как залипший свайп. */
.gallery-main img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  transition:
    transform 0.4s var(--ease),
    opacity 0.22s var(--ease);
}
.gallery-main:hover img {
  transform: scale(1.04);
}
/* Cross-fade while switching slides — opacity only, so it never fights the hover zoom */
.gallery-main img.is-fading {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-main img {
    transition: none;
  }
  .gallery-main img.is-fading {
    opacity: 1;
  }
}
.gallery-thumbs {
  scroll-behavior: smooth;
}
.gallery-badge {
  position: absolute;
  /* Must sit above the image: while the slide cross-fades, opacity < 1 puts the
     <img> into its own stacking context and — being later in the DOM — it would
     paint over an unlayered badge, making the badge appear to blink. */
  z-index: 2;
  top: 1rem;
  left: 1rem;
  background: var(--sale-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.gallery-thumbs {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
  padding-bottom: 0.25rem;
}
.gallery-thumbs::-webkit-scrollbar {
  height: 4px;
}
.gallery-thumbs::-webkit-scrollbar-track {
  background: transparent;
}
.gallery-thumbs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}
.gallery-thumb {
  scroll-snap-align: start;
}
.gallery-thumb {
  width: 72px;
  height: 72px;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  background: var(--bg-sand);
  flex-shrink: 0;
}
.gallery-thumb.active {
  border-color: var(--accent);
}
.gallery-thumb:hover {
  border-color: var(--accent);
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
}

/* Product Info */
.product-info {
}
/* Now a button — strip the browser chrome so it still reads as a text row */
.product-info__rating {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.product-info__rating:hover .rating-text {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.product-info__rating--orig {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.stars {
  color: var(--gold);
  letter-spacing: -1px;
}
.rating-link {
  color: var(--accent);
  font-weight: 500;
  cursor: pointer;
}
.rating-link:hover {
  text-decoration: underline;
}
.product-info__title {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.product-info__price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.price-sale {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
}
.price-compare {
  font-size: 1.1rem;
  color: var(--text-light);
  text-decoration: line-through;
}
.price-badge {
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--sale-red);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.product-info__tagline {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* Bundle Selector */
.bundle-selector {
  margin-bottom: 1.75rem;
}
.bundle-selector__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bundle-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bundle-option {
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.bundle-option:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.bundle-option.selected {
  border-color: var(--accent);
  background: var(--accent-light);
}
.bundle-option__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.bundle-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
}
.bundle-option.selected .bundle-radio {
  border-color: var(--accent);
}
.bundle-option.selected .bundle-radio::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent);
  border-radius: 50%;
}
.bundle-option__name {
  font-size: 0.9375rem;
  font-weight: 600;
}
.bundle-option__desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.bundle-option__price {
  text-align: right;
}
.bundle-price-sale {
  font-size: 1rem;
  font-weight: 700;
}
.bundle-price-compare {
  font-size: 0.8rem;
  color: var(--text-light);
  text-decoration: line-through;
}
.bundle-tag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.bundle-tag--gold {
  background: var(--gold);
}
.bundle-offer-badge {
  font-size: 0.7rem;
  color: var(--sale-red);
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Variant selectors */
.variant-group {
  margin-bottom: 1.25rem;
}
.variant-group__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.variant-group__selected {
  font-weight: 400;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
}
.size-guide {
  font-size: 0.75rem;
  color: var(--accent);
  cursor: pointer;
  margin-left: auto;
  font-weight: 500;
}
.size-guide:hover {
  text-decoration: underline;
}

.size-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.size-btn {
  min-width: 52px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: 0.4rem;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--bg-card);
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.2s;
  text-align: center;
}
.size-btn:hover {
  border-color: var(--accent);
}
.size-btn.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.size-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

.color-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 0 2px var(--border);
  position: relative;
}
.color-swatch:hover {
  transform: scale(1.1);
}
.color-swatch.active {
  box-shadow: 0 0 0 2px var(--accent);
  border-color: #fff;
}
.color-swatch[title="Classic Black"] {
  background: #1c1c1e;
}
.color-swatch[title="Soft Beige"] {
  background: #d4b896;
}
.color-swatch[title="True Navy"] {
  background: #1a3560;
}
.color-swatch[title="Classic White"] {
  background: #f2f0ec;
}
.color-swatch[title="Dusty Rose"] {
  background: #c49ea0;
}
.color-swatch[title="Sage Green"] {
  background: #7aad8c;
}

/* Add to cart */
.add-to-cart-section {
  margin-top: 1.5rem;
}
.btn-add-to-cart {
  width: 100%;
  padding: 1.05rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--r-btn);
  cursor: pointer;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition:
    background 0.2s,
    transform 0.15s,
    box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.btn-add-to-cart:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3);
}
.btn-add-to-cart svg {
  width: 18px;
  height: 18px;
}
.buy-now-btn {
  width: 100%;
  margin-top: 0.75rem;
  padding: 1rem;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: all 0.2s;
}
.buy-now-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Trust badges */
.trust-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.trust-badge svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

/* Accordions */
.product-accordions {
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}
.accordion-item {
  border-bottom: 1px solid var(--border);
}
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}
.accordion-trigger:hover {
  color: var(--accent);
}
.accordion-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}
.accordion-body {
  display: none;
  padding: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.accordion-item.open .accordion-body {
  display: block;
}

/* ══ SOCIAL PROOF BANNER ══ */
.social-proof {
  background: var(--bg-sand);
  padding: 3.5rem 2rem;
  text-align: center;
}
.social-proof__inner {
  max-width: 900px;
  margin: 0 auto;
}
.social-proof__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.social-proof__sub {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}
.social-proof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.stat {
}
.stat__num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}
.stat__label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* ══ FEATURE SECTIONS ══ */
.feature-section {
  padding: 5rem 2rem;
}
.feature-section--alt {
  background: var(--bg-sand);
}
.feature-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.feature-inner--reverse {
  direction: rtl;
}
.feature-inner--reverse > * {
  direction: ltr;
}
.feature-image {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
}
.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-content {
}
.feature-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.feature-title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.feature-body {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.feature-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ══ COMPARISON TABLE ══ */
.comparison {
  padding: 5rem 2rem;
  background: var(--bg-white);
}
.comparison__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.comparison__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  text-align: center;
}
.comparison__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 0.75rem;
}
.comparison__sub {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 3rem;
  font-size: 0.9375rem;
}
.comp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.comp-table thead th {
  padding: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comp-table thead th:first-child {
  text-align: left;
}
.comp-table thead th.th-velora {
  background: var(--accent);
  color: #fff;
  border-radius: 0.75rem 0.75rem 0 0;
}
.comp-table thead th.th-others {
  background: #e8e8e4;
  color: var(--text-secondary);
  border-radius: 0.75rem 0.75rem 0 0;
}
.comp-table tbody tr td {
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.comp-table tbody tr:last-child td {
  border-bottom: none;
}
.comp-table tbody tr td:first-child {
  color: var(--text-secondary);
}
.comp-table tbody tr td.td-velora {
  background: rgba(var(--accent-rgb), 0.04);
  text-align: center;
}
.comp-table tbody tr td.td-others {
  background: rgba(0, 0, 0, 0.015);
  text-align: center;
}
.check {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 700;
}
.cross {
  color: #ccc;
  font-size: 1.1rem;
}

/* ══ FAQ ══ */
.product-faq {
  padding: 5rem 2rem;
  background: var(--bg-sand);
}
.product-faq__inner {
  max-width: 740px;
  margin: 0 auto;
}
.product-faq__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.product-faq__heading {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.product-faq__sub {
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  font-size: 0.9375rem;
}
.faq-list {
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
}
.faq-q:hover {
  color: var(--accent);
}
.faq-icon {
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  transition: transform 0.3s;
  flex-shrink: 0;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}
.faq-a {
  display: none;
  padding: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.75;
}
.faq-item.open .faq-a {
  display: block;
}
.faq-support {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  margin: 3rem auto 0;
  max-width: 540px;
  padding: 1.4rem 1.5rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.faq-support strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.faq-support a {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
}
.faq-support a:hover {
  border-color: var(--accent);
}

/* ══ WHY PICK US ══ */
.why-pick {
  padding: 5rem 2rem;
  background: var(--bg-white);
}
.why-pick__inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.why-pick__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
  text-align: center;
}
.why-pick__heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 0.75rem;
}
.why-pick__sub {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 3rem;
  font-size: 0.9375rem;
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: 3rem;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.why-card {
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: 2rem 1.75rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.why-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.why-card__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.why-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.why-card__body {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ══ FOOTER ══ */
.site-footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 4rem 2rem 2rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: block;
}
.footer-brand__logo {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-brand__tagline {
  font-size: 0.875rem;
  color: var(--text-on-dark-2);
  line-height: 1.65;
  max-width: 280px;
  margin-bottom: 1.5rem;
}
.footer-social {
  display: flex;
  gap: 0.75rem;
}
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-on-dark-2);
  transition: all 0.2s;
}
.footer-social a:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}
.footer-col__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark-2);
  margin-bottom: 1rem;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-col ul li a {
  font-size: 0.875rem;
  color: var(--text-on-dark-2);
  transition: color 0.2s;
}
.footer-col ul li a:hover {
  color: #fff;
}
.footer-newsletter {
}
.footer-newsletter p {
  font-size: 0.875rem;
  color: var(--text-on-dark-2);
  margin-bottom: 1rem;
  line-height: 1.55;
}
.newsletter-form {
  display: flex;
  gap: 0;
  border-radius: var(--r-btn);
  overflow: hidden;
  border: 1px solid var(--border-dark);
}
.newsletter-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #fff;
  font-family: var(--font);
  font-size: 0.875rem;
  outline: none;
}
.newsletter-input::placeholder {
  color: var(--text-on-dark-2);
}
.newsletter-submit {
  padding: 0.75rem 1.1rem;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s;
}
.newsletter-submit:hover {
  background: var(--accent-hover);
}
.footer-bottom {
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-on-dark-2);
}
.footer-bottom a {
  color: #6fcfa4;
}
.footer-bottom a:hover {
  color: #fff;
}

/* ══ STICKY ADD TO CART ══ */
.sticky-atc {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 30px rgba(42, 31, 38, 0.08);
  z-index: 200;
  display: none;
  padding: 0.75rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.25s var(--ease);
}
.sticky-atc.visible {
  display: block;
  transform: translateY(0);
}
.sticky-atc__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.sticky-atc__info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.sticky-atc__info img {
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
/* Mini review card — pull-quote with accent bar */
.prod-mini-review {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 1rem 1.1rem 0.9rem 1.25rem;
  margin: 0 0 0.95rem;
  box-shadow: 0 2px 12px rgba(42, 31, 38, 0.04);
}
.prod-mini-review__mark {
  position: absolute;
  top: 0.1rem;
  left: 0.9rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.prod-mini-review__quote {
  margin: 0 0 0.75rem;
  padding-left: 1.6rem;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--text-primary);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.005em;
}
.prod-mini-review__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.prod-mini-review__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.prod-mini-review__who {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.prod-mini-review__authorline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.prod-mini-review__author {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.prod-mini-review__verified {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.prod-mini-review__verified svg {
  width: 100%;
  height: 100%;
}
.prod-mini-review__caption {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-light);
  letter-spacing: 0.005em;
}
.prod-mini-review__stars {
  color: #f5b700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

@media (max-width: 600px) {
  .prod-mini-review {
    padding: 0.85rem 0.95rem 0.8rem 1.05rem;
  }
  .prod-mini-review__mark {
    font-size: 2.2rem;
    left: 0.75rem;
  }
  .prod-mini-review__quote {
    font-size: 0.88rem;
    padding-left: 1.3rem;
  }
  .prod-mini-review__avatar {
    width: 32px;
    height: 32px;
  }
  .prod-mini-review__author {
    font-size: 0.8rem;
  }
}

/* Size modal — measure guide + disclaimer */
.size-modal__dims {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
  background: var(--bg-sand);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  margin: 0 0 1.1rem;
}
.size-modal__dims strong {
  color: var(--text-primary);
}
.size-modal__measure {
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: var(--bg-sand, #faf6f3);
  border-radius: 10px;
}
.size-modal__measure-title {
  margin: 0 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.size-modal__measure-steps {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-secondary);
}
.size-modal__measure-steps li {
  margin-bottom: 0.15rem;
}
.size-modal__measure-steps li:last-child {
  margin-bottom: 0;
}
.size-modal__measure-tip {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.size-modal__disclaimer {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #fff4e6;
  border: 1px solid #ffd9a8;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #6b4a17;
}
.size-modal__disclaimer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

.sticky-atc__info > .sticky-atc__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.sticky-atc__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}
.sticky-atc__pricerow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.sticky-atc__price {
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.sticky-atc__qty {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}
.sticky-atc .btn-primary {
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: linear-gradient(
    135deg,
    var(--accent) 0%,
    var(--accent-hover) 100%
  );
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.32);
  transition:
    transform 0.2s var(--ease),
    box-shadow 0.2s ease;
}
.sticky-atc .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
}

@media (max-width: 600px) {
  .sticky-atc {
    padding: 0.6rem 0.85rem;
  }
  .sticky-atc__inner {
    gap: 0.7rem;
  }
  .sticky-atc__name {
    font-size: 0.85rem;
    max-width: 150px;
  }
  .sticky-atc__price {
    font-size: 0.8rem;
  }
  .sticky-atc__qty {
    font-size: 0.7rem;
  }
  .sticky-atc__pricerow {
    gap: 0.3rem;
  }
  .sticky-atc .btn-primary {
    padding: 0.7rem 1.2rem;
    font-size: 0.82rem;
  }
}

/* Keep the product gallery sticky in the 2-column layout down to 820px
   so narrow-desktop / landscape-tablet windows keep the fixed photos.
   Below 820px it collapses to a single column (sticky can't pin cleanly
   in a 1-col grid — the gallery's grid row is short — so it goes static). */
@media (max-width: 820px) {
  .product-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .product-gallery {
    position: static;
  }
}
@media (max-width: 960px) {
  .feature-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .feature-inner--reverse {
    direction: ltr;
  }
  .social-proof__stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .comp-table {
    font-size: 0.8rem;
  }
  .why-grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}
@media (max-width: 600px) {
  /* Переключатель аудитории вынесен из бургера прямо в шапку: половина
     трафика идёт с рекламы на женский товар, и мужчина не догадается искать
     свою витрину под тремя полосками. Он занимает вторую строку под
     логотипом — в одну строку на 360px влезал только мелким шрифтом и
     впритык. Фиксированную высоту при этом снимаем: строк теперь две,
     и 70px их обрезали бы. */
  .header-inner {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    height: auto;
    padding: 0.45rem 1rem 0.55rem;
    row-gap: 0.45rem;
    column-gap: 0.5rem;
  }
  /* На унисекс-витрине переключателя нет, и вторая строка сетки осталась бы
     пустой полосой в липкой шапке — схлопываем её обратно в одну. */
  body.unisex .header-inner {
    grid-template-rows: auto;
    row-gap: 0;
  }
  body.unisex .header-lead {
    display: none;
  }
  .header-burger {
    display: inline-flex;
    grid-column: 1;
    grid-row: 1;
  }
  .header-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .header-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .header-nav,
  .header-divider {
    display: none;
  }
  .header-lead {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
    gap: 0;
  }
  .header-lead .aud-switch {
    padding: 3px;
  }
  .header-lead .aud-switch a {
    font-size: 0.8rem;
    padding: 6px 22px;
  }
  .product-main {
    padding: 1rem 1rem 2rem;
  }
  .bundle-options {
  }
  .social-proof__stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
}

/* ═══════════════════════════════
   Cart Page
   ═══════════════════════════════ */
.cart-page {
  padding: 3rem 1.5rem;
}
.cart-page__inner {
  max-width: 900px;
  margin: 0 auto;
}
.cart-page__title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text-primary);
}
.cart-empty {
  text-align: center;
  padding: 4rem 0;
}
.cart-empty p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
}
@media (max-width: 768px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}
.cart-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.cart-item__image {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}
.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item__details {
  flex: 1;
}
.cart-item__name {
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  margin-bottom: 0.25rem;
}
.cart-item__variant {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.qty-btn {
  background: var(--bg-sand);
  border-radius: 4px;
  padding: 0.2rem 0.6rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
}
.cart-item__price {
  font-weight: 600;
  white-space: nowrap;
}
.cart-item__remove {
  color: var(--text-light);
  text-decoration: none;
  font-size: 0.9rem;
}
.cart-summary {
  background: var(--bg-sand);
  border-radius: 12px;
  padding: 1.5rem;
  align-self: start;
}
.cart-summary__subtotal {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.cart-summary__note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}
.btn--full {
  width: 100%;
  justify-content: center;
}
.cart-continue {
  display: block;
  text-align: center;
  margin-top: 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ═══════════════════════════════
   404 Page
   ═══════════════════════════════ */
.not-found {
  padding: 6rem 1.5rem;
  text-align: center;
}
.not-found__inner {
  max-width: 480px;
  margin: 0 auto;
}
.not-found__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-primary);
}
.not-found__desc {
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

/* ═══════════════════════════════
   Policy Page
   ═══════════════════════════════ */
.page-policy {
  padding: 3rem 1.5rem 5rem;
}
.page-policy__inner {
  max-width: 780px;
  margin: 0 auto;
}
.page-policy__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text-primary);
}
.page-policy__content {
  line-height: 1.8;
  color: var(--text-secondary);
}
.page-policy__content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2rem 0 0.75rem;
}
.page-policy__content p {
  margin-bottom: 1rem;
}
.page-policy__content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
.page-policy__content a {
  color: var(--accent);
}

/* ═══════════════════════════════
   Collection page extras
   ═══════════════════════════════ */
.collection-page {
  padding: 3rem 1.5rem 5rem;
}
.collection-page__desc {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  color: var(--text-secondary);
}
.collection-page__meta {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.collection-page__empty {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-secondary);
}
.collection-page__banner {
  max-width: 1400px;
  margin: 0 auto 1.5rem;
}
.collection-page__banner img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}
.pagination__btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: #fff;
}
.pagination__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination__info {
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.collection-page .section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.collection-page__banner {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
  max-height: 340px;
}
.collection-page__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collection-page__desc {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 640px;
}
.collection-page__meta {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}
.collection-page__empty {
  color: var(--text-secondary);
}
.pagination {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}
.pagination__btn {
  background: var(--bg-sand);
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 600;
  transition: background 0.2s;
}
.pagination__btn:hover {
  background: var(--accent-light);
}
.pagination__info {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ═══════════════════════════════
   Product info extras
   ═══════════════════════════════ */
.product-info__desc {
  margin-top: 1.5rem;
  color: var(--text-secondary);
  line-height: 1.8;
}
.product-info__desc p {
  margin: 0 0 0.75rem;
}
.product-info__desc ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.5rem 0 1rem;
}
.product-info__desc li {
  margin-bottom: 0.4rem;
}
.rte ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.75rem 0 1rem;
}
.rte ol {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0.75rem 0 1rem;
}
.rte li {
  margin-bottom: 0.35rem;
}
.rte p {
  margin: 0 0 0.85rem;
}
.variant-group {
  margin-bottom: 1.25rem;
}
.variant-group__label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.variant-group__label strong {
  color: var(--text-primary);
}
.size-guide {
  color: var(--accent);
  font-size: 0.82rem;
  margin-left: 0.75rem;
}
.color-swatches {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.color-swatches .swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.color-swatches .swatch.selected {
  border-color: var(--accent);
}

/* ══ TRUST ROW ══ */
.trust-row {
  background: #ffffff;
  padding: 2.5rem 2rem;
}
.trust-row--big {
  padding: 3rem 2rem;
}
.trust-row--inline {
  padding: 1.5rem 0 0.5rem;
  background: transparent;
}
.trust-row--inline .trust-row__grid {
  gap: 0.75rem;
}
.trust-row--inline .trust-row__illust {
  width: 92px;
  height: 92px;
}
.trust-row--inline .trust-row__title {
  font-size: 0.9rem;
  max-width: 140px;
  line-height: 1.25;
}
/* На узком экране колонки сжимаются, иконка в 92px начинает наезжать
   на соседнюю — возвращаем прежний размер. */
@media (max-width: 480px) {
  .trust-row--inline .trust-row__illust {
    width: 68px;
    height: 68px;
  }
  .trust-row--inline .trust-row__title {
    font-size: 0.8rem;
  }
}
.trust-row__grid {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.trust-row__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
}
.trust-row__illust {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-row__illust svg {
  width: 100%;
  height: 100%;
}
.trust-row__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  max-width: 160px;
  line-height: 1.25;
}

@media (max-width: 600px) {
  .trust-row {
    padding: 2rem 1rem;
  }
  .trust-row__grid {
    gap: 0.6rem;
  }
  .trust-row__illust {
    width: 72px;
    height: 72px;
  }
  .trust-row__title {
    font-size: 0.85rem;
  }
}

/* ══ PRODUCT FEATURES ══ */
.prod-features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
.prod-feature {
  text-align: center;
}
.prod-feature__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  display: block;
}
.prod-feature__icon--emoji {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(44, 122, 94, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 1rem;
}
.prod-feature__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}
.prod-feature__desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* ══ SOCIAL PROOF GRID ══ */
.social-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-top: 2rem;
}
/* Мужская витрина: роликов шесть, а не восемь, поэтому четыре колонки
   оставляли вторую строку наполовину пустой. Три колонки дают ровные 3×2. */
/* Мужская витрина: вместо сетки — бегущая лента маленьких карточек,
   как на референсе (115x161, скругление 4px, непрерывный ход). */
.social-proof__viewport {
  margin-top: 0;
}

/* ══ БЕГУЩАЯ ЛЕНТА-ПЛАШКА ══ */
.ribbon {
  background: var(--accent);
  color: #fff;
  overflow: hidden;
  padding: 30px 0;
}
.ribbon__track {
  display: flex;
  width: max-content;
  animation: ribbon-run var(--ribbon-speed, 30s) linear infinite;
}
.ribbon__half {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.ribbon__item {
  font-size: 1.26rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ribbon__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  margin: 0 2rem;
  flex: 0 0 auto;
}
@keyframes ribbon-run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.ribbon:hover .ribbon__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ribbon__track {
    animation: none;
  }
}
@media (max-width: 768px) {
  .ribbon {
    padding: 20px 0;
  }
  .ribbon__item {
    font-size: 1rem;
  }
  .ribbon__dot {
    margin: 0 1.25rem;
  }
}
/* На десктопе шесть карточек умещаются в ряд — просто выстраиваем их
   по центру, без бега. Прокрутка остаётся только на телефоне. */
.social-proof__grid {
  display: flex;
  grid-template-columns: none;
  justify-content: center;
  gap: 10px;
  margin-top: 0;
}
.social-proof__card {
  /* Ширина подстраивается под количество: 6 карточек берут максимум 185px,
     8 сжимаются до ~142 и всё равно остаются одной строкой. */
  flex: 1 1 0;
  max-width: 185px;
  height: auto;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
}
/* Мужская витрина: под рядом видео идёт второй ряд с фотографиями.
   Жёстко шесть в строке, иначе двенадцать карточек сожмутся в одну
   полосу вместо двух рядов. Ряды идут впритык. */
body.men .social-proof__grid {
  flex-wrap: wrap;
  row-gap: 10px;
  justify-content: center;
}
body.men .social-proof__card {
  flex: 0 0 calc((100% - 50px) / 6);
  max-width: none;
}
/* Фотографии — дополнение к видео, поэтому ряд мельче: восемь в строке
   против шести. Порядок в разметке уже такой, что фото идут последними. */
body.men .social-proof__card:nth-child(n + 7) {
  flex: 0 0 calc((100% - 70px) / 8);
}
/* На мужской витрине кобальтовая подложка забивала фотографию, поэтому
   там нейтральный серый. На женской подложка остаётся фирменной розовой. */
.image-text--sand,
.social-proof {
  background: var(--bg-sand, #fafaf6);
}
.image-text__media {
  background: var(--bg-sand, #fafaf6);
}
body.men .image-text--sand,
body.men .social-proof {
  background: #f3f4f6;
}
body.men .image-text__media {
  background: #eceef1;
}
.social-proof__card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-sand, #fafaf6);
}
.social-proof__card img,
.social-proof__card .social-proof__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-proof__video {
  background: var(--bg-sand, #fafaf6);
}
.social-proof__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 0.85rem;
}
.social-proof__caption {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
@media (max-width: 768px) {
  .social-proof__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Мужская витрина на телефоне: не сетка, а лента в один ряд.
     Прокрутка нативная — палец, инерция и снэп работают сами,
     автопрокрутку сверху добавляет скрипт секции. */
  .social-proof__viewport {
    overflow: visible;
    margin-top: 1.25rem;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .social-proof__grid {
    display: flex;
    grid-template-columns: none;
    width: auto;
    animation: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.6rem;
    /* поля-отступы, чтобы соседние карточки выглядывали по краям */
    padding: 0 12vw;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
  .social-proof__grid::-webkit-scrollbar {
    display: none;
  }
  .social-proof__card {
    flex: 0 0 76vw;
    /* высоту с десктопа не наследуем: на телефоне карточка вертикальная */
    height: auto;
    aspect-ratio: 5 / 7;
    scroll-snap-align: center;
  }
  /* justify-content: center на прокручиваемой ленте ломает scrollLeft —
     начало трека становится недостижимым и автоход стоит на месте. */
  .social-proof__grid {
    justify-content: flex-start;
  }

  /* Мужские правила выше идут с весом (0,2,1) — `body.men .social-proof__card`
     перебивает мобильный `.social-proof__card` (0,1,0), потому что медиазапрос
     веса не добавляет. Из-за этого на телефоне сохранялись шесть карточек
     в строку и восемь во втором ряду, то есть полоска миниатюр вместо ленты.
     Гасим их таким же весом. */
  /* Мужские правила выше идут с весом (0,2,1) и перебивают мобильные (0,1,0):
     медиазапрос веса не добавляет. Раскладываем ленту сеткой в два ряда —
     видео сверху, фото под ними, как на десктопе. Одной строкой из 12 карточек
     по 76vw до фотографий надо было пролистать все шесть видео. */
  body.men .social-proof__grid {
    display: grid;
    /* dense обязателен: без него фото не возвращаются в первые колонки,
       а встают во второй ряд правее последнего видео — ряды разъезжаются. */
    grid-auto-flow: column dense;
    grid-auto-columns: 46vw;
    grid-template-rows: auto auto;
    row-gap: 8px;
    column-gap: 8px;
    align-items: start;
    /* поля от флекс-варианта дают 12vw пустоты слева — лента должна
       начинаться от края контента, иначе первое видео обрезано */
    padding: 0 1.25rem;
    margin-left: 0;
    margin-right: 0;
  }
  body.men .social-proof__card.is-video {
    grid-row: 1;
    aspect-ratio: 5 / 7;
  }
  /* Фото — дополнение под видео, поэтому ряд ниже и заметно короче. */
  body.men .social-proof__card.is-photo {
    grid-row: 2;
    aspect-ratio: 1 / 1;
  }
  body.men .social-proof__card,
  body.men .social-proof__card:nth-child(n + 7) {
    flex: none;
    width: auto;
    max-width: none;
  }
}

/* ══ IMAGE WITH TEXT ══ */
.image-text {
  padding: 4rem 2rem;
}
/* Каждая секция обёрнута своим div, поэтому .image-text друг другу не
   соседи — цепляемся за обёртки. При 19px в rem отбивка 5rem давала
   95px сверху и снизу, то есть 190px между соседними блоками. */
[id^="shopify-section"]:has(> .image-text)
  + [id^="shopify-section"]:has(> .image-text)
  .image-text {
  padding-top: 0;
}
/* У блока с подложкой отступ снимать нельзя: цветная полоса начиналась
   впритык к предыдущему блоку и стык читался как ошибка вёрстки. */
[id^="shopify-section"]:has(> .image-text)
  + [id^="shopify-section"]:has(> .image-text)
  .image-text--sand {
  padding-top: 3rem;
}
/* Первый блок после ленты с видео — та же отбивка, что и у остальных. */
[id^="shopify-section"]:has(> .social-proof)
  + [id^="shopify-section"]:has(> .image-text)
  .image-text {
  padding-top: 3rem;
}

.image-text__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
/* Медиа с aspect-ratio растягивалось по высоте строки и уходило вверх —
   выравниваем оба столбца по центру явно. */
.image-text__media,
.image-text__copy {
  align-self: center;
}
/* Порядок нужно задавать обоим элементам: у блока с текстом order по
   умолчанию 0, поэтому он оказывался первым при любой настройке и
   картинка всегда вставала справа. */
.image-text--right .image-text__media {
  order: 2;
}
.image-text--right .image-text__copy {
  order: 1;
}
.image-text--left .image-text__media {
  order: 1;
}
.image-text--left .image-text__copy {
  order: 2;
}
.image-text__media {
  position: relative;
  /* Файлы разной пропорции (1.00, 0.90, 0.93, 1.22) давали блокам разную
     высоту. Бокс фиксируем квадратом, содержимое вписываем — инфографику
     с текстом по краю обрезать нельзя. */
  aspect-ratio: 6 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-sand, #fafaf6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Инфографика с текстом по левому краю — кадрировать нельзя, вписываем. */
.image-text__media img[src*="features-benefits"] {
  object-fit: contain;
}
/* Ролик квадратный, в боксе 6/5 по бокам оставались серые поля.
   Заполняем по ширине, подрезая сверху и снизу — надписи в ролике
   идут по центру кадра и в срез не попадают. */
.image-text__media img[src*="sock-animation"] {
  object-fit: cover;
  object-position: center 45%;
}
.image-text__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-light);
}
.image-text__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--accent);
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.image-text__heading {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.5rem 0 1rem;
  color: var(--text-primary);
  text-align: left;
}
.image-text__eyebrow {
  text-align: left;
  margin-bottom: 0.4rem;
}
.image-text__body {
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.975rem;
}
.image-text__cta {
  margin-top: 1.5rem;
  display: inline-flex;
}
@media (max-width: 768px) {
  .image-text__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .image-text--right .image-text__media,
  .image-text--left .image-text__media {
    order: 0;
  }
  .image-text--right .image-text__copy,
  .image-text--left .image-text__copy {
    order: 1;
  }
}

/* ══ COMPARISON TABLE ══ */
.compare__sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Пилюли-тезисы над таблицей */
.compare__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.compare__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 700;
}
.compare__pill svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--accent);
}

/* margin: auto на grid-элементе схлопывает его до ширины содержимого —
   без width: 100% таблица сжималась до 455px вместо 860. */
.compare__table-wrap {
  width: 100%;
  max-width: 860px;
  margin: 2.5rem auto 0;
  overflow-x: auto;
}
.compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.compare__table th,
.compare__table td {
  padding: 1.15rem 1.25rem;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--border, #ececec);
}
.compare__head-blank {
  border-bottom-color: transparent;
}
.compare__head-us,
.compare__head-other {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
}
/* Колонка бренда залита цветом и скруглена сверху — она же тянется
   подложкой вниз по всем строкам, чтобы читалась как один столбец. */
.compare__head-us {
  background: var(--accent);
  color: #fff;
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
}
.compare__head-other {
  color: var(--text-secondary);
}
.compare__logo {
  display: block;
  height: 22px;
  width: auto;
  margin: 0 auto;
}
.compare__feature {
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  width: 52%;
}
.compare__cell {
  text-align: center;
  width: 24%;
}
.compare__cell--us {
  background: rgba(var(--accent-rgb), 0.06);
}
.compare__table tbody tr:last-child .compare__cell--us {
  border-radius: 0 0 12px 12px;
}
.compare__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.compare__mark svg {
  width: 14px;
  height: 14px;
}
.compare__mark--yes {
  background: var(--accent);
  color: #fff;
}
.compare__mark--no {
  background: #e6e7ea;
  color: #a7abb3;
}
.compare__table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 600px) {
  .compare__pill {
    font-size: 0.8rem;
    padding: 0.5rem 0.9rem;
  }
  .compare__table-wrap {
    margin-top: 1.75rem;
  }
  .compare__table th,
  .compare__table td {
    padding: 0.85rem 0.6rem;
    font-size: 0.85rem;
  }
  .compare__head-us,
  .compare__head-other {
    font-size: 0.85rem;
  }
  .compare__feature {
    width: 46%;
  }
}

/* ══ SIZE CHART ══ */
.size-chart__table-wrap {
  max-width: 720px;
  margin: 2rem auto 1rem;
  overflow-x: auto;
}
.size-chart__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.05);
}
.size-chart__table th {
  background: var(--accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.85rem 1.25rem;
  text-align: left;
}
.size-chart__table td {
  padding: 0.95rem 1.25rem;
  border-top: 1px solid var(--border, #eee);
  font-size: 0.925rem;
}
.size-chart__note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
}

/* ══ PRODUCT INFO RIGHT COLUMN ══ */
.product-info__title {
  font-size: clamp(1.7rem, 2.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.6rem;
  color: var(--text-primary);
}
.product-info__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.product-info__rating .stars {
  color: #f5b700;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
}
.product-info__rating .rating-text strong {
  color: var(--text-primary);
}

/* Clinicians' Choice block */
.prod-clinicians {
  border: 1px solid rgba(44, 122, 94, 0.18);
  background: rgba(44, 122, 94, 0.04);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  margin: 0 0 1.25rem;
}
.prod-clinicians__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  font-style: italic;
  margin-bottom: 0.4rem;
}
.prod-clinicians__title span:first-child,
.prod-clinicians__title span:last-child {
  font-style: normal;
  font-size: 1.1rem;
}
.prod-clinicians__body {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.prod-clinicians__body strong {
  color: var(--text-primary);
}

/* Price block */
.product-info__price {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0 0 0.55rem;
}
/* The price the shopper pays leads: largest and near-black. */
.product-info__price .price-sale {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
/* The anchor follows, smaller and grey — present as a reference, never competing. */
.product-info__price .price-compare {
  font-size: 1.05rem;
  font-weight: 400;
  color: #9b8088;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.price-reassure {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: -0.15rem 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #62707f;
  letter-spacing: 0.01em;
}
.price-reassure__dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a8b3bf;
}
.product-info__price .price-off {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1f9d4d;
  background: #e8f6ee;
  padding: 0.22rem 0.5rem;
  border-radius: 6px;
}

/* Promo banner */
.prod-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #f3f8f6, #eef5f1);
  border: 1px dashed rgba(44, 122, 94, 0.35);
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-primary);
}
.prod-promo__badge {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prod-promo__text {
  font-weight: 600;
}

/* Find your size */
/* Подбор размера — ключевой шаг для этой аудитории: тут выбирают не по
   стопе, а по обхвату икры, и человек без подсказки промахнётся. Раньше это
   была подчёркнутая строка 0.85rem, которую взгляд проскакивал. Сделали
   кнопкой во всю ширину: высота выросла с ~20 до ~46px, то есть вдвое. */
.sizepick__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
/* Компактная ссылка-таблица: во всю ширину она конкурировала с «Add to Cart»,
   хотя это справочник, а не действие. Подчёркивание — чтобы читалась ссылкой. */
.prod-find-size {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--accent);
  background: none;
  border: 0;
  /* Область нажатия шире самой подписи: на телефоне в тонкую строку
     попасть пальцем тяжело. */
  padding: 0.35rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb), 0.35);
  transition:
    color 0.18s ease,
    text-decoration-color 0.18s ease;
}
.prod-find-size svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  opacity: 0.9;
}
.prod-find-size:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}
.prod-find-size:focus {
  outline: none;
}
.prod-find-size:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

/* Bundle picker */
.bundle-section {
  margin: 0.5rem 0 1.5rem;
}
.bundle-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.bundle-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 2px solid var(--border, #e6e6e6);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bundle-card:hover {
  border-color: rgba(44, 122, 94, 0.4);
}
.bundle-card.selected {
  border-color: var(--accent);
  background: rgba(44, 122, 94, 0.04);
  box-shadow: 0 0 0 4px rgba(44, 122, 94, 0.08);
}
.bundle-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bundle-card__main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
}
.bundle-card__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border, #d1d1d1);
  background: #fff;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s ease;
}
.bundle-card.selected .bundle-card__radio {
  border-color: var(--accent);
}
.bundle-card.selected .bundle-card__radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.bundle-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bundle-card__qty {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.bundle-card__qty em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
  font-size: 0.875rem;
}
.bundle-card__perpair {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.bundle-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  flex-shrink: 0;
}
.bundle-card__total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.bundle-card__compare {
  font-size: 0.85rem;
  color: var(--text-light);
  text-decoration: line-through;
}
.bundle-card__tag {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.bundle-card__tag--best {
  background: linear-gradient(135deg, #f5b700, #e89a00);
  color: #2a1a00;
}

/* Checkout options info */
.prod-checkout-options {
  margin: 0.85rem 0 1.25rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: center;
}
.prod-checkout-options strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Bigger ATC */
.btn-atc {
  width: 100%;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 12px;
  letter-spacing: 0.01em;
  justify-content: center;
  text-align: center;
}

/* Mobile bundle layout */
@media (max-width: 600px) {
  .bundle-card {
    padding: 0.85rem 1rem;
  }
  .bundle-card__qty {
    font-size: 0.9rem;
  }
  .bundle-card__total {
    font-size: 1rem;
  }
}

/* ════════════════════════════════════════════════
   REDESIGN OVERRIDES — Soft Modern Feminine
   ════════════════════════════════════════════════ */

/* Display font for all headings */
h1,
h2,
h3,
.hero__title,
.section__heading,
.product-info__title,
.image-text__heading,
.collection-page__title,
.cart-page__title,
.faq-question {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.section__heading {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
}

/* SVG icon base */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Buttons — pill shape, terracotta */
.btn-primary {
  background: var(--accent);
  border-radius: var(--r-btn);
  padding: 0.95rem 1.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.18);
  gap: 0.55rem;
}
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.32);
  transform: translateY(-1px);
}
.btn-atc {
  border-radius: var(--r-btn);
}

/* Header */
.site-header {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border);
}
.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.header-nav a {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--text-primary);
}
.header-nav a:hover,
.header-nav a.active {
  color: var(--accent);
}
.cart-count {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* Announcement bar — bigger, more confident */
.announcement-bar {
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  text-align: center;
}

/* Hero */
.hero {
  background: #f6f6f6;
}
.hero__content {
  background: #f6f6f6;
}
.hero__tag {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
}
.hero__rating {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__rating .stars {
  color: var(--gold);
  letter-spacing: 0.04em;
}
.hero__title {
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--forest);
  margin-bottom: 1.1rem;
}
.hero__sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 460px;
  margin-bottom: 1.85rem;
}
.hero__image {
  background: #f6f6f6;
}

/* Clinicians' Choice (homepage) */
.clinicians {
  background: var(--bg-white);
  text-align: center;
  padding: 2rem 1.5rem 2.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}
.clinicians__title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--forest);
  margin-bottom: 0;
  width: auto;
}
.clinicians__brace {
  color: var(--accent);
  font-style: normal;
  font-size: 1.2rem;
  opacity: 0.7;
}
.clinicians__caduceus {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
}
.clinicians__caduceus .svg-icon {
  fill: var(--accent);
  stroke: var(--accent);
}
.clinicians__body {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 820px;
  margin: 0 auto;
}
.clinicians__avatars {
  display: flex;
  align-items: center;
}
.clinicians__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid var(--bg-white);
  margin-left: -8px;
}
.clinicians__avatar:first-child {
  margin-left: 0;
}
.clinicians__text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0;
}
.clinicians__text strong {
  color: var(--text-primary);
  font-weight: 600;
}
.clinicians__text a {
  color: var(--accent);
  text-decoration: underline;
  font-weight: 500;
  margin-left: 0.4rem;
}

/* Product Clinicians block */
.prod-clinicians {
  border: 1px solid var(--accent-soft);
  background: var(--accent-light);
}
.prod-clinicians__title {
  color: var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.prod-clinicians__title .svg-icon {
  stroke: var(--accent);
  fill: var(--accent);
}
.prod-clinicians__brace {
  color: var(--accent);
  opacity: 0.65;
  font-size: 1rem;
  font-style: normal;
}

/* Benefits — better cards with hover */
.benefit-card {
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
}
.benefit-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 0.5rem;
  filter: hue-rotate(330deg) saturate(1.3);
}
.benefit-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0;
}
.benefit-card__desc {
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.9rem;
}

/* FAQ — bigger, plus/minus animated */
.faq-section {
  max-width: 780px;
}
.faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
  padding: 0;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 1.5rem 0.5rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
  font-family: var(--font);
  letter-spacing: -0.005em;
  color: var(--text-primary);
  transition: color 0.2s;
}
.faq-question:hover {
  color: var(--accent);
}
.faq-question svg {
  color: var(--accent);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
.faq-item.open .faq-question svg {
  transform: rotate(45deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  transition:
    max-height 0.45s var(--ease),
    padding 0.25s var(--ease);
  padding: 0 0.5rem 0 0;
}
.faq-item.open .faq-answer {
  max-height: 600px;
  padding: 0 0.5rem 1.5rem 0;
}
.faq-support {
  background: var(--accent-light);
  border-radius: var(--r-card);
  padding: 1.25rem 1.5rem;
  margin-top: 2rem;
  font-size: 0.9rem;
  text-align: center;
  color: var(--text-secondary);
}
.faq-support strong {
  color: var(--forest);
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

/* Reviews carousel — bigger, polished */
.review-card {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease);
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.review-card__stars-badge {
  background: rgba(255, 255, 255, 0.95);
  color: var(--gold);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}

/* Newsletter pre-footer banner */
.footer-newsletter-banner {
  background: var(--bg-sand);
  padding: 4rem 2rem;
  border-top: 1px solid var(--border);
}
.footer-newsletter-banner__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.footer-newsletter-banner__heading {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  letter-spacing: -0.025em;
  color: var(--forest);
  margin: 0.4rem 0 0.85rem;
  font-weight: 600;
}
.footer-newsletter-banner__sub {
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  max-width: 480px;
}
.footer-newsletter-banner__form form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.footer-newsletter-banner__form input[type="email"] {
  flex: 1;
  padding: 0.95rem 1.15rem;
  font-size: 0.95rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-btn);
  background: var(--bg-card);
  font-family: var(--font);
  outline: none;
  transition: border-color 0.2s;
}
.footer-newsletter-banner__form input[type="email"]:focus {
  border-color: var(--accent);
}
.footer-newsletter-banner__form button {
  background: var(--forest);
  color: #fff;
  border: 0;
  padding: 0.95rem 1.65rem;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s;
}
.footer-newsletter-banner__form button:hover {
  background: var(--forest-hover);
}
.footer-newsletter-banner__legal {
  font-size: 0.75rem;
  color: var(--text-light);
  margin: 0;
}
.footer-newsletter-banner__legal a {
  color: inherit;
  text-decoration: underline;
}
.footer-newsletter-banner__msg {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.footer-newsletter-banner__msg.is-success {
  color: #1c7c54;
}
.footer-newsletter-banner__msg.is-error {
  color: #c0392b;
}
.footer-newsletter-banner__form button[disabled] {
  opacity: 0.6;
  cursor: default;
}
@media (max-width: 768px) {
  .footer-newsletter-banner__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .footer-newsletter-banner__form form {
    flex-direction: column;
  }
}

/* Footer — refresh */
.site-footer {
  background: var(--bg-dark);
  padding: 4rem 2rem 2rem;
}
.site-footer .footer-logo {
  font-family: var(--font-display);
  text-transform: none;
  font-size: 1.65rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.site-footer .footer-brand__desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-on-dark);
  max-width: 320px;
  margin: 0.85rem 0 1.5rem;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
}
.footer-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateY(-2px);
}
.footer-col__title {
  color: var(--text-on-dark);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.1rem;
}
.footer-col ul li a {
  color: var(--text-on-dark-2);
  font-size: 0.875rem;
  transition: color 0.15s;
}
.footer-col ul li a:hover {
  color: #fff;
}
.footer-help__email a {
  color: var(--accent);
  font-weight: 500;
}
.footer-help__note {
  font-size: 0.8rem;
  color: var(--text-on-dark-2);
  line-height: 1.5;
  margin-top: 0.5rem;
}
.footer-legal {
  margin-top: 2.5rem;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-on-dark-2);
}
.footer-bottom {
  margin-top: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copyright {
  font-size: 0.8rem;
  color: var(--text-on-dark-2);
}

/* Real payment icons */
.payment-icons {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.payment-icons .payment-icon {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  padding: 3px 5px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
}
.payment-icons .payment-icon svg {
  display: block;
  height: 18px;
  width: auto;
}

/* Cart — free shipping bar + better controls */
.cart-shipping-bar {
  max-width: 880px;
  margin: 0 auto 1.5rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-card);
  padding: 1rem 1.25rem;
}
.cart-shipping-bar__msg {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}
.cart-shipping-bar__msg svg {
  color: var(--accent);
}
.cart-shipping-bar__msg strong {
  color: var(--forest);
  font-weight: 700;
}
.cart-shipping-bar__track {
  height: 6px;
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.cart-shipping-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.cart-item {
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: 1rem;
  border: 1px solid var(--border);
}
.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--text-primary);
  transition: all 0.15s;
}
.qty-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cart-item__remove {
  color: var(--text-light);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cart-item__remove:hover {
  color: var(--accent);
  background: var(--accent-light);
}

/* Product card — hover */
.product-card {
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s ease;
  border-radius: var(--r-card);
  overflow: hidden;
  display: block;
  background: var(--bg-card);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.product-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--forest);
  padding: 0.85rem 1rem 0;
}
.product-card__pricing {
  padding: 0.4rem 1rem 0;
}
.product-card__pricing .price-sale {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.05rem;
}
.product-card__pricing .price-regular {
  color: var(--text-light);
  text-decoration: line-through;
  font-size: 0.875rem;
  margin-left: 0.4rem;
}
.product-card__rating {
  padding: 0.3rem 1rem;
  color: var(--gold);
}
.product-card__swatches {
  padding: 0.3rem 1rem 1rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.product-card__badge {
  background: var(--sale-red);
  color: #fff;
}
.badge--new {
  background: var(--peach);
  color: var(--forest);
}
.badge--limited {
  background: var(--forest);
  color: #fff;
}

/* Section eyebrows pop */
.section__eyebrow {
  color: var(--accent);
  font-weight: 700;
}

.bundle-card.selected {
  border-col);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}
.bundle-card.selected .bundle-card__radio {
  border-color: var(--accent);
}
.bundle-card.selected .bundle-card__radio::after {
  background: var(--accent);
}
.bundle-card__qty em {
  color: var(--accent);
}
.bundle-card__tag {
  background: var(--accent);
}
.bundle-card__tag--best {
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
}

/* Find your size link */
.prod-find-size {
  color: var(--accent);
}
.prod-find-size:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}
.prod-find-size svg {
  color: var(--accent);
}

/* Trust row icons */
.trust-row__icon-fallback {
  background: var(--accent-light);
  color: var(--accent);
}

/* Product feature icons */
.prod-feature__icon--emoji {
  background: var(--accent-light);
  color: var(--accent);
}

/* Comparison table */

/* Size chart accent */
.size-chart__table th {
  background: var(--forest);
}

/* Hero bullet → heading rhythm */
.section__heading {
  font-weight: 600;
}

/* Image-text refinements */
.image-text__heading {
  font-family: var(--font-display);
  color: var(--forest);
  letter-spacing: -0.025em;
  /* Плотный интерлиньяж: без надзаголовка сверху двухстрочные заголовки
     блоков расползались. Правило стоит в самом низу файла, чтобы его
     не перебило ни одно из объявлений выше. */
  line-height: 1;
}
.image-text__badge {
  background: var(--accent);
}

/* Footer brand contrast */
.site-footer .footer-brand__desc {
  color: rgba(255, 255, 255, 0.7);
}

/* ════════════════════════════════════════════════
   HOMEPAGE NEW SECTIONS — Press, Audience, Featured Product
   ════════════════════════════════════════════════ */

/* Press strip */
.press-strip {
  background: var(--bg-white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.85rem 2rem;
}
.press-strip--sand {
  background: var(--bg-sand);
}
.press-strip__label {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.press-strip__logos {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.press-strip__logo {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--forest);
  opacity: 0.55;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.press-strip__logo:hover {
  opacity: 1;
}
.press-strip__logo--serif {
  font-family: var(--font-display);
  font-style: italic;
  letter-spacing: 0;
  font-size: 1.25rem;
}
.press-strip__logo--script {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.4rem;
}
.press-strip__logo img {
  max-height: 32px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
}

/* Audience chips */
.audience--sand {
  background: var(--bg-sand);
}
.audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
.audience-chip {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.5rem 1.25rem;
  background: var(--bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  transition: all 0.25s ease;
  text-align: left;
}
.audience-chip:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
}
.audience-chip__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.audience-chip__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--forest);
  letter-spacing: -0.01em;
}
.audience-chip__sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .audience__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .audience__grid {
    grid-template-columns: 1fr;
  }
}

/* Featured Product Hero */
.fp-hero {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}
.fp-hero--sand {
  background: var(--bg-sand);
}
.fp-hero__inner {
  max-width: 1200px;
  margin: 3rem auto 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4rem;
  align-items: start;
}
.fp-hero__media {
  position: relative;
}
.fp-hero__media-link {
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-sand);
}
.fp-hero__media-link img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s var(--ease);
}
.fp-hero__media-link:hover img {
  transform: scale(1.03);
}
.fp-hero__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--accent);
  color: #fff;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
}
.fp-hero__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.fp-hero__thumb {
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-sand);
  border: 2px solid transparent;
  transition: border-color 0.2s;
  aspect-ratio: 1 / 1;
}
.fp-hero__thumb:hover {
  border-color: var(--accent);
}
.fp-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fp-hero__copy {
  padding-top: 0.5rem;
}
.fp-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--forest);
  margin: 0 0 0.85rem;
}
.fp-hero__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.fp-hero__rating .stars {
  color: var(--gold);
  letter-spacing: 0.04em;
}
.fp-hero__rating strong {
  color: var(--text-primary);
}
.fp-hero__price {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}
.fp-hero__price-sale {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.fp-hero__price-compare {
  font-size: 1.15rem;
  color: var(--text-light);
  text-decoration: line-through;
}
.fp-hero__bullets {
  list-style: none;
  margin: 0 0 1.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.fp-hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.fp-hero__bullet > span:last-child > p {
  margin: 0;
}
.fp-hero__bullet-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fp-hero__bullet strong {
  color: var(--text-primary);
}
.fp-hero__cta-row {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: flex-start;
}
.fp-hero__cta {
  align-self: flex-start;
}
.fp-hero__guarantee {
  font-size: 0.8rem;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.fp-hero__guarantee svg {
  color: var(--accent);
}
@media (max-width: 900px) {
  .fp-hero__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* Reviews polish — better title bar */
.reviews-carousel-section {
  background: var(--bg-sand);
  padding: 4.5rem 2rem;
}
.reviews-carousel-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}

/* Section eyebrow with decorative ✦ */
.section__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
}

/* Better section heading rhythm */
.section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
@media (max-width: 768px) {
  .section {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Clinicians block — bigger, more prominent */
.clinicians {
  padding: 3rem 1.5rem 3.5rem;
  background: var(--accent-light);
  border-top: 0;
  border-bottom: 0;
  text-align: center;
}
.clinicians__title {
  font-size: 1.2rem;
  margin-bottom: 1.25rem;
}
.clinicians__body {
  flex-direction: column;
  gap: 0.85rem;
  max-width: 620px;
}
.clinicians__avatars {
  margin-bottom: 0.4rem;
}
.clinicians__avatar {
  width: 44px;
  height: 44px;
  border: 3px solid var(--accent-light);
  font-size: 0.75rem;
}
.clinicians__text {
  font-size: 1rem;
  line-height: 1.55;
}

/* FAQ — wrap in a cleaner card-like structure */
/* Это правило шло позже и перебивало ширину: карточка FAQ была 880
   против 1204 у соседей. Ширину подтягиваем к общей, читаемость строк
   держим ограничением на сами вопросы. */
.faq-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 3rem 2.5rem;
  max-width: var(--max-w);
  /* те же поля 2rem по краям, что у остальных секций, — иначе карточка
     уходила во всю ширину экрана и выпирала за общую сетку */
  width: calc(100% - 4rem);
  margin-left: auto;
  margin-right: auto;
}
.faq-section .section__eyebrow,
.faq-section .section__heading {
  text-align: center;
}

/* Alternating section bg helper */
.section--sand {
  background: var(--bg-sand);
}

/* Decorative ✦ wrapper for h2 throughout (visual rhythm) */
.section__eyebrow::before {
  content: "";
}

/* ════════════════════════════════════════════════
   REVIEWS — text-focused, premium
   ════════════════════════════════════════════════ */
.reviews-section {
  background: var(--bg-sand);
  padding: 5rem 2rem 2.5rem;
}
.reviews-section__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}
.reviews-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.reviews-section__overall {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--text-secondary);
  background: var(--bg-card);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
@media (max-width: 600px) {
  .reviews-section__overall {
    flex-direction: column;
    gap: 0.25rem;
    border-radius: 16px;
    padding: 0.7rem 1rem;
    text-align: center;
  }
}
.reviews-section__stars {
  color: var(--gold);
  letter-spacing: 0.04em;
}
.reviews-section__overall strong {
  color: var(--text-primary);
}

.reviews-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.5rem 0;
  justify-content: center;
}
@media (max-width: 900px) {
  .reviews-track {
    justify-content: flex-start;
  }
}
.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-tile {
  flex: 0 0 360px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 1.85rem 1.65rem 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}
.review-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
}

.review-tile__quote {
  position: absolute;
  top: -8px;
  left: 1.65rem;
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--accent-soft);
  font-weight: 700;
  user-select: none;
}

.review-tile__stars {
  color: var(--gold);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
  margin-top: 1rem;
}

.review-tile__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
  flex: 1;
}

.review-tile__author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.review-tile__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
}
.review-tile__meta {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.review-tile__name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  font-family: var(--font-display);
}
.review-tile__role {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.review-tile__verified {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.reviews-controls {
  display: flex;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 2rem;
}
.reviews-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.reviews-arrow:first-child svg {
  transform: rotate(180deg);
}
.reviews-arrow:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Hide old carousel arrow */
.reviews-carousel__btn {
  display: none;
}

/* ════════════════════════════════════════════════
   BENEFITS — stat-focused premium cards
   ════════════════════════════════════════════════ */
.benefits-wrap {
  background: var(--bg-sand);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 1200px;
  margin: 2.5rem auto 0;
}
.benefit-card {
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: 2.25rem 1.65rem 2rem;
  border: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  transition: all 0.3s ease;
  overflow: hidden;
}
.benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent-soft);
}
.benefit-card:hover::before {
  transform: scaleX(1);
}
.benefit-card__stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.04em;
}
.benefit-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.4rem;
}
.benefit-card__icon img {
  width: 28px;
  height: 28px;
}
.benefit-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--forest);
  margin-top: 0.35rem;
  letter-spacing: -0.01em;
}
.benefit-card__desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .review-tile {
    flex: 0 0 88%;
  }
  .benefit-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "stat icon"
      "title title"
      "desc desc";
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.45rem;
    padding: 1.4rem 1.25rem 1.5rem;
  }
  .benefit-card__stat {
    grid-area: stat;
    font-size: 2.4rem;
    margin: 0;
  }
  .benefit-card__icon {
    grid-area: icon;
    justify-self: end;
    margin: 0;
    width: 40px;
    height: 40px;
  }
  .benefit-card__title {
    grid-area: title;
    margin: 0;
    font-size: 1.05rem;
  }
  .benefit-card__desc {
    grid-area: desc;
    margin: 0;
  }
}

/* ════════════════════════════════════════════════
   ALTERNATING SECTION BG RHYTHM
   ════════════════════════════════════════════════ */
.fp-hero {
  background: var(--bg-white);
}
.fp-hero--sand {
  background: var(--bg-sand);
}
/* Force alternating pattern: cream -> sand -> cream -> sand */
.audience--sand {
  background: var(--bg-sand);
}
.reviews-section {
  background: var(--bg-white);
}
.benefits-wrap {
  background: var(--bg-sand);
}
.footer-newsletter-banner {
  background: var(--accent-light);
}

/* FAQ — embed in cream surround instead of white card surround */
.faq-section {
  background: var(--bg-card);
  margin: 5rem auto;
  max-width: var(--max-w);
  box-shadow: var(--shadow-sm);
}

/* ════════════════════════════════════════════════
   DECORATIVE EYEBROW LINE — recurring motif
   ════════════════════════════════════════════════ */
.section__eyebrow {
  position: relative;
  display: inline-block;
  padding: 0 0.65rem;
}
/* Wrap eyebrow in a flex container with lines */
.section > .section__eyebrow,
.fp-hero > .section__eyebrow {
  display: block;
}

/* ════════════════════════════════════════════════
   SCROLL FADE-IN ANIMATIONS
   ════════════════════════════════════════════════ */
html.js-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
  will-change: opacity, transform;
}
html.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html.js-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════
   SOFTER PREMIUM CARD SHADOWS
   ════════════════════════════════════════════════ */
.benefit-card,
.audience-chip,
.review-tile,
.fp-hero__media-link {
  box-shadow:
    0 1px 3px rgba(var(--accent-rgb), 0.04),
    0 4px 12px rgba(42, 31, 38, 0.04);
}

/* Hero — give it a bit more breathing room and soft accent */
.hero {
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-white));
  pointer-events: none;
  display: none;
}

/* Section heading subtle underline accent on hover scroll */
.section__heading {
  position: relative;
}

/* Improve press strip — make it feel like a divider */
.press-strip {
  background: var(--bg-sand);
  border-top: 0;
  border-bottom: 0;
  padding: 2.5rem 2rem;
}
.press-strip__label {
  font-style: italic;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}
.press-strip__logo {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}

/* Newsletter — softer pink accent */
.footer-newsletter-banner {
  background: var(--accent-light);
}

/* Decorative ✦ in headings: reduce in size, refined */
.section__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* Add subtle line dividers between sections of similar bg */
.section + .section--sand,
.section--sand + .section {
  border-top: 1px solid rgba(42, 31, 38, 0.04);
}

/* Better featured-product card mediaShadow */
.fp-hero__media-link {
  box-shadow: 0 16px 40px rgba(42, 31, 38, 0.1);
}

/* Audience chip refined */
.audience-chip {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
}

/* Reviews on cream now */
.reviews-section {
  background: var(--bg-white);
}
.review-tile {
  background: var(--bg-sand);
  border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════
   PREMIUM FINE-TUNING — Subtle Texture & Polish
   ════════════════════════════════════════════════ */

/* 1. Soft noise texture on sand sections (Aesop/Glossier vibe) */
.audience--sand,
.benefits-wrap,
.press-strip {
  position: relative;
  isolation: isolate;
}
.audience--sand::before,
.benefits-wrap::before,
.press-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(var(--accent-rgb), 0.06) 1px,
    transparent 1.5px
  );
  background-size: 24px 24px;
  background-position: 0 0;
  z-index: 0;
  opacity: 0.7;
}
.audience--sand > *,
.benefits-wrap > *,
.press-strip > * {
  position: relative;
  z-index: 1;
}

/* 2. Subtle decorative leaf/mark in corners of sand sections */
.benefits-wrap::after,
.audience--sand::after {
  content: "✦";
  position: absolute;
  font-size: 4rem;
  font-family: var(--font-display);
  color: var(--accent);
  opacity: 0.06;
  top: 2rem;
  right: 3rem;
  z-index: 0;
  pointer-events: none;
}
.benefits-wrap::after {
  bottom: 2rem;
  right: 3rem;
  top: auto;
}

/* 3. More peach accents — color block chunking */
/* Add a peach accent divider strip after press-strip */
.press-strip + .clinicians {
  position: relative;
}
.press-strip + .clinicians::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
  opacity: 0.4;
}

/* Featured product hero — soft peach corner accent */
.fp-hero {
  position: relative;
  background: linear-gradient(
    135deg,
    var(--bg-white) 0%,
    var(--bg-white) 70%,
    var(--accent-light) 100%
  );
}
.fp-hero::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 5%;
  width: 240px;
  height: 240px;
  background: radial-gradient(
    circle,
    rgba(248, 215, 221, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.fp-hero > * {
  position: relative;
  z-index: 1;
}

/* Reviews — subtle peach gradient at top */
.reviews-section {
  background: linear-gradient(
    180deg,
    var(--accent-light) 0%,
    var(--bg-white) 12%,
    var(--bg-white) 100%
  );
}

/* 4. Wave / curved divider between major sections */
.fp-hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'><path d='M0 20 Q 360 0 720 20 T 1440 20 L 1440 40 L 0 40 Z' fill='%23F4EFE6'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

/* 5. Polished button micro-interaction */
.btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    background 0.2s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s ease;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}
.btn-primary:hover::before {
  transform: translateX(100%);
}
.btn-primary:active {
  transform: translateY(0);
  transition-duration: 0.05s;
}

/* 6. Newsletter — refined peach/forest contrast with better copy */
.footer-newsletter-banner {
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--accent-soft) 100%
  );
  position: relative;
  overflow: hidden;
}
.footer-newsletter-banner::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  opacity: 0.06;
  pointer-events: none;
}
.footer-newsletter-banner__inner {
  position: relative;
  z-index: 1;
}
.footer-newsletter-banner__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  letter-spacing: -0.025em;
}

/* 7. Card hover refinement — softer scale, glow */
.benefit-card,
.audience-chip,
.review-tile,
.product-card {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    border-color 0.25s ease;
}
.benefit-card:hover,
.audience-chip:hover,
.review-tile:hover {
  transform: translateY(-6px) scale(1.005);
}

/* 8. Heading subtle italic accent for last word */
.section__heading em,
.hero__title em,
.fp-hero__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

/* 9. Trust pills/badges with subtle gradient */
.trust-badge {
  background: linear-gradient(
    135deg,
    var(--bg-white) 0%,
    var(--accent-light) 100%
  );
  border: 1px solid var(--accent-soft);
}

/* 10. Footer — solid plum, no green */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1.5px
  );
  background-size: 32px 32px;
  pointer-events: none;
}
.site-footer__inner > * {
  position: relative;
  z-index: 1;
}

/* 11. Reviews overall pill — premium glass effect */
.reviews-section__overall {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.06);
}

/* 12. Smooth section heading reveal stroke */
.section__heading {
  background: linear-gradient(
    180deg,
    var(--text-primary) 0%,
    var(--text-primary) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* Заголовок наследовал line-height 1.6 от body — при кегле ~35px это 56px
   между строками, и двухстрочный заголовок вроде «240,000+ Women Wear
   Velora Daily» разъезжался. Крупному тексту нужен плотный интерлиньяж. */
.section__heading {
  line-height: 1.15;
  text-wrap: balance;
}
@media (max-width: 768px) {
  .section__heading {
    line-height: 1.1;
  }
}

/* 13. Subtle parallax-feel on hero image */
.hero__image img {
  transition: transform 1.2s var(--ease);
}
.hero:hover .hero__image img {
  transform: scale(1.02);
}

/* PALETTE OVERRIDE removed — primary palette wins (Soft Blush + Rose) */

/* Newsletter perks list */
.footer-newsletter-banner__perks {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.footer-newsletter-banner__perks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.footer-newsletter-banner__perks li svg {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
  border-radius: 50%;
  padding: 3px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.footer-newsletter-banner__perks strong {
  color: var(--accent);
  font-weight: 700;
}

/* PALETTE OVERRIDE removed — primary palette wins (Soft Blush + Rose) */

/* ════════════════════════════════════════════════
   BACKGROUND DECORATION OPTIONS
   Comment/uncomment blocks below to try options
   ════════════════════════════════════════════════ */

/* OPTION 1: Floating peach blobs (organic, soft, modern) */
.audience--sand,
.benefits-wrap {
  position: relative;
  overflow: hidden;
}
.audience--sand .bg-blob,
.benefits-wrap .bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* OPTION 2: Hand-drawn line waves (sketchy/feminine touch) */
.bg-wave-divider {
  position: relative;
  height: 60px;
  margin: -1px 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 30 Q 240 10 480 30 T 960 30 T 1440 30 L 1440 60 L 0 60 Z' fill='%23F4EFE6' opacity='1'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* OPTION 3: Botanical leaf pattern (subtle, premium) */
.bg-botanical {
  position: relative;
}
.bg-botanical::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23B85450' stroke-width='1' opacity='0.08'><path d='M40 20 Q 50 30 40 60 Q 30 30 40 20 Z'/><circle cx='40' cy='25' r='1.5'/></g></svg>");
  background-size: 80px 80px;
  pointer-events: none;
  opacity: 0.6;
}

/* OPTION 4: Concentric circles in corners (geometric, refined) */
.bg-circles::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 60px solid var(--accent-light);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.bg-circles::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 40px solid var(--peach-soft);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* OPTION 5: Watercolor wash gradient (soft, dreamy) */
.bg-watercolor {
  background-image:
    radial-gradient(
      circle at 20% 30%,
      rgba(var(--accent-rgb), 0.06) 0%,
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(248, 215, 221, 0.18) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(244, 219, 216, 0.1) 0%,
      transparent 50%
    );
}

/* OPTION 6: Diagonal subtle stripes (textured, not loud) */
.bg-stripes {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 20px,
    rgba(var(--accent-rgb), 0.02) 20px,
    rgba(var(--accent-rgb), 0.02) 21px
  );
}

/* OPTION 7: Confetti dots/✦ scattered (playful) */
.bg-confetti::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      circle,
      rgba(var(--accent-rgb), 0.12) 1.5px,
      transparent 1.5px
    ),
    radial-gradient(circle, rgba(248, 215, 221, 0.18) 2px, transparent 2px),
    radial-gradient(circle, rgba(92, 72, 88, 0.08) 1px, transparent 1px);
  background-size:
    60px 60px,
    80px 80px,
    110px 110px;
  background-position:
    0 0,
    30px 40px,
    50px 25px;
  pointer-events: none;
}

/* OPTION 8: Cross-hatch fabric texture (premium feel) */
.bg-fabric {
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(var(--accent-rgb), 0.02) 3px,
      rgba(var(--accent-rgb), 0.02) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      rgba(var(--accent-rgb), 0.02) 3px,
      rgba(var(--accent-rgb), 0.02) 4px
    );
}

/* DEFAULT — apply botanical leaf pattern to sand sections */
.audience--sand,
.benefits-wrap {
  position: relative;
}
.audience--sand::after,
.benefits-wrap::after {
  /* override the prior ✦ in corner from earlier — replace with botanical */
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  right: auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23B85450' stroke-width='1.2' opacity='0.07' stroke-linecap='round'><path d='M80 30 Q 95 50 80 100 Q 65 50 80 30 Z'/><path d='M50 80 Q 70 95 100 80'/><path d='M50 80 Q 70 65 100 80'/></g></svg>");
  background-size: 200px 200px;
  background-repeat: repeat;
  background-position: center;
  pointer-events: none;
  opacity: 1;
  z-index: 0;
}
.audience--sand > *,
.benefits-wrap > * {
  position: relative;
  z-index: 1;
}

/* Swapped: reviews now blush, audience now white */
.reviews-section {
  background: var(--bg-sand);
}
.reviews-section::before {
  display: none;
}
.reviews-section .review-tile {
  background: #ffffff;
}
.audience--sand {
  background: var(--bg-white);
}

/* ════════════════════════════════════════════════
   CLINICIANS CHOICE — Minimalist
   ════════════════════════════════════════════════ */
.clinicians-min {
  background: var(--bg-white);
  padding: 4rem 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.clinicians-min__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.clinicians-min__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.clinicians-min__heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.clinicians-min__count {
  color: var(--accent);
  font-weight: 600;
}
.clinicians-min__avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0;
}
.clinicians-min__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 2px solid #ffffff;
  margin-left: -10px;
}
.clinicians-min__avatar:first-child {
  margin-left: 0;
}
.clinicians-min__specialties {
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 0;
}
.clinicians-min__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  max-width: 560px;
  margin: 0.4rem 0 0;
  font-weight: 400;
}
.clinicians-min__quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font);
  font-size: 0.82rem;
  color: var(--text-primary);
  margin-top: 0.85rem;
  font-weight: 600;
}
.clinicians-min__quote cite span {
  color: var(--text-secondary);
  font-weight: 400;
}
.clinicians-min__footnote {
  font-size: 0.74rem;
  color: var(--text-light);
  margin: 0;
  letter-spacing: 0.02em;
}
.clinicians-min__link {
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}
.clinicians-min__link:hover {
  border-color: var(--accent);
}

@media (max-width: 600px) {
  .clinicians-min {
    padding: 3rem 1.25rem;
  }
}

/* ════════════════════════════════════════════════
   COLLECTION TRIO — 3 collection cards
   ════════════════════════════════════════════════ */
.collection-trio {
  background: var(--bg-white);
  padding: 5rem 1.5rem 5.5rem;
}
.collection-trio__inner {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.collection-trio .section__eyebrow {
  margin-bottom: 0.6rem;
}
.collection-trio .section__heading {
  margin-bottom: 0.5rem;
}
.collection-trio .section__subheading {
  margin-bottom: 2.5rem;
}
.collection-trio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}
.ctcard {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  border: 1px solid var(--border);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  position: relative;
  isolation: isolate;
}
.ctcard:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 3px rgba(42, 31, 38, 0.04),
    0 18px 36px rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent-soft);
}
.ctcard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #ffffff;
  overflow: hidden;
}
.ctcard__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ctcard:hover .ctcard__media img {
  transform: scale(1.04);
}
.ctcard__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    var(--accent-light) 0%,
    var(--peach) 100%
  );
}
.ctcard__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #ffffff;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(42, 31, 38, 0.08);
}
.ctcard__body {
  padding: 1.4rem 1.4rem 1.6rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ctcard__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.ctcard__sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}
.ctcard__cta {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  align-self: flex-start;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 1px;
  transition:
    border-color 0.2s ease,
    transform 0.2s var(--ease);
}
.ctcard:hover .ctcard__cta {
  border-color: var(--accent);
}
.ctcard__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.ctcard__price-now {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ctcard__price-was {
  font-size: 0.88rem;
  color: var(--text-light);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ctcard__reviews {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.1rem;
}
.ctcard__star {
  color: #f5b300;
  font-size: 0.78rem;
  line-height: 1;
}
.ctcard__swatches {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.ctcard__swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  display: inline-block;
}
.ctcard__swatch-more {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-left: 0.15rem;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .collection-trio__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-width: 100%;
    padding: 0;
  }
  .ctcard__media {
    aspect-ratio: 1 / 1;
  }
  .ctcard__body {
    padding: 0.75rem 0.7rem 0.9rem;
    gap: 0.3rem;
  }
  .ctcard__title {
    font-size: 0.95rem;
    line-height: 1.2;
  }
  .ctcard__sub {
    font-size: 0.74rem;
    line-height: 1.3;
  }
  .ctcard__price-now {
    font-size: 0.92rem;
  }
  .ctcard__price-was {
    font-size: 0.75rem;
  }
  .ctcard__reviews {
    font-size: 0.7rem;
  }
  .ctcard__swatch {
    width: 11px;
    height: 11px;
  }
  .ctcard__badge {
    font-size: 0.58rem;
    padding: 0.2rem 0.45rem;
    top: 8px;
    left: 8px;
  }
}
@media (max-width: 600px) {
  .collection-trio {
    padding: 3rem 0.75rem 3.5rem;
  }
  .collection-trio__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  /* 3rd card sits centered, matches size of the other two */
  .collection-trio__grid .ctcard:nth-child(3) {
    grid-column: 1 / -1;
    width: calc(50% - 0.3rem);
    max-width: none;
    margin: 0 auto;
    justify-self: center;
  }
  .collection-trio__grid .ctcard:nth-child(3) .ctcard__media {
    aspect-ratio: 1 / 1;
  }
}

/* ════════════════════════════════════════════════
   UGC REVIEW TILE (image + floating stars + name + text)
   ════════════════════════════════════════════════ */
.ugc-tile {
  flex: 0 0 200px;
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.ugc-tile__media {
  position: relative;
  aspect-ratio: 8 / 5;
  background: var(--bg-sand);
}
.ugc-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ugc-tile__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ugc-tile__placeholder span {
  font-family: var(--font-display);
  color: #fff;
  font-size: 4rem;
  font-weight: 700;
}
.ugc-tile__stars {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #f5b300;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(42, 31, 38, 0.1);
  white-space: nowrap;
  z-index: 2;
}
.ugc-tile__body {
  padding: 1.3rem 0.9rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
}
.ugc-tile__name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.ugc-tile__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.ugc-tile__verified {
  display: inline-flex;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.ugc-tile__verified svg {
  width: 100%;
  height: 100%;
}
.ugc-tile__text {
  font-size: 0.78rem;
  line-height: 1.42;
  color: var(--text-primary);
  margin: 0;
}
.ugc-tile__placeholder span {
  font-size: 2rem;
}

@media (max-width: 600px) {
  .ugc-tile {
    flex: 0 0 150px;
    min-height: 300px;
  }
  .ugc-tile__media {
    aspect-ratio: 1 / 1;
  }
  .ugc-tile__body {
    padding: 1.1rem 0.7rem 0.9rem;
    gap: 0.3rem;
  }
  .ugc-tile__name {
    font-size: 0.78rem;
  }
  .ugc-tile__text {
    font-size: 0.72rem;
    line-height: 1.4;
  }
  .ugc-tile__stars {
    font-size: 0.72rem;
    padding: 0.32rem 0.65rem;
    bottom: -12px;
  }
  .ugc-tile__placeholder span {
    font-size: 2.5rem;
  }
}

/* ════════════════════════════════════════════════
   PRODUCT PAGE — Featured customer review (replaces clinicians)
   ════════════════════════════════════════════════ */
.prod-review {
  display: flex;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  margin: 0.85rem 0 0.4rem;
  position: relative;
}
.prod-review__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.prod-review__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.prod-review__top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.prod-review__stars {
  color: #f5b300;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.prod-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.prod-review__verified .svg-icon {
  stroke: var(--accent);
}
.prod-review__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0;
  font-weight: 400;
}
.prod-review__author {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.prod-review__author strong {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}
.prod-review__author span {
  font-size: 0.74rem;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════
   BOGO BUNDLE PICKER (per-pair size + color)
   ════════════════════════════════════════════════ */
.bogo-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.bogo-card {
  position: relative;
  display: block;
  background: #ffffff;
  /* Unselected cards sit back in a soft neutral — the pink border is reserved
     for the chosen one, so selection is obvious at a glance. */
  border: 2px solid #ead9de;
  border-radius: 12px;
  padding: 0.6rem 0.6rem;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.bogo-card:not(.bogo-card--selected):hover {
  border-color: var(--accent-soft);
}
.bogo-card--selected,
.bogo-card--selected:hover {
  border: 3px solid var(--promo-a);
  background: var(--accent-light);
  box-shadow: 0 0 0 4px rgba(var(--promo-rgb), 0.22);
  /* keeps the box the same size as unselected cards despite the thicker border */
  padding: calc(0.6rem - 1px) calc(0.6rem - 1px);
}
.bogo-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bogo-card__head {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 0.7rem;
}
.bogo-card__radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #cdb6bd;
  background: #ffffff;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.18s ease;
}
.bogo-card--selected .bogo-card__radio {
  border-color: var(--accent);
}
.bogo-card--selected .bogo-card__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
}
.bogo-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.bogo-card__title {
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
/* Per-pair price. The figure stays dark and readable — it's what lowers the felt
   cost — while the "per pair" label drops back to grey so the number reads on its
   own and doesn't blend into the bundle title above it. */
.bogo-card__sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.bogo-card__sub-label {
  font-weight: 500;
  color: var(--text-light);
}
.bogo-card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
}
.bogo-card__now {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
/* Anchor: muted grey and thin — a reference point, never a focal one. */
.bogo-card__was {
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--text-light);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
/* Badge is a filled pill inside the card, as in the reference: it reads as a
   label on the offer rather than a sticker floating off the corner. */
.bogo-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
  /* Tinted, not grey: on a white card a neutral pill disappears. This reads as
     brand-adjacent while staying clearly quieter than the hero badge. */
  background: var(--accent-soft, var(--accent-soft));
  color: var(--accent-hover, var(--accent-hover));
  font-size: 0.68rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.07em;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.bogo-card__badge svg {
  width: 11px;
  height: 11px;
}
.bogo-card__badge--hero {
  background: var(--accent);
  color: #fff;
}
/* "FREE" carries the offer — the one place the accent appears in the copy. */
.bogo-card__free-word {
  font-style: normal;
  color: var(--accent);
}
.bogo-card--selected .bogo-card__free-word {
  color: var(--accent-hover, var(--accent-hover));
}
/* Gift pill under the price, matching the reference's "+3 FREE". */
.bogo-card__free {
  display: inline-block;
  margin-top: 0.2rem;
  /* Green wash: free pairs are a gain, and green is already the store's
     "money back" colour on the savings badge. */
  background: #e8f6ee;
  color: #1f9d4d;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Three facts on one line: how many pairs, unit price, and the benefit. */
.bogo-card__sub {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.84rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}

/* Colour swatches above the picker */
.colourpick {
  margin: 0 0 1.15rem;
  /* Whole block is a control (swatches + live "Colour: Black" readout), so
     dragging across it should never paint a text selection. */
  -webkit-user-select: none;
  user-select: none;
}
.colourpick__label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.colourpick__label b {
  color: var(--text-primary);
  font-weight: 700;
}
.colourpick__count {
  color: var(--text-light);
}
.colourpick__row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}
.cswatch {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  transition: transform 0.18s var(--ease);
  /* A swatch is a colour target, not text — kill the blue selection tint on
     press-and-hold and the blue tap flash on touch. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.cswatch:hover {
  transform: translateY(-2px);
}
/* Mouse press gets no ring; keyboard focus keeps a visible one, in brand pink. */
.cswatch:focus {
  outline: none;
}
.cswatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.cswatch[aria-current="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
/* Цвета, которых нет в выбранном размере, просто исчезают из ряда */
.cswatch[hidden] {
  display: none;
}

/* ---- Размер: одна плашка на весь заказ ---------------------------------- */
.sizepick {
  margin: 0 0 1.15rem;
  -webkit-user-select: none;
  user-select: none;
}
.sizepick__label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.sizepick__label b {
  color: var(--text-primary);
  font-weight: 700;
}
.sizepick__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.45rem;
}
@media (max-width: 600px) {
  /* На телефоне справа от подписи кнопка жалась к краю и мешала длинному
     названию размера. Переносим её под плашки: display:contents расклеивает
     строку-обёртку, и порядком управляет уже сам .sizepick. */
  .sizepick {
    display: flex;
    flex-direction: column;
  }
  .sizepick__head {
    display: contents;
  }
  .sizepick__label {
    order: 1;
  }
  .sizepick__row {
    order: 2;
  }
  .sizepick .prod-find-size {
    order: 3;
    align-self: flex-start;
    margin-top: 0.7rem;
    font-size: 1.02rem;
  }
}
.sizepill {
  min-width: 66px;
  padding: 0.62rem 1.05rem;
  background: #ffffff;
  border: 1.5px solid var(--border);
  /* Скруглять до половины высоты, а не фиксированным радиусом: у «XL Wide»
     плашка шире и выше, и общий радиус сделал бы её другой формы. */
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.18s var(--ease),
    background 0.18s var(--ease),
    color 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.sizepill:hover {
  border-color: var(--text-primary);
}
.sizepill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sizepill[aria-checked="true"] {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: #ffffff;
}
.sizepill--oos {
  color: var(--text-light);
  border-color: var(--border);
  background: transparent;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.sizepill--oos:hover {
  border-color: var(--border);
}

/* Product photo on each per-pair row */
.bogo-row__thumb {
  /* Ширину задаёт колонка сетки, а не сам элемент: при жёстких 40px на
     мобильном (колонка 26px) миниатюра вылезала и наезжала на селектор
     размера. Пока картинки не отображались, этого не было видно. */
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--accent-light, #fdf2f4);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--border);
}

/* Per-pair rows (rendered when card selected) */
.bogo-card__rows {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bogo-card__rows:empty {
  display: none;
}
.bogo-card__rows-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.bogo-row {
  display: grid;
  /* Размер уехал наверх, в строке остались фото пары и её цвет */
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
}
.bogo-row__num--legacy {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.bogo-select {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  transition: border-color 0.18s ease;
}
.bogo-select:hover,
.bogo-select:focus-within {
  border-color: var(--accent);
}
.bogo-select select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0 1.2rem 0 0;
  width: 100%;
  cursor: pointer;
  outline: none;
}
.bogo-select::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-primary);
  border-bottom: 1.5px solid var(--text-primary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.bogo-select--color {
  padding-left: 0.55rem;
}
.bogo-row__dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1px solid var(--border);
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* ---- Custom colour listbox --------------------------------------------
   The native <select> stays in the DOM as the source of truth (hidden here);
   this is the visible control, which shows an actual colour circle per option. */
.bogo-swatch {
  position: relative;
  min-width: 0;
}
.bogo-swatch .bogo-row__color {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
}
.bogo-swatch__btn {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s var(--ease);
}
.bogo-swatch__btn:hover,
.bogo-swatch.is-open .bogo-swatch__btn,
.bogo-swatch__btn:focus-visible {
  border-color: var(--accent);
  outline: none;
}
.bogo-swatch__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bogo-swatch__arrow {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin-left: 0.35rem;
  transition: transform 0.2s var(--ease);
}
.bogo-swatch.is-open .bogo-swatch__arrow {
  transform: rotate(180deg);
}
.bogo-swatch__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(42, 31, 38, 0.16);
  padding: 0.3rem;
  max-height: 264px;
  overflow-y: auto;
}
.bogo-opt {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 7px;
  padding: 0.5rem 0.55rem;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
}
/* display:flex выше перебивает атрибут hidden — без этой строки цвета,
   отсутствующие в выбранном размере, остались бы видны в списке. */
.bogo-opt[hidden] {
  display: none;
}
.bogo-opt:hover,
.bogo-opt:focus-visible {
  background: var(--accent-light);
  outline: none;
}
.bogo-opt__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px var(--border);
}
.bogo-opt__name {
  flex: 1 1 auto;
}
.bogo-opt__tick {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--accent);
  opacity: 0;
}
.bogo-opt[aria-selected="true"] .bogo-opt__tick {
  opacity: 1;
}
.bogo-opt[aria-selected="true"] {
  background: var(--accent-light);
}

@media (max-width: 480px) {
  .bogo-card__head {
    grid-template-columns: 22px 1fr auto;
    gap: 0.7rem;
  }
  .bogo-card__title {
    font-size: 0.95rem;
  }
  .bogo-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.45rem;
  }
  .bogo-select {
    padding: 0.4rem 0.6rem;
  }
  .sizepill {
    min-width: 60px;
    padding: 0.58rem 0.85rem;
    font-size: 0.88rem;
  }
}

/* ════════════════════════════════════════════════
   SIZE CHART MODAL
   ════════════════════════════════════════════════ */
.size-modal[hidden] {
  display: none;
}
.size-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.size-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 31, 38, 0.6);
  backdrop-filter: blur(2px);
}
.size-modal__panel {
  position: relative;
  margin: auto;
  background: #ffffff;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  /* Гид длинный — панель ограничена по высоте, прокручивается только тело,
     шапка с крестиком остаётся на месте. */
  max-height: min(94vh, 960px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(42, 31, 38, 0.28);
  animation: sizeModalIn 0.2s ease;
}
.size-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.size-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem 1.5rem 1.2rem;
}
.size-modal__lead {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin-bottom: 0.7rem;
}
.size-modal__lead-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-light);
}
.size-modal__lead strong {
  color: var(--text-primary);
  font-weight: 700;
}
.size-modal__cm {
  /* Было display:block — каждая ячейка занимала две строки, и таблица из
     шести размеров переставала помещаться в экран. Теперь метрика идёт
     следом за дюймами через тонкий разделитель. */
  display: inline;
  font-size: 0.76rem;
  color: var(--text-light);
  white-space: nowrap;
}
.size-modal__cm::before {
  content: " · ";
  color: var(--border-soft);
}
/* Строка размера, выбранного покупателем прямо сейчас */
.size-modal__table tr.is-current td {
  background: var(--accent-soft);
}
.size-modal__table tr.is-current td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.size-modal__measure-inner {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.size-modal__diagram {
  flex: 0 0 76px;
  width: 76px;
  height: auto;
  border-radius: 10px;
  background: var(--bg-sand);
}
@media (max-width: 520px) {
  .size-modal__head {
    padding: 0.85rem 1rem 0.7rem;
  }
  .size-modal__body {
    padding: 0.75rem 1rem 1rem;
  }
  /* Схема измерения раньше уходила под текст и одна занимала полэкрана.
     Оставляем её в строке и уменьшаем — гид должен читаться без прокрутки. */
  .size-modal__measure-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7rem;
  }
  .size-modal__diagram {
    flex: 0 0 62px;
    width: 62px;
  }
  .size-modal__table th,
  .size-modal__table td {
    padding: 0.42rem 0.35rem;
    font-size: 0.78rem;
  }
  .size-modal__cm {
    font-size: 0.7rem;
  }
  .size-modal__measure-steps {
    font-size: 0.75rem;
  }
}
/* ---- Гид размеров картинкой -------------------------------------------
   Таблица из шести строк не помещалась в экран ни на ПК, ни на телефоне.
   Картинка влезает целиком; чтобы мелкий шрифт можно было рассмотреть,
   по ней открывается полноэкранный просмотр. */
.size-modal__chartbtn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
}
.size-modal__chart {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
/* Развёрнутая на весь экран картинка гида */
.size-modal__chartbtn.is-zoomed {
  position: fixed;
  inset: 0;
  z-index: 1200;
  width: 100vw;
  height: 100dvh;
  background: rgba(20, 26, 30, 0.94);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  padding: 0.5rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.size-modal__chartbtn.is-zoomed .size-modal__chart {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}
@media (max-width: 640px) {
  /* На телефоне «во весь экран» при вписывании даёт ту же ширину, что и в
     модалке, — читаемее не становится. Показываем крупнее экрана и даём
     прокрутку: так подписи в таблице становятся вдвое больше. */
  .size-modal__chartbtn.is-zoomed {
    /* Начинаем от левого края: при центрировании колонка с названием размера
       уезжала за экран, а именно её человек ищет первой. */
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
  }
  .size-modal__chartbtn.is-zoomed .size-modal__chart {
    width: 168vw;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}
.size-modal__chartbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* С картинкой панель может быть шире и без внутренней прокрутки */
.size-modal__panel:has(.size-modal__chart) {
  max-width: 680px;
}
.size-modal__panel:has(.size-modal__chart) .size-modal__body {
  overflow: visible;
  padding: 0.9rem 1rem 1.1rem;
}
@media (max-width: 520px) {
  /* Каждый пиксель поля — минус к размеру шрифта в таблице */
  .size-modal {
    padding: 0.5rem;
  }
  .size-modal__panel:has(.size-modal__chart) .size-modal__body {
    padding: 0.35rem 0.35rem 0.6rem;
  }
}

@keyframes sizeModalIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.size-modal__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-sand, #f3edef);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary, #2a1f26);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.size-modal__close:hover {
  background: var(--accent, var(--accent));
  color: #fff;
}
.size-modal__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 0.4rem;
}
.size-modal__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}
.size-modal__sub {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 1.2rem;
  line-height: 1.5;
}
.size-modal__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.8rem;
}
.size-modal__table th {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 700;
  padding: 0.5rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: var(--accent-light);
}
.size-modal__table th:first-child {
  border-top-left-radius: 8px;
}
.size-modal__table th:last-child {
  border-top-right-radius: 8px;
}
.size-modal__table td {
  padding: 0.5rem 0.55rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.size-modal__table tr:last-child td {
  border-bottom: 0;
}
.size-modal__table td strong {
  color: var(--accent);
  font-weight: 700;
}
/* Текст только для скринридера: пустой заголовок колонки — ошибка доступности */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Вертикальная плашка слева: Regular против Wide Calf. Это две разные
   колодки, а не соседние размеры, и разделитель должен читаться сразу. */
.size-modal__gcol {
  width: 34px;
  padding: 0 !important;
}
.size-modal__group {
  width: 34px;
  padding: 0.4rem 0 !important;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.size-modal__group span {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Обычные размеры — бледная подложка, широкие — заливка акцентом:
   так «наша» линейка выделяется, ради неё покупатель сюда и пришёл. */
.size-modal__group--regular {
  background: var(--accent-light);
}
.size-modal__group--regular span {
  color: var(--accent);
}
.size-modal__group--wide-calf {
  background: var(--accent);
}
.size-modal__group--wide-calf span {
  color: #fff;
}
.size-modal__table--grouped tr:first-child .size-modal__group {
  border-top-left-radius: 0;
}
.size-modal__note {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  background: var(--bg-sand);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  margin: 0.6rem 0 0;
}

@media (max-width: 480px) {
  /* Внешний padding у панели снят: она флекс-контейнер, отступы задают
     шапка и тело, а лишний слой на узком экране съедал ширину таблицы. */
  .size-modal__title {
    font-size: 1.35rem;
  }
  .size-modal__table th,
  .size-modal__table td {
    padding: 0.55rem 0.45rem;
    font-size: 0.8rem;
  }
}

/* ════════════════════════════════════════════════
   PRODUCT SOCIAL PROOF BADGE (under title)
   ════════════════════════════════════════════════ */
.prod-social-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent-light);
  border-radius: 999px;
  padding: 0.45rem 0.9rem 0.45rem 0.45rem;
  margin: 0 0 0.75rem;
  width: fit-content;
  max-width: 100%;
}
.prod-social-badge__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.prod-social-badge__text {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.prod-social-badge__text strong {
  font-weight: 700;
  color: var(--text-primary);
}
.prod-social-badge__verified {
  display: inline-flex;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: 0 0.25rem 0 0.1rem;
  position: relative;
  top: -1px;
}
.prod-social-badge__verified svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 480px) {
  .prod-social-badge {
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  }
  .prod-social-badge__text {
    font-size: 0.85rem;
  }
}

/* ════════════════════════════════════════════════
   PRODUCT SALE BANNER (after price)
   ════════════════════════════════════════════════ */
.prod-sale-banner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: fit-content;
  margin: 0 0 0.85rem;
  text-align: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s var(--ease);
}
.prod-sale-banner:hover {
  transform: translateY(-1px);
}
.prod-sale-banner__cue {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent, var(--accent));
  letter-spacing: 0.01em;
}
.prod-sale-banner__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  background: linear-gradient(135deg, var(--promo-a) 0%, var(--promo-b) 100%);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0.35rem 1rem;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(var(--promo-rgb), 0.25);
  white-space: nowrap;
}
.prod-sale-banner__flower {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #ffffff;
  flex-shrink: 0;
}
.prod-sale-banner__flower svg {
  width: 100%;
  height: 100%;
}
.prod-sale-banner__bottom {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .prod-sale-banner__top {
    font-size: 1rem;
    padding: 0.3rem 0.8rem;
    gap: 0.45rem;
  }
  .prod-sale-banner__flower {
    width: 14px;
    height: 14px;
  }
  .prod-sale-banner__bottom {
    font-size: 0.92rem;
  }
}

/* ════════════════════════════════════════════════
   PRODUCT FEATURES — Stacked playful list
   ════════════════════════════════════════════════ */
.prod-features--stack {
  background: #ffffff;
  padding: 4rem 1.5rem 4.5rem;
}
.prod-features--stack .section__eyebrow,
.prod-features--stack .section__heading,
.prod-features--stack .section__subheading {
  text-align: center;
}
.prod-features--stack .section__subheading {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.prod-features__list {
  max-width: 580px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.pf-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pf-item__head {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.pf-item__icon {
  display: inline-flex;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.pf-item__icon svg {
  width: 100%;
  height: 100%;
}
.pf-item__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.pf-item__desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
  max-width: 460px;
}

@media (max-width: 600px) {
  .prod-features--stack {
    padding: 3rem 1rem 3.5rem;
  }
  .prod-features__list {
    gap: 2rem;
  }
  .pf-item__icon {
    width: 52px;
    height: 52px;
  }
  .pf-item__title {
    font-size: 1.2rem;
  }
  .pf-item__desc {
    font-size: 0.95rem;
  }
}

/* ════════════════════════════════════════════════
   PRODUCT FEATURES — Inline (right column, centered)
   ════════════════════════════════════════════════ */
.prod-features-inline {
  margin-top: 2.5rem;
  text-align: center;
}
.prod-features-inline.pfi--moved {
  max-width: var(--max-w);
  margin: 0.5rem auto 0;
  padding: 0 1.25rem 2.5rem;
}
.prod-features-inline .section__eyebrow {
  text-align: center;
  margin-bottom: 0.5rem;
}
.prod-features-inline__heading {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  text-align: center;
}
.prod-features-inline__sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 auto 2rem;
  max-width: 420px;
  text-align: center;
}
/* Two per row on wide screens: four full-width rows made the block 1100px tall
   for four short paragraphs. Cards give each point an edge so the pair reads as
   a set rather than as loose text. */
.prod-features-inline__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .prod-features-inline__list {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}
.pfi-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
  padding: 1.6rem 1.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition:
    border-color 0.2s var(--ease),
    box-shadow 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.pfi-item:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 10px 28px rgba(42, 31, 38, 0.07);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .pfi-item:hover {
    transform: none;
  }
}
.pfi-item__head {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.7rem;
  width: 100%;
  max-width: none;
}
.pfi-item__icon {
  display: inline-flex;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  justify-self: center;
}
.pfi-item__head .pfi-item__title {
  justify-self: start;
  text-align: left;
}
.pfi-item__icon svg {
  width: 100%;
  height: 100%;
}
.pfi-item__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.pfi-item__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: none;
  text-align: left;
}

@media (max-width: 600px) {
  .prod-features-inline__heading {
    font-size: 1.5rem;
  }
  .pfi-item__icon {
    width: 64px;
    height: 64px;
  }
  .pfi-item__title {
    font-size: 1.2rem;
  }
  .pfi-item__desc {
    font-size: 0.95rem;
  }
}

/* ════════════════════════════════════════════════
   INLINE ICON FEATURES (after rating in product info) — 2-col grid
   ════════════════════════════════════════════════ */
.prod-icon-feats {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 0.9rem;
}
.prod-icon-feat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
}
/* Trust icons sit in calm slate, not brand magenta — magenta is reserved for the
   CTA and the selected bundle, so it keeps its pull. */
.prod-icon-feat__circle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  background: transparent;
}
.prod-icon-feat__circle svg {
  width: 14px;
  height: 14px;
}
.prod-icon-feat__txt {
  padding-top: 0;
  min-width: 0;
}
.prod-icon-feat__title {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.prod-icon-feat__desc {
  display: none;
}

@media (max-width: 600px) {
  .prod-icon-feats {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 0.6rem;
  }
  .prod-icon-feat {
    gap: 0.4rem;
  }
  .prod-icon-feat__circle {
    width: 24px;
    height: 24px;
  }
  .prod-icon-feat__circle svg {
    width: 12px;
    height: 12px;
  }
  .prod-icon-feat__title {
    font-size: 0.76rem;
  }
}

/* === CART DRAWER === */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.cart-drawer.is-open {
  pointer-events: auto;
}
.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 31, 38, 0.5);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.cart-drawer.is-open .cart-drawer__backdrop {
  opacity: 1;
}
.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(440px, 92vw);
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
}
.cart-drawer.is-open .cart-drawer__panel {
  transform: translateX(0);
}
/* Прокрутку блокирует overflow на <html> из JS — правило для body убрано:
   position:fixed схлопывал документ и ломал возврат позиции. */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #f0e6e9;
  flex-shrink: 0;
}
.cart-drawer__title {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.cart-drawer__badge {
  /* Reads as "Your Cart • 4" — the count is a quiet detail, not a chip */
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  color: var(--text-secondary, #6b5560);
  font-size: 1.12rem;
  font-weight: 600;
  min-width: 0;
  height: auto;
  padding: 0;
  border-radius: 0;
}
.cart-drawer__badge::before {
  content: "\2022";
  color: var(--text-light, #9b8088);
}
.cart-drawer__close {
  background: transparent;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--text-primary, #2a1f26);
  display: flex;
}
.cart-drawer__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  padding: 0.55rem 1.5rem;
  background: #ecf6ed;
  font-size: 0.8rem;
  color: #1f5b2c;
  font-weight: 600;
  flex-shrink: 0;
}
/* Free-shipping confirmation strip at the top of the drawer */
.cart-ship {
  flex-shrink: 0;
  padding: 0.7rem 1.5rem 0.85rem;
  border-bottom: 1px solid var(--line-soft, rgba(42, 31, 38, 0.07));
}
.cart-ship__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--text-primary);
}
.cart-ship__row b {
  font-weight: 800;
}
.cart-ship__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}
.cart-ship__icon svg {
  width: 14px;
  height: 14px;
}
.cart-ship__bar {
  margin-top: 0.55rem;
  height: 7px;
  border-radius: 999px;
  background: var(--accent-soft, var(--accent-soft));
  overflow: hidden;
}
.cart-ship__bar span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.cart-drawer__row--ship {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 0.45rem;
}
.cart-drawer__row--ship strong {
  font-weight: 700;
  color: var(--text-primary);
}
.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  /* Stop the page behind from taking over once this list hits its end. */
  overscroll-behavior: contain;
  padding: 1rem 1.5rem;
}
.cart-drawer__empty {
  text-align: center;
  padding: 2rem 0;
}
.cart-drawer__empty p {
  margin: 0 0 1.25rem;
  color: #6b5862;
}
.cart-line {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.85rem;
  align-items: stretch;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f5ecef;
}
.cart-line:last-child {
  border-bottom: 0;
}
.cart-line.is-loading {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.12s var(--ease);
}
.cart-line__qty button:active {
  background: var(--accent-light, #fdf2f4);
  transform: scale(0.92);
}
.cart-line__media {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--accent-light, #fdf2f4);
}
.cart-line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100px;
}
.cart-line__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.cart-line__title {
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-line__remove {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 2px;
  color: #b6a4ab;
  cursor: pointer;
  line-height: 0;
}
.cart-line__remove:hover {
  color: var(--accent, var(--accent));
}
.cart-line__opt {
  color: #6b5862;
  font-size: 0.78rem;
  line-height: 1.3;
  margin-top: 0.06rem;
}
.cart-line__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.3rem;
}
.cart-line__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2d2d7;
  border-radius: 8px;
  overflow: hidden;
}
.cart-line__qty button {
  width: 26px;
  height: 26px;
  background: #fff;
  border: 0;
  font-size: 1.05rem;
  cursor: pointer;
  color: var(--text-primary, #2a1f26);
}
.cart-line__qty button:hover {
  background: var(--accent-light, #fdf2f4);
}
.cart-line__qty span {
  min-width: 26px;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}
.cart-line__qty--locked {
  border: 1px solid #ece0e4;
  background: #fff;
  border-radius: 7px;
  padding: 0.18rem 0.5rem;
}
.cart-line__qty--locked span {
  min-width: 0;
  font-size: 0.76rem;
  color: var(--text-primary, #2a1f26);
  font-weight: 700;
}
.cart-line__prices {
  text-align: right;
}
.cart-line__price {
  font-weight: 700;
  font-size: 0.95rem;
}
.cart-line__price s {
  color: #b6a4ab;
  font-weight: 400;
  margin-right: 0.25rem;
}
.cart-line__save {
  color: #1f9d4d;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-top: 0.05rem;
}
.cart-line__tag,
.cart-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #f3edef;
  color: #6b5862;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
}
.cart-line__tag {
  margin-top: 0.3rem;
}
.cart-drawer__foot {
  border-top: 1px solid #f0e6e9;
  padding: 0.85rem 1.5rem 1.1rem;
  flex-shrink: 0;
  background: #fff;
}
.cart-drawer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-drawer__row--discount {
  font-size: 0.9rem;
  color: #1f9d4d;
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.cart-drawer__disc-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cart-drawer__row--discount .cart-tag {
  background: #e8f6ee;
  color: #1f9d4d;
}
.cart-drawer__row--discount strong {
  font-weight: 700;
}
.cart-drawer__row--total {
  font-size: 1rem;
  margin-bottom: 0.7rem;
}
.cart-drawer__row--total strong {
  font-size: 1.3rem;
}
.cart-drawer__note-inline {
  font-weight: 400;
  font-size: 0.7rem;
  color: #8a7a7e;
}
.cart-drawer__checkout {
  display: block;
  width: 100%;
  padding: 0.95rem;
  text-align: center;
  background: var(--accent, var(--accent));
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}
.cart-drawer__checkout:hover {
  background: var(--accent-hover, var(--accent-hover));
}
.cart-drawer__pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 0.75rem;
}
.cart-drawer__pay-ico {
  height: 22px;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(42, 31, 38, 0.06);
}

.shoppay-wrap {
  margin-top: 0.9rem;
}
.shoppay-wrap[hidden] {
  display: none !important;
}
/* The Shop Pay button lives inside the <shopify-accelerated-checkout> web
   component (shadow DOM), so it can only be sized via Shopify's own custom
   properties. Match .btn-atc exactly: 57px tall, full width, pill radius. */
.shoppay-wrap shopify-accelerated-checkout,
.shoppay-wrap shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-block-size: 57px;
  --shopify-accelerated-checkout-button-inline-size: 100%;
  --shopify-accelerated-checkout-button-border-radius: 999px;
  --shopify-accelerated-checkout-inline-alignment: center;
  display: block;
  width: 100%;
}
.shoppay-wrap .shopify-payment-button__button {
  border-radius: var(--r-btn, 999px);
  min-height: 57px;
  width: 100%;
}
.shoppay-wrap .shopify-payment-button__more-options {
  display: none !important;
}
.prod-payment-sec {
  margin: 1.1rem 0 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid #eee;
}
.prod-payment-sec__title {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #28161c);
}
.prod-payment-sec__sub {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  color: var(--text-light, #6b5a5f);
}
.prod-payment-sec__note {
  margin: 0.65rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-light, #8a7a7e);
}
.prod-payment-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}
.prod-payment-icons .payment-icon,
.prod-payment-icons svg {
  height: 24px;
  width: auto;
  display: block;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  background: #fff;
  padding: 1px 2px;
}
@media (max-width: 600px) {
  .prod-payment-icons .payment-icon,
  .prod-payment-icons svg {
    height: 22px;
  }
}

/* Per-product intro line under product title */
.product-info__intro {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0.5rem 0 0.2rem;
  max-width: 46ch;
}

/* Cart drawer upsell — compact "Frequently bought with" row in body */
.cart-upsell {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid #f5ecef;
}
.cart-upsell__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a7a7e;
  margin-bottom: 0.5rem;
}
.cart-upsell__card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--bg-sand, #f7f4f0);
  border-radius: 10px;
  padding: 0.55rem 0.6rem;
}
.cart-upsell__media {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.cart-upsell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-upsell__info {
  flex: 1;
  min-width: 0;
}
.cart-upsell__title {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 0.1rem;
}
.cart-upsell__price {
  font-size: 0.82rem;
  color: var(--text-primary);
}
.cart-upsell__price s {
  color: #b6a4ab;
  margin-right: 0.3rem;
}
.cart-upsell__add {
  flex: 0 0 auto;
  background: var(--accent, var(--accent));
  color: #fff;
  border: 0;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cart-upsell__add:hover {
  background: var(--accent-hover, var(--accent-hover));
}
.cart-upsell__add:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Image logo (replaces text wordmark) ── */
.logo-wordmark {
  display: inline-flex;
  align-items: center;
}
.logo-img {
  height: 34px;
  width: auto;
  display: block;
}
.footer-logo .logo-img--footer {
  height: 26px;
}
@media (max-width: 960px) {
  .logo-img {
    height: 28px;
  }
}

/* ══ ПОЛНОЭКРАННЫЙ ПРОСМОТР ФОТО ══ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem;
  background: rgba(18, 12, 15, 0.94);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox[hidden] {
  display: none !important;
}
.lightbox.is-open {
  opacity: 1;
}
.lightbox__img {
  max-width: min(1100px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  /* Картинку не листаем пальцем как ссылку — жест обрабатывает скрипт */
  -webkit-user-drag: none;
  user-select: none;
}
/* Пока открыто окно, страница под ним стоять должна на месте */
body.lightbox-open {
  overflow: hidden;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.26);
}
.lightbox__close {
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  padding: 11px;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 12px;
}
.lightbox__nav:hover {
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav--prev {
  left: 1rem;
}
.lightbox__nav--next {
  right: 1rem;
}
.lightbox__close svg,
.lightbox__nav svg {
  width: 100%;
  height: 100%;
}
.lightbox__counter {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) {
  .lightbox {
    padding: 3rem 0.5rem;
  }
  /* На телефоне стрелки только мешают — там листают свайпом */
  .lightbox__nav {
    display: none;
  }
  .lightbox__close {
    top: 0.6rem;
    right: 0.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__nav {
    transition: none;
  }
}

/* Ролик в блоке «картинка + текст» ведёт себя как картинка: тот же бокс,
   то же кадрирование. Раньше эти анимации были <img> с анимированным WebP. */
.image-text__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Гарантия, обмен и доставка — одна векторная картинка вместо трёх блоков */
.trust-badges {
  margin: 1.25rem auto 0;
  max-width: 430px;
  text-align: center;
}
.trust-badges img {
  width: 100%;
  height: auto;
  display: block;
}