/* === OneTap global overrides: kill hardcoded button/view-toggle colors that conflict with admin palette === */
#list-view.active,
#grid-view.active{
  background:var(--otc-btn-primary) !important;
  border-color:var(--otc-btn-primary) !important;
  color:var(--otc-btn-primary-text) !important;
}
#list-view.active svg rect,
#grid-view.active svg rect{ fill:var(--otc-btn-primary-text) !important; }
.empty-cart-btn,
.btn-custom,
.button__animation-add{
  background-color:var(--otc-btn-primary) !important;
  color:var(--otc-btn-primary-text) !important;
  border-color:var(--otc-btn-primary) !important;
  border-radius:var(--otc-btn-radius) !important;
}
.empty-cart-btn:hover,
.btn-custom:hover,
.button__animation-add:hover{
  background-color:var(--otc-btn-primary-hover) !important;
  color:var(--otc-btn-primary-text) !important;
  border-color:var(--otc-btn-primary-hover) !important;
}
/* Flex column layout — 3 блоки: image, descr, footer з відступом між ними */
.product-card-wrapper .product-card-rating{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--otc-card-block-gap) !important;
}
.product-card-rating__descr{
  display:flex !important;
  flex-direction:column !important;
  gap:var(--otc-card-content-gap) !important;
  padding:0 var(--otc-card-content-padding) !important;
  flex:1 1 auto !important;
}
.product-card-rating__footer{
  padding:0 var(--otc-card-content-padding) var(--otc-card-content-padding) !important;
}

/* Розмір шрифтів текстових елементів картки */
.product-card-rating__text,
.product-card-rating__title,
.product-card-rating__descr > a{
  font-size:var(--otc-title-size) !important;
  color:var(--otc-card-title) !important;
}
.product-card-rating__sku,
.product-card-rating__code,
.product-card-rating__packing{
  font-size:var(--otc-sku-size) !important;
  color:var(--otc-card-sku) !important;
}
/* SKU/Код товару — приховано через "Дизайн та стилі → Картка товару → Код товару" */
.product-card-rating__sku,
.product-card-rating__code{display:none !important;}
.product-card-rating__stock,
.product-card-rating .in-stock{
  font-size:var(--otc-stock-size) !important;
  color:var(--otc-card-stock) !important;
}
.product-card-rating__restock{
  font-size:var(--otc-stock-size) !important;
  color:var(--otc-card-restock) !important;
  text-decoration:none !important;
}
.product-card-rating__btns .btn,
.product-card-rating .btn-custom,
.product-card-wrapper .btn-custom{
  font-size:var(--otc-btn-size) !important;
}
/* Рамка картки товару */
.product-card-rating,.product-thumb{border:var(--otc-card-border) !important;}
/* Розмір картки товару — резинові: max з налаштувань, min-height на desktop.
   .product-card-wrapper розтягується по висоті grid-клітинки (default align-items:stretch
   у grid). .product-card-rating всередині wrapper'а має заповнити wrapper по висоті щоб
   усі картки в ряду були однакової висоти незалежно від наявності рейтингу/SKU/тощо. */
.product-card-wrapper{
  height:100% !important;
}
/* Картка товару: на ВСІХ viewport'ах поважаємо --otc-card-w/h з "Дизайн → Картка товара".
   width:100% — резинова в межах grid-колонки (на вузькому viewport картка стискається,
   щоб не перевищити батька, наприклад 320px екран не лопне 330px карткою). max-width
   обмежує верхню межу, щоб у широкій колонці картка не розтягувалась за налаштування. */
.product-card-wrapper .product-card-rating,.product-thumb{
  width:100% !important;
  max-width:var(--otc-card-w) !important;
  /* Высота — строго по контенту (картинка + название + цена).
     Было height:100%: карточка тянулась до самой высокой в ряду, а лишнюю высоту
     забирал блок описания — из-за чего между названием и ценой появлялась пустая
     полоса (а до этого, при фиксированном боксе картинки, пустота была над фото).
     Пустого места быть не должно ни в каком виде, поэтому карточка обнимает контент:
     в ряду карточки могут отличаться по высоте, если у товаров разные пропорции фото. */
  min-height:0 !important;
  height:auto !important;
  margin-left:auto;
  margin-right:auto;
}
/* Планшет і менше: картка тулиться до ЛІВОГО краю колонки (а не центрується),
   щоб товари починались від лівого боку контейнера. */
@media (max-width:991px){
  .product-card-wrapper .product-card-rating,.product-thumb{
    margin-left:0 !important;
    margin-right:auto !important;
  }
}
/* Назва товару — максимум 2 рядки з трикрапкою */
.product-card-rating__text,
.product-card-rating__title,
.product-card-rating__descr > a,
.product-card-wrapper .name a,
.product-thumb .caption a,
.product-card-wrapper .product-name,
.product-thumb .product-name{
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  word-break:break-word;
}
/* Ціни — flex row: основна + стара поруч */
.product-card-rating__price{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
/* Базова ціна — НЕ застосовуємо на акційну (.price-new--actual-special).
   Без `:not(.price-new--actual-special)` цей правило (специфічність до 0,4,1) перебивало
   per-card `color: card_actual_special_color !important` (0,3,0) — і дисконт-ціна на картці
   залишалась basic-color #222 замість обраного в адмінці зеленого. */
.product-card-rating__price .price-new:not(.price-new--actual-special),
.product-card-rating__price > span:not(.price-old):not(.price-label-percent):not(.product-card-rating__price-amount):not(.product-card-rating__stock--inline):not(.price-new--actual-special),
.product-card-rating__price .product-card-rating__price-amount > span:not(.price-old):not(.price-label-percent):not(.price-new--actual-special),
.product-card-wrapper .price-new:not(.price-new--actual-special),
.product-card-wrapper .price,
.product-thumb .price,
.product-thumb .price-new:not(.price-new--actual-special){
  color:var(--otc-price-color) !important;
  font-size:var(--otc-price-size) !important;
  font-weight:700 !important;
  margin-right:0 !important;
}
/* Шрифт/вага актуальної акційної ціни — теж 700 + price-size, але БЕЗ color override:
   колір приходить з per-card `.pc-XXX .price-new.price-new--actual-special{color:…!important}`
   або з admin-варіативного `--otc-actual-special-color`. */
.product-card-rating__price .price-new.price-new--actual-special,
.product-card-wrapper .price-new.price-new--actual-special,
.product-thumb .price-new.price-new--actual-special{
  font-size:var(--otc-price-size) !important;
  font-weight:700 !important;
  margin-right:0 !important;
}
.product-card-rating__price .price-old,
.product-card-rating__price .text-h4,
.product-card-wrapper .price-old,
.product-thumb .price-old{
  font-size:var(--otc-old-price-size) !important;
  font-weight:400 !important;
}
/* Карусель виробників — слайдер з відступами */
.onetap-home-section .swiper-viewport{box-shadow:none !important;border:none !important;border-radius:0 !important;background:transparent !important;}
.onetap-home-section .swiper-viewport .swiper-pager,
.onetap-home-section .swiper-viewport .swiper-pagination{display:none !important;}

/* === Сітка каталогу — налаштування з вкладки Конструктор → Категорії ===
   Застосовується ТІЛЬКИ до сторінки категорії товарів (.category__block).
   Home-модулі використовують per-section налаштування з Home-конструктора.
*/

/* Сітка категорії — фіксована кількість колонок з адмінки (_cD/_cL/_cT/_cM).
   minmax(0, 1fr) дозволяє клітинці звужуватись коли card_w ширша за доступну
   ширину. Gap = grid_gap з адмінки точно.
   Брейкпоінти узгоджені з рештою теми: desktop ≥1367, laptop 992-1366,
   tablet 501-991, mobile ≤500. */
.category__block:not(.list){
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:40px 40px !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}
/* Картка заповнює клітинку повністю — без max-width і auto-margin, щоб реальний
   візуальний відступ між картками дорівнював grid_gap. Скоупно тільки для категорії —
   wishlist/search/manufacturer/related-products зберігають свою центрівку. */
.category__block:not(.list) .product-card-wrapper{
  max-width:none !important;
  margin:0 !important;
  width:100% !important;
}
.category__block:not(.list) .product-card-wrapper .product-card-rating,
.category__block:not(.list) .product-thumb{
  max-width:none !important;
  margin:0 !important;
  width:100% !important;
}

/* Laptop (992–1366): _cL колонок (за замовч. = _cD) */
@media (min-width:992px) and (max-width:1366px){
  .category__block:not(.list){
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:40px 40px !important;
  }
}

/* Tablet (501–991): _cT колонок */
@media (min-width:501px) and (max-width:991px){
  .category__block:not(.list){
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:40px 40px !important;
  }
}

/* Mobile (≤500): _cM колонок */
@media (max-width:500px){
  .category__block:not(.list){
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:40px 40px !important;
  }
}
.onetap-home-section .swiper-viewport .swiper-slide{
  width:auto !important;display:flex !important;align-items:center !important;justify-content:center !important;
}
.onetap-home-section .swiper-viewport .swiper-slide img{
  max-height:50px !important;width:auto !important;height:auto !important;
  filter:grayscale(100%);opacity:.6;transition:all .3s;
}
.onetap-home-section .swiper-viewport .swiper-slide img:hover{
  filter:grayscale(0);opacity:1;
}

/* Стрілки слайдера — показати/сховати */
/* Toggles: стрілки + пагінація hover-галереї у listing-картках товару.
   Admin → Картка товару → Загальний вигляд → "Показувати стрілки/пагінацію".
   Master toggle (=0) → ховаємо завжди. Master ON + chip-список розрішень →
   ховаємо ТІЛЬКИ на розрішеннях, де чіпа неактивна.
   Брейкпоінти OneTap: 1367+ / 992-1366 / 501-991 / ≤500.
   Селектори: arrows = .pc-gallery__arrow (+ legacy .prod-gallery-arrow /
   #prod-main-swiper кнопки на сторінці товару), dots = .pc-gallery__dots. */

.pc-gallery__arrow,
.prod-gallery-arrow,
#prod-main-swiper .swiper-button-prev,
#prod-main-swiper .swiper-button-next{display:none !important;}


/* Стрілки слайдера — глобальний стиль */
.otc-slider-btn{
  width:var(--otc-slider-arrow-size) !important;
  height:var(--otc-slider-arrow-size) !important;
  border-radius:var(--otc-slider-arrow-radius) !important;
  background:var(--otc-slider-arrow-bg) !important;
  color:var(--otc-slider-arrow-color) !important;
  border:1px solid var(--otc-slider-arrow-border) !important;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;padding:0;font-size:14px;
}
.otc-slider-btn:hover{background:var(--otc-slider-arrow-hover-bg) !important;}
/* Override swiper default arrows when using .otc-slider-btn */
.swiper-button-prev.otc-slider-btn,
.swiper-button-next.otc-slider-btn{
  background-image:none !important;background-size:0 !important;
  position:absolute;top:50%;transform:translateY(-50%);z-index:10;
}
.swiper-button-prev.otc-slider-btn::after,
.swiper-button-next.otc-slider-btn::after{display:none !important;}

.product-card-rating__rating,.product-card-wrapper .rating,.product-thumb .rating,.product-card-rating__reviews-row,.ins-card__rate,.prod-rating-chip__score,.prod-rating-chip__star{display:none !important;}
.product-card-rating__reviews-count,.ins-card__rev,.prod-rating-chip__msg,.prod-rating-chip__count{display:none !important;}
.product-card-rating__reviews-count,.ins-card__rev,.prod-rating-chip__count{color:#999999;font-size:12px;}
.product-card-rating__reviews-count:hover,.ins-card__rev:hover,.prod-rating-chip__count:hover{color:#999999;}
/* Плашка рейтингу на сторінці товару: роздільник ховаємо коли одна сторона схована,
   всю плашку — коли ховаються обидві (щоб не лишалась порожня «пігулка»). */
.prod-rating-chip__sep{display:none !important;}
.prod-rating-chip{display:none !important;}
.prod-rating-row.otc-rev-empty .prod-rating-chip{display:none !important;}
/* Кольори картки → сайдбар-картки: назва + ціна беруть ті самі --otc-* змінні. */
.ins-card__name{color:var(--otc-card-title) !important;}
.ins-card__price{color:var(--otc-price-color) !important;}

/* === Adaptive card: hide containers that would otherwise leave empty space === */
.product-card-wrapper .btn-cart,.product-card-wrapper .btn-custom,.product-card-wrapper .button__animation-wrapper,.product-card-rating .button__animation-wrapper,.product-card-rating .btn-custom,.product-card-rating__footer,.product-card-rating__btns{display:none !important;}
.product-card-rating__descr{padding-bottom:var(--otc-card-content-padding) !important;}


.product-card-rating__icons-btns{
top:8px !important;right:12px !important;left:auto !important;bottom:auto !important;
}
/* SITE-WIDE: hide every compare button when admin toggle "Показувати Compare"
   (Дизайн та стилі → Картка товару) is off — listing-картки І галерея сторінки
   товару (.prod-gallery-compare) керуються цим ОДНИМ тумблером.
   Catches every variation via an onclick-attribute selector — no need to touch each
   template individually. .stats-btn fallback covers buttons wired without onclick. */
button[onclick*="compare.toggle"],
.stats-btn,
.compare-btn,
.prod-icon-btn[class*=" compare"],
.prod-icon-btn[class^="compare"]{display:none !important;}


/* Apply admin special-price tint to EVERY place that renders a sale price —
   product cards, account areas (order history/info, profile, wishlist cards),
   cart popup recommended/related, and any explicit `--sale` BEM modifier. */
.product-card-rating__price .price-new:not(:only-child),
.product-card-rating__price-amount .price-new:not(:only-child),
.product-card-wrapper .price-new:not(:only-child),
.product-thumb .price-new:not(:only-child),
.acc-od-product__price-current--sale,
.acc-od-info__price-current--sale,
[class*="price"][class*="--sale"],
.is-sale .price-new,
.has-discount .price-new{
  color: var(--otc-actual-special-color, #E53935) !important;
}

/* Collapse empty footer (когда кнопка купить скрыта через JS/inline) */
.product-card-rating__footer:empty{display:none !important;padding:0 !important;margin:0 !important;}
/* Title без min-height для компактности если название короткое */
.product-card-rating__descr a.product-card-rating__title,
.product-card-rating__descr a.product-card-rating__text{min-height:auto !important;}

/* Hover-эффект картинки — перенесён из onetap_home для глобального применения */
/* Картинка товару — адаптивна та пропорційна. Значення з налаштувань Каталогу
   (--otc-img-w / --otc-img-h) — це MAX-ширина та MAX-висота. width/height:auto
   зберігають пропорції (без розтягування), min(var,100%) робить картинку резиновою
   в межах колонки. Без фіксованого боксу → немає порожнечі під картинкою. */
/* Card image — fixed-dimensional box driven by admin "Розмір зображення" settings.
   Locking the wrapper to --otc-img-w × --otc-img-h means EVERY image inside (main image
   + hover-gallery slides + zoom layer) fills exactly the same area with object-fit:cover
   — no aspect-ratio jumps when the hover swap happens, and the card width stays consistent
   between cards even when individual photos have different intrinsic ratios. */
/* Высота бокса — по фото, а не фиксированная. --otc-img-h остаётся ПОТОЛКОМ.
   Раньше здесь было height:var(--otc-img-h): бокс 400px, фото вписывалось через
   contain, и у кадров с другими пропорциями сверху/снизу оставались пустые полосы
   (330x264 в боксе 330x400 = 136px пустоты). Обрезать вместо этого нельзя —
   кадр должен быть целым, поэтому бокс подстраивается под фото. Ровный низ
   карточек в ряду обеспечивает flex align-items:stretch: остаток высоты забирает
   блок с названием и ценой (.product-card-rating__descr{flex:1 1 auto}). */
.product-card-rating__product-img,
.product-card-wrapper .product-image,
.product-thumb .image{
  width:100%;
  max-width:var(--otc-img-w) !important;
  height:auto !important;
  /* Потолка по высоте здесь быть не должно: у бокса overflow:hidden, и max-height
     просто ОБРЕЗАЛ бы кадр — ровно то, чего мы избегаем. Верхнюю границу задаёт
     сам файл превью: он генерируется в режиме bound, то есть уже вписан
     в «Размер изображения» из настроек. */
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  position:relative;
}
/* Базовое фото задаёт высоту бокса: height:auto = родные пропорции, никаких полей.
   Слайды галереи (.pc-gallery__img) — отдельным правилом ниже: они лежат в
   абсолютном слое поверх и должны занимать ровно площадь бокса. */
.product-card-rating a > img,
.product-card-rating__product-img img,
.product-card-wrapper .product-image img,
.product-thumb .image img{
  /* Фото занимает всю ширину плитки, высота — за пропорциями. Потолок по высоте
     снят: с ним портретные кадры не дотягивались до краёв и по бокам оставались
     пустые полосы до 59px. */
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  object-fit:var(--otc-img-fit,contain) !important;
  display:block;
  margin:0;
}
.product-card-rating__product-img .pc-gallery__img,
.product-card-rating__product-img .pc-gallery__video{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:var(--otc-img-fit,contain) !important;
  display:block;
  margin:0;
}
/* Mobile: card takes full viewport width (no max-width:--otc-img-w cap), so the
   wrapper drops its max-width constraint. Inner images keep object-fit:cover from
   the global rule above — no extra overrides needed beyond unsetting max-width. */
@media (max-width:500px){
  .product-card-rating__product-img,
  .product-card-wrapper .product-image,
  .product-thumb .image{
    max-width:100% !important;
  }
  .product-card-rating a > img,
  .product-card-rating__product-img img,
  .product-card-wrapper .product-image img,
  .product-thumb .image img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:var(--otc-img-fit,contain) !important;
    margin:0 !important;
  }
  .product-card-rating__product-img .pc-gallery__img,
  .product-card-rating__product-img .pc-gallery__video{
    width:100% !important;
    height:100% !important;
    object-fit:var(--otc-img-fit,contain) !important;
    margin:0 !important;
  }
  /* Прайси в карточках: фіксовані mobile-розміри — 16px поточна, 14px стара.
     Override через CSS-змінні (а не selector!important) — бо ці змінні читають
     основні правила вище: .product-card-* .price-new { font-size: var(--otc-price-size) !important }
     зі специфічністю :not(...) яка побеждала наш per-class override.
     Распространяется на всі рендер-точки: модулі (featured/latest/bestseller/special),
     category, search, manufacturer, wishlist, cart popup, product-thumb (legacy). */
  :root{
    --otc-price-size:16px;
    --otc-old-price-size:14px;
  }
  /* Defensive override для per-scope правил з product_cards.twig
     (.pc-XXXX .price-new { font-size: 20px } без !important — теоретично mobile var
      побеждає, але якщо колись scope-правило отримає !important, страхує). */
  .product-card-wrapper .price-new{font-size:16px !important;}
  .product-card-wrapper .price-old{font-size:14px !important;}
}
/* Відступ між картками — керується з налаштувань "Каталог" → "Відступ між картками (px)" */
.home__popular__wrapper-cards{display:flex !important;flex-wrap:wrap !important;gap:var(--otc-grid-gap-y,var(--otc-grid-gap)) var(--otc-grid-gap-x,var(--otc-grid-gap)) !important;margin:0 !important;justify-content:space-between !important;}
.home__popular__wrapper-cards::before,.home__popular__wrapper-cards::after{display:none !important;content:none !important;}
.home__popular__wrapper-cards .product-card-wrapper{padding:0 !important;margin:0 !important;}
.home__update-product__wrapper-cards{gap:var(--otc-grid-gap-y,var(--otc-grid-gap)) var(--otc-grid-gap-x,var(--otc-grid-gap)) !important;}
/* Категорія/пошук/бренд — сітки товарів */
#content .row > .product-layout{padding-inline:calc(var(--otc-grid-gap-x,var(--otc-grid-gap)) / 2) !important;padding-bottom:var(--otc-grid-gap-y,var(--otc-grid-gap)) !important;}
#content .products-list,#content .products-grid{row-gap:var(--otc-grid-gap-y,var(--otc-grid-gap)) !important;}
/* Кастомна картинка-іконка для кнопки "В кошик" */
.otc-cart-icon-img{width:18px;height:18px;object-fit:contain;display:inline-block;vertical-align:middle;}
.product-card-wrapper .btn-custom .otc-cart-icon-img,.product-card-rating .btn-custom .otc-cart-icon-img{margin-right:6px;}
.product-card-wrapper .btn-custom.otc-cart-icon-only,.product-card-rating .btn-custom.otc-cart-icon-only{font-size:0 !important;}
.product-card-wrapper .btn-custom.otc-cart-icon-only .otc-cart-icon-img,.product-card-rating .btn-custom.otc-cart-icon-only .otc-cart-icon-img{margin:0;width:20px;height:20px;}


/* Хлібні крихти — єдиний стиль на ВСІХ сторінках (.breadcrumb): іконка «Домой»,
   розмір, розділювач та показ керуються з Дизайн і стилі → Хлібні крихти. */
.breadcrumb > li:first-child a .fa-home::before{ content:''; }
.breadcrumb > li:first-child a .fa-home{
  display:inline-block;
  width:24px; height:24px;
  background:url('/catalog/view/theme/onetap/image/breadcrumb-home.svg') no-repeat center center;
  background-size:contain;
  vertical-align:middle;
}
/* Розділювач з налаштувань (перекриває хардкод '/' у stylesheet.css). */
.breadcrumb > li + li::before{ content:'/\00a0'; padding:0 5px; color:#ccc; }