/*
 * WC Product Slider: front end.
 * Everything is scoped to .wcps so theme list, heading and link styles do
 * not leak in. Values come from CSS variables set per slider (inline style).
 * Breakpoints use container queries on the slider itself:
 *   desktop >= 990px, tablet 600-989px, mobile < 600px.
 */

.wcps {
	--wcps-gap: 24px;
	--wcps-radius: 10px;
	--wcps-ratio: 4 / 5;
	--wcps-pv-d: 5.4;
	--wcps-pv-t: 2.5;
	--wcps-pv-m: 1.55;
	--wcps-title-size: 17px;
	--wcps-title: #5b2250;
	--wcps-price: #999999;
	--wcps-sale: #5b2250;
	--wcps-badge-bg: #5b2250;
	--wcps-badge-fg: #ffffff;
	--wcps-maxw: 1240px; /* content width: the slider never grows wider */
	--wcps-bl: 0px; /* distance to the left screen edge, set by the script */
	--wcps-br: 0px; /* distance to the right screen edge, set by the script */
	container-type: inline-size;
	position: relative;
	clear: both;
	max-width: var(--wcps-maxw);
	margin: 0 auto 40px;
	padding: 0;
	border: 0;
}

.wcps-inner {
	--wcps-pv: var(--wcps-pv-d);
	--wcps-g: var(--wcps-gap);
	--wcps-fs: var(--wcps-title-size);
}

@container (max-width: 989px) {
	.wcps-inner {
		--wcps-pv: var(--wcps-pv-t);
		--wcps-g: min(var(--wcps-gap), 18px);
	}
}

@container (max-width: 599px) {
	.wcps-inner {
		--wcps-pv: var(--wcps-pv-m);
		--wcps-g: min(var(--wcps-gap), 12px);
		--wcps-fs: max(13px, calc(var(--wcps-title-size) - 2px));
	}
}

/* ---------- Heading row ---------- */

.wcps .wcps-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 24px;
}

.wcps .wcps-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.wcps .wcps-eyebrow {
	margin: 0 0 8px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wcps-title);
}

.wcps .wcps-heading {
	margin: 0;
	padding: 0;
	font-size: clamp(22px, 2.6cqw, 32px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wcps-title);
}

.wcps .wcps-viewall {
	flex: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--wcps-title);
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

/* ---------- Track ---------- */

.wcps .wcps-track {
	position: relative;
	display: flex;
	gap: var(--wcps-g);
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.wcps .wcps-track::-webkit-scrollbar {
	display: none;
}

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

.wcps.is-static .wcps-track {
	cursor: auto;
}

/* Card width comes from the slider's content width (100cqw), so every layout,
   width mode and column (D's rail) gives the same card size. */
.wcps .wcps-card {
	flex: 0 0 calc((100cqw - var(--wcps-g) * (var(--wcps-pv) - 1)) / var(--wcps-pv));
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
	background: none;
}

.wcps .wcps-card::before,
.wcps .wcps-card::marker {
	content: none;
}

/* ---------- Width ---------- */

/*
 * Auto width (default): everything stays inside the slider's content width.
 * Full width: the track runs to both screen edges while the first card stays
 * in line with the content. Cards are always sized from the content width
 * (the slider itself), never from the screen, so they keep the same size.
 */
.wcps--full .wcps-track {
	margin-left: calc(var(--wcps-bl) * -1);
	margin-right: calc(var(--wcps-br) * -1);
	padding-left: var(--wcps-bl);
	padding-right: var(--wcps-br);
	scroll-padding-left: var(--wcps-bl);
	scroll-padding-right: var(--wcps-br);
}

/* Continuous movement, full width: fills the screen with no inner padding. */
.wcps--full.wcps--move-continuous .wcps-track {
	padding-left: 0;
	padding-right: 0;
	scroll-padding-left: 0;
	scroll-padding-right: 0;
}

/* D with its intro column, full width: the rail runs to the right edge only. */
@container (min-width: 990px) {
	.wcps--full .wcps-rail .wcps-track {
		margin-left: 0;
		padding-left: 0;
		scroll-padding-left: 0;
	}
}

/* Continuous movement (C's usual movement): no snapping. */
.wcps--move-continuous .wcps-track {
	scroll-snap-type: none;
}

.wcps--move-continuous .wcps-card {
	scroll-snap-align: none;
}

/* While a step animates, snapping would pull the track back to a card. */
.wcps.is-animating .wcps-track {
	scroll-snap-type: none;
	scroll-behavior: auto;
}

/* ---------- Layout D: intro + rail ---------- */

.wcps .wcps-split {
	display: grid;
	grid-template-columns: minmax(220px, 0.85fr) 2.6fr;
	gap: 44px;
	align-items: center;
}

.wcps .wcps-rail {
	min-width: 0;
}

.wcps .wcps-intro .wcps-heading {
	margin-bottom: 12px;
	font-size: clamp(24px, 3cqw, 36px);
}

.wcps .wcps-desc {
	margin: 0 0 22px;
	padding: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wcps-title);
	opacity: 0.8;
}

.wcps .wcps-button {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--wcps-title);
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.wcps .wcps-button:hover {
	opacity: 0.9;
	color: #ffffff;
}

@container (max-width: 989px) {
	.wcps .wcps-split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ---------- Card ---------- */

.wcps .wcps-media {
	position: relative;
	aspect-ratio: var(--wcps-ratio);
	overflow: hidden;
	border-radius: var(--wcps-radius);
	background: #f3f0f4;
	isolation: isolate;
}

.wcps .wcps-media-link {
	display: block;
	width: 100%;
	height: 100%;
}

.wcps .wcps-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;
}

.wcps .wcps-img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.wcps .wcps-body {
	padding-top: 18px;
}

.wcps .wcps-title {
	display: -webkit-box;
	margin: 0 0 6px;
	padding: 0;
	overflow: hidden;
	font-size: var(--wcps-fs);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--wcps-title);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.wcps .wcps-title a {
	color: inherit;
	text-decoration: none;
}

.wcps .wcps-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wcps .wcps-price {
	margin: 0;
	font-size: var(--wcps-fs);
	line-height: 1.4;
	color: var(--wcps-price);
}

.wcps .wcps-price .amount,
.wcps .wcps-price bdi {
	color: inherit;
	font-weight: inherit;
}

.wcps .wcps-price del {
	margin-right: 5px;
	color: var(--wcps-price);
	font-size: inherit;
	opacity: 1;
	text-decoration: line-through;
}

.wcps .wcps-price ins {
	background: none;
	color: var(--wcps-price);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.wcps .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@container (max-width: 599px) {
	.wcps .wcps-body {
		padding-top: 12px;
	}
}

/* Card style 2 and 3: Shopify sale treatment. */
.wcps--card-2 .wcps-price ins,
.wcps--card-3 .wcps-price ins {
	color: var(--wcps-sale);
	font-weight: 700;
	text-decoration: none;
}

.wcps--card-2 .wcps-price del,
.wcps--card-3 .wcps-price del {
	font-size: 0.88em;
}

@media (hover: hover) {
	.wcps--card-2 .wcps-media:hover .wcps-img,
	.wcps--card-3 .wcps-media:hover .wcps-img {
		transform: scale(1.045);
	}

	.wcps--hover-img .wcps-media:hover .wcps-img--alt {
		opacity: 1;
	}
}

/* ---------- Badge ---------- */

.wcps .wcps-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - 20px);
	min-height: 24px;
	padding: 3px 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wcps-badge-bg);
	color: var(--wcps-badge-fg);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}

.wcps .wcps-badge--soldout {
	background: #ffffff;
	color: #3d1636;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.wcps--badge-top-left .wcps-badge { top: 10px; left: 10px; }
.wcps--badge-top-right .wcps-badge { top: 10px; right: 10px; }
.wcps--badge-bottom-left .wcps-badge { bottom: 10px; left: 10px; }
.wcps--badge-bottom-right .wcps-badge { bottom: 10px; right: 10px; }

/* The quick add button sits at the bottom, so bottom badges move up. */
.wcps--card-3.wcps--badge-bottom-left .wcps-badge,
.wcps--card-3.wcps--badge-bottom-right .wcps-badge {
	bottom: 60px;
}

.wcps .is-soldout .wcps-img {
	opacity: 0.55;
}

/* ---------- Quick add (card style 3) ---------- */

.wcps .wcps-quick {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	z-index: 3;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 42px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: #2b1428;
	box-shadow: 0 6px 18px rgba(36, 22, 31, 0.18);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.wcps--card-3 .wcps-quick {
	display: flex;
}

.wcps .wcps-quick:hover,
.wcps .wcps-quick:focus-visible {
	background: var(--wcps-title);
	color: #ffffff;
}

.wcps .wcps-quick-icon {
	display: none;
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
}

.wcps .wcps-quick.loading {
	opacity: 0.7;
	pointer-events: none;
}

.wcps .wcps-quick.added .wcps-quick-label::after {
	content: " \2713";
}

.wcps .added_to_cart {
	display: none !important;
}

@media (hover: hover) {
	.wcps--card-3 .wcps-quick {
		opacity: 0;
		transform: translateY(10px);
	}

	.wcps--card-3 .wcps-media:hover .wcps-quick,
	.wcps--card-3 .wcps-quick:focus-visible,
	.wcps--card-3 .wcps-quick.loading,
	.wcps--card-3 .wcps-quick.added {
		opacity: 1;
		transform: none;
	}
}

@container (max-width: 599px) {
	.wcps--card-3 .wcps-quick {
		left: auto;
		width: 38px;
		height: 38px;
		padding: 0;
		border-radius: 50%;
		opacity: 1;
		transform: none;
	}

	.wcps--card-3 .wcps-quick-label {
		display: none;
	}

	.wcps--card-3 .wcps-quick-icon {
		display: block;
	}

	.wcps--card-3.wcps--badge-bottom-left .wcps-badge,
	.wcps--card-3.wcps--badge-bottom-right .wcps-badge {
		bottom: 56px;
	}
}

/* ---------- Progress line ---------- */

.wcps .wcps-progress {
	position: relative;
	height: 2px;
	margin-top: 28px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.08);
}

.wcps .wcps-progress-bar {
	display: block;
	width: 30%;
	height: 100%;
	border-radius: inherit;
	background: var(--wcps-title);
	transition: transform 0.12s linear;
}

.wcps.is-static .wcps-progress {
	display: none;
}

/* ---------- Admin preview tag and notices ---------- */

.wcps .wcps-preview-tag,
.wcps-notice {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 12px;
	padding: 5px 12px;
	border-radius: 999px;
	background: #fcf3d6;
	color: #6b4e00;
	font: 600 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wcps .wcps-preview-tag span {
	color: #dba617;
}

.wcps-preview-page {
	max-width: 1240px;
	margin: 48px auto;
	padding: 0 20px;
}

/* ---------- Focus and motion ---------- */

.wcps a:focus-visible {
	outline: 2px solid var(--wcps-title);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.wcps .wcps-img,
	.wcps .wcps-quick,
	.wcps .wcps-progress-bar {
		transition: none;
	}

	.wcps .wcps-track {
		scroll-behavior: auto;
	}
}