/* ============================================================
   ХУТКА СМАЧНА — Design System v2 «Беларускі смак»
   Единый источник правды для сайта, меню, калькулятора и
   рекламных материалов. Токены → компоненты → утилиты.
   ============================================================ */

/* ---------- 1. ШРИФТЫ ---------- */
@import url("https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  /* ---------- 2. ЦВЕТ ---------- */

  /* Основа — тёплая кремовая бумага */
  --c-cream:      #fbf6ec;
  --c-cream-2:    #f5eddf;
  --c-cream-3:    #efe3d0;
  --c-card:       #ffffff;

  /* Кирпичный — главный акцент бренда */
  --c-brick-50:   #fdf0ee;
  --c-brick-100:  #f7d5cf;
  --c-brick-300:  #e08477;
  --c-brick:      #c0392b;
  --c-brick-700:  #a52f22;
  --c-brick-900:  #7d2318;

  /* Золото — вторичный акцент (колосья, черта, звёзды) */
  --c-gold-100:   #f7e6c8;
  --c-gold:       #e0a24a;
  --c-gold-700:   #c1832f;

  /* Текст */
  --c-ink:        #2a2019;
  --c-ink-2:      #6a5d4f;
  --c-ink-3:      #9b8d7d;

  /* Линии и подложки */
  --c-line:       #e7dcc7;
  --c-line-soft:  #f0e7d6;

  /* Подвал — бордо */
  --c-footer:     #4a1a12;
  --c-footer-2:   #3b140d;

  /* Семантика */
  --c-bg:         var(--c-cream);
  --c-surface:    var(--c-card);
  --c-text:       var(--c-ink);
  --c-text-muted: var(--c-ink-2);
  --c-accent:     var(--c-brick);
  --c-accent-2:   var(--c-gold);

  /* ---------- 3. ТИПОГРАФИКА ---------- */
  --font-display: "Bitter", "PT Serif", Georgia, serif;
  --font-body:    "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Модульная шкала (1.25) — от подписи до дисплея */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.15rem;
  --t-lg:   1.4rem;
  --t-xl:   1.85rem;
  --t-2xl:  2.4rem;
  --t-3xl:  3.2rem;
  --t-4xl:  clamp(2.8rem, 6vw, 4.6rem);
  --t-hero: clamp(3.2rem, 8vw, 6.5rem);

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  --ls-tight: -0.03em;
  --ls-wide:  0.08em;
  --ls-caps:  0.16em;

  /* ---------- 4. РИТМ / ОТСТУПЫ (база 4px) ---------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  --section-y: clamp(3.5rem, 9vw, 7rem);
  --wrap:      1440px;
  --wrap-wide: 1680px;
  --gutter:    clamp(1rem, 4vw, 3rem);

  /* ---------- 5. СКРУГЛЕНИЯ ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-full: 999px;

  /* ---------- 6. ТЕНИ (тёплые, не серые) ---------- */
  --sh-1: 0 1px 2px rgba(74, 26, 18, 0.05),
          0 2px 8px rgba(74, 26, 18, 0.04);
  --sh-2: 0 4px 12px rgba(74, 26, 18, 0.07),
          0 12px 28px rgba(74, 26, 18, 0.06);
  --sh-3: 0 10px 24px rgba(74, 26, 18, 0.10),
          0 28px 60px rgba(74, 26, 18, 0.10);
  --sh-brick: 0 8px 24px rgba(192, 57, 43, 0.28);

  /* ---------- 7. ДВИЖЕНИЕ ---------- */
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 620ms;
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);   /* мягкий выход */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 8. ФИРМЕННЫЕ ПАТТЕРНЫ ---------- */
  /* Вышыванка-стужка (полоса-разделитель) */
  --pattern-ornament: url("https://hutka.lead-seek.ru/assets/ornament.png");
  /* Тонкая «бумажная» текстура */
  --pattern-paper:
    radial-gradient(circle at 20% 30%, rgba(224,162,74,0.05) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(192,57,43,0.04) 0 2px, transparent 3px);
}

/* ============================================================
   БАЗА
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  font-weight: 700;
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ============================================================
   КОМПОНЕНТЫ
   ============================================================ */

/* ---------- Контейнер ---------- */
.ds-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.ds-wrap--wide { max-width: var(--wrap-wide); }

.ds-section { padding-block: var(--section-y); }

/* ---------- Надзаголовок (eyebrow) ---------- */
.ds-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-brick);
}
.ds-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--c-gold);
}

/* ---------- Заголовок секции ---------- */
.ds-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-7);
}
.ds-section-title { font-size: var(--t-2xl); }
.ds-section-sub {
  color: var(--c-text-muted);
  font-size: var(--t-md);
  max-width: 52ch;
  margin-top: var(--s-3);
}

/* ---------- Кнопки ---------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.95rem 1.9rem;
  border: 0;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              background-color var(--dur-base) var(--ease);
}
.ds-btn--primary {
  background: var(--c-brick);
  color: #fff;
  box-shadow: var(--sh-brick);
}
.ds-btn--primary:hover {
  background: var(--c-brick-700);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(192, 57, 43, 0.36);
}
.ds-btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-line);
}
.ds-btn--ghost:hover {
  border-color: var(--c-brick);
  color: var(--c-brick);
  transform: translateY(-2px);
}
.ds-btn--gold {
  background: var(--c-gold);
  color: var(--c-footer);
}
.ds-btn--gold:hover { background: var(--c-gold-700); transform: translateY(-2px); }

/* ---------- Карточка ---------- */
.ds-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.ds-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: var(--c-brick-100);
}
.ds-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-cream-2);
}
.ds-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.ds-card:hover .ds-card__media img { transform: scale(1.06); }
.ds-card__body { padding: var(--s-5); }
.ds-card__title {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
}
.ds-card__text {
  color: var(--c-text-muted);
  font-size: var(--t-sm);
  margin-top: var(--s-2);
}
.ds-card__price {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 800;
  color: var(--c-brick);
  margin-top: var(--s-4);
}

/* ---------- Пилюля / тег ---------- */
.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-full);
  background: var(--c-brick-50);
  border: 1px solid var(--c-brick-100);
  color: var(--c-brick-700);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ds-pill--gold {
  background: var(--c-gold-100);
  border-color: var(--c-gold);
  color: var(--c-gold-700);
}

/* ---------- Тёмная секция (бордо) ----------
   Переопределяет токены внутри блока — компоненты подхватывают
   новые значения сами, дублировать стили не нужно. */
.ds-dark {
  --c-text:       #f7ece4;
  --c-text-muted: #d6bcb1;
  --c-ink:        #f7ece4;
  --c-ink-2:      #d6bcb1;
  --c-ink-3:      #b59a90;
  --c-line:       rgba(255, 255, 255, 0.16);
  --c-line-soft:  rgba(255, 255, 255, 0.10);
  --c-surface:    rgba(255, 255, 255, 0.06);
  --c-brick:      var(--c-gold);          /* надзаголовки и акценты — золотом */
  background: linear-gradient(180deg, #4a1a12 0%, #3b140d 100%);
  color: var(--c-text);
}
.ds-dark .ds-eyebrow::before { background: var(--c-gold); }
.ds-dark .ds-pill {
  background: rgba(224, 162, 74, 0.14);
  border-color: rgba(224, 162, 74, 0.42);
  color: #f0cf9a;
}
.ds-dark .ds-btn--ghost { color: #f7ece4; border-color: rgba(255,255,255,.28); }
.ds-dark .ds-btn--ghost:hover { border-color: var(--c-gold); color: var(--c-gold); background: rgba(255,255,255,.05); }

/* ---------- Вышыванка-стужка ---------- */
.ds-ribbon {
  height: 34px;
  background-image: var(--pattern-ornament);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-color: var(--c-cream-2);
  border-block: 1px solid var(--c-line);
}
.ds-ribbon--thin { height: 22px; opacity: 0.8; }

/* ---------- Золотая черта ---------- */
.ds-rule {
  width: 72px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-700));
  border-radius: var(--r-full);
}

/* ============================================================
   ДВИЖЕНИЕ — появление при скролле
   Контент виден по умолчанию; анимация — улучшение.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .ds-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  .ds-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Каскад для групп */
  .ds-reveal[data-delay="1"] { transition-delay: 80ms; }
  .ds-reveal[data-delay="2"] { transition-delay: 160ms; }
  .ds-reveal[data-delay="3"] { transition-delay: 240ms; }
  .ds-reveal[data-delay="4"] { transition-delay: 320ms; }
}

/* Плавающий параллакс-элемент */
@keyframes ds-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(2deg); }
}
.ds-float { animation: ds-float 7s ease-in-out infinite; }

/* Бегущая строка */
@keyframes ds-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   УТИЛИТЫ
   ============================================================ */
.ds-grid { display: grid; gap: var(--s-5); }
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.ds-stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.ds-row     { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.ds-muted   { color: var(--c-text-muted); }
.ds-serif   { font-family: var(--font-display); }
.ds-center  { text-align: center; }
.ds-paper   { background-image: var(--pattern-paper); background-size: 180px 180px; }

/* ============================================================
   ФАКТУРЫ СЕКЦИЙ
   Полутоновые карты (средний тон = серый 128) кладутся режимом
   soft-light поверх базового цвета: цвет секции не сдвигается,
   добавляется только рельеф. Контраст фактур ~3% — на грани
   заметности, чтобы мелкий текст и карточки читались.
   ============================================================ */
.ds-tex {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* Бумага с тиснёной вышыванкой по верхней и нижней кромке.
   Орнамент держится за края секции, центр остаётся пустым под контент. */
.ds-tex--vysh {
  background-color: var(--c-cream);
  background-image:
    radial-gradient(120% 90% at 78% 0%, rgba(255,255,255,.5), transparent 62%),
    url("assets/tex/vysh.webp");
  background-blend-mode: normal, soft-light;
}
/* Светлое дерево с мучной пылью — под «наши хиты». */
.ds-tex--wood {
  background-color: var(--c-cream-2);
  background-image:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.4), transparent 60%),
    url("assets/tex/wood.webp");
  background-blend-mode: normal, soft-light;
}
/* Льняной рушник — плетение мелкое, поэтому плиткой, а не растяжкой. */
.ds-tex--linen {
  background-color: var(--c-cream);
  background-image:
    radial-gradient(130% 90% at 50% 0%, rgba(255,255,255,.45), transparent 65%),
    url("assets/tex/linen.webp");
  background-repeat: no-repeat, repeat;
  background-size: cover, 380px 380px;
  background-blend-mode: normal, soft-light;
}
/* Старые браузеры без blend-mode: фактура убирается, остаётся чистый цвет —
   лучше плоско, чем светлое пятно поверх секции. */
@supports not (background-blend-mode: soft-light) {
  .ds-tex { background-image: none !important; }
}

/* ============================================================
   ФОТО-ФОН СЕКЦИЙ
   Как в герое: снимок + кремовая вуаль. Вуаль плотнее там, где
   лежит текст, и отпускает к дальнему краю, где в кадре предметы.
   Карточки поверх непрозрачные, поэтому фон читается в промежутках.
   ============================================================ */
.ds-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }

.ds-bg--kitchen {
  background-color: var(--c-cream);
  background-image:
    linear-gradient(100deg, rgba(251,246,236,.93) 0%, rgba(251,246,236,.84) 34%, rgba(251,246,236,.55) 68%, rgba(251,246,236,.34) 100%),
    url("assets/bg/kitchen.webp");
}
/* ------------------------------------------------------------
   ЛЕНТА: одна фотография сразу под несколькими секциями.
   Секции внутри прозрачные — стыка между ними не видно.
   attachment:fixed, иначе снимок пришлось бы растянуть на всю
   высоту двух секций и он поплыл бы в мыло.
   ------------------------------------------------------------ */
.ds-band { position: relative; }
.ds-band > .ds-section { background: transparent; }
.ds-band--kitchen {
  background-color: var(--c-cream);
  background-image:
    linear-gradient(100deg, rgba(251,246,236,.93) 0%, rgba(251,246,236,.85) 34%, rgba(251,246,236,.58) 68%, rgba(251,246,236,.38) 100%),
    url("assets/bg/kitchen.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 900px) {
  /* fixed-фон на телефонах тормозит скролл и глючит в iOS Safari */
  .ds-band--kitchen {
    background-attachment: scroll;
    background-image:
      linear-gradient(180deg, rgba(251,246,236,.90) 0%, rgba(251,246,236,.82) 50%, rgba(251,246,236,.93) 100%),
      url("assets/bg/kitchen-sm.webp");
  }
}
.ds-bg--tea {
  background-color: var(--c-cream);
  background-image:
    linear-gradient(80deg, rgba(251,246,236,.88) 0%, rgba(251,246,236,.80) 30%, rgba(251,246,236,.58) 66%, rgba(251,246,236,.40) 100%),
    url("assets/bg/tea.webp");
}

/* Телефоны: лёгкие версии снимков и вуаль плотнее — на узком экране
   контент занимает весь кадр и фон обязан уйти на второй план. */
@media (max-width: 900px) {
  .ds-bg--kitchen {
    background-image:
      linear-gradient(180deg, rgba(251,246,236,.90) 0%, rgba(251,246,236,.80) 55%, rgba(251,246,236,.92) 100%),
      url("assets/bg/kitchen-sm.webp");
  }
  .ds-bg--tea {
    background-image:
      linear-gradient(180deg, rgba(251,246,236,.88) 0%, rgba(251,246,236,.78) 55%, rgba(251,246,236,.92) 100%),
      url("assets/bg/tea-sm.webp");
  }
}