/* Сторінка каталогу: крихти, панель пошуку, сітка карток із промо-плиткою
   всередині та кнопка «Показати більше». */

.catalog {
  /* Крихти не мають прилипати до шапки — між ними потрібне повітря */
  padding-top: 36px;
  padding-bottom: 56px;
}

/* --- хлібні крихти --- */
.catalog__crumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 32px;
  padding: 0;
  font-size: 0.85rem;
  color: var(--home-muted, #6b625c);
}

.catalog__crumbs li + li::before {
  content: '\\';
  margin-right: 8px;
}

.catalog__crumbs a {
  color: var(--home-muted, #6b625c);
  text-decoration: none;
}

.catalog__crumbs li:last-child a {
  color: var(--home-text, #221f1d);
}

.catalog__crumbs a:hover {
  color: var(--home-accent-bright, #e63329);
}

/* Панель пошуку тут не «звисає» з кремової секції, як на головній,
   а просто стоїть у потоці — тому зсуви з home-hero.css знімаємо. */
.catalog .home-search {
  margin-top: 0;
  margin-bottom: 40px;
}

/* --- заголовок сторінки пошуку --- */
.catalog__search-heading {
  margin: 0 0 24px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

/* --- сітка карток --- */
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.catalog__cell {
  min-width: 0;
  /* Точка відліку для cqw усередині клітинки. Контейнером має бути саме
     клітинка, а не сама плитка: елемент не може задавати собі розміри
     у відсотках від власної ширини — вийшла б кругова залежність, і
     браузер мовчки бере не те значення. */
  container-type: inline-size;
}

/* Картка товару тягнеться на всю висоту клітинки, щоб ряд був рівний */
.catalog__cell > * {
  height: 100%;
}

/* --- промо-плитка всередині сітки --- */
.catalog-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 32px 26px;
  border-radius: 16px;
  text-align: center;
  /* Темна плитка з червоним підсвіченням знизу праворуч — як у макеті */
  background:
    radial-gradient(120% 90% at 85% 100%, rgba(230, 51, 41, 0.85) 0%, rgba(230, 51, 41, 0) 60%),
    linear-gradient(160deg, #2b2422 0%, #171312 100%);
  color: #fff;
}

.catalog-promo__title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.catalog-promo__text {
  margin: 0 0 24px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}

.catalog-promo__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 999px;
  background: var(--home-accent, #d6473a);
  color: #fff;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.catalog-promo__btn:hover {
  background: var(--home-accent-dark, #b83a2f);
  color: #fff;
}

/* --- показати більше --- */
.catalog__more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.catalog__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 42px;
  border-radius: 999px;
  border: 1px solid var(--home-accent, #d6473a);
  background: #fff;
  color: var(--home-accent, #d6473a);
  font-size: 0.92rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.catalog__more-btn:hover {
  background: var(--home-cream-soft, #fdf3ee);
  color: var(--home-accent-dark, #b83a2f);
}

.catalog__more-btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.catalog__city {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--home-cream-soft, #fbf5f1);
  font-size: 0.92rem;
  color: var(--home-text, #221f1d);
}

.catalog__city svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--home-accent-bright, #e63329);
}

.catalog__city-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  color: var(--home-accent-bright, #e63329);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.catalog__city-btn:hover {
  color: var(--home-accent-dark, #b83a2f);
}

.catalog__empty {
  margin: 40px 0;
  text-align: center;
  color: var(--home-muted, #6b625c);
}

/* --- планшет --- */
@media (max-width: 1199.98px) {
  .catalog__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (max-width: 991.98px) {
  .catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- телефон --- */
@media (max-width: 767.98px) {
  .catalog {
    padding-top: 28px;
    padding-bottom: 40px;
  }

  .catalog__crumbs {
    margin-bottom: 28px;
    font-size: 0.68rem;
    gap: 5px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .catalog__crumbs::-webkit-scrollbar {
    display: none;
  }

  .catalog__crumbs li {
    white-space: nowrap;
  }

  .catalog__crumbs li + li::before {
    margin-right: 5px;
  }

  .catalog .home-search {
    margin-bottom: 34px;
  }

  /* Одна картка в ряд: на телефоні вона на всю ширину, як у «Популярних» */
  .catalog__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  /* Промо-плитка на телефоні розтягується на обидві колонки: у вузькій
     клітинці її текст перетворився б на стовпчик з двох слів. */
  .catalog__cell:has(.catalog-promo) {
    grid-column: 1 / -1;
  }

  .catalog-promo {
    padding: 24px 20px;
  }

  .catalog-promo__title {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .catalog-promo__text {
    font-size: 0.76rem;
    margin-bottom: 18px;
    max-width: 34ch;
  }

  .catalog__more {
    margin-top: 28px;
  }

  .catalog__more-btn {
    padding: 12px 32px;
    font-size: 0.82rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-promo__btn,
  .catalog__more-btn {
    transition: none;
  }
}

/* ===== Сторінка «Готові подарункові бокси» ===== */

/* Обкладинки боксів самі портретні — на відміну від звичайних карток
   вражень (16/9, .gift-card__media у product-card.css). Рамка тут
   навмисно ширша за саму обкладинку (3/4) — не під її пропорцію,
   а помітно нижча, — а фото contain, не cover: коробка вписується
   меншою, з полями по боках, зате картка загалом не велетенська й
   сама коробка ніколи не обрізається, навіть якщо чиясь обкладинка
   виявиться не рівно 3:4. Білий фон — щоб порожні поля збоку не
   впадали в очі. Override лише на цій сторінці — інших карток сайту
   не чіпаємо. */
.boxes .gift-card__media {
  aspect-ratio: 3 / 2.4;
  box-sizing: border-box;
  /* Обкладинка лежить на плитці, а не впритул до краю картки: плитка —
     пастельна, у колір самої коробки (--tile-bg рахує boxes.php). */
  margin: 10px 10px 0;
  padding: 14px 10px;
  border-radius: 14px;
  background: var(--tile-bg, #fff);
}

.boxes .gift-card__media img {
  inset: 14px 10px;
  width: calc(100% - 20px);
  height: calc(100% - 28px);
  object-fit: contain;
  /* Фото коробки з білим фоном «розчиняється» в пастельній плитці: біле
     під multiply не змінює колір тла, а коробка лишається як є. */
  mix-blend-mode: multiply;
  /* --tile-zoom: фото, зняті здалеку, boxes.php збільшує, щоб коробка
     заповнила плитку (білі поля під multiply не видно, тож кадр можна
     сміливо різати). */
  transform: scale(var(--tile-zoom, 1));
  transition: transform 0.35s ease;
}

.boxes .gift-card:hover .gift-card__media img {
  transform: scale(calc(var(--tile-zoom, 1) * 1.04));
}

/* Плакат (обкладинка з кольоровим фоном) не розчиниться — тож лежить на
   плитці як окремий аркуш, з м'якою тінню. */
.boxes .gift-card__media img.is-poster {
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 14px rgba(60, 30, 24, 0.22));
}

/* Менші картки — на компі на один стовпчик більше, ніж у звичайного
   каталогу вражень. */
@media (min-width: 1200px) {
  .boxes .catalog__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .boxes .catalog__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.boxes__head {
  max-width: 62ch;
  /* Відступ згори дають крихти — свій не додаємо, щоб не подвоювався */
  margin: 0 auto 56px;
  text-align: center;
}

.boxes__title {
  margin: 0 0 18px;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

.boxes__intro {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--home-text, #221f1d);
}

/* --- пояснювальна плитка в сітці --- */
.boxes-info {
  /* Плитка росте разом із картками, тому розміри всередині рахуються
     від ширини клітинки (cqw), а не фіксованими пікселями: інакше вміст
     лишається малим і половина висоти стоїть порожня. */
  --step-icon: 46px;
  --step-arrow: 14px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 22px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: center;
}

/* Вміст займає всю висоту плитки, але не більше за межу: до неї проміжки
   рівномірно розсуваються й плитка виглядає заповненою, а далі блок
   просто стоїть по центру. Без межі на дуже високій плитці значок і кроки
   розліталися б у протилежні кути. */
.boxes-info__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Було space-between: коли плитка тягнеться під висоту сусідньої
     картки (а картки боксів тепер самі нижчі, ніж коли це писалось),
     контент розповзався на всю висоту, лишаючи один величезний порожній
     проміжок посередині. Тепер вміст просто стоїть по центру своїми
     природними відступами (див. margin-top кроків нижче), а зайва
     висота розходиться рівномірно згори й знизу. */
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 460px;
}

.boxes-info__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex: 0 0 auto;
  border-radius: 50%;
  /* М'який градієнт замість заливки — коло виглядає об'ємним, а не плямою */
  background: linear-gradient(150deg, #ee4b3e 0%, #d6392c 100%);
  color: #fff;
}

.boxes-info__badge svg {
  width: 45%;
  height: 45%;
}

.boxes-info__badge {
  margin-bottom: 0;
}

.boxes-info__title {
  margin: 14px 0 0;
  /* Було 6.4cqw і 700 — у картці 292px це давало 19px жирним, і плитка
     кричала гучніше за самі товари поруч. Тепер заголовок лише трохи
     більший за текст під ним, а вага 600 замість 700. */
  /* Раніше розмір рахувався від ширини картки (cqw) і виходив ~12px —
     плитка здавалась порожньою. Картка в сітці завжди 240–300px, тож
     звичайні rem тут надійніші. */
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--home-text, #221f1d);
}

.boxes-info__text {
  margin: 10px 0 0;
  /* Той самий розмір, що в описі на сусідніх картках (.gift-card__text) */
  font-size: 0.78rem;
  line-height: 1.5;
  /* Приглушений колір — щоб пояснення не сперечалося із заголовком */
  color: var(--home-muted, #6f6660);
}

/* --- три кроки --- */
/* Підпис над іконкою, іконка на блідо-рожевому кружечку, між кроками —
   стрілка на рівні кружечків. Колонки auto, щоб стрілки не розтягувались
   разом із підписами. */
.boxes-steps {
  list-style: none;
  display: grid;
  /* Три однакові колонки під кроки й дві вузькі під стрілки: тоді
     центри кружечків стоять через рівні проміжки, скільки б слів не
     було в підписі. При auto-колонках крок залежав від довжини тексту. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 4px;
  margin: 18px 0 0;
  /* Кроки на блідій плашці — читаються як окремий блок */
  padding: 14px 6px 12px;
  border-radius: 16px;
  background: #fdf6f2;
  width: 100%;
}

.boxes-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.boxes-step__label {
  /* Кожне слово окремим рядком — тоді всі три підписи однакової висоти
     й починаються на одній лінії. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--home-text, #221f1d);
}

.boxes-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--step-icon);
  height: var(--step-icon);
  flex: 0 0 var(--step-icon);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(214, 57, 44, 0.12);
  color: var(--home-accent-bright, #e63329);
}

.boxes-step__icon svg {
  width: 50%;
  height: 50%;
}

/* Стрілка стоїть у стовпчику без підпису, тому вирівнюється по низу
   рядка. Піднімаємо її на різницю між кружечком і самою стрілкою — так
   вона опиняється точно навпроти іконок.
   Обидва розміри — змінні: з жорсткими числами зсув розсинхронізувався
   на телефоні, де стрілка менша. */
.boxes-steps__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc((var(--step-icon) - var(--step-arrow)) / 2);
  color: var(--home-text, #221f1d);
}

.boxes-steps__arrow svg {
  width: var(--step-arrow);
  height: var(--step-arrow);
}

/* --- телефон --- */
@media (max-width: 767.98px) {
  .boxes__head {
    margin: 0 auto 48px;
  }

  .boxes__title {
    font-size: 1.15rem;
    margin-bottom: 14px;
  }

  .boxes__intro {
    font-size: 0.78rem;
  }

  /* На телефоні плитка стоїть сама в ряду — сусідньої картки, яка
     тягла б її по висоті, немає. Висота — за змістом (раніше min-height
     400px лишав порожнечу згори й знизу), а текст і іконки більші, ніж
     виходило б із cqw-розмірів десктопної плитки: вони там розраховані на
     вузьку картку в сітці, а тут плитка на всю ширину екрана. */
  .boxes-info {
    --step-icon: 60px;
    --step-arrow: 18px;
    min-height: 0;
    padding: 34px 22px 32px;
  }

  .boxes-info__inner {
    height: auto;
    max-height: none;
  }

  .boxes-info__badge {
    width: 80px;
    height: 80px;
  }

  .boxes-info__title {
    margin-top: 20px;
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .boxes-info__text {
    margin-top: 10px;
    font-size: 0.78rem;
    line-height: 1.5;
  }

  /* Кроки лежать на блідій плашці: так вони читаються як окремий блок,
     а не губляться під довгим текстом. */
  .boxes-steps {
    gap: 4px;
    margin-top: 26px;
    padding: 18px 8px 16px;
    border-radius: 18px;
    background: #fdf6f2;
  }

  .boxes-step {
    gap: 12px;
  }

  .boxes-step__label {
    font-size: 0.78rem;
    font-weight: 500;
  }
}