/**
 * OP Loop Gallery — стилі гортання фото в міні-картках каталогу.
 *
 * Контейнер .op-lg не задає розмірів — їх тримає тема (.product-card img: aspect-ratio 16/11,
 * object-fit contain), тому підміна фото не зсуває макет (нульовий CLS).
 * Стрілки: десктоп — по наведенню на картку, тач — видимі одразу.
 * Стрілки без фону/тіні, шеврони крупні (правки Олександра 11.06).
 *
 * Використовується в: op-loop-gallery.php (enqueue) + запис у op-optimizer Style Manager.
 *
 * Історія змін:
 * - 2026-06-11: v1.1.2 — відступи стрілок 18px (моб. 12px), лічильник right 18 (моб. 14/14).
 * - 2026-06-11: v1.1.1 — стрілки без background/box-shadow, шеврон 19px/3px, відступи 28px,
 *   лічильник right 38 / bottom 18; мобільні значення відкориговані пропорційно.
 * - 2026-06-11: Створено в рамках MVP v1.0.0 (task #879).
 */

.op-lg {
	position: relative;
	display: block;
}

.op-lg .op-lg-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.op-lg .op-lg-prev { left: 18px; }
.op-lg .op-lg-next { right: 18px; }

.op-lg .op-lg-arrow::before {
	content: '';
	width: 19px;
	height: 19px;
	border-left: 3px solid #333;
	border-bottom: 3px solid #333;
	transform: rotate(45deg);
	margin-left: 3px;
}
.op-lg .op-lg-next::before {
	transform: rotate(-135deg);
	margin-left: -3px;
}

/* Десктоп: стрілки з'являються по наведенню на картку */
@media (hover: hover) {
	.product-card:hover .op-lg .op-lg-arrow {
		opacity: 1;
	}
}
/* Тач: стрілки видимі одразу, значення трохи компактніші */
@media (hover: none) {
	.op-lg .op-lg-arrow {
		opacity: 1;
		width: 28px;
		height: 28px;
	}
	.op-lg .op-lg-prev { left: 12px; }
	.op-lg .op-lg-next { right: 12px; }
	.op-lg .op-lg-arrow::before {
		width: 16px;
		height: 16px;
	}
}

.op-lg .op-lg-count {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 2;
	font-size: 12px;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	pointer-events: none;
}
@media (hover: none) {
	.op-lg .op-lg-count {
		right: 14px;
		bottom: 14px;
	}
}