/* Product Short Description — .espt-block-pd-short-desc
 * vars: --size --lh --p-gap --list-cols --bullet-size --heading-size --pad
 *       --radius --clamp-lines --attn-speed
 *       --text-color --heading-color --accent-color --bullet-color
 *       --bg-color --border-color
 * classes: is-design-{plain|soft|card|outline|quote|notice|gradient|dark}
 *          is-text-align-{left|center|right} is-narrow is-reveal
 *          is-hover-{lift|glow|scale} is-attn-{pulse|bounce|float|heartbeat|glow|shake}
 * element:  .espt-sd (panel, + .espt-sd-fmt-{list|text}) > .espt-sd-head
 *           + .espt-sd-body + .espt-sd-more
 * JS adds:  .is-clamped / .is-open on .espt-sd, .is-seen for the reveal.
 */

/* editor-only hint when there is no product and no text yet */
.espt-block-pd-short-desc .espt-block-note {
	background: var(--bd-soft);
	border: 1px dashed var(--bd-soft-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 13px;
	margin: 0;
	padding: 12px 14px;
}

.espt-block-pd-short-desc .espt-sd {
	--fade: var(--bg-color, var(--bd-box-bg));
	color: var(--text-color, var(--bd-body));
	font-size: var(--size, 14.5px);
	line-height: var(--lh, 1.85);
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	word-break: break-word;
}

.espt-block-pd-short-desc.is-narrow .espt-sd {
	margin-inline: 0;
	max-width: 64ch;
}

.espt-block-pd-short-desc.is-narrow.is-text-align-center .espt-sd { margin-inline: auto; }
.espt-block-pd-short-desc.is-narrow.is-text-align-right .espt-sd { margin-inline: auto 0; }

.espt-block-pd-short-desc.is-text-align-center .espt-sd { text-align: center; }
.espt-block-pd-short-desc.is-text-align-right .espt-sd { text-align: right; }

/* ------------------------------------------------------------ heading */
.espt-block-pd-short-desc .espt-sd-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
	min-width: 0;
}

.espt-block-pd-short-desc.is-text-align-center .espt-sd-head { justify-content: center; }
.espt-block-pd-short-desc.is-text-align-right .espt-sd-head { justify-content: flex-end; }

.espt-block-pd-short-desc .espt-sd-title {
	color: var(--heading-color, var(--bd-ink));
	font-size: var(--heading-size, 17px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-pd-short-desc .espt-sd-hi {
	color: var(--accent-color, var(--bd-primary));
	font-size: calc(var(--heading-size, 17px) * 1.15);
}

/* --------------------------------------------------------- rich text */
.espt-block-pd-short-desc .espt-sd-body { min-width: 0; }

.espt-block-pd-short-desc .espt-sd-rich > :first-child { margin-top: 0; }
.espt-block-pd-short-desc .espt-sd-rich > :last-child { margin-bottom: 0; }

.espt-block-pd-short-desc .espt-sd-rich p { margin: 0 0 var(--p-gap, 10px); }

.espt-block-pd-short-desc .espt-sd-rich h1,
.espt-block-pd-short-desc .espt-sd-rich h2,
.espt-block-pd-short-desc .espt-sd-rich h3,
.espt-block-pd-short-desc .espt-sd-rich h4,
.espt-block-pd-short-desc .espt-sd-rich h5,
.espt-block-pd-short-desc .espt-sd-rich h6 {
	color: var(--heading-color, var(--bd-ink));
	font-size: calc(var(--size, 14.5px) * 1.15);
	line-height: 1.4;
	margin: 0 0 calc(var(--p-gap, 10px) * 0.7);
}

.espt-block-pd-short-desc .espt-sd-rich ul,
.espt-block-pd-short-desc .espt-sd-rich ol {
	margin: 0 0 var(--p-gap, 10px);
	padding-inline-start: 1.3em;
}

.espt-block-pd-short-desc .espt-sd-rich li { margin-bottom: calc(var(--p-gap, 10px) * 0.4); }
.espt-block-pd-short-desc .espt-sd-rich li::marker { color: var(--bullet-color, var(--accent-color, var(--bd-primary))); }

.espt-block-pd-short-desc .espt-sd-rich a {
	color: var(--accent-color, var(--bd-primary));
	text-decoration: underline;
	text-underline-offset: 2px;
}

.espt-block-pd-short-desc .espt-sd-rich strong,
.espt-block-pd-short-desc .espt-sd-rich b { color: var(--heading-color, var(--bd-ink)); }

.espt-block-pd-short-desc .espt-sd-rich img {
	border-radius: 10px;
	height: auto;
	max-width: 100%;
}

.espt-block-pd-short-desc .espt-sd-rich blockquote {
	border-inline-start: 3px solid var(--accent-color, var(--bd-primary));
	margin: 0 0 var(--p-gap, 10px);
	padding-inline-start: 12px;
}

/* Wide tables scroll instead of pushing the page sideways. */
.espt-block-pd-short-desc .espt-sd-rich table {
	border-collapse: collapse;
	display: block;
	margin: 0 0 var(--p-gap, 10px);
	max-width: 100%;
	overflow-x: auto;
	width: max-content;
}

.espt-block-pd-short-desc .espt-sd-rich th,
.espt-block-pd-short-desc .espt-sd-rich td {
	border: 1px solid var(--border-color, var(--bd-line));
	padding: 6px 10px;
}

/* -------------------------------------------------------- tick list */
.espt-block-pd-short-desc .espt-sd-list {
	display: grid;
	gap: var(--p-gap, 10px) 18px;
	grid-template-columns: repeat(var(--list-cols, 1), minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.espt-block-pd-short-desc .espt-sd-item {
	align-items: flex-start;
	display: flex;
	gap: 9px;
	margin: 0;
	min-width: 0;
	text-align: start;
}

.espt-block-pd-short-desc.is-text-align-center .espt-sd-item { justify-content: center; text-align: center; }
.espt-block-pd-short-desc.is-text-align-right .espt-sd-item { flex-direction: row-reverse; text-align: right; }

.espt-block-pd-short-desc .espt-sd-lt { min-width: 0; }

.espt-block-pd-short-desc .espt-sd-b {
	color: var(--bullet-color, var(--accent-color, var(--bd-primary)));
	flex: 0 0 auto;
	font-size: var(--bullet-size, 18px);
	/* Centre the icon on the first text line — never above it, or a big
	   bullet would poke out of the row (and get clipped when collapsed). */
	margin-top: max(0px, calc((var(--size, 14.5px) * var(--lh, 1.85) - var(--bullet-size, 18px)) / 2));
}

.espt-block-pd-short-desc .espt-sd-dot {
	background: currentcolor;
	border-radius: 50%;
	display: block;
	height: calc(var(--bullet-size, 18px) * 0.36);
	margin-top: max(0px, calc((var(--size, 14.5px) * var(--lh, 1.85) - var(--bullet-size, 18px) * 0.36) / 2));
	width: calc(var(--bullet-size, 18px) * 0.36);
}

/* ---------------------------------------------------- read more/less */
.espt-block-pd-short-desc .espt-sd.is-clamped .espt-sd-body {
	max-height: calc(var(--clamp-lines, 3) * var(--lh, 1.85) * var(--size, 14.5px));
	overflow: hidden;
	position: relative;
}

/* A tick list is one row per "line", and rows are separated by --p-gap —
   count that in, or "4 lines" would only ever show two points. */
.espt-block-pd-short-desc .espt-sd-fmt-list.is-clamped .espt-sd-body {
	max-height: calc(var(--clamp-lines, 3) * (var(--lh, 1.85) * var(--size, 14.5px) + var(--p-gap, 10px)) - var(--p-gap, 10px));
}

.espt-block-pd-short-desc .espt-sd.is-clamped .espt-sd-body::after {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--fade));
	bottom: 0;
	content: "";
	height: 2.4em;
	inset-inline: 0;
	pointer-events: none;
	position: absolute;
}

.espt-block-pd-short-desc .espt-sd-more {
	align-items: center;
	background: none;
	border: 0;
	color: var(--accent-color, var(--bd-primary));
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: calc(var(--size, 14.5px) * 0.95);
	font-weight: 700;
	gap: 6px;
	margin-top: 8px;
	padding: 6px 0;
	text-decoration: none;
}

/* The button is server-rendered with [hidden]; JS un-hides it only when the
   copy really is taller than the collapsed height. `display: inline-flex`
   above out-ranks the UA `[hidden] { display: none }`, so restate it. */
.espt-block-pd-short-desc .espt-sd-more[hidden] { display: none; }

.espt-block-pd-short-desc .espt-sd-more-t { min-width: 0; overflow-wrap: anywhere; }
.espt-block-pd-short-desc .espt-sd-more:hover { text-decoration: underline; }
.espt-block-pd-short-desc .espt-sd-more:focus-visible { outline: 2px solid var(--accent-color, var(--bd-primary)); outline-offset: 3px; }
.espt-block-pd-short-desc .espt-sd-mi { transition: transform 0.25s ease; }
.espt-block-pd-short-desc .espt-sd.is-open .espt-sd-mi { transform: rotate(180deg); }

/* ------------------------------------------------------------ panels */
.espt-block-pd-short-desc:not(.is-design-plain) .espt-sd {
	border-radius: var(--radius, 14px);
	padding: var(--pad, 15px);
}

.espt-block-pd-short-desc.is-design-soft .espt-sd {
	background: var(--bg-color, var(--bd-soft));
	border: 1px solid var(--border-color, var(--bd-soft-line));
	border-inline-start: 4px solid var(--accent-color, var(--bd-primary));
	--fade: var(--bg-color, var(--bd-soft));
}

.espt-block-pd-short-desc.is-design-card .espt-sd {
	background: var(--bg-color, var(--bd-box-bg));
	border: 1px solid var(--border-color, var(--bd-box-line));
	box-shadow: 0 6px 24px -12px rgba(15, 23, 42, 0.22);
	--fade: var(--bg-color, var(--bd-box-bg));
}

.espt-block-pd-short-desc.is-design-outline .espt-sd {
	background: var(--bg-color, transparent);
	border: 2px dashed var(--border-color, color-mix(in srgb, var(--accent-color, var(--bd-primary)) 45%, var(--bd-line)));
	--fade: var(--bg-color, var(--bd-box-bg));
}

.espt-block-pd-short-desc.is-design-quote .espt-sd {
	background: var(--bg-color, color-mix(in srgb, var(--accent-color, var(--bd-primary)) 6%, transparent));
	border-inline-start: 3px solid var(--accent-color, var(--bd-primary));
	font-style: italic;
	--fade: var(--bg-color, var(--bd-box-bg));
}

.espt-block-pd-short-desc.is-design-quote .espt-sd-title,
.espt-block-pd-short-desc.is-design-quote .espt-sd-lt strong { font-style: normal; }

.espt-block-pd-short-desc .espt-sd-quote {
	color: var(--accent-color, var(--bd-primary));
	font-size: calc(var(--size, 14.5px) * 2.1);
	margin-bottom: 4px;
	opacity: 0.35;
}

.espt-block-pd-short-desc.is-text-align-center .espt-sd-quote { display: flex; justify-content: center; }
.espt-block-pd-short-desc.is-text-align-right .espt-sd-quote { display: flex; justify-content: flex-end; }

.espt-block-pd-short-desc.is-design-notice .espt-sd {
	background: var(--bg-color, color-mix(in srgb, var(--accent-color, var(--bd-accent)) 12%, #fff));
	border: 1px solid var(--border-color, color-mix(in srgb, var(--accent-color, var(--bd-accent)) 38%, #fff));
	--fade: var(--bg-color, color-mix(in srgb, var(--accent-color, var(--bd-accent)) 12%, #fff));
}

.espt-block-pd-short-desc.is-design-notice .espt-sd::before {
	background: var(--accent-color, var(--bd-accent));
	border-radius: var(--radius, 14px) 0 0 var(--radius, 14px);
	content: "";
	inset-block: 0;
	inset-inline-start: 0;
	position: absolute;
	width: 5px;
}

.espt-block-pd-short-desc.is-design-gradient .espt-sd {
	background: var(--bg-color, linear-gradient(135deg, color-mix(in srgb, var(--accent-color, var(--bd-primary)) 14%, #fff), color-mix(in srgb, var(--bd-accent) 14%, #fff)));
	border: 1px solid color-mix(in srgb, var(--accent-color, var(--bd-primary)) 22%, #fff);
	--fade: var(--bg-color, color-mix(in srgb, var(--bd-accent) 14%, #fff));
}

.espt-block-pd-short-desc.is-design-dark .espt-sd {
	background: var(--bg-color, var(--bd-deep));
	border: 1px solid var(--border-color, color-mix(in srgb, #ffffff 14%, transparent));
	color: var(--text-color, #dbeafe);
	--fade: var(--bg-color, var(--bd-deep));
}

.espt-block-pd-short-desc.is-design-dark .espt-sd-title,
.espt-block-pd-short-desc.is-design-dark .espt-sd-rich strong,
.espt-block-pd-short-desc.is-design-dark .espt-sd-rich b { color: var(--heading-color, #ffffff); }

.espt-block-pd-short-desc.is-design-dark .espt-sd-b,
.espt-block-pd-short-desc.is-design-dark .espt-sd-hi,
.espt-block-pd-short-desc.is-design-dark .espt-sd-more,
.espt-block-pd-short-desc.is-design-dark .espt-sd-rich a { color: var(--bullet-color, var(--accent-color, var(--bd-accent))); }

/* --------------------------------------------------------- hover fx */
.espt-block-pd-short-desc.is-hover-lift:not(.is-design-plain) .espt-sd:hover {
	box-shadow: 0 18px 36px -18px rgba(15, 23, 42, 0.4);
	transform: translateY(-3px);
}

.espt-block-pd-short-desc.is-hover-glow:not(.is-design-plain) .espt-sd:hover {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color, var(--bd-primary)) 28%, transparent);
}

.espt-block-pd-short-desc.is-hover-scale:not(.is-design-plain) .espt-sd:hover { transform: scale(1.012); }

/* ------------------------------------------------- reveal the lines */
.espt-block-pd-short-desc.is-reveal .espt-sd-item,
.espt-block-pd-short-desc.is-reveal .espt-sd-rich > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.espt-block-pd-short-desc.is-reveal .espt-sd.is-seen .espt-sd-item,
.espt-block-pd-short-desc.is-reveal .espt-sd.is-seen .espt-sd-rich > * {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------- attention animations */
.espt-block-pd-short-desc.is-attn-pulse .espt-sd { animation: espt-sd-pulse var(--attn-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-short-desc.is-attn-bounce .espt-sd { animation: espt-sd-bounce var(--attn-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-short-desc.is-attn-float .espt-sd { animation: espt-sd-float var(--attn-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-short-desc.is-attn-heartbeat .espt-sd { animation: espt-sd-heartbeat var(--attn-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-short-desc.is-attn-glow .espt-sd { animation: espt-sd-glow var(--attn-speed, 1.8s) ease-in-out infinite; }
.espt-block-pd-short-desc.is-attn-shake .espt-sd { animation: espt-sd-shake var(--attn-speed, 1.8s) ease-in-out infinite; }

@keyframes espt-sd-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.02); }
}

@keyframes espt-sd-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-7px); }
	60% { transform: translateY(-4px); }
}

@keyframes espt-sd-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes espt-sd-heartbeat {
	0%, 100% { transform: scale(1); }
	14% { transform: scale(1.035); }
	28% { transform: scale(1); }
	42% { transform: scale(1.035); }
	56% { transform: scale(1); }
}

@keyframes espt-sd-glow {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color, var(--bd-primary)) 35%, transparent); }
	50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-color, var(--bd-primary)) 0%, transparent); }
}

@keyframes espt-sd-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

/* ------------------------------------------------------- tablet/up */
@media (min-width: 768px) {
	.espt-block-pd-short-desc .espt-sd-head { gap: 10px; margin-bottom: 12px; }
	.espt-block-pd-short-desc .espt-sd-item { gap: 10px; }
	.espt-block-pd-short-desc .espt-sd-list { gap: var(--p-gap, 10px) 24px; }
}

@media (min-width: 1024px) {
	.espt-block-pd-short-desc.is-narrow .espt-sd { max-width: 68ch; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-pd-short-desc .espt-sd,
	.espt-block-pd-short-desc .espt-sd-mi,
	.espt-block-pd-short-desc.is-reveal .espt-sd-item,
	.espt-block-pd-short-desc.is-reveal .espt-sd-rich > * {
		animation: none;
		transition: none;
	}

	.espt-block-pd-short-desc.is-reveal .espt-sd-item,
	.espt-block-pd-short-desc.is-reveal .espt-sd-rich > * {
		opacity: 1;
		transform: none;
	}
}