/**
 * Products block — .espt-block-products
 *
 * A product grid / slider drawn with the theme's own shop cards
 * (ul.products > li.espt-pc …), so this file only adds the section shell:
 * heading bar, grid + slider track, arrows, dots, pagination — plus the
 * per-block card overrides (image shape, hover, radius, alignment) that the
 * theme normally applies through body classes.
 *
 * Numeric vars from the spec: --cols --gap --head-size --sec-pad.
 * Colour vars (only emitted when picked): --sec-bg --heading-color
 * --sub-color --accent --count-color --count-bg --card-bg --card-ink
 * --tool-bg --tool-line.
 * Root classes: is-layout-{grid|slider} is-head-style-* is-text-align-*
 * is-anim-* is-peek/no-peek is-card-ratio-* is-card-hover-*
 * is-card-radius-* is-btn-mode-* is-card-lift/no-card-lift.
 * On the .espt-pg wrapper: is-design-{classic|bordered|…|compact} (the card
 * design actually in use, shop setting included) and has-card-bg/has-card-ink.
 * Mobile-first: base ≤767px, then 768px, then 1024px.
 *
 * The theme's main.css sits in `@layer components`, so everything here beats
 * it regardless of specificity — only ever declare what this block owns.
 */

.espt-block-products {
	--pg-accent: var(--accent, var(--espt-primary, var(--bd-primary)));
	--pg-line: var(--tool-line, var(--espt-border, var(--bd-line)));
	--pg-tool-bg: var(--tool-bg, var(--espt-content-bg, #fff));
	max-width: 100%;
}

.espt-block-products .espt-pg {
	background: var(--sec-bg, transparent);
	border-radius: 14px;
	max-width: 100%;
	padding: var(--sec-pad, 0px);
	position: relative;
}

/* ------------------------------------------------------- heading bar */

.espt-block-products .espt-pg-head {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: space-between;
	margin: 0 0 16px;
}

.espt-block-products .espt-pg-titles {
	flex: 1 1 220px;
	min-width: 0;
}

.espt-block-products .espt-pg-titlerow {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	min-width: 0;
}

.espt-block-products .espt-pg-heading {
	color: var(--heading-color, var(--espt-heading, var(--bd-ink)));
	font-size: var(--head-size, 20px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-products .espt-pg-heading > span {
	display: inline-block;
	position: relative;
}

.espt-block-products .espt-pg-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: 13.5px;
	line-height: 1.5;
	margin: 5px 0 0;
	overflow-wrap: anywhere;
}

.espt-block-products .espt-pg-count {
	background: var(--count-bg, color-mix(in srgb, var(--pg-accent) 12%, transparent));
	border-radius: 999px;
	color: var(--count-color, var(--pg-accent));
	display: inline-flex;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.6;
	padding: 3px 11px;
	white-space: nowrap;
}

/* heading styles */
.espt-block-products.is-head-style-bar .espt-pg-heading {
	border-left: 4px solid var(--pg-accent);
	padding-left: 10px;
}

.espt-block-products.is-head-style-underline .espt-pg-heading > span::after {
	background: var(--pg-accent);
	border-radius: 3px;
	bottom: -7px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	width: 100%;
}

.espt-block-products.is-head-style-underline .espt-pg-head {
	margin-bottom: 22px;
}

.espt-block-products.is-head-style-center .espt-pg-head {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.espt-block-products.is-head-style-center .espt-pg-titlerow {
	justify-content: center;
}

.espt-block-products.is-head-style-center .espt-pg-titles {
	flex: 1 1 100%;
}

.espt-block-products.is-head-style-boxed .espt-pg-head {
	align-items: center;
	background: color-mix(in srgb, var(--pg-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--pg-accent) 22%, transparent);
	border-radius: 12px;
	padding: 12px 14px;
}

.espt-block-products.is-head-style-ribbon .espt-pg-heading {
	background: var(--pg-accent);
	border-radius: 8px;
	color: var(--heading-color, #fff);
	display: inline-block;
	padding: 6px 14px;
}

.espt-block-products.is-head-style-ribbon .espt-pg-heading > span::after {
	content: none;
}

/* tools: sort select, "see all", arrows */

.espt-block-products .espt-pg-tools {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
}

.espt-block-products .espt-pg-sortsel {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--pg-tool-bg);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 12px 8px;
	border: 1px solid var(--pg-line);
	border-radius: 9px;
	color: var(--espt-text, var(--bd-ink));
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	max-width: 100%;
	padding: 8px 34px 8px 13px;
}

.espt-block-products .espt-pg-sortsel:focus-visible {
	border-color: var(--pg-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 22%, transparent);
	outline: none;
}

.espt-block-products .espt-pg-more {
	align-items: center;
	color: var(--pg-accent);
	display: inline-flex;
	font-size: 13.5px;
	font-weight: 700;
	gap: 5px;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.espt-block-products .espt-pg-more svg {
	height: 15px;
	transition: transform 0.2s ease;
	width: 15px;
}

.espt-block-products .espt-pg-more:hover svg {
	transform: translateX(3px);
}

/* --------------------------------------------------------- the grid */

.espt-block-products .espt-pg-viewport {
	position: relative;
}

.espt-block-products .espt-pg-grid {
	display: grid;
	gap: var(--gap, 12px);
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.espt-block-products .espt-pg-grid > li {
	margin: 0;
	min-width: 0;
}

/* The image-left "compact" card needs the whole width on phones (the theme
   does the same for the shop loop, from a body class this row never gets). */
.espt-block-products.is-layout-grid .espt-pg.is-design-compact .espt-pg-grid {
	grid-template-columns: minmax(0, 1fr);
}

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

.espt-block-products .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;
}

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

/* Only structural bits here: the nine card designs live in the theme's own
   stylesheet and must keep their background / radius / shadow. Anything the
   designs vary is applied only when the editor explicitly asked for it.

   NOTE: main.css lives inside `@layer components`, so every rule in this
   (unlayered) file beats it whatever the specificity. Never restate a card
   property the designs vary — a plain `display: flex` here would flatten the
   image-left "compact" card's grid, `background` would erase the dark card. */
.espt-block-products .espt-pc {
	min-width: 0;
	position: relative;
}

.espt-block-products .espt-pg.has-card-bg .espt-pc {
	background: var(--card-bg);
}

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

.espt-block-products.is-card-radius-none .espt-pc { border-radius: 0; overflow: hidden; }
.espt-block-products.is-card-radius-sm .espt-pc { border-radius: 8px; overflow: hidden; }
.espt-block-products.is-card-radius-md .espt-pc { border-radius: 14px; overflow: hidden; }
.espt-block-products.is-card-radius-lg .espt-pc { border-radius: 20px; overflow: hidden; }
.espt-block-products.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 shadow). */
.espt-block-products.no-card-lift .espt-pc:hover {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
	transform: none;
}

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

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

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

/* content alignment inside the card (the body is a column flex, so only the
   row-flex children get justify-content — never the body itself) */
.espt-block-products.is-text-align-center .espt-pc-body {
	text-align: center;
}

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

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

.espt-block-products.is-text-align-right .espt-pc-body > .espt-pc-sws,
.espt-block-products.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 the box, otherwise a shop set to "Natural"
   leaves it flowing at its own height inside the cropped frame. */
.espt-block-products.is-card-ratio-square .espt-pc-media { aspect-ratio: 1 / 1; }
.espt-block-products.is-card-ratio-portrait .espt-pc-media { aspect-ratio: 3 / 4; }
.espt-block-products.is-card-ratio-landscape .espt-pc-media { aspect-ratio: 4 / 3; }

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

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

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

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

/* gallery cycles the stacked photos instead — a zoom on top of it fights the
   cross-fade, so the shop's zoom is switched off for this row */
.espt-block-products.is-card-hover-none .espt-pc:hover .espt-pc-img,
.espt-block-products.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-products.is-btn-mode-icon .espt-pc-cart,
.espt-block-products.is-btn-mode-icon .espt-pc-buy {
	flex: none;
	height: 40px;
	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-products.is-btn-mode-text .espt-pg:not(.is-design-float):not(.is-design-compact) .espt-pc-cart,
.espt-block-products.is-btn-mode-text .espt-pg:not(.is-design-float):not(.is-design-compact) .espt-pc-buy,
.espt-block-products.is-btn-mode-both .espt-pg:not(.is-design-float):not(.is-design-compact) .espt-pc-cart,
.espt-block-products.is-btn-mode-both .espt-pg:not(.is-design-float):not(.is-design-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-products.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-products.is-btn-mode-both .espt-pc-cart,
	.espt-block-products.is-btn-mode-both .espt-pc-buy {
		padding: 10px 8px;
	}
}

/* --------------------------------------------------------- entrance */

.espt-block-products .espt-pg-grid > li {
	animation-duration: 0.55s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.22, 0.75, 0.3, 1);
}

.espt-block-products.is-anim-none .espt-pg-grid > li { animation: none; }
.espt-block-products.is-anim-fade .espt-pg-grid > li { animation-name: espt-pg-fade; }
.espt-block-products.is-anim-up .espt-pg-grid > li { animation-name: espt-pg-up; }
.espt-block-products.is-anim-zoom .espt-pg-grid > li { animation-name: espt-pg-zoom; }

.espt-block-products .espt-pg-i-0 { animation-delay: 0ms; }
.espt-block-products .espt-pg-i-1 { animation-delay: 55ms; }
.espt-block-products .espt-pg-i-2 { animation-delay: 110ms; }
.espt-block-products .espt-pg-i-3 { animation-delay: 165ms; }
.espt-block-products .espt-pg-i-4 { animation-delay: 220ms; }
.espt-block-products .espt-pg-i-5 { animation-delay: 275ms; }
.espt-block-products .espt-pg-i-6 { animation-delay: 330ms; }
.espt-block-products .espt-pg-i-7 { animation-delay: 385ms; }
.espt-block-products .espt-pg-i-8 { animation-delay: 440ms; }
.espt-block-products .espt-pg-i-9 { animation-delay: 495ms; }
.espt-block-products .espt-pg-i-10 { animation-delay: 550ms; }
.espt-block-products .espt-pg-i-11 { animation-delay: 605ms; }

@keyframes espt-pg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes espt-pg-up {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}

@keyframes espt-pg-zoom {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- slider */

.espt-block-products.is-layout-slider .espt-pg-grid {
	grid-auto-columns: calc((100% - (var(--cols, 2) - 1) * var(--gap, 12px)) / var(--cols, 2));
	grid-auto-flow: column;
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 4px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.espt-block-products.is-layout-slider .espt-pg-grid::-webkit-scrollbar {
	display: none;
}

.espt-block-products.is-layout-slider .espt-pg-grid > li {
	scroll-snap-align: start;
}

.espt-block-products.is-layout-slider .espt-pg-grid:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 4px;
}

/* a sliver of the next card on phones so the row reads as swipeable
   (mobile-first: peeking is the phone behaviour, reset from 768px up) */
.espt-block-products.is-layout-slider.is-peek .espt-pg-grid {
	grid-auto-columns: calc((100% - var(--cols, 2) * var(--gap, 12px)) / (var(--cols, 2) + 0.22));
}

/* compact cards are image-left, so one slide per view on phones */
.espt-block-products.is-layout-slider .espt-pg.is-design-compact .espt-pg-grid {
	grid-auto-columns: calc(100% - var(--gap, 12px) - 14px);
}

.espt-block-products .espt-pg-arw {
	align-items: center;
	background: var(--pg-tool-bg);
	border: 1px solid var(--pg-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-products .espt-pg-arw svg {
	height: 18px;
	width: 18px;
}

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

.espt-block-products .espt-pg-arw[disabled] {
	cursor: default;
	opacity: 0.35;
}

.espt-block-products .espt-pg-nav {
	display: inline-flex;
	gap: 8px;
}

/* Arrows over the sides — hidden on phones, where swiping is the gesture.
   Keyed off where the render put them (a direct child of the viewport) rather
   than on the option, so the "top right" arrows still land somewhere sensible
   when the heading bar they belong in is switched off. */
.espt-block-products .espt-pg-viewport > .espt-pg-arw {
	box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.45);
	display: none;
	position: absolute;
	top: 38%;
	z-index: 4;
}

.espt-block-products .espt-pg-viewport > .espt-pg-prev { left: 4px; }
.espt-block-products .espt-pg-viewport > .espt-pg-next { right: 4px; }

.espt-block-products .espt-pg-foot {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 14px;
}

.espt-block-products .espt-pg-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}

.espt-block-products .espt-pg-dot {
	background: color-mix(in srgb, var(--pg-accent) 26%, transparent);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	height: 8px;
	padding: 0;
	transition: background 0.2s ease, width 0.2s ease;
	width: 8px;
}

.espt-block-products .espt-pg-dot.is-active {
	background: var(--pg-accent);
	width: 22px;
}

/* ------------------------------------------------------- pagination */

.espt-block-products .espt-pg-pages {
	margin-top: 24px;
}

.espt-block-products .espt-pg-pages ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.espt-block-products .espt-pg-pages li {
	margin: 0;
}

.espt-block-products .espt-pg-pages a.page-numbers,
.espt-block-products .espt-pg-pages span.page-numbers {
	align-items: center;
	background: color-mix(in srgb, var(--bd-muted) 10%, transparent);
	border-radius: 9px;
	color: var(--espt-text, var(--bd-ink));
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	height: 38px;
	justify-content: center;
	min-width: 38px;
	padding: 0 10px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.espt-block-products .espt-pg-pages a.page-numbers:hover {
	background: color-mix(in srgb, var(--pg-accent) 18%, transparent);
	color: var(--pg-accent);
}

.espt-block-products .espt-pg-pages span.page-numbers.current {
	background: var(--pg-accent);
	color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
	.espt-block-products .espt-pg-grid > li {
		animation: none;
	}

	.espt-block-products.is-layout-slider .espt-pg-grid {
		scroll-behavior: auto;
	}

	.espt-block-products .espt-pc-img,
	.espt-block-products .espt-pg-arw,
	.espt-block-products .espt-pg-more svg {
		transition: none;
	}
}

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

@media (min-width: 768px) {
	.espt-block-products .espt-pg-sub {
		font-size: 14.5px;
	}

	.espt-block-products .espt-pg-viewport > .espt-pg-arw {
		display: inline-flex;
	}

	.espt-block-products .espt-pg-arw {
		height: 42px;
		width: 42px;
	}

	/* from tablet up there is room for the configured column count again */
	.espt-block-products.is-layout-grid .espt-pg.is-design-compact .espt-pg-grid {
		grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	}

	.espt-block-products.is-layout-slider.is-peek .espt-pg-grid,
	.espt-block-products.is-layout-slider .espt-pg.is-design-compact .espt-pg-grid {
		grid-auto-columns: calc((100% - (var(--cols, 2) - 1) * var(--gap, 12px)) / var(--cols, 2));
	}
}

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

@media (min-width: 1024px) {
	.espt-block-products .espt-pg-head {
		gap: 12px 18px;
		margin-bottom: 20px;
	}
}

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

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .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-products .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-products .espt-pc-compact .espt-pc-mediabox {
	grid-column: 1;
	grid-row: 1;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .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-products .espt-pc-media {
	aspect-ratio: 1 / 1;
	background: #f3f4f6;
	display: block;
	overflow: hidden;
	position: relative;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .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-products .espt-pc-img.is-active {
	opacity: 1;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .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-products .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-products .espt-pc-title a {
	color: inherit;
	text-decoration: none;
}

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

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .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-products .espt-pc-price {
	font-size: 15px;
	font-weight: 800;
	margin-top: auto;
}

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .espt-pc-badge,
:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .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-products .espt-pc-actions {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

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

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

:where(.editor-styles-wrapper, .block-editor-page) .espt-block-products .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-products .espt-pc-stars {
	color: #f59e0b;
	font-size: 13px;
	position: relative;
}