/**
 * Audrixs Product Carousel
 *
 * 1.  Tokens & colour schemes
 * 2.  Section shell
 * 3.  Heading
 * 4.  Track (slider + grid)
 * 5.  Card
 * 6.  Media, badges
 * 7.  Card text
 * 8.  Buttons
 * 9.  Arrows
 * 10. Pagination & progress
 * 11. Responsive
 * 12. Motion, RTL, print
 *
 * Everything is scoped under .axc, and every instance-specific value arrives
 * as a custom property in the section's own style attribute — so two carousels
 * on one page can look nothing alike without a single line of extra CSS.
 */

/* 1. TOKENS ================================================================ */

.axc {
	/* Overridable per instance from PHP. The fallbacks here are what a
	   carousel looks like when the editor sets no colours at all. */
	--axc-accent: #7a48b0;
	--axc-accent-fg: #ffffff;
	--axc-sale: #d6336c;
	--axc-radius: 14px;
	--axc-pad: 0px;
	--axc-gap: 24px;
	--axc-ratio: 1 / 1;
	--axc-title-lines: 2;
	--axc-desc-lines: 2;

	/* Slider columns per breakpoint; the active one is picked in §11. */
	--axc-cols-d: 4;
	--axc-cols-l: 3;
	--axc-cols-t: 3;
	--axc-cols-m: 1.5;
	--axc-cols: var(--axc-cols-d);

	--axc-grid-d: 4;
	--axc-grid-l: 3;
	--axc-grid-t: 3;
	--axc-grid-m: 1;
	--axc-grid: var(--axc-grid-d);

	--axc-section-bg: transparent;
	--axc-card-bg: transparent;
	--axc-card-border: currentColor;
	--axc-shadow: none;
	--axc-shadow-hover: none;

	--axc-space: 56px;
	--axc-nav-size: 44px;
	--axc-nav-bg: #ffffff;
	--axc-nav-fg: #1f2430;
	--axc-nav-ring: rgba(0, 0, 0, 0.08);

	box-sizing: border-box;
}

.axc *,
.axc *::before,
.axc *::after {
	box-sizing: inherit;
}

/* Auto: take the surrounding theme's colours. The right default on a
   transparent background, where the plugin has no idea what is behind it. */
.axc--scheme-auto {
	--axc-heading: inherit;
	--axc-text: inherit;
	--axc-price: inherit;
	--axc-muted: currentColor;
}

/* color-mix gives a muted tone without knowing the ink colour. Browsers
   without it keep the plain currentColor above, which is merely less subtle. */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
	.axc--scheme-auto {
		--axc-muted: color-mix(in srgb, currentColor 62%, transparent);
		--axc-card-border: color-mix(in srgb, currentColor 16%, transparent);
	}
}

.axc--scheme-light {
	--axc-heading: #14161c;
	--axc-text: #2b3040;
	--axc-muted: #6b7280;
	--axc-price: #14161c;
	--axc-card-border: rgba(15, 18, 28, 0.12);
	color: var(--axc-text);
}

.axc--scheme-dark {
	--axc-heading: #ffffff;
	--axc-text: #e7e9f0;
	--axc-muted: #a3a9bb;
	--axc-price: #ffffff;
	--axc-card-border: rgba(255, 255, 255, 0.16);
	--axc-nav-bg: rgba(255, 255, 255, 0.1);
	--axc-nav-fg: #ffffff;
	--axc-nav-ring: rgba(255, 255, 255, 0.2);
	color: var(--axc-text);
}

/* 2. SECTION SHELL ========================================================= */

.axc {
	position: relative;
	width: 100%;
	background: var(--axc-section-bg);
}

.axc--bg-transparent {
	background: transparent;
}

.axc--bg-tint {
	background: rgba(0, 0, 0, 0.025);
}

@supports (background: color-mix(in srgb, red 5%, transparent)) {
	.axc--bg-tint {
		background: color-mix(in srgb, var(--axc-accent) 7%, transparent);
	}
}

.axc--space-none  { padding-block: 0; }
.axc--space-sm    { padding-block: calc(var(--axc-space) * 0.4); }
.axc--space-md    { padding-block: calc(var(--axc-space) * 0.75); }
.axc--space-lg    { padding-block: var(--axc-space); }
.axc--space-xl    { padding-block: calc(var(--axc-space) * 1.5); }

.axc__inner {
	width: 100%;
	margin-inline: auto;
}

/* "inherit" adds no width of its own — the theme's own container decides,
   which is what makes the plugin drop cleanly into any layout. */
.axc--width-normal .axc__inner { max-width: 1200px; padding-inline: 20px; }
.axc--width-wide   .axc__inner { max-width: 1440px; padding-inline: 20px; }
.axc--width-full   .axc__inner { max-width: none;   padding-inline: 20px; }

/* 3. HEADING =============================================================== */

.axc__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.axc--align-center .axc__head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.axc__head-text {
	min-width: 0;
}

.axc__eyebrow {
	display: block;
	margin-bottom: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--axc-accent);
}

.axc__title {
	margin: 0;
	color: var(--axc-heading);
	font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem);
	line-height: 1.2;
	font-weight: 700;
}

.axc__subtitle {
	margin: 8px 0 0;
	max-width: 62ch;
	color: var(--axc-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.axc--align-center .axc__subtitle {
	margin-inline: auto;
}

.axc__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* Controls with no heading text beside them belong on the right, not
   stranded on the left by space-between with nothing to be between. */
.axc__actions:only-child {
	margin-inline-start: auto;
}

.axc__head-nav {
	display: flex;
	gap: 8px;
}

.axc__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border: 1px solid var(--axc-card-border);
	border-radius: 100px;
	color: var(--axc-heading);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.axc__link:hover,
.axc__link:focus-visible {
	color: var(--axc-accent);
	border-color: var(--axc-accent);
}

.axc__link .axc-icon {
	width: 16px;
	height: 16px;
	transition: transform 0.2s ease;
}

.axc__link:hover .axc-icon {
	transform: translateX(3px);
}

.axc__toggle {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border: 1px solid var(--axc-card-border);
	border-radius: 100px;
}

.axc__toggle-btn {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: transparent;
	color: var(--axc-muted);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.axc__toggle-btn.is-active {
	background: var(--axc-accent);
	color: var(--axc-accent-fg);
}

/* 4. TRACK ================================================================= */

.axc__viewport {
	position: relative;
}

/* `display` is set on the two-class selectors below rather than here, so it
   outranks any single-class theme rule that happens to reach the track. */
.axc__track {
	gap: var(--axc-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* JavaScript owns the animation, passing 'smooth' or 'auto' per call.
	   Declaring smooth HERE would silently win over both: scrollTo()'s
	   behavior:'auto' means "defer to CSS", so the instant paths — the grid
	   toggle, drag tracking, and the reduced-motion branch — would animate
	   anyway. Pinning it to auto also blocks a theme's global
	   `* { scroll-behavior: smooth }` from leaking in. */
	scroll-behavior: auto;
	/* Room for a lifted card's shadow, clawed back with the negative margin so
	   the row still lines up with the rest of the page. */
	padding-block: 4px;
	margin-block: -4px;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.axc__track::-webkit-scrollbar {
	display: none;
}

.axc--slider .axc__track {
	display: flex;
}

.axc__track > li {
	flex: 0 0 calc((100% - (var(--axc-cols) - 1) * var(--axc-gap)) / var(--axc-cols));
	min-width: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
	list-style: none;
}

/* Everything fits: stop pretending it is a slider. Both axes have to be
   released together — a lone `overflow-x: visible` next to `overflow-y: hidden`
   computes back to `auto`, and a lifted card's shadow would still be clipped. */
.axc--static .axc__track {
	scroll-snap-type: none;
	overflow: visible;
	justify-content: flex-start;
}

.axc__track.is-draggable {
	cursor: grab;
}

.axc__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
	user-select: none;
}

.axc__track:focus-visible {
	outline: 2px solid var(--axc-accent);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Grid layout — the same cards, no scrolling. */
.axc--grid .axc__track {
	display: grid;
	grid-template-columns: repeat(var(--axc-grid), minmax(0, 1fr));
	row-gap: calc(var(--axc-gap) + 8px);
	overflow: visible;
	scroll-snap-type: none;
}

.axc--grid .axc__track > li {
	flex: none;
	width: auto;
}

/* 5. CARD ================================================================== */

.axc-card {
	display: flex;
}

.axc-card__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--axc-pad);
	border-radius: var(--axc-radius);
	background: var(--axc-card-bg);
	box-shadow: var(--axc-shadow);
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.28s ease,
	            border-color 0.28s ease;
}

.axc--card-transparent .axc-card__inner {
	background: transparent;
}

/* A solid card needs a colour to be solid with. This is the class-level
   default; a colour picked in the editor arrives as an inline custom property,
   which wins over anything declared here. */
.axc--card-solid {
	--axc-card-bg: #ffffff;
}

.axc--scheme-dark.axc--card-solid {
	--axc-card-bg: rgba(255, 255, 255, 0.06);
}

.axc--card-solid .axc-card__inner {
	background: var(--axc-card-bg);
}

/* A white card carries its own ink. Under scheme "auto" the text inherits the
   surrounding page, which on a dark theme means white type on a white card —
   invisible. The surface decides the ink; only the card is re-coloured, so the
   section heading outside it keeps inheriting as intended. */
.axc--scheme-auto.axc--card-solid .axc-card__inner {
	--axc-heading: #14161c;
	--axc-text: #2b3040;
	--axc-muted: #6b7280;
	--axc-price: #14161c;
	--axc-card-border: rgba(15, 18, 28, 0.12);
	color: var(--axc-text);
}

.axc--card-frosted .axc-card__inner {
	background: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}

/* A card with a real surface has to hold its content off its own edge, or the
   title sits flush against the white and the whole thing stops reading as a
   card. Only the filled variants need it — a transparent card has no edge for
   the text to collide with. */
.axc--card-solid .axc-card__body,
.axc--card-frosted .axc-card__body {
	padding-inline: 14px;
	padding-bottom: 16px;
}

/* When card_padding is set, the inner padding already provides that inset —
   adding it twice would double-indent the text away from the image. */
.axc--padded.axc--card-solid .axc-card__body,
.axc--padded.axc--card-frosted .axc-card__body {
	padding-inline: 0;
	padding-bottom: 0;
}

/* On a filled, unpadded card the image is the top of the card, so it rounds
   only where the card rounds. Rounding all four corners would float a detached
   tile inside the surface instead. */
.axc--card-solid:not(.axc--padded) .axc-card__inner,
.axc--card-frosted:not(.axc--padded) .axc-card__inner {
	overflow: hidden;
}

.axc--card-solid:not(.axc--padded) .axc-card__media,
.axc--card-frosted:not(.axc--padded) .axc-card__media {
	border-radius: var(--axc-radius) var(--axc-radius) 0 0;
}

.axc--bordered .axc-card__inner {
	border: 1px solid var(--axc-card-border);
}

.axc--shadow-soft   { --axc-shadow: 0 2px 10px rgba(15, 20, 35, 0.06); --axc-shadow-hover: 0 12px 28px rgba(15, 20, 35, 0.12); }
.axc--shadow-medium { --axc-shadow: 0 6px 20px rgba(15, 20, 35, 0.09); --axc-shadow-hover: 0 18px 40px rgba(15, 20, 35, 0.16); }
.axc--shadow-strong { --axc-shadow: 0 12px 34px rgba(15, 20, 35, 0.14); --axc-shadow-hover: 0 24px 54px rgba(15, 20, 35, 0.22); }

.axc--hover-lift .axc-card__inner:hover {
	transform: translateY(-5px);
	box-shadow: var(--axc-shadow-hover, 0 16px 34px rgba(15, 20, 35, 0.12));
}

.axc--hover-shadow .axc-card__inner:hover {
	box-shadow: var(--axc-shadow-hover, 0 16px 34px rgba(15, 20, 35, 0.14));
}

.axc--hover-accent .axc-card__inner:hover {
	border-color: var(--axc-accent);
	box-shadow: 0 0 0 1px var(--axc-accent);
}

/* Equal heights: the footer is pushed to the bottom of every card, so prices
   and buttons line up across a row of different-length titles. */
.axc--equal .axc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.axc--equal .axc-card__foot {
	margin-top: auto;
}

.axc--cardtext-center .axc-card__body {
	text-align: center;
	align-items: center;
}

/* 6. MEDIA & BADGES ======================================================== */

.axc-card__media {
	position: relative;
	overflow: hidden;
	background: rgba(128, 128, 128, 0.07);
	aspect-ratio: var(--axc-ratio);
	/* max() keeps the radius sane when the padding is larger than the corner
	   — a negative border-radius would invalidate the whole declaration. */
	border-radius: max(0px, calc(var(--axc-radius) - var(--axc-pad) / 2));
}

.axc-card__media-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.axc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.4s ease;
}

.axc--img-contain .axc-card__img {
	object-fit: contain;
}

/* An "auto" ratio has no fixed box to fill, so the image sets its own height
   and the frame follows it. */
.axc--ratio-auto .axc-card__img {
	height: auto;
}

.axc--ratio-auto .axc-card__media-link {
	height: auto;
}

.axc--imghover-zoom .axc-card__inner:hover .axc-card__img--main {
	transform: scale(1.06);
}

.axc--imghover-fade .axc-card__inner:hover .axc-card__img--main {
	opacity: 0.82;
}

.axc-card__img--second {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.axc-card__media.has-second:hover .axc-card__img--second {
	opacity: 1;
}

.axc-card__media.has-second:hover .axc-card__img--main {
	opacity: 0;
}

.axc-card__flags {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	pointer-events: none;
	z-index: 2;
}

/* With the image switched off there is nothing to overlay, so the badges
   become a normal row above the text instead of floating over it. */
.axc-card__inner > .axc-card__flags {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.axc-badge {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 100px;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: #ffffff;
	background: var(--axc-sale);
}

.axc-badge--new {
	background: var(--axc-accent);
}

.axc-badge--oos {
	background: #4b5563;
}

.axc-card--oos .axc-card__img--main {
	opacity: 0.55;
	filter: grayscale(0.35);
}

/* 7. CARD TEXT ============================================================= */

.axc-card__body {
	padding-top: 14px;
	color: var(--axc-text);
}

.axc--padded .axc-card__body {
	padding-inline: 2px;
}

.axc-card__cat {
	display: block;
	margin-bottom: 5px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--axc-muted);
	text-decoration: none;
}

.axc-card__cat:hover {
	color: var(--axc-accent);
}

.axc-card__title {
	margin: 0 0 6px;
	font-size: 0.975rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--axc-heading);
	/* Clamped so a long product name cannot make one card taller than the
	   rest of the row. */
	display: -webkit-box;
	-webkit-line-clamp: var(--axc-title-lines);
	line-clamp: var(--axc-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.axc-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.axc-card__title a:hover,
.axc-card__title a:focus-visible {
	color: var(--axc-accent);
}

.axc-card__desc {
	margin: 0 0 10px;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--axc-muted);
	display: -webkit-box;
	-webkit-line-clamp: var(--axc-desc-lines);
	line-clamp: var(--axc-desc-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.axc-card__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 0.8rem;
	color: var(--axc-muted);
}

.axc--cardtext-center .axc-card__rating {
	justify-content: center;
}

/* WooCommerce's own star widget, kept from stretching the card. */
.axc-card__rating .star-rating {
	float: none;
	margin: 0;
	font-size: 0.8em;
	color: var(--axc-accent);
}

.axc-card__foot {
	padding-top: 4px;
}

.axc-card__price {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--axc-price);
}

.axc-card__price del {
	margin-inline-end: 6px;
	font-weight: 500;
	opacity: 0.55;
}

.axc-card__price ins {
	text-decoration: none;
	color: var(--axc-sale);
}

.axc-card__price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* 8. BUTTONS =============================================================== */

.axc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 10px;
	padding: 9px 16px;
	border: 1px solid transparent;
	border-radius: 100px;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.axc-btn--solid {
	background: var(--axc-accent);
	color: var(--axc-accent-fg);
}

.axc-btn--solid:hover,
.axc-btn--solid:focus-visible {
	color: var(--axc-accent-fg);
	filter: brightness(1.08);
}

.axc-btn--outline {
	background: transparent;
	border-color: var(--axc-accent);
	color: var(--axc-accent);
}

.axc-btn--outline:hover,
.axc-btn--outline:focus-visible {
	background: var(--axc-accent);
	color: var(--axc-accent-fg);
}

.axc-btn--soft {
	background: rgba(122, 72, 176, 0.12);
	color: var(--axc-accent);
}

@supports (background: color-mix(in srgb, red 10%, transparent)) {
	.axc-btn--soft {
		background: color-mix(in srgb, var(--axc-accent) 14%, transparent);
	}
}

.axc-btn--soft:hover,
.axc-btn--soft:focus-visible {
	background: var(--axc-accent);
	color: var(--axc-accent-fg);
}

.axc-btn--link {
	padding-inline: 0;
	background: transparent;
	color: var(--axc-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "theme" style deliberately declares almost nothing: the theme's own .button
   rules are meant to win. */
.axc-btn--theme {
	border-radius: inherit;
}

.axc-btn--block {
	display: flex;
	width: 100%;
}

.axc-btn.loading {
	opacity: 0.6;
	pointer-events: none;
}

.axc-btn.added::after {
	content: "✓";
	margin-inline-start: 4px;
}

/* WooCommerce injects a "View cart" link straight after the button. */
.axc-card__foot .added_to_cart {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.8rem;
	color: var(--axc-muted);
}

/* Reveal on hover — never on touch, where there is no hover to reveal with. */
@media (hover: hover) and (pointer: fine) {
	.axc--reveal-btn .axc-card__btn {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.24s ease, transform 0.24s ease;
	}

	.axc--reveal-btn .axc-card__inner:hover .axc-card__btn,
	.axc--reveal-btn .axc-card__btn:focus-visible {
		opacity: 1;
		transform: none;
	}
}

/* 9. ARROWS ================================================================ */

.axc__nav {
	display: inline-grid;
	place-items: center;
	width: var(--axc-nav-size);
	height: var(--axc-nav-size);
	padding: 0;
	border: 1px solid var(--axc-nav-ring);
	border-radius: 100px;
	background: var(--axc-nav-bg);
	color: var(--axc-nav-fg);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	z-index: 3;
}

.axc__nav:hover:not(:disabled) {
	background: var(--axc-accent);
	border-color: var(--axc-accent);
	color: var(--axc-accent-fg);
}

.axc__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.axc__nav[hidden] {
	display: none;
}

.axc--arrowsize-sm { --axc-nav-size: 36px; }
.axc--arrowsize-md { --axc-nav-size: 44px; }
.axc--arrowsize-lg { --axc-nav-size: 54px; }

.axc--arrow-rounded .axc__nav { border-radius: 12px; }
.axc--arrow-square  .axc__nav { border-radius: 0; }

.axc--arrow-bare .axc__nav {
	border-color: transparent;
	background: transparent;
	color: var(--axc-heading);
}

.axc--arrow-bare .axc__nav:hover:not(:disabled) {
	background: transparent;
	color: var(--axc-accent);
	transform: scale(1.15);
}

/* Overlay & outside are absolutely placed against the viewport. --axc-arrow-top
   is written by carousel.js to the vertical centre of the product image, so the
   arrows never drift down over the titles on tall cards. */
.axc--arrows-overlay .axc__nav,
.axc--arrows-outside .axc__nav {
	position: absolute;
	top: var(--axc-arrow-top, 42%);
	transform: translateY(-50%);
	box-shadow: 0 4px 14px rgba(10, 15, 30, 0.12);
}

.axc--arrows-overlay .axc__nav:hover:not(:disabled),
.axc--arrows-outside .axc__nav:hover:not(:disabled) {
	transform: translateY(-50%) scale(1.06);
}

.axc--arrows-overlay .axc__nav--prev { inset-inline-start: 10px; }
.axc--arrows-overlay .axc__nav--next { inset-inline-end: 10px; }

/* The viewport is inset instead of the arrows being pushed out of it — that
   way they can never be clipped by an overflow-hidden ancestor. */
.axc--arrows-outside .axc__viewport { padding-inline: calc(var(--axc-nav-size) + 12px); }
.axc--arrows-outside .axc__nav--prev { inset-inline-start: 0; }
.axc--arrows-outside .axc__nav--next { inset-inline-end: 0; }

.axc__nav--inline {
	position: static;
	transform: none;
}

/* 10. PAGINATION & PROGRESS ================================================ */

.axc__footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 22px;
}

.axc__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-inline: auto;
}

.axc__dots[hidden] {
	display: none;
}

.axc__dots--overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 14px;
	padding: 6px 10px;
	width: fit-content;
	margin-inline: auto;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.86);
	color: #1f2430;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	z-index: 3;
}

.axc--scheme-dark .axc__dots--overlay {
	background: rgba(18, 20, 28, 0.78);
	color: #ffffff;
}

.axc__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: currentColor;
	opacity: 0.28;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.axc__dot:hover {
	opacity: 0.6;
}

.axc__dot.is-active {
	background: var(--axc-accent);
	opacity: 1;
}

/* The one place a width genuinely animates. A stretching pill has to move its
   neighbours to read as one indicator growing rather than a separate bar
   appearing, and scaleX cannot do that: it leaves the original 28px of layout
   behind and squashes the 100px corner radius into an ellipse. Three or four
   9px elements laying out once per page change is the right trade. */
.axc--dots-pills .axc__dot {
	width: 9px;
	border-radius: 100px;
	transition: opacity 0.2s ease, background-color 0.2s ease, width 0.28s ease;
}

.axc--dots-pills .axc__dot.is-active {
	width: 28px;
}

@media (prefers-reduced-motion: reduce) {
	.axc--dots-pills .axc__dot {
		transition: opacity 0.2s ease, background-color 0.2s ease;
	}
}

.axc--dots-bars .axc__dot {
	width: 26px;
	height: 4px;
	border-radius: 2px;
}

.axc--dots-numbers .axc__dot {
	width: auto;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: 8px;
	background: transparent;
	color: var(--axc-muted);
	opacity: 1;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 30px;
}

.axc--dots-numbers .axc__dot.is-active {
	background: var(--axc-accent);
	color: var(--axc-accent-fg);
}

.axc__dot:focus-visible {
	outline: 2px solid var(--axc-accent);
	outline-offset: 3px;
}

.axc__progress {
	position: relative;
	height: 3px;
	margin-top: 18px;
	border-radius: 100px;
	background: currentColor;
	opacity: 0.14;
	overflow: hidden;
}

/* The thumb is full width and scaled down, never resized: its length and
   position are redrawn from the scroll offset on every frame, so width/left
   would put layout on the scroll path. It also carries no transition — an
   eased one would make the indicator lag the content it is reporting on. */
.axc__progress span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 100%;
	border-radius: 100px;
	background: var(--axc-accent);
	opacity: 1;
	transform-origin: left center;
	transform: scaleX(0.2);
}

[dir="rtl"] .axc__progress span {
	transform-origin: right center;
}

/* Screen-reader-only live region; defined here rather than borrowed from the
   theme, because not every theme ships .screen-reader-text. */
.axc__live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.axc-notice {
	margin: 16px 0;
	padding: 12px 16px;
	border: 1px dashed rgba(128, 128, 128, 0.5);
	border-radius: 8px;
	color: #6b7280;
	font-size: 0.875rem;
}

/* 11. RESPONSIVE =========================================================== */

@media (max-width: 1200px) {
	.axc {
		--axc-cols: var(--axc-cols-l);
		--axc-grid: var(--axc-grid-l);
	}
}

@media (max-width: 1024px) {
	.axc {
		--axc-cols: var(--axc-cols-t);
		--axc-grid: var(--axc-grid-t);
		--axc-space: 44px;
	}

	/* Outside arrows would eat a third of a tablet's width. */
	.axc--arrows-outside .axc__viewport { padding-inline: 0; }
	.axc--arrows-outside .axc__nav--prev { inset-inline-start: 8px; }
	.axc--arrows-outside .axc__nav--next { inset-inline-end: 8px; }
}

@media (max-width: 640px) {
	.axc {
		--axc-cols: var(--axc-cols-m);
		--axc-grid: var(--axc-grid-m);
		--axc-nav-size: 38px;
		--axc-space: 34px;
	}

	/* The gap is capped on the track rather than by redefining --axc-gap:
	   that property is set inline per instance, so a rule here could never
	   win — and `--axc-gap: min(var(--axc-gap), …)` would be a self-
	   reference, which makes the whole property invalid rather than smaller. */
	.axc__track {
		gap: min(var(--axc-gap), 16px);
	}

	.axc__head {
		align-items: flex-start;
		margin-bottom: 18px;
	}

	.axc__actions {
		width: 100%;
		justify-content: space-between;
	}

	/* Swiping is the obvious gesture on a phone, and the arrows sit right on
	   top of the product image at this size. */
	.axc--arrows-overlay .axc__nav,
	.axc--arrows-outside .axc__nav {
		display: none;
	}

	.axc-card__title { font-size: 0.9rem; }
	.axc-card__price { font-size: 0.95rem; }
}

/* 12. MOTION, RTL, PRINT =================================================== */

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

	.axc *,
	.axc *::before,
	.axc *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.axc--hover-lift .axc-card__inner:hover {
		transform: none;
	}
}

/* The chevrons are the one thing that must physically flip in RTL — the rest
   of the layout is already logical-property based. */
.axc[dir="rtl"] .axc__nav .axc-icon,
[dir="rtl"] .axc .axc__nav .axc-icon,
[dir="rtl"] .axc .axc__link .axc-icon {
	transform: scaleX(-1);
}

[dir="rtl"] .axc .axc__link:hover .axc-icon {
	transform: scaleX(-1) translateX(3px);
}

@media print {
	.axc__nav,
	.axc__dots,
	.axc__progress,
	.axc__toggle {
		display: none !important;
	}

	.axc__track {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
	}
}