/* Витрина заведения (showcase.html) на градиентном редизайне (этап 1
   задачи "гостевые экраны на градиентном редизайне", см. LOG_2026-09-19).
   Значения токенов - в catalog.css (--gh-*-dark/-light, --gradient-cta),
   catalog.css подключён в showcase.html ДО этого файла и вешает
   body.gh-guest-mesh (см. там же) - фон-сетка статичная, шрифты
   Unbounded/Manrope. Здесь - только правки, специфичные для разметки и
   классов самой витрины (не входят в catalog.css, у витрины свои имена
   компонентов: .service-card/.hotel-room-card/.cafe-item-card и т.п.).

   Не трогаем (по заданию): портал бизнеса, "Награда дня" (#reward-*,
   .cafe-my-orders-clear-btn - не тема, отдельная функция), фото, поле
   showcase_primary_color/showcase_accent_color в портале/БД - здесь
   только то, ЧТО эти токены красят на странице, не сами токены. */

body.gh-guest-mesh h1,
body.gh-guest-mesh h2 {
  font-family: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* catalog.css задаёт body.gh-guest-mesh только светлую палитру по
   умолчанию (см. комментарий там же) - тёмную назначает каждая страница
   сама, своим классом темы. У витрины это body.theme-dark (JS
   theme-switcher.js, а не системная media-тема напрямую - см. showcase.html
   выше), поэтому переключение палитры здесь, а не в catalog.css. */
body.gh-guest-mesh.theme-dark {
  --mesh-a: var(--gh-mesh-a-dark); --mesh-b: var(--gh-mesh-b-dark); --mesh-c: var(--gh-mesh-c-dark); --mesh-o: var(--gh-mesh-o-dark);
  --mesh-page-base: var(--gh-mesh-page-base-dark);
  --glass-bg: var(--gh-glass-bg-dark);
  --glass-bg-fallback: var(--gh-glass-bg-fallback-dark);
  --glass-border: var(--gh-glass-border-dark);
  --gradient-text: var(--gh-gradient-text-dark);
}

/* ------------------------------------------------------------------ */
/* Стекло - карточки, модалки/шторки, липкие панели, поле поиска,      */
/* кнопки-иконки, чипы и переключатель формата (вкладки "В зале/       */
/* С собой" и т.п.) в неактивном состоянии. Тот же приём, что в        */
/* catalog.css: непрозрачный --glass-bg-fallback по умолчанию, поверх -*/
/* @supports с настоящим стеклом+блюром для браузеров, где оно есть.   */
/* ------------------------------------------------------------------ */
body.gh-guest-mesh .service-card,
body.gh-guest-mesh .hotel-room-card,
body.gh-guest-mesh .hotel-booking-card,
body.gh-guest-mesh .cafe-item-card,
body.gh-guest-mesh .cafe-order-card,
body.gh-guest-mesh .info-contacts-card,
body.gh-guest-mesh .bg-white.rounded-2xl,
body.gh-guest-mesh .cafe-sheet,
body.gh-guest-mesh #showcase-bottom-nav,
body.gh-guest-mesh .info-map-expand-btn,
body.gh-guest-mesh .cafe-service-toggle,
body.gh-guest-mesh .cafe-search-input,
body.gh-guest-mesh .cafe-search-btn,
body.gh-guest-mesh .cafe-section-nav-wrap,
body.gh-guest-mesh .cafe-section-nav-btn,
body.gh-guest-mesh .hotel-filter-chip {
  background: var(--glass-bg-fallback);
  border-color: var(--glass-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body.gh-guest-mesh .service-card,
  body.gh-guest-mesh .hotel-room-card,
  body.gh-guest-mesh .hotel-booking-card,
  body.gh-guest-mesh .cafe-item-card,
  body.gh-guest-mesh .cafe-order-card,
  body.gh-guest-mesh .info-contacts-card,
  body.gh-guest-mesh .bg-white.rounded-2xl,
  body.gh-guest-mesh .cafe-sheet,
  body.gh-guest-mesh #showcase-bottom-nav,
  body.gh-guest-mesh .info-map-expand-btn,
  body.gh-guest-mesh .cafe-service-toggle,
  body.gh-guest-mesh .cafe-search-input,
  body.gh-guest-mesh .cafe-search-btn,
  body.gh-guest-mesh .cafe-section-nav-wrap,
  body.gh-guest-mesh .cafe-section-nav-btn,
  body.gh-guest-mesh .hotel-filter-chip {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}
/* .info-contacts-card уже был градиентной плашкой (не сплошным цветом) -
   стекло заменяет именно фон, свой лёгкий градиент внутри плашки не
   переносим поверх стекла (эффект накладки), поэтому background
   переопределяется полностью, а не через background-color. */

/* Активный чип (категория меню кафе "Все"/"Завтраки"/..., фильтр типа
   номера отеля) - было незаметно в обеих темах: .cafe-section-nav-btn.is-
   active (cafe-showcase.css) и .hotel-filter-chip.is-active (hotel-
   showcase.css) красят фон через var(--accent-color), но специфичность
   двух классов (0,2,0) ниже, чем у стеклянного правила выше по этому же
   файлу body.gh-guest-mesh .cafe-section-nav-btn/.hotel-filter-chip
   (0,2,1 - лишний типовой селектор body), поэтому активный чип всегда
   получал обычное стекло вместо акцентной заливки. Тот же приём, что уже
   в catalog.css у .chip.is-active - общий --gradient-cta, белый текст. */
body.gh-guest-mesh .cafe-section-nav-btn.is-active,
body.gh-guest-mesh .hotel-filter-chip.is-active {
  background: var(--gradient-cta);
  color: #fff;
  border-color: transparent;
}

/* .cafe-screen/.hotel-screen (корзина/оформление/статус заказа, "Мои
   заказы"/"Мои брони") - это ПОЛНОЭКРАННЫЙ, а не плавающий слой (fixed,
   inset:0), фону-сетке страницы за ним взяться неоткуда, поэтому не
   стекло (блюрить нечего), а та же сама сетка, что у body.gh-guest-mesh -
   формула та же, что в catalog.css, значения из тех же переменных. */
body.gh-guest-mesh .cafe-screen,
body.gh-guest-mesh .hotel-screen {
  background:
    radial-gradient(95% 60% at 12% 6%, var(--mesh-a), transparent 72%),
    radial-gradient(90% 65% at 92% 20%, var(--mesh-b), transparent 72%),
    radial-gradient(95% 65% at 22% 90%, var(--mesh-c), transparent 72%),
    radial-gradient(70% 55% at 92% 96%, var(--mesh-o), transparent 72%),
    var(--mesh-page-base);
}
/* Карточки строк корзины/заказа/брони внутри .cafe-screen/.hotel-screen -
   тоже стекло, той же формулой, что и остальные карточки выше. */
body.gh-guest-mesh .cafe-order-card,
body.gh-guest-mesh .hotel-booking-card,
body.gh-guest-mesh .cafe-screen-footer,
body.gh-guest-mesh .hotel-screen-footer {
  background: var(--glass-bg-fallback);
  border-color: var(--glass-border);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  body.gh-guest-mesh .cafe-screen-footer,
  body.gh-guest-mesh .hotel-screen-footer {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

/* ------------------------------------------------------------------ */
/* Кнопки действия ("Забронировать", "Заказать", "+", "Добавить",     */
/* "Отправить" и подобные) - решение владельца: заливка --gradient-cta */
/* вместо фирменного цвета площадки (--primary-color/--accent-color), */
/* белый текст. Список остальных мест с фирменным цветом (цена,       */
/* ссылки, подчёркивание/активные чипы и т.п.) - в отчёте задачи, тут  */
/* не трогаем ничего, что НЕ является кнопкой действия.               */
/* ------------------------------------------------------------------ */
body.gh-guest-mesh .accent-bg,
body.gh-guest-mesh .primary-bg,
body.gh-guest-mesh .book-room-btn,
body.gh-guest-mesh .cafe-add-btn,
body.gh-guest-mesh .cafe-cart-bar,
body.gh-guest-mesh .cafe-submit-btn,
body.gh-guest-mesh .cafe-cart-line-fix-btn,
body.gh-guest-mesh .cafe-confirm-btn--primary,
body.gh-guest-mesh .hotel-search-btn,
body.gh-guest-mesh .hotel-submit-btn,
body.gh-guest-mesh .hotel-offer-bar,
body.gh-guest-mesh .hotel-addon-toggle.is-added {
  background: var(--gradient-cta);
  color: #fff;
  border-color: transparent;
}
/* .accent-bg.text-white/.primary-bg.text-white (catalog.css/showcase.html
   доводка контраста тёмного текста на светлом акценте) для градиента не
   нужны - белый текст на --gradient-cta проходит 4.5:1+ по всему пути
   градиента (см. TOKENS.md), поэтому здесь не переопределяем. */
body.gh-guest-mesh .accent-bg.text-white,
body.gh-guest-mesh .primary-bg.text-white {
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Витрина на компьютере (21.10.2026): шире 600 px витрина любого типа  */
/* - колонка 520 px по центру экрана, как приложение; по бокам          */
/* спокойный фон в цветах бренда (светлая/тёмная тема). На телефоне     */
/* (до 600 px) правила ниже не действуют - вид не меняется.             */
/* Элементы с position: fixed (шторки, экраны, корзина, окна, нижняя    */
/* панель, подсказки) отсчитываются от окна, а не от body, поэтому      */
/* каждый привязан к колонке своими left/right: --gh-col-gap - поле     */
/* слева и справа от колонки (50% у fixed - половина ширины окна).      */
/* Только витрина: класс gh-showcase-page на <html> ставит showcase.html. */
/* base.html (вход, /business/join/, кабинет) подключает этот же файл и  */
/* body.gh-guest-mesh - без привязки колонка сжимала и их (исправлено   */
/* 21.10.2026). :where() - специфичность селекторов прежняя.            */
/* ------------------------------------------------------------------ */
@media (min-width: 601px) {
  html:where(.gh-showcase-page) {
    min-height: 100%;
    background:
      radial-gradient(60% 55% at 0% 0%, var(--gh-mesh-a-light), transparent 70%),
      radial-gradient(60% 55% at 100% 100%, var(--gh-mesh-b-light), transparent 70%),
      var(--gh-mesh-page-base-light);
    background-attachment: fixed;
  }
  html:where(.gh-showcase-page):has(> body.gh-guest-mesh.theme-dark) {
    background:
      radial-gradient(60% 55% at 0% 0%, var(--gh-mesh-a-dark), transparent 70%),
      radial-gradient(60% 55% at 100% 100%, var(--gh-mesh-b-dark), transparent 70%),
      var(--gh-mesh-page-base-dark);
    background-attachment: fixed;
  }
  :where(.gh-showcase-page) body.gh-guest-mesh {
    --gh-col-gap: calc(50% - 260px);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    min-height: 100vh;
    /* У html теперь свой фон, и фон body рисовался бы поверх сетки ::before -
       база темы переезжает на сам ::before (он и есть фон колонки). */
    background: transparent;
    box-shadow: 0 0 0 1px var(--glass-border), 0 24px 80px rgb(15 23 42 / 0.18);
  }
  :where(.gh-showcase-page) body.gh-guest-mesh::before { background-color: var(--mesh-page-base); }

  /* Во всю ширину колонки. */
  :where(.gh-showcase-page) body.gh-guest-mesh::before,
  :where(.gh-showcase-page) body.gh-guest-mesh .fixed.inset-0,
  :where(.gh-showcase-page) body.gh-guest-mesh .fixed.left-0.right-0,
  :where(.gh-showcase-page) body.gh-guest-mesh .cafe-overlay-backdrop,
  :where(.gh-showcase-page) body.gh-guest-mesh .cafe-sheet,
  :where(.gh-showcase-page) body.gh-guest-mesh .cafe-screen,
  :where(.gh-showcase-page) body.gh-guest-mesh .shop-backdrop,
  :where(.gh-showcase-page) body.gh-guest-mesh .shop-sheet,
  :where(.gh-showcase-page) body.gh-guest-mesh .shop-screen,
  :where(.gh-showcase-page) body.gh-guest-mesh .tour-screen,
  :where(.gh-showcase-page) body.gh-guest-mesh .svc-overlay,
  :where(.gh-showcase-page) body.gh-guest-mesh .hotel-overlay-backdrop,
  :where(.gh-showcase-page) body.gh-guest-mesh .hotel-360-modal,
  :where(.gh-showcase-page) body.gh-guest-mesh .hotel-screen,
  :where(.gh-showcase-page) body.gh-guest-mesh .rv-backdrop,
  :where(.gh-showcase-page) body.gh-guest-mesh .rv-viewer,
  :where(.gh-showcase-page) body.gh-guest-mesh .lm-overlay {
    left: var(--gh-col-gap);
    right: var(--gh-col-gap);
  }
  /* Стиль задан скриптом в атрибуте style - перебить можно только так. */
  :where(.gh-showcase-page) body.gh-guest-mesh .gh-fixed-full { left: var(--gh-col-gap) !important; right: var(--gh-col-gap) !important; }
  :where(.gh-showcase-page) body.gh-guest-mesh .gh-fixed-inset16 {
    left: calc(var(--gh-col-gap) + 16px) !important;
    right: calc(var(--gh-col-gap) + 16px) !important;
  }

  /* С тем же отступом от края колонки, что от края телефона. */
  :where(.gh-showcase-page) body.gh-guest-mesh .cafe-cart-bar,
  :where(.gh-showcase-page) body.gh-guest-mesh .cafe-toast,
  :where(.gh-showcase-page) body.gh-guest-mesh .hotel-offer-bar {
    left: calc(var(--gh-col-gap) + 0.75rem);
    right: calc(var(--gh-col-gap) + 0.75rem);
  }
  :where(.gh-showcase-page) body.gh-guest-mesh .cafe-confirm-box,
  :where(.gh-showcase-page) body.gh-guest-mesh .shop-cart-bar,
  :where(.gh-showcase-page) body.gh-guest-mesh .rv-dialog {
    left: calc(var(--gh-col-gap) + 1rem);
    right: calc(var(--gh-col-gap) + 1rem);
  }
  /* Подсказки по центру (left: 50% + translateX) - по центру колонки и не шире её. */
  :where(.gh-showcase-page) body.gh-guest-mesh .shop-toast,
  :where(.gh-showcase-page) body.gh-guest-mesh .tour-toast { max-width: calc(520px - 2rem); }

  /* Внутри колонки - раскладка телефона, а не широкого экрана. */
  :where(.gh-showcase-page) body.gh-guest-mesh .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.gh-showcase-page) body.gh-guest-mesh .tour-grid { grid-template-columns: minmax(0, 1fr); }
  :where(.gh-showcase-page) body.gh-guest-mesh .tour-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.gh-showcase-page) body.gh-guest-mesh .svc-overlay { align-items: flex-end; }
  :where(.gh-showcase-page) body.gh-guest-mesh .svc-sheet { border-radius: 20px 20px 0 0; max-height: 92vh; }
}