/* product-card-gallery.css — hover carousel for product cards
 *
 * Activated when card_hover === 'second-image' setting is on AND first hover occurred.
 * Positioned absolutely over the primary product image. Hidden by default.
 */

.product-card-rating__product-img {
  position: relative;
  overflow: hidden;
}

/* Hide primary image completely when gallery is active. The pc-gallery-active
   class is added to the .product-card-rating__product-img wrapper itself by
   product-card-gallery.js (the <a data-pc-gallery> IS the wrapper), so the
   selector targets it directly rather than chasing through .product-card-
   wrapper which never carries the class. */
.product-card-rating__product-img.pc-gallery-active > img:not(.pc-gallery__img):not(.pc-gallery__video),
.product-card-wrapper.pc-gallery-active .product-card-rating__product-img > img:not(.pc-gallery__img):not(.pc-gallery__video) {
  visibility: hidden;
}

.pc-gallery {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  /* Фон — РОВНО тот, что у родителя .product-card-rating__product-img: непрозрачный слой
     нужен, чтобы при кросс-фейде слайдов не проступало базовое фото, но цвет нельзя
     выводить отдельно.
     Было var(--otc-card-img-bg, #F0F0F0) — второй источник правды: переменную ставит
     только admin-настройка «Фон картинки», а точечные исключения (в main.css/category.css
     сертификатам форсится белый через :has(img[src*=...])) правят лишь background. Из-за
     этого статичная карточка сертификата белая, а при наведении вылезал серый #F0F0F0.
     inherit берёт фактически победивший фон родителя, поэтому любое такое исключение
     автоматически действует и на hover-слой. */
  background: inherit;
  border-radius: inherit;
  overflow: hidden;
}
.pc-gallery.is-active { display: block; }

/* Keep stickers (product-labels) and wishlist/compare icons ABOVE the gallery
   overlay on hover — otherwise the white-bg .pc-gallery (z:5) covers them and
   the card loses its visual context (no -%, no heart) while cycling images. */
.product-card-rating .product-labels { z-index: 6 !important; }
.product-card-rating__icons-btns { z-index: 6 !important; }

/* ── Slides ── */
.pc-gallery__slides {
  position: relative;
  width: 100%;
  height: 100%;
  /* Промежуточный слой тоже несёт фон вниз: слайды наследуют цвет ОТ НЕГО, а не от
     .pc-gallery, поэтому без этого их inherit давал прозрачный. */
  background: inherit;
}
.pc-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Слайд тоже непрозрачный и тем же цветом (наследуется от .pc-gallery, а та — от
     обёртки картинки), чтобы кросс-фейд не показывал базовое фото. */
  background: inherit;
}
.pc-gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.pc-gallery__img,
.pc-gallery__video {
  display: block;
  width: 100%;
  height: 100%;
  /* ТЗ BR-04: слайды галереи — как базовое фото карточки, без обрезки. */
  object-fit: var(--otc-img-fit, contain);
  border-radius: inherit;
}

.pc-gallery__video {
  background: #000;
  object-fit: contain;
}

/* ── Arrows ── */
/* ТЗ BR-05: на первом/последнем слайде стрелка неактивна — серая.
   pointer-events НЕ отключаем: клик должен гаситься кнопкой (no-op),
   а не проваливаться сквозь неё в <a> карточки (= переход на товар). */
.pc-gallery__arrow.is-disabled,
.pc-gallery__navbtn.is-disabled {
  opacity: .35;
  filter: grayscale(1);
  cursor: default;
}
/* Arrows reuse the same CSS vars as the global slider buttons —
   admin: "Onetap Тема → Дизайн та стилі → Стрілки слайдера".
   Vars (--otc-slider-arrow-*) are set in header.twig from onetap_catalog_css. */
.pc-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width:  var(--otc-slider-arrow-size, 32px);
  height: var(--otc-slider-arrow-size, 32px);
  border-radius: var(--otc-slider-arrow-radius, 50%);
  border: 1px solid var(--otc-slider-arrow-border, #dddddd);
  background: var(--otc-slider-arrow-bg, #ffffff);
  color: var(--otc-slider-arrow-color, #333333);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  padding: 0;
}
.pc-gallery__arrow:hover { background: var(--otc-slider-arrow-hover-bg, #f5f5f5); }
.pc-gallery__arrow--prev { left: 8px; }
.pc-gallery__arrow--next { right: 8px; }

.pc-gallery.is-active .pc-gallery__arrow { opacity: 1; }

/* ── Bottom controls row (live carousel): [‹] [dots pill] [›] ──
   Small prev/next nav buttons are SEPARATE clickable pills, flanking the
   dots pagination pill (Figma 1128:123339 idle-pill look, but functional). */
.pc-gallery__controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity .2s ease;
}
.pc-gallery.is-active .pc-gallery__controls { opacity: 1; }

/* Functional nav button — own dark translucent pill, separated from dots. */
.pc-gallery__navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: rgba(60, 60, 60, .55);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background .2s ease;
}
.pc-gallery__navbtn:hover { background: rgba(40, 40, 40, .8); }
.pc-gallery__chev {
  width: 4px;
  height: 4px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
}
.pc-gallery__chev--prev { transform: rotate(135deg); margin-left: 2px; }
.pc-gallery__chev--next { transform: rotate(-45deg); margin-right: 2px; }

/* ── Dots (live carousel, Figma 1128:123339 — matches idle pill style) ── */
.pc-gallery__dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(60, 60, 60, .55);
  border-radius: 999px;
}

/* Inactive dot = white circle. */
.pc-gallery__dot {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: width .2s ease, height .2s ease, border-radius .2s ease, opacity .2s ease;
}
/* Active dot = wider white pill (matches idle indicator's active bar). */
.pc-gallery__dot.is-active {
  width: 14px;
  height: 5px;
  border-radius: 999px;
  background: #fff;
}
/* Video-slide dot — pure-CSS right-pointing white triangle (▶ play glyph).
   Marks the position of a video in the carousel; takes precedence over the
   "active" pill styling only when the dot is NOT the current slide (active
   on a video shows the pill — when user is actually watching the video,
   the visual cue of "this is the current slide" is more important). */
.pc-gallery__dot.is-video:not(.is-active) {
  width: 0;
  height: 0;
  background: transparent;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  border-radius: 0;
  margin: 0 1px;
}
/* Depth gradient on the trailing plain circles (excludes pill + triangle). */
.pc-gallery__dot:not(.is-active):not(.is-video):nth-last-child(2) { width: 4px; height: 4px; opacity: .85; }
.pc-gallery__dot:not(.is-active):not(.is-video):nth-last-child(1) { width: 3px; height: 3px; opacity: .7; }

/* ── Mobile (touch): smaller arrows, always visible when active ── */
@media (max-width: 500px) {
  .pc-gallery__arrow { width: 28px; height: 28px; }
  .pc-gallery__arrow--prev { left: 4px; }
  .pc-gallery__arrow--next { right: 4px; }
  .pc-gallery__dots { bottom: 6px; }
}

/* ── Tablet ── */
@media (min-width: 501px) and (max-width: 991px) {
  .pc-gallery__arrow { width: 30px; height: 30px; }
}

/* ── Idle indicator (Figma pill) ───────────────────────────────────────
 * Always visible on cards where product.gallery_count > 1.
 * Hidden when the live hover carousel is active (pc-gallery-active class
 * on the parent <a data-pc-gallery>), so the real .pc-gallery__dots show.
 *
 * Figma 1128:123339 — semi-transparent dark pill, white active bar +
 * optional play glyph + dots with decreasing size for the depth effect.
 */
.pc-gallery-idle {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 3;
  transition: opacity .2s ease;
}
/* Hide idle indicator once the real carousel takes over */
.product-card-rating__product-img.pc-gallery-active .pc-gallery-idle,
.pc-gallery-active .pc-gallery-idle { opacity: 0; pointer-events: none; }

/* Мобіль/планшет (без hover): idle-пілюля — ЄДИНИЙ контрол галереї (hover-активація
   недоступна). Робимо стрілки клікабельними — батьківський .pc-gallery-idle лишається
   pointer-events:none (пілюля/крапки не перехоплюють тап по фото → перехід на товар),
   а дочірня кнопка перевизначає на auto. Перший тап активує галерею й гортає далі
   вже живими .pc-gallery__navbtn (див. product-card-gallery.js, idle-navbtn handler). */
@media (hover: none), (pointer: coarse) {
  .pc-gallery-idle__navbtn { pointer-events: auto; cursor: pointer; }
}
@media (max-width: 991px) {
  .pc-gallery-idle__navbtn { pointer-events: auto; cursor: pointer; }
}
/* Коли галерея активна — idle прихована (opacity:0, під overlay z5); гасимо і pointer,
   щоб дочірній auto не перехоплював тап замість живих контролів. */
.pc-gallery-active .pc-gallery-idle__navbtn { pointer-events: none; }

/* Dots pill — gray pill holding the active bar + dots (pagination only). */
.pc-gallery-idle__pillwrap {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(60, 60, 60, .55);
  border-radius: 999px;
}
/* Idle nav pill — separated chevron, mirrors the live functional .pc-gallery__navbtn. */
.pc-gallery-idle__navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(60, 60, 60, .55);
  flex: 0 0 auto;
}
.pc-gallery-idle__chev {
  width: 4px;
  height: 4px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  opacity: .9;
}
.pc-gallery-idle__chev--prev { transform: rotate(135deg); margin-left: 2px; }
.pc-gallery-idle__chev--next { transform: rotate(-45deg); margin-right: 2px; }

.pc-gallery-idle__pill {
  width: 14px;
  height: 5px;
  border-radius: 999px;
  background: #fff;
}
/* Idle triangle — same CSS-only right-pointing white arrow as the live .is-next */
.pc-gallery-idle__play {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
  flex: 0 0 auto;
  margin: 0 1px;
}
.pc-gallery-idle__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
}
/* Depth / perspective — last 2 dots progressively smaller.
   (Dots now live inside .pc-gallery-idle__pillwrap with no trailing chevron,
   so the dot itself is the real last child — no offset needed.) */
.pc-gallery-idle__dot:nth-last-child(2) { width: 4px; height: 4px; opacity: .85; }
.pc-gallery-idle__dot:nth-last-child(1) { width: 3px; height: 3px; opacity: .7; }

/* Mobile: smaller pill for tighter cards */
@media (max-width: 500px) {
  .pc-gallery-idle { bottom: 6px; gap: 4px; }
  .pc-gallery-idle__pillwrap { gap: 4px; padding: 4px 7px; }
  .pc-gallery-idle__pill { width: 11px; height: 4px; }
  .pc-gallery-idle__dot { width: 4px; height: 4px; }
  .pc-gallery-idle__navbtn { width: 16px; height: 16px; }
  /* Keep functional live nav buttons tappable on small screens. */
  .pc-gallery__controls { bottom: 6px; gap: 4px; }
  .pc-gallery__navbtn { width: 16px; height: 16px; }
}