/* Апсейл-концепты на PDP: плашка «альтернатива» и блок «Andere opties».
   Два варианта вёрстки — модификатор --v-a / --v-b.
   Палитра и радиусы взяты у компаратора, чтобы концепт читался как
   часть темы, а не как чужой блок.

   ⚠ Живая плашка (upsell-plate.css) владеет всем пространством `.plaza-upsell*`;
   стендовая плашка этого модуля — только `.plaza-upsell-alt*`. Пересечение
   имён между модулями остаётся нулевым — не смешивать. */

/* --- КОНЦЕПТ 1: плашка под кнопкой корзины ----------------------- */
/* Возвращена 02.09.2026 по решению владельца (вариант «b», белая
   карточка с фото) — ТОЛЬКО на стенде. Строки «U bespaart» и её правил
   здесь нет: убрана 03.09.2026, см. шапку inc/upsell/upsell-core.php.
   Правила те же,
   что до 31.08, но в НОВОМ пространстве имён `.plaza-upsell-alt*`: старое
   `.plaza-upsell*` принадлежит живой плашке (upsell-plate.css), и пересечение
   имён уже давало НЕВИДИМОЕ расхождение стенда и боя (см. ниже). */

.plaza-upsell-alt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fafafa;
}

.plaza-upsell-alt__icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  color: #FF0083;
}

.plaza-upsell-alt__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
}

.plaza-upsell-alt__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plaza-upsell-alt__body {
  flex: 1 1 auto;
  min-width: 0;
}

.plaza-upsell-alt__title {
  margin: 0;
  font-family: Gilroy, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #767676;
}

.plaza-upsell-alt__name {
  margin: 2px 0 0;
  font-family: Gilroy, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 130%;
  color: #1c1c1c;
}

.plaza-upsell-alt__pricing {
  margin: 4px 0 0;
}

.plaza-upsell-alt__price {
  font-family: Gilroy, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
}

/* База цены — не мелкий шрифт ради приличия, а часть самой цены:
   без размера число ничего не значит. Поэтому отдельной строкой и
   всегда видима, без «подробнее». */
.plaza-upsell-alt__base {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 140%;
  color: #767676;
}

.plaza-upsell-alt__cta {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid #FF0083;
  border-radius: 2px;
  background: #fff;
  color: #FF0083;
  font-family: Gilroy, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.plaza-upsell-alt__cta:hover,
.plaza-upsell-alt__cta:focus-visible {
  background: #FF0083;
  color: #fff;
  text-decoration: none;
}

/* Вариант «б» тяжелее по контенту (фото + экономия) — даём ему больше
   воздуха и белый фон, чтобы он не спорил с блоком цены выше. */
.plaza-upsell-alt--v-b {
  align-items: flex-start;
  padding: 14px;
  background: #fff;
  border-color: #cfcfcf;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.plaza-upsell-alt--v-b .plaza-upsell-alt__cta {
  align-self: flex-start;
  margin-top: 2px;
}

@media only screen and (max-width: 640px) {
  .plaza-upsell-alt {
    flex-wrap: wrap;
  }

  /* Та же ловушка, что и в карточках «Andere opties»: плашка — flex с gap,
     и `width: 100%` от контент-бокса вылезает за её границу на величину
     gap. Тянем базисом. */
  .plaza-upsell-alt__cta {
    flex: 1 1 100%;
    width: auto;
    justify-content: center;
    margin-top: 4px;
  }
}

/* --- КОНЦЕПТ 2: блок «Andere opties» ----------------------------- */

/* Цена карточки. Имена намеренно в пространстве `plaza-upsell-options__*`,
   а не `plaza-upsell__*`: до 31.08.2026 карточки печатали `.plaza-upsell__price`
   и `.plaza-upsell__base` — те же имена, что и плашка в upsell-plate.css.
   Удалить их было нельзя (их печатают карточки), а оставить — значило держать
   живой механизм: этот файл грузится ПОЗЖЕ upsell-plate.css, поэтому на стенде
   цену плашки красили бы правила отсюда, а на бою (где этого файла нет вовсе) —
   её собственные. Значения были близки, так что расхождение вышло бы НЕВИДИМЫМ:
   поймал бы его не verify, а разъезд цены на витрине когда-нибудь потом.
   Ровно так `.plaza-upsell__thumb` уже дал ложный зелёный. Пересечение имён
   между модулями теперь нулевое: всё пространство `.plaza-upsell*` принадлежит
   плашке, всё `.plaza-upsell-options*` — карточкам. Не возвращать. */
.plaza-upsell-options__price {
  font-family: Gilroy, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
}

/* База цены — не мелкий шрифт ради приличия, а часть самой цены:
   без размера число ничего не значит. Поэтому отдельной строкой и
   всегда видима, без «подробнее». */
.plaza-upsell-options__base {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 140%;
  color: #767676;
}

.plaza-upsell-options {
  margin: 32px 0;
}

.plaza-upsell-options__title {
  font-family: Gilroy, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 130%;
  color: #1c1c1c;
  margin: 0 0 14px;
}

.plaza-upsell-options__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.plaza-upsell-options__card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background: #fff;
}

/* tier2 и tier3 одинаково — нейтральная подача, требование
   конкурентного права 03.09.2026. */
.plaza-upsell-options__card--tier2,
.plaza-upsell-options__card--tier3 {
  border-color: #cfcfcf;
}

.plaza-upsell-options__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.plaza-upsell-options__logo {
  height: 26px;
  width: 110px;
  object-fit: contain;
  object-position: left center;
}

.plaza-upsell-options__logo--text {
  font-family: Gilroy, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1c;
}

.plaza-upsell-options__badge {
  padding: 3px 8px;
  border-radius: 2px;
  background: #f2f2f2;
  color: #3a3a3a;
  font-family: Gilroy, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.plaza-upsell-options__card--tier2 .plaza-upsell-options__badge,
.plaza-upsell-options__card--tier3 .plaza-upsell-options__badge {
  background: #ffe6f2;
  color: #b3005c;
}

.plaza-upsell-options__name {
  margin: 0 0 6px;
  font-family: Gilroy, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 130%;
  color: #1c1c1c;
}

.plaza-upsell-options__usps {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.plaza-upsell-options__usps li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 145%;
  color: #3a3a3a;
}

.plaza-upsell-options__usps li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #FF0083;
  border-bottom: 2px solid #FF0083;
  transform: rotate(-45deg);
}

.plaza-upsell-options__pricing {
  margin: auto 0 0;
  padding-top: 8px;
}

.plaza-upsell-options__pricing .plaza-upsell-options__price {
  font-size: 20px;
}

.plaza-upsell-options__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #FF0083;
  border-radius: 2px;
  background: #fff;
  color: #FF0083;
  font-family: Gilroy, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background 150ms ease, color 150ms ease;
}

.plaza-upsell-options__cta:hover,
.plaza-upsell-options__cta:focus-visible {
  background: #FF0083;
  color: #fff;
  text-decoration: none;
}

/* Вариант «б» — компактный ряд по мотивам полосы брендов из мобильного
   компаратора: лого, цена с базой, CTA. USP и название скрыты рендером,
   поэтому здесь только геометрия. */
.plaza-upsell-options--v-b .plaza-upsell-options__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.plaza-upsell-options--v-b .plaza-upsell-options__card {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.plaza-upsell-options--v-b .plaza-upsell-options__head {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 0;
}

.plaza-upsell-options--v-b .plaza-upsell-options__logo {
  height: 22px;
  width: 92px;
}

/* Фото товара — первый элемент строки. Квадрат фиксированного размера:
   `contain` внутри него держит и портретные, и ландшафтные снимки без
   обрезки, а соседи не съезжают от того, какой формат попался. */
.plaza-upsell-options--v-b .plaza-upsell-options__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
}

.plaza-upsell-options--v-b .plaza-upsell-options__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plaza-upsell-options--v-b .plaza-upsell-options__pricing {
  flex: 1 1 auto;
  margin: 0;
  padding-top: 0;
  min-width: 0;
}

.plaza-upsell-options--v-b .plaza-upsell-options__pricing .plaza-upsell-options__price {
  font-size: 17px;
}

.plaza-upsell-options--v-b .plaza-upsell-options__cta {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 8px 12px;
  font-size: 13px;
}

@media only screen and (max-width: 640px) {
  /* Раскладку карточек с 767px забирает карусель ниже (display: flex),
     поэтому колонок здесь больше не назначаем. */

  .plaza-upsell-options--v-b .plaza-upsell-options__card {
    flex-wrap: wrap;
  }

  /* На полосе карточка занимает 84% экрана, и три элемента в строке делят
     ~300px: каждый пиксель фото — это пиксель, отобранный у подписи цены,
     которая тут длинная («74×98 cm (R68C 074/098) · …»). */
  .plaza-upsell-options--v-b .plaza-upsell-options__thumb {
    width: 48px;
    height: 48px;
  }

  /* Карточка здесь — flex-строка с gap, поэтому `width: 100%` считался бы
     от контент-бокса и вылезал за границу карточки ровно на gap (замерено:
     11px). Растягиваем флекс-базисом, а ширину оставляем авто. */
  .plaza-upsell-options--v-b .plaza-upsell-options__cta {
    flex: 1 1 100%;
    width: auto;
    justify-content: center;
  }
}

/* --- Мобильная карусель блока «Andere opties» -------------------------
   Точки-индикаторы на десктопе не нужны: там карточки лежат сеткой
   и видны все сразу. */
.plaza-upsell-options__dots {
  display: none;
}

@media only screen and (max-width: 767px) {
  /* Горизонтальная полоса со снапом. Паттерн взят у единственной такой
     карусели темы — .simple-widget .reviews-list
     (template-parts/rating/review-widget/simple-widget-reviews.php:222):
     flex + overflow-x + scroll-snap-type на контейнере, min-width под
     peek + scroll-snap-align на карточке. В compare.css такого паттерна
     нет — там мобильный попап просто складывается в одну колонку. */
  .plaza-upsell-options__grid,
  .plaza-upsell-options--v-b .plaza-upsell-options__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Полосу прокрутки прячем: индикация — точками под полосой.
       2px сверху и 10px снизу — чтобы рамка карточки не срезалась
       собственным overflow полосы. */
    scrollbar-width: none;
    padding: 2px 0 10px;
  }

  .plaza-upsell-options__grid::-webkit-scrollbar {
    display: none;
  }

  /* 84% ширины полосы: оставшиеся 16% и есть peek следующей карточки —
     он и сообщает, что список продолжается вбок. Ширину задаём
     флекс-базисом, а не width: с width карточка всё равно ужалась бы
     до содержимого (flex-shrink), и peek поплыл бы от длины названия. */
  .plaza-upsell-options__card,
  .plaza-upsell-options--v-b .plaza-upsell-options__card {
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: start;
  }

  .plaza-upsell-options__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
  }

  .plaza-upsell-options__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d5d5d5;
    cursor: pointer;
    transition: background .15s ease;
  }

  .plaza-upsell-options__dot[aria-current="true"] {
    background: #1c1c1c;
  }
}