/* ICANCROCHET product gallery, rebuilt.
   A native CSS scroll-snap carousel. The browser owns the gesture, so there
   is no JS touch handling to fight page scrolling, no swipe threshold to get
   stuck under, and no animation lock to drop a rapid swipe.
   Every colour, radius, size and arrow here is copied from the existing
   design; nothing new is introduced. */

/* Layout: the original gallery's exact footprint. These are the same values
   WooCommerce and Astra apply to div.images on the live page (48% base, 50%
   from 922px, full width below 922px, 2em bottom margin), written out here
   rather than borrowing their class names so nothing else comes with them. */
.woocommerce div.product .icg{float:left;width:48%;margin:0 0 2em}
@media (min-width:922px){
	.woocommerce .ast-woocommerce-container div.product .icg,
	.woocommerce #content .ast-woocommerce-container div.product .icg{width:50%}
}
@media (max-width:921px){
	.woocommerce div.product .icg{float:none;width:100%}
}

.icg{position:relative;margin:0 0 2em}
.icg-stage{position:relative}

/* ---------- main image track ---------- */
.icg-track{
	display:flex;
	gap:0;
	margin:0;
	padding:0;
	list-style:none;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	/* a horizontal fling stays in the gallery: it never chains to the page
	   and never triggers the iOS back-swipe */
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	-ms-overflow-style:none;
	border-radius:10px;
}
.icg-track::-webkit-scrollbar{display:none;width:0;height:0}

/* touch-action is deliberately left at its default. A native scroller lets
   the browser decide the axis from the first few pixels of the gesture and
   then lock to it, which is what makes a vertical drag over the image scroll
   the page and a horizontal one move the gallery. */

.icg-slide{
	flex:0 0 100%;
	width:100%;
	max-width:100%;
	margin:0;
	padding:0;
	list-style:none;
	scroll-snap-align:start;
	/* the reason one flick moves exactly one image, slow or fast */
	scroll-snap-stop:always;
	aspect-ratio:1/1;
	position:relative;
	overflow:hidden;
	border-radius:10px;
	background:#fdf2f7;
}
.icg-slide picture{display:block;width:100%;height:100%}
.icg-slide img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:10px;
	-webkit-user-drag:none;
	user-select:none;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}

/* The main image carries no arrows. The only arrows on this gallery are the
   thumbnail strip's, exactly as before. */

/* ---------- thumbnail strip: unchanged appearance ---------- */
/* 1em clears the image -- the exact value the original gallery used (its
   .flex-viewport carried margin-bottom:1em), so the gap tracks the font size
   the same way it did: 16px on desktop, 14.6px on a phone. */
.icg-thumbs-wrap{position:relative;margin:1em 0 0}
.icg-thumbs{
	display:flex;
	flex-wrap:nowrap;
	gap:8px;
	margin:0;
	padding:0 0 8px;
	list-style:none;
	overflow-x:auto;
	overflow-y:hidden;
	overscroll-behavior-x:contain;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
	scrollbar-color:#f8c8d8 transparent;
}
/* No scroll-snap here on purpose. A 64px thumbnail strip reads as a free
   scroller, and snapping it is what made the old strip fight the programmatic
   scrolls that keep the active thumbnail in view. */
.icg-thumbs::-webkit-scrollbar{height:6px}
.icg-thumbs::-webkit-scrollbar-thumb{background:#f8c8d8;border-radius:4px}
.icg-thumbs li{flex:0 0 76px;width:76px;margin:0;padding:0;list-style:none}
.icg-thumb{
	display:block;
	width:76px;
	height:76px;
	padding:0;
	margin:0;
	border:0;
	background:none;
	line-height:0;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}
.icg-thumb img{
	display:block;
	width:76px;
	height:76px;
	object-fit:cover;
	border-radius:8px;
	border:2px solid transparent;
	opacity:.75;
	transition:opacity .18s,border-color .18s;
	-webkit-user-drag:none;
	user-select:none;
	-webkit-user-select:none;
}
.icg-thumb picture{display:block;width:100%;height:100%}
.icg-thumb:hover img{opacity:1}
.icg-thumb.is-active img{opacity:1;border-color:#e00189}
.icg-thumb:focus-visible img{outline:2px solid #e00189;outline-offset:2px}

/* ---------- thumbnail arrows: identical to the current ones ---------- */
.icg-tarrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:4;
	width:30px;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	font:inherit;
	font-size:13px;
	line-height:1;
	background:#fff;
	color:#ad1457;
	border:1.5px solid #f8c8d8;
	border-radius:50%;
	box-shadow:0 3px 10px rgba(0,0,0,.16);
	cursor:pointer;
	transition:background .15s ease,color .15s ease;
}
.icg-tarrow:hover,.icg-tarrow:focus-visible{background:#fff0f7;color:#e00189;outline:none}
.icg-tarrow[hidden]{display:none}
.icg-tprev{left:0}
.icg-tnext{right:0}
.icg-thumbs-wrap.has-nav .icg-thumbs::before,
.icg-thumbs-wrap.has-nav .icg-thumbs::after{content:'';flex:0 0 26px}

@media (max-width:600px){
	.icg-thumbs li{flex:0 0 64px;width:64px}
	.icg-thumb,.icg-thumb img{width:64px;height:64px}
	.icg-tarrow{width:28px;height:28px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
	.icg-track,.icg-thumbs{scroll-behavior:auto}
}

/* screen-reader-only live region */
.icg-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}