/**
 * IGSHOP Shop Kit — category carousel.
 *
 * A horizontal row of linked sibling products above the add to cart form.
 * Plain scroll and swipe, no autoplay and no JavaScript — this is a row to
 * browse, not a slider to watch.
 */

.qav-carousel {
	/* Thumbnail size and shape. Width and shape are also plugin settings
	   (WooCommerce > Settings > Products > IGSHOP: Category Carousel); the
	   values below are only the fallback for a site that never sets them. */
	--qav-carousel-width: 72px;
	--qav-carousel-ratio: 1 / 1;
	--qav-carousel-radius: 0;
	--qav-carousel-padding: 2px;
	--qav-carousel-gap: 10px;

	/* Text. */
	--qav-carousel-label-size: 12px;
	--qav-carousel-label-color: #6d6d6d;
	--qav-carousel-name-size: 11px;
	--qav-carousel-name-color: #6d6d6d;

	margin: 0 0 22px;
}

.qav-carousel-label {
	font-size: var(--qav-carousel-label-size);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--qav-carousel-label-color);
	margin: 0 0 12px;
}

.qav-carousel-track {
	display: flex;
	gap: var(--qav-carousel-gap);
	overflow-x: auto;
	padding-bottom: 4px;
	/* 'proximity' rather than 'mandatory' — the row still scrolls freely past
	   the last item instead of fighting the shopper's swipe. */
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.qav-carousel-item {
	flex: none;
	width: var(--qav-carousel-width);
	scroll-snap-align: start;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.qav-carousel-thumb {
	display: block;
	/* border-box, not the browser default content-box, so the border and
	   padding below are contained inside --qav-carousel-width instead of
	   adding to it — the same rule keeps aspect-ratio accurate on a
	   Portrait shape, where content-box would otherwise skew it slightly,
	   since padding and border are equal in px but not equal as a share of
	   the (different) width and height. */
	box-sizing: border-box;
	width: var(--qav-carousel-width);
	aspect-ratio: var(--qav-carousel-ratio);
	border-radius: var(--qav-carousel-radius);
	border: 1.5px solid transparent;
	padding: var(--qav-carousel-padding);
	margin: 0 0 6px;
}

.qav-carousel-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--qav-carousel-radius) - var(--qav-carousel-padding));
}

/* Reads the plugin's own Primary colour setting first, then the theme's
   Elementor global colour, then the built-in fallback — same chain every
   other brand-coloured element in this plugin uses. */
.qav-carousel-item:hover .qav-carousel-thumb,
.qav-carousel-item:focus-visible .qav-carousel-thumb {
	border-color: var(--qav-brand-primary, var(--e-global-color-primary, #330917));
}

.qav-carousel-item:focus-visible {
	outline: none;
}

.qav-carousel-name {
	display: block;
	font-size: var(--qav-carousel-name-size);
	color: var(--qav-carousel-name-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.qav-carousel-track {
		scroll-behavior: auto;
	}
}