/* =========================================================================
   Amor Flowers — второй слой стилей.

   Отдельным файлом, а не правками в style.css, сознательно: style.css
   держит существующий облик сайта, и его хочется уметь откатить одним
   движением. Здесь — только то, что добавилось: мобильные исправления,
   блоки доверия, липкие кнопки, шторки, квиз.

   Тёмной темы здесь нет: сайт всегда светлый, см. раздел 21.

   Палитра не расширяется ни на один тон: всё строится на уже объявленных
   переменных style.css (кремовый фон + тёплая роза). Единственное, что
   добавлено, — служебные величины ниже.
   ========================================================================= */

:root {
  /* Минимальный размер сенсорной цели. 44px — не «рекомендация из
     интернета», а размер, ниже которого палец промахивается по кнопке
     «в корзину» на каждой второй карточке. */
  --tap: 44px;
  /* Единый радиус. До этого по сайту встречались 10 / 12 / 14 / 18 / 20 —
     глаз читает это как несобранность, даже не понимая почему. */
  --radius-lg: 20px;
  --radius-pill: 100px;
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
}

/* -------------------------------------------------------------------------
   1. iOS перестаёт зумить страницу на полях ввода

   Safari на iPhone увеличивает масштаб страницы, когда курсор ставят в
   поле со шрифтом меньше 16px, и обратно масштаб НЕ возвращает: человек
   после нажатия на поиск остаётся на «уехавшей» странице и вынужден
   сводить её пальцами. Лечится ровно одним числом.
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
  input, select, textarea,
  .form-group input, .form-group select, .form-group textarea,
  .search-input-row input {
    font-size: 16px !important;
  }
}

/* -------------------------------------------------------------------------
   2. Сенсорные цели

   Кнопка «В корзину» на карточке была 36px высотой — и так на каждой из
   173 карточек каталога.
   ------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .btn-sm { padding: 12px 18px; font-size: 14px; }
  .product-add,
  .btn-block { min-height: var(--tap); }
  .icon-btn { min-width: var(--tap); min-height: var(--tap); }
  .pill-filter { padding-top: 10px; padding-bottom: 10px; }
}

/* -------------------------------------------------------------------------
   3. Загрузка картинок: мягкое появление вместо пустых плиток
   ------------------------------------------------------------------------- */

.product-thumb { background: var(--surface-soft); }

.product-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--surface-soft) 20%, var(--rose-pale) 42%, var(--surface-soft) 64%);
  background-size: 260% 100%;
  animation: amor-shimmer 1.4s linear infinite;
  opacity: 1;
  transition: opacity .4s ease;
}
.product-thumb.is-loaded::before { opacity: 0; animation: none; }
.product-thumb img { position: relative; z-index: 1; opacity: 0; transition: opacity .45s ease; }
.product-thumb.is-loaded img { opacity: 1; }
.product-thumb .placeholder-art { position: relative; z-index: 1; }

@keyframes amor-shimmer {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .product-thumb::before { animation: none; }
}

/* -------------------------------------------------------------------------
   4. Планирование доставки на главной

   Дата и адрес спрашиваются ДО каталога, а не в форме заказа: от даты
   реально зависит, что можно собрать, и узнавать об этом после выбора
   букета — поздно.
   ------------------------------------------------------------------------- */

.plan-bar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px 22px;
  margin-top: -38px;
  position: relative;
  z-index: 3;
}
.plan-bar h2 { font-size: 22px; margin-bottom: 2px; }
.plan-bar .plan-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; }

.plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: end;
}
.plan-grid label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 5px; }
.plan-grid select,
.plan-grid input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.plan-day-row { display: flex; gap: 6px; }
.plan-day {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
  font-size: 13.5px;
  color: var(--ink-soft);
  transition: all .2s ease;
}
.plan-day.is-active {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #fff;
}
.plan-note { font-size: 12.5px; color: var(--success); margin: 10px 0 0; }

@media (max-width: 860px) {
  .plan-bar { margin-top: 0; padding: 18px; }
  .plan-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   5. Обещание доставки и честный таймер
   ------------------------------------------------------------------------- */

.delivery-promise {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 13.5px;
  color: var(--ink);
  margin: 14px 0;
}
.delivery-promise svg { width: 18px; height: 18px; color: var(--rose-deep); flex-shrink: 0; }
.delivery-promise b { font-variant-numeric: tabular-nums; }

.card-promise {
  display: block;
  font-size: 11.5px;
  color: var(--success);
  margin-top: 2px;
}

/* -------------------------------------------------------------------------
   6. Карточка товара: сердечко, рейтинг, остаток, цена
   ------------------------------------------------------------------------- */

.fav-btn {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(6px);
  color: var(--ink-faint);
  transition: transform .18s var(--ease-ios), color .18s ease, background .18s ease;
}
.fav-btn:hover { transform: scale(1.08); color: var(--rose-deep); }
.fav-btn.is-on { color: var(--rose-deep); background: #fff; }
.fav-btn svg { width: 19px; height: 19px; }
.fav-btn.is-on svg { fill: currentColor; }
@media (pointer: coarse) { .fav-btn { width: var(--tap); height: var(--tap); } }

.card-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  min-height: 16px;
}
.card-rating { font-size: 12px; color: var(--ink-soft); display: inline-flex; gap: 4px; align-items: center; }
.card-rating .stars { color: #e0a43c; letter-spacing: .5px; }

.stock-left {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--rose-deep);
  background: var(--rose-pale);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

/* Цена — главная информация на карточке, и она должна читаться первой. */
.product-price { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.product-card .product-price { font-size: 18px; }

/* -------------------------------------------------------------------------
   7. Плотность сетки каталога
   ------------------------------------------------------------------------- */

.catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}
.density-switch { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px; }
.density-switch button {
  border: none; background: transparent; border-radius: var(--radius-pill);
  padding: 7px 12px; color: var(--ink-faint); display: grid; place-items: center;
}
.density-switch button.is-active { background: var(--ink); color: var(--cream); }
.density-switch svg { width: 15px; height: 15px; }

.product-grid[data-density="1"] { grid-template-columns: 1fr; }
.product-grid[data-density="2"] { grid-template-columns: repeat(2, 1fr); }
.product-grid[data-density="3"] { grid-template-columns: repeat(3, 1fr); }
.product-grid[data-density="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  .product-grid[data-density="3"],
  .product-grid[data-density="4"] { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   8. Фильтры шторкой снизу на телефоне

   Выпадающие списки на мобильном открываются вверх, перекрывают контент
   и закрываются от случайного касания. Шторка снизу — там, где большой
   палец, и с кнопкой, на которой видно, сколько товаров найдётся.
   ------------------------------------------------------------------------- */

.filters-fab {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: var(--radius-pill);
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  gap: 8px;
  align-items: center;
}
.filters-fab .count {
  background: var(--rose-deep); color: #fff;
  border-radius: var(--radius-pill); padding: 1px 8px; font-size: 12px;
}

.filter-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  background: var(--surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -18px 50px -20px rgba(46, 35, 32, .35);
  transform: translateY(100%);
  transition: transform .38s var(--ease-ios);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.filter-sheet[data-open="1"] { transform: translateY(0); }
.filter-sheet-grabber {
  width: 42px; height: 4px; border-radius: 4px;
  background: var(--line); margin: 10px auto 4px;
}
.filter-sheet-body { overflow-y: auto; padding: 8px 20px 16px; -webkit-overflow-scrolling: touch; }
.filter-sheet-foot {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.filter-group { border-bottom: 1px solid var(--line); padding: 14px 0; }
.filter-group:last-child { border-bottom: none; }
.filter-group > h4 { font-size: 15px; margin-bottom: 10px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 8px 13px; font-size: 13.5px; color: var(--ink-soft);
  background: var(--cream); cursor: pointer;
}
.filter-chip input { position: absolute; opacity: 0; pointer-events: none; }
.filter-chip:has(input:checked) {
  background: var(--rose-deep); border-color: var(--rose-deep); color: #fff;
}
.filter-chip .swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); }

.sheet-scrim-2 {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(46, 35, 32, .38);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.sheet-scrim-2[data-open="1"] { opacity: 1; pointer-events: auto; }

@media (max-width: 760px) {
  .filters-fab { display: inline-flex; }
  .filter-bar { display: none; }
}

/* -------------------------------------------------------------------------
   9. Кнопка «Наверх»
   ------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 18px;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease-ios);
  transform: translateY(8px);
}
.to-top[data-show="1"] { opacity: 1; pointer-events: auto; transform: translateY(0); }
.to-top svg { width: 18px; height: 18px; }
@media (min-width: 761px) { .to-top { bottom: 96px; right: 26px; } }

/* -------------------------------------------------------------------------
   10. Карточка товара: липкая кнопка заказа, галерея, размеры
   ------------------------------------------------------------------------- */

/* Фото товара снимаются в пропорции 4:5. Галерея была квадратной и
   обрезала букет сверху и снизу — то есть ровно ту часть, ради которой
   фотография и сделана. */
.product-gallery { aspect-ratio: 4 / 5; position: relative; background: var(--surface-soft); }
.product-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ── Галерея из нескольких снимков ──────────────────────────────────────
   Листание сделано нативной прокруткой со scroll-snap, а не переносом
   слайдов скриптом. Это даёт настоящий свайп с инерцией на телефоне,
   работает при выключенном JS и не ломается на медленном устройстве:
   скрипт только подсвечивает точки и двигает ленту по нажатию стрелок. */
.product-gallery.has-more { overflow: hidden; border-radius: var(--radius, 18px); }
.gallery-track {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; min-width: 0; height: 100%; scroll-snap-align: center; }
.gallery-slide picture, .gallery-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  background: rgba(255,255,255,.86); color: #3a2c2f;
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  transition: opacity .18s ease, background .18s ease;
}
.gallery-nav:hover { background: #fff; }
.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }
.gallery-nav[disabled] { opacity: .3; cursor: default; }

.gallery-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; gap: 7px; justify-content: center;
}
.gallery-dot {
  width: 22px; height: 22px; padding: 0; border: none; background: none;
  cursor: pointer; display: grid; place-items: center;
}
/* Точка рисуется псевдоэлементом: сама кнопка остаётся 22 px, чтобы в неё
   можно было попасть пальцем, а видимая точка — маленькой. */
.gallery-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
  transition: width .2s ease, background .2s ease;
}
.gallery-dot.is-active::before { width: 18px; border-radius: 4px; background: #fff; }

/* На узком экране стрелки не нужны: там свайп, и кнопки только закрывают
   собой фотографию. */
@media (max-width: 760px) { .gallery-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .gallery-track { scroll-behavior: auto; }
}

.gallery-swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-swipe::-webkit-scrollbar { display: none; }
.gallery-swipe > * { flex: 0 0 100%; scroll-snap-align: center; }
.gallery-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.gallery-dots span.is-active { background: var(--rose-deep); }

.sticky-buy {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .34s var(--ease-ios);
}
.sticky-buy[data-show="1"] { transform: translateY(0); }
.sticky-buy .sb-price { font-size: 17px; font-weight: 600; white-space: nowrap; }
.sticky-buy .btn { min-width: 0; }
.sticky-buy .btn { flex: 1; min-height: var(--tap); }
@media (max-width: 900px) {
  .sticky-buy { display: flex; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

.size-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.size-opt {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--cream); padding: 10px 16px; min-width: 84px;
  text-align: center; cursor: pointer; transition: all .18s ease;
}
.size-opt.is-active { border-color: var(--rose-deep); background: var(--surface); box-shadow: var(--shadow-sm); }
.size-opt b { display: block; font-size: 14px; }
.size-opt span { display: block; font-size: 12.5px; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   11. Блоки доверия и заботы
   ------------------------------------------------------------------------- */

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.info-card h3 { font-size: 20px; margin-bottom: 8px; }
.info-card p { color: var(--ink-soft); font-size: 14.5px; margin: 0; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }

.guarantee-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.guarantee-item {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 18px;
}
.guarantee-item svg { width: 22px; height: 22px; color: var(--rose-deep); flex-shrink: 0; }
.guarantee-item b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.guarantee-item span { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

.showcase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.showcase-grid figure { margin: 0; }
.showcase-grid img { border-radius: var(--radius-sm); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.showcase-grid figcaption { font-size: 12.5px; color: var(--ink-soft); margin-top: 7px; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.team-card { text-align: center; }
.team-card img { width: 118px; height: 118px; border-radius: 50%; object-fit: cover; margin: 0 auto 12px; }
.team-card b { display: block; font-size: 15.5px; }
.team-card span { font-size: 12.5px; color: var(--rose-deep); text-transform: uppercase; letter-spacing: .1em; }
.team-card p { font-size: 13px; color: var(--ink-soft); margin: 8px 0 0; }

.counter-strip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 8px 16px; font-size: 13.5px;
}
.counter-strip .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 0 rgba(111, 143, 102, .6);
  animation: amor-pulse 2.4s infinite;
}
@keyframes amor-pulse {
  70% { box-shadow: 0 0 0 8px rgba(111, 143, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(111, 143, 102, 0); }
}

/* -------------------------------------------------------------------------
   12. Корзина: доставка, порог бесплатной доставки, промокод
   ------------------------------------------------------------------------- */

.summary-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.summary-row.is-free span:last-child { color: var(--success); }

.free-bar { margin: 14px 0 6px; }
.free-bar-track { height: 6px; border-radius: 4px; background: var(--surface-soft); overflow: hidden; }
.free-bar-fill { height: 100%; background: var(--rose-deep); border-radius: 4px; transition: width .5s var(--ease-ios); }
.free-bar-text { font-size: 12.5px; color: var(--ink-soft); margin-top: 7px; }

.promo-row { display: flex; gap: 8px; margin: 14px 0; }
.promo-row input {
  /* min-width: 0 обязателен. У flex-элемента по умолчанию min-width: auto,
     а собственная ширина <input> — 20 символов; на телефоне это ~346px,
     и колонка с итогом переставала помещаться в экран: страница уезжала
     вбок вместе со всем остальным. */
  flex: 1; min-width: 0;
  padding: 11px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--cream);
  font-family: inherit; font-size: 15px; text-transform: uppercase;
}
.promo-msg { font-size: 12.5px; margin-top: 6px; }
.promo-msg.is-ok { color: var(--success); }
.promo-msg.is-err { color: #a13c3c; }

/* -------------------------------------------------------------------------
   13. Оформление в три шага
   ------------------------------------------------------------------------- */

.steps-head { display: flex; gap: 8px; margin-bottom: 22px; }
.steps-head div {
  flex: 1; text-align: center; font-size: 12.5px; color: var(--ink-faint);
  padding-bottom: 9px; border-bottom: 2px solid var(--line);
}
.steps-head div.is-active { color: var(--ink); border-bottom-color: var(--rose-deep); font-weight: 500; }
.steps-head div.is-done { color: var(--success); border-bottom-color: var(--success); }
.step-pane[hidden] { display: none; }
.step-nav { display: flex; gap: 10px; margin-top: 18px; }
.step-nav .btn { flex: 1; }

.care-toggle {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px;
}
.care-toggle:first-of-type { border-top: none; }
.care-toggle input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.care-toggle span small { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }

.pack-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pack-opt {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 15px; background: var(--cream); cursor: pointer; font-size: 13.5px;
}
.pack-opt:has(input:checked) { border-color: var(--rose-deep); background: var(--surface); }
.pack-opt input { display: none; }
.pack-opt b { display: block; }
.pack-opt small { color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   14. Допродажа отдельным шагом

   Путь к оплате не блокируется ни на одном шаге: у каждого предложения
   есть «Пропустить», а итог заказа виден всё время. Апсейл, который
   нельзя проскочить, стоит дороже, чем приносит.
   ------------------------------------------------------------------------- */

.upsell-step { max-width: 460px; }
.upsell-progress { display: flex; gap: 5px; margin-bottom: 16px; }
.upsell-progress i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.upsell-progress i.is-on { background: var(--rose-deep); }
.upsell-card {
  display: flex; gap: 14px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 12px; margin-bottom: 12px; text-align: left; width: 100%;
  background: var(--surface); cursor: pointer; transition: border-color .2s ease;
}
.upsell-card:hover { border-color: var(--rose-deep); }
.upsell-card img { width: 74px; height: 92px; border-radius: var(--radius-sm); object-fit: cover; }
.upsell-card .u-body { flex: 1; }
.upsell-card b { display: block; font-size: 14.5px; }
.upsell-card span { font-size: 13px; color: var(--ink-soft); }
.upsell-card .u-price { font-weight: 600; white-space: nowrap; }
.upsell-total {
  display: flex; justify-content: space-between;
  font-size: 14px; padding-top: 12px; border-top: 1px solid var(--line); margin-top: 4px;
}

/* -------------------------------------------------------------------------
   15. Квиз
   ------------------------------------------------------------------------- */

.quiz-shell { max-width: 640px; margin: 0 auto; }
.quiz-step[hidden] { display: none; }
.quiz-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 20px 0; }
.quiz-option {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-lg); padding: 16px 14px; text-align: center;
  font-size: 14.5px; cursor: pointer; transition: all .2s var(--ease-ios);
}
.quiz-option:hover { border-color: var(--rose-deep); transform: translateY(-2px); }
.quiz-option.is-active { border-color: var(--rose-deep); background: var(--rose-pale); }
.quiz-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 26px; }
.quiz-progress i { width: 34px; height: 3px; border-radius: 3px; background: var(--line); }
.quiz-progress i.is-on { background: var(--rose-deep); }

/* -------------------------------------------------------------------------
   16. Быстрый просмотр
   ------------------------------------------------------------------------- */

.qv-card { max-width: 760px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; padding: 0; }
.qv-card .qv-img { aspect-ratio: 4/5; background: var(--surface-soft); }
.qv-card .qv-img img { width: 100%; height: 100%; object-fit: cover; }
.qv-card .qv-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.qv-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.9); color: var(--ink); font-size: 20px; line-height: 1;
}
@media (max-width: 700px) { .qv-card { grid-template-columns: 1fr; } .qv-card .qv-img { aspect-ratio: 16/11; } }

/* -------------------------------------------------------------------------
   17. Навигация: бюджет и поводы
   ------------------------------------------------------------------------- */

.nav-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 0;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nav-strip::-webkit-scrollbar { display: none; }
.nav-strip a {
  flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-pill); padding: 8px 15px;
  font-size: 13.5px; color: var(--ink-soft); white-space: nowrap;
  transition: all .18s ease;
}
.nav-strip a:hover, .nav-strip a.is-active {
  border-color: var(--rose-deep); color: var(--rose-deep); background: var(--surface);
}

.mega-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 10px; }
.mega-col a { display: block; font-size: 14px; color: var(--ink-soft); padding: 5px 0; }
.mega-col a:hover { color: var(--rose-deep); }

/* -------------------------------------------------------------------------
   18. Помощь в WhatsApp на каталоге
   ------------------------------------------------------------------------- */

.help-band {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 26px 0;
}
.help-band h3 { font-size: 20px; margin-bottom: 4px; }
.help-band p { margin: 0; color: var(--ink-soft); font-size: 14px; }

/* -------------------------------------------------------------------------
   19. Траурный раздел

   Здесь выключено всё праздничное: розовые акценты, анимации появления,
   допродажа шаров и открыток. Для человека, который заказывает цветы на
   похороны, это не мелочь.
   ------------------------------------------------------------------------- */

.mourning {
  --rose: #8d8a86;
  --rose-deep: #5f5b57;
  --rose-pale: #eceae7;
  --surface-soft: #f2f1ef;
}
.mourning .wa-fab,
.mourning .product-old-badge,
.mourning .review-pop { display: none !important; }
.mourning .hero, .mourning .page-header { background: #f6f5f3; }
.mourning .product-card { box-shadow: none; border: 1px solid #e6e4e1; }

/* -------------------------------------------------------------------------
   20. Мелочи
   ------------------------------------------------------------------------- */

.section-tight { padding-top: 0; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

.breadcrumb { font-size: 13px; color: var(--ink-faint); display: flex; gap: 6px; flex-wrap: wrap; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--rose-deep); }
.breadcrumb span { color: var(--ink-faint); }

.tag-line { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0; }
.tag-line a {
  font-size: 12.5px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 5px 11px; color: var(--ink-soft); background: var(--surface);
}
.tag-line a:hover { border-color: var(--rose-deep); color: var(--rose-deep); }

.seasonal-badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: var(--ink); color: var(--cream);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--radius-pill);
}

.qty-stepper button { min-width: 38px; min-height: 38px; }
@media (pointer: coarse) { .qty-stepper button { min-width: var(--tap); min-height: var(--tap); } }

/* Летящий в корзину кружок — короткий, 420 мс, и полностью выключается
   при prefers-reduced-motion. */
.fly-dot {
  position: fixed; z-index: 200; width: 16px; height: 16px; border-radius: 50%;
  background: var(--rose-deep); pointer-events: none;
  transition: transform .42s cubic-bezier(.4, 0, .2, 1), opacity .42s ease;
}
@media (prefers-reduced-motion: reduce) { .fly-dot { display: none; } }

.showcase-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.showcase-admin-item { margin: 0; }
.showcase-admin-item img { border-radius: 10px; aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.showcase-admin-item figcaption { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.simple-table tr.is-done { opacity: .5; }

/* Заглушки для товаров без фото: раньше их было четыре разных градиента,
   включая бежево-золотой, выпадавший из палитры «белое + тёплая роза». */
.placeholder-art { background: var(--surface-soft) !important; }
.placeholder-art span { color: var(--rose) !important; opacity: .5 !important; }

/* -------------------------------------------------------------------------
   21. Тема — всегда светлая

   Раньше здесь стоял @media (prefers-color-scheme: dark): у кого в системе
   включена тёмная тема, тот видел сайт тёмным. Это противоречит правилу
   бренда — строго белое плюс тёплая роза — и владелец увидел у себя ровно
   это: Windows в тёмном режиме, сайт тоже тёмный.

   Автоматическое переключение убрано. Тёмная палитра ниже осталась, но
   включается ТОЛЬКО явным data-theme="dark" на <html> — то есть ручным
   переключателем, если он когда-нибудь появится. Сама по себе она больше
   не срабатывает никогда.

   color-scheme: light нужен отдельно: без него системные элементы —
   выпадающие списки, поля даты, полосы прокрутки — остаются тёмными даже
   на светлой странице.
   ------------------------------------------------------------------------- */

:root { color-scheme: light; }

/* Тёмной палитры в файле больше нет совсем — ни автоматической, ни по
   переключателю. Белое плюс тёплая роза это фирменный цвет, и он не должен
   зависеть ни от настроек системы, ни от случайно выставленного атрибута.

   Страховка на случай, если data-theme="dark" когда-нибудь окажется на
   <html> из чужого скрипта или расширения браузера: палитра всё равно
   остаётся светлой. */
:root,
:root[data-theme],
:root[data-theme="dark"] {
  color-scheme: light !important;
  --cream: #fbf6f1;
  --surface: #ffffff;
}

/* -------------------------------------------------------------------------
   22. Подсказки поиска с фотографией

   По снимку букет узнают мгновенно, по названию вида «Amor Special №6474» —
   никогда. Раньше в подсказках у всех товаров стоял один и тот же розовый
   градиент.
   ------------------------------------------------------------------------- */

img.search-result-thumb { object-fit: cover; background: var(--surface-soft); }
span.search-result-thumb { background: var(--surface-soft); }

/* -------------------------------------------------------------------------
   23. Поиск по фотографии
   ------------------------------------------------------------------------- */

.photo-search {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: var(--radius-lg);
  padding: 14px 18px; margin: 18px 0;
  background: var(--surface);
}
.photo-search p { margin: 0; font-size: 13.5px; color: var(--ink-soft); flex: 1; min-width: 220px; }
.photo-search input[type="file"] { display: none; }
.photo-search .btn { flex: 0 0 auto; }
.photo-results { margin: 10px 0 22px; }
.photo-results .muted { font-size: 13px; }

/* -------------------------------------------------------------------------
   24. Лояльность и реферальная ссылка
   ------------------------------------------------------------------------- */

.loyalty-bar { margin: 12px 0 4px; }
.loyalty-track { height: 8px; border-radius: 4px; background: var(--surface-soft); overflow: hidden; }
.loyalty-fill { height: 100%; background: var(--rose-deep); border-radius: 4px; }
.loyalty-legend { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }

.copy-row { display: flex; gap: 8px; margin-top: 10px; }
.copy-row input {
  flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--cream);
  font-family: inherit; font-size: 14px; color: var(--ink-soft);
}

/* -------------------------------------------------------------------------
   25. Календарь сезонности
   ------------------------------------------------------------------------- */

.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.season-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 14px 16px; background: var(--surface);
}
.season-card.is-now { border-color: var(--rose-deep); box-shadow: var(--shadow-sm); }
.season-card h4 { font-size: 15.5px; margin-bottom: 6px; }
.season-card p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.season-card .now-tag {
  display: inline-block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--rose-deep); color: #fff; border-radius: var(--radius-pill);
  padding: 2px 8px; margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
   26. Печатная карточка ухода
   ------------------------------------------------------------------------- */

.care-card {
  max-width: 420px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px; background: var(--surface);
}
.care-card ol { margin: 14px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.75; color: var(--ink-soft); }
.care-card .care-url { font-size: 13px; letter-spacing: .04em; color: var(--rose-deep); margin-top: 16px; }

@media print {
  .site-header, .site-footer, .tabbar, .wa-fab, .to-top, .cookie-note,
  .sheet, .sheet-scrim, .sheet-scrim-2, .no-print { display: none !important; }
  body { background: #fff !important; }
  .care-card { border: 1px solid #ddd; box-shadow: none; }
}

/* -------------------------------------------------------------------------
   27. История заказов с фотографиями
   ------------------------------------------------------------------------- */

.order-items { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.order-item { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.order-item img { width: 48px; height: 60px; border-radius: 8px; object-fit: cover; }

/* -------------------------------------------------------------------------
   28. Две вёрсточные ловушки, из-за которых страница уезжала вбок

   1) [hidden] и display в CSS. Атрибут hidden прячет элемент правилом
      браузера display:none, но ЛЮБОЕ авторское правило display его
      перебивает. У нас `.cart-layout { display: grid }` — и блок корзины
      с пустым итогом показывался даже тогда, когда стоял hidden. Ровно
      та же ловушка ждала все шторки и модалки.

   2) Грид-элемент по умолчанию имеет min-width: auto, то есть не может
      стать уже своего содержимого. Поле ввода промокода шириной в 20
      символов растягивало колонку итога до 547px при экране 390px — и
      вбок уезжала вся страница, а не только карточка.
   ------------------------------------------------------------------------- */

[hidden] { display: none !important; }

.cart-layout > *,
.product-layout > *,
.form-row > * { min-width: 0; }

.promo-row input,
.copy-row input { width: 100%; }

/* -------------------------------------------------------------------------
   29. Никакой горизонтальной прокрутки на телефоне

   overflow-x: clip, а не hidden: hidden создаёт прокручиваемый контейнер и
   ломает position: sticky (шапку и карточку итога в корзине), clip — нет.
   Это страховка от одиночного длинного слова или адреса в юридических
   текстах, а не замена нормальной вёрстке: сама вёрстка выше уже
   помещается в 390px, проверено.
   ------------------------------------------------------------------------- */

body { overflow-x: clip; }

/* Длинные адреса и слова в юридических текстах переносятся, а не растягивают
   страницу. */
.container p, .container li, .info-card p, .form-note { overflow-wrap: anywhere; }

/* =========================================================================
   Кольцо фокуса — базовый уровень, который нельзя перебить.

   В liquid.css правило уже было, но записано через :where(), а у :where()
   нулевая специфичность: любое `outline: none` из старых стилей (а их в
   style.css несколько) молча выигрывало. Проверка обходом с клавиатуры
   показала семь элементов без кольца — среди них кнопки «сегодня/завтра»
   на главной и варианты ответа в квизе. Человек, идущий по сайту табом,
   в этих местах терял себя.

   Здесь !important стоит осознанно: видимый фокус — не оформление, а
   условие, без которого клавиатурная навигация не работает вовсе.
   :focus-visible срабатывает только при клавиатуре, мыши кольцо не мешает.
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--rose-deep, #a8324f) !important;
  outline-offset: 3px !important;
}

/* На тёмных поверхностях тёмное кольцо сливается с фоном. */
.btn-primary:focus-visible,
.cta-band a:focus-visible,
.cta-band button:focus-visible,
.gallery-nav:focus-visible {
  outline-color: var(--cream, #fff7f2) !important;
}

/* Поля даты и времени — отдельной строкой: Chrome не считает переход табом
   внутрь этого виджета «клавиатурным фокусом»: :focus-visible не
   срабатывает, а сам фокус уходит внутрь, во вложенное поле дня. Поэтому
   :focus и :focus-within вместе — иначе человек, дошедший табом до выбора
   даты на главной, не видит, где он. Мышью в такие поля попадают редко,
   так что лишнего кольца это не создаёт. */
input[type="date"]:focus, input[type="date"]:focus-within,
input[type="time"]:focus, input[type="time"]:focus-within,
input[type="datetime-local"]:focus, input[type="datetime-local"]:focus-within {
  outline: 2px solid var(--rose-deep, #a8324f) !important;
  outline-offset: 3px !important;
}

/* =========================================================================
   23. Подвал на телефоне: реквизиты перестают выглядеть обрезком

   На узком экране низ подвала складывался в кучу: юридические ссылки в
   ряд, бейдж отдельной строкой, под ними три строки реквизитов мелким
   серым с рваным левым краем. Выглядело так, будто вёрстка кончилась,
   а текст остался.

   Реквизиты продавца убрать нельзя — их обязан показывать
   интернет-магазин. Значит их нужно не прятать, а оформить: выстроить
   по центру, дать воздух и одинаковый ритм строк.
   ========================================================================= */

@media (max-width: 760px) {
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-top: 22px;
  }
  .footer-legal-links {
    justify-content: center;
    gap: 8px 16px;
    row-gap: 10px;
  }
  .footer-badge { order: 2; }

  .footer-requisites {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.6;
    opacity: .85;
  }
  /* Адрес — единственная длинная строка, и переносить её посреди слова
     нельзя: «ул. Алиби Жангель-дина» читается как опечатка. */
  .footer-requisites span { max-width: 300px; overflow-wrap: normal; }
}

/* Плашка пикового дня: один раз в году она важнее всего на странице,
   поэтому стоит над шапкой и занимает всю ширину. Всё остальное время
   её нет в разметке вообще. */
.peak-banner {
  background: var(--rose-deep, #a8324f);
  color: #fff;
  padding: 10px 18px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  display: flex;
  gap: 4px 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.peak-banner b { font-weight: 600; }
.peak-banner span { opacity: .88; }
@media (max-width: 600px) { .peak-banner { font-size: 13px; padding: 9px 14px; } }