/**
 * Block: Product Stock (.espt-block-pd-stock) — availability badge with four
 * states (in / low / backorder / out) and eight designs. Mobile-first; every
 * size comes from a CSS variable the block spec sets on the root.
 *
 * State colours resolve to two local vars, --c (ink) and --bg, so each design
 * only has to say where it paints them.
 */

.espt-block-pd-stock .espt-pds {
	--c: var(--in-color, #15803d);
	--bg: var(--in-bg, #dcfce7);
	max-width: 100%;
	min-width: 0;
}

.espt-block-pd-stock .espt-pds.is-low {
	--c: var(--low-color, #b45309);
	--bg: var(--low-bg, #fef3c7);
}

.espt-block-pd-stock .espt-pds.is-back {
	--c: var(--back-color, #0369a1);
	--bg: var(--back-bg, #e0f2fe);
}

.espt-block-pd-stock .espt-pds.is-out {
	--c: var(--out-color, #b91c1c);
	--bg: var(--out-bg, #fee2e2);
}

/* ------------------------------------------------------------- the badge */
.espt-block-pd-stock .espt-pds-badge {
	align-items: center;
	background: var(--bg);
	border: 1px solid transparent;
	border-radius: var(--radius, 999px);
	color: var(--c);
	display: inline-flex;
	flex-wrap: wrap;
	font-size: var(--size, 14px);
	font-weight: var(--weight, 700);
	gap: var(--gap, 8px);
	line-height: 1.3;
	max-width: 100%;
	min-width: 0;
	padding: var(--pad-y, 8px) var(--pad-x, 14px);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	vertical-align: middle;
}

.espt-block-pd-stock .espt-pds-t {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-stock .espt-pds-qty {
	background: color-mix(in srgb, currentColor 15%, transparent);
	border-radius: 999px;
	font-size: 0.86em;
	font-weight: 800;
	line-height: 1.4;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 0.1em 0.62em;
}

.espt-block-pd-stock .espt-pds-qty[hidden] {
	display: none;
}

/* ------------------------------------------------------------- the marker */
.espt-block-pd-stock .espt-pds-dot {
	background: currentColor;
	border-radius: 50%;
	display: inline-block;
	flex: 0 0 auto;
	height: var(--icon-size, 9px);
	position: relative;
	width: var(--icon-size, 9px);
}

.espt-block-pd-stock .espt-pds-ic {
	/* icons read a touch larger than the dot at the same slider value */
	align-items: center;
	display: none;
	flex: 0 0 auto;
	font-size: calc(var(--icon-size, 9px) * 1.7);
	justify-content: center;
	line-height: 0;
}

.espt-block-pd-stock .espt-pds-ic svg {
	height: 1em;
	width: 1em;
}

.espt-block-pd-stock .espt-pds.is-in .espt-pds-ic-in,
.espt-block-pd-stock .espt-pds.is-low .espt-pds-ic-low,
.espt-block-pd-stock .espt-pds.is-back .espt-pds-ic-back,
.espt-block-pd-stock .espt-pds.is-out .espt-pds-ic-out {
	display: inline-flex;
}

/* Pulsing marker. */
.espt-block-pd-stock.is-pulse .espt-pds-dot::after {
	animation: espt-pds-ping 1.9s cubic-bezier(0, 0, 0.2, 1) infinite;
	background: currentColor;
	border-radius: 50%;
	content: "";
	inset: 0;
	position: absolute;
}

.espt-block-pd-stock.is-pulse .espt-pds.is-out .espt-pds-dot::after {
	animation: none;
}

.espt-block-pd-stock.is-pulse .espt-pds.is-low .espt-pds-badge {
	animation: espt-pds-nudge 2.6s ease-in-out infinite;
}

@keyframes espt-pds-ping {
	0% {
		opacity: 0.5;
		transform: scale(1);
	}

	70%,
	100% {
		opacity: 0;
		transform: scale(2.6);
	}
}

@keyframes espt-pds-nudge {
	0%,
	86%,
	100% {
		transform: none;
	}

	90% {
		transform: translateX(-2px);
	}

	94% {
		transform: translateX(2px);
	}
}

/* ---------------------------------------------------------------- the note */
.espt-block-pd-stock .espt-pds-note {
	color: var(--note-color, var(--bd-muted, #64748b));
	display: block;
	font-size: calc(var(--size, 14px) * 0.88);
	line-height: 1.55;
	margin-top: 6px;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.espt-block-pd-stock .espt-pds-note:empty,
.espt-block-pd-stock.is-note-when-low .espt-pds:not(.is-low) .espt-pds-note,
.espt-block-pd-stock.is-note-when-out .espt-pds:not(.is-out) .espt-pds-note {
	display: none;
}

/* Hide the badge while there is plenty in stock. */
.espt-block-pd-stock.is-hide-in .espt-pds.is-in {
	display: none;
}

/* …except in the editor, where the block would otherwise be invisible. */
.espt-block-pd-stock.is-hide-in .espt-pds.is-in.is-preview {
	display: block;
	opacity: 0.5;
}

/* ------------------------------------------------------------- alignment */
.espt-block-pd-stock.is-text-align-center .espt-pds {
	text-align: center;
}

.espt-block-pd-stock.is-text-align-center .espt-pds-badge {
	justify-content: center;
}

.espt-block-pd-stock.is-text-align-right .espt-pds {
	text-align: right;
}

.espt-block-pd-stock.is-text-align-right .espt-pds-badge {
	justify-content: flex-end;
}

.espt-block-pd-stock.is-full .espt-pds-badge {
	display: flex;
	width: 100%;
}

/* --------------------------------------------------------- design: solid */
.espt-block-pd-stock.is-design-solid .espt-pds-badge {
	background: var(--c);
	box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--c) 85%, transparent);
	color: #fff;
}

.espt-block-pd-stock.is-design-solid .espt-pds-qty {
	background: rgba(255, 255, 255, 0.24);
}

.espt-block-pd-stock.is-design-solid .espt-pds-badge:hover {
	transform: translateY(-1px);
}

/* ------------------------------------------------------- design: outline */
.espt-block-pd-stock.is-design-outline .espt-pds-badge {
	background: transparent;
	border-color: currentColor;
	border-width: 2px;
	color: var(--c);
}

/* ---------------------------------------------------------- design: soft */
.espt-block-pd-stock.is-design-soft .espt-pds-badge {
	border-color: color-mix(in srgb, var(--c) 22%, transparent);
	border-left-color: var(--c);
	border-left-width: 4px;
	border-radius: min(var(--radius, 999px), 12px);
	padding-left: max(var(--pad-x, 14px), 12px);
}

/* ------------------------------------------------------- design: minimal */
.espt-block-pd-stock.is-design-minimal .espt-pds-badge {
	background: transparent;
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}

.espt-block-pd-stock.is-design-minimal .espt-pds-qty {
	background: color-mix(in srgb, currentColor 12%, transparent);
}

/* -------------------------------------------------------- design: ribbon */
.espt-block-pd-stock.is-design-ribbon .espt-pds-badge {
	background: var(--c);
	border-radius: min(var(--radius, 999px), 6px);
	box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.6);
	clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
	color: #fff;
	flex-wrap: nowrap;
	padding-right: calc(var(--pad-x, 14px) + 15px);
}

.espt-block-pd-stock.is-design-ribbon .espt-pds-t {
	overflow-wrap: break-word;
}

.espt-block-pd-stock.is-design-ribbon .espt-pds-qty {
	background: rgba(255, 255, 255, 0.24);
}

/* ---------------------------------------------------------- design: card */
.espt-block-pd-stock.is-design-card .espt-pds {
	background: var(--bg);
	border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
	border-radius: min(var(--radius, 999px), 16px);
	display: block;
	padding: max(var(--pad-y, 8px), 12px) max(var(--pad-x, 14px), 14px);
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.espt-block-pd-stock.is-design-card .espt-pds:hover {
	box-shadow: 0 14px 30px -20px rgba(15, 23, 42, 0.45);
	transform: translateY(-2px);
}

.espt-block-pd-stock.is-design-card .espt-pds-badge,
.espt-block-pd-stock.is-design-strip .espt-pds-badge {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	display: flex;
	padding: 0;
	width: 100%;
}

.espt-block-pd-stock.is-design-card .espt-pds-ic {
	background: var(--c);
	border-radius: 50%;
	color: #fff;
	height: 1.95em;
	width: 1.95em;
}

.espt-block-pd-stock.is-design-card .espt-pds-dot {
	box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}

.espt-block-pd-stock.is-design-card .espt-pds-qty,
.espt-block-pd-stock.is-design-strip .espt-pds-qty {
	margin-left: auto;
}

.espt-block-pd-stock.is-design-card .espt-pds-note,
.espt-block-pd-stock.is-design-strip .espt-pds-note {
	margin-top: 5px;
}

/* --------------------------------------------------------- design: strip */
.espt-block-pd-stock.is-design-strip .espt-pds {
	background: var(--bg);
	border-left: 4px solid var(--c);
	border-radius: min(var(--radius, 999px), 12px);
	display: block;
	padding: max(var(--pad-y, 8px), 10px) max(var(--pad-x, 14px), 12px);
	width: 100%;
}

/* ----------------------------------------------------- entrance animation
   `backwards`, never `forwards`/`both`: a finished animation that still owns
   `transform: none` outranks the card/solid hover lift and kills it. */
.espt-block-pd-stock.is-anim-fade .espt-pds {
	animation: espt-pds-fade 0.5s ease backwards;
}

.espt-block-pd-stock.is-anim-up .espt-pds {
	animation: espt-pds-up 0.5s ease backwards;
}

.espt-block-pd-stock.is-anim-pop .espt-pds {
	animation: espt-pds-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.espt-block-pd-stock.is-anim-slide .espt-pds {
	animation: espt-pds-slide 0.5s ease backwards;
}

@keyframes espt-pds-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes espt-pds-up {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes espt-pds-pop {
	from {
		opacity: 0;
		transform: scale(0.86);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes espt-pds-slide {
	from {
		opacity: 0;
		transform: translateX(-18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* The editor-only hint under a product-less preview. */
.espt-block-pd-stock .espt-block-note {
	color: var(--bd-muted, #64748b);
	font-size: 13px;
	line-height: 1.5;
	margin: 8px 0 0;
}

/* ------------------------------------------------------------- ≥ tablet */
@media (min-width: 768px) {

	.espt-block-pd-stock.is-design-card .espt-pds {
		padding: max(var(--pad-y, 8px), 14px) max(var(--pad-x, 14px), 18px);
	}

	.espt-block-pd-stock.is-design-strip .espt-pds {
		padding: max(var(--pad-y, 8px), 12px) max(var(--pad-x, 14px), 16px);
	}
}

/* ------------------------------------------------------------ ≥ desktop */
@media (min-width: 1024px) {

	.espt-block-pd-stock .espt-pds-badge {
		line-height: 1.25;
	}
}

/* Each animated selector is repeated in full: a shorter one (…-pd-stock
   .espt-pds) would lose the cascade to .is-anim-up / .is-pulse and the motion
   would keep running. */
@media (prefers-reduced-motion: reduce) {

	.espt-block-pd-stock .espt-pds,
	.espt-block-pd-stock .espt-pds-badge,
	.espt-block-pd-stock .espt-pds-dot::after,
	.espt-block-pd-stock.is-anim-fade .espt-pds,
	.espt-block-pd-stock.is-anim-up .espt-pds,
	.espt-block-pd-stock.is-anim-pop .espt-pds,
	.espt-block-pd-stock.is-anim-slide .espt-pds,
	.espt-block-pd-stock.is-design-card .espt-pds,
	.espt-block-pd-stock.is-pulse .espt-pds-dot::after,
	.espt-block-pd-stock.is-pulse .espt-pds.is-low .espt-pds-badge {
		animation: none;
		transition: none;
	}

	.espt-block-pd-stock.is-design-card .espt-pds:hover,
	.espt-block-pd-stock.is-design-solid .espt-pds-badge:hover {
		transform: none;
	}
}