/**
 * Ashekman product carousel.
 * Paired with inc/product-carousel.php and assets/js/product-carousel.js.
 *
 * Design notes: square corners and heavy uppercase type to match the brand's
 * street/stencil identity. Palette follows the Porto theme options already set
 * on this site - black skin colour, #e36159 secondary.
 */

.ak-carousel {
	--ak-black: #0a0a0a;
	--ak-white: #fff;
	--ak-accent: #e36159;
	--ak-muted: #8a8a8a;
	--ak-line: #e5e5e5;
	--ak-shade: #f4f4f4;
	--ak-gap: 20px;

	/*
	 * The shortcode sets --ak-cols-desktop inline. Inline styles outrank media
	 * queries, so it must NOT set --ak-cols directly - otherwise the responsive
	 * overrides below never take effect.
	 */
	--ak-cols: var(--ak-cols-desktop, 4);

	box-sizing: border-box;
	margin: 0 auto;
	padding: 10px 0 40px;
	max-width: 100%;
	color: var(--ak-black);
	font-family: inherit;
}

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

/* ---------------------------------------------------------------- header -- */

.ak-carousel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ak-black);
}

.ak-carousel__title {
	position: relative;
	margin: 0;
	color: var(--ak-black);
	font-size: clamp(22px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* Short accent rule sitting on the header underline. */
.ak-carousel__title::after {
	content: "";
	position: absolute;
	bottom: -16px;
	inset-inline-start: 0;
	width: 56px;
	height: 4px;
	background: var(--ak-accent);
}

.ak-carousel__subtitle {
	margin: 8px 0 0;
	color: var(--ak-muted);
	font-size: 13px;
	letter-spacing: 0.02em;
}

.ak-carousel__tools {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 18px;
}

.ak-carousel__viewall {
	position: relative;
	color: var(--ak-black);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.ak-carousel__viewall::after {
	content: "";
	position: absolute;
	bottom: -4px;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: inline-start;
	transition: transform 0.25s ease;
}

.ak-carousel__viewall:hover {
	color: var(--ak-accent);
}

.ak-carousel__viewall:hover::after {
	transform: scaleX(1);
}

/* ------------------------------------------------------------------ nav -- */

.ak-carousel__nav {
	display: flex;
	gap: 6px;
}

.ak-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	width: 38px;
	height: 38px;
	border: 1.5px solid var(--ak-black);
	border-radius: 0;
	background: transparent;
	color: var(--ak-black);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ak-nav svg {
	width: 17px;
	height: 17px;
}

.ak-nav:hover:not(:disabled) {
	background: var(--ak-black);
	color: var(--ak-white);
}

.ak-nav:disabled {
	opacity: 0.25;
	cursor: default;
}

.ak-nav:focus-visible {
	outline: 2px solid var(--ak-accent);
	outline-offset: 2px;
}

/* [dir=rtl] flips the whole track, so flip the chevrons back. */
[dir="rtl"] .ak-nav svg {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------- viewport -- */

.ak-carousel__viewport {
	position: relative;
	margin-inline: calc(var(--ak-gap) / -2);
}

.ak-carousel__track {
	display: flex;
	gap: 0;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	list-style: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.ak-carousel__track::-webkit-scrollbar {
	display: none;
}

/* Grab-to-drag state applied by the JS. */
.ak-carousel__track.is-dragging {
	scroll-behavior: auto;
	scroll-snap-type: none;
	cursor: grabbing;
}

.ak-carousel__track.is-dragging a {
	pointer-events: none;
}

.ak-carousel__slide {
	flex: 0 0 calc(100% / var(--ak-cols));
	padding-inline: calc(var(--ak-gap) / 2);
	min-width: 0;
	scroll-snap-align: start;
}

/* ----------------------------------------------------------------- card -- */

.ak-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ak-card__media {
	position: relative;
	overflow: hidden;
	background: var(--ak-shade);
	aspect-ratio: 1 / 1;
}

.ak-card__link {
	display: block;
	width: 100%;
	height: 100%;
}

.ak-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ak-card__img--hover {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	opacity: 0;
}

.ak-card:hover .ak-card__img--primary {
	transform: scale(1.06);
}

/* Only swap when a gallery image actually exists (--dual set by PHP). */
.ak-card:hover .ak-card__media--dual .ak-card__img--hover {
	opacity: 1;
	transform: scale(1.06);
}

.ak-card:hover .ak-card__media--dual .ak-card__img--primary {
	opacity: 0;
}

/* --------------------------------------------------------------- badges -- */

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

.ak-badge {
	display: inline-block;
	padding: 5px 9px;
	font-size: 10px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ak-badge--sale {
	background: var(--ak-accent);
	color: var(--ak-white);
}

.ak-badge--oos {
	background: var(--ak-black);
	color: var(--ak-white);
}

.ak-card--oos .ak-card__img {
	filter: grayscale(1);
	opacity: 0.65;
}

/* ------------------------------------------------------------ cart bar -- */

.ak-card__action {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 3;
	transform: translateY(101%);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ak-card:hover .ak-card__action,
.ak-card:focus-within .ak-card__action {
	transform: translateY(0);
}

/*
 * Porto wraps the loop add-to-cart in .add-links-wrap > .add-links and appends
 * its own .quickview trigger. Flatten the wrappers and lay the bar out as
 * [ add to cart | quick view ].
 */
.ak-carousel .ak-card__action .add-links-wrap,
.ak-carousel .ak-card__action .add-links {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	inset: auto;
	position: static;
}

.ak-carousel .ak-card__action .add-links {
	display: flex;
	align-items: stretch;
}

.ak-carousel .ak-card__action .add-links > a.button,
.ak-carousel .ak-card__action .add-links > a.added_to_cart {
	flex: 1 1 auto;
	min-width: 0;
}

/* Porto's screen-reader helper for variable products - keep it out of flow. */
.ak-carousel .ak-card__action .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.ak-carousel .ak-card__action .quickview {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 14px 12px;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s ease;
}

.ak-carousel .ak-card__action .quickview:hover {
	background: var(--ak-accent);
}

/* Override Porto/Woo loop button styling inside the bar. */
.ak-carousel .ak-card__action a.button,
.ak-carousel .ak-card__action a.added_to_cart {
	display: block;
	margin: 0;
	padding: 14px 10px;
	width: 100%;
	border: 0;
	border-radius: 0;
	background: var(--ak-black);
	color: var(--ak-white);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.2s ease;
}

.ak-carousel .ak-card__action a.button:hover {
	background: var(--ak-accent);
	color: var(--ak-white);
}

/* "View cart" link Woo appends after an AJAX add. */
.ak-carousel .ak-card__action a.added_to_cart {
	background: var(--ak-accent);
}

.ak-carousel .ak-card__action a.button.loading {
	opacity: 0.75;
	pointer-events: none;
}

.ak-carousel .ak-card__action a.button.loading::after {
	content: "";
	display: inline-block;
	margin-inline-start: 8px;
	width: 11px;
	height: 11px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	vertical-align: -1px;
	animation: ak-spin 0.7s linear infinite;
}

@keyframes ak-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ----------------------------------------------------------------- body -- */

.ak-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 16px 2px 0;
}

.ak-card__cat {
	color: var(--ak-muted);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ak-card__title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ak-card__title a {
	display: -webkit-box;
	overflow: hidden;
	color: var(--ak-black);
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color 0.2s ease;
}

.ak-card__title a:hover {
	color: var(--ak-accent);
}

.ak-card__price {
	margin-top: auto;
	padding-top: 4px;
	color: var(--ak-black);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.ak-carousel .ak-card__price del {
	margin-inline-end: 6px;
	color: var(--ak-muted);
	font-weight: 500;
	opacity: 1;
}

.ak-carousel .ak-card__price ins {
	color: var(--ak-accent);
	text-decoration: none;
}

/* Porto sometimes injects its own currency markup - keep it inline. */
.ak-carousel .ak-card__price .woocommerce-Price-amount {
	white-space: nowrap;
}

/* ------------------------------------------------------------- progress -- */

.ak-carousel__progress {
	position: relative;
	margin-top: 26px;
	width: 100%;
	height: 2px;
	background: var(--ak-line);
}

.ak-carousel__bar {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	display: block;
	width: 20%;
	height: 100%;
	background: var(--ak-black);
	transition: transform 0.15s linear, width 0.15s linear;
}

/* ---------------------------------------------------------- breakpoints -- */

@media (max-width: 1199px) {
	.ak-carousel {
		--ak-cols: 3;
	}
}

@media (max-width: 991px) {
	.ak-carousel {
		--ak-cols: 2.4;
	}
}

@media (max-width: 767px) {
	.ak-carousel {
		--ak-cols: 1.6;
		--ak-gap: 14px;
	}

	.ak-carousel__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	/*
	 * Left-aligned rather than space-between: the theme's mobile layout is
	 * slightly wider than the viewport site-wide, and space-between would push
	 * the arrows off the right edge with it.
	 */
	.ak-carousel__tools {
		justify-content: flex-start;
		gap: 22px;
		width: 100%;
	}

	/*
	 * Touch devices have no hover, so the cart bar would never appear. Keep it
	 * absolutely positioned (going static gets it clipped by the media box's
	 * fixed aspect ratio + overflow:hidden) and just leave it slid open.
	 */
	.ak-card__action {
		transform: translateY(0);
	}

	.ak-carousel .ak-card__action a.button {
		padding: 12px 8px;
		font-size: 10px;
	}

	/* Quick View is a hover/desktop affordance - drop it on touch. */
	.ak-carousel .ak-card__action .quickview {
		display: none;
	}
}

@media (max-width: 480px) {
	.ak-carousel {
		--ak-cols: 1.25;
	}
}

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

	.ak-carousel *,
	.ak-carousel *::before,
	.ak-carousel *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}