/* ============================================================
   Product Showcase — horizontal product carousel section.
   Header: title (left) | VIEW ALL + arrows (right).
   Track: CSS scroll-snap, no JS carousel lib.
   Last item in carousel: View All card.

   WC renders ul.wc-block-product-template with is-layout-flow
   (block layout → cards stack vertically).
   We override the ul + li directly with !important to force a
   single horizontal flex row at every breakpoint.
   ============================================================ */

/* ── Section ────────────────────────────────────────────────── */
.wpdl-showcase {
	margin-block: 0 !important;
	border-top: 1px solid var(--wp--custom--semantic--color--border--subtle);
}

/* Collapse top padding when showcases are stacked (no bg change). */
.wpdl-showcase + .wpdl-showcase {
	padding-top: 0 !important;
}

/* Restore padding when a bg-coloured section follows a transparent one —
   the bg edge needs breathing room to read as a zone, not a stripe. */
.wpdl-showcase + .wpdl-showcase--has-bg,
.wpdl-showcase--has-bg + .wpdl-showcase {
	padding-top: var(--wp--custom--space--6) !important;
}

.wpdl-showcase > * {
	margin-block: 0;
}

/* ── Header row ─────────────────────────────────────────────── */
.wpdl-showcase__header {
	padding-block-start: var(--wp--custom--space--2);
	margin-block: 0 var(--wp--custom--space--3);
}

.wpdl-showcase__header > * {
	margin-block: 0;
}

/* ── Header left: gold eyebrow + title ──────────────────────── */
.wpdl-showcase__header-left {
	gap: var(--wp--custom--space--2); /* eyebrow → title 8 (Figma) */
}

.wpdl-showcase__header-left > * {
	margin-block: 0;
}

/* Gold eyebrow (Figma #c0912e, fz12, uppercase, letterspaced) */
.wpdl-showcase__eyebrow {
	margin: 0;
	color: var(--wp--custom--semantic--color--accent--secondary);
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--typography--size--sm, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wpdl-showcase__title.wp-block-heading {
	font-family: var(--wp--custom--font--family--display);
	font-size: var(--wp--custom--font--size--xl);
	font-weight: var(--wp--custom--font--weight--medium);
	color: var(--wp--custom--semantic--color--text--primary);
	letter-spacing: 0.01em;
	text-transform: uppercase; /* Figma titles are uppercase */
}

/* ── Header right: VIEW ALL + arrows ────────────────────────── */
.wpdl-showcase__header-right {
	gap: var(--wp--custom--space--4);
	align-items: flex-end;
	padding-top: var(--wp--custom--space--1);
}

.wpdl-showcase__header-right > * {
	margin-block: 0;
}

.wpdl-showcase__view-all {
	margin: 0;
}

.wpdl-showcase__view-all a {
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--font--size--xs);
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: underline;
	text-underline-offset: 0.1875rem;
	text-decoration-thickness: 0.0938rem;
	white-space: nowrap;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-showcase__view-all a:hover {
	color: var(--wp--custom--semantic--color--brand--strong);
}

/* ── Arrows ─────────────────────────────────────────────────── */
.wpdl-showcase__arrows {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--2);
}

.wpdl-showcase__arrow {
	width: 1.875rem; /* 30px — desktop-only control (hidden on touch/mobile below) */
	height: 1.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
	border-radius: var(--wp--custom--radius--full); /* circle */
	cursor: pointer;
	font-size: 0.875rem;
	line-height: 1;
	color: var(--wp--custom--semantic--color--text--primary);
	transition:
		border-color     var(--wp--custom--duration--fast) var(--wp--custom--easing--default),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--default),
		color            var(--wp--custom--duration--fast) var(--wp--custom--easing--default);
	padding: 0;
}

.wpdl-showcase__arrow:hover:not([aria-disabled="true"]) {
	border-color: var(--wp--custom--semantic--color--brand--primary);
	background-color: var(--wp--custom--semantic--color--brand--primary);
	color: var(--wp--custom--semantic--color--text--on-brand);
}

.wpdl-showcase__arrow[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

/* ── Track: scroll container — flex row ─────────────────────── */
.wpdl-showcase__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow: auto hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	gap: var(--wp--custom--space--4);
}

.wpdl-showcase__track::-webkit-scrollbar {
	display: none;
}

.wpdl-showcase__track > * {
	margin-block: 0;
}

/* ── WC collection wrapper: flex item, don't shrink ─────────── */
.wpdl-showcase__track .wp-block-woocommerce-product-collection,
.wpdl-showcase__track .wpdl-showcase__collection {
	flex: 0 0 auto;
	margin-block: 0;
}

/* ── WC product-template UL: force single horizontal row ────── */

/* WC renders: ul.wc-block-product-template.is-layout-flow       */

/* is-layout-flow gives block display → cards stack vertically.  */

/* !important needed: WC stylesheet loads after ours.            */
.wpdl-showcase__track .wc-block-product-template {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: stretch;
	gap: var(--wp--custom--space--4) !important;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* ── Each product LI: fixed card width, scroll snap target ──── */

/* WC sets li { width: 100% } + columns-N overrides → !important */
.wpdl-showcase__track .wc-block-product-template > li {
	flex: 0 0 12.5rem !important;
	width: 12.5rem !important;
	max-width: none !important;
	margin-inline: 0 !important;
	scroll-snap-align: start;
	list-style: none;
}

/* ── Product card inside li ─────────────────────────────────── */
.wpdl-showcase__track .wpdl-product-card {
	width: 100%;
	height: 100%;
	margin-block: 0;
}

/* ── View All card — last item in carousel ──────────────────── */

/* Layout is "default" (is-layout-flow) in PHP so WP doesn't    */

/* generate a unique container class that could override center. */
.wpdl-showcase__track .wpdl-showcase__view-all-card {
	flex: 0 0 12.5rem;
	max-width: 12.5rem;
	scroll-snap-align: start;
	align-self: stretch;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.wpdl-showcase__track .wpdl-showcase__view-all-card > * {
	margin-block: 0 !important;
	margin-inline: 0 !important;
	max-width: none !important;
}

/* ── Grid / related variant: centred header, wrapping non-scroll grid ── */
.wpdl-showcase--grid .wpdl-showcase__header {
	justify-content: center;
	text-align: center;
	margin-block-end: var(--wp--custom--space--6);
}

.wpdl-showcase--grid .wpdl-showcase__header-left {
	align-items: center;
	text-align: center;
}

.wpdl-showcase--grid .wpdl-showcase__track {
	flex-wrap: wrap;
	justify-content: center;
	overflow: visible;
	scroll-snap-type: none;
}

.wpdl-showcase--grid .wpdl-showcase__track .wp-block-woocommerce-product-collection,
.wpdl-showcase--grid .wpdl-showcase__track .wpdl-showcase__collection {
	flex: 1 1 auto;
	width: 100%;
}

.wpdl-showcase--grid .wpdl-showcase__track .wc-block-product-template {
	flex-wrap: wrap !important;
	justify-content: center;
}

.wpdl-showcase__view-all-cta {
	margin: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-showcase__view-all-cta a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--custom--space--3);
	font-family: var(--wp--custom--font--family--body);
	font-size: var(--wp--custom--font--size--xs);
	font-weight: var(--wp--custom--font--weight--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--primary);
	text-decoration: none;
	transition: color 200ms ease;
}

.wpdl-showcase__view-all-cta a::after {
	content: '\2192';
	display: block;
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1;
}

.wpdl-showcase__view-all-cta a:hover {
	color: var(--wp--custom--semantic--color--brand--strong);
}

/* ── Tablet 768 ─────────────────────────────────────────────── */
@media (width <= 47.9375rem) {
	.wpdl-showcase__track {
		gap: var(--wp--custom--space--3);
	}

	.wpdl-showcase__track .wc-block-product-template {
		gap: var(--wp--custom--space--3) !important;
	}

	.wpdl-showcase__track .wc-block-product-template > li {
		flex: 0 0 10.5rem !important;
		width: 10.5rem !important;
	}

	.wpdl-showcase__track .wpdl-showcase__view-all-card {
		flex: 0 0 10.5rem;
		max-width: 10.5rem;
	}
}

/* ── Mobile 375 ─────────────────────────────────────────────── */
@media (width <= 29.9375rem) {
	/* Arrows hidden — native swipe replaces them */
	.wpdl-showcase__arrow {
		display: none;
	}

	.wpdl-showcase__header {
		margin-block: 0 var(--wp--custom--space--4);
	}

	.wpdl-showcase__track {
		gap: var(--wp--custom--space--3);
	}

	.wpdl-showcase__track .wc-block-product-template {
		gap: var(--wp--custom--space--3) !important;
	}

	.wpdl-showcase__track .wc-block-product-template > li {
		flex: 0 0 11rem !important;
		width: 11rem !important;
	}

	.wpdl-showcase__track .wpdl-showcase__view-all-card {
		flex: 0 0 11rem;
		max-width: 11rem;
	}
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.wpdl-showcase__track {
		scroll-behavior: auto;
	}
}

/* ── Section-level product badge ────────────────────────────── */

/* data-badge-type on .wpdl-showcase → ::before on every card.  */

/* Variants: new | hot | best-seller | limited | sale           */

/* On Sale section: leave badge_type empty — WC showSaleBadge   */

/* handles per-product badge automatically.                     */
.wpdl-showcase[data-badge-type] .wpdl-product-card {
	position: relative;
}

.wpdl-showcase[data-badge-type] .wpdl-product-card::before {
	position: absolute;
	top: var(--wp--custom--space--3);
	inset-inline-start: var(--wp--custom--space--3);
	z-index: 2;
	padding: 0.3125rem 0.6875rem;
	background-color: var(--wp--custom--semantic--color--accent--primary);
	color: var(--wp--custom--semantic--color--badge--text);
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border-radius: var(--wp--custom--radius--full);
	box-shadow: var(--wp--custom--shadow--sm);
	line-height: 1.2;
	pointer-events: none;
	white-space: nowrap;
}

/* stylelint-disable declaration-no-important */
.wpdl-showcase[data-badge-type="new"] .wpdl-product-card::before         { content: 'NEW'; }

.wpdl-showcase[data-badge-type="hot"] .wpdl-product-card::before         { content: 'HOT'; }

.wpdl-showcase[data-badge-type="best-seller"] .wpdl-product-card::before { content: 'BEST SELLER'; }

.wpdl-showcase[data-badge-type="limited"] .wpdl-product-card::before     { content: 'LIMITED'; }

.wpdl-showcase[data-badge-type="sale"] .wpdl-product-card::before        { content: 'SALE'; }

/* stylelint-enable declaration-no-important */

/* ── WC sale badge override — flush corner ──────────────────── */

/* WC renders .wc-block-components-product-badge inside image.  */
.wpdl-product-card .wc-block-components-product-badge {
	top: var(--wp--custom--space--3) !important;
	inset-inline: var(--wp--custom--space--3) auto !important;
	border-radius: var(--wp--custom--radius--full) !important;
	padding: 0.3125rem 0.6875rem;
	background-color: var(--wp--custom--semantic--color--accent--primary) !important;
	color: var(--wp--custom--semantic--color--badge--text) !important;
	box-shadow: var(--wp--custom--shadow--sm);
	font-family: var(--wp--custom--font--family--body) !important;
	font-size: 0.625rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	line-height: 1.2 !important;
}

/* ── CTA toggle: Cart vs Contact ────────────────────────────── */
.wpdl-product-card__cta--contact {
	display: none;
}

.wpdl-showcase[data-cta-type="contact"] .wpdl-product-card__cta--cart {
	display: none !important;
}

.wpdl-showcase[data-cta-type="contact"] .wpdl-product-card__cta--contact {
	display: flex;
	align-items: center;
	min-block-size: 2.75rem;
	margin: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-product-card__cta--contact a {
	font-family: var(--wp--custom--font--family--body);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--custom--semantic--color--text--muted);
	text-decoration: none;
	transition:
		color     var(--wp--custom--duration--base) var(--wp--custom--easing--default),
		translate var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* stylelint-disable-next-line no-descending-specificity */
.wpdl-product-card:is(:hover, :focus-within) .wpdl-product-card__cta--contact a {
	color: var(--wp--custom--semantic--color--accent--primary);
	translate: var(--wp--custom--space--1) 0;
}

/* ── Card surface (showcase-only) ───────────────────────────────
   Override card.css defaults — descendant selector wins (0,3,0)
   vs card.css (0,2,0). All changes scoped to .wpdl-showcase.    */

/* Figma best-sellers card = BORDERLESS: rounded image on cream, name + price
   below, no card outline/shadow. Only the image is a surface. */
.wpdl-showcase .wpdl-product-card.wp-block-group {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
	gap: var(--wp--custom--space--4); /* image → details 16 */
}

/* Media wrapper is the only surface — rounded r=8 (radius.sm), cream bg,
   clips the image + holds the badge/heart/hover-cart overlays. */
.wpdl-showcase .wpdl-product-card__media {
	position: relative;
	border-radius: var(--wp--custom--radius--sm); /* 8 measured */
	overflow: hidden;
	background: var(--wp--custom--semantic--color--surface--secondary);
	margin-block: 0;
}

/* Decorative wishlist heart (Figma: 32px white circle, top-right).
   Visual placeholder — a functional wishlist needs a plugin; kept aria-silent. */
.wpdl-showcase .wpdl-product-card__media::after {
	content: "\2661"; /* ♡ */
	position: absolute;
	inset-block-start: var(--wp--custom--space--3);
	inset-inline-end: var(--wp--custom--space--3);
	inline-size: 2rem;
	block-size: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--custom--semantic--color--surface--primary);
	color: var(--wp--custom--semantic--color--text--primary);
	font-size: 1rem;
	line-height: 1;
	box-shadow: var(--wp--custom--shadow--sm);
	pointer-events: none;
	z-index: 3;
}

/* Hover: gentle image zoom (no card lift — borderless) */
.wpdl-showcase .wpdl-product-card:is(:hover, :focus-within).wp-block-group {
	transform: none;
}

/* Image: rounded via media clip; remove own radius/margin */
.wpdl-showcase .wpdl-product-card__img.wp-block-woocommerce-product-image {
	border-radius: 0;
	margin-block-end: 0;
}

/* Slower, deeper zoom than the grid card — a showcase is the hero shelf,
   the extra dwell reads as premium. Overrides card.css (base/1.03). */
.wpdl-showcase .wpdl-product-card__img.wp-block-woocommerce-product-image img {
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--easing--default);
}

.wpdl-showcase .wpdl-product-card:is(:hover, :focus-within) .wpdl-product-card__img.wp-block-woocommerce-product-image img {
	transform: scale(1.06);
}

/* Borderless: name directly below image, no card padding. Ink, fz ~15,
   details gap 6 (space between name and price). */
.wpdl-showcase .wpdl-product-card .wpdl-product-card__title {
	padding-inline: 0;
	padding-block-start: 0;
	margin-block: 0 var(--wp--custom--space--1); /* ~6 details gap */
	font-size: var(--wp--custom--typography--size--base, 0.9375rem);
	font-weight: 500;
	color: var(--wp--custom--semantic--color--text--primary);
	transition: color var(--wp--custom--duration--fast) var(--wp--custom--easing--default);
}

.wpdl-showcase .wpdl-product-card:is(:hover, :focus-within) .wpdl-product-card__title {
	color: var(--wp--custom--semantic--color--brand--primary);
}

/* Price — GOLD (Figma #c0912e = accent.secondary), fz ~14, no card padding. */
.wpdl-showcase .wpdl-product-card .wpdl-product-card__price {
	padding-inline: 0;
	color: var(--wp--custom--semantic--color--accent--secondary);
	font-weight: 600;
	font-size: var(--wp--custom--typography--size--sm, 0.875rem);
}

.wpdl-showcase .wpdl-product-card .wpdl-product-card__cta--cart,
.wpdl-showcase .wpdl-product-card .wpdl-product-card__cta--contact {
	padding-inline: var(--wp--custom--space--3);
	padding-block-end: var(--wp--custom--space--2);
	margin-block-start: auto;
}

/* Reduced motion: disable lift transition */
@media (prefers-reduced-motion: reduce) {
	.wpdl-showcase .wpdl-product-card.wp-block-group,
	.wpdl-showcase .wpdl-product-card__img.wp-block-woocommerce-product-image img {
		transition: none;
	}

	.wpdl-showcase .wpdl-product-card:is(:hover, :focus-within).wp-block-group {
		transform: none;
		box-shadow: var(--wp--custom--semantic--shadow--raised);
	}

	.wpdl-showcase .wpdl-product-card:is(:hover, :focus-within) .wpdl-product-card__img.wp-block-woocommerce-product-image img {
		transform: none;
	}
}