/* ═══ Onetap Product Cards — мінімальний layout ═══ */
/* Всі кольори, border-radius, тіні приходять через CSS-змінні з настроек "Каталог" */

.product-card-wrapper {
  padding: 0;
  background: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}

/* Big card variant layout */
.product-card-wrapper--big-card:has(.product-card-rating--big-card) {
  padding-left: 10px;
  padding-right: 10px;
  flex: 0 0 33.3%;
}
.product-card-wrapper--big-card:last-of-type { padding-right: 0; }
.product-card-wrapper--big-card:first-of-type { padding-left: 0; }
@media (max-width: 992px) {
  .product-card-wrapper--big-card { flex: 0 0 50%; }
}
@media (max-width: 576px) {
  .product-card-wrapper--big-card { flex: 0 0 100%; padding-left: 0; padding-right: 0; }
}

/* Inner rating/content wrapper — саме він є "візуальною карткою".
   Width/height pull from CSS vars set in header.twig from "Дизайн та стилі →
   Картка товару" (--otc-card-w / --otc-card-h).
     - When admin enters numeric px → header.twig outputs e.g. "330px"
     - When empty → header.twig outputs "auto" → card fills grid column (legacy 100% behavior)
   max-width:100% guards against vars exceeding the grid column on narrow viewports. */
.product-card-rating {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  width:  var(--otc-card-w, 100%);
  height: var(--otc-card-h, auto);
  max-width: 100%;
  padding: 0;
  background: var(--otc-card-bg, #F7F7F7);
  border-radius: var(--otc-card-radius, 0);
  box-shadow: var(--otc-card-shadow, none);
  border: var(--otc-card-border, none);
  overflow: hidden;
}

/* Image — pixel-exact w/h from "Розмір зображення" settings.
   Fallbacks: --otc-img-w/h are always defined in header.twig (default 300×300),
   so the card image renders at admin-chosen size with object-fit:cover crop. */
.product-card-rating a > img {
  width:  var(--otc-img-w, 100%);
  height: var(--otc-img-h, auto);
  max-width: 100%;
  /* ТЗ FR-03/BR-04: фото товара — полный размер, без обрезки (cover резал
     вертикальные/горизонтальные фото) и без растяжения. Переменная позволяет
     теме/конструктору вернуть cover точечно при необходимости. */
  object-fit: var(--otc-img-fit, contain);
  display: block;
}

/* Description block */
.product-card-rating__descr {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--otc-card-content-gap, 8px);
  /* Padding контент — admin slider `Padding контенту` через --otc-card-content-padding.
     Раніше було хардкоднуто 10px (Figma default). Тепер юзер у admin → Дизайн → Картка
     товару → Padding контенту керує усіма внутрішніми відступами картки (margin
     зображення + padding опису). 1:1 з Live Preview. */
  padding: var(--otc-card-content-padding, 14px);
  /* Absorb leftover height when the card has a fixed height, so the footer/button
     stays pinned to the bottom and no gap appears under the image. */
  flex: 1 1 auto;
}

/* Title */
.product-card-rating__descr a.product-card-rating__title,
.product-card-rating__descr a.product-card-rating__text,
.product-card-rating__name,
.product-card-rating__title {
  color: var(--otc-card-title, #252525) !important;
  font-size: 14px;            /* Figma: 14px Regular */
  line-height: 20px;
  text-decoration: none;
  font-weight: 400;
  /* ТЗ FR-06/BR-08: назва — максимум ДВА рядки, зайве обрізається на «…».
     НА ВСІХ розширеннях і у всіх модулях товару (каталог, featured, рекомендації).
     -webkit-line-clamp працює однаково на iPhone (WebKit) і Android (Blink/Gecko 68+),
     на відміну від max-height-обрізки, яка на iOS лишалась без трьох крапок.
     min-height резервує рівно 2 рядки, щоб картки в ряду не «стрибали» по висоті
     при коротких назвах. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 40px;      /* 2 × line-height 20px */
  overflow-wrap: break-word;
}

/* Meta row — SKU зліва + Stock справа в одному рядку (як у Live Preview) */
.product-card-rating__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Adaptive collapse — empty rows never take space */
.product-card-rating__meta-row:empty,
.product-card-rating__reviews-row:empty,
.product-card-rating__footer:empty,
.product-card-rating__btns:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Rating + reviews row — зірка + число, іконка коментаря + число */
.product-card-rating__reviews-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #555;
  line-height: 1;
  margin-top: 2px;
}
.product-card-rating__rating-value { font-weight: 600; color: #1a1a1a; }
.product-card-rating__star { color: #f5a623; font-size: 12px; margin-right: 6px; }
.product-card-rating__review-icon { color: #999; font-size: 12px; margin-left: 4px; }
.product-card-rating__review-count { color: #666; }
/* 5-star mode (card_rating='show') — empty stars in grey, no per-star margin
   (parent .product-card-rating__stars handles spacing via gap). */
.product-card-rating__stars .product-card-rating__star { margin-right: 0; }
.product-card-rating__star--empty { color: #d0d0d0; }

/* SKU */
.product-card-rating__sku,
.product-card-rating__code,
.product-card-rating__packing {
  color: var(--otc-card-sku, #717171) !important;
  font-size: 13px;
}

/* Stock status */
.product-card-rating__stock,
.product-card-rating .in-stock {
  color: var(--otc-card-stock, #0FA379) !important;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.product-card-rating__stock .fa-check-circle{font-size:14px;}

/* Price */
.product-card-rating__price {
  color: var(--otc-price-color, #222222) !important;
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}
.product-card-rating__old-price,
.product-card-rating__price-old {
  color: var(--otc-old-price-color, #999999) !important;
  text-decoration: line-through;
  font-size: 11px;
  margin-left: 8px;
}

/* Stock badge inline with price (when admin sets "Положення В наявності → Справа").
   Price row becomes a flex row: amount on the left, stock badge pushed to the right. */
.product-card-rating__price--with-stock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.product-card-rating__price--with-stock .product-card-rating__price-amount {
  flex: 0 1 auto;
  min-width: 0;
}
/* Stock badge inline (right of price). Per Figma: small text 12px, regular weight,
   green tint (--otc-card-stock). The !important is needed because the price-row's
   generic `> span:not(.price-old)` selector has higher specificity from the catalog
   CSS in header.twig. */
.product-card-rating__stock--inline {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  font-size: var(--otc-stock-size, 12px) !important;
  font-weight: 400 !important;
  color: var(--otc-card-stock, #0FA379) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.product-card-rating__stock--inline i {
  font-size: 1em;
  line-height: 1;
}
/* На мобільному (≤576px) status-бейдж переноситься на свій рядок ПІД ціною
   та виставляється до ЛІВОГО краю картки (а не до правого, як на desktop).
   `flex-basis:100%` примушує badge зайняти всю ширину — отже flex-wrap кладе
   його на наступний рядок; `margin-left:0` скасовує `auto` push-to-right. */
@media (max-width:576px){
  .product-card-rating__price--with-stock{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }
  .product-card-rating__stock--inline{
    flex:0 0 100%;
    width:100%;
    margin-left:0 !important;
    justify-content:flex-start;
  }
}

/* Stock info row: «Ready to ship from …» / «Limited stock» */
.product-card-rating__stock-info {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.product-card-rating__restock {
  color: var(--otc-card-restock, #961885) !important;
}
/* When restock badge is rendered inside price-row (right position), it ALSO gets
   .stock--inline class which forces green color. Combined-class selector below has
   higher specificity to win that fight. */
.product-card-rating__restock.product-card-rating__stock--inline {
  color: var(--otc-card-restock, #961885) !important;
}
.product-card-rating__limited {
  color: #d32f2f;
}
.product-card-rating__freeship {
  color: var(--otc-card-stock, #0FA379);
}

/* Cart button — перекриваємо всі можливі класи кнопок картки */
.product-card-rating .btn-cart,
.product-card-rating .button-cart,
.product-card-rating .btn-custom,
.product-card-rating .button_animation-add,
.product-card-rating .button__animation-add,
.product-card-wrapper .btn-cart,
.product-card-wrapper .button-cart,
.product-card-wrapper .btn-custom,
.product-card-wrapper .button_animation-add,
.product-card-wrapper .button__animation-add,
.product-card-wrapper .btn.btn-lg {
  background: var(--otc-cart-btn-bg, #EDEDED) !important;
  background-color: var(--otc-cart-btn-bg, #EDEDED) !important;
  color: var(--otc-cart-btn-text, #252525) !important;
  border: none !important;
  border-radius: var(--otc-cart-btn-radius, var(--otc-btn-radius, 10px)) !important;
  width: 100%;
  padding: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: background .2s, background-color .2s, opacity .2s;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Іконка кошика перед текстом — FontAwesome через pseudo-element */
.product-card-rating .btn-cart::before,
.product-card-rating .button-cart::before,
.product-card-rating .btn-custom::before,
.product-card-rating .button_animation-add::before,
.product-card-rating .button__animation-add::before,
.product-card-wrapper .btn-cart::before,
.product-card-wrapper .button-cart::before,
.product-card-wrapper .btn-custom::before,
.product-card-wrapper .button_animation-add::before,
.product-card-wrapper .button__animation-add::before,
.product-card-wrapper .btn.btn-lg::before {
  content: '\f07a'; /* fa-shopping-cart */
  font-family: FontAwesome;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
  line-height: 1;
}
/* Кастомная картинка-иконка или icon-режим (header.twig JS) — псевдо-корзину убираем,
   иначе на кнопке двойная иконка (корзина + кастомный «+»). */
.product-card-rating .btn-custom.otc-cart-icon-only::before,
.product-card-wrapper .btn-custom.otc-cart-icon-only::before,
.product-card-rating .btn-custom:has(.otc-cart-icon-img)::before,
.product-card-wrapper .btn-custom:has(.otc-cart-icon-img)::before {
  content: none !important;
}
.product-card-rating .btn-cart:hover,
.product-card-rating .button-cart:hover,
.product-card-rating .btn-custom:hover,
.product-card-rating .button_animation-add:hover,
.product-card-rating .button__animation-add:hover,
.product-card-wrapper .btn-cart:hover,
.product-card-wrapper .button-cart:hover,
.product-card-wrapper .btn-custom:hover,
.product-card-wrapper .button_animation-add:hover,
.product-card-wrapper .button__animation-add:hover,
.product-card-wrapper .btn.btn-lg:hover {
  background: var(--otc-cart-btn-hover-bg, var(--otc-cart-btn-bg, #EDEDED)) !important;
  background-color: var(--otc-cart-btn-hover-bg, var(--otc-cart-btn-bg, #EDEDED)) !important;
}

/* Текст у кнопці (anim wrapper) */
.product-card-wrapper .button__animation-hidden,
.product-card-wrapper .button_animation-hidden {
  display: none !important;
}

/* Image area wrapper — relative для абсолютного позиціонування іконок */
.product-card-rating__image-area {
  position: relative;
  display: block;
  width: auto;
  /* Margin — drive from admin `Padding контенту` (--otc-card-content-padding).
     Figma 652-71085 default = 14px. Adminка дозволяє 0—40px. Раніше тут було
     хардкоднуто `margin:10px 10px 0 10px` → юзер ставить «Padding контенту = 0»
     в admin, але зображення лишалось з 10px margin (не відповідало Live Preview).
     Тепер: top/left/right = admin padding, bottom = 0 (опускає image до даних
     блоку). Якщо юзер ставить 0 — зображення впритул до краю картки. */
  margin: var(--otc-card-content-padding, 14px) var(--otc-card-content-padding, 14px) 0 var(--otc-card-content-padding, 14px);
  border-radius: 8px;
  overflow: hidden;
  /* Hug the image — do NOT flex-grow. Otherwise, when the card has a fixed
     height (--otc-card-h) and the image scales down by width at narrow
     viewports (height:auto/contain), this box would grow and leave empty
     space under the image. The leftover height is absorbed by __descr instead. */
  flex: 0 0 auto;
  min-height: 0;
  /* Фон наследуем от карточки, чтобы цепочка ниже (ссылка с картинкой и hover-слой
     .pc-gallery, у обоих background:inherit) получила непрозрачный цвет карточки,
     а не прозрачность. Иначе inherit упирается в этот прозрачный блок. */
  background: inherit;
}
.product-card-rating__image-area > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* height:auto, а не 100%: ссылка обнимает фото, иначе она растянулась бы на
     всю область и вернула бы пустые поля, которые мы и убираем. */
  height: auto;
  min-height: 0;
}
/* Фон области картинки берём у самой карточки (inherit), а не отдельным цветом:
   серый #F0F0F0 из настройки «Фон картинки» давал полосы вокруг фото с другими
   пропорциями (object-fit:contain). Полностью прозрачным слой оставлять нельзя —
   .pc-gallery наследует этот фон и при кросс-фейде слайдов через поля проступало бы
   базовое фото. Свой цвет, выбранный в админке, перебивает это правило: он выводится
   селектором .pc-<scope> .product-card-rating__product-img (специфичность выше). */
.product-card-rating__product-img { display: block; position: relative; background: inherit; }

/* Wishlist / compare buttons — справа знизу ВСЕРЕДИНІ зображення */
.product-card-rating__icons-btns {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-card-rating__icons-btns .icon-btn,
.product-card-rating__icons-btns button {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}
.product-card-rating__icons-btns .icon-btn:hover { box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.product-card-rating__icons-btns .icon-btn { color: #292D32; }
.product-card-rating__icons-btns .icon-btn svg { width: 18px; height: 18px; color: inherit; }
.product-card-rating__icons-btns .icon-btn svg path { stroke: currentColor; }
/* Compare (stats) active state — use Buy button color (btn_primary_color, same as .btn-custom) */
.product-card-rating__icons-btns .stats-btn.active-like {
  color: var(--otc-btn-primary, #222) !important;
}
.product-card-rating__icons-btns .stats-btn.active-like svg path { stroke: currentColor !important; fill: currentColor !important; }

/* Wishlist heart (custom asset): no button circle — bare heart, white outline idle → solid red active */
.product-card-rating .product-card-rating__icons-btns .icon-btn.like-btn,
.product-card-rating .product-card-rating__icons-btns .icon-btn.like-btn:hover,
.product-card-rating .product-card-rating__icons-btns .icon-btn.like-btn.active-like {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.product-card-rating__icons-btns .like-btn .ot-heart { width: 30px; height: 28px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.product-card-rating__icons-btns .like-btn .ot-heart path { stroke: none !important; }
.product-card-rating__icons-btns .like-btn .ot-heart-ring  { fill: #FFFFFF; }
.product-card-rating__icons-btns .like-btn .ot-heart-solid { display: none; fill: #E53935 !important; }
.product-card-rating__icons-btns .like-btn.active-like .ot-heart-ring  { display: none; }
.product-card-rating__icons-btns .like-btn.active-like .ot-heart-solid { display: block; }

/* Legacy support */
.product-card-wrapper .button-group {
  position: absolute;
  right: 12px;
  top: calc(var(--otc-card-img-h, 180px) - 20px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-card-wrapper .btn-wishlist,
.product-card-wrapper .btn-compare {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 50%;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Sticker / label top-left */
.product-card-wrapper .sticker-wrapper,
.product-card-wrapper .label-wrapper {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

/* ── Product labels (sale / bestseller / novelty / last / freeshipping / custom) ──
   Layout only. Кольори беруться з адмінки onetap_stickers (інлайн style у шаблоні).
   Lays out horizontally with wrap so 2 stickers fit per row (Figma reference);
   right:56px keeps the strip clear of the wishlist heart at top-right. */
.product-card-wrapper .product-labels,
.product-card-rating .product-labels {
  position: absolute !important;
  top: 12px;
  left: 12px;
  right: 56px;
  z-index: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  margin: 0;
}

.product-card-wrapper .product-labels--item,
.product-card-rating .product-labels--item {
  display: inline-block;
  padding: 5px 8px;
  border-radius: var(--otc-sticker-radius, 8px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  white-space: nowrap;
  /* background/color/radius задаються з onetap_stickers settings */
}
/* Square shape from onetap_stickers — hard override via class + inline !important */
.product-labels--item.product-labels--square {
  border-radius: 0 !important;
}
/* ТЗ BR-11: на мобильной версии шрифт стикеров уменьшен — компактнее на узкой
   карточке, меньше шансов пересечься с кнопками/пилюлей галереи. */
@media (max-width: 500px) {
  .product-card-wrapper .product-labels--item,
  .product-card-rating .product-labels--item {
    font-size: 10px;
    padding: 3px 6px;
  }
}
/* ТЗ BR-11: если стикер РЕАЛЬНО перекрывает кнопку избранного/сравнения
   (рантайм-проверка в common.js вешает .pc-labels-bottom на карточку) —
   стикеры этой карточки уезжают вниз картинки. По умолчанию — вверху слева. */
.product-card-rating.pc-labels-bottom .product-labels {
  top: auto;
  bottom: 12px;
}
/* .product-labels--percent removed — sale/percent тепер керуються з модуля onetap_stickers */

/* ── Rating row: stars + reviews counter ── */
.product-card-rating__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.product-card-rating__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.product-card-rating__reviews-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  line-height: 1;
  transition: opacity .15s;
}
.product-card-rating__reviews-count:hover {
  text-decoration: none;
  opacity: .75;
}
.product-card-rating__reviews-count svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}
.product-card-rating__reviews-count span {
  font-weight: 500;
  line-height: 1;
}
/* Иконка стикера (onetap_stickers → «Иконка» в админке): картинка перед текстом. */
.product-labels .product-labels--item.product-labels--with-icon{display:inline-flex;align-items:center;gap:4px;}
.product-labels__ico{flex:0 0 auto;width:12px;height:12px;object-fit:contain;}
@media (max-width:500px){.product-labels__ico{width:10px;height:10px;}.product-labels .product-labels--item.product-labels--with-icon{gap:3px;}}

/* Сердечко 30×30 — зона нажатия 44×44 на сенсорных экранах без изменения вида (B069). */
@media (hover: none), (max-width: 991px) {
  .product-card-rating .product-card-rating__icons-btns .icon-btn.like-btn { position: relative; }
  .product-card-rating .product-card-rating__icons-btns .icon-btn.like-btn::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}