/**
 * Category Showcase block — .espt-block-category-showcase
 *
 * A category banner (six designs) beside a scroll-snap slider of that
 * category's products. The cards are the theme's own shop cards
 * (ul.products > li.espt-pc …), so this file adds the section shell —
 * banner, heading row, track, arrows, dots — plus the per-block card
 * overrides (image shape, hover, radius, alignment, colours).
 *
 * Numeric vars from the spec: --banner-width --gap --banner-h --per-view
 * --card-gap --reveal-dur --sec-pad --shade-strength --title-size
 * --heading-size. Colour vars (emitted only when picked): --sec-bg --shade
 * --kicker-color --title-color --desc-color --count-color --btn-bg
 * --btn-color --heading-color --accent --card-bg --card-ink.
 *
 * Root classes: is-banner-design-*
 * is-image-position-* is-stack-on-* is-hide-banner-{desktop|tablet|mobile}
 * is-arrows-pos-* is-dots/no-dots is-peek/no-peek
 * is-reveal-* is-card-ratio-* is-card-hover-* is-card-lift/no-card-lift
 * is-text-align-* is-btn-mode-* is-card-radius-*. On the inner .espt-cs the
 * render adds is-design-{the card design actually used} plus has-card-bg /
 * has-card-ink when those colours were picked.
 *
 * Mobile-first: base ≤767px, then 768px (tablet), then 1024px (desktop).
 */

.espt-block-category-showcase {
	--cs-accent: var(--accent, var(--bd-primary));
	--cs-line: var(--espt-border, var(--bd-line));
	--cs-tool-bg: var(--espt-content-bg, #fff);
	--cs-shade: var(--shade, #0f172a);
	max-width: 100%;
}

.espt-block-category-showcase .espt-cs {
	background: var(--sec-bg, transparent);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	gap: var(--gap, 18px);
	max-width: 100%;
	padding: var(--sec-pad, 0px);
	position: relative;
}

/* --------------------------------------------------------- the banner */

.espt-block-category-showcase .espt-cs-banner {
	border-radius: var(--bd-radius, 16px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--banner-h, 260px);
	min-width: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

.espt-block-category-showcase .espt-cs-media {
	display: block;
	line-height: 0;
	min-width: 0;
}

.espt-block-category-showcase .espt-cs-img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
	width: 100%;
}

.espt-block-category-showcase .espt-cs-banner:hover .espt-cs-img {
	transform: scale(1.05);
}

.espt-block-category-showcase .espt-cs-shade {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.espt-block-category-showcase .espt-cs-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
	padding: var(--bd-pad, 16px);
	position: relative;
	z-index: 1;
}

.espt-block-category-showcase .espt-cs-kicker {
	color: var(--kicker-color, currentColor);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	opacity: 0.9;
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.espt-block-category-showcase .espt-cs-title {
	color: var(--title-color, currentColor);
	font-size: var(--title-size, 22px);
	font-weight: 800;
	line-height: 1.22;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-category-showcase .espt-cs-desc {
	color: var(--desc-color, currentColor);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	min-width: 0;
	opacity: 0.9;
	overflow-wrap: anywhere;
}

.espt-block-category-showcase .espt-cs-count {
	color: var(--count-color, currentColor);
	font-size: 13px;
	font-weight: 700;
	max-width: 100%;
	opacity: 0.88;
	overflow-wrap: anywhere;
}

.espt-block-category-showcase .espt-cs-btn {
	align-items: center;
	background: var(--btn-bg, #fff);
	border: 0;
	border-radius: 999px;
	color: var(--btn-color, var(--bd-ink));
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	gap: 8px;
	line-height: 1.2;
	margin-top: 4px;
	max-width: 100%;
	padding: 11px 20px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.espt-block-category-showcase .espt-cs-btn > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-category-showcase .espt-cs-btn:hover {
	background: var(--btn-bg, var(--cs-accent));
	box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.55);
	color: var(--btn-color, #fff);
	transform: translateY(-2px);
}

.espt-block-category-showcase .espt-cs-btn-ic {
	transition: transform 0.2s ease;
}

.espt-block-category-showcase .espt-cs-btn:hover .espt-cs-btn-ic {
	transform: translateX(3px);
}

/* ---- design: overlay / spotlight / frame / glass share the image fill */

.espt-block-category-showcase.is-banner-design-overlay .espt-cs-media,
.espt-block-category-showcase.is-banner-design-spotlight .espt-cs-media,
.espt-block-category-showcase.is-banner-design-frame .espt-cs-media,
.espt-block-category-showcase.is-banner-design-glass .espt-cs-media {
	inset: 0;
	position: absolute;
}

.espt-block-category-showcase.is-banner-design-overlay .espt-cs-banner,
.espt-block-category-showcase.is-banner-design-spotlight .espt-cs-banner,
.espt-block-category-showcase.is-banner-design-frame .espt-cs-banner,
.espt-block-category-showcase.is-banner-design-glass .espt-cs-banner {
	background: #1f2937;
	border-color: transparent;
	color: #fff;
}

.espt-block-category-showcase.is-banner-design-overlay .espt-cs-shade {
	background: linear-gradient(180deg, transparent 26%, color-mix(in srgb, var(--cs-shade) var(--shade-strength, 72%), transparent) 100%);
}

.espt-block-category-showcase.is-banner-design-spotlight .espt-cs-shade,
.espt-block-category-showcase.is-banner-design-frame .espt-cs-shade,
.espt-block-category-showcase.is-banner-design-glass .espt-cs-shade {
	background: color-mix(in srgb, var(--cs-shade) calc(var(--shade-strength, 72%) * 0.6), transparent);
}

.espt-block-category-showcase.is-banner-design-spotlight .espt-cs-banner,
.espt-block-category-showcase.is-banner-design-frame .espt-cs-banner {
	justify-content: center;
}

.espt-block-category-showcase.is-banner-design-spotlight .espt-cs-content,
.espt-block-category-showcase.is-banner-design-frame .espt-cs-content {
	align-items: center;
	text-align: center;
}

.espt-block-category-showcase.is-banner-design-frame .espt-cs-banner::after {
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 10px;
	content: "";
	inset: 12px;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.espt-block-category-showcase.is-banner-design-frame .espt-cs-content {
	padding: calc(var(--bd-pad, 16px) + 10px);
}

/* ---- design: glass — frosted panel over the image */

.espt-block-category-showcase.is-banner-design-glass .espt-cs-content {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 14px;
	margin: 12px;
	-webkit-backdrop-filter: blur(10px);
}

/* ---- design: card — image on top, content on a panel below */

.espt-block-category-showcase.is-banner-design-card .espt-cs-banner,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-banner {
	background: var(--bd-box-bg, #fff);
	color: var(--bd-body);
	justify-content: flex-start;
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-img,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-img {
	aspect-ratio: 4 / 3;
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-shade,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-shade {
	display: none;
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-content,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-content {
	flex-grow: 1;
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-title,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-title {
	color: var(--title-color, var(--bd-ink));
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-kicker,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-kicker {
	color: var(--kicker-color, var(--cs-accent));
	opacity: 1;
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-desc,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-desc {
	color: var(--desc-color, var(--bd-body));
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-count,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-count {
	color: var(--count-color, var(--bd-muted));
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-btn,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-btn {
	background: var(--btn-bg, var(--cs-accent));
	color: var(--btn-color, #fff);
}

.espt-block-category-showcase.is-banner-design-card .espt-cs-btn:hover,
.espt-block-category-showcase.is-banner-design-stack .espt-cs-btn:hover {
	filter: brightness(1.07);
}

/* ---- design: stack — the content floats on a card over the image */

.espt-block-category-showcase.is-banner-design-stack .espt-cs-content {
	background: var(--bd-box-bg, #fff);
	border: 1px solid var(--bd-box-line, var(--cs-line));
	border-radius: 14px;
	box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.45);
	margin: -34px 12px 12px;
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------------- heading row */

.espt-block-category-showcase .espt-cs-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	width: 100%;
}

.espt-block-category-showcase .espt-cs-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	justify-content: space-between;
	margin: 0 0 4px;
}

.espt-block-category-showcase .espt-cs-titles {
	flex: 1 1 180px;
	min-width: 0;
}

.espt-block-category-showcase .espt-cs-heading {
	color: var(--heading-color, var(--espt-heading, var(--bd-ink)));
	font-size: var(--heading-size, 18px);
	font-weight: 800;
	line-height: 1.28;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* shrinkable, not `flex: none`: a long "View All" label must wrap inside the
   row rather than push the header past a 320px viewport */
.espt-block-category-showcase .espt-cs-tools {
	align-items: center;
	display: flex;
	flex: 0 1 auto;
	gap: 10px;
	margin-left: auto;
	min-width: 0;
}

.espt-block-category-showcase .espt-cs-viewall {
	align-items: center;
	color: var(--cs-accent);
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 700;
	gap: 5px;
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
	transition: color 0.15s ease;
}

.espt-block-category-showcase .espt-cs-viewall svg {
	flex: none;
	height: 15px;
	transition: transform 0.2s ease;
	width: 15px;
}

.espt-block-category-showcase .espt-cs-viewall:hover {
	color: var(--bd-primary-dark);
}

.espt-block-category-showcase .espt-cs-viewall:hover svg {
	transform: translateX(3px);
}

/* ---------------------------------------------------------- the track */

.espt-block-category-showcase .espt-cs-viewport {
	min-width: 0;
	position: relative;
}

.espt-block-category-showcase .espt-cs-track {
	display: grid;
	gap: var(--card-gap, 12px);
	grid-auto-columns: calc((100% - (var(--per-view, 1) - 1) * var(--card-gap, 12px)) / var(--per-view, 1));
	grid-auto-flow: column;
	grid-template-columns: none;
	list-style: none;
	margin: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	/* `overflow-x:auto` makes overflow-y `auto` too, so the track has to
	   reserve the room the card hover lift (-4px) and its shadow need —
	   otherwise both get sliced off at the top and bottom edges. */
	padding: 12px 0 24px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

.espt-block-category-showcase .espt-cs-track::-webkit-scrollbar {
	display: none;
}

/* The shop stylesheet narrows ul.products to one column for the "compact"
   card design (body.espt-pc-design-compact ul.products) — outrank it so the
   track always stays a single scrolling row. */
.espt-block-category-showcase .espt-cs .espt-cs-viewport ul.espt-cs-track {
	grid-template-columns: none;
	margin: 0;
}

.espt-block-category-showcase .espt-cs-track > li {
	margin: 0;
	min-width: 0;
	scroll-snap-align: start;
}

.espt-block-category-showcase .espt-cs-track:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: 4px;
}

/* a sliver of the next card on phones so the row reads as swipeable
   (mobile-first: the tablet block below puts the full-width cards back) */
.espt-block-category-showcase.is-peek .espt-cs-track {
	grid-auto-columns: calc((100% - var(--per-view, 1) * var(--card-gap, 12px)) / (var(--per-view, 1) + 0.22));
}

/* compact cards are image-left, so one slide per view on phones however many
   the "products per view" control asks for (the render resolves an inherited
   design onto .espt-cs, so this bites either way) */
.espt-block-category-showcase .espt-cs.is-design-compact .espt-cs-track {
	grid-auto-columns: calc(100% - var(--card-gap, 12px) - 14px);
}

.espt-block-category-showcase .espt-cs-empty {
	background: color-mix(in srgb, var(--bd-muted) 7%, transparent);
	border: 1px dashed var(--cs-line);
	border-radius: 12px;
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
	overflow-wrap: anywhere;
	padding: 22px 16px;
	text-align: center;
}

.espt-block-category-showcase .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13.5px;
	margin: 0;
	padding: 14px 16px;
	text-align: center;
}

/* ----------------------------------------------------- arrows & dots */

.espt-block-category-showcase .espt-cs-arw {
	align-items: center;
	background: var(--cs-tool-bg);
	border: 1px solid var(--cs-line);
	border-radius: 50%;
	color: var(--espt-text, var(--bd-ink));
	cursor: pointer;
	display: inline-flex;
	flex: none;
	height: 38px;
	justify-content: center;
	padding: 0;
	transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	width: 38px;
}

.espt-block-category-showcase .espt-cs-arw svg {
	height: 18px;
	width: 18px;
}

.espt-block-category-showcase .espt-cs-arw:hover:not([disabled]) {
	background: var(--cs-accent);
	border-color: var(--cs-accent);
	color: #fff;
}

.espt-block-category-showcase .espt-cs-arw[disabled] {
	cursor: default;
	opacity: 0.3;
}

.espt-block-category-showcase .espt-cs-arw:focus-visible,
.espt-block-category-showcase .espt-cs-dot:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: 2px;
}

.espt-block-category-showcase .espt-cs-nav {
	display: inline-flex;
	gap: 8px;
}

/* over the sides — hidden on phones, where swiping is the gesture */
.espt-block-category-showcase.is-arrows-pos-sides .espt-cs-viewport > .espt-cs-arw {
	box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.45);
	display: none;
	position: absolute;
	top: 38%;
	z-index: 4;
}

/* …unless the dots are off too — the row would otherwise offer a phone
   visitor no visible control at all. */
.espt-block-category-showcase.is-arrows-pos-sides.no-dots .espt-cs-viewport > .espt-cs-arw {
	display: inline-flex;
}

.espt-block-category-showcase.is-arrows-pos-sides .espt-cs-viewport > .espt-cs-prev {
	left: 4px;
}

.espt-block-category-showcase.is-arrows-pos-sides .espt-cs-viewport > .espt-cs-next {
	right: 4px;
}

.espt-block-category-showcase .espt-cs-foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 0;
}

.espt-block-category-showcase .espt-cs-dots {
	display: flex;
	flex-wrap: wrap;
	/* the dots carry their own 8px of transparent hit area */
	gap: 0;
	justify-content: center;
}

.espt-block-category-showcase .espt-cs-dots[hidden] {
	display: none;
}

/* Everything fits (JS hides the dots) and no arrows live down here → drop
   the whole strip so it leaves no gap. Ignored where :has() is missing. */
.espt-block-category-showcase .espt-cs-foot:has(> .espt-cs-dots[hidden]):not(:has(> .espt-cs-nav)) {
	display: none;
}

/* 8px dot, 24px touch target — the padding is transparent because the
   background is clipped to the content box. */
.espt-block-category-showcase .espt-cs-dot {
	background-clip: content-box;
	background-color: color-mix(in srgb, var(--cs-accent) 26%, transparent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 24px;
	padding: 8px;
	transition: background-color 0.2s ease, width 0.2s ease;
	width: 24px;
}

.espt-block-category-showcase .espt-cs-dot.is-active {
	background-color: var(--cs-accent);
	width: 38px;
}

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

/* Only structural bits here: the nine card designs live in the theme's own
   stylesheet and must keep their background / radius / shadow — and their own
   box model. (`display` in particular: the "compact" card is a two-column
   grid, so forcing a flex column here would silently break it.) */
.espt-block-category-showcase .espt-pc {
	min-width: 0;
	position: relative;
}

.espt-block-category-showcase .espt-cs.has-card-bg .espt-pc {
	background: var(--card-bg);
}

.espt-block-category-showcase .espt-cs.has-card-ink .espt-pc-title a,
.espt-block-category-showcase .espt-cs.has-card-ink .espt-pc-price {
	color: var(--card-ink);
}

.espt-block-category-showcase.is-card-radius-none .espt-pc { border-radius: 0; overflow: hidden; }
.espt-block-category-showcase.is-card-radius-sm .espt-pc { border-radius: 8px; overflow: hidden; }
.espt-block-category-showcase.is-card-radius-md .espt-pc { border-radius: 14px; overflow: hidden; }
.espt-block-category-showcase.is-card-radius-lg .espt-pc { border-radius: 20px; overflow: hidden; }
.espt-block-category-showcase.is-card-radius-xl .espt-pc { border-radius: 28px; overflow: hidden; }

/* "lift on hover" off — the theme raises the card AND deepens its shadow,
   so both have to be put back (flat designs keep their flat resting look). */
.espt-block-category-showcase.no-card-lift .espt-pc:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	transform: none;
}

.espt-block-category-showcase.no-card-lift .espt-pc-minimal:hover,
.espt-block-category-showcase.no-card-lift .espt-pc-bordered:hover {
	box-shadow: none;
}

.espt-block-category-showcase .espt-pc-media {
	display: block;
	position: relative;
}

.espt-block-category-showcase .espt-pc-title,
.espt-block-category-showcase .espt-pc-price,
.espt-block-category-showcase .espt-pc-cat {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-category-showcase.is-text-align-center .espt-pc-body {
	text-align: center;
}

.espt-block-category-showcase.is-text-align-center .espt-pc-body > .espt-pc-sws,
.espt-block-category-showcase.is-text-align-center .espt-pc-actions {
	justify-content: center;
}

.espt-block-category-showcase.is-text-align-right .espt-pc-body {
	text-align: right;
}

.espt-block-category-showcase.is-text-align-right .espt-pc-body > .espt-pc-sws,
.espt-block-category-showcase.is-text-align-right .espt-pc-actions {
	justify-content: flex-end;
}

/* image shape — the theme drives this from a body class, so the block
   re-declares it for its own row when it is not inheriting. The photo also
   has to be pinned back into (or released from) the frame, otherwise a shop
   set to "Natural" leaves it flowing at its own height inside a cropped box
   — and "Natural" here would collapse to nothing, because the theme's photo
   is absolutely positioned. */
.espt-block-category-showcase.is-card-ratio-square .espt-pc-media { aspect-ratio: 1 / 1; }
.espt-block-category-showcase.is-card-ratio-portrait .espt-pc-media { aspect-ratio: 3 / 4; }
.espt-block-category-showcase.is-card-ratio-landscape .espt-pc-media { aspect-ratio: 4 / 3; }

.espt-block-category-showcase.is-card-ratio-square .espt-pc-media > .espt-pc-img:first-child,
.espt-block-category-showcase.is-card-ratio-portrait .espt-pc-media > .espt-pc-img:first-child,
.espt-block-category-showcase.is-card-ratio-landscape .espt-pc-media > .espt-pc-img:first-child {
	height: 100%;
	position: absolute;
}

.espt-block-category-showcase.is-card-ratio-natural .espt-pc-media {
	aspect-ratio: auto;
}

.espt-block-category-showcase.is-card-ratio-natural .espt-pc-media > .espt-pc-img:first-child {
	height: auto;
	position: relative;
}

/* image hover */
.espt-block-category-showcase.is-card-hover-zoom .espt-pc:hover .espt-pc-img {
	transform: scale(1.06);
}

/* gallery cross-fades the stacked photos instead — a zoom on top of it
   fights the fade, so the shop's zoom is switched off for this row */
.espt-block-category-showcase.is-card-hover-none .espt-pc:hover .espt-pc-img,
.espt-block-category-showcase.is-card-hover-gallery .espt-pc:hover .espt-pc-img {
	transform: none;
}

/* icon-only buttons (the theme keys this off a body class too) */
.espt-block-category-showcase.is-btn-mode-icon .espt-pc-cart,
.espt-block-category-showcase.is-btn-mode-icon .espt-pc-buy {
	flex: none;
	height: 40px;
	justify-content: center;
	padding: 0;
	width: 44px;
}

/* …and the reverse: a shop set to icon-only would keep squeezing the buttons
   into a 44px square after this block asked for labels. The two designs that
   are icon-only by definition (floating buttons, compact) keep their pills. */
.espt-block-category-showcase.is-btn-mode-text .espt-pc:not(.espt-pc-float):not(.espt-pc-compact) .espt-pc-cart,
.espt-block-category-showcase.is-btn-mode-text .espt-pc:not(.espt-pc-float):not(.espt-pc-compact) .espt-pc-buy,
.espt-block-category-showcase.is-btn-mode-both .espt-pc:not(.espt-pc-float):not(.espt-pc-compact) .espt-pc-cart,
.espt-block-category-showcase.is-btn-mode-both .espt-pc:not(.espt-pc-float):not(.espt-pc-compact) .espt-pc-buy {
	flex: 1 1 0;
	height: auto;
	padding: 10px 12px;
	width: auto;
}

/* narrow cards: "icon + text" drops to icons so labels never wrap 3 lines */
@media (max-width: 479.98px) {
	.espt-block-category-showcase.is-btn-mode-both .espt-pc-lbl {
		border: 0;
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.espt-block-category-showcase.is-btn-mode-both .espt-pc-cart,
	.espt-block-category-showcase.is-btn-mode-both .espt-pc-buy {
		padding: 10px 8px;
	}
}

.espt-block-category-showcase.is-card-cat-hide .espt-pc-cat {
	display: none;
}

.espt-block-category-showcase.is-card-price-hide .espt-pc-price {
	display: none;
}

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

/* stagger: the render puts .espt-cs-i-0 … .espt-cs-i-11 on the cards */
.espt-block-category-showcase .espt-cs-i-0 { --i: 0; }
.espt-block-category-showcase .espt-cs-i-1 { --i: 1; }
.espt-block-category-showcase .espt-cs-i-2 { --i: 2; }
.espt-block-category-showcase .espt-cs-i-3 { --i: 3; }
.espt-block-category-showcase .espt-cs-i-4 { --i: 4; }
.espt-block-category-showcase .espt-cs-i-5 { --i: 5; }
.espt-block-category-showcase .espt-cs-i-6 { --i: 6; }
.espt-block-category-showcase .espt-cs-i-7 { --i: 7; }
.espt-block-category-showcase .espt-cs-i-8 { --i: 8; }
.espt-block-category-showcase .espt-cs-i-9 { --i: 8; }
.espt-block-category-showcase .espt-cs-i-10 { --i: 8; }
.espt-block-category-showcase .espt-cs-i-11 { --i: 8; }

/* The hidden state lives inside `no-preference` rather than being undone by a
   later `reduce` block: an undo rule would need to out-specify every
   `.is-reveal-*` selector below, and a reduced-motion visitor is better served
   by never having a card hidden in the first place. */
@media (prefers-reduced-motion: no-preference) {
	.espt-block-category-showcase.is-reveal-fade .espt-cs-track > li,
	.espt-block-category-showcase.is-reveal-up .espt-cs-track > li,
	.espt-block-category-showcase.is-reveal-zoom .espt-cs-track > li,
	.espt-block-category-showcase.is-reveal-blur .espt-cs-track > li {
		opacity: 0;
		transition: opacity var(--reveal-dur, 0.5s) ease, transform var(--reveal-dur, 0.5s) ease, filter var(--reveal-dur, 0.5s) ease;
		transition-delay: calc(var(--i, 0) * 70ms);
		will-change: opacity, transform;
	}

	.espt-block-category-showcase.is-reveal-up .espt-cs-track > li { transform: translateY(24px); }
	.espt-block-category-showcase.is-reveal-zoom .espt-cs-track > li { transform: scale(0.92); }
	.espt-block-category-showcase.is-reveal-blur .espt-cs-track > li { filter: blur(10px); }

	.espt-block-category-showcase .espt-cs-track > li.is-in {
		filter: none;
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-category-showcase .espt-cs-track {
		scroll-behavior: auto;
	}

	.espt-block-category-showcase .espt-cs-img,
	.espt-block-category-showcase .espt-cs-arw,
	.espt-block-category-showcase .espt-cs-btn,
	.espt-block-category-showcase .espt-cs-dot,
	.espt-block-category-showcase .espt-cs-viewall,
	.espt-block-category-showcase .espt-cs-viewall svg {
		transition: none;
	}

	.espt-block-category-showcase .espt-cs-banner:hover .espt-cs-img,
	.espt-block-category-showcase .espt-cs-btn:hover {
		transform: none;
	}
}

/* --------------------------------- side-by-side: "never stack" option */

.espt-block-category-showcase.is-stack-on-none .espt-cs {
	align-items: stretch;
	flex-direction: row;
}

.espt-block-category-showcase.is-stack-on-none .espt-cs-banner {
	flex: 0 0 var(--banner-width, 38%);
	max-width: var(--banner-width, 38%);
}

.espt-block-category-showcase.is-stack-on-none.is-image-position-right .espt-cs-banner {
	order: 2;
}

.espt-block-category-showcase.is-stack-on-none .espt-cs-main {
	flex: 1 1 auto;
}

/* ---------------------------------------------- per-device hiding
   Mobile-first: hidden from the base up, put back at the next breakpoint.
   Desktop ≥ 1024px, tablet 768–1023px, mobile ≤ 767px. */

.espt-block-category-showcase.is-hide-banner-mobile .espt-cs-banner {
	display: none;
}

/* ---------------------------------------------------------- ≥ tablet */

@media (min-width: 768px) {
	.espt-block-category-showcase.is-stack-on-mobile .espt-cs {
		align-items: stretch;
		flex-direction: row;
	}

	.espt-block-category-showcase.is-stack-on-mobile .espt-cs-banner {
		flex: 0 0 var(--banner-width, 38%);
		max-width: var(--banner-width, 38%);
	}

	.espt-block-category-showcase.is-stack-on-mobile.is-image-position-right .espt-cs-banner {
		order: 2;
	}

	.espt-block-category-showcase.is-stack-on-mobile .espt-cs-main {
		flex: 1 1 auto;
	}

	.espt-block-category-showcase .espt-cs-desc {
		font-size: 14.5px;
	}

	.espt-block-category-showcase .espt-cs-head {
		margin-bottom: 6px;
	}

	.espt-block-category-showcase .espt-cs-arw {
		height: 42px;
		width: 42px;
	}

	.espt-block-category-showcase.is-arrows-pos-sides .espt-cs-viewport > .espt-cs-arw {
		display: inline-flex;
	}

	/* full-width cards again — the peek is a phone gesture hint, and from
	   tablet up there is room for the configured per-view count even with the
	   image-left compact card */
	.espt-block-category-showcase.is-peek .espt-cs-track,
	.espt-block-category-showcase .espt-cs.is-design-compact .espt-cs-track {
		grid-auto-columns: calc((100% - (var(--per-view, 1) - 1) * var(--card-gap, 12px)) / var(--per-view, 1));
	}

	.espt-block-category-showcase.is-hide-banner-mobile .espt-cs-banner {
		display: flex;
	}

	.espt-block-category-showcase.is-hide-banner-tablet .espt-cs-banner {
		display: none;
	}
}

/* --------------------------------------------------------- ≥ desktop */

@media (min-width: 1024px) {
	.espt-block-category-showcase.is-stack-on-tablet .espt-cs {
		align-items: stretch;
		flex-direction: row;
	}

	.espt-block-category-showcase.is-stack-on-tablet .espt-cs-banner {
		flex: 0 0 var(--banner-width, 38%);
		max-width: var(--banner-width, 38%);
	}

	.espt-block-category-showcase.is-stack-on-tablet.is-image-position-right .espt-cs-banner {
		order: 2;
	}

	.espt-block-category-showcase.is-stack-on-tablet .espt-cs-main {
		flex: 1 1 auto;
	}

	.espt-block-category-showcase .espt-cs-kicker {
		font-size: 12px;
	}

	/* Kept inside the track on purpose: a negative offset on a full-width
	   block would poke past the viewport and add a horizontal scrollbar. */
	.espt-block-category-showcase.is-arrows-pos-sides .espt-cs-viewport > .espt-cs-prev {
		left: 6px;
	}

	.espt-block-category-showcase.is-arrows-pos-sides .espt-cs-viewport > .espt-cs-next {
		right: 6px;
	}

	.espt-block-category-showcase.is-hide-banner-tablet .espt-cs-banner {
		display: flex;
	}

	.espt-block-category-showcase.is-hide-banner-desktop .espt-cs-banner {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   Editor-only fallback. The theme's compiled main.css (where the .espt-pc
   card system lives) is a front-end stylesheet, so inside the block editor
   the cards would otherwise render as unstyled stacked images. Scoped to the
   editor canvas with a zero-specificity :where() so every rule above still
   wins, and never reaches the front end.
   --------------------------------------------------------------------------- */

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc {
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* image-left card, so the editor preview reads like the front end */
:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-compact {
	display: grid;
	gap: 0 14px;
	grid-template-columns: 44% minmax(0, 1fr);
	padding: 12px;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-compact .espt-pc-mediabox {
	grid-column: 1;
	grid-row: 1;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-compact .espt-pc-body {
	grid-column: 2;
	grid-row: 1;
	padding: 2px 0 0;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-media {
	aspect-ratio: 1 / 1;
	background: #f3f4f6;
	display: block;
	overflow: hidden;
	position: relative;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-img {
	height: 100%;
	inset: 0;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	position: absolute;
	width: 100%;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-img.is-active {
	opacity: 1;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-title {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-title a {
	color: inherit;
	text-decoration: none;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-cat {
	color: #6b7280;
	font-size: 11.5px;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-cat-over {
	background: rgba(15, 23, 42, 0.7);
	border-radius: 999px;
	bottom: 8px;
	color: #fff;
	left: 8px;
	padding: 2px 9px;
	position: absolute;
	z-index: 3;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-badge,
:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-flag {
	background: #dc2626;
	border-radius: 999px;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	left: 8px;
	padding: 3px 9px;
	position: absolute;
	top: 8px;
	z-index: 3;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-stars {
	color: #f59e0b;
	font-size: 13px;
	position: relative;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-price {
	font-size: 14px;
	font-weight: 700;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-sws {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-sw {
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 999px;
	font-size: 11px;
	padding: 2px 8px;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-cart,
:where(.editor-styles-wrapper, .block-editor-page) .espt-block-category-showcase .espt-pc-buy {
	align-items: center;
	background: #f3f4f6;
	border: 0;
	border-radius: 8px;
	color: #111827;
	display: inline-flex;
	flex: 1 1 auto;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	justify-content: center;
	min-width: 0;
	padding: 8px 10px;
	text-decoration: none;
}