/*
 * Shubh Laabh Arts — Shop product circles, immediately below the Shop
 * banner. The band itself is full-bleed (edge to edge, no side gaps) with
 * the theme's gold half-mandala line art faintly at either edge; only the
 * row of circles inside it is held to the site's content width. On wide
 * screens all 11 circles sit on one line; when they don't fit, the row
 * becomes a native swipe/scroll strip (scroll-snap) with arrow buttons on
 * pointer devices — the page itself never scrolls sideways. Items are the
 * real products in the curated order (sla_render_shop_categories() in
 * inc/shop.php); arrows + overflow state in assets/js/shop.js.
 */

.sla-shop-cats,
.sla-shop-cats *,
.sla-shop-cats *::before,
.sla-shop-cats *::after {
	box-sizing: border-box;
}

.sla-shop-cats {
	--sla-circle: clamp( 80px, 4.2vw + 36px, 100px );
	position: relative;
	width: 100%;
	overflow: hidden;
	background: linear-gradient( 180deg, var( --sla-warm-cream ), var( --sla-ivory ) );
	border-bottom: 1px solid var( --sla-ivory-dark );
	padding-block: clamp( 1.5rem, 2.6vw, 2.25rem ) clamp( 1.25rem, 2.2vw, 2rem );
}

/* Faint mandala line art at both edges of the band. */
.sla-shop-cats::before,
.sla-shop-cats::after {
	content: '';
	position: absolute;
	top: 50%;
	width: clamp( 90px, 9vw, 150px );
	aspect-ratio: 280 / 518;
	background: url( '../images/decorative/footer-mandala-280w.webp' ) no-repeat center / contain;
	opacity: 0.22;
	pointer-events: none;
	transform: translateY( -50% );
}

.sla-shop-cats::before {
	left: 0;
}

.sla-shop-cats::after {
	right: 0;
	transform: translateY( -50% ) scaleX( -1 );
}

.sla-shop-cats__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: var( --sla-container-max );
	margin-inline: auto;
	padding-inline: clamp( 1rem, 4vw, 3rem );
}

.sla-shop-cats__track {
	display: flex;
	gap: clamp( 0.75rem, 1.1vw, 1rem );
	flex: 1 1 auto;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0.4rem 0.1rem 0.25rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sla-shop-cats__track::-webkit-scrollbar {
	display: none;
}

/* Items share the row evenly when there's room, never shrink below the
 * circle size — so the strip scrolls instead of squashing. */
.sla-shop-cats__item {
	flex: 1 0 var( --sla-circle );
	scroll-snap-align: start;
	display: flex;
	justify-content: center;
}

.sla-shop-cats__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	width: var( --sla-circle );
	text-decoration: none;
	border-radius: 12px;
	outline-offset: 4px;
}

/* The circle is fixed by the wrapper, never by the image: an explicit
 * height (aspect-ratio alone lets a tall image stretch it into an oval)
 * plus overflow clipping, so any image shape crops into the same circle. */
.sla-shop-cats__circle {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: var( --sla-circle );
	height: var( --sla-circle );
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 50%;
	padding: 4px;
	background: #fff;
	border: 1px solid color-mix( in srgb, var( --sla-champagne-gold ) 45%, var( --sla-ivory-dark ) );
	box-shadow: 0 8px 18px -14px rgba( 7, 59, 76, 0.45 );
	transition: border-color 280ms ease, transform 280ms ease, box-shadow 280ms ease;
}

/* Scoped under .sla-shop-cats to outrank WooCommerce's
 * `.woocommerce-page img { height: auto }`, which otherwise restores the
 * image's own ratio inside the circle. */
.sla-shop-cats .sla-shop-cats__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	object-position: center center;
	background: var( --sla-warm-cream );
}

.sla-shop-cats__name {
	font-family: var( --sla-font-display );
	font-size: clamp( 0.875rem, 0.8rem + 0.25vw, 1rem );
	font-weight: 600;
	line-height: 1.2;
	color: var( --sla-peacock-navy );
	text-align: center;
	transition: color 250ms ease;
}

.sla-shop-cats__link:hover .sla-shop-cats__circle,
.sla-shop-cats__link:focus-visible .sla-shop-cats__circle,
.sla-shop-cats__link.is-active .sla-shop-cats__circle {
	border-color: var( --sla-champagne-gold );
	transform: translateY( -3px );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --sla-champagne-gold ) 22%, transparent ), 0 14px 24px -16px rgba( 7, 59, 76, 0.55 );
}

.sla-shop-cats__link:hover .sla-shop-cats__name,
.sla-shop-cats__link.is-active .sla-shop-cats__name {
	color: var( --sla-antique-gold );
}

/* Arrows: only while the row actually overflows (JS toggles
 * .is-scrollable), and only on devices with a fine pointer. */
.sla-shop-cats__arrow {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1.6rem; /* centre on the circles, not circle + name */
	border-radius: 50%;
	border: 1px solid var( --sla-ivory-dark );
	background: #fff;
	color: var( --sla-peacock-navy );
	box-shadow: 0 6px 14px -10px rgba( 7, 59, 76, 0.5 );
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.sla-shop-cats.is-scrollable .sla-shop-cats__arrow {
	display: inline-flex;
}

.sla-shop-cats__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

.sla-shop-cats__arrow-icon {
	display: inline-flex;
}

.sla-shop-cats__arrow-icon--flip {
	transform: scaleX( -1 );
}

.sla-shop-cats__arrow svg {
	width: 16px;
	height: 16px;
}

.sla-shop-cats__arrow:not( [disabled] ):hover,
.sla-shop-cats__arrow:focus-visible {
	background: var( --sla-champagne-gold );
	border-color: var( --sla-champagne-gold );
}

/* Touch tablets (768px+): swipe, with a fade hinting that the row continues. */
@media ( hover: none ) and ( min-width: 768px ) {
	.sla-shop-cats.is-scrollable .sla-shop-cats__arrow {
		display: none;
	}

	/* Hint that the row continues: fade the trailing edge. */
	.sla-shop-cats.is-scrollable .sla-shop-cats__track {
		-webkit-mask-image: linear-gradient( 90deg, #000 85%, transparent );
		mask-image: linear-gradient( 90deg, #000 85%, transparent );
	}

	.sla-shop-cats.is-scrollable.is-at-end .sla-shop-cats__track {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

/* Phones: exactly three circles between two always-visible arrows. The
 * row snaps a page (three items) at a time — the arrows page by three
 * (assets/js/shop.js) and the strip still swipes natively. --sla-cats-item
 * is the width one of the three slots gets: viewport minus the band's
 * side padding (2 × 0.75rem), both arrows (2 × 38px), their gaps
 * (2 × 0.4rem) and the two gaps between items (2 × 8px). */
@media ( max-width: 767px ) {
	.sla-shop-cats {
		--sla-cats-item: calc( ( 100vw - 1.5rem - 76px - 0.8rem - 16px ) / 3 );
		--sla-circle: min( 84px, var( --sla-cats-item ) );
		padding-block: 1.25rem 1.1rem;
	}

	.sla-shop-cats::before,
	.sla-shop-cats::after {
		opacity: 0.14;
	}

	.sla-shop-cats__inner {
		align-items: flex-start;
		gap: 0.4rem;
		padding-inline: 0.75rem;
	}

	.sla-shop-cats__track {
		gap: 8px;
		padding-inline: 0;
		scroll-snap-type: x mandatory;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.sla-shop-cats__item {
		flex: 0 0 calc( ( 100% - 16px ) / 3 );
		scroll-snap-align: start;
	}

	.sla-shop-cats__link {
		width: 100%;
		gap: 0.5rem;
	}

	.sla-shop-cats__name {
		font-size: 0.8125rem;
	}

	/* Always shown on phones, centred on the circles. */
	.sla-shop-cats .sla-shop-cats__arrow,
	.sla-shop-cats.is-scrollable .sla-shop-cats__arrow {
		display: inline-flex;
		width: 38px;
		height: 38px;
		margin: calc( var( --sla-circle ) / 2 + 0.4rem - 19px ) 0 0;
		background: #fff;
		border-color: color-mix( in srgb, var( --sla-champagne-gold ) 55%, var( --sla-ivory-dark ) );
		color: var( --sla-peacock-navy );
		box-shadow: 0 8px 16px -10px rgba( 7, 59, 76, 0.55 );
	}

	.sla-shop-cats__arrow[disabled] {
		opacity: 0.4;
	}
}

/* -----------------------------------------------------------------------
 * Scroll-reveal.
 * --------------------------------------------------------------------- */
.sla-js .sla-shop-cats [data-sla-reveal-item] {
	opacity: 0;
	transform: translateY( 14px );
	transition: opacity 550ms ease, transform 550ms ease;
	transition-delay: var( --sla-reveal-delay, 0ms );
}

.sla-js .sla-shop-cats.is-revealed [data-sla-reveal-item] {
	opacity: 1;
	transform: translateY( 0 );
}

@media ( prefers-reduced-motion: reduce ) {
	.sla-js .sla-shop-cats [data-sla-reveal-item] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}