/* Chat Order — .espt-block-chat-order
   vars: --form-max --gap --title-size --field-size --field-radius --field-cols
         --card-cols --btn-height --btn-size --btn-radius
         --title-color --text-color --accent-color --panel-bg --field-bg --field-line
   root classes: is-design-{modern|classic|minimal|dark|glass}
                 is-card-style-{row|tile|plain} is-select-mode-{multiple|single}
                 is-btn-layout-{stack|row} is-gate/no-gate
                 is-text-align-{left|center|right}
   JS adds .is-ready on .espt-cho when the form passes the gate. */

.espt-block-chat-order {
	--cho-ink: var(--title-color, var(--bd-ink));
	--cho-body: var(--text-color, var(--bd-body));
	--cho-acc: var(--accent-color, var(--bd-primary));
	--cho-panel: var(--panel-bg, var(--bd-soft));
	--cho-fbg: var(--field-bg, #ffffff);
	--cho-fline: var(--field-line, var(--bd-line));
	--cho-gap: var(--gap, 14px);
	--cho-fs: var(--field-size, 15px);
	--cho-fr: var(--field-radius, 10px);
}

.espt-block-chat-order .espt-cho {
	display: flex;
	flex-direction: column;
	gap: var(--cho-gap);
	margin: 0 auto;
	max-width: min(100%, var(--form-max, 480px));
	position: relative;
	width: 100%;
}

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

.espt-block-chat-order .espt-cho-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.espt-block-chat-order .espt-cho-title {
	color: var(--cho-ink);
	font-size: var(--title-size, 19px);
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.espt-block-chat-order .espt-cho-sub {
	color: var(--bd-muted);
	font-size: calc(var(--cho-fs) - 2px);
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.espt-block-chat-order.is-text-align-center .espt-cho-head { text-align: center; }
.espt-block-chat-order.is-text-align-right .espt-cho-head { text-align: right; }

/* ---------------------------------------------------------------- body */

.espt-block-chat-order .espt-cho-body {
	display: flex;
	flex-direction: column;
	gap: var(--cho-gap);
	min-width: 0;
}

.espt-block-chat-order .espt-cho-products,
.espt-block-chat-order .espt-cho-del {
	min-width: 0;
}

.espt-block-chat-order .espt-cho-lbl {
	color: var(--cho-ink);
	font-size: calc(var(--cho-fs) - 2px);
	font-weight: 700;
	margin-bottom: 8px;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------ product cards */

.espt-block-chat-order .espt-cho-grid {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-chat-order.is-card-style-tile .espt-cho-grid {
	grid-template-columns: repeat(var(--card-cols, 2), minmax(0, 1fr));
}

.espt-block-chat-order .espt-cho-card {
	background: var(--cho-fbg);
	border: 1.5px solid var(--cho-fline);
	border-radius: var(--cho-fr);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	padding: 8px;
	position: relative;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.espt-block-chat-order .espt-cho-card:hover { border-color: color-mix(in srgb, var(--cho-acc) 55%, var(--cho-fline)); }

.espt-block-chat-order .espt-cho-card.is-on {
	background: color-mix(in srgb, var(--cho-acc) 7%, var(--cho-fbg));
	border-color: var(--cho-acc);
	box-shadow: 0 0 0 1px var(--cho-acc) inset;
}

.espt-block-chat-order.is-card-style-tile .espt-cho-card {
	align-items: stretch;
	flex-direction: column;
	gap: 6px;
}

/* flex-basis (not `auto`) so the quantity stepper drops to its own line on
   narrow phones instead of crushing the product name to a few characters. */
.espt-block-chat-order .espt-cho-hit {
	align-items: center;
	cursor: pointer;
	display: flex;
	flex: 1 1 230px;
	gap: 9px;
	min-width: 0;
}

.espt-block-chat-order.is-card-style-tile .espt-cho-hit {
	align-items: stretch;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
}

.espt-block-chat-order .espt-cho-pick {
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.espt-block-chat-order .espt-cho-mark {
	align-items: center;
	background: var(--cho-fbg);
	border: 2px solid var(--cho-fline);
	border-radius: 7px;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 13px;
	height: 22px;
	justify-content: center;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	width: 22px;
}

.espt-block-chat-order.is-select-mode-single .espt-cho-mark { border-radius: 50%; }

.espt-block-chat-order.is-card-style-tile .espt-cho-mark {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 2;
}

.espt-block-chat-order .espt-cho-mi {
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.espt-block-chat-order .espt-cho-mi svg {
	height: 1em;
	width: 1em;
}

.espt-block-chat-order .espt-cho-card.is-on .espt-cho-mark {
	background: var(--cho-acc);
	border-color: var(--cho-acc);
}

.espt-block-chat-order .espt-cho-card.is-on .espt-cho-mi {
	opacity: 1;
	transform: none;
}

.espt-block-chat-order .espt-cho-pick:focus-visible + .espt-cho-mark {
	outline: 2px solid var(--cho-acc);
	outline-offset: 2px;
}

.espt-block-chat-order .espt-cho-thumb {
	background: var(--cho-panel);
	border-radius: 8px;
	display: block;
	flex: 0 0 auto;
	height: 52px;
	overflow: hidden;
	width: 52px;
}

.espt-block-chat-order.is-card-style-tile .espt-cho-thumb {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 100%;
}

.espt-block-chat-order .espt-cho-thumb img,
.espt-block-chat-order .espt-cho-img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.espt-block-chat-order.is-card-style-tile .espt-cho-thumb img { aspect-ratio: 1 / 1; }

.espt-block-chat-order .espt-cho-info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.espt-block-chat-order .espt-cho-name {
	color: var(--cho-ink);
	font-size: calc(var(--cho-fs) - 1px);
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.espt-block-chat-order .espt-cho-price {
	color: var(--cho-acc);
	font-size: calc(var(--cho-fs) - 1px);
	font-weight: 800;
}

.espt-block-chat-order .espt-cho-price s {
	color: var(--bd-muted);
	font-size: calc(var(--cho-fs) - 3px);
	font-weight: 600;
	margin-inline-start: 5px;
}

.espt-block-chat-order .espt-cho-badge {
	align-self: flex-start;
	background: color-mix(in srgb, var(--bd-accent) 20%, transparent);
	border-radius: 999px;
	color: var(--bd-accent-ink);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	margin-top: 2px;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 1px 8px;
}

/* Plain — no thumbnail, so the card reads as a compact price list instead:
   name on the left, price pushed to the right edge. Without this it would be
   indistinguishable from the "row" style whenever an item has no image. */
.espt-block-chat-order.is-card-style-plain .espt-cho-card { padding: 7px 10px; }

.espt-block-chat-order.is-card-style-plain .espt-cho-info {
	align-items: baseline;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 3px 10px;
}

.espt-block-chat-order.is-card-style-plain .espt-cho-name { flex: 1 1 55%; }

.espt-block-chat-order.is-card-style-plain .espt-cho-price {
	flex: 0 0 auto;
	margin-inline-start: auto;
}

.espt-block-chat-order.is-card-style-plain .espt-cho-badge {
	align-self: center;
	margin-top: 0;
	order: 3;
}

/* quantity stepper */

.espt-block-chat-order .espt-cho-qty {
	align-items: center;
	background: var(--cho-fbg);
	border: 1px solid var(--cho-fline);
	border-radius: 999px;
	display: inline-flex;
	flex: 0 0 auto;
	/* On phones the stepper wraps under the product name — auto start-margin
	   keeps it on the right edge instead of stranded at the left. */
	margin-inline-start: auto;
	overflow: hidden;
}

.espt-block-chat-order.is-card-style-tile .espt-cho-qty {
	align-self: center;
	margin-inline: auto;
}

/* 32px: the smallest comfortable thumb target once the pill's own padding is
   counted — the stepper is the only control a phone user taps repeatedly. */
.espt-block-chat-order .espt-cho-q {
	background: transparent;
	border: 0;
	color: var(--cho-ink);
	cursor: pointer;
	font-size: 16px;
	font-weight: 700;
	height: 32px;
	line-height: 1;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
	width: 32px;
}

.espt-block-chat-order .espt-cho-q:hover {
	background: var(--cho-acc);
	color: #ffffff;
}

.espt-block-chat-order .espt-cho-qin {
	-moz-appearance: textfield;
	background: transparent;
	border: 0;
	color: var(--cho-ink);
	font-size: 13px;
	font-weight: 700;
	height: 32px;
	min-width: 0;
	padding: 0;
	text-align: center;
	width: 32px;
}

.espt-block-chat-order .espt-cho-qin:focus { outline: 0; }

/* -------------------------------------------------------------- fields */

.espt-block-chat-order .espt-cho-fields {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(var(--field-cols, 1), minmax(0, 1fr));
	min-width: 0;
}

.espt-block-chat-order .espt-cho-f {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.espt-block-chat-order .espt-cho-f-address,
.espt-block-chat-order .espt-cho-f-note { grid-column: 1 / -1; }

.espt-block-chat-order .espt-cho-f label {
	color: var(--cho-body);
	font-size: calc(var(--cho-fs) - 3px);
	font-weight: 700;
}

.espt-block-chat-order .espt-cho-in {
	background: var(--cho-fbg);
	border: 1.5px solid var(--cho-fline);
	border-radius: var(--cho-fr);
	color: var(--cho-ink);
	font-size: var(--cho-fs);
	line-height: 1.4;
	max-width: 100%;
	min-width: 0;
	padding: 11px 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	width: 100%;
}

.espt-block-chat-order .espt-cho-ta {
	display: block;
	min-height: 64px;
	resize: vertical;
}

.espt-block-chat-order .espt-cho-in::placeholder {
	color: var(--bd-muted);
	opacity: 0.8;
}

.espt-block-chat-order .espt-cho-in:focus {
	border-color: var(--cho-acc);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cho-acc) 22%, transparent);
	outline: 0;
}

.espt-block-chat-order .espt-cho-in.is-bad {
	border-color: var(--bd-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bd-danger) 16%, transparent);
}

/* ------------------------------------------------------------ delivery */

.espt-block-chat-order .espt-cho-dels {
	display: grid;
	gap: 8px;
	grid-template-columns: minmax(0, 1fr);
}

.espt-block-chat-order .espt-cho-radio {
	align-items: center;
	background: var(--cho-fbg);
	border: 1.5px solid var(--cho-fline);
	border-radius: var(--cho-fr);
	cursor: pointer;
	display: flex;
	gap: 9px;
	min-width: 0;
	padding: 10px 12px;
	position: relative;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.espt-block-chat-order .espt-cho-radio input {
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	width: 1px;
}

.espt-block-chat-order .espt-cho-dot {
	border: 2px solid var(--cho-fline);
	border-radius: 50%;
	flex: 0 0 auto;
	height: 18px;
	position: relative;
	transition: border-color 0.2s ease;
	width: 18px;
}

.espt-block-chat-order .espt-cho-dot::after {
	background: var(--cho-acc);
	border-radius: 50%;
	content: "";
	inset: 3px;
	opacity: 0;
	position: absolute;
	transform: scale(0.4);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.espt-block-chat-order .espt-cho-radio.is-on {
	background: color-mix(in srgb, var(--cho-acc) 7%, var(--cho-fbg));
	border-color: var(--cho-acc);
}

.espt-block-chat-order .espt-cho-radio.is-on .espt-cho-dot { border-color: var(--cho-acc); }

.espt-block-chat-order .espt-cho-radio.is-on .espt-cho-dot::after {
	opacity: 1;
	transform: none;
}

.espt-block-chat-order .espt-cho-radio input:focus-visible + .espt-cho-dot {
	outline: 2px solid var(--cho-acc);
	outline-offset: 2px;
}

.espt-block-chat-order .espt-cho-dlbl {
	color: var(--cho-body);
	flex: 1 1 auto;
	font-size: calc(var(--cho-fs) - 1px);
	font-weight: 600;
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-chat-order .espt-cho-dfee {
	color: var(--cho-ink);
	flex: 0 0 auto;
	font-size: calc(var(--cho-fs) - 1px);
	font-weight: 800;
}

/* -------------------------------------------------------------- totals */

.espt-block-chat-order .espt-cho-tot {
	background: var(--cho-panel);
	border-radius: var(--cho-fr);
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 12px 14px;
}

.espt-block-chat-order .espt-cho-trow {
	align-items: baseline;
	color: var(--cho-body);
	display: flex;
	font-size: calc(var(--cho-fs) - 1px);
	gap: 10px;
	justify-content: space-between;
	min-width: 0;
}

.espt-block-chat-order .espt-cho-trow span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-chat-order .espt-cho-trow b {
	flex: 0 0 auto;
	font-weight: 700;
}

.espt-block-chat-order .espt-cho-grand {
	border-top: 1px dashed color-mix(in srgb, var(--cho-body) 30%, transparent);
	color: var(--cho-ink);
	font-weight: 800;
	margin-top: 2px;
	padding-top: 8px;
}

.espt-block-chat-order .espt-cho-grand b {
	color: var(--cho-acc);
	font-size: calc(var(--cho-fs) + 5px);
}

.espt-block-chat-order .espt-cho-bump { animation: espt-cho-bump 0.35s ease; }

@keyframes espt-cho-bump {
	40% { transform: scale(1.09); }
	100% { transform: scale(1); }
}

/* ------------------------------------------------------- hint & error */

.espt-block-chat-order .espt-cho-hint {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-radius: 10px;
	color: #b45309;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
	padding: 10px 14px;
	text-align: center;
}

.espt-block-chat-order.no-gate .espt-cho-hint,
.espt-block-chat-order .espt-cho.is-ready .espt-cho-hint { display: none; }

.espt-block-chat-order .espt-cho-err {
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 10px;
	color: #b91c1c;
	font-size: 13px;
	font-weight: 600;
	overflow-wrap: anywhere;
	padding: 9px 12px;
	text-align: center;
}

.espt-block-chat-order .espt-cho-err[hidden] { display: none; }

/* Editor-only placeholder when no product has been added yet. */
.espt-block-chat-order .espt-block-note {
	border: 1px dashed var(--bd-line);
	border-radius: 10px;
	color: var(--bd-muted);
	font-size: 14px;
	margin: 0;
	padding: 22px 16px;
	text-align: center;
}

/* -------------------------------------------------------- send buttons */

.espt-block-chat-order .espt-cho-sends {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.espt-block-chat-order.is-btn-layout-row .espt-cho-sends {
	flex-direction: row;
	flex-wrap: wrap;
}

.espt-block-chat-order.is-btn-layout-row .espt-cho-send {
	flex: 1 1 140px;
	min-width: 0;
}

.espt-block-chat-order.is-gate .espt-cho:not(.is-ready):not(.is-edit) .espt-cho-sends {
	filter: blur(5px);
	opacity: 0.5;
	pointer-events: none;
	user-select: none;
}

.espt-block-chat-order .espt-cho-send {
	--cho-b: var(--cho-acc);
	--cho-c: #ffffff;
	align-items: center;
	background: var(--cho-b);
	border: 0;
	border-radius: var(--btn-radius, 12px);
	color: var(--cho-c);
	cursor: pointer;
	display: flex;
	font-size: var(--btn-size, 15px);
	font-weight: 800;
	gap: 9px;
	justify-content: center;
	line-height: 1.2;
	min-height: var(--btn-height, 50px);
	min-width: 0;
	padding: 10px 16px;
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.espt-block-chat-order .espt-cho-send:hover {
	box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--cho-b) 60%, transparent);
	transform: translateY(-2px);
}

.espt-block-chat-order .espt-cho-send:active {
	filter: brightness(0.96);
	transform: translateY(0);
}

.espt-block-chat-order .espt-cho-send:focus-visible {
	outline: 2px solid var(--cho-ink);
	outline-offset: 2px;
}

.espt-block-chat-order .espt-cho-slbl {
	min-width: 0;
	overflow-wrap: anywhere;
}

.espt-block-chat-order .espt-cho-sico {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 0;
}

/* No `fill` here: the library's icons are a mix of filled (fill="currentColor")
   and outlined (fill="none" stroke="currentColor") — forcing a fill turns every
   outlined icon a user picks into a solid blob. */
.espt-block-chat-order .espt-cho-sico svg {
	height: 1em;
	width: 1em;
}

.espt-block-chat-order .espt-cho-send.is-ch-whatsapp { --cho-b: #25d366; }
.espt-block-chat-order .espt-cho-send.is-ch-messenger { --cho-b: #0084ff; }
.espt-block-chat-order .espt-cho-send.is-ch-telegram { --cho-b: #229ed9; }
.espt-block-chat-order .espt-cho-send.is-ch-viber { --cho-b: #7360f2; }
.espt-block-chat-order .espt-cho-send.is-ch-sms { --cho-b: #0f766e; }
.espt-block-chat-order .espt-cho-send.is-ch-email { --cho-b: #ea580c; }

.espt-block-chat-order .espt-cho-copy {
	background: transparent;
	border: 1.5px dashed var(--cho-fline);
	color: var(--cho-body);
	font-weight: 700;
	min-height: 42px;
}

.espt-block-chat-order .espt-cho-copy:hover {
	border-color: var(--cho-acc);
	box-shadow: none;
	color: var(--cho-acc);
}

.espt-block-chat-order .espt-cho-note {
	color: var(--bd-muted);
	font-size: 12.5px;
	line-height: 1.55;
	overflow-wrap: anywhere;
	text-align: center;
}

/* --------------------------------------------------------------- toast */

.espt-block-chat-order .espt-cho-toast {
	background: #111827;
	border-radius: 10px;
	bottom: 10px;
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	left: 50%;
	max-width: calc(100% - 24px);
	opacity: 0;
	padding: 10px 16px;
	position: absolute;
	text-align: center;
	transform: translate(-50%, 12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 5;
}

.espt-block-chat-order .espt-cho-toast[hidden] { display: none; }
.espt-block-chat-order .espt-cho-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- designs */

/* Modern — the base look, plus a softly raised product panel. */
.espt-block-chat-order.is-design-modern .espt-cho-card.is-on {
	box-shadow: 0 0 0 1px var(--cho-acc) inset, 0 6px 16px -10px color-mix(in srgb, var(--cho-acc) 70%, transparent);
}

/* Classic — squarer fields and a tinted header bar. Halved rather than fixed so
   the "Field corner radius" control still does something in this design. */
.espt-block-chat-order.is-design-classic { --cho-fr: calc(var(--field-radius, 10px) / 2); }

.espt-block-chat-order.is-design-classic .espt-cho-head {
	background: var(--cho-panel);
	border-bottom: 1px solid var(--bd-box-line);
	border-radius: calc(var(--bd-radius) - 1px) calc(var(--bd-radius) - 1px) 0 0;
	margin: calc(var(--bd-pad) * -1) calc(var(--bd-pad) * -1) 0;
	padding: 14px var(--bd-pad);
}

.espt-block-chat-order.is-design-classic .espt-cho-card,
.espt-block-chat-order.is-design-classic .espt-cho-radio,
.espt-block-chat-order.is-design-classic .espt-cho-in { border-width: 1px; }

/* Minimal — underlined fields, no card frames (square corners on purpose). */
.espt-block-chat-order.is-design-minimal { --cho-fr: 0px; }

.espt-block-chat-order.is-design-minimal .espt-cho-card.is-on { box-shadow: none; }

.espt-block-chat-order.is-design-minimal .espt-cho-in {
	background: transparent;
	border-color: transparent;
	border-bottom: 1.5px solid var(--cho-fline);
	padding: 8px 2px;
}

.espt-block-chat-order.is-design-minimal .espt-cho-in:focus {
	border-bottom-color: var(--cho-acc);
	box-shadow: none;
}

.espt-block-chat-order.is-design-minimal .espt-cho-card,
.espt-block-chat-order.is-design-minimal .espt-cho-radio {
	background: transparent;
	border-color: transparent;
	border-bottom: 1px solid var(--cho-fline);
	border-radius: 0;
	box-shadow: none;
	padding-inline: 0;
}

.espt-block-chat-order.is-design-minimal .espt-cho-card.is-on,
.espt-block-chat-order.is-design-minimal .espt-cho-radio.is-on { background: transparent; }

.espt-block-chat-order.is-design-minimal .espt-cho-tot {
	background: transparent;
	border-top: 1px solid var(--cho-fline);
	border-radius: 0;
	padding-inline: 0;
}

/* Dark. */
.espt-block-chat-order.is-design-dark .espt-cho {
	--cho-ink: var(--title-color, #ffffff);
	--cho-body: var(--text-color, rgba(255, 255, 255, 0.78));
	--cho-fbg: var(--field-bg, rgba(255, 255, 255, 0.06));
	--cho-fline: var(--field-line, rgba(255, 255, 255, 0.18));
	--cho-panel: var(--panel-bg, rgba(255, 255, 255, 0.07));
	background: var(--bd-deep);
	border-color: rgba(255, 255, 255, 0.12);
	border-radius: var(--bd-radius);
	color: var(--cho-body);
	padding: var(--bd-pad);
}

.espt-block-chat-order.is-design-dark .espt-cho-sub,
.espt-block-chat-order.is-design-dark .espt-cho-note,
.espt-block-chat-order.is-design-dark .espt-cho-price s,
.espt-block-chat-order.is-design-dark .espt-cho-in::placeholder { color: rgba(255, 255, 255, 0.6); }

.espt-block-chat-order.is-design-dark .espt-cho-badge {
	background: color-mix(in srgb, var(--bd-accent) 30%, transparent);
	color: #ffffff;
}

/* Glass. */
.espt-block-chat-order.is-design-glass .espt-cho {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	background: color-mix(in srgb, var(--bd-box-bg) 62%, transparent);
	border: 1px solid color-mix(in srgb, var(--bd-box-line) 70%, transparent);
	border-radius: var(--bd-radius);
	padding: var(--bd-pad);
}

.espt-block-chat-order.is-design-glass .espt-cho-card,
.espt-block-chat-order.is-design-glass .espt-cho-radio,
.espt-block-chat-order.is-design-glass .espt-cho-in {
	background: color-mix(in srgb, var(--cho-fbg) 55%, transparent);
}

/* ------------------------------------------------------- tablet & up */

@media (min-width: 768px) {
	.espt-block-chat-order .espt-cho-thumb { height: 58px; width: 58px; }
	.espt-block-chat-order .espt-cho-qin { width: 36px; }
	.espt-block-chat-order .espt-cho-note { font-size: 13px; }
}

@media (min-width: 1024px) {
	.espt-block-chat-order .espt-cho-grid { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.espt-block-chat-order .espt-cho-card,
	.espt-block-chat-order .espt-cho-radio,
	.espt-block-chat-order .espt-cho-in,
	.espt-block-chat-order .espt-cho-send,
	.espt-block-chat-order .espt-cho-sends,
	.espt-block-chat-order .espt-cho-toast,
	.espt-block-chat-order .espt-cho-mi,
	.espt-block-chat-order .espt-cho-dot::after { transition: none; }

	.espt-block-chat-order .espt-cho-send:hover { transform: none; }
	.espt-block-chat-order .espt-cho-bump { animation: none; }
}