/* BD Seller Letter — .espt-block-bd-seller-letter
   vars: --paper-max --paper-pad --paper-radius --backdrop-bg --paper-bg --rule-color --margin-color
         --eyebrow-size --eyebrow-color --title-size --ink-color --body-size --line-height --body-color
         --sign-size --sign-color --role-color --photo-size --points-color --clamp-lines
         --stamp-size --stamp-rotate --stamp-color --cta-bg --cta-color --cta-radius
   locals: --pad (paper padding, shrunk on phones) --rule (ruled-line colour)
           --lh (one ruled line) --sheet (the sheet colour for this design)
   classes: is-design-{paper|notebook|parchment|note|card|dark|minimal|envelope}
            is-rules/no-rules is-margin-line/no-margin-line is-dogear is-text-align-*
            is-photo-pos-* is-photo-shape-* is-sign-style-* is-points-style-*
            is-stamp-shape-* is-stamp-pos-*
            is-cta-design-* is-cta-align-* is-cta-full
   JS adds .is-open / .is-fit on .bdl34-fold (assets/js/blocks/bd-seller-letter.js) */

/* Faint tinted backdrop (per skin) so the white sheet reads as paper.
   The Design panel's "Box background" is inline on the root and still wins. */
.espt-block.espt-block-bd-seller-letter {
	--bd-box-bg: color-mix(in srgb, var(--bd-soft) 55%, #eef1ed);
	--bd-box-line: color-mix(in srgb, var(--bd-soft-line) 60%, #dfe4e0);
}

.espt-block-bd-seller-letter .bdl34 {
	background: var(--backdrop-bg, var(--bd-box-bg));
	color: var(--bd-ink);
	min-width: 0;
	position: relative;
}

/* ------------------------------------------------------------------ paper */
.espt-block-bd-seller-letter .bdl34-p {
	--pad: calc(var(--paper-pad, 22px) * 0.72);
	--rule: var(--rule-color, var(--bd-line));
	--lh: calc(var(--body-size, 15px) * var(--line-height, 2));
	/* the sheet colour, so the folded corner / envelope flap follow the design */
	--sheet: var(--paper-bg, #fff);
	background: var(--sheet);
	border-radius: var(--paper-radius, 6px);
	box-shadow: 0 10px 26px -16px rgba(15, 23, 42, 0.45);
	margin: 0 auto;
	max-width: var(--paper-max, 480px);
	min-width: 0;
	overflow-wrap: anywhere;
	padding: var(--pad);
	position: relative;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	width: 100%;
}

.espt-block-bd-seller-letter .bdl34-p:hover { box-shadow: 0 16px 34px -18px rgba(15, 23, 42, 0.5); }

.espt-block-bd-seller-letter .bdl34-p > * {
	position: relative;
	z-index: 1;
}

/* ruled lines (an overlay so it survives any paper colour) */
.espt-block-bd-seller-letter.is-rules .bdl34-p::after {
	background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh));
	background-position: 0 calc(var(--pad) + var(--lh) * 0.15);
	border-radius: inherit;
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* left margin line */
.espt-block-bd-seller-letter.is-margin-line .bdl34-p { padding-left: calc(var(--pad) + 22px); }

.espt-block-bd-seller-letter.is-margin-line .bdl34-p::before {
	background: var(--margin-color, #f2cfc8);
	bottom: 0;
	content: "";
	left: calc(var(--pad) + 8px);
	position: absolute;
	top: 0;
	width: 2px;
	z-index: 0;
}

/* folded corner */
.espt-block-bd-seller-letter .bdl34-dog {
	border-bottom-right-radius: inherit;
	bottom: 0;
	height: 34px;
	position: absolute;
	right: 0;
	width: 34px;
	z-index: 2;
}

.espt-block-bd-seller-letter .bdl34-dog::before {
	background: linear-gradient(315deg, color-mix(in srgb, #0f172a 14%, var(--sheet, #fff)) 50%, transparent 50%);
	border-bottom-right-radius: var(--paper-radius, 6px);
	box-shadow: -2px -2px 6px -3px rgba(15, 23, 42, 0.4) inset;
	content: "";
	inset: 0;
	position: absolute;
}

/* keep the last line of the letter clear of the fold */
.espt-block-bd-seller-letter.is-dogear .bdl34-p { padding-bottom: calc(var(--pad) + 14px); }

.espt-block-bd-seller-letter .bdl34-deco {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* --------------------------------------------------------------- typography */
.espt-block-bd-seller-letter .bdl34-hd {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0 0 8px;
	min-width: 0;
}

.espt-block-bd-seller-letter .bdl34-eb {
	color: var(--eyebrow-color, var(--bd-muted));
	display: block;
	font-size: var(--eyebrow-size, 12px);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	min-width: 0;
}

.espt-block-bd-seller-letter .bdl34-sal {
	color: var(--ink-color, var(--bd-ink));
	font-size: var(--title-size, 17px);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 10px;
}

.espt-block-bd-seller-letter .bdl34-bd {
	color: var(--body-color, var(--bd-body));
	font-size: var(--body-size, 15px);
	line-height: var(--line-height, 2);
	min-width: 0;
}

.espt-block-bd-seller-letter .bdl34-bd p {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0 0 10px;
}

.espt-block-bd-seller-letter .bdl34-bd > :last-child { margin-bottom: 0; }

.espt-block-bd-seller-letter .bdl34-bd strong,
.espt-block-bd-seller-letter .bdl34-bd b { color: var(--ink-color, var(--bd-ink)); }

.espt-block-bd-seller-letter .bdl34-bd em { font-style: italic; }

.espt-block-bd-seller-letter .bdl34-bd a {
	color: var(--bd-primary-dark);
	text-decoration: underline;
}

.espt-block-bd-seller-letter .bdl34-bd ul,
.espt-block-bd-seller-letter .bdl34-bd ol {
	margin: 0 0 10px;
	padding-left: 1.25em;
}

.espt-block-bd-seller-letter .bdl34-bd img {
	border-radius: 6px;
	height: auto;
	max-width: 100%;
}

/* wide content inside the letter never breaks the sheet */
.espt-block-bd-seller-letter .bdl34-bd table {
	border-collapse: collapse;
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ---------------------------------------------------------- promise points */
.espt-block-bd-seller-letter .bdl34-pts {
	display: grid;
	gap: 7px;
	list-style: none;
	margin: 12px 0 0;
	min-width: 0;
	padding: 0;
}

.espt-block-bd-seller-letter .bdl34-pts li {
	align-items: start;
	color: var(--body-color, var(--bd-body));
	display: grid;
	font-size: calc(var(--body-size, 15px) * 0.95);
	gap: 8px;
	grid-template-columns: auto minmax(0, 1fr);
	line-height: 1.55;
	min-width: 0;
}

.espt-block-bd-seller-letter .bdl34-pts li > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-bd-seller-letter .bdl34-pi {
	color: var(--points-color, var(--bd-primary));
	font-size: 1.05em;
	margin-top: 0.2em;
	transition: transform 0.2s ease;
}

.espt-block-bd-seller-letter .bdl34-pts li:hover .bdl34-pi { transform: scale(1.12); }

.espt-block-bd-seller-letter.is-points-style-circle .bdl34-pi,
.espt-block-bd-seller-letter.is-points-style-box .bdl34-pi {
	align-items: center;
	background: color-mix(in srgb, var(--points-color, var(--bd-primary)) 14%, transparent);
	display: inline-flex;
	font-size: 0.85em;
	height: 1.7em;
	justify-content: center;
	margin-top: 0.1em;
	width: 1.7em;
}

.espt-block-bd-seller-letter.is-points-style-circle .bdl34-pi { border-radius: 50%; }
.espt-block-bd-seller-letter.is-points-style-box .bdl34-pi { border-radius: 6px; }

.espt-block-bd-seller-letter.is-points-style-dash .bdl34-pi { display: none; }

.espt-block-bd-seller-letter.is-points-style-dash .bdl34-pts li {
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-bd-seller-letter.is-points-style-dash .bdl34-pts li > span::before {
	color: var(--points-color, var(--bd-primary));
	content: "— ";
	font-weight: 700;
}

/* ------------------------------------------------------------- fold / more */
.espt-block-bd-seller-letter .bdl34-fold {
	min-width: 0;
	position: relative;
}

/* A mask, not a paper-coloured gradient overlay: the fade then works on every
   design (including "minimal", which has no sheet colour to fade into). */
.espt-block-bd-seller-letter[data-espt-ready] .bdl34-fold.is-clamped:not(.is-open):not(.is-fit) {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--lh, 30px)), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--lh, 30px)), transparent);
	max-height: calc(var(--clamp-lines, 7) * var(--body-size, 15px) * var(--line-height, 2));
	overflow: hidden;
}

.espt-block-bd-seller-letter .bdl34-more {
	align-items: center;
	background: none;
	border: 0;
	color: var(--bd-primary-dark);
	cursor: pointer;
	display: none;
	font-size: calc(var(--body-size, 15px) * 0.92);
	font-weight: 700;
	gap: 6px;
	margin-top: 6px;
	padding: 4px 0;
}

.espt-block-bd-seller-letter[data-espt-ready] .bdl34-more { display: inline-flex; }
.espt-block-bd-seller-letter .bdl34-more[hidden] { display: none; }
.espt-block-bd-seller-letter .bdl34-more:hover { text-decoration: underline; }

.espt-block-bd-seller-letter .bdl34-more:focus-visible,
.espt-block-bd-seller-letter .bdl34-btn:focus-visible,
.espt-block-bd-seller-letter .bdl34-ct a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.espt-block-bd-seller-letter .bdl34-more-c {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	height: 7px;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.2s ease;
	width: 7px;
}

.espt-block-bd-seller-letter .bdl34-more[aria-expanded="true"] .bdl34-more-c { transform: rotate(-135deg) translate(-2px, -2px); }

/* --------------------------------------------------------------- signature */
.espt-block-bd-seller-letter .bdl34-sign {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	margin-top: 14px;
	min-width: 0;
}

.espt-block-bd-seller-letter .bdl34-sgt {
	display: block;
	min-width: 0;
}

.espt-block-bd-seller-letter .bdl34-sg {
	color: var(--sign-color, var(--bd-deep));
	display: block;
	font-size: var(--sign-size, 26px);
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.espt-block-bd-seller-letter .bdl34-sgi { display: block; }

.espt-block-bd-seller-letter .bdl34-sgi-i {
	display: block;
	height: auto;
	max-height: calc(var(--sign-size, 26px) * 2.4);
	max-width: min(100%, 260px);
	width: auto;
}

.espt-block-bd-seller-letter.is-sign-style-script .bdl34-sg {
	font-style: italic;
	letter-spacing: 0.01em;
	transform: rotate(-1.5deg);
	transform-origin: left center;
}

.espt-block-bd-seller-letter.is-sign-style-ink .bdl34-sg {
	color: var(--sign-color, #1f3f8f);
	font-style: italic;
}

.espt-block-bd-seller-letter.is-sign-style-underline .bdl34-sg {
	font-style: italic;
	padding-bottom: 4px;
	position: relative;
}

.espt-block-bd-seller-letter.is-sign-style-underline .bdl34-sg::after {
	background: linear-gradient(to right, transparent, currentColor 12%, currentColor 82%, transparent);
	border-radius: 2px;
	bottom: 0;
	content: "";
	height: 2px;
	left: 0;
	opacity: 0.55;
	position: absolute;
	right: 20%;
}

.espt-block-bd-seller-letter.is-sign-style-boxed .bdl34-sg {
	border: 2px solid currentColor;
	border-radius: 8px;
	display: inline-block;
	font-size: calc(var(--sign-size, 26px) * 0.72);
	font-style: italic;
	padding: 2px 12px;
	transform: rotate(-1.8deg);
}

.espt-block-bd-seller-letter.is-sign-style-plain .bdl34-sg {
	font-size: calc(var(--sign-size, 26px) * 0.72);
	font-weight: 800;
}

.espt-block-bd-seller-letter .bdl34-rl {
	color: var(--role-color, var(--bd-muted));
	display: block;
	font-size: calc(var(--body-size, 15px) * 0.85);
	line-height: 1.5;
	margin-top: 2px;
	overflow-wrap: anywhere;
}

.espt-block-bd-seller-letter .bdl34-bg {
	align-items: center;
	background: color-mix(in srgb, var(--bd-primary) 12%, transparent);
	border-radius: 99px;
	color: var(--bd-primary-dark);
	display: inline-flex;
	font-size: calc(var(--body-size, 15px) * 0.8);
	font-weight: 700;
	gap: 5px;
	line-height: 1.4;
	margin-top: 6px;
	max-width: 100%;
	padding: 3px 10px;
}

/* font-size alone leaves the glyph at 0x0: icon() emits a bare <span> whose
   <svg> carries no width/height, and only the default .espt-ic class sizes it.
   A custom class must size the svg itself, or the badge icon never appears. */
.espt-block-bd-seller-letter .bdl34-bgi { display: inline-flex; font-size: 1.05em; line-height: 0; }
.espt-block-bd-seller-letter .bdl34-bgi svg { display: block; height: 1em; width: 1em; }

.espt-block-bd-seller-letter .bdl34-ct {
	color: var(--role-color, var(--bd-muted));
	display: block;
	font-size: calc(var(--body-size, 15px) * 0.85);
	margin-top: 5px;
	overflow-wrap: anywhere;
}

.espt-block-bd-seller-letter .bdl34-ct a {
	color: var(--bd-primary-dark);
	font-weight: 700;
	text-decoration: none;
}

.espt-block-bd-seller-letter .bdl34-ct a:hover { text-decoration: underline; }

/* -------------------------------------------------------------- P.S. line */
.espt-block-bd-seller-letter .bdl34-ps {
	border-top: 1px dashed var(--rule-color, var(--bd-line));
	color: var(--body-color, var(--bd-body));
	font-size: calc(var(--body-size, 15px) * 0.92);
	line-height: 1.6;
	margin: 14px 0 0;
	overflow-wrap: anywhere;
	padding-top: 10px;
}

.espt-block-bd-seller-letter .bdl34-ps b { color: var(--ink-color, var(--bd-ink)); }

/* --------------------------------------------------------- author photo */
.espt-block-bd-seller-letter .bdl34-ph {
	display: inline-block;
	flex: 0 0 auto;
	line-height: 0;
}

.espt-block-bd-seller-letter .bdl34-ph-i {
	display: block;
	height: var(--photo-size, 54px);
	object-fit: cover;
	width: var(--photo-size, 54px);
}

.espt-block-bd-seller-letter.is-photo-shape-circle .bdl34-ph-i {
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff, 0 4px 12px -6px rgba(15, 23, 42, 0.6);
}

.espt-block-bd-seller-letter.is-photo-shape-rounded .bdl34-ph-i {
	border-radius: 12px;
	box-shadow: 0 4px 12px -6px rgba(15, 23, 42, 0.55);
}

.espt-block-bd-seller-letter.is-photo-shape-polaroid .bdl34-ph {
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.6);
	padding: 4px 4px 14px;
	transform: rotate(-2.5deg);
}

.espt-block-bd-seller-letter.is-photo-shape-stamp .bdl34-ph {
	background: #fff;
	border: 1px dashed color-mix(in srgb, var(--bd-ink) 25%, transparent);
	border-radius: 4px;
	box-shadow: 0 5px 14px -9px rgba(15, 23, 42, 0.6);
	padding: 5px;
	transform: rotate(2deg);
}

.espt-block-bd-seller-letter .bdl34-top {
	margin: 0 0 10px;
	text-align: center;
}

.espt-block-bd-seller-letter.is-photo-pos-top .bdl34-ph-i {
	height: calc(var(--photo-size, 54px) * 1.25);
	width: calc(var(--photo-size, 54px) * 1.25);
}

/* beside a one-line eyebrow the full photo would tower over it */
.espt-block-bd-seller-letter.is-photo-pos-head .bdl34-ph-i {
	height: calc(var(--photo-size, 54px) * 0.7);
	width: calc(var(--photo-size, 54px) * 0.7);
}

/* ------------------------------------------------------- stamp / wax seal */
.espt-block-bd-seller-letter .bdl34-stamp {
	align-items: center;
	color: var(--stamp-color, var(--bd-danger));
	display: flex;
	height: var(--stamp-size, 72px);
	justify-content: center;
	opacity: 0.85;
	pointer-events: none;
	position: absolute;
	text-align: center;
	transform: rotate(var(--stamp-rotate, -12deg));
	width: var(--stamp-size, 72px);
	z-index: 3;
}

.espt-block-bd-seller-letter .bdl34-stamp-in {
	display: block;
	line-height: 1.15;
	max-width: 86%;
	overflow-wrap: anywhere;
	padding: 4px;
}

.espt-block-bd-seller-letter .bdl34-stamp b {
	display: block;
	font-size: calc(var(--stamp-size, 72px) * 0.19);
	font-weight: 800;
	letter-spacing: 0.02em;
}

.espt-block-bd-seller-letter .bdl34-stamp em {
	display: block;
	font-size: calc(var(--stamp-size, 72px) * 0.13);
	font-style: normal;
	margin-top: 2px;
	opacity: 0.9;
}

.espt-block-bd-seller-letter.is-stamp-shape-round .bdl34-stamp {
	border: 3px double currentColor;
	border-radius: 50%;
}

.espt-block-bd-seller-letter.is-stamp-shape-square .bdl34-stamp {
	border: 3px double currentColor;
	border-radius: 6px;
}

.espt-block-bd-seller-letter.is-stamp-shape-wax .bdl34-stamp {
	background: radial-gradient(circle at 32% 28%, color-mix(in srgb, #fff 30%, var(--stamp-color, var(--bd-danger))), var(--stamp-color, var(--bd-danger)) 70%);
	border-radius: 48% 52% 51% 49% / 50% 47% 53% 50%;
	box-shadow: 0 6px 14px -8px rgba(15, 23, 42, 0.8);
	color: #fff;
	opacity: 0.95;
}

.espt-block-bd-seller-letter.is-stamp-shape-ink .bdl34-stamp {
	opacity: 0.7;
}

.espt-block-bd-seller-letter.is-stamp-shape-ink .bdl34-stamp b { font-size: calc(var(--stamp-size, 72px) * 0.24); }

.espt-block-bd-seller-letter.is-stamp-pos-top-right .bdl34-stamp { right: 4px; top: 4px; }
.espt-block-bd-seller-letter.is-stamp-pos-top-left .bdl34-stamp { left: 4px; top: 4px; }
.espt-block-bd-seller-letter.is-stamp-pos-bottom-right .bdl34-stamp { bottom: 6px; right: 6px; }
.espt-block-bd-seller-letter.is-stamp-pos-bottom-left .bdl34-stamp { bottom: 6px; left: 6px; }

/* ---------------------------------------------------------------- designs */
/* notebook — punched holes down the left edge */
.espt-block-bd-seller-letter.is-design-notebook .bdl34-p {
	border-left: 1px solid color-mix(in srgb, var(--bd-ink) 8%, transparent);
	padding-left: calc(var(--pad) + 26px);
}

.espt-block-bd-seller-letter.is-design-notebook .bdl34-deco::before {
	background: radial-gradient(circle 5px at 50% 10px, color-mix(in srgb, var(--bd-ink) 16%, transparent) 98%, transparent 100%);
	background-repeat: repeat-y;
	background-size: 100% 46px;
	bottom: 10px;
	content: "";
	left: 8px;
	position: absolute;
	top: 8px;
	width: 14px;
}

.espt-block-bd-seller-letter.is-design-notebook.is-margin-line .bdl34-p::before { left: calc(var(--pad) + 12px); }

/* parchment — warm aged sheet with a hand-drawn edge */
.espt-block.espt-block-bd-seller-letter.is-design-parchment {
	--bd-box-bg: #efe6d3;
	--bd-box-line: #dccfb2;
}

.espt-block-bd-seller-letter.is-design-parchment .bdl34-p {
	--sheet: var(--paper-bg, #fbf3e3);
	background: var(--sheet);
	border: 1px solid color-mix(in srgb, #8a6f42 35%, transparent);
	border-radius: var(--paper-radius, 6px);
	box-shadow: 0 10px 24px -18px rgba(74, 55, 24, 0.8), 0 0 40px -12px rgba(138, 111, 66, 0.35) inset;
}

.espt-block-bd-seller-letter.is-design-parchment .bdl34-sal,
.espt-block-bd-seller-letter.is-design-parchment .bdl34-bd b,
.espt-block-bd-seller-letter.is-design-parchment .bdl34-ps b { color: var(--ink-color, #4a3718); }

.espt-block-bd-seller-letter.is-design-parchment .bdl34-bd,
.espt-block-bd-seller-letter.is-design-parchment .bdl34-pts li,
.espt-block-bd-seller-letter.is-design-parchment .bdl34-ps { color: var(--body-color, #5b482a); }

.espt-block-bd-seller-letter.is-design-parchment .bdl34-p { --rule: var(--rule-color, rgba(138, 111, 66, 0.22)); }
.espt-block-bd-seller-letter.is-design-parchment.is-margin-line .bdl34-p::before { background: var(--margin-color, rgba(160, 90, 70, 0.45)); }

/* sticky note — tape at the top, tilted sheet */
.espt-block-bd-seller-letter.is-design-note .bdl34 { overflow: hidden; }

.espt-block-bd-seller-letter.is-design-note .bdl34-p {
	--sheet: var(--paper-bg, #fdf6c8);
	background: var(--sheet);
	border-radius: var(--paper-radius, 6px);
	box-shadow: 0 12px 26px -18px rgba(15, 23, 42, 0.7);
	margin-top: 10px;
	transform: rotate(-0.5deg);
}

.espt-block-bd-seller-letter.is-design-note .bdl34-deco::before {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(226, 232, 240, 0.75));
	border: 1px solid rgba(15, 23, 42, 0.06);
	content: "";
	height: 22px;
	left: 50%;
	position: absolute;
	top: -12px;
	transform: translateX(-50%) rotate(-2deg);
	width: 96px;
}

.espt-block-bd-seller-letter.is-design-note .bdl34-p { --rule: var(--rule-color, rgba(120, 100, 20, 0.16)); }

/* card — clean sheet, decorative quote mark, never ruled */
.espt-block-bd-seller-letter.is-design-card .bdl34-p {
	border: 1px solid var(--bd-line);
	border-radius: max(var(--paper-radius, 6px), 14px);
	box-shadow: 0 14px 30px -20px rgba(15, 23, 42, 0.5);
}

.espt-block-bd-seller-letter.is-design-card.is-rules .bdl34-p::after,
.espt-block-bd-seller-letter.is-design-card.is-margin-line .bdl34-p::before,
.espt-block-bd-seller-letter.is-design-minimal.is-rules .bdl34-p::after,
.espt-block-bd-seller-letter.is-design-minimal.is-margin-line .bdl34-p::before { display: none; }

.espt-block-bd-seller-letter.is-design-card.is-margin-line .bdl34-p { padding-left: var(--pad); }

.espt-block-bd-seller-letter.is-design-card .bdl34-deco::before {
	color: color-mix(in srgb, var(--bd-primary) 16%, transparent);
	content: "\201C";
	font-size: 90px;
	line-height: 1;
	position: absolute;
	right: 12px;
	top: 0;
}

/* dark letter */
.espt-block.espt-block-bd-seller-letter.is-design-dark {
	--bd-box-bg: #0b1420;
	--bd-box-line: rgba(255, 255, 255, 0.09);
}

.espt-block-bd-seller-letter.is-design-dark .bdl34-p {
	--rule: var(--rule-color, rgba(255, 255, 255, 0.08));
	--sheet: var(--paper-bg, #16212e);
	background: var(--sheet);
	box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.9);
}

.espt-block-bd-seller-letter.is-design-dark .bdl34-sal,
.espt-block-bd-seller-letter.is-design-dark .bdl34-bd b,
.espt-block-bd-seller-letter.is-design-dark .bdl34-ps b { color: var(--ink-color, #f1f5f9); }

.espt-block-bd-seller-letter.is-design-dark .bdl34-bd,
.espt-block-bd-seller-letter.is-design-dark .bdl34-pts li,
.espt-block-bd-seller-letter.is-design-dark .bdl34-ps { color: var(--body-color, #cbd5e1); }

.espt-block-bd-seller-letter.is-design-dark .bdl34-eb { color: var(--eyebrow-color, #94a3b8); }
.espt-block-bd-seller-letter.is-design-dark .bdl34-sg { color: var(--sign-color, #e2e8f0); }
.espt-block-bd-seller-letter.is-design-dark .bdl34-rl,
.espt-block-bd-seller-letter.is-design-dark .bdl34-ct { color: var(--role-color, #94a3b8); }
.espt-block-bd-seller-letter.is-design-dark .bdl34-bg {
	background: color-mix(in srgb, var(--bd-primary) 26%, transparent);
	color: #e6fbf0;
}
.espt-block-bd-seller-letter.is-design-dark .bdl34-more { color: #a7f3d0; }
.espt-block-bd-seller-letter.is-design-dark .bdl34-ps { border-top-color: rgba(255, 255, 255, 0.12); }
.espt-block-bd-seller-letter.is-design-dark.is-margin-line .bdl34-p::before { background: var(--margin-color, rgba(248, 113, 113, 0.5)); }

/* minimal — no sheet, just an accent bar */
.espt-block-bd-seller-letter.is-design-minimal .bdl34 {
	background: var(--backdrop-bg, transparent);
	border-color: transparent;
	padding: 0;
}

.espt-block-bd-seller-letter.is-design-minimal .bdl34-p {
	--sheet: var(--paper-bg, transparent);
	background: var(--sheet);
	border-left: 3px solid var(--margin-color, var(--bd-primary));
	border-radius: 0;
	box-shadow: none;
	padding-left: calc(var(--pad) + 4px);
}

.espt-block-bd-seller-letter.is-design-minimal .bdl34-p:hover { box-shadow: none; }

/* no sheet ⇒ nothing to fold */
.espt-block-bd-seller-letter.is-design-minimal .bdl34-dog { display: none; }
.espt-block-bd-seller-letter.is-design-minimal.is-dogear .bdl34-p { padding-bottom: var(--pad); }

/* envelope — flap over the top edge, wax dot at its tip */
.espt-block.espt-block-bd-seller-letter.is-design-envelope {
	--bd-box-bg: #e7ddc9;
	--bd-box-line: #d5c7ab;
}

.espt-block-bd-seller-letter.is-design-envelope .bdl34-p {
	margin-top: 26px;
	padding-top: calc(var(--pad) + 14px);
}

.espt-block-bd-seller-letter.is-design-envelope .bdl34-deco::before {
	background: color-mix(in srgb, #b59a6c 55%, var(--sheet, #fff));
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "";
	height: 34px;
	left: 0;
	position: absolute;
	right: 0;
	top: -22px;
}

.espt-block-bd-seller-letter.is-design-envelope .bdl34-deco::after {
	background: radial-gradient(circle at 34% 30%, #e06d5a, #a8321f 72%);
	border-radius: 50%;
	box-shadow: 0 4px 10px -5px rgba(15, 23, 42, 0.8);
	content: "";
	height: 22px;
	left: 50%;
	position: absolute;
	top: 2px;
	transform: translateX(-50%);
	width: 22px;
}

/* ------------------------------------------------------------------- CTA */
.espt-block-bd-seller-letter .bdl34-cta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 14px;
	min-width: 0;
}

/* the letter can be emptied down to just the button */
.espt-block-bd-seller-letter .bdl34-cta:first-child { margin-top: 0; }

.espt-block-bd-seller-letter .bdl34-btn {
	align-items: center;
	background: var(--cta-bg, var(--espt-btn-bg, var(--bd-primary)));
	border: 2px solid transparent;
	border-radius: var(--cta-radius, 10px);
	color: var(--cta-color, #fff);
	display: inline-flex;
	font-size: calc(var(--body-size, 15px) * 1.05);
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.25;
	padding: 13px 22px;
	text-align: center;
	text-decoration: none;
	transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	width: 100%;
}

.espt-block-bd-seller-letter .bdl34-btn:hover {
	color: var(--cta-color, #fff);
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* Same trap as .bdl34-bgi above — the svg needs its own size. */
.espt-block-bd-seller-letter .bdl34-bico { display: inline-flex; font-size: 1.05em; line-height: 0; }
.espt-block-bd-seller-letter .bdl34-bico svg { display: block; height: 1em; width: 1em; }

.espt-block-bd-seller-letter .bdl34-note {
	color: var(--role-color, var(--bd-muted));
	font-size: calc(var(--body-size, 15px) * 0.85);
	line-height: 1.5;
	overflow-wrap: anywhere;
	text-align: center;
}

.espt-block-bd-seller-letter.is-cta-design-pill .bdl34-btn { border-radius: 99px; }

.espt-block-bd-seller-letter.is-cta-design-gradient .bdl34-btn {
	background: linear-gradient(135deg, var(--cta-bg, var(--espt-btn-bg, var(--bd-primary))), var(--bd-primary-dark));
}

.espt-block-bd-seller-letter.is-cta-design-outline .bdl34-btn {
	background: transparent;
	border-color: var(--cta-bg, var(--bd-primary));
	color: var(--cta-color, var(--bd-primary-dark));
}

.espt-block-bd-seller-letter.is-cta-design-outline .bdl34-btn:hover {
	background: color-mix(in srgb, var(--cta-bg, var(--espt-btn-bg, var(--bd-primary))) 10%, transparent);
	color: var(--cta-color, var(--bd-primary-dark));
}

.espt-block-bd-seller-letter.is-cta-design-soft .bdl34-btn {
	background: color-mix(in srgb, var(--cta-bg, var(--espt-btn-bg, var(--bd-primary))) 16%, transparent);
	color: var(--cta-color, var(--bd-primary-dark));
}

.espt-block-bd-seller-letter.is-cta-design-ghost .bdl34-btn {
	background: none;
	border-radius: 0;
	color: var(--cta-color, var(--bd-primary-dark));
	padding: 6px 0;
	text-decoration: underline;
}

.espt-block-bd-seller-letter.is-cta-design-ghost .bdl34-btn:hover { transform: none; }

/* ------------------------------------------------------------- alignment */
.espt-block-bd-seller-letter.is-text-align-center .bdl34-p,
.espt-block-bd-seller-letter.is-text-align-center .bdl34-ps { text-align: center; }
.espt-block-bd-seller-letter.is-text-align-center .bdl34-hd,
.espt-block-bd-seller-letter.is-text-align-center .bdl34-sign { justify-content: center; }

/* the icon + text pair hugs the centre instead of the text floating in a 1fr cell */
.espt-block-bd-seller-letter.is-text-align-center .bdl34-pts li {
	grid-template-columns: auto minmax(0, auto);
	justify-content: center;
	text-align: left;
}

.espt-block-bd-seller-letter.is-text-align-right .bdl34-p,
.espt-block-bd-seller-letter.is-text-align-right .bdl34-ps { text-align: right; }
.espt-block-bd-seller-letter.is-text-align-right .bdl34-hd,
.espt-block-bd-seller-letter.is-text-align-right .bdl34-sign { justify-content: flex-end; }
.espt-block-bd-seller-letter.is-text-align-right .bdl34-pts li {
	grid-template-columns: auto minmax(0, auto);
	justify-content: end;
	text-align: left;
}
/* the scanned-signature image is width:auto, so it needs the margins */
.espt-block-bd-seller-letter.is-text-align-center .bdl34-sgi-i { margin-inline: auto; }
.espt-block-bd-seller-letter.is-text-align-right .bdl34-sgi-i { margin-inline-start: auto; }

/* ------------------------------------------------------------ breakpoints */
@media (min-width: 768px) {
	.espt-block-bd-seller-letter .bdl34-p { --pad: var(--paper-pad, 22px); }

	.espt-block-bd-seller-letter .bdl34-cta { align-items: center; }

	.espt-block-bd-seller-letter .bdl34-btn { width: auto; }

	.espt-block-bd-seller-letter.is-cta-full .bdl34-btn { width: 100%; }

	.espt-block-bd-seller-letter.is-cta-align-left .bdl34-cta { align-items: flex-start; }
	.espt-block-bd-seller-letter.is-cta-align-left .bdl34-note { text-align: left; }
	.espt-block-bd-seller-letter.is-cta-align-right .bdl34-cta { align-items: flex-end; }
	.espt-block-bd-seller-letter.is-cta-align-right .bdl34-note { text-align: right; }
}

@media (min-width: 1024px) {
	.espt-block-bd-seller-letter .bdl34-pts { gap: 8px; }
	.espt-block-bd-seller-letter .bdl34-sign { gap: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-bd-seller-letter .bdl34-p,
	.espt-block-bd-seller-letter .bdl34-pi,
	.espt-block-bd-seller-letter .bdl34-more-c,
	.espt-block-bd-seller-letter .bdl34-btn { transition: none; }

	.espt-block-bd-seller-letter .bdl34-pts li:hover .bdl34-pi,
	.espt-block-bd-seller-letter .bdl34-btn:hover { transform: none; }
}
