/* ============================================================
   ТЁМНАЯ ТЕМА МОБИЛЬНОЙ ВЕРСИИ САЙТА (templates/index_mobile.html)
   ============================================================
   Полный аналог static/styles-mobile.css — по тому же принципу,
   что и пара static/styles.css / static/styles-dark.css для
   десктопной версии: переключение темы полностью подменяет
   подключённый файл стилей (см. applyTheme() в index_mobile.html),
   поэтому здесь продублирована ВСЯ вёрстка мобильной страницы,
   а не только изменившиеся цвета.

   Палитра ориентирована на static/styles-dark.css (десктопная
   тёмная тема): фон #121212, поверхности (карточки/шапка) #1e1e1e,
   текст #e0e0e0-ish, фирменный красный #c41e3a не меняется ни в
   одной из тем. Большая часть правил ниже перетекает в тёмную
   тему автоматически — они используют переменные из :root (см.
   static/styles-mobile.css: почти все цвета вынесены в custom
   properties). Отдельно, «по месту», переопределены только те
   участки, где светлые оттенки не тянутся к тёмному фону сами —
   как правило, это некий выделенный "фирменный" тон вроде жёлтой
   подсказки каталога или бледно-зелёной плашки скидки, а не
   часть общей палитры (см. пометки "ТЁМНАЯ ТЕМА:" по тексту).
   ============================================================ */

    :root {
      --primary: #c41e3a;
      --primary-dark: #a01830;
      /* Было #ffe5ea (бледно-розовый) — на тёмном фоне светлое пятно
         смотрелось бы случайным и выбивалось из темы. Тёмный винный
         тон держит тот же оттенок бренда, но уже как приглушённая
         подложка, а не яркое пятно. */
      --primary-light: #3a1a22;
      --text: #e6e6e6;
      --text-light: #b0b0b0;
      --text-muted: #7d7d7d;
      --bg: #121212;
      /* Несмотря на имя (унаследовано от светлой темы), эта переменная
         используется по всему файлу не как "белый цвет", а как токен
         поверхности/карточки (фон шапки, кнопок-иконок, секций,
         карточки товара — см. static/styles-mobile.css). Поэтому здесь
         она темнеет до тёмно-серой поверхности — как .header/.product-card
         в десктопном static/styles-dark.css (#1e1e1e), а не остаётся
         белой. Абсолютно белый цвет (текст/иконки на цветных плашках)
         в файле нигде не завязан на эту переменную — задан напрямую
         (white/#fff) и одинаков в обеих темах. */
      --white: #1e1e1e;
      --border: #333333;
      --success: #4caf50;
      --warning: #ff9800;
      --danger: #f44336;
      --telegram: #0088cc;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
      --shadow-md: 0 4px 14px rgba(0,0,0,0.5);
      --shadow-lg: 0 8px 28px rgba(0,0,0,0.55);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      /* Тёмная цветовая схема — нативные чекбоксы/радиокнопки (форма
         быстрого заказа: способ получения, согласие на обработку
         данных) и скроллбар получают тёмный вид от браузера сами,
         без этого они остаются светлыми "по умолчанию" и на тёмном
         фоне выглядят чужеродными яркими пятнами. */
      color-scheme: dark;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      color: var(--text);
      background: var(--bg);
      padding-bottom: calc(80px + var(--safe-bottom));
      overscroll-behavior-y: contain;
    }

    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; cursor: pointer; }

    /* === ШАПКА === */
    .header {
      background: var(--white);
      padding: 10px 16px;
      padding-top: calc(10px + env(safe-area-inset-top, 0px));
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: var(--shadow-sm);
      /* ТЁМНАЯ ТЕМА: на тёмном фоне страницы даже усиленная тень слабо
         отделяет шапку от контента — добавляем тонкую границу, как у
         .header в десктопном static/styles-dark.css. */
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      /* 15px вместо 17px — как в static/styles-mobile.css: на узких
         экранах слово "Farm" в .wordmark иначе переносилось на вторую
         строку. */
      font-size: 15px;
    }

    /* Кружок под логотип — как в static/styles-mobile.css, размер как у
       КНОПКИ КОРЗИНЫ (#cart-button, увеличенная 56×56px), а не у обычных
       .icon-btn (42×42px). */
    .logo-img {
      width: 56px;
      height: 56px;
      /* flex-shrink: 0 — как в static/styles-mobile.css: без него картинка
         (replaced-элемент) ужимается в тесной шапке сильнее, чем текст, и
         кружок с лого выходит мельче круглых кнопок в .header-actions. */
      flex-shrink: 0;
      box-sizing: border-box;
      padding: 7px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--white);
      object-fit: contain;
      /* ТЁМНАЯ ТЕМА: лёгкое повышение яркости логотипа — как у .logo-img
         в десктопном static/styles-dark.css, чтобы картинка не выглядела
         тусклой на тёмной подложке. */
      filter: brightness(1.08);
    }

    /* Начертание бренда — Cormorant, капитель, точки-разделители между
       словами и лёгкое сжатие ширины (90%); используется в шапке рядом
       с логотипом и в футере (класс добавляется поверх .logo/.footer-brand,
       не заменяет их). */
    .wordmark {
      font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      display: inline-block;
      transform: scaleX(0.9);
      transform-origin: left center;
    }

    .wordmark-dot {
      display: inline-block;
      width: 0.28em;
      height: 0.28em;
      margin: 0 0.14em;
      border-radius: 50%;
      background: var(--primary);
      /* vertical-align: middle центрирует точку по x-height, а текст —
         КАПИТЕЛЬ (text-transform: uppercase у .wordmark), у которой
         заглавные заметно выше x-height, из-за чего точка съезжала вниз
         относительно букв. Фиксированное смещение поднимает её к
         оптическому центру заглавных (см. static/styles.css). Значение
         0.18em измерено напрямую на живой странице — 0.08em было мало. */
      vertical-align: 0.18em;
    }

    .header-actions {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .icon-btn {
      position: relative;
      width: 42px;
      height: 42px;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      line-height: 1;
      color: var(--text);
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s;
      -webkit-tap-highlight-color: transparent;
    }

    .icon-btn:active { transform: scale(0.92); }
    .icon-btn--primary { background: var(--primary); color: white; border-color: var(--primary); }

    .cart-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      background: var(--primary);
      color: #fff;
      border-radius: 10px;
      font-size: 12px;
      min-width: 20px;
      height: 20px;
      padding: 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* === КОРЗИНА: увеличенная, заметная кнопка (аналог плавающей кнопки Telegram) === */
    #cart-button {
      width: 56px;
      height: 56px;
    }

    #cart-button .cart-icon-emoji {
      display: inline-block;
      font-size: 26px;
      line-height: 1;
    }

    #cart-button .cart-badge {
      top: -4px;
      right: -4px;
      min-width: 22px;
      height: 22px;
      font-size: 12px;
    }

    /* Мягкое пульсирующее свечение, пока в корзине есть хотя бы один товар — как у кнопки Telegram */
    #cart-button.has-items {
      animation: cartGlow 2s ease-in-out infinite;
    }

    @keyframes cartGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.35); }
      50% { box-shadow: 0 0 0 9px rgba(196, 30, 58, 0); }
    }

    /* Разовое "дрожание" иконки в момент добавления товара в корзину */
    #cart-button.cart-bump .cart-icon-emoji {
      animation: cartBump 0.6s ease;
    }

    @keyframes cartBump {
      0%, 100% { transform: rotate(0deg) scale(1); }
      15% { transform: rotate(-16deg) scale(1.1); }
      30% { transform: rotate(13deg) scale(1.1); }
      45% { transform: rotate(-10deg) scale(1.05); }
      60% { transform: rotate(8deg) scale(1.05); }
      75% { transform: rotate(-4deg) scale(1.02); }
      90% { transform: rotate(2deg) scale(1.01); }
    }

    /* === HERO === */
    .hero {
      padding: 24px 20px 20px;
      background: linear-gradient(135deg, var(--primary-light) 0%, var(--white) 100%);
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--white);
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 12px;
      box-shadow: var(--shadow-sm);
      /* ТЁМНАЯ ТЕМА: плашка лежит на тёмном градиенте hero, а не на
         нейтральном фоне — одной тени недостаточно, чтобы её отделить,
         добавляем тонкую границу (тот же приём, что и у .header выше). */
      border: 1px solid var(--border);
    }

    .hero-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7); }
      70% { box-shadow: 0 0 0 8px rgba(46, 125, 50, 0); }
      100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
    }

    /* Ферма "на каникулах" (Settings → is_working=0) — см. тот же приём
       и комментарий в static/styles-mobile.css. */
    .hero-badge--off::before {
      background: var(--danger);
      box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
      animation: pulse-danger 2s infinite;
    }

    @keyframes pulse-danger {
      0% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7); }
      70% { box-shadow: 0 0 0 8px rgba(244, 67, 54, 0); }
      100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0); }
    }

    .hero h1 {
      font-size: 26px;
      font-weight: 800;
      line-height: 1.15;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .hero p {
      color: var(--text-light);
      font-size: 15px;
    }

    /* === ПРЕИМУЩЕСТВА === */
    .advantages {
      padding: 16px 12px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      background: var(--white);
      margin-bottom: 8px;
    }

    .advantage {
      text-align: center;
      padding: 12px 4px;
      border-radius: var(--radius-sm);
      transition: background 0.2s;
    }

    .advantage:active { background: var(--bg); }
    .advantage-icon { font-size: 28px; margin-bottom: 4px; }
    .advantage-text {
      font-size: 11px;
      color: var(--text-light);
      line-height: 1.3;
      font-weight: 500;
    }

    /* === СЕКЦИИ === */
    .section {
      background: var(--white);
      padding: 20px;
      margin-bottom: 8px;
    }

    .section-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 16px;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* === ЛЕНТА ПОСТОВ TELEGRAM (см. templates/index_mobile.html,
       блок между "Уход за цветами" и "Наша ферма") === */
    .tg-feed {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .tg-post {
      display: flex;
      gap: 12px;
      padding: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      transition: box-shadow 0.2s ease;
    }

    .tg-post:active { box-shadow: var(--shadow-sm); }

    .tg-post-image-wrap {
      position: relative;
      flex-shrink: 0;
    }

    .tg-post-image {
      width: 72px;
      height: 72px;
      flex-shrink: 0;
      border-radius: var(--radius-sm);
      object-fit: cover;
      background: var(--border);
    }

    /* Бейдж общего числа фото у поста-альбома — см. подробный комментарий
       в паре, static/styles-mobile.css. Полупрозрачная тёмная подложка
       одинаково читается на любом фото независимо от темы сайта, поэтому
       значения те же, что и в светлой теме. */
    .tg-post-photo-count {
      position: absolute;
      right: 3px;
      bottom: 3px;
      padding: 1px 5px;
      font-size: 10px;
      line-height: 1.6;
      color: #fff;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 999px;
    }

    .tg-post-body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 4px;
    }

    .tg-post-text {
      font-size: 14px;
      line-height: 1.4;
      color: var(--text);
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .tg-post-text-empty { color: var(--text-light); font-style: italic; }

    .tg-post-footer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      flex-wrap: wrap;
    }

    .tg-post-date {
      font-size: 12px;
      color: var(--text-light);
    }

    .tg-post-reactions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 4px;
      margin-left: auto;
    }

    .tg-reaction {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 1px 6px;
      font-size: 11px;
      line-height: 1.6;
      color: var(--text-light);
      background: var(--border);
      border-radius: 999px;
      font-variant-numeric: tabular-nums;
    }

    .tg-feed-more {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 14px;
      font-size: 14px;
      font-weight: 600;
      color: var(--telegram);
    }

    .tg-feed-empty {
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-light);
    }

    .tg-feed-empty a {
      color: var(--telegram);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* === КАК ЗАКАЗАТЬ === */
    .steps { display: flex; flex-direction: column; gap: 14px; }

    .step {
      display: flex;
      gap: 14px;
      align-items: flex-start;
    }

    .step-num {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      background: var(--primary);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
    }

    .step-text { font-size: 14px; padding-top: 5px; }
    .step-text strong { display: block; margin-bottom: 2px; font-size: 15px; }
    .step-text span { color: var(--text-light); }

    /* === КАТАЛОГ (СВАЙП) === */
    .catalog { background: var(--white); padding: 20px 0; margin-bottom: 8px; }

    .catalog-header {
      padding: 0 20px 16px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .catalog-header h2 {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .catalog-counter {
      font-size: 13px;
      color: var(--text-light);
      background: var(--bg);
      padding: 4px 10px;
      border-radius: 12px;
      font-weight: 500;
    }

    .categories-scroll {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 0 20px 16px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .categories-scroll::-webkit-scrollbar { display: none; }

    .category-chip {
      flex-shrink: 0;
      padding: 8px 16px;
      background: var(--bg);
      border: 1px solid transparent;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      color: var(--text);
      transition: all 0.2s;
    }

    .category-chip.active {
      background: var(--primary);
      color: white;
      box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
    }

    .products-carousel {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 14px;
      padding: 8px 20px 20px;
      scroll-padding: 20px;
    }
    .products-carousel::-webkit-scrollbar { display: none; }

    /* ТЁМНАЯ ТЕМА: медово-жёлтая подсказка каталога (#fff7e6/#ffe4b3) —
       фирменный "тёплый" тон, не часть общей палитры, поэтому на тёмном
       фоне не тянется автоматически. Держим тот же смысл (жёлтая
       подсказка), но приглушённым — тёмно-янтарная подложка вместо
       светлой, текст берём тёплым и достаточно светлым для контраста. */
    .catalog-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 4px 20px 10px;
      padding: 8px 14px;
      background: #3a2f1a;
      border: 1px solid #5c4a26;
      border-radius: 999px;
      font-size: 12.5px;
      color: #e0c080;
      text-align: center;
      animation: hintFadeIn 0.3s ease;
    }

    .catalog-hint.hidden { display: none; }

    .catalog-hint span { flex: 1; }

    .catalog-hint button {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border: none;
      background: transparent;
      color: #c9a35a;
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
    }

    @keyframes hintFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .product-card {
      flex: 0 0 calc(100vw - 56px);
      max-width: 400px;
      scroll-snap-align: center;
      background: var(--white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      display: flex;
      flex-direction: column;
      transition: transform 0.3s;
      border: 1px solid var(--border);
    }

    .product-card:not(.is-active) {
      opacity: 0.85;
      transform: scale(0.98);
    }

    /* ТЁМНАЯ ТЕМА: серый градиент "скелетона" (#f5f5f5/#e8e8e8) заметен
       только на светлом фоне — на тёмном такой светлый прямоугольник
       сам выглядел бы как баг. Берём тёмно-серую пару того же
       назначения плюс приглушаем блик поверх неё (было rgba(255,255,255,0.6) —
       на тёмном фоне столь яркий блик читался бы как вспышка, а не
       мягкое сияние загрузки). */
    .product-image-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 5;
      background: linear-gradient(135deg, #262626, #1a1a1a);
      overflow: hidden;
    }

    .product-image-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
      background-size: 200% 100%;
      animation: skeleton 1.5s infinite;
      z-index: 1;
    }

    .product-image-wrap.loaded::before { display: none; }

    @keyframes skeleton {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    .product-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.25s;
      cursor: pointer;
      z-index: 0;
    }

    .product-image-wrap.loaded .product-image.active { opacity: 1; }
    .product-image.active { z-index: 1; }

    .product-image-dots {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 5px;
      z-index: 2;
      pointer-events: none;
    }

    /* Точки переключения фото и сердечко избранного лежат поверх самого
       фото товара, а не на фоне страницы — их полупрозрачный белый/чёрный
       вид не зависит от темы сайта и не меняется в тёмной теме, как и
       разноцветные бейджи ("Новинка"/"В наличии" и т.п.) ниже. */
    .product-image-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      transition: background 0.2s, transform 0.2s;
    }

    .product-image-dot.active {
      background: #fff;
      transform: scale(1.25);
    }

    .product-badges {
      position: absolute;
      top: 12px;
      left: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 2;
    }

    /* Избранное — сердечко в правом верхнем углу фото. Рендерится только
       для товаров "В наличии" (см. шаблон ниже) — на остальные добавить
       в избранное всё равно нельзя. */
    .favorite-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 3;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(2px);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      padding: 0;
      transition: transform 0.15s, background 0.2s;
    }

    .favorite-btn:active {
      transform: scale(0.88);
    }

    .favorite-icon {
      width: 19px;
      height: 19px;
      fill: transparent;
      stroke: #fff;
      stroke-width: 2;
      transition: fill 0.2s, stroke 0.2s;
    }

    .favorite-btn.is-favorite {
      background: rgba(0, 0, 0, 0.15);
    }

    .favorite-btn.is-favorite .favorite-icon {
      fill: var(--primary);
      stroke: var(--primary);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 5px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .badge-new { background: rgba(196, 30, 58, 0.95); color: white; }
    .badge-hit { background: rgba(255, 152, 0, 0.95); color: white; }
    .badge-stock, .badge-reserved, .badge-soon, .badge-out {
      position: absolute;
      bottom: 12px;
      left: 12px;
      z-index: 2;
    }
    .badge-stock { background: rgba(46, 125, 50, 0.95); color: white; }
    .badge-reserved { background: rgba(158, 158, 158, 0.95); color: white; }
    .badge-soon { background: rgba(255, 152, 0, 0.95); color: white; }
    .badge-out { background: #999; color: white; }

    .want-similar-badge {
      position: absolute;
      bottom: 12px;
      right: 12px;
      z-index: 2;
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 6px 12px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .want-similar-badge:active { transform: scale(0.96); }

    /* Модальное окно заявки "Хочу такой" — общее для десктопа и мобильной
       версии (см. static/js/product-interest.js), стилизовано в духе
       попапа "подробнее о цветке" в конструкторе (см. constructor.css:
       .rhf-c-popup*). Переменные темы (--white/--text/--border/--primary/
       --danger) уже объявлены в :root этого файла (тёмный вариант) — здесь
       только структура и размеры, идентичные styles-mobile.css. */
    .rhf-interest-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: rgba(20, 18, 16, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .rhf-interest-overlay[hidden] { display: none; }

    .rhf-interest-card {
      position: relative;
      width: 100%;
      max-width: 380px;
      max-height: 88vh;
      overflow-y: auto;
      background: var(--white);
      color: var(--text);
      border-radius: 16px;
      padding: 24px 20px 20px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }

    .rhf-interest-close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 32px;
      height: 32px;
      border: none;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.08);
      color: var(--text);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
    }

    .rhf-interest-title {
      margin: 0 0 8px;
      padding-right: 28px;
      font-family: 'Cormorant', Georgia, serif;
      font-weight: 700;
      font-size: 22px;
      color: var(--text);
    }

    .rhf-interest-product {
      margin: 0 0 12px;
      font-size: 13px;
      color: var(--text-light);
    }
    .rhf-interest-product[hidden] { display: none; }

    .rhf-interest-note {
      margin: 0 0 18px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(196, 30, 58, 0.08);
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-light);
    }

    .rhf-interest-field { margin-bottom: 14px; }
    .rhf-interest-field label {
      display: block;
      margin-bottom: 6px;
      font-weight: 700;
      font-size: 13px;
      color: var(--text);
    }
    .rhf-interest-field input {
      width: 100%;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 15px;
      background: var(--white);
      color: var(--text);
      box-sizing: border-box;
    }

    .rhf-interest-consent {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 400;
      color: var(--text-light);
      cursor: pointer;
    }
    .rhf-interest-consent input { margin-top: 2px; flex-shrink: 0; }
    .rhf-interest-consent a { color: var(--primary); }

    .rhf-interest-error {
      color: var(--danger);
      font-size: 12px;
      margin-top: 4px;
      min-height: 14px;
    }

    .rhf-interest-submit {
      display: block;
      width: 100%;
      margin-top: 14px;
      padding: 13px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }
    .rhf-interest-submit:disabled { opacity: 0.6; cursor: default; }

    .rhf-interest-status {
      margin-top: 12px;
      font-size: 13px;
      text-align: center;
    }
    .rhf-interest-status.success { color: var(--success, #2e7d32); }
    .rhf-interest-status.error { color: var(--danger); }

    .product-body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex: 1;
    }

    .product-category {
      font-size: 12px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
    }

    .product-name {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }

    .product-name-link {
      color: inherit;
      text-decoration: none;
    }

    .product-desc-wrap {
      display: flex;
      flex-direction: column;
    }

    .product-desc {
      font-size: 13px;
      color: var(--text-light);
      line-height: 1.4;
      white-space: pre-line;
      /* Обрезаем до 7 строк — см. подробный комментарий у .product-desc в
         static/styles-mobile.css (светлая тема, тот же приём). */
      display: -webkit-box;
      -webkit-line-clamp: 7;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .product-desc.expanded {
      -webkit-line-clamp: unset;
      overflow: visible;
    }

    .product-desc-toggle {
      align-self: flex-start;
      margin-top: 2px;
      padding: 0;
      background: none;
      border: none;
      font-size: 12px;
      font-weight: 700;
      color: var(--primary);
      cursor: pointer;
    }

    .product-meta {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--text-light);
      padding: 8px 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      margin: 4px 0;
    }

    .product-meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .product-price-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-top: 4px;
    }

    .product-price {
      font-size: 22px;
      font-weight: 800;
      color: var(--primary);
      letter-spacing: -0.02em;
    }

    /* ТЁМНАЯ ТЕМА: было светло-зелёное "стекло" (#e8f5e9) под зелёным
       текстом скидки — на тёмном фоне светлая плашка спорит с остальной
       страницей. Тёмно-зелёная подложка держит тот же смысл (плашка
       скидки за опт), но уже не выбивается. */
    .product-price-bulk {
      font-size: 12px;
      color: var(--success);
      background: #1c3a20;
      padding: 3px 8px;
      border-radius: 8px;
      font-weight: 600;
    }

    .product-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      margin-top: 8px;
    }

    .share-btn {
      width: 40px;
      height: 40px;
      margin-top: 8px;
      border: none;
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: transform 0.15s, background 0.2s;
    }
    .share-btn:active { transform: scale(0.92); background: var(--border); }

    .share-toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%) translateY(20px);
      background: rgba(20, 20, 20, 0.92);
      color: #fff;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s, transform 0.25s;
      z-index: 999;
      max-width: 88vw;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .share-toast.visible {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .shared-highlight {
      animation: sharedPulse 1.1s ease-out 2;
    }
    @keyframes sharedPulse {
      0% { box-shadow: 0 0 0 0 rgba(196, 30, 58, 0.55); }
      100% { box-shadow: 0 0 0 14px rgba(196, 30, 58, 0); }
    }

    .swipe-indicator {
      text-align: center;
      padding: 12px;
      color: var(--text-muted);
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .swipe-indicator-icon { animation: swipeHint 2s ease-in-out infinite; }

    @keyframes swipeHint {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(-8px); }
    }

    .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding: 0 20px 8px;
    }

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: var(--border);
      transition: all 0.3s;
    }

    .dot.active {
      width: 20px;
      background: var(--primary);
    }

    .care-intro {
      color: var(--text-light);
      margin-bottom: 16px;
      font-size: 14px;
    }

    /* Промо-блок конструктора букета — та же разметка, что и в
       styles-mobile.css (см. комментарий там), только токены темы. */
    .constructor-promo-body {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
    }

    .constructor-promo-gif {
      width: 84px;
      height: auto;
      flex-shrink: 0;
    }

    .constructor-promo-text {
      color: var(--text-light);
      font-size: 14px;
      line-height: 1.6;
      margin: 0;
    }

    .constructor-promo-cta {
      display: block;
      /* Та же ширина, что и у кнопки "В корзину"/"Забронировано"/"Продано"
         в карточке каталога — см. подробный комментарий в static/
         styles-mobile.css (одинаковая структура, здесь только цвета). */
      width: min(calc(100vw - 138px), 318px);
      margin: 0 auto;
      text-align: center;
      background: var(--primary);
      color: #fff;
      font-weight: bold;
      font-size: 14px;
      padding: 10px 24px;
      border-radius: 6px;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.15s ease;
    }

    .constructor-promo-cta:active {
      background: var(--primary-dark);
      transform: scale(0.97);
    }

    .accordion { border-top: 1px solid var(--border); }
    .accordion-item { border-bottom: 1px solid var(--border); }

    .accordion-header {
      width: 100%;
      background: none;
      border: none;
      padding: 16px 0;
      text-align: left;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--text);
      gap: 12px;
    }

    .accordion-header-icon {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      transition: transform 0.3s;
      color: var(--primary);
      font-weight: 300;
    }

    .accordion-item.active .accordion-header-icon {
      background: var(--primary);
      color: white;
      transform: rotate(45deg);
    }

    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .accordion-item.active .accordion-content { max-height: 400px; }

    .accordion-body {
      padding: 0 0 16px;
      font-size: 14px;
      color: var(--text-light);
      line-height: 1.6;
    }

    .contact-buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .contact-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 16px 12px;
      border-radius: var(--radius-md);
      font-weight: 600;
      font-size: 14px;
      transition: all 0.2s;
      color: white;
    }

    .contact-btn:active { transform: scale(0.97); }
    .contact-btn-tel { background: var(--primary); }
    .contact-btn-tg { background: var(--telegram); }
    .contact-btn-label { font-size: 11px; opacity: 0.9; font-weight: 400; }

    .floating-cta {
      position: fixed;
      bottom: calc(16px + var(--safe-bottom));
      right: 16px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--telegram);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 24px rgba(0, 136, 204, 0.4);
      z-index: 99;
      transition: transform 0.2s;
      animation: floatPulse 2s ease-in-out infinite;
    }

    .floating-cta:active { transform: scale(0.92); }

    @keyframes floatPulse {
      0%, 100% { box-shadow: 0 8px 24px rgba(0, 136, 204, 0.4); }
      50% { box-shadow: 0 8px 24px rgba(0, 136, 204, 0.7), 0 0 0 8px rgba(0, 136, 204, 0.1); }
    }

    /* БАГ (найден пользователем): фон футера был завязан на var(--text) —
       в предположении, что var(--text) всегда тёмный. Но в тёмной теме
       var(--text) — это цвет ТЕКСТА на тёмном фоне, то есть светлый
       (#e6e6e6), и футер превращался в светлую плашку, на которой белое
       название бренда (.footer-brand) переставало быть видно. Фон футера
       по смыслу не должен зависеть от --text — фиксируем отдельным тёмным
       значением, как у .footer в десктопном static/styles-dark.css (#0f0f0f);
       остальные цвета футера (текст/ссылки/бренд) уже были подобраны под
       тёмную подложку и не меняются. */
    .footer {
      background: #0f0f0f;
      color: #888;
      padding: 24px 20px calc(24px + var(--safe-bottom));
      text-align: center;
      font-size: 13px;
    }

    .footer a { color: #ccc; }
    .footer-brand { color: white; font-weight: 700; margin-bottom: 4px; }

    @media (min-width: 480px) {
      .product-card { flex: 0 0 420px; }
    }

    @media (min-width: 768px) {
      body {
        max-width: 480px;
        margin: 0 auto;
        /* ТЁМНАЯ ТЕМА: было rgba(0,0,0,0.1) — на тёмном фоне страницы
           вокруг такая тень не читается вообще, усиливаем непрозрачность,
           чтобы "мобильная колонка" на широком экране отделялась от фона. */
        box-shadow: 0 0 40px rgba(0,0,0,0.5);
        min-height: 100vh;
      }
    }

    @media (max-width: 360px) {
      .hero h1 { font-size: 22px; }
      .product-name { font-size: 16px; }
      .product-price { font-size: 20px; }
    }

    @media (prefers-reduced-motion: reduce) {
      * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    .cart-item {
      display: flex;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border);
      align-items: center;
    }
    .cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
    .cart-item-info { flex: 1; }
    .cart-item-name { font-weight: bold; font-size: 14px; display: block; margin-bottom: 4px; }
    .cart-item-price { color: var(--text-light); font-size: 13px; }
    .cart-item-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    .cart-item-quantity { display: flex; align-items: center; gap: 8px; }
    .cart-item-quantity button {
      width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 6px;
      font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .cart-item-quantity input { width: 40px; text-align: center; border: 1px solid var(--border); background: var(--white); color: var(--text); border-radius: 6px; padding: 4px; font-size: 14px; }
    .cart-item-remove { background: none; border: none; color: var(--primary); font-size: 12px; cursor: pointer; padding: 4px 8px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; margin-bottom: 6px; font-weight: bold; color: var(--text); font-size: 14px; }
    .form-group input:not([type="radio"]):not([type="checkbox"]), .form-group textarea { width: 100%; padding: 10px; border: 1px solid var(--border); background: var(--white); color: var(--text); border-radius: 6px; font-size: 15px; box-sizing: border-box; }
    /* Радио/чекбоксы (например, "Способ получения") не должны растягиваться на 100% ширины
       и получать padding: 10px, как обычные текстовые поля — на iOS (Safari/WebKit) это
       раздувает кружок радиокнопки и визуально сдвигает его прямо на текст подписи. */
    .form-group input[type="radio"], .form-group input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
    .error-message { color: var(--danger); font-size: 12px; margin-top: 4px; min-height: 16px; }
    .btn-checkout { background: #4CAF50; color: white; border: none; padding: 14px 24px; font-size: 16px; border-radius: 8px; cursor: pointer; font-weight: bold; width: 100%; margin-top: 10px; }
    .btn-checkout:hover:not(:disabled) { background: #45a049; }
    /* ТЁМНАЯ ТЕМА: было #cccccc — светло-серая кнопка на тёмной форме
       выглядит ярче активной и обманчиво "притягивает" внимание, хотя
       должна, наоборот, читаться как неактивная (как #checkout-btn:disabled
       в десктопном static/styles-dark.css, там тоже тёмный серый вместо
       светлого). */
    .btn-checkout:disabled { background: #555; color: #999; cursor: not-allowed; }

    /* ===== Отзывы клиентов =====
       См. styles-mobile.css — та же разметка, цвета берутся из тех же
       CSS-переменных (--white/--border/--text/--primary/--bg), объявленных
       в :root этого (тёмного) файла своими значениями. Карусель фото
       отзыва (.review-image*) — тот же приём тапа-переключения, что и у
       фото товара (.product-image-wrap), но с object-fit: contain
       (без обрезки) — см. подробный комментарий в styles-mobile.css. */
    /* Отзывы пролистываются свайпом по горизонтали, как .products-carousel
       в Каталоге — см. подробный комментарий в styles-mobile.css. */
    .reviews-section { padding: 20px 0 4px; }
    .reviews-section .section-title { padding: 0 20px; }
    .mobile-reviews-list {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 14px;
      padding: 8px 20px 20px;
      scroll-padding: 20px;
    }
    .mobile-reviews-list::-webkit-scrollbar { display: none; }
    .mobile-review-card {
      flex: 0 0 calc(100vw - 56px);
      max-width: 400px;
      scroll-snap-align: center;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }

    .review-image-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 5;
      background: var(--bg);
      overflow: hidden;
    }

    .review-image-wrap::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
      background-size: 200% 100%;
      animation: skeleton 1.5s infinite;
      z-index: 1;
    }

    .review-image-wrap.loaded::before { display: none; }

    .review-image {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0;
      transition: opacity 0.25s;
      cursor: pointer;
      z-index: 0;
    }

    .review-image-wrap.loaded .review-image.active { opacity: 1; }
    .review-image.active { z-index: 1; }

    .review-image-dots {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 8px;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 10px;
      z-index: 2;
      pointer-events: none;
    }

    .review-image-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      transition: background 0.2s, transform 0.2s;
    }

    .review-image-dot.active {
      background: #fff;
      transform: scale(1.25);
    }

    .mobile-review-card-body { padding: 14px 16px; }
    .mobile-review-stars { font-size: 16px; line-height: 1; margin-bottom: 8px; letter-spacing: 2px; }
    .mobile-review-stars .star-filled { color: var(--primary); }
    .mobile-review-stars .star-empty { color: var(--border); }
    .mobile-review-comment { color: var(--text); font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
    .mobile-review-name { font-weight: 600; color: var(--text); font-size: 14px; }

    /* ===== Галерея "Наша ферма" ===== */
    .farm-gallery {
      position: relative;
      max-width: 100%;
      margin: 0 auto;
      overflow: hidden;
      border-radius: 16px;
      /* ТЁМНАЯ ТЕМА: усиленная тень + тонкая граница — как у .header и
         .hero-badge выше, без этого карусель фермы сливается с тёмным
         фоном секции. */
      box-shadow: 0 4px 16px rgba(0,0,0,0.5);
      border: 1px solid var(--border);
    }

    .farm-gallery-track {
      display: flex;
      transition: transform 0.5s ease;
    }

    .farm-gallery-image {
      width: 100%;
      flex-shrink: 0;
      object-fit: cover;
      height: 260px;
      opacity: 0.9;
      transition: opacity 0.3s ease;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    .farm-gallery-image.active { opacity: 1; }

    .farm-gallery-empty {
      width: 100%;
      text-align: center;
      color: var(--text-light);
      padding: 40px 0;
      margin: 0;
    }

    .farm-gallery-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.4);
      color: white;
      border: none;
      padding: 0;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      z-index: 10;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .farm-gallery-btn.prev { left: 8px; }
    .farm-gallery-btn.next { right: 8px; }

    .farm-gallery-indicators {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .farm-indicator {
      width: 8px;
      height: 8px;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .farm-indicator.active { background-color: white; }

    .farm-address {
      text-align: center;
      margin-top: 12px;
      font-size: 14px;
      color: var(--text-light);
    }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }