/**
 * Spec Sheet — esalespage/spec-sheet.
 *
 * Mobile-first: base rules are the phone, 768px the tablet, 1024px the
 * computer. Sizes arrive as --sp-* custom properties from the block root;
 * everything private to this file is --_name.
 *
 * Three independent axes, each a class on the root:
 *   is-skin-*      the surface (light / soft / plain / outline / dark / glass / gradient / brutal)
 *   is-template-*  how ONE row looks (rows, zebra, leader, boxed, cards, tiles, joined,
 *                  chips, datasheet, bento, iconlist, underline)
 *   .espt-sp.is-gm-*  how the GROUPS are arranged (stack / accordion / tabs / side / columns)
 * A skin only sets colours (the --_ tokens); a template only lays rows out
 * and reads those tokens — which is what lets any of the 12 × 8 combine.
 *
 * Accordion, tabs, search and "show all" take effect only under .is-js, which
 * spec-sheet.js adds: without JavaScript everything is simply open.
 */

/* ------------------------------------------------------------------ root */

.espt-block-spec-sheet { margin-bottom: 24px; }

.espt-block-spec-sheet .espt-sp {
	--_a: var(--sp-accent, var(--bd-primary, #16a34a));
	--_a2: var(--sp-accent2, color-mix(in srgb, var(--_a) 55%, #0ea5e9));
	--_bg: var(--sp-bg, #fff);
	--_card: var(--sp-card, #f8fafc);
	--_line: var(--sp-line, #e6ebf1);
	--_head: var(--sp-head-c, #0f172a);
	--_group: var(--sp-group-c, #0f172a);
	--_label: var(--sp-label-c, #64748b);
	--_value: var(--sp-value-c, #0f172a);
	--_icon: var(--sp-icon-c, var(--_a));
	--_star: var(--sp-star-bg, color-mix(in srgb, var(--_a) 9%, transparent));
	--_track: var(--sp-track, color-mix(in srgb, var(--_value) 11%, transparent));
	--_r: var(--sp-r, 18px);
	--_pad: var(--sp-pad, 16px);
	--_gap: var(--sp-gap, 12px);
	--_py: 12px;
	--_in: espt-sp-in-up;

	background: var(--_bg);
	border-radius: var(--_r);
	color: var(--_value);
	margin: 0 auto;
	max-width: var(--sp-mw, none);
	min-width: 0;
	padding: var(--_pad);
	position: relative;
}

.espt-block-spec-sheet.is-density-compact .espt-sp { --_py: 8px; }
.espt-block-spec-sheet.is-density-roomy .espt-sp { --_py: 17px; }

.espt-block-spec-sheet.is-shadow-soft .espt-sp { box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 36px -18px rgba(15, 23, 42, .28); }
.espt-block-spec-sheet.is-shadow-strong .espt-sp { box-shadow: 0 28px 60px -22px rgba(15, 23, 42, .5); }
.espt-block-spec-sheet.is-shadow-glow .espt-sp { box-shadow: 0 20px 54px -18px color-mix(in srgb, var(--_a) 70%, transparent); }

/* ================================================================ SKINS */

.espt-block-spec-sheet.is-skin-light .espt-sp { border: 1px solid var(--_line); }

.espt-block-spec-sheet.is-skin-soft .espt-sp {
	--_bg: var(--sp-bg, color-mix(in srgb, var(--_a) 7%, #fff));
	--_card: var(--sp-card, #fff);
	--_line: var(--sp-line, color-mix(in srgb, var(--_a) 18%, #fff));
}

.espt-block-spec-sheet.is-skin-plain .espt-sp { --_bg: var(--sp-bg, transparent); --_pad: 0px; border-radius: 0; box-shadow: none; }

.espt-block-spec-sheet.is-skin-outline .espt-sp {
	--_bg: var(--sp-bg, transparent);
	--_card: var(--sp-card, transparent);
	border: 1.5px solid var(--_line);
	box-shadow: none;
}

.espt-block-spec-sheet.is-skin-dark .espt-sp {
	--_bg: var(--sp-bg, #0b1220);
	--_card: var(--sp-card, #121c31);
	--_line: var(--sp-line, rgba(255, 255, 255, .11));
	--_head: var(--sp-head-c, #fff);
	--_group: var(--sp-group-c, #fff);
	--_label: var(--sp-label-c, #94a3b8);
	--_value: var(--sp-value-c, #f1f5f9);
	--_star: var(--sp-star-bg, color-mix(in srgb, var(--_a) 20%, transparent));
}

.espt-block-spec-sheet.is-skin-glass .espt-sp {
	--_card: var(--sp-card, rgba(255, 255, 255, .13));
	--_line: var(--sp-line, rgba(255, 255, 255, .24));
	--_head: var(--sp-head-c, #fff);
	--_group: var(--sp-group-c, #fff);
	--_label: var(--sp-label-c, rgba(255, 255, 255, .78));
	--_value: var(--sp-value-c, #fff);
	--_icon: var(--sp-icon-c, #fff);
	--_star: var(--sp-star-bg, rgba(255, 255, 255, .2));
	--_track: var(--sp-track, rgba(255, 255, 255, .25));

	background: var(--sp-bg, linear-gradient(135deg, var(--_a), var(--_a2)));
}

.espt-block-spec-sheet.is-skin-glass .espt-sp-g,
.espt-block-spec-sheet.is-skin-glass .espt-sp-hi { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.espt-block-spec-sheet.is-skin-glass .espt-sp-h strong,
.espt-block-spec-sheet.is-skin-glass .espt-sp-vt strong { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .6); text-underline-offset: .18em; }
.espt-block-spec-sheet.is-skin-glass .espt-sp-eye { background: rgba(255, 255, 255, .2); color: #fff; }
.espt-block-spec-sheet.is-skin-glass .espt-sp-mf { background: #fff; }
/* the accent is the BACKGROUND here, so nothing may be drawn in it */
.espt-block-spec-sheet.is-skin-glass .espt-sp-hu,
.espt-block-spec-sheet.is-skin-glass .espt-sp-gc { color: #fff; }
.espt-block-spec-sheet.is-skin-glass .espt-sp-gc { background: rgba(255, 255, 255, .22); }
.espt-block-spec-sheet.is-skin-glass .espt-sp-tab.is-on { background: #fff; border-color: #fff; color: var(--_a); }
.espt-block-spec-sheet.is-skin-glass .espt-sp-tab.is-on .espt-sp-gc { background: color-mix(in srgb, var(--_a) 15%, transparent); color: var(--_a); }
.espt-block-spec-sheet.is-skin-glass .espt-sp-badge { background: var(--sp-badge-bg, #fff); color: var(--sp-badge-c, var(--_a)); }
.espt-block-spec-sheet.is-skin-glass .espt-sp-r mark { background: rgba(255, 255, 255, .35); }

/* gradient header: the heading band runs to the sheet's edges */
.espt-block-spec-sheet.is-skin-gradient .espt-sp { border: 1px solid var(--_line); overflow: hidden; }

.espt-block-spec-sheet.is-skin-gradient .espt-sp-head {
	--_head: var(--sp-head-c, #fff);

	background: linear-gradient(120deg, var(--_a), var(--_a2));
	margin: calc(var(--_pad) * -1) calc(var(--_pad) * -1) var(--_pad);
	padding: calc(var(--_pad) * 1.15) var(--_pad);
}

.espt-block-spec-sheet.is-skin-gradient .espt-sp-head .espt-sp-eye { background: rgba(255, 255, 255, .22); color: #fff; }
.espt-block-spec-sheet.is-skin-gradient .espt-sp-head .espt-sp-h strong { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-underline-offset: .18em; }
.espt-block-spec-sheet.is-skin-gradient .espt-sp-head .espt-sp-sub { color: rgba(255, 255, 255, .88); }

.espt-block-spec-sheet.is-skin-brutal .espt-sp {
	--_r: 0px;
	--_line: var(--sp-line, #0b0f19);
	--_card: var(--sp-card, #fff);

	border: 3px solid #0b0f19;
	box-shadow: 8px 8px 0 #0b0f19;
}

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

.espt-block-spec-sheet .espt-sp-head { margin-bottom: 18px; min-width: 0; }
.espt-block-spec-sheet.is-text-align-center .espt-sp-head { text-align: center; }
.espt-block-spec-sheet.is-text-align-right .espt-sp-head { text-align: right; }

.espt-block-spec-sheet .espt-sp-eye {
	background: color-mix(in srgb, var(--_a) 12%, transparent);
	border-radius: 999px;
	color: var(--_a);
	display: inline-block;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .13em;
	margin-bottom: 9px;
	padding: .38em .95em;
	text-transform: uppercase;
}

.espt-block-spec-sheet .espt-sp-h {
	color: var(--_head);
	font-size: var(--sp-hds, 22px);
	font-weight: 800;
	line-height: 1.25;
	margin: 0;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.espt-block-spec-sheet .espt-sp-h strong { color: var(--_a); font-weight: inherit; }
.espt-block-spec-sheet .espt-sp-sub { color: var(--_label); font-size: 15px; line-height: 1.6; margin: 7px 0 0; }

/* ------------------------------------------------------------ highlights */

.espt-block-spec-sheet .espt-sp-hl {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(var(--sp-hc, 2), minmax(0, 1fr));
	margin-bottom: 18px;
}

.espt-block-spec-sheet .espt-sp-hi {
	background: var(--_card);
	border: 1px solid var(--_line);
	border-radius: calc(var(--_r) * .75);
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 13px 14px;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}

.espt-block-spec-sheet .espt-sp-hic { color: var(--_icon); display: inline-flex; line-height: 0; margin-bottom: 4px; }
.espt-block-spec-sheet .espt-sp-hic svg { height: 22px; width: 22px; }
.espt-block-spec-sheet .espt-sp-hn { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0 4px; min-width: 0; }

.espt-block-spec-sheet .espt-sp-hv {
	color: var(--_head);
	font-size: var(--sp-hs, 24px);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.espt-block-spec-sheet .espt-sp-hu { color: var(--_a); font-size: 13px; font-weight: 700; }
.espt-block-spec-sheet .espt-sp-hlb { color: var(--_label); font-size: 12.5px; line-height: 1.35; }

.espt-block-spec-sheet.is-hl-style-strip .espt-sp-hl { background: var(--_line); border: 1px solid var(--_line); border-radius: calc(var(--_r) * .75); gap: 1px; overflow: hidden; }
.espt-block-spec-sheet.is-hl-style-strip .espt-sp-hi { border: 0; border-radius: 0; }
.espt-block-spec-sheet.is-hl-style-plain .espt-sp-hi { background: none; border: 0; border-left: 3px solid var(--_a); border-radius: 0; padding: 2px 0 2px 12px; }

.espt-block-spec-sheet.is-hl-style-accent .espt-sp-hi { background: linear-gradient(140deg, var(--_a), var(--_a2)); border: 0; }
.espt-block-spec-sheet.is-hl-style-accent .espt-sp-hv,
.espt-block-spec-sheet.is-hl-style-accent .espt-sp-hic,
.espt-block-spec-sheet.is-hl-style-accent .espt-sp-hu { color: #fff; }
.espt-block-spec-sheet.is-hl-style-accent .espt-sp-hlb { color: rgba(255, 255, 255, .85); }

.espt-block-spec-sheet.is-hl-style-ring .espt-sp-hi { align-items: center; text-align: center; }
.espt-block-spec-sheet.is-hl-style-ring .espt-sp-hn { justify-content: center; }
.espt-block-spec-sheet.is-hl-style-ring .espt-sp-hic { border: 2px solid color-mix(in srgb, var(--_a) 35%, transparent); border-radius: 50%; margin-bottom: 7px; padding: 10px; }

.espt-block-spec-sheet.is-hl-style-gradient .espt-sp-hv {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(100deg, var(--_a), var(--_a2));
	color: transparent;
}

/* ---------------------------------------------------------------- search */

.espt-block-spec-sheet .espt-sp-tools { margin-bottom: 14px; }
.espt-block-spec-sheet .espt-sp-qw { display: block; position: relative; }
.espt-block-spec-sheet .espt-sp-qi { color: var(--_label); left: 13px; line-height: 0; pointer-events: none; position: absolute; top: 50%; translate: 0 -50%; }
.espt-block-spec-sheet .espt-sp-qi svg { height: 17px; width: 17px; }

.espt-block-spec-sheet .espt-sp-q {
	-webkit-appearance: none;
	appearance: none;
	background: var(--_card);
	border: 1.5px solid var(--_line);
	border-radius: 12px;
	box-shadow: none;
	color: var(--_value);
	font: inherit;
	font-size: 16px; /* under 16px iOS zooms the page on focus */
	margin: 0;
	min-height: 46px;
	padding: 10px 14px 10px 40px;
	transition: border-color .25s ease, box-shadow .25s ease;
	width: 100%;
}

.espt-block-spec-sheet .espt-sp-q::placeholder { color: var(--_label); opacity: .8; }
.espt-block-spec-sheet .espt-sp-q:focus { border-color: var(--_a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_a) 22%, transparent); outline: none; }
.espt-block-spec-sheet .espt-sp-none { color: var(--_label); font-size: 14px; margin: 6px 0 0; padding: 18px 0; text-align: center; }
.espt-block-spec-sheet .espt-sp-none[hidden] { display: none; }
.espt-block-spec-sheet .espt-sp-r mark { background: color-mix(in srgb, var(--_a) 28%, transparent); border-radius: 3px; color: inherit; padding: 0 1px; }

/* ---------------------------------------------------------------- groups */

.espt-block-spec-sheet .espt-sp-body { min-width: 0; }
.espt-block-spec-sheet .espt-sp-groups { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.espt-block-spec-sheet .espt-sp-g { min-width: 0; }

.espt-block-spec-sheet .espt-sp-gt {
	align-items: center;
	color: var(--_group);
	display: flex;
	font-size: 16px;
	font-weight: 800;
	gap: 9px;
	line-height: 1.3;
	margin: 0 0 10px;
	min-width: 0;
	padding: 0;
}

.espt-block-spec-sheet .espt-sp-gn { min-width: 0; overflow-wrap: anywhere; }

.espt-block-spec-sheet .espt-sp-gc {
	background: color-mix(in srgb, var(--_a) 13%, transparent);
	border-radius: 999px;
	color: var(--_a);
	flex: none;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	padding: 4px 8px;
}

.espt-block-spec-sheet.is-group-title-bar .espt-sp-gt::before { background: var(--_a); border-radius: 3px; content: ""; flex: none; height: 1.05em; width: 4px; }
.espt-block-spec-sheet.is-group-title-pill .espt-sp-gn { background: color-mix(in srgb, var(--_a) 12%, transparent); border-radius: 999px; color: var(--_a); font-size: 13px; padding: .4em 1em; }
.espt-block-spec-sheet.is-group-title-line .espt-sp-gt::after { background: var(--_line); content: ""; flex: 1 1 20px; height: 1px; }
.espt-block-spec-sheet.is-group-title-filled .espt-sp-gt { background: var(--_a); border-radius: 10px; color: #fff; padding: 9px 13px; }
.espt-block-spec-sheet.is-group-title-filled .espt-sp-gc { background: rgba(255, 255, 255, .25); color: #fff; }
.espt-block-spec-sheet.is-group-title-caps .espt-sp-gt { color: var(--_label); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }

/* ---- accordion ---- */
.espt-block-spec-sheet .espt-sp.is-gm-accordion .espt-sp-groups { gap: 10px; }

.espt-block-spec-sheet .espt-sp.is-gm-accordion .espt-sp-g {
	background: var(--_card);
	border: 1px solid var(--_line);
	border-radius: calc(var(--_r) * .7);
	overflow: hidden;
	transition: border-color .3s ease, box-shadow .3s ease;
}

.espt-block-spec-sheet .espt-sp.is-gm-accordion .espt-sp-g.is-open { border-color: color-mix(in srgb, var(--_a) 45%, var(--_line)); }
.espt-block-spec-sheet .espt-sp.is-gm-accordion .espt-sp-gt { margin: 0; }
.espt-block-spec-sheet .espt-sp.is-gm-accordion .espt-sp-gt::before,
.espt-block-spec-sheet .espt-sp.is-gm-accordion .espt-sp-gt::after { content: none; }
.espt-block-spec-sheet .espt-sp.is-gm-accordion.is-group-title-filled .espt-sp-gt { background: none; padding: 0; }

.espt-block-spec-sheet .espt-sp-gb {
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	appearance: none;
	background: none;
	border: 0;
	color: inherit;
	box-shadow: none; /* the theme gives every <button> one */
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 9px;
	margin: 0;
	min-height: 50px;
	padding: 12px 14px;
	text-align: left;
	width: 100%;
}

.espt-block-spec-sheet .espt-sp-gb .espt-sp-gn { flex: 1 1 auto; }
.espt-block-spec-sheet .espt-sp-gb:focus-visible { outline: 3px solid var(--_a); outline-offset: -3px; }
.espt-block-spec-sheet .espt-sp-chev { flex: none; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.espt-block-spec-sheet .espt-sp-g.is-open .espt-sp-gb .espt-sp-chev { transform: rotate(180deg); }
.espt-block-spec-sheet .espt-sp.is-gm-accordion .espt-sp-gi { padding: 0 14px 12px; }

/* 0fr → 1fr animates a height nobody has to measure. */
.espt-block-spec-sheet .espt-sp.is-js.is-gm-accordion .espt-sp-gp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.espt-block-spec-sheet .espt-sp.is-js.is-gm-accordion .espt-sp-g.is-open .espt-sp-gp { grid-template-rows: 1fr; }
.espt-block-spec-sheet .espt-sp.is-js.is-gm-accordion .espt-sp-gi { min-height: 0; overflow: hidden; }
.espt-block-spec-sheet .espt-sp.is-js.is-gm-accordion .espt-sp-g:not(.is-open) .espt-sp-gi { visibility: hidden; transition: visibility 0s .45s; }

/* ---- tabs (and the side menu on a phone) ---- */
.espt-block-spec-sheet .espt-sp-nav {
	-webkit-overflow-scrolling: touch;
	display: flex;
	gap: 8px;
	margin: 0 calc(var(--_pad) * -1) 16px;
	overflow-x: auto;
	padding: 3px var(--_pad);
	scroll-padding: 0 var(--_pad);
	scrollbar-width: none;
}

.espt-block-spec-sheet .espt-sp-nav::-webkit-scrollbar { display: none; }
.espt-block-spec-sheet .espt-sp:not(.is-js) .espt-sp-nav { display: none; }

.espt-block-spec-sheet .espt-sp-tab {
	-webkit-tap-highlight-color: transparent;
	align-items: center;
	appearance: none;
	background: var(--_card);
	border: 1.5px solid var(--_line);
	border-radius: 999px;
	color: var(--_label);
	box-shadow: none; /* the theme gives every <button> one */
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	gap: 7px;
	line-height: 1.2;
	margin: 0;
	min-height: 42px;
	padding: 8px 16px;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
	white-space: nowrap;
}

.espt-block-spec-sheet .espt-sp-tab:hover { color: var(--_value); }
.espt-block-spec-sheet .espt-sp-tab:focus-visible { outline: 3px solid var(--_a); outline-offset: 2px; }
.espt-block-spec-sheet .espt-sp-tab.is-on { background: var(--_a); border-color: var(--_a); color: #fff; }
.espt-block-spec-sheet .espt-sp-tab.is-on .espt-sp-gc { background: rgba(255, 255, 255, .25); color: #fff; }

.espt-block-spec-sheet.is-tab-style-underline .espt-sp-nav { border-bottom: 1.5px solid var(--_line); gap: 4px; padding-bottom: 0; }
.espt-block-spec-sheet.is-tab-style-underline .espt-sp-tab { background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1.5px; padding: 8px 12px; }
.espt-block-spec-sheet.is-tab-style-underline .espt-sp-tab.is-on { background: none; border-bottom-color: var(--_a); color: var(--_a); }
.espt-block-spec-sheet.is-tab-style-underline .espt-sp-tab.is-on .espt-sp-gc { background: color-mix(in srgb, var(--_a) 13%, transparent); color: var(--_a); }

.espt-block-spec-sheet.is-tab-style-segment .espt-sp-nav { background: var(--_card); border: 1px solid var(--_line); border-radius: 14px; gap: 2px; margin-left: 0; margin-right: 0; padding: 4px; }
.espt-block-spec-sheet.is-tab-style-segment .espt-sp-tab { background: none; border: 0; border-radius: 10px; flex: 1 0 auto; justify-content: center; }
.espt-block-spec-sheet.is-tab-style-segment .espt-sp-tab.is-on { background: var(--_bg); box-shadow: 0 2px 8px rgba(15, 23, 42, .14); color: var(--_a); }
.espt-block-spec-sheet.is-skin-glass.is-tab-style-segment .espt-sp-tab.is-on,
.espt-block-spec-sheet.is-skin-plain.is-tab-style-segment .espt-sp-tab.is-on,
.espt-block-spec-sheet.is-skin-outline.is-tab-style-segment .espt-sp-tab.is-on { background: #fff; }
.espt-block-spec-sheet.is-tab-style-segment .espt-sp-tab.is-on .espt-sp-gc { background: color-mix(in srgb, var(--_a) 13%, transparent); color: var(--_a); }

.espt-block-spec-sheet.is-tab-style-boxed .espt-sp-tab { border-radius: 10px; }
.espt-block-spec-sheet.is-skin-brutal .espt-sp-tab { border-color: #0b0f19; border-radius: 0; border-width: 2px; }
.espt-block-spec-sheet.is-skin-brutal .espt-sp-tab.is-on { box-shadow: 3px 3px 0 #0b0f19; }

.espt-block-spec-sheet .espt-sp.is-js.is-gm-tabs .espt-sp-g:not(.is-open),
.espt-block-spec-sheet .espt-sp.is-js.is-gm-side .espt-sp-g:not(.is-open) { display: none; }
.espt-block-spec-sheet .espt-sp.is-js.is-gm-tabs .espt-sp-gt,
.espt-block-spec-sheet .espt-sp.is-js.is-gm-side .espt-sp-gt { display: none; }
.espt-block-spec-sheet .espt-sp.is-js.is-gm-tabs .espt-sp-g.is-open,
.espt-block-spec-sheet .espt-sp.is-js.is-gm-side .espt-sp-g.is-open { animation: espt-sp-tab-in .45s cubic-bezier(.2, .7, .2, 1); }

@keyframes espt-sp-tab-in { from { opacity: 0; transform: translateY(12px); } }

/* ---- columns ---- */
.espt-block-spec-sheet .espt-sp.is-gm-columns .espt-sp-groups { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* ---- while searching, every group is one open list ---- */
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-nav { display: none; }
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-g { display: block !important; }
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-gt { display: flex !important; }
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-gp { grid-template-rows: 1fr !important; }
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-gi { visibility: visible !important; }
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-g.is-empty { display: none !important; }
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-r.is-miss { display: none !important; }
.espt-block-spec-sheet .espt-sp.is-searching .espt-sp-morew { display: none; }

/* ---- "show all" ---- */
.espt-block-spec-sheet .espt-sp.is-js:not(.is-all):not(.is-searching) .espt-sp-r.is-extra { display: none; }
.espt-block-spec-sheet .espt-sp:not(.is-js) .espt-sp-morew { display: none; }
.espt-block-spec-sheet .espt-sp-morew { margin-top: 14px; text-align: center; }

.espt-block-spec-sheet .espt-sp-more {
	align-items: center;
	appearance: none;
	background: none;
	border: 1.5px solid var(--_line);
	border-radius: 999px;
	color: var(--_value);
	box-shadow: none; /* the theme gives every <button> one */
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	gap: 6px;
	min-height: 44px;
	padding: 9px 20px;
	transition: border-color .3s ease, color .3s ease, background-color .3s ease;
}

.espt-block-spec-sheet .espt-sp-more:hover { border-color: var(--_a); color: var(--_a); }
.espt-block-spec-sheet .espt-sp-more:focus-visible { outline: 3px solid var(--_a); outline-offset: 2px; }
.espt-block-spec-sheet .espt-sp-more[aria-expanded="true"] .espt-sp-chev { transform: rotate(180deg); }

/* =================================================================== ROWS */

.espt-block-spec-sheet .espt-sp-list {
	display: grid;
	gap: 0 28px;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
}

.espt-block-spec-sheet .espt-sp-r {
	align-items: start;
	display: grid;
	gap: 4px 14px;
	grid-template-columns: minmax(0, var(--sp-lw, 40%)) minmax(0, 1fr);
	min-width: 0;
	padding: var(--_py) 0;
	position: relative;
	transition: background-color .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .3s ease;
}

.espt-block-spec-sheet .espt-sp-l {
	align-items: flex-start;
	color: var(--_label);
	display: flex;
	font-size: var(--sp-ls, 13px);
	font-weight: 500;
	gap: 9px;
	line-height: 1.45;
	margin: 0;
	min-width: 0;
}

.espt-block-spec-sheet .espt-sp-lt { display: grid; gap: 1px; min-width: 0; }
.espt-block-spec-sheet .espt-sp-ln { overflow-wrap: anywhere; }
.espt-block-spec-sheet .espt-sp-note { font-size: .86em; line-height: 1.35; opacity: .8; overflow-wrap: anywhere; }

.espt-block-spec-sheet .espt-sp-v {
	align-items: center;
	color: var(--_value);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--sp-vs, 14px);
	font-weight: var(--sp-vw, 600);
	gap: 5px 8px;
	justify-content: flex-end;
	line-height: 1.5;
	margin: 0;
	min-width: 0;
	text-align: right;
}

.espt-block-spec-sheet .espt-sp-vt { min-width: 0; overflow-wrap: anywhere; }
.espt-block-spec-sheet .espt-sp-vt strong { color: var(--_a); }
.espt-block-spec-sheet .espt-sp-vt a { color: var(--_a); }
.espt-block-spec-sheet.is-value-align-left .espt-sp-v { justify-content: flex-start; text-align: left; }

/* icons */
.espt-block-spec-sheet .espt-sp-ic {
	align-items: center;
	color: var(--_icon);
	display: inline-flex;
	flex: none;
	justify-content: center;
	line-height: 0;
	margin-top: .1em;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .3s ease, color .3s ease;
}

.espt-block-spec-sheet .espt-sp-ic svg { height: var(--sp-is, 18px); width: var(--sp-is, 18px); }
.espt-block-spec-sheet.no-show-icons .espt-sp-ic { display: none; }

.espt-block-spec-sheet.is-icon-style-soft .espt-sp-ic,
.espt-block-spec-sheet.is-icon-style-circle .espt-sp-ic,
.espt-block-spec-sheet.is-icon-style-solid .espt-sp-ic,
.espt-block-spec-sheet.is-icon-style-outline .espt-sp-ic { height: calc(var(--sp-is, 18px) + 14px); margin-top: -.15em; width: calc(var(--sp-is, 18px) + 14px); }
.espt-block-spec-sheet.is-icon-style-soft .espt-sp-ic { background: color-mix(in srgb, var(--_icon) 13%, transparent); border-radius: 9px; }
.espt-block-spec-sheet.is-icon-style-circle .espt-sp-ic { background: color-mix(in srgb, var(--_icon) 13%, transparent); border-radius: 50%; }
.espt-block-spec-sheet.is-icon-style-solid .espt-sp-ic { background: var(--_icon); border-radius: 50%; color: #fff; }
.espt-block-spec-sheet.is-skin-glass.is-icon-style-solid .espt-sp-ic { color: var(--_a); }
.espt-block-spec-sheet.is-icon-style-outline .espt-sp-ic { border: 1.5px solid color-mix(in srgb, var(--_icon) 45%, transparent); border-radius: 9px; }

/* badge */
.espt-block-spec-sheet .espt-sp-badge {
	background: var(--sp-badge-bg, var(--_a));
	border-radius: 999px;
	color: var(--sp-badge-c, #fff);
	flex: none;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .03em;
	line-height: 1;
	padding: 4px 8px;
}

/* meter */
.espt-block-spec-sheet .espt-sp-m { align-items: center; display: flex; flex: 1 0 100%; gap: 8px; min-width: 0; }
.espt-block-spec-sheet .espt-sp-mt { background: var(--_track); border-radius: 999px; display: block; flex: 1 1 auto; height: 8px; min-width: 0; overflow: hidden; }

.espt-block-spec-sheet .espt-sp-mf {
	background: var(--_a);
	border-radius: inherit;
	display: block;
	height: 100%;
	transition: width 1.2s cubic-bezier(.2, .7, .2, 1) calc(.25s + var(--i, 0) * .04s);
	width: calc(var(--m, 0) * 1%);
}

.espt-block-spec-sheet .espt-sp-mv { color: var(--_label); flex: none; font-size: 11.5px; font-variant-numeric: tabular-nums; font-weight: 700; }
.espt-block-spec-sheet.is-meter-anim .espt-sp[data-sp-in]:not(.is-in) .espt-sp-mf { width: 0; }
.espt-block-spec-sheet.is-meter-style-thin .espt-sp-mt { height: 4px; }
.espt-block-spec-sheet.is-meter-style-gradient .espt-sp-mf { background: linear-gradient(90deg, var(--_a), var(--_a2)); }

.espt-block-spec-sheet.is-meter-style-segments .espt-sp-mt {
	-webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
	border-radius: 3px;
	mask: repeating-linear-gradient(90deg, #000 0 calc(10% - 3px), transparent calc(10% - 3px) 10%);
}

.espt-block-spec-sheet.is-meter-style-striped .espt-sp-mt { height: 10px; }

.espt-block-spec-sheet.is-meter-style-striped .espt-sp-mf {
	animation: espt-sp-stripes 1s linear infinite;
	background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .28) 0 8px, transparent 8px 16px);
	background-size: 22.6px 22.6px;
}

@keyframes espt-sp-stripes { to { background-position: 22.6px 0; } }

/* highlighted spec */
.espt-block-spec-sheet .espt-sp-r.is-star .espt-sp-ln { color: var(--_value); font-weight: 700; }

/* A stacked value lines up under the label's TEXT, not under its icon. */
.espt-block-spec-sheet.is-show-icons .espt-sp { --_indent: calc(var(--sp-is, 18px) + 23px); }
.espt-block-spec-sheet.is-show-icons.is-icon-style-plain .espt-sp { --_indent: calc(var(--sp-is, 18px) + 9px); }

/* On a phone a long value (or one with a meter) has no room beside its label.
   ROW templates only: the grid templates are already label-over-value, and
   the icon list has a layout of its own that this would break. */
@media (max-width: 767px) {
	.espt-block-spec-sheet.is-stack-mobile-auto:is(.is-template-rows, .is-template-zebra, .is-template-boxed, .is-template-datasheet, .is-template-leader) .espt-sp-r.is-long,
	.espt-block-spec-sheet.is-stack-mobile-stack:is(.is-template-rows, .is-template-zebra, .is-template-boxed, .is-template-datasheet, .is-template-leader) .espt-sp-r { grid-template-columns: minmax(0, 1fr); }

	.espt-block-spec-sheet.is-stack-mobile-auto:is(.is-template-rows, .is-template-zebra, .is-template-boxed, .is-template-datasheet, .is-template-leader) .espt-sp-r.is-long .espt-sp-v,
	.espt-block-spec-sheet.is-stack-mobile-stack:is(.is-template-rows, .is-template-zebra, .is-template-boxed, .is-template-datasheet, .is-template-leader) .espt-sp-v { justify-content: flex-start; text-align: left; }

	/* …and it lines up under the label's text, not under its icon */
	.espt-block-spec-sheet.is-show-icons.is-stack-mobile-auto:is(.is-template-rows, .is-template-zebra, .is-template-boxed, .is-template-datasheet, .is-template-leader) .espt-sp-r.is-long .espt-sp-v,
	.espt-block-spec-sheet.is-show-icons.is-stack-mobile-stack:is(.is-template-rows, .is-template-zebra, .is-template-boxed, .is-template-datasheet, .is-template-leader) .espt-sp-v { padding-left: var(--_indent, 0px); }
}

/* ============================================================= TEMPLATES */

/* 01 clean rows */
.espt-block-spec-sheet.is-template-rows .espt-sp-r { border-bottom: 1px solid var(--_line); }
.espt-block-spec-sheet.is-template-rows .espt-sp-r:last-child { border-bottom: 0; }
.espt-block-spec-sheet.is-template-rows .espt-sp-r.is-star { background: var(--_star); border-radius: 10px; margin: 0 -8px; padding-left: 8px; padding-right: 8px; }

/* 02 zebra */
.espt-block-spec-sheet.is-template-zebra .espt-sp-r { border-radius: 10px; padding-left: 12px; padding-right: 12px; }
.espt-block-spec-sheet.is-template-zebra .espt-sp-r:nth-child(odd) { background: var(--_card); }
.espt-block-spec-sheet.is-template-zebra .espt-sp-r.is-star { background: var(--_star); box-shadow: inset 3px 0 0 var(--_a); }
.espt-block-spec-sheet.is-skin-light.is-template-zebra .espt-sp,
.espt-block-spec-sheet.is-skin-gradient.is-template-zebra .espt-sp { --_card: var(--sp-card, #f1f5f9); }

/* 03 dotted leader */
.espt-block-spec-sheet.is-template-leader .espt-sp-r { align-items: baseline; display: flex; gap: 8px; }
.espt-block-spec-sheet.is-template-leader .espt-sp-l { flex: 0 1 auto; max-width: 62%; }
.espt-block-spec-sheet.is-template-leader .espt-sp-v { flex: 1 1 0; justify-content: flex-end; text-align: right; }

.espt-block-spec-sheet.is-template-leader .espt-sp-v::before {
	align-self: flex-end;
	border-bottom: 2px dotted color-mix(in srgb, var(--_label) 55%, transparent);
	content: "";
	flex: 1 1 18px;
	margin-bottom: .42em;
	min-width: 14px;
}

.espt-block-spec-sheet.is-template-leader .espt-sp-r.is-star .espt-sp-vt { color: var(--_a); }

@media (max-width: 767px) {
	.espt-block-spec-sheet.is-template-leader.is-stack-mobile-auto .espt-sp-r.is-long,
	.espt-block-spec-sheet.is-template-leader.is-stack-mobile-stack .espt-sp-r { display: grid; }
	.espt-block-spec-sheet.is-template-leader.is-stack-mobile-auto .espt-sp-r.is-long .espt-sp-l,
	.espt-block-spec-sheet.is-template-leader.is-stack-mobile-stack .espt-sp-l { max-width: none; }
	.espt-block-spec-sheet.is-template-leader.is-stack-mobile-auto .espt-sp-r.is-long .espt-sp-v::before,
	.espt-block-spec-sheet.is-template-leader.is-stack-mobile-stack .espt-sp-v::before { content: none; }
}

/* 04 boxed rows */
.espt-block-spec-sheet.is-template-boxed .espt-sp-list { gap: var(--_gap) 28px; }
.espt-block-spec-sheet.is-template-boxed .espt-sp-r { background: var(--_card); border: 1px solid var(--_line); border-radius: 12px; padding-left: 13px; padding-right: 13px; }
.espt-block-spec-sheet.is-template-boxed .espt-sp-r.is-star { background: var(--_star); border-color: color-mix(in srgb, var(--_a) 50%, var(--_line)); }
.espt-block-spec-sheet.is-skin-brutal.is-template-boxed .espt-sp-r { border-radius: 0; border-width: 2px; box-shadow: 3px 3px 0 #0b0f19; }

/* 09 data sheet */
.espt-block-spec-sheet.is-template-datasheet .espt-sp-r { border-bottom: 1px dashed color-mix(in srgb, var(--_label) 45%, transparent); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.espt-block-spec-sheet.is-template-datasheet .espt-sp-r:last-child { border-bottom: 0; }
.espt-block-spec-sheet.is-template-datasheet .espt-sp-ln { font-size: .88em; letter-spacing: .07em; text-transform: uppercase; }
.espt-block-spec-sheet.is-template-datasheet .espt-sp-r.is-star .espt-sp-vt::before { color: var(--_a); content: "▸ "; }

/* ---- the grid templates share one card-shaped row ---- */
.espt-block-spec-sheet.is-template-cards .espt-sp-list,
.espt-block-spec-sheet.is-template-tiles .espt-sp-list,
.espt-block-spec-sheet.is-template-joined .espt-sp-list,
.espt-block-spec-sheet.is-template-bento .espt-sp-list,
.espt-block-spec-sheet.is-template-underline .espt-sp-list,
.espt-block-spec-sheet.is-template-iconlist .espt-sp-list {
	gap: var(--_gap);
	grid-template-columns: repeat(var(--sp-cols, 1), minmax(0, 1fr));
}

.espt-block-spec-sheet.is-template-cards .espt-sp-r,
.espt-block-spec-sheet.is-template-tiles .espt-sp-r,
.espt-block-spec-sheet.is-template-joined .espt-sp-r,
.espt-block-spec-sheet.is-template-bento .espt-sp-r,
.espt-block-spec-sheet.is-template-underline .espt-sp-r {
	align-content: start;
	gap: 6px;
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-spec-sheet.is-template-cards .espt-sp-v,
.espt-block-spec-sheet.is-template-joined .espt-sp-v,
.espt-block-spec-sheet.is-template-bento .espt-sp-v,
.espt-block-spec-sheet.is-template-underline .espt-sp-v,
.espt-block-spec-sheet.is-template-iconlist .espt-sp-v { justify-content: flex-start; text-align: left; }

/* 05 cards */
.espt-block-spec-sheet.is-template-cards .espt-sp-r,
.espt-block-spec-sheet.is-template-bento .espt-sp-r {
	background: var(--_card);
	border: 1px solid var(--_line);
	border-radius: calc(var(--_r) * .7);
	padding: 14px;
}

.espt-block-spec-sheet.is-template-cards .espt-sp-l,
.espt-block-spec-sheet.is-template-bento .espt-sp-l { flex-direction: column; gap: 9px; }
.espt-block-spec-sheet.is-template-cards .espt-sp-vt,
.espt-block-spec-sheet.is-template-bento .espt-sp-vt { font-size: 1.1em; }
.espt-block-spec-sheet.is-template-cards .espt-sp-r.is-star { background: var(--_star); border-color: color-mix(in srgb, var(--_a) 50%, var(--_line)); }
.espt-block-spec-sheet.is-skin-brutal.is-template-cards .espt-sp-r,
.espt-block-spec-sheet.is-skin-brutal.is-template-bento .espt-sp-r { border-radius: 0; border-width: 2px; box-shadow: 4px 4px 0 #0b0f19; }

/* 06 centred tiles */
.espt-block-spec-sheet.is-template-tiles .espt-sp-r { background: var(--_card); border: 1px solid var(--_line); border-radius: calc(var(--_r) * .7); justify-items: center; padding: 18px 12px; text-align: center; }
.espt-block-spec-sheet.is-template-tiles .espt-sp-l { align-items: center; flex-direction: column; gap: 9px; text-align: center; }
.espt-block-spec-sheet.is-template-tiles .espt-sp-v { justify-content: center; text-align: center; }
.espt-block-spec-sheet.is-template-tiles .espt-sp-vt { font-size: 1.12em; }
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star { background: linear-gradient(150deg, var(--_a), var(--_a2)); border-color: transparent; }
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-l,
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-ln,
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-v,
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-vt strong,
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-ic { color: #fff; }
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-ic { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-badge { background: #fff; color: var(--_a); }
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-mt { background: rgba(255, 255, 255, .3); }
.espt-block-spec-sheet.is-template-tiles .espt-sp-r.is-star .espt-sp-mf { background: #fff; }

/* 07 joined grid. Each cell draws its own right and bottom line INTO the 1px
   gap (a coloured list background would also fill the empty cells of a last
   row that is not full); the list's border and clipping finish the edges. */
.espt-block-spec-sheet.is-template-joined .espt-sp-list { border: 1px solid var(--_line); border-radius: calc(var(--_r) * .7); gap: 1px; overflow: hidden; }
.espt-block-spec-sheet.is-template-joined .espt-sp-r { background: var(--_bg); box-shadow: 1px 0 0 var(--_line), 0 1px 0 var(--_line), 1px 1px 0 var(--_line); padding: 14px; }
.espt-block-spec-sheet.is-skin-plain.is-template-joined .espt-sp-r,
.espt-block-spec-sheet.is-skin-outline.is-template-joined .espt-sp-r { background: var(--sp-card, #fff); }
.espt-block-spec-sheet.is-skin-glass.is-template-joined .espt-sp-r { background: color-mix(in srgb, var(--_a) 70%, #0b1220); }
.espt-block-spec-sheet.is-template-joined .espt-sp-r.is-star { box-shadow: inset 0 3px 0 var(--_a), 1px 0 0 var(--_line), 0 1px 0 var(--_line), 1px 1px 0 var(--_line); }

/* 08 chips */
.espt-block-spec-sheet.is-template-chips .espt-sp-list { display: flex; flex-wrap: wrap; gap: 8px; }

.espt-block-spec-sheet.is-template-chips .espt-sp-r {
	align-items: center;
	background: var(--_card);
	border: 1px solid var(--_line);
	border-radius: 999px;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 3px 7px;
	max-width: 100%;
	padding: 7px 14px 7px 9px;
}

.espt-block-spec-sheet.is-template-chips .espt-sp-l { align-items: center; gap: 6px; }
.espt-block-spec-sheet.is-template-chips .espt-sp-ln::after { content: ":"; }
.espt-block-spec-sheet.is-template-chips .espt-sp-note,
.espt-block-spec-sheet.is-template-chips .espt-sp-m { display: none; }
.espt-block-spec-sheet.is-template-chips .espt-sp-ic { background: none; border: 0; height: auto; margin: 0; width: auto; }
.espt-block-spec-sheet.is-template-chips .espt-sp-v { justify-content: flex-start; text-align: left; }
.espt-block-spec-sheet.is-template-chips .espt-sp-vt br { display: none; }
.espt-block-spec-sheet.is-template-chips .espt-sp-r.is-star { background: var(--_a); border-color: var(--_a); }
.espt-block-spec-sheet.is-template-chips .espt-sp-r.is-star .espt-sp-l,
.espt-block-spec-sheet.is-template-chips .espt-sp-r.is-star .espt-sp-ln,
.espt-block-spec-sheet.is-template-chips .espt-sp-r.is-star .espt-sp-v,
.espt-block-spec-sheet.is-template-chips .espt-sp-r.is-star .espt-sp-vt strong,
.espt-block-spec-sheet.is-template-chips .espt-sp-r.is-star .espt-sp-ic { color: #fff; }
.espt-block-spec-sheet.is-template-chips .espt-sp-r.is-star .espt-sp-badge { background: #fff; color: var(--_a); }

/* 10 bento: a highlighted spec takes two cells and speaks louder */
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star { background: linear-gradient(150deg, var(--_a), var(--_a2)); border-color: transparent; }
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-l,
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-ln,
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-v,
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-vt strong,
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-ic { color: #fff; }
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-ic { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-vt { font-size: 1.45em; letter-spacing: -.01em; line-height: 1.25; }
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-badge { background: #fff; color: var(--_a); }
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-mt { background: rgba(255, 255, 255, .3); }
.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star .espt-sp-mf { background: #fff; }

/* 11 icon list: a big icon, the label over its value */
.espt-block-spec-sheet.is-template-iconlist .espt-sp-r { align-items: center; column-gap: 12px; grid-template-columns: auto minmax(0, 1fr); padding: 6px 0; row-gap: 1px; }
.espt-block-spec-sheet.is-template-iconlist .espt-sp-l { display: contents; }
.espt-block-spec-sheet.is-template-iconlist .espt-sp-ic { grid-column: 1; grid-row: 1 / span 2; height: calc(var(--sp-is, 18px) + 24px); margin: 0; width: calc(var(--sp-is, 18px) + 24px); }
.espt-block-spec-sheet.is-template-iconlist .espt-sp-lt { align-self: end; grid-column: 2; }
.espt-block-spec-sheet.is-template-iconlist .espt-sp-v { align-self: start; grid-column: 2; }
.espt-block-spec-sheet.is-template-iconlist.no-show-icons .espt-sp-lt,
.espt-block-spec-sheet.is-template-iconlist.no-show-icons .espt-sp-v { grid-column: 1 / -1; }
.espt-block-spec-sheet.is-template-iconlist .espt-sp-r.is-star .espt-sp-vt { color: var(--_a); }

/* 12 label over value, underlined */
.espt-block-spec-sheet.is-template-underline .espt-sp-list { gap: 4px 26px; }
.espt-block-spec-sheet.is-template-underline .espt-sp-r { border-bottom: 2px solid var(--_line); gap: 3px; }
.espt-block-spec-sheet.is-template-underline .espt-sp-ln { font-size: .85em; letter-spacing: .09em; text-transform: uppercase; }
.espt-block-spec-sheet.is-template-underline .espt-sp-vt { font-size: 1.08em; }
.espt-block-spec-sheet.is-template-underline .espt-sp-r.is-star { border-bottom-color: var(--_a); }

/* ================================================================ HOVER */

@media (hover: hover) and (pointer: fine) {
	.espt-block-spec-sheet.is-hover-tint .espt-sp-r:hover { background-color: color-mix(in srgb, var(--_a) 8%, transparent); }
	.espt-block-spec-sheet.is-hover-lift .espt-sp-r:hover { box-shadow: 0 14px 28px -16px rgba(15, 23, 42, .4); transform: translateY(-3px); }
	.espt-block-spec-sheet.is-hover-slide .espt-sp-r:hover { transform: translateX(6px); }
	.espt-block-spec-sheet.is-hover-glow .espt-sp-r:hover { box-shadow: 0 0 0 1.5px var(--_a), 0 10px 26px -12px color-mix(in srgb, var(--_a) 75%, transparent); }
	.espt-block-spec-sheet.is-hover-icon .espt-sp-r:hover .espt-sp-ic { transform: scale(1.18) rotate(-6deg); }

	.espt-block-spec-sheet.is-hover-bar .espt-sp-r::before {
		background: var(--_a);
		border-radius: 3px;
		bottom: 22%;
		content: "";
		left: -9px;
		position: absolute;
		top: 22%;
		transform: scaleY(0);
		transition: transform .3s cubic-bezier(.2, .7, .2, 1);
		width: 3px;
	}

	.espt-block-spec-sheet.is-hover-bar .espt-sp-r:hover::before { transform: scaleY(1); }
	.espt-block-spec-sheet.is-template-joined.is-hover-lift .espt-sp-r:hover,
	.espt-block-spec-sheet.is-template-joined.is-hover-glow .espt-sp-r:hover { box-shadow: inset 0 0 0 1.5px var(--_a), 1px 0 0 var(--_line), 0 1px 0 var(--_line), 1px 1px 0 var(--_line); transform: none; }
	.espt-block-spec-sheet .espt-sp-hi:hover { border-color: color-mix(in srgb, var(--_a) 50%, var(--_line)); box-shadow: 0 14px 28px -16px rgba(15, 23, 42, .35); transform: translateY(-3px); }

	/* the row-shaped templates have no room at their sides for lift / glow */
	.espt-block-spec-sheet.is-template-rows.is-hover-tint .espt-sp-r:hover,
	.espt-block-spec-sheet.is-template-datasheet.is-hover-tint .espt-sp-r:hover,
	.espt-block-spec-sheet.is-template-leader.is-hover-tint .espt-sp-r:hover { border-radius: 8px; box-shadow: -8px 0 0 color-mix(in srgb, var(--_a) 8%, transparent), 8px 0 0 color-mix(in srgb, var(--_a) 8%, transparent); }
}

/* ---------------------------------------------------------------- footer */

.espt-block-spec-sheet .espt-sp-foot { align-items: center; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.espt-block-spec-sheet .espt-sp-fn { color: var(--_label); font-size: 12.5px; line-height: 1.55; margin: 0; text-align: center; }

.espt-block-spec-sheet .espt-sp-btn {
	align-items: center;
	background: var(--_a);
	border-radius: min(var(--espt-btn-radius, 12px), 26px);
	color: #fff;
	display: inline-flex;
	font-size: 16px;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	min-height: 50px;
	padding: 12px 26px;
	text-decoration: none;
	transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
	width: 100%;
}

.espt-block-spec-sheet .espt-sp-btn:hover { box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--_a) 80%, transparent); color: #fff; filter: brightness(1.07); transform: translateY(-2px); }
.espt-block-spec-sheet .espt-sp-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--_a) 50%, #fff); outline-offset: 3px; }
.espt-block-spec-sheet .espt-sp-bi { display: inline-flex; line-height: 0; }
.espt-block-spec-sheet .espt-sp-bi svg { height: 18px; width: 18px; }
.espt-block-spec-sheet.is-skin-glass .espt-sp-btn { background: #fff; color: var(--_a); }
.espt-block-spec-sheet.is-skin-brutal .espt-sp-btn { border: 2px solid #0b0f19; border-radius: 0; box-shadow: 4px 4px 0 #0b0f19; }

/* ============================================================= ENTRANCE
   Hidden until spec-sheet.js adds .is-in (the sheet scrolled into view).
   `backwards`, not `both`: once it has played, hover owns the transform. */

.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in] .espt-sp-head > *,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in] .espt-sp-hi,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in] .espt-sp-tab,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in] .espt-sp-gt,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in] .espt-sp-r { opacity: 0; }

.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in].is-in .espt-sp-head > *,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in].is-in .espt-sp-hi,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in].is-in .espt-sp-tab,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in].is-in .espt-sp-gt,
.espt-block-spec-sheet:not(.is-anim-in-none) .espt-sp[data-sp-in].is-in .espt-sp-r {
	animation: var(--_in) .65s cubic-bezier(.2, .7, .2, 1) backwards;
	opacity: 1;
}

.espt-block-spec-sheet .espt-sp[data-sp-in].is-in .espt-sp-hi { animation-delay: calc(.1s + var(--i, 0) * .08s); }
.espt-block-spec-sheet .espt-sp[data-sp-in].is-in .espt-sp-r { animation-delay: calc(.18s + var(--i, 0) * .045s); }
.espt-block-spec-sheet .espt-sp[data-sp-in].is-in .espt-sp-head > :nth-child(2) { animation-delay: .07s; }
.espt-block-spec-sheet .espt-sp[data-sp-in].is-in .espt-sp-head > :nth-child(3) { animation-delay: .14s; }

.espt-block-spec-sheet.is-anim-in-fade .espt-sp { --_in: espt-sp-in-fade; }
.espt-block-spec-sheet.is-anim-in-up .espt-sp { --_in: espt-sp-in-up; }
.espt-block-spec-sheet.is-anim-in-left .espt-sp { --_in: espt-sp-in-left; }
.espt-block-spec-sheet.is-anim-in-zoom .espt-sp { --_in: espt-sp-in-zoom; }
.espt-block-spec-sheet.is-anim-in-flip .espt-sp { --_in: espt-sp-in-flip; }
.espt-block-spec-sheet.is-anim-in-blur .espt-sp { --_in: espt-sp-in-blur; }
.espt-block-spec-sheet.is-anim-in-wipe .espt-sp { --_in: espt-sp-in-wipe; }

@keyframes espt-sp-in-fade { from { opacity: 0; } }
@keyframes espt-sp-in-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes espt-sp-in-left { from { opacity: 0; transform: translateX(-26px); } }
@keyframes espt-sp-in-zoom { from { opacity: 0; transform: scale(.9); } }
@keyframes espt-sp-in-flip { from { opacity: 0; transform: perspective(700px) rotateX(-55deg); transform-origin: 50% 0; } }
@keyframes espt-sp-in-blur { from { filter: blur(10px); opacity: 0; } }
@keyframes espt-sp-in-wipe { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 -5% 0 -5%); opacity: 1; } }

/* =========================================================== BREAKPOINTS */

@media (min-width: 768px) {
	.espt-block-spec-sheet .espt-sp-hl { gap: 14px; }
	.espt-block-spec-sheet .espt-sp-hi { padding: 16px 18px; }
	.espt-block-spec-sheet .espt-sp-head { margin-bottom: 22px; }
	.espt-block-spec-sheet .espt-sp-hl { margin-bottom: 24px; }
	.espt-block-spec-sheet .espt-sp-sub { font-size: 16px; }
	.espt-block-spec-sheet .espt-sp-gt { font-size: 17px; }
	.espt-block-spec-sheet .espt-sp-foot { flex-direction: row; justify-content: space-between; }
	.espt-block-spec-sheet .espt-sp-fn { flex: 1 1 auto; text-align: left; }
	.espt-block-spec-sheet .espt-sp-btn { flex: none; width: auto; }
	.espt-block-spec-sheet .espt-sp-tools { max-width: 420px; }
	.espt-block-spec-sheet.is-text-align-center .espt-sp-tools { margin-left: auto; margin-right: auto; }
	.espt-block-spec-sheet .espt-sp-nav { flex-wrap: wrap; margin-left: 0; margin-right: 0; overflow: visible; padding-left: 0; padding-right: 0; }
	.espt-block-spec-sheet.is-text-align-center .espt-sp-nav { justify-content: center; }
	.espt-block-spec-sheet.is-tab-style-segment .espt-sp-nav { display: inline-flex; max-width: 100%; }

	/* the side menu becomes a column beside the rows */
	.espt-block-spec-sheet .espt-sp.is-js.is-gm-side .espt-sp-body { align-items: start; display: grid; gap: 26px; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
	.espt-block-spec-sheet .espt-sp.is-js.is-gm-side .espt-sp-nav { flex-direction: column; flex-wrap: nowrap; gap: 6px; margin-bottom: 0; position: sticky; top: calc(var(--espt-abar-h, 0px) + 90px); }
	.espt-block-spec-sheet .espt-sp.is-js.is-gm-side .espt-sp-tab { border-radius: 12px; justify-content: space-between; white-space: normal; width: 100%; }
	.espt-block-spec-sheet.is-tab-style-underline .espt-sp.is-js.is-gm-side .espt-sp-nav { border-bottom: 0; border-left: 1.5px solid var(--_line); }
	.espt-block-spec-sheet.is-tab-style-underline .espt-sp.is-js.is-gm-side .espt-sp-tab { border-bottom: 0; border-left: 3px solid transparent; margin: 0 0 0 -1.5px; }
	.espt-block-spec-sheet.is-tab-style-underline .espt-sp.is-js.is-gm-side .espt-sp-tab.is-on { border-left-color: var(--_a); }
	.espt-block-spec-sheet.is-tab-style-segment .espt-sp.is-js.is-gm-side .espt-sp-nav { display: flex; }
	.espt-block-spec-sheet .espt-sp.is-searching.is-gm-side .espt-sp-body { display: block; }
}

@media (min-width: 1024px) {
	.espt-block-spec-sheet.is-rows-2col .espt-sp:not(.is-gm-columns) .espt-sp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* the last ROW of a two-column list is two cells, not one */
	.espt-block-spec-sheet.is-rows-2col.is-template-rows .espt-sp:not(.is-gm-columns) .espt-sp-r:nth-last-child(2):nth-child(odd),
	.espt-block-spec-sheet.is-rows-2col.is-template-datasheet .espt-sp:not(.is-gm-columns) .espt-sp-r:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* bento: two-cell highlights need at least two columns to span */
@media (min-width: 768px) {
	.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star { grid-column: span 2; }
}

@media (max-width: 767px) {
	.espt-block-spec-sheet.is-template-bento .espt-sp-r.is-star { grid-column: 1 / -1; }
}

/* ======================================================= REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
	.espt-block-spec-sheet .espt-sp,
	.espt-block-spec-sheet .espt-sp *,
	.espt-block-spec-sheet .espt-sp *::before,
	.espt-block-spec-sheet .espt-sp *::after { animation: none !important; transition: none !important; }

	.espt-block-spec-sheet .espt-sp[data-sp-in] .espt-sp-head > *,
	.espt-block-spec-sheet .espt-sp[data-sp-in] .espt-sp-hi,
	.espt-block-spec-sheet .espt-sp[data-sp-in] .espt-sp-tab,
	.espt-block-spec-sheet .espt-sp[data-sp-in] .espt-sp-gt,
	.espt-block-spec-sheet .espt-sp[data-sp-in] .espt-sp-r { opacity: 1 !important; }

	.espt-block-spec-sheet .espt-sp[data-sp-in] .espt-sp-mf { width: calc(var(--m, 0) * 1%) !important; }
}

/* ============================================= "STRETCH THIS WIDGET"
   (Spacing & background → Stretch this widget.) The shared rule only pulls the
   wrapper out over the page's side space — a few pixels. On a rounded, bordered
   surface that reads as "nothing happened": the corners still float inside the
   edge. Stretched means FLUSH: square corners, no side borders. */
.espt-block-spec-sheet:is(.has-espt-box-full-container, .has-espt-box-full-browser) .espt-sp { border-left: 0; border-radius: 0; border-right: 0; max-width: none; }
.espt-block-spec-sheet.has-espt-box-full-browser .espt-sp {
	padding-left: max(var(--_pad), calc((100% - var(--espt-container, 1200px)) / 2 + var(--_pad)));
	padding-right: max(var(--_pad), calc((100% - var(--espt-container, 1200px)) / 2 + var(--_pad)));
}