/* HARD — каталог, стиль A (Oswald + Onest, чорно-білий, квадратні кнопки): значки, картка товару, «нещодавно переглядали».
   Джерело: clients/hardbrand.com.ua/site/wp/mu-plugins/hb-catalog/catalog.css */

/* Значки на фото: «−N%», New, Топ продажу — колонкою, притиснуті до лівого краю фото (правка клієнта 12.10) */
.hb-badges { position: absolute; top: 12px; left: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; }
.hb-badges > * { position: static !important; }
.hb-badge, .hb-badges .onsale { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 0; min-height: 0; padding: 0 9px; border-radius: 0; font: 600 12px/1 Oswald, sans-serif !important; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
/* Знижка — один значок для всіх акційних: чорний із відсотком (!important — проти червоного з «Додаткового CSS» теми) */
.onsale.hb-sale { background: #111 !important; color: #fff !important; }
.hb-badge--new { background: var(--hb-black, #111); }
.hb-badge--top { background: #fff; color: var(--hb-black, #111); box-shadow: inset 0 0 0 1px var(--hb-black, #111); }

/* ---------- Картка товару (правки клієнта 12.10) ---------- */
/* Фото при наведенні не наближається — замість цього гортається */
[data-products] figure { overflow: hidden; margin-bottom: 0 !important; }
[data-products] figure .ct-media-container.has-hover-effect img, [data-products] figure .ct-media-container.has-hover-effect:hover img { transform: none !important; }

/* Стрічка фото: збирає catalog.js із головного фото й фото галереї; гортається стрілками, на телефоні — пальцем */
.hb-cg__track { display: flex; align-items: flex-start; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hb-cg__track::-webkit-scrollbar { display: none; }
.hb-cg__track > img { flex: 0 0 100%; width: 100%; min-width: 0; height: auto; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; }
.hb-cg__nav { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--hb-black, #111); cursor: pointer; opacity: 0; transition: opacity .2s; }
.hb-cg__nav::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.hb-cg__nav.is-prev { left: 8px; }
.hb-cg__nav.is-prev::before { transform: translateX(2px) rotate(135deg); }
.hb-cg__nav.is-next { right: 8px; }
.hb-cg__nav.is-next::before { transform: translateX(-2px) rotate(-45deg); }
/* Лінія-індикатор унизу фото: довжина повзунка — частка одного фото */
.hb-cg__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 2px; background: #e3e3e3; /* суцільне тло: на темному фото прозора лінія губилась */ pointer-events: none; opacity: 0; transition: opacity .2s, transform .22s ease; }
.hb-cg__bar i { display: block; width: calc(100% / var(--hb-cg-n, 1)); height: 100%; background: var(--hb-black, #111); transform: translateX(calc(100% * var(--hb-cg-i, 0))); transition: transform .2s; }

/* Назва, ціна й розміри — один блок: при наведенні спливає вгору на висоту рядка розмірів (--hb-qh ставить catalog.js) */
[data-products] li.product { position: relative; }
.hb-info { position: relative; z-index: 4; padding-top: 10px; background: #fff; transition: transform .22s ease; }
.hb-info > * { margin-bottom: 0 !important; }
.hb-info > .price { margin-top: 6px; }
/* Стара ціна — по нижній лінії нової, як на сторінці товару */
:root .woocommerce ul.products li.product .price .sale-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
:root .woocommerce ul.products li.product .price del { margin: 0; }
.hb-quick { position: absolute; left: 0; right: 0; top: 100%; padding: 8px 0 4px; background: #fff; opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.hb-quick__sizes { display: flex; flex-wrap: wrap; gap: 5px; }
.hb-quick__size { min-width: 36px; height: 32px; padding: 0 7px; border: 1px solid #cfcfcf; border-radius: 0; background: #fff; color: var(--hb-black, #111); font: 500 13px Oswald, sans-serif; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.hb-quick__size:hover, .hb-quick__size:focus-visible { border-color: var(--hb-black, #111); background: var(--hb-black, #111); color: #fff; }
.hb-quick__size--buy { padding: 0 18px; border-color: var(--hb-black, #111); background: var(--hb-black, #111); color: #fff; }
.hb-quick__size.is-loading { opacity: .5; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
	li.product:hover .hb-cg__nav:not([disabled]), li.product:focus-within .hb-cg__nav:not([disabled]) { opacity: 1; }
	li.product:hover .hb-cg__bar, li.product:focus-within .hb-cg__bar { opacity: 1; transform: translateY(calc(-1 * var(--hb-qh, 0px))); }
	li.product:hover .hb-info, li.product:focus-within .hb-info { transform: translateY(calc(-1 * var(--hb-qh, 0px))); }
	li.product:hover .hb-quick, li.product:focus-within .hb-quick { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s 0s; }
}
@media (hover: none), (pointer: coarse) {
	/* Телефон і планшет: фото гортається пальцем, лінія видна завжди; рядка розмірів і кнопки «в кошик» немає */
	.hb-quick, .hb-cg__nav { display: none; }
	.has-hb-cg .hb-cg__bar { opacity: 1; }
}

/* Повідомлення «Додано в кошик» */
.hb-toast { position: fixed; left: 50%; bottom: 24px; z-index: 100001; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 14px 18px; background: var(--hb-black, #111); color: #fff; font: 400 14px/1.4 Onest, sans-serif; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: opacity .2s, transform .2s; }
.hb-toast.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.hb-toast.is-error { background: var(--hb-red, #c32929); }
.hb-toast a { flex: 0 0 auto; color: #fff; font: 500 13px Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid #fff; padding-bottom: 1px; }

/* «Ви нещодавно переглядали» */
.hb-recent { margin-top: 50px; margin-bottom: 60px; }
.hb-recent[hidden] { display: none; }
.hb-recent .ct-module-title { margin-bottom: 30px; }

@media (max-width: 689px) {
	.hb-toast { left: 16px; right: 16px; bottom: 16px; max-width: none; transform: translateY(20px); justify-content: space-between; }
	.hb-toast.is-open { transform: none; }
	.hb-recent { margin-top: 40px; margin-bottom: 40px; }
	.hb-recent .ct-module-title { margin-bottom: 18px; }
	/* На телефоні — стрічка, що гортається вбік: вісім карток стовпчиком відсунули б підвал на кілька екранів */
	.hb-recent ul.products { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
	.hb-recent ul.products > li.product { flex: 0 0 58%; scroll-snap-align: start; }
}