/* BD Size Chart — .espt-block-bd-size-chart
   vars: --max-width --table-radius --name-width --cell-pad --figure-size
         --heading-size --sub-size --name-size --cell-size --note-size --table-min
         --heading-color --sub-color --head-bg --head-color --table-bg --line-color
         --pop-bg --badge-bg --badge-color --icon-color --name-color --value-color
         --cell-color --note-color
   classes: is-design-* is-figure-icon-* is-figure-box-* is-mobile-mode-* is-cell-align-*
            is-text-align-* is-zebra is-row-hover is-sticky-name is-head-case
            is-figure-grow / no-figure-grow  is-figure-pop  is-pick
   markup:  .bdsc (+ .is-hidable .is-solo .is-unit-a) rows: .is-pop .has-badge
   JS (on .bdsc): is-scrollable is-scrolled is-scroll-left is-scroll-right is-unit-a/-b
                  (rows: .is-picked) */

.espt-block-bd-size-chart .bdsc {
	--sc-bg: var(--table-bg, var(--bd-box-bg));
	--sc-line: var(--line-color, var(--bd-soft-line));
	--sc-inner: var(--line-color, var(--bd-line));
	--sc-head-bg: var(--head-bg, var(--bd-deep));
	--sc-head-fg: var(--head-color, #fff);
	--sc-head-line: color-mix(in srgb, var(--sc-head-fg) 22%, transparent);
	--sc-pop: var(--pop-bg, color-mix(in srgb, var(--bd-primary) 9%, var(--sc-bg)));
	--sc-badge: var(--badge-bg, var(--bd-primary));
	--sc-badge-fg: var(--badge-color, #fff);
	--sc-icon: var(--icon-color, var(--bd-body));
	--sc-name: var(--name-color, var(--bd-ink));
	--sc-value: var(--value-color, var(--bd-ink));
	--sc-cell: var(--cell-color, var(--bd-body));
	--sc-stripe: color-mix(in srgb, var(--bd-ink) 3.5%, var(--sc-bg));
	--sc-hover: color-mix(in srgb, var(--bd-primary) 6%, var(--sc-bg));
	/* phones first: cap the padding, the figure and the gap so the size column
	   still has room for its label at 320px — the real values come back at 768px */
	--sc-pad: min(var(--cell-pad, 12px), 10px);
	--sc-radius: var(--table-radius, 12px);
	--sc-fig: min(var(--figure-size, 38px), 32px);
	--sc-gap: 8px;
	--sc-namew: max(var(--name-width, 34%), 38%);
	--sc-tmin: 0px;
	color: var(--bd-ink);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width, 100%);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- heading */
.espt-block-bd-size-chart .bdsc-h {
	color: var(--heading-color, var(--bd-ink));
	font-size: var(--heading-size, 19px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 5px;
	text-align: center;
}

.espt-block-bd-size-chart .bdsc-sb {
	color: var(--sub-color, var(--bd-muted));
	font-size: var(--sub-size, 13px);
	line-height: 1.55;
	margin: 0 0 14px;
	text-align: center;
}

.espt-block-bd-size-chart.is-text-align-left .bdsc-h,
.espt-block-bd-size-chart.is-text-align-left .bdsc-sb,
.espt-block-bd-size-chart.is-text-align-left .bdsc-nt { text-align: left; }
.espt-block-bd-size-chart.is-text-align-right .bdsc-h,
.espt-block-bd-size-chart.is-text-align-right .bdsc-sb,
.espt-block-bd-size-chart.is-text-align-right .bdsc-nt { text-align: right; }

/* --------------------------------------------------------- unit switch */
/* the switch sits on the card, not on the table — so it uses the card colours
   (--sc-bg can be a dark table, which would make the pill unreadable) */
.espt-block-bd-size-chart .bdsc-units {
	background: color-mix(in srgb, var(--bd-ink) 6%, var(--bd-box-bg));
	border-radius: 999px;
	display: flex;
	gap: 3px;
	margin: 0 auto 12px;
	max-width: 100%;
	padding: 3px;
	width: fit-content;
}

.espt-block-bd-size-chart .bdsc-u {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--bd-muted);
	cursor: pointer;
	font-size: calc(var(--sub-size, 13px) * 0.95);
	font-weight: 700;
	line-height: 1.2;
	min-width: 0;
	padding: 7px 14px;
	transition: background 0.2s ease, color 0.2s ease;
}

.espt-block-bd-size-chart .bdsc-u:hover { color: var(--bd-ink); }

.espt-block-bd-size-chart .bdsc-u.is-on {
	background: var(--bd-box-bg);
	box-shadow: 0 1px 4px rgba(15, 23, 42, 0.14);
	color: var(--bd-ink);
}

.espt-block-bd-size-chart .bdsc-u:focus-visible { outline: 2px solid var(--bd-primary); outline-offset: 1px; }

/* main / small values swap with the unit switch (only where both exist) */
.espt-block-bd-size-chart .bdsc.is-unit-a .bdsc-vs,
.espt-block-bd-size-chart .bdsc.is-unit-b .bdsc-cell.has-alt .bdsc-v { display: none; }
.espt-block-bd-size-chart .bdsc.is-unit-b .bdsc-vs {
	color: var(--sc-value);
	font-size: calc(var(--cell-size, 13px) * 1.02);
	font-weight: 700;
	opacity: 1;
}

/* ------------------------------------------------------ scroll wrapper */
.espt-block-bd-size-chart .bdsc-wrap {
	max-width: 100%;
	min-width: 0;
	position: relative;
}

.espt-block-bd-size-chart .bdsc-sc {
	-webkit-overflow-scrolling: touch;
	background: var(--sc-bg);
	border: 1.5px solid var(--sc-line);
	border-radius: var(--sc-radius);
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

.espt-block-bd-size-chart .bdsc-sc:focus-visible { outline: 2px solid var(--bd-primary); outline-offset: 2px; }

.espt-block-bd-size-chart .bdsc-wrap::before,
.espt-block-bd-size-chart .bdsc-wrap::after {
	bottom: 0;
	content: "";
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: opacity 0.25s ease;
	width: 30px;
	z-index: 3;
}

.espt-block-bd-size-chart .bdsc-wrap::before { background: linear-gradient(to right, var(--sc-bg), transparent); border-radius: var(--sc-radius) 0 0 var(--sc-radius); left: 0; }
.espt-block-bd-size-chart .bdsc-wrap::after { background: linear-gradient(to left, var(--sc-bg), transparent); border-radius: 0 var(--sc-radius) var(--sc-radius) 0; right: 0; }
.espt-block-bd-size-chart .bdsc.is-scroll-left .bdsc-wrap::before { opacity: 1; }
.espt-block-bd-size-chart .bdsc.is-scroll-right .bdsc-wrap::after { opacity: 1; }

/* swipe hint, until the visitor actually scrolls */
.espt-block-bd-size-chart .bdsc-hint {
	align-items: center;
	color: var(--bd-muted);
	display: none;
	font-size: calc(var(--note-size, 12px) * 0.95);
	gap: 6px;
	justify-content: center;
	margin-top: 8px;
}

.espt-block-bd-size-chart .bdsc.is-scrollable:not(.is-scrolled) .bdsc-hint { display: flex; }
.espt-block-bd-size-chart .bdsc-hi { display: inline-flex; line-height: 0; }
.espt-block-bd-size-chart .bdsc-hi svg { height: 1em; width: 1em; }
.espt-block-bd-size-chart .bdsc-hi:first-child { animation: espt-sc-nudge-l 1.5s ease-in-out infinite; }
.espt-block-bd-size-chart .bdsc-hi:last-child { animation: espt-sc-nudge-r 1.5s ease-in-out infinite; }
@keyframes espt-sc-nudge-l { 0%, 100% { transform: none; } 50% { transform: translateX(-3px); } }
@keyframes espt-sc-nudge-r { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }

/* --------------------------------------------------------------- table */
.espt-block-bd-size-chart .bdsc-t {
	border-collapse: collapse;
	margin: 0;
	min-width: var(--sc-tmin);
	table-layout: fixed;
	width: 100%;
}

.espt-block-bd-size-chart .bdsc-t th,
.espt-block-bd-size-chart .bdsc-t td {
	border: 0;
	min-width: 0;
	word-break: normal;
}

/* header row */
.espt-block-bd-size-chart .bdsc-hd { background: var(--sc-head-bg); }

.espt-block-bd-size-chart .bdsc-hc {
	color: var(--sc-head-fg);
	font-size: calc(var(--cell-size, 13px) * 0.95);
	font-weight: 700;
	line-height: 1.3;
	padding: calc(var(--sc-pad) * 0.85) calc(var(--sc-pad) * 0.6);
	text-align: center;
	vertical-align: middle;
}

.espt-block-bd-size-chart .bdsc-hc + .bdsc-hc,
.espt-block-bd-size-chart .bdsc-hc-nm + .bdsc-hc { border-left: 1px solid var(--sc-head-line); }

.espt-block-bd-size-chart .bdsc-hc-nm {
	padding-left: var(--sc-pad);
	text-align: left;
	width: var(--sc-namew);
}

.espt-block-bd-size-chart.is-head-case .bdsc-hc { letter-spacing: 0.06em; }

/* body rows */
.espt-block-bd-size-chart .bdsc-row {
	background: var(--sc-bg);
	border-bottom: 1px solid var(--sc-inner);
	transition: background 0.2s ease;
}

.espt-block-bd-size-chart .bdsc-t tbody tr:last-child { border-bottom: 0; }

.espt-block-bd-size-chart.is-zebra .bdsc-t tbody tr:nth-child(even) { background: var(--sc-stripe); }
.espt-block-bd-size-chart.is-row-hover .bdsc-t tbody tr:hover { background: var(--sc-hover); }

.espt-block-bd-size-chart .bdsc-row.is-pop { background: var(--sc-pop); }
.espt-block-bd-size-chart.is-row-hover .bdsc-t tbody tr.is-pop:hover { background: color-mix(in srgb, var(--bd-primary) 15%, var(--sc-bg)); }

/* size (row header) cell */
.espt-block-bd-size-chart .bdsc-il {
	background: inherit;
	color: var(--sc-name);
	font-weight: 400;
	padding: var(--sc-pad);
	position: relative;
	text-align: left;
	vertical-align: middle;
	width: var(--sc-namew);
}

/* the head cell has to stick too, otherwise the column head slides out from
   above its own column. A <tr> background does not travel with a sticky cell,
   so the head cell paints its own. */
.espt-block-bd-size-chart.is-sticky-name .bdsc-il,
.espt-block-bd-size-chart.is-sticky-name .bdsc-hc-nm {
	left: 0;
	position: sticky;
	z-index: 2;
}

.espt-block-bd-size-chart.is-sticky-name .bdsc-hc-nm {
	background: var(--sc-head-bg);
	z-index: 4;
}

.espt-block-bd-size-chart.is-sticky-name .bdsc.is-scroll-left .bdsc-il,
.espt-block-bd-size-chart.is-sticky-name .bdsc.is-scroll-left .bdsc-hc-nm { box-shadow: 6px 0 10px -8px rgba(15, 23, 42, 0.45); }

/* the sticky column already marks the left edge — the fade would only wash
   the figure out, so drop it when the column sticks */
.espt-block-bd-size-chart.is-sticky-name .bdsc.is-scroll-left .bdsc-wrap::before { opacity: 0; }

/* the badge sits in the corner of the popular row */
.espt-block-bd-size-chart .bdsc-row.has-badge > * { padding-top: calc(var(--sc-pad) + 9px); }

.espt-block-bd-size-chart .bdsc-badge {
	background: var(--sc-badge);
	border-radius: 0 0 6px 0;
	color: var(--sc-badge-fg);
	font-size: 10px;
	font-weight: 700;
	left: 0;
	letter-spacing: 0.04em;
	line-height: 1.4;
	max-width: 100%;
	overflow: hidden;
	padding: 2px 8px;
	position: absolute;
	text-overflow: ellipsis;
	top: 0;
	white-space: nowrap;
	z-index: 2;
}

/* name + sub-label */
.espt-block-bd-size-chart .bdsc-nm {
	color: var(--sc-name);
	display: block;
	font-size: var(--name-size, 16px);
	font-weight: 700;
	line-height: 1.2;
	min-width: 0;
}

.espt-block-bd-size-chart .bdsc-ns {
	color: var(--bd-muted);
	display: block;
	font-size: calc(var(--cell-size, 13px) * 0.88);
	font-weight: 400;
	line-height: 1.35;
	margin-top: 1px;
}

/* ---------------------------------------------------------- the figure */
.espt-block-bd-size-chart .bdsc-ilw {
	align-items: center;
	display: flex;
	gap: var(--sc-gap);
	min-width: 0;
	width: 100%;
}

.espt-block-bd-size-chart .bdsc-ic {
	align-items: flex-end;
	border-radius: 7px;
	color: var(--sc-icon);
	display: flex;
	flex: 0 0 auto;
	height: var(--sc-fig);
	justify-content: center;
	line-height: 0;
	padding: 4px;
	transition: color 0.2s ease, transform 0.25s ease;
	width: calc(var(--sc-fig) * 0.95);
}

.espt-block-bd-size-chart .bdsc-ic svg {
	display: block;
	height: var(--sc-fh, 60%);
	width: auto;
}

/* the figure ladder */
.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-s { --sc-fh: 46%; }
.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-m { --sc-fh: 64%; }
.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-l { --sc-fh: 82%; }
.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-xl { --sc-fh: 100%; }
.espt-block-bd-size-chart.no-figure-grow .bdsc-ic { --sc-fh: 82%; }

/* wide figures (shirt / box) keep their width inside the tile */
.espt-block-bd-size-chart.is-figure-icon-shirt .bdsc-ic,
.espt-block-bd-size-chart.is-figure-icon-box .bdsc-ic { width: calc(var(--sc-fig) * 1.15); }
.espt-block-bd-size-chart.is-figure-icon-shirt .bdsc-ic svg,
.espt-block-bd-size-chart.is-figure-icon-box .bdsc-ic svg { max-width: 100%; }

/* the letter figure */
.espt-block-bd-size-chart .bdsc-fl {
	color: var(--sc-icon);
	font-size: calc(var(--sc-fig) * 0.42);
	font-weight: 800;
	line-height: 1;
	padding-bottom: 2px;
}

.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-s .bdsc-fl { font-size: calc(var(--sc-fig) * 0.3); }
.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-m .bdsc-fl { font-size: calc(var(--sc-fig) * 0.38); }
.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-l .bdsc-fl { font-size: calc(var(--sc-fig) * 0.46); }
.espt-block-bd-size-chart.is-figure-grow .bdsc-ic-xl .bdsc-fl { font-size: calc(var(--sc-fig) * 0.52); }
.espt-block-bd-size-chart.is-figure-icon-letter .bdsc-ic { align-items: center; width: auto; min-width: calc(var(--sc-fig) * 0.95); }

/* figure holder styles */
.espt-block-bd-size-chart.is-figure-box-tile .bdsc-ic {
	background: var(--bd-soft);
	border: 1px solid var(--sc-inner);
}

.espt-block-bd-size-chart.is-figure-box-accent .bdsc-ic {
	background: color-mix(in srgb, var(--bd-primary) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--bd-primary) 24%, transparent);
	color: var(--icon-color, var(--bd-primary));
}

.espt-block-bd-size-chart.is-figure-box-dashed .bdsc-ic {
	background: transparent;
	border: 1px dashed color-mix(in srgb, var(--sc-name) 30%, transparent);
}

.espt-block-bd-size-chart.is-figure-box-plain .bdsc-ic {
	background: transparent;
	border: 0;
	padding: 0;
}

/* popular row: tint the figure */
.espt-block-bd-size-chart.is-figure-pop .bdsc-row.is-pop .bdsc-ic {
	color: var(--icon-color, var(--bd-primary));
}

.espt-block-bd-size-chart.is-figure-pop.is-figure-box-tile .bdsc-row.is-pop .bdsc-ic {
	background: color-mix(in srgb, var(--bd-primary) 14%, var(--sc-bg));
	border-color: color-mix(in srgb, var(--bd-primary) 30%, transparent);
}

.espt-block-bd-size-chart.is-figure-pop .bdsc-row.is-pop .bdsc-fl { color: var(--icon-color, var(--bd-primary)); }

.espt-block-bd-size-chart.is-row-hover .bdsc-t tbody tr:hover .bdsc-ic { transform: translateY(-1px); }

/* ---------------------------------------------------------- value cells */
.espt-block-bd-size-chart .bdsc-cell {
	border-left: 1px solid var(--sc-inner);
	color: var(--sc-cell);
	font-size: var(--cell-size, 13px);
	line-height: 1.45;
	padding: var(--sc-pad) calc(var(--sc-pad) * 0.65);
	text-align: center;
	vertical-align: middle;
}

.espt-block-bd-size-chart.is-cell-align-left .bdsc-cell { text-align: left; }

.espt-block-bd-size-chart .bdsc-v {
	color: var(--sc-value);
	display: block;
	font-size: calc(var(--cell-size, 13px) * 1.02);
	font-weight: 700;
	line-height: 1.3;
}

.espt-block-bd-size-chart .bdsc-vs {
	color: var(--sc-cell);
	display: block;
	font-size: calc(var(--cell-size, 13px) * 0.86);
	font-style: normal;
	line-height: 1.35;
	opacity: 0.9;
}

.espt-block-bd-size-chart .bdsc-dash { color: var(--sc-cell); opacity: 0.55; }

/* nothing but the size column */
.espt-block-bd-size-chart .bdsc.is-solo .bdsc-hc-nm,
.espt-block-bd-size-chart .bdsc.is-solo .bdsc-il { width: auto; }

/* --------------------------------------------------------- bottom note */
.espt-block-bd-size-chart .bdsc-nt {
	color: var(--note-color, var(--bd-muted));
	font-size: var(--note-size, 12px);
	line-height: 1.7;
	margin: 12px 0 0;
	text-align: center;
}

.espt-block-bd-size-chart .bdsc-nt strong { color: var(--bd-ink); font-weight: 700; }

/* ------------------------------------------------------- tap to pick it */
.espt-block-bd-size-chart.is-pick .bdsc-t tbody tr { cursor: pointer; }
.espt-block-bd-size-chart.is-pick .bdsc-t tbody tr:focus-visible { outline: 2px solid var(--bd-primary); outline-offset: -2px; }

.espt-block-bd-size-chart .bdsc-pick {
	background: var(--bd-primary);
	border-radius: 999px;
	color: #fff;
	display: none;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.5;
	margin-left: auto;
	padding: 2px 8px;
	white-space: nowrap;
}

.espt-block-bd-size-chart .bdsc-row.is-picked { background: color-mix(in srgb, var(--bd-primary) 13%, var(--sc-bg)); }
.espt-block-bd-size-chart .bdsc-row.is-picked .bdsc-pick { display: inline-block; }
.espt-block-bd-size-chart .bdsc-row.is-picked .bdsc-nm { color: var(--bd-primary-dark); }
.espt-block-bd-size-chart .bdsc-row.is-picked .bdsc-ic { color: var(--bd-primary); }

/* ============================== designs ============================== */

/* soft — tinted header, ink text */
.espt-block-bd-size-chart.is-design-soft .bdsc {
	--sc-head-bg: var(--head-bg, var(--bd-soft));
	--sc-head-fg: var(--head-color, var(--bd-ink));
	--sc-head-line: var(--line-color, var(--bd-soft-line));
}

/* striped — light header + zebra body */
.espt-block-bd-size-chart.is-design-striped .bdsc {
	--sc-head-bg: var(--head-bg, color-mix(in srgb, var(--bd-ink) 6%, var(--sc-bg)));
	--sc-head-fg: var(--head-color, var(--bd-muted));
	--sc-head-line: var(--line-color, var(--bd-line));
	--sc-line: var(--line-color, var(--bd-line));
}

.espt-block-bd-size-chart.is-design-striped .bdsc-t tbody tr:nth-child(even) { background: var(--sc-stripe); }

/* minimal — hairlines only, no frame. The head/row backgrounds stay opaque
   (they match the card anyway) so the sticky size column does not go
   see-through while the table scrolls sideways. */
.espt-block-bd-size-chart.is-design-minimal .bdsc {
	--sc-head-bg: var(--head-bg, var(--bd-box-bg));
	--sc-head-fg: var(--head-color, var(--bd-muted));
	--sc-head-line: transparent;
}

.espt-block-bd-size-chart.is-design-minimal .bdsc-sc {
	background: transparent;
	border: 0;
	border-radius: 0;
}

.espt-block-bd-size-chart.is-design-minimal .bdsc-hd { border-bottom: 1.5px solid var(--sc-inner); }
.espt-block-bd-size-chart.is-design-minimal .bdsc-cell { border-left: 0; }
.espt-block-bd-size-chart.is-design-minimal .bdsc-hc,
.espt-block-bd-size-chart.is-design-minimal .bdsc-hc-nm { padding-left: 0; padding-right: 0; }
/* keeps `background: inherit` — otherwise the popular tint and the zebra
   stripes stop dead at the edge of the size column */
.espt-block-bd-size-chart.is-design-minimal .bdsc-il { padding-left: 0; }
.espt-block-bd-size-chart.is-design-minimal .bdsc-badge { border-radius: 5px; left: auto; right: 0; }

/* bordered — every cell framed */
.espt-block-bd-size-chart.is-design-bordered .bdsc {
	--sc-head-bg: var(--head-bg, color-mix(in srgb, var(--bd-ink) 5%, var(--sc-bg)));
	--sc-head-fg: var(--head-color, var(--bd-ink));
	--sc-head-line: var(--line-color, var(--bd-line));
	--sc-radius: var(--table-radius, 8px);
}

.espt-block-bd-size-chart.is-design-bordered .bdsc-hc { border: 1px solid var(--sc-inner); }
.espt-block-bd-size-chart.is-design-bordered .bdsc-il,
.espt-block-bd-size-chart.is-design-bordered .bdsc-cell { border: 1px solid var(--sc-inner); }

/* gradient header */
.espt-block-bd-size-chart.is-design-gradient .bdsc {
	--sc-head-fg: var(--head-color, #fff);
	--sc-head-line: color-mix(in srgb, #fff 26%, transparent);
}

.espt-block-bd-size-chart.is-design-gradient .bdsc-hd {
	background: linear-gradient(120deg, var(--head-bg, var(--bd-primary)), var(--bd-deep));
}

/* a sticky cell cannot carry the row's gradient — match its left-hand stop */
.espt-block-bd-size-chart.is-design-gradient.is-sticky-name .bdsc-hc-nm { background: var(--head-bg, var(--bd-primary)); }

/* dark table */
.espt-block-bd-size-chart.is-design-dark .bdsc {
	--sc-bg: var(--table-bg, #111827);
	--sc-line: var(--line-color, rgba(255, 255, 255, 0.16));
	--sc-inner: var(--line-color, rgba(255, 255, 255, 0.12));
	--sc-head-bg: var(--head-bg, rgba(255, 255, 255, 0.07));
	--sc-head-fg: var(--head-color, rgba(255, 255, 255, 0.72));
	--sc-head-line: rgba(255, 255, 255, 0.14);
	--sc-name: var(--name-color, #fff);
	--sc-value: var(--value-color, #fff);
	--sc-cell: var(--cell-color, rgba(255, 255, 255, 0.72));
	--sc-icon: var(--icon-color, rgba(255, 255, 255, 0.8));
	--sc-stripe: rgba(255, 255, 255, 0.04);
	--sc-hover: rgba(255, 255, 255, 0.07);
	--sc-pop: var(--pop-bg, color-mix(in srgb, var(--bd-primary) 26%, #111827));
}

.espt-block-bd-size-chart.is-design-dark .bdsc-ns { color: rgba(255, 255, 255, 0.6); }
.espt-block-bd-size-chart.is-design-dark.is-figure-box-tile .bdsc-ic { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }

/* elevated — borderless card, floating pill header */
.espt-block-bd-size-chart.is-design-elevated .bdsc {
	--sc-head-bg: var(--head-bg, color-mix(in srgb, var(--bd-primary) 10%, var(--sc-bg)));
	--sc-head-fg: var(--head-color, var(--bd-primary-dark));
	--sc-head-line: transparent;
	--sc-radius: var(--table-radius, 16px);
	--sc-inner: var(--line-color, color-mix(in srgb, var(--bd-ink) 7%, transparent));
}

.espt-block-bd-size-chart.is-design-elevated .bdsc-sc {
	border: 0;
	box-shadow: 0 12px 32px -18px rgba(15, 23, 42, 0.45), 0 0 0 1px color-mix(in srgb, var(--bd-ink) 6%, transparent);
}

.espt-block-bd-size-chart.is-design-elevated .bdsc-hc { font-weight: 800; }
.espt-block-bd-size-chart.is-design-elevated .bdsc-cell { border-left: 0; }

/* ========================= phone behaviours ========================= */

/* scroll sideways: give the table a minimum width on small screens */
.espt-block-bd-size-chart.is-mobile-mode-scroll .bdsc { --sc-tmin: var(--table-min, 460px); }

/* hide the last column (the original's <520px rule) */
.espt-block-bd-size-chart.is-mobile-mode-hide .bdsc.is-hidable .bdsc-hc:last-child,
.espt-block-bd-size-chart.is-mobile-mode-hide .bdsc.is-hidable .bdsc-cell:last-child { display: none; }

/* stack every size into its own card */
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-sc { border: 0; overflow: visible; }
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t,
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t tbody { display: block; width: 100%; }
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t thead { display: none; }

.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-row {
	border: 1.5px solid var(--sc-line);
	border-radius: var(--sc-radius);
	display: block;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
}

.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t tbody tr:last-child { border-bottom: 1.5px solid var(--sc-line); margin-bottom: 0; }

.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-il {
	border-bottom: 1px solid var(--sc-inner);
	display: block;
	position: static;
	width: auto;
}

.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell {
	align-items: baseline;
	border-left: 0;
	border-top: 1px solid var(--sc-inner);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	justify-content: space-between;
	padding: calc(var(--sc-pad) * 0.65) var(--sc-pad);
	text-align: left;
	width: auto;
}

.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell:first-of-type { border-top: 0; }

.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell[data-label]::before {
	color: var(--bd-muted);
	content: attr(data-label);
	flex: 0 0 auto;
	font-size: calc(var(--cell-size, 13px) * 0.9);
	font-weight: 600;
}

.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell .bdsc-v,
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell .bdsc-vs { text-align: right; }
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell .bdsc-vs { flex: 1 1 100%; }
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-row.has-badge > * { padding-top: calc(var(--sc-pad) * 0.65); }
.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-row.has-badge .bdsc-il { padding-top: calc(var(--sc-pad) + 8px); }

/* stacked cards draw their own frame — the bordered grid must not double it */
.espt-block-bd-size-chart.is-mobile-mode-stack.is-design-bordered .bdsc-il,
.espt-block-bd-size-chart.is-mobile-mode-stack.is-design-bordered .bdsc-cell { border-right: 0; border-bottom: 0; }

/* ======================= tablet: full table back ======================= */
@media (min-width: 768px) {
	/* room again for the real padding / figure / column width */
	.espt-block-bd-size-chart .bdsc {
		--sc-fig: var(--figure-size, 38px);
		--sc-gap: 11px;
		--sc-namew: var(--name-width, 34%);
		--sc-pad: var(--cell-pad, 12px);
	}

	.espt-block-bd-size-chart .bdsc-h { margin-bottom: 6px; }
	.espt-block-bd-size-chart .bdsc-sb { margin-bottom: 18px; }

	.espt-block-bd-size-chart.is-mobile-mode-scroll .bdsc { --sc-tmin: 0px; }

	.espt-block-bd-size-chart.is-mobile-mode-hide .bdsc.is-hidable .bdsc-hc:last-child,
	.espt-block-bd-size-chart.is-mobile-mode-hide .bdsc.is-hidable .bdsc-cell:last-child { display: table-cell; }

	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-sc { border: 1.5px solid var(--sc-line); overflow-x: auto; overflow-y: hidden; }
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t { display: table; }
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t thead { display: table-header-group; }
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t tbody { display: table-row-group; }

	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-row {
		border: 0;
		border-bottom: 1px solid var(--sc-inner);
		border-radius: 0;
		display: table-row;
		margin-bottom: 0;
		overflow: visible;
	}

	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-t tbody tr:last-child { border-bottom: 0; }

	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-il {
		border-bottom: 0;
		display: table-cell;
		width: var(--sc-namew);
	}

	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell {
		border-left: 1px solid var(--sc-inner);
		border-top: 0;
		display: table-cell;
		padding: var(--sc-pad) calc(var(--sc-pad) * 0.65);
		text-align: center;
	}

	/* the cards are gone again — give the bordered grid its full frame back */
	.espt-block-bd-size-chart.is-mobile-mode-stack.is-design-bordered .bdsc-il,
	.espt-block-bd-size-chart.is-mobile-mode-stack.is-design-bordered .bdsc-cell { border: 1px solid var(--sc-inner); }

	.espt-block-bd-size-chart.is-mobile-mode-stack.is-cell-align-left .bdsc-cell { text-align: left; }
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell::before { content: none; }
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell .bdsc-v,
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-cell .bdsc-vs { text-align: inherit; }
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-row.has-badge > *,
	.espt-block-bd-size-chart.is-mobile-mode-stack .bdsc-row.has-badge .bdsc-il { padding-top: calc(var(--sc-pad) + 7px); }
}

/* ======================= desktop polish ======================= */
@media (min-width: 1024px) {
	/* the hint is not hidden here on purpose: JS only shows it while the table
	   really can scroll, which can still happen on a narrow column. */
	.espt-block-bd-size-chart .bdsc-badge { font-size: 10.5px; }
	.espt-block-bd-size-chart .bdsc-ns { font-size: calc(var(--cell-size, 14px) * 0.85); }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-size-chart .bdsc-hi:first-child,
	.espt-block-bd-size-chart .bdsc-hi:last-child { animation: none; }
	.espt-block-bd-size-chart .bdsc-row,
	.espt-block-bd-size-chart .bdsc-ic,
	.espt-block-bd-size-chart .bdsc-u,
	.espt-block-bd-size-chart .bdsc-wrap::before,
	.espt-block-bd-size-chart .bdsc-wrap::after { transition: none; }
}