/* Сторінка враження.

   Десктоп — три колонки: галерея, опис, картка покупки (липка).
   Телефон — один стовпчик, у якому картка покупки піднімається одразу
   під назву, а вкладки перетворюються на акордеон. */

.pdp {
  padding-top: 18px;
  padding-bottom: 56px;
}

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

.pdp-crumbs li + li::before {
  content: '\\';
  margin-right: 8px;
  color: var(--home-muted, #6b625c);
}

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

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

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

/* --- верхній блок --- */
/* Кожна колонка живе своєю висотою: коли розгортають опис, росте тільки
   середня, а галерея й картка покупки лишаються на місці. */
.pdp__top {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 0.9fr);
  gap: 32px;
  align-items: start;
}

.pdp__gallery,
.pdp__main {
  min-width: 0;
}

/* На широкому екрані галерея трохи ширша: фото підганяється по висоті
   під картку купівлі, і у вузькій колонці воно виходило надто високим, з
   відрізаними боками. Нижче 1360px місця мало — там колонки як були,
   інакше картка купівлі стискається й кнопки переносяться. */
/* На ноутбуці (1200–1359px) картка купівлі вузька: «Купити собі» і
   «Поділитися» поруч не вміщались — підпис переносився. Лишаємо в
   «Поділитися» тільки іконку (так само, як на телефоні). */
@media (min-width: 1200px) and (max-width: 1359.98px) {
  .pdp-btn--share span {
    display: none;
  }

  .pdp-btn--self {
    white-space: nowrap;
  }
}

@media (min-width: 1360px) {
  .pdp__top {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.05fr) minmax(0, 0.85fr);
  }
}

/* --- галерея --- */
/* Скрипт підганяє висоту фото так, щоб низ галереї став урівень із
   карткою покупки. Поки він цього не зробив — звичайний квадрат. */
@media (min-width: 1200px) {
  .pdp__gallery.is-fitted .pdp-gallery__stage {
    aspect-ratio: auto;
    height: var(--pdp-stage-h);
  }
}

.pdp-gallery__stage {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--home-chip-bg, #fdf3ee);
  aspect-ratio: 1 / 1;
}

.pdp-gallery__main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Обкладинка бокса портретна (3/4), а не квадратна, як фото вражень —
   квадратний cover обрізав би верх або низ. Тепер контролер сам
   ресайзить попап-фото бокса під 3/4 (не під квадратний config_image_
   popup_*), тож рамка збігається з реальною пропорцією 1:1 — просто
   сама коробка, без білих полів і без фонової підкладки. */
.pdp__gallery--box .pdp-gallery__stage {
  /* Така ж площа, як у фото звичайного враження (квадрат на всю колонку) */
  aspect-ratio: 1 / 1;
  /* Пастельна плитка в колір боксу (такий самий, як на сторінці боксів);
     колір і масштаб кладе product.twig */
  background: var(--tile-bg, var(--home-chip-bg, #fdf3ee));
}

.pdp__gallery--box .pdp-gallery__main {
  object-fit: contain;
  /* Біле тло фото розчиняється в плитці, а коробка лишається як є */
  mix-blend-mode: multiply;
  transform: scale(var(--tile-zoom-m, 1));
}

@media (hover: hover) and (pointer: fine) {
  .pdp__gallery--box .pdp-gallery__zoom:hover .pdp-gallery__main {
    transform: scale(calc(var(--tile-zoom-m, 1) * 1.04));
  }
}

/* Плакат (фон не білий) не розчиниться — лежить на плитці як окремий аркуш */
.pdp__gallery--box .pdp-gallery__main.is-poster {
  mix-blend-mode: normal;
  filter: drop-shadow(0 10px 18px rgba(60, 30, 24, 0.22));
}

/* Плашки поверх фото потрібні лише на телефоні — на десктопі ті самі
   дані стоять текстом над назвою. */
.pdp-gallery__badges,
.pdp-gallery__next,
.pdp-gallery__fav {
  display: none;
}

.pdp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.7rem;
  color: var(--home-text, #221f1d);
  white-space: nowrap;
}

.pdp-badge svg {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
}

/* Показуємо рівно 4 мініатюри під головним фото; решта гортається
   стрілкою праворуч, а не розтягує колонку вбік. */
.pdp-gallery__thumbs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.pdp-gallery__thumbs-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.pdp-gallery__thumbs {
  display: flex;
  gap: 12px;
  transition: transform 0.25s ease;
}

.pdp-gallery__thumb {
  flex: 0 0 calc((100% - 3 * 12px) / 4);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.pdp-gallery__thumbs-next {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--home-chip-bg, #fdf3ee);
  color: var(--home-text, #221f1d);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pdp-gallery__thumbs-next:hover {
  background: var(--home-accent-bright, #e63329);
  color: #fff;
}

.pdp-gallery__thumbs-next svg {
  width: 15px;
  height: 15px;
}

.pdp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-gallery__thumb.is-active {
  border-color: var(--home-accent-bright, #e63329);
}

/* --- середня колонка --- */
.pdp__meta {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--home-text, #221f1d);
}

.pdp__city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pdp__city svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--home-icon, #6f6660);
}

.pdp__title {
  margin: 0 0 28px;
  font-size: 1.7rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

/* --- рядок характеристик --- */
/* Рівняємо саме іконки — на них падає око, і будь-яка різниця в кроці
   між ними одразу читається як «криво».
   Тому колонки однакової ширини, а вміст центрується в кожній: тоді
   центри іконок стоять через однаковий інтервал незалежно від того,
   яке під ними слово — «2 ос» чи «доступно щодня».
   (Варіант із space-between давав рівні проміжки між блоками, але
   іконки при цьому розповзалися, бо блоки різної ширини.) */
.pdp__specs {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
  margin: 0 0 30px;
  padding: 0;
  transform: translateX(calc(-1 * var(--pdp-specs-shift, 0px)));
}

/* Сам блок притиснутий до лівого краю колонки (тому перший підпис
   стоїть рівно під назвою), а всередині нього іконка центрована над
   підписом — як на референсі. Ширина блока = ширина підпису, тож
   довгий підпис переноситься на два рядки й теж лишається по центру. */
.pdp__specs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--home-text, #221f1d);
}

.pdp__specs svg {
  width: 24px;
  height: 24px;
  color: var(--home-text, #221f1d);
}

/* Факти про враження чи бокс — білі плашки з тінню й іконкою ліворуч (так
   само на телефоні нижче): два стовпчики, а не ряд іконок над підписами. */
.pdp__specs {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
  transform: none;
}

.pdp__specs li {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-card);
  text-align: left;
}

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

/* --- про враження --- */
.pdp__subtitle {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

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

.pdp__text p {
  margin: 0 0 10px;
}

/* Опис іноді приходить з бази обгорнутий у <strong> (так вийшло при
   імпорті) — тут це завжди звичайний текст, не заголовок. */
.pdp__text strong,
.pdp__text b {
  font-weight: 400;
}

/* Скільки рядків показувати — рахує скрипт: стільки, щоб низ середньої
   колонки став урівень із галереєю та карткою покупки. Три — запасне
   значення, якщо скрипт не виконався. */
.pdp__text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: var(--pdp-lines, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pdp__more {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--home-muted, #6b625c);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

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

/* Якщо текст і так коротший за три рядки — кнопка зайва */
.pdp__more[hidden] {
  display: none;
}

/* --- рожева підказка про готовий бокс --- */
.pdp-hint {
  /* Залишок менший за один рядок опису скрипт доганяє змінною —
     так низ середньої колонки лягає точно на лінію інших двох. */
  margin-top: calc(26px + var(--pdp-hint-extra, 0px));
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--home-cream-soft, #fdf3ee);
  /* Той самий токен, що й у білих карток — щоб тіні на сторінці
     не відрізнялись одна від одної. Власна рамка не потрібна:
     кільце вже входить у токен. */
  box-shadow: var(--shadow-card);
}

/* Підказка підросла, щоб вирівняти низ колонки: вміст по центру картки */
.pdp-hint.is-grown {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pdp-hint__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--home-text, #221f1d);
}

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

.pdp-hint__text {
  margin: 0 0 16px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--home-text, #221f1d);
}

.pdp-hint__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--home-text, #221f1d);
  text-decoration: none;
}

.pdp-hint__link svg {
  width: 16px;
  height: 16px;
}

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

/* --- картка покупки --- */
/* Картка їде за скролом, поки поруч є що гортати. */
.pdp__side {
  position: sticky;
  top: 20px;
  /* Без цього довга назва варіанта (вона в один рядок) розпирає колонку,
     і картка вилазить за край сторінки. */
  min-width: 0;
}

.pdp-buy {
  padding: 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.pdp-buy__form {
  display: grid;
  /* minmax(0, 1fr), а не 1fr: інакше мінімальна ширина колонки береться
     з вмісту, і рядок варіанта не дає картці стиснутись. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
}

.pdp-buy__form > * {
  min-width: 0;
}

/* --- вибір варіанту --- */
.pdp-variants {
  position: relative;
}

.pdp-variants__current {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  /* 9px замість 12: рядок був надто масивним. Нижче вже не можна —
     іконка з підписом самі по собі займають ~40px. */
  padding: 9px 6px;
  border: 1px solid var(--home-border, #f0e2d6);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: var(--home-text, #221f1d);
  cursor: pointer;
}

/* Один варіант — розкривати нічого, стрілку прибираємо */
.pdp-variants.is-single .pdp-variants__current {
  cursor: default;
}

.pdp-variants.is-single > .pdp-variants__current > svg {
  display: none;
}

.pdp-variants__cells {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* У макеті іконка стоїть над значенням, а не поруч */
.pdp-variants__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 8px;
  font-size: 0.78rem;
}

.pdp-variants__cell > span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Роздільники між колонками — як у макеті */
.pdp-variants__cell + .pdp-variants__cell {
  border-left: 1px solid var(--home-border, #f0e2d6);
}

.pdp-variants__cell svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--home-text, #221f1d);
}

/* Стрілка теж відділена рискою, як у макеті */
.pdp-variants__current > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 40px;
  align-self: center;
  padding-left: 12px;
  box-sizing: content-box;
  border-left: 1px solid var(--home-border, #f0e2d6);
  color: var(--home-icon, #6f6660);
  transition: transform 0.2s ease;
}

.pdp-variants.is-open > .pdp-variants__current > svg {
  transform: rotate(180deg);
}

.pdp-variants__list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--home-border, #f0e2d6);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(60, 30, 24, 0.12);
  max-height: 260px;
  overflow-y: auto;
}

.pdp-variants.is-open .pdp-variants__list {
  display: block;
}

.pdp-variants__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  color: var(--home-text, #221f1d);
  cursor: pointer;
}

/* У згорнутому рядку комірки рівні третини й обрізаються трикрапкою —
   так рядок не «стрибає» при зміні варіанта. А у випадайці варіант треба
   прочитати повністю, тому там довга назва переноситься на другий рядок,
   а не ховається. */
.pdp-variants__option .pdp-variants__cell {
  flex: 1 1 auto;
  line-height: 1.3;
}

.pdp-variants__option .pdp-variants__cell > span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.pdp-variants__option {
  align-items: stretch;
}

.pdp-variants__option:hover {
  background: var(--home-chip-bg, #fdf3ee);
}

.pdp-variants__option.is-selected {
  background: var(--home-chip-bg, #fdf3ee);
}

/* --- кнопки --- */
.pdp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pdp-btn--gift {
  background: var(--home-accent, #d6473a);
  border-color: var(--home-accent, #d6473a);
  color: #fff;
}

.pdp-btn--gift:hover {
  background: var(--home-accent-dark, #b83a2f);
  border-color: var(--home-accent-dark, #b83a2f);
}

.pdp-buy__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
}

/* Рядок боксу: головна дія широка, «Поділитися» — рівно під свій текст */
.pdp-buy__row--gift {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.pdp-buy__row--gift .pdp-btn--share {
  padding-left: 18px;
  padding-right: 18px;
}

.pdp-btn--self,
.pdp-btn--share {
  background: #fff;
  border-color: var(--home-accent, #d6473a);
  color: var(--home-accent, #d6473a);
}

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

/* активний стан, поки відкрите меню вибору месенджера */
.pdp-btn--share[aria-expanded="true"] {
  background: var(--home-accent, #d6473a);
  border-color: var(--home-accent, #d6473a);
  color: #fff;
}

.pdp-btn--share svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.pdp-buy__error {
  font-size: 0.8rem;
  color: var(--home-accent-bright, #e63329);
}

.pdp-buy__error:empty {
  display: none;
}

/* --- нотатки під кнопками --- */
.pdp-buy__note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--home-border, #f0e2d6);
  font-size: 0.85rem;
  color: var(--home-text, #221f1d);
}

.pdp-buy__note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: #e8a33d;
}

.pdp-buy__booking {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--home-cream-soft, #fdf3ee);
  box-shadow: var(--shadow-card);
}

.pdp-buy__booking h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--home-text, #221f1d);
}

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

.pdp-buy__booking p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--home-muted, #6b625c);
}

.pdp-buy__facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

/* У боксу фактів менше, але картка не має бути вищою за квадратне фото зліва */
.pdp-buy__facts--box {
  gap: 10px;
}

.pdp-buy__facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pdp-buy__facts svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 2px;
  color: var(--home-icon, #6f6660);
}

.pdp-buy__facts strong {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 3px;
  color: var(--home-text, #221f1d);
}

.pdp-buy__facts span {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--home-muted, #6b625c);
}

/* Для кого бокс — теги в рядок */
.pdp-buy__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.pdp-buy__facts .pdp-buy__tag {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--home-cream-soft, #fbf5f1);
  box-shadow: 0 0 0 1px var(--home-border, #f0e2d6);
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--home-text, #221f1d);
}

/* Довгі факти (найчастіше «Скасування») інакше розтягують увесь сайдбар,
   а за ним — і галерею зліва, яка підганяється під його висоту. */
.pdp-buy__fact-text {
  display: block;
}

.pdp-buy__fact-text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pdp-buy__fact-more {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.74rem;
  color: var(--home-muted, #6b625c);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pdp-buy__fact-more:hover {
  color: var(--home-accent-bright, #e63329);
}

.pdp-buy__fact-more[hidden] {
  display: none;
}

/* --- переваги --- */
.pdp-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  padding: 24px 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.pdp-benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 24px;
}

.pdp-benefit + .pdp-benefit {
  border-left: 1px solid var(--home-border, #f0e2d6);
}

.pdp-benefit svg {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  color: var(--home-text, #221f1d);
}

.pdp-benefit strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

.pdp-benefit span {
  font-size: 0.85rem;
  color: var(--home-muted, #6b625c);
}

/* --- вкладки --- */
.pdp-tabs {
  margin-top: 56px;
}

.pdp-tabs__nav {
  display: flex;
  gap: 48px;
  border-bottom: 1px solid var(--home-border, #f0e2d6);
}

.pdp-tabs__tab {
  position: relative;
  padding: 12px 4px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--home-text, #221f1d);
  cursor: pointer;
}

/* Підкреслення активної вкладки лежить поверх лінії знизу */
.pdp-tabs__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--home-accent-bright, #e63329);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pdp-tabs__tab.is-active::after {
  opacity: 1;
}

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

/* На десктопі видно лише активну панель, заголовок-акордеон схований */
.pdp-panel {
  display: none;
}

.pdp-panel.is-active {
  display: block;
}

.pdp-panel__head {
  display: none;
}

.pdp-panel__body {
  padding-top: 36px;
}

.pdp-panel__title {
  margin: 0 0 26px;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

/* --- перелік вкладок — ті самі пімпли, що й у «Кому підійде», але без
   іконки: пункт випадкового чек-листа не тягне на окрему піктограму. */
.pdp-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.pdp-checklist li {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--home-cream-soft, #fdf3ee);
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--home-text, #221f1d);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Легке «перекривляння» при наведенні: непарні й парні пімпли крутяться
   в різні боки, щоб рух виглядав живим, а не однаковим під лінійку. */
.pdp-checklist li:hover {
  background: var(--home-chip-bg, #fdf3ee);
  transform: rotate(-3deg) scale(1.05);
}

.pdp-checklist li:nth-child(even):hover {
  transform: rotate(3deg) scale(1.05);
}

.pdp-checklist p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Коли пункт один-єдиний — це не чек-лист, а суцільний текст (типу опису
   «Як проходить», який хтось написав абзацами в одному пункті замість
   переліку через «;»). Пімпл тут виглядає безглуздо, тож повертаємо
   звичайний текстовий блок і показуємо абзаци так, як їх написали. */
.pdp-checklist li:only-child {
  display: block;
  flex: 1 1 100%;
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
  white-space: pre-line;
  line-height: 1.7;
}

.pdp-checklist li:only-child:hover {
  background: none;
  transform: none;
}

/* --- FAQ: акордеон питання/відповідь — закрито, відкривається по кліку.
   Розмітку пунктів (кнопка-питання + прихована відповідь) добудовує
   скрипт, розбираючи текст по першому «?»; тут лише вигляд. Селектор
   із [data-pdp-panel="faq"] навмисно специфічніший за загальні правила
   пімплів і за :only-child — інакше FAQ з одним питанням виглядав би
   як звичайний абзац, а не як акордеон. */
[data-pdp-panel="faq"] .pdp-checklist ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* На всю ширину сторінки картки виглядали безглуздо довгими. Скрипт
     міряє, де саме закінчується остання вкладка («FAQ»), і підставляє
     цю ширину сюди — 640px лишається запасним значенням, якщо з якоїсь
     причини скрипт не порахував (наприклад, вкладки ще сховані). */
  max-width: var(--pdp-faq-width, 640px);
}

[data-pdp-panel="faq"] .pdp-checklist li.pdp-faq__item {
  display: block;
  flex: initial;
  width: 100%;
  padding: 0;
  border-radius: 16px;
  background: var(--home-cream-soft, #fdf3ee);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  white-space: normal;
  transition: none;
}

[data-pdp-panel="faq"] .pdp-checklist li.pdp-faq__item:hover {
  background: var(--home-cream-soft, #fdf3ee);
  transform: none;
}

.pdp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 22px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--home-text, #221f1d);
  text-align: left;
  cursor: pointer;
}

.pdp-faq__chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--home-accent-bright, #e63329);
  transition: transform 0.2s ease;
}

.pdp-faq__item.is-open .pdp-faq__chevron {
  transform: rotate(180deg);
}

/* padding-bottom при закритті теж 0 — сталий відступ знизу лишав би
   вузьку смужку, крізь яку зверху проглядав би текст навіть при
   max-height:0 (overflow:hidden ріже тільки те, що виходить за межі
   всього блоку разом з падінгом, а не сам вміст). */
.pdp-faq__answer {
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  padding: 0 22px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--home-muted, #6b625c);
  transition: max-height 0.25s ease;
}

.pdp-faq__item.is-open .pdp-faq__answer {
  padding-bottom: 18px;
}

/* --- кому підійде --- */
.pdp-section-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

.pdp-audience {
  margin-top: 56px;
}

.pdp-audience .pdp-section-title {
  margin-bottom: 26px;
}

.pdp-audience__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.pdp-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--home-cream-soft, #fdf3ee);
  font-size: 0.92rem;
  color: var(--home-text, #221f1d);
}

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

/* --- схожі враження --- */
.pdp-related {
  padding-bottom: 56px;
}

.pdp-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.pdp-related__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--home-text, #221f1d);
  text-decoration: none;
  white-space: nowrap;
}

.pdp-related__all svg {
  width: 18px;
  height: 18px;
}

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

/* «Інші бокси»: картки так само, як на сторінці «Готові бокси» —
   молочна плитка, портретна обкладинка на ній (стилі скопійовані звідти,
   бо catalog-page.css на сторінці товару не підключений). */
.pdp-related--box .gift-card__media {
  aspect-ratio: 3 / 2.4;
  box-sizing: border-box;
  margin: 10px 10px 0;
  padding: 14px 10px;
  border-radius: 14px;
  background: var(--tile-bg, #f7f2ec);
}

.pdp-related--box .gift-card__media img {
  inset: 14px 10px;
  width: calc(100% - 20px);
  height: calc(100% - 28px);
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(var(--tile-zoom, 1));
}

.pdp-related--box .gift-card__media img.is-poster {
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 14px rgba(60, 30, 24, 0.22));
}

/* OpenCart віддає схожі товари готовим бутстрап-рядком. Приводимо його
   до одного ряду, як у макеті: решту показує «Дивитись все». */
.pdp-related__track .row {
  --bs-gutter-x: 20px;
}

@media (min-width: 992px) {
  .pdp-related__track .row > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .pdp-related__track .row > *:nth-child(n + 5) {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Тут у ряд вміщається три картки — четверта поїхала б на новий рядок */
  .pdp-related__track .row > *:nth-child(n + 4) {
    display: none;
  }
}

/* --- планшет --- */
@media (max-width: 1199.98px) {
  /* Колонки тут стоять не в один ряд, тому вирівнювати нема з чим:
     повертаємо звичайні три рядки опису й звичайний відступ підказки.
     Робимо це стилями, а не скриптом, щоб нічого не залежало від того,
     чи спрацювала подія зміни розміру вікна. */
  .pdp__text.is-clamped {
    -webkit-line-clamp: 3;
  }

  .pdp-hint {
    margin-top: 26px;
  }

  .pdp__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .pdp__side {
    grid-column: 1 / -1;
    position: static;
  }

  .pdp-benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 0;
  }

  .pdp-benefit:nth-child(odd) {
    border-left: 0;
  }
}

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

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

  .pdp-crumbs::-webkit-scrollbar {
    display: none;
  }

  .pdp-crumbs li {
    white-space: nowrap;
  }

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

  /* Один стовпчик. Обгортки колонок прибираємо з розкладки, щоб картку
     покупки можна було підняти одразу під назву — так у макеті. */
  .pdp__top {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pdp__main,
  .pdp__side {
    display: contents;
  }

  .pdp__gallery {
    order: 1;
  }

  .pdp__title {
    order: 2;
    margin: 18px 0 14px;
    font-size: 1.05rem;
  }

  .pdp-buy {
    order: 4;
  }

  .pdp__about {
    order: 5;
    margin-top: 22px;
  }

  .pdp-hint {
    order: 6;
  }

  /* Ці дані на телефоні вже є — плашками просто на фото та в акордеоні */
  .pdp__meta {
    display: none;
  }

  /* У боксу плашок на фото немає, а в акордеоні лежить «Як обрати
     враження» — тож ці чотири факти більше ніде не показані. Лишаємо
     їх видимими, але в дві колонки: у чотири підписи не влазять.

     Той самий порядок блоків, що і в звичайного враження: спочатку
     інформація, потім кнопка купівлі — тому факти йдуть ПЕРЕД карткою
     купівлі (order 3, а не після неї), а не окремим рядком, що звисає
     нижче кнопки. Картка (фон + тінь) — той самий прийом, що й у
     .pdp-buy вище, щоб блок виглядав таким самим цілісним елементом,
     а не голими іконками просто на сторінці. */
  .pdp__specs {
    order: 3;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
    margin-bottom: 14px;
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-card);
    transform: none;
  }

  .pdp__specs li {
    font-size: 0.78rem;
  }

  .pdp__specs svg {
    width: 21px;
    height: 21px;
  }

  /* Бокс на телефоні: фото на плитці квадратом (не 3/4 — інакше воно
     займало пів екрана), а чотири факти — білими плашками з тінню й
     іконкою ліворуч, як і решта «наших» блоків, а не білою карткою з тінню. */
  .pdp__gallery--box .pdp-gallery__stage {
    aspect-ratio: 1 / 1;
  }

  .pdp__gallery--box .pdp-gallery__main {
    transform: scale(var(--tile-zoom-m, 1));
  }

  .pdp__gallery--box .pdp-gallery__zoom:hover .pdp-gallery__main {
    transform: scale(var(--tile-zoom-m, 1));
  }

  .pdp__specs {
    gap: 8px;
    align-items: stretch;
    padding: 0;
    background: none;
    box-shadow: none;
  }

  .pdp__specs li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-card);
    text-align: left;
    line-height: 1.3;
  }

  .pdp__specs svg {
    flex: 0 0 22px;
    color: var(--home-accent-bright, #e63329);
  }

  /* Було 4:3 — фото обрізались зверху й знизу. Тепер квадрат, а свайп
     пальцем по горизонталі гортає фото (product-page.js, onSwipe). */
  .pdp-gallery__stage {
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    touch-action: pan-y pinch-zoom;
  }

  .pdp-gallery__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .pdp-gallery__next {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--home-text, #221f1d);
    cursor: pointer;
  }

  .pdp-gallery__next svg {
    width: 15px;
    height: 15px;
  }

  /* Серце на фото: той самий матовий кружок, що й на картках каталогу.
     Крайнє праворуч, стрілка «наступне фото» стоїть лівіше. */
  .pdp-gallery__fav {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    color: var(--card-title, #1c1917);
    cursor: pointer;
  }

  .pdp-gallery__fav svg {
    width: 18px;
    height: 18px;
  }

  /* збережене — червоним, без зафарбовування */
  .pdp-gallery__fav.is-active {
    color: var(--card-accent, #e63329);
  }

  .pdp-gallery__next {
    right: 52px;
  }

  /* у рядку кнопок серця на телефоні вже нема — воно на фото */
  .pdp-btn--fav {
    display: none;
  }

  /* Мініатюри під фото на телефоні не потрібні — гортаємо стрілкою */
  .pdp-gallery__thumbs-row {
    display: none;
  }

  /* Картка покупки на телефоні без власного тла: вона і так на всю ширину */
  .pdp-buy {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
  }

  /* Три кнопки в один рядок, як у макеті: «Подарувати», «Купити собі»
     та квадратна кнопка «Поділитися». Обгортку двох останніх прибираємо
     з розкладки, щоб усі три стали колонками однієї сітки. */
  .pdp-buy__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 46px;
    gap: 10px;
  }

  .pdp-variants,
  .pdp-buy__error {
    grid-column: 1 / -1;
  }

  .pdp-buy__row {
    display: contents;
  }

  /* У боксі кнопок дві, і вони мають лишитись в одному рядку на всю
     ширину картки — інакше форма віддає їм одну свою колонку і
     «Подарувати» стискається до розміру слова. */
  .pdp-buy__row--gift {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pdp-btn {
    padding: 11px 10px;
    font-size: 0.8rem;
  }

  .pdp-btn--share span {
    display: none;
  }

  .pdp-btn--fav {
    padding: 0;
  }

  .pdp-btn--fav svg {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  /* На телефоні ці дані показує акордеон «Місце і умови» */
  .pdp-buy__note,
  .pdp-buy__booking,
  .pdp-buy__facts {
    display: none;
  }

  .pdp__subtitle {
    font-size: 0.95rem;
  }

  .pdp__text {
    font-size: 0.85rem;
  }

  .pdp-hint {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 14px;
  }

  .pdp-hint__title {
    font-size: 0.85rem;
    margin-bottom: 10px;
  }

  .pdp-hint__text {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .pdp-hint__link {
    font-size: 0.8rem;
  }

  /* --- переваги: чотири окремі картки 2×2 --- */
  .pdp-benefits {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 28px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    /* iOS Safari: плаваюча панель купівлі внизу (.pdp-sticky) має
       backdrop-filter, і сусідні елементи, що щойно проявились при
       скролі, іноді малюються з обрізаним верхнім краєм, поки Safari
       не перемалює шар. Власний композитний шар лікує це. */
    transform: translateZ(0);
  }

  .pdp-benefit {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--home-border, #f0e2d6);
  }

  .pdp-benefit + .pdp-benefit {
    border-left: 1px solid var(--home-border, #f0e2d6);
  }

  /* Планшетне правило вище (.pdp-benefit:nth-child(odd) { border-left: 0 })
     прибирало розділювач у лівій колонці двоколонкового ряду — там картки
     ще без власної рамки. На телефоні картки вже кожна зі своєю рамкою
     з усіх боків, і те саме правило (та сама специфічність, але раніше
     в файлі) без потреби зрізало ліву межу у 1-ї і 3-ї картки. Повертаємо. */
  .pdp-benefit:nth-child(odd) {
    border-left: 1px solid var(--home-border, #f0e2d6);
  }

  .pdp-benefit svg {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .pdp-benefit strong {
    font-size: 0.78rem;
  }

  .pdp-benefit span {
    font-size: 0.7rem;
  }

  /* --- вкладки стають акордеоном --- */
  .pdp-tabs {
    margin-top: 30px;
  }

  .pdp-tabs__nav {
    display: none;
  }

  /* Тут видно всі панелі — розгорнутість вирішує is-open, а не is-active */
  .pdp-panel {
    display: block;
    border-bottom: 1px solid var(--home-border, #f0e2d6);
  }

  .pdp-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 16px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--home-text, #221f1d);
    text-align: left;
    cursor: pointer;
  }

  .pdp-panel__head svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--home-icon, #6f6660);
    transition: transform 0.2s ease;
  }

  .pdp-panel.is-open .pdp-panel__head svg {
    transform: rotate(180deg);
  }

  .pdp-panel__body {
    display: none;
    padding: 0 0 20px;
  }

  .pdp-panel.is-open .pdp-panel__body {
    display: block;
  }

  /* Заголовок «Що вас чекає» на телефоні зайвий — його роль виконує
     назва самого акордеона. */
  .pdp-panel__title {
    display: none;
  }

  .pdp-checklist li {
    padding: 9px 16px;
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .pdp-checklist ul {
    gap: 10px;
  }

  /* --- кому підійде --- */
  .pdp-section-title {
    font-size: 1.05rem;
  }

  .pdp-audience {
    margin-top: 28px;
  }

  .pdp-audience .pdp-section-title {
    margin-bottom: 16px;
  }

  .pdp-audience__list {
    gap: 10px;
  }

  .pdp-chip {
    padding: 9px 16px;
    font-size: 0.78rem;
  }

  .pdp-chip svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  /* --- схожі враження: смуга з гортанням --- */
  .pdp-related {
    padding-bottom: 32px;
  }

  .pdp-related__head {
    margin-bottom: 16px;
  }

  .pdp-related__all {
    font-size: 0.78rem;
  }

  .pdp-related__all svg {
    width: 14px;
    height: 14px;
  }

  .pdp-related__track .row {
    /* Проміжок між картками робимо gap-ом, а не полями колонок:
       поле колонки додавалось до відступу смуги, і перша картка
       стояла на 10px правіше за заголовок над нею. */
    --bs-gutter-x: 0;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Смуга на всю ширину екрана — наступна картка визирає з-за краю */
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    scroll-padding-left: var(--page-gutter);
  }

  .pdp-related__track .row::-webkit-scrollbar {
    display: none;
  }

  /* 78%, а не 62%: у картці рядок характеристик тепер із іконками над
     значеннями, і на вузькій картці «1200 грн» обрізалось трикрапкою.
     Наступна картка все одно визирає з-за краю. */
  .pdp-related__track .row > * {
    flex: 0 0 auto;
    width: 78%;
    scroll-snap-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-btn,
  .pdp-tabs__tab::after,
  .pdp-variants__current > svg,
  .pdp-panel__head svg,
  .pdp-gallery__thumb {
    transition: none;
  }
}

/* --- легке наближення фото при наведенні ---
   Кадр обрізає, сам знімок трохи більшає: дрібниця, але сторінка
   одразу відчувається живішою. */
.pdp-gallery__zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: inherit;
}

.pdp-gallery__main {
  transition: transform 0.5s ease;
}

/* Збільшення при наведенні — тільки для миші. На телефоні після дотику
   або свайпу :hover «залипає», і фото лишалось приближеним. */
@media (hover: hover) and (pointer: fine) {
  .pdp-gallery__zoom:hover .pdp-gallery__main {
    transform: scale(1.05);
  }
}

/* --- перегляд фото на весь екран --- */
.pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 72px;
}

.pdp-lightbox[hidden] {
  display: none;
}

.pdp-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 10, 0.88);
}

.pdp-lightbox__image {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}

.pdp-lightbox__close,
.pdp-lightbox__nav {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.pdp-lightbox__close:hover,
.pdp-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.26);
}

.pdp-lightbox__close svg,
.pdp-lightbox__nav svg {
  width: 20px;
  height: 20px;
}

.pdp-lightbox__close {
  top: 20px;
  right: 20px;
}

.pdp-lightbox__nav--prev {
  left: 16px;
}

.pdp-lightbox__nav--next {
  right: 16px;
}

/* Одне фото — гортати нічого */
.pdp-lightbox.is-single .pdp-lightbox__nav,
.pdp-lightbox.is-single .pdp-lightbox__counter {
  display: none;
}

.pdp-lightbox__counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

/* Сторінка під відкритим фото не гортається */
body.pdp-lightbox-open {
  overflow: hidden;
}

/* --- липка панель купівлі (тільки телефон) --- */
.pdp-sticky {
  display: none;
}

@media (max-width: 767.98px) {
  /* Не смуга на всю ширину, а картка, що ніби лежить поверх сторінки:
     власні поля, заокруглення й м'яка тінь. Виїжджає знизу, а не
     з'являється ривком. */
  .pdp-sticky {
    position: fixed;
    left: var(--page-gutter);
    right: var(--page-gutter);
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    box-shadow:
      0 0 0 1px rgba(60, 30, 24, 0.05),
      0 10px 30px rgba(60, 30, 24, 0.16);
    transform: translateY(calc(100% + 20px));
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
  }

  .pdp-sticky.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* Мініатюра прив'язує панель до товару — без неї це просто ціна
     невідомо від чого. */
  .pdp-sticky__thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
  }

  /* Обкладинка бокса портретна — квадратний cover обрізав би верх
     або низ. contain без фону: просто менша коробка в тій самій
     клітинці, як і в головній галереї вище. */
  .pdp-sticky--box .pdp-sticky__thumb {
    border-radius: 6px;
    object-fit: contain;
  }

  .pdp-sticky__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .pdp-sticky__price {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--home-text, #221f1d);
    white-space: nowrap;
  }

  .pdp-sticky__meta {
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--home-muted, #6f6660);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pdp-sticky__btn {
    flex: 0 0 auto;
    padding: 13px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--home-accent, #d6473a);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* Щоб панель не накривала останній блок сторінки */
  .pdp {
    padding-bottom: 86px;
  }

  .pdp-lightbox {
    padding: 16px;
  }

  .pdp-lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .pdp-lightbox__nav--prev {
    left: 8px;
  }

  .pdp-lightbox__nav--next {
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-sticky {
    transition: none;
  }

  .pdp-gallery__main {
    transition: none;
  }

  .pdp-gallery__zoom:hover .pdp-gallery__main {
    transform: none;
  }
}

/* --- «Чому ONEDEAL» ---
   Кремова панель на всю ширину блоку, всередині три білі картки.
   Той самий словник, що й в інших блоках сайту: кремове тло, білі
   картки, червоний акцент в блідо-рожевому кружечку. */
.pdp-why {
  position: relative;
  /* Своя сходинка накладання: конфеті звисає за краї панелі й має
     лягати поверх сусідніх блоків. */
  z-index: 2;
  /* Більше повітря згори: конфеті вилітає з-за верхнього краю панелі
     і піднімається вище за неї — при тісному відступі воно залітало
     під блок, що стоїть над нею. */
  margin-top: 96px;
  padding: 44px 40px 48px;
  border-radius: 24px;
  background: var(--home-cream-soft, #fdf3ee);
  box-shadow: var(--shadow-card);
  /* Навмисно НЕ обрізаємо: конфеті сидить на краях панелі й трохи
     звисає за них. Обрізане рівно по межі, воно одразу виглядало б
     намальованим. */
}

/* Заголовок і картки — над конфеті */
.pdp-why__title,
.pdp-why__grid {
  position: relative;
  z-index: 1;
}

.pdp-why__title {
  margin: 0 0 28px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

.pdp-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.pdp-why__card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 28px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(60, 30, 24, 0.04),
    0 6px 18px rgba(60, 30, 24, 0.06);
}

/* Іконка в кружечку — той самий прийом, що в блоці готових боксів */
.pdp-why__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--home-chip-bg, #fdf3ee);
  color: var(--home-accent-bright, #e63329);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.pdp-why__card:hover .pdp-why__icon {
  background: var(--home-accent-bright, #e63329);
  color: #fff;
}

.pdp-why__icon svg {
  width: 24px;
  height: 24px;
}

.pdp-why__name {
  margin: 0 0 10px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--home-text, #221f1d);
}

.pdp-why__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--home-muted, #6f6660);
}

/* --- планшет --- */
@media (max-width: 991.98px) {
  .pdp-why {
    padding: 34px 26px 36px;
  }

  .pdp-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* --- телефон --- */
@media (max-width: 767.98px) {
  .pdp-why {
    margin-top: 64px;
    padding: 28px 18px 30px;
    border-radius: 18px;
  }

  .pdp-why__title {
    margin-bottom: 20px;
    font-size: 1.15rem;
  }

  /* Стовпчиком, а не смугою з гортанням: пунктів лише три, і текст
     у них довший за підпис — горизонтально їх довелось би різати. */
  .pdp-why__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pdp-why__card {
    padding: 20px 18px 22px;
    border-radius: 16px;
  }

  .pdp-why__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
  }

  .pdp-why__icon svg {
    width: 21px;
    height: 21px;
  }

  .pdp-why__name {
    font-size: 0.95rem;
  }

  .pdp-why__text {
    font-size: 0.82rem;
  }
}

/* Враження недоступне під час воєнного стану: замість кнопок покупки — пояснення */
.pdp-unavailable {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px solid var(--home-line, #e6e1dd);
  border-radius: 12px;
  background: var(--home-accent-soft, #fbe9e6);
  font-size: 0.9rem;
}
.pdp-unavailable span { color: var(--home-muted, #6f6762); }


/* серце «в обране» біля кнопок покупки: лише іконка, без рамки й тла */
.pdp-btn--fav {
  background: none;
  border-color: transparent;
  color: var(--home-accent, #d6473a);
  padding: 0 6px;
}

.pdp-btn--fav:hover {
  background: none;
  border-color: transparent;
  color: var(--home-accent-dark, #b83a2f);
}

.pdp-btn--fav svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}