/* ==========================================================================
   A4 product page fixes (automatic, every product).
   This file loads BEFORE pdp-top.css / zy-product-images.css (alphabetical),
   so selectors carry extra specificity.

   1. Mobile (<=767px): the image grid becomes a full-width swipe carousel with
      dots, like the reference mobile PDP (was a 2-column grid of small images).
   ========================================================================== */

body.single-product .yb-fix-a4-dots { display: none; }

@media (max-width: 767px) {
	body.yb.single-product .product-image-summary .yb-pdp-grid.yb-fix-a4-swipe {
		display: flex;
		grid-template-columns: none;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	body.yb.single-product .product-image-summary .yb-pdp-grid.yb-fix-a4-swipe::-webkit-scrollbar { display: none; }
	body.yb.single-product .product-image-summary .yb-pdp-grid.yb-fix-a4-swipe > .yb-pdp-grid__item {
		flex: 0 0 100%;
		width: 100%;
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	body.single-product .yb-fix-a4-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 2px;
		padding: 6px 0 2px;
	}
	body.single-product .yb-fix-a4-dots button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		min-height: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		cursor: pointer;
	}
	body.single-product .yb-fix-a4-dots button::before {
		content: "";
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #C8C8C8;
		transition: background-color .2s ease, transform .2s ease;
	}
	body.single-product .yb-fix-a4-dots button[aria-current="true"]::before {
		background: #111;
		transform: scale(1.15);
	}
	body.single-product .yb-fix-a4-dots button:focus:not(:focus-visible) { outline: 0; }
}