/**
 * Side Cart — homepage showcase block + live demo popup.
 *
 * Site chrome (section, popup, settings panel, demo storefront) uses the
 * shared --ed-* tokens. The drawer replica (.eds-scd-drawer and children)
 * deliberately copies the real plugin's own drawer.css values instead — it
 * has to look like the shipped Side Cart, not like this marketing site —
 * driven by the same per-store variables the plugin injects:
 * --scd-width / --scd-radius / --scd-accent / --scd-corner (+ --scd-img for
 * the Product image size setting).
 *
 * All classes are prefixed eds-sc-/eds-scd- so nothing here can collide
 * with the real plugin's #sc-drawer-root styles if Side Cart is active on
 * this site too.
 */

/* ===== Showcase block (ecosystem-products.php) ===== */

.eds-sc-showcase {
	box-shadow: 0 18px 50px rgba( 28, 40, 60, 0.07 );
	border-color: var( --ed-line, #e5eaf1 );
}

.eds-sc-showcase__body {
	display: flex;
	flex-direction: column;
}

.eds-sc-showcase__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}

.eds-sc-showcase__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var( --ed-font-mono, monospace );
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --ed-azure, #2f62a8 );
}

.eds-sc-showcase__num {
	color: var( --ed-line-strong, #afbbca );
}

.eds-sc-showcase__rule {
	width: 18px;
	height: 1px;
	background: var( --ed-line-strong, #c3cdda );
}

.eds-sc-showcase__live,
.eds-scd__live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var( --ed-azure-wash, #eaf0f8 );
	border: 1px solid var( --ed-azure-line, #d6e2f2 );
	border-radius: var( --ed-radius-pill, 999px );
	padding: 4px 11px;
	font-size: 12px;
	font-weight: 700;
	color: var( --ed-azure-press, #24518d );
	white-space: nowrap;
}

.eds-sc-showcase__pulse {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var( --ed-azure, #2f62a8 );
	animation: eds-sc-pulse 2s ease-in-out infinite;
}

@keyframes eds-sc-pulse {
	0%,
	100% {
		opacity: 0.4;
		transform: scale( 1 );
	}
	50% {
		opacity: 1;
		transform: scale( 1.3 );
	}
}

.eds-sc-showcase__body h3 {
	font-size: 40px;
	line-height: 1.08;
	letter-spacing: -1px;
	text-wrap: pretty;
}

.eds-sc-showcase__body > p {
	line-height: 1.68;
	margin-bottom: 0;
}

.eds-sc-benefits {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 28px;
}

.eds-sc-benefits__title {
	font-family: var( --ed-font-mono, monospace );
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-sc-benefit {
	display: grid;
	grid-template-columns: 26px minmax( 0, 1fr );
	gap: 12px;
	align-items: start;
}

.eds-sc-benefit__check {
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var( --ed-azure-wash, #eaf0f8 );
	color: var( --ed-azure, #2f62a8 );
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eds-sc-benefit__title {
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -0.2px;
}

.eds-sc-benefit__text {
	font-size: 14.5px;
	line-height: 1.55;
	color: var( --ed-ink-2, #5a6675 );
	margin-top: 2px;
}

.eds-sc-showcase__tags {
	margin: 24px 0 0;
	gap: 7px;
}

.eds-sc-showcase__footer {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var( --ed-mist, #f1f4f8 );
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px 24px;
}

.eds-sc-showcase__price-value {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.8px;
	line-height: 1;
}

.eds-sc-showcase__price-note {
	font-size: 13px;
	color: var( --ed-ink-3, #8794a4 );
	margin-top: 4px;
	white-space: nowrap;
}

.eds-sc-showcase__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.eds-sc-showcase__actions .eds-btn,
.eds-scd__get {
	font-family: inherit;
}

.eds-sc-showcase__demo-btn {
	gap: 10px;
	padding-left: 14px;
}

.eds-sc-showcase__play {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.2 );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	padding-left: 2px;
}

.eds-sc-showcase__visual {
	position: relative;
	padding: 36px;
	cursor: pointer;
	background: var( --ed-canvas, #f2f5fa );
}

.eds-sc-showcase__visual:focus-visible {
	outline: 2px solid var( --ed-azure, #2f62a8 );
	outline-offset: -4px;
}

/* Cropped cart preview: roughly the top half of the drawer is visible, the
   rest fades into a blurred veil carrying the demo call to action. */
.eds-sc-showcase__frame {
	position: relative;
	width: 100%;
	max-width: 360px;
	height: 460px;
	overflow: hidden;
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 40px rgba( 28, 40, 60, 0.1 );
}

.eds-sc-showcase__mock {
	pointer-events: none;
}

.eds-sc-showcase__mock .eds-scd-drawer {
	border-radius: 0;
}

.eds-sc-showcase__veil {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	padding: 0 24px 26px;
	text-align: center;
	z-index: 1;
	isolation: isolate;
}

/* The blur + tint live on a pseudo-element so the mask that ramps the
   blur in from transparent never fades the CTA text itself. */
.eds-sc-showcase__veil::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 0.82 ) 42%, rgba( 255, 255, 255, 0.96 ) 100% );
	-webkit-backdrop-filter: blur( 6px );
	backdrop-filter: blur( 6px );
	-webkit-mask-image: linear-gradient( to bottom, transparent 0%, #000 38% );
	mask-image: linear-gradient( to bottom, transparent 0%, #000 38% );
}

.eds-sc-showcase__veil-title {
	font-family: var( --eds-font-display );
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.4px;
	color: var( --ed-ink, #1c2430 );
}

.eds-sc-showcase__veil-text {
	max-width: 280px;
	margin-bottom: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-sc-showcase__pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 20px 0 8px;
	border-radius: 999px;
	background: var( --ed-ink, #1c2430 );
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 12px 30px rgba( 28, 40, 60, 0.28 );
	transition: background var( --ed-motion-medium, 180ms ) ease;
}

.eds-sc-showcase__visual:hover .eds-sc-showcase__pill {
	background: var( --ed-azure, #2f62a8 );
}

.eds-sc-showcase__pill-play {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: #fff;
	color: var( --ed-ink, #1c2430 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	padding-left: 2px;
}

/* ===== Popup shell ===== */

html.eds-scd-locked,
html.eds-scd-locked body {
	overflow: hidden;
}

.eds-scd {
	position: fixed;
	inset: 0;
	/* Above the real Side Cart drawer/trigger (100000 / 99999), in case the
	   plugin itself is active on this site. */
	z-index: 100001;
	background: rgba( 16, 24, 34, 0.6 );
	backdrop-filter: blur( 4px );
	padding: 18px;
	display: flex;
	opacity: 0;
	transition: opacity var( --ed-motion-medium, 180ms ) ease;
}

.eds-scd[hidden] {
	display: none;
}

.eds-scd.is-visible {
	opacity: 1;
}

.eds-scd__window {
	flex: 1;
	min-width: 0;
	background: #fff;
	border-radius: var( --ed-radius-card, 18px );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px rgba( 16, 24, 34, 0.4 );
}

.eds-scd__topbar {
	height: 64px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 14px 0 22px;
	border-bottom: 1px solid var( --ed-line, #e5eaf1 );
}

.eds-scd__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.eds-scd__title {
	font-size: 16.5px;
	font-weight: 700;
	letter-spacing: -0.3px;
	white-space: nowrap;
}

.eds-scd__live {
	font-family: var( --ed-font-mono, monospace );
	font-size: 10.5px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	font-weight: 500;
	border: none;
	padding: 4px 10px;
}

.eds-scd__device {
	margin: 0 auto;
}

.eds-scd .eds-scd__pane-switch {
	display: none;
}

.eds-scd__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.eds-scd__get {
	height: 40px;
	padding: 0 18px;
	font-size: 14px;
}

.eds-scd__ghost,
.eds-scd__icon-btn {
	height: 40px;
	padding: 0 14px;
	border: none;
	border-radius: var( --ed-radius-control, 10px );
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
	cursor: pointer;
	white-space: nowrap;
}

.eds-scd__icon-btn {
	width: 40px;
	padding: 0;
	font-size: 20px;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd__ghost:hover,
.eds-scd__icon-btn:hover {
	background: var( --ed-mist, #f1f4f8 );
	color: var( --ed-ink, #1c2430 );
}

.eds-scd__ghost--block {
	width: 100%;
	border: 1px dashed var( --ed-line, #dce3ec );
}

.eds-scd__layout {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: 340px minmax( 0, 1fr );
}

/* ===== Settings panel ===== */

.eds-scd__panel {
	min-height: 0;
	overflow: auto;
	border-right: 1px solid var( --ed-line, #e5eaf1 );
	background: var( --ed-surface, #fafcfe );
	padding: 20px 20px 30px;
}

.eds-scd__intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
	color: var( --ed-ink-2, #5a6675 );
}

/* Progressive Discount integration card (top of the settings panel). */
.eds-scd-pd-card {
	position: relative;
	margin: 0 0 18px;
	padding: 16px;
	border: 1px solid var( --ed-azure-line, #d3e2f5 );
	border-radius: 14px;
	background: linear-gradient( 160deg, var( --ed-azure-wash, #e8eff9 ) 0%, #fff 70% );
	transition: border-color var( --ed-motion-medium, 180ms ) ease, box-shadow var( --ed-motion-medium, 180ms ) ease;
}

.eds-scd-pd-card.is-on {
	border-color: var( --ed-azure, #2f62a8 );
	box-shadow: 0 6px 18px rgba( 47, 98, 168, 0.12 );
}

.eds-scd-pd-card__head {
	display: flex;
	align-items: center;
	gap: 11px;
}

.eds-scd-pd-card__icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

.eds-scd-pd-card__heading {
	flex: 1;
	min-width: 0;
}

.eds-scd-pd-card__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	font-size: 14.5px;
	font-weight: 700;
	color: var( --ed-ink, #1c2430 );
}

.eds-scd-new {
	display: inline-flex;
	align-items: center;
	height: 19px;
	padding: 0 7px;
	border-radius: 999px;
	background: var( --ed-azure, #2f62a8 );
	color: #fff;
	font-family: var( --ed-font-mono, monospace );
	font-size: 9.5px;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.eds-scd-pd-card__sub {
	margin-top: 1px;
	font-size: 12px;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-pd-card__text {
	margin: 12px 0 12px;
	font-size: 13px;
	line-height: 1.55;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-scd-pd-card__tiers {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.eds-scd-pd-card__tiers li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 8px 4px;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 9px;
	background: #fff;
	transition: opacity var( --ed-motion-medium, 180ms ) ease;
}

.eds-scd-pd-card__tiers strong {
	font-size: 15px;
	color: var( --ed-azure, #2f62a8 );
}

.eds-scd-pd-card__at {
	font-size: 11px;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-pd-card:not( .is-on ) .eds-scd-pd-card__tiers li {
	opacity: 0.45;
}

.eds-scd-pd-card__off {
	margin: 0 0 12px;
	padding: 9px 11px;
	border-radius: 9px;
	background: var( --ed-amber-wash, #fbf0dc );
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --ed-ink, #1c2430 );
}

.eds-scd-pd-card__off button {
	border: none;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var( --ed-azure, #2f62a8 );
	text-decoration: underline;
	cursor: pointer;
}

.eds-scd-pd-card__link {
	font-size: 13px;
	font-weight: 700;
}

/* Slot flash after a related setting changes (see revealSlot()). */
.eds-scd-slot.is-highlight {
	animation: eds-scd-flash 1.2s ease;
}

@keyframes eds-scd-flash {
	0%,
	100% {
		background-color: #fff;
	}
	25% {
		background-color: var( --ed-azure-wash, #e8eff9 );
	}
}

.eds-scd__hint {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd__code {
	font-family: var( --ed-font-mono, monospace );
	font-size: 12px;
	color: var( --ed-ink, #1c2430 );
	background: var( --ed-mist, #eef2f7 );
	border-radius: 5px;
	padding: 2px 6px;
}

.eds-scd-group {
	border-top: 1px solid var( --ed-line, #e5eaf1 );
}

.eds-scd-group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
	font-family: var( --ed-font-mono, monospace );
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-group > summary::-webkit-details-marker {
	display: none;
}

.eds-scd-group > summary::after {
	content: '+';
	font-size: 16px;
	letter-spacing: 0;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-group[open] > summary::after {
	content: '−';
}

.eds-scd-group > summary:hover {
	color: var( --ed-ink, #1c2430 );
}

.eds-scd-group__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 20px;
}

.eds-scd-group--store {
	background: transparent;
}

.eds-scd-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var( --ed-ink, #1c2430 );
}

.eds-scd-field--row {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.eds-scd-field__label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.eds-scd-field__label small {
	font-size: 12px;
	font-weight: 400;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-field__label--split {
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
}

.eds-scd-field__label output {
	font-size: 12px;
	font-weight: 500;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-scd-switch {
	position: relative;
	flex: 0 0 auto;
	width: 38px;
	height: 22px;
	border: none;
	border-radius: 999px;
	background: var( --ed-line, #dce3ec );
	cursor: pointer;
	padding: 0;
	transition: background var( --ed-motion-medium, 180ms ) ease;
}

.eds-scd-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.2 );
	transition: left var( --ed-motion-medium, 180ms ) ease;
}

.eds-scd-switch[aria-checked='true'] {
	background: var( --ed-azure, #2f62a8 );
}

.eds-scd-switch[aria-checked='true']::after {
	left: 19px;
}

.eds-scd-seg {
	display: inline-flex;
	gap: 2px;
	background: var( --ed-mist, #eef2f7 );
	border-radius: 9px;
	padding: 3px;
	flex-shrink: 0;
}

.eds-scd-seg button {
	border: none;
	background: transparent;
	padding: 6px 11px;
	border-radius: 7px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var( --ed-ink-3, #8794a4 );
	cursor: pointer;
	white-space: nowrap;
	transition: background var( --ed-motion-fast, 120ms ) ease;
}

.eds-scd-seg button.is-active {
	background: #fff;
	color: var( --ed-ink, #1c2430 );
	box-shadow: 0 1px 3px rgba( 28, 40, 60, 0.16 );
}

.eds-scd-seg--full {
	display: flex;
}

.eds-scd-seg--full button {
	flex: 1;
	padding-left: 6px;
	padding-right: 6px;
}

.eds-scd-range {
	width: 100%;
	accent-color: var( --ed-azure, #2f62a8 );
}

.eds-scd-input {
	width: 100%;
	height: 40px;
	padding: 0 12px;
	border-radius: 9px;
	border: 1px solid var( --ed-line, #dce3ec );
	background: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	color: var( --ed-ink, #1c2430 );
	outline: none;
}

textarea.eds-scd-input {
	height: auto;
	padding: 9px 12px;
	resize: vertical;
}

.eds-scd-input--select {
	width: auto;
	min-width: 140px;
	height: 36px;
}

.eds-scd-input:focus {
	border-color: var( --ed-azure, #2f62a8 );
}

.eds-scd-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.eds-scd-icons button {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	border: 1px solid var( --ed-line, #dce3ec );
	background: #fff;
	color: var( --ed-ink, #1c2430 );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.eds-scd-icons .eds-scd-icons__none {
	width: auto;
	padding: 0 10px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-icons button.is-active {
	border-color: var( --ed-azure, #2f62a8 );
	box-shadow: 0 0 0 1px var( --ed-azure, #2f62a8 );
	color: var( --ed-azure, #2f62a8 );
}

.eds-scd-mask {
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var( --scd-icon-url ) no-repeat center / contain;
	mask: var( --scd-icon-url ) no-repeat center / contain;
}

.eds-scd-swatches {
	display: flex;
	align-items: center;
	gap: 8px;
}

.eds-scd-swatches__list {
	display: flex;
	gap: 7px;
}

.eds-scd-swatches__list button {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	border: none;
	padding: 0;
	background: var( --scd-swatch );
	cursor: pointer;
}

.eds-scd-swatches__list button.is-active {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --scd-swatch );
}

.eds-scd-color {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var( --ed-line, #dce3ec );
	border-radius: 8px;
	background: none;
	cursor: pointer;
}

.eds-scd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.eds-scd-chip {
	border: 1px solid var( --ed-line, #dce3ec );
	background: #fff;
	border-radius: 999px;
	padding: 5px 11px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var( --ed-ink-3, #8794a4 );
	cursor: pointer;
}

.eds-scd-chip[aria-pressed='true'] {
	background: var( --ed-azure-wash, #eaf0f8 );
	border-color: var( --ed-azure-line, #d3e2f5 );
	color: var( --ed-azure-press, #24518d );
}

.eds-scd-chip[aria-pressed='true']::before {
	content: '✓ ';
}

.eds-scd-chip[aria-pressed='false'] {
	text-decoration: line-through;
	text-decoration-color: var( --ed-line-strong, #c3cdda );
}

.eds-scd-chip.is-locked {
	background: var( --ed-mist, #eef2f7 );
	border-color: transparent;
	color: var( --ed-ink-3, #8794a4 );
	cursor: default;
}

.eds-scd-slots {
	border: 1px solid var( --ed-line, #e5eaf1 );
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.eds-scd-slots__locked {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	background: var( --ed-mist, #f3f6fa );
	font-size: 13px;
	font-weight: 700;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-slots__locked + div,
.eds-scd-slots > div + .eds-scd-slots__locked {
	border-top: 1px solid var( --ed-mist, #f1f4f8 );
}

.eds-scd-slots__locked span,
.eds-scd-slotrow__badge {
	margin-left: auto;
	font-family: var( --ed-font-mono, monospace );
	font-size: 9.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var( --ed-line-strong, #afbbca );
}

.eds-scd-slotrow {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px 10px 8px;
	border-top: 1px solid var( --ed-mist, #f1f4f8 );
}

.eds-scd-slotrow:first-child {
	border-top: none;
}

.eds-scd-slotrow__move {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.eds-scd-slotrow__move button {
	width: 22px;
	height: 17px;
	border: none;
	border-radius: 4px;
	background: none;
	font-size: 9px;
	color: var( --ed-ink-2, #5a6675 );
	cursor: pointer;
	padding: 0;
}

.eds-scd-slotrow__move button:hover:not( :disabled ) {
	background: var( --ed-mist, #eef2f7 );
}

.eds-scd-slotrow__move button:disabled {
	opacity: 0.25;
	cursor: default;
}

.eds-scd-slotrow__text {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.eds-scd-slotrow__text strong {
	font-size: 13.5px;
}

.eds-scd-slotrow__text small {
	font-size: 12px;
	color: var( --ed-ink-3, #8794a4 );
	margin-top: 1px;
}

/* ===== Stage + demo storefront ===== */

.eds-scd__stage {
	min-width: 0;
	min-height: 0;
	background: var( --ed-mist-2, #e6ebf2 );
	padding: 22px;
	display: flex;
	justify-content: center;
}

.eds-scd-frame {
	position: relative;
	width: 100%;
	max-width: 1180px;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 20px 50px rgba( 28, 40, 60, 0.16 );
	transition: max-width 0.35s cubic-bezier( 0.2, 0.8, 0.2, 1 ), border-radius 0.35s ease;
	isolation: isolate;
}

.eds-scd-frame.is-mobile {
	max-width: 390px;
	border-radius: 28px;
}

.eds-scd-store {
	position: absolute;
	inset: 0;
	overflow: auto;
	color: var( --ed-ink, #1c2430 );
}

.eds-scd-store__header {
	height: 60px;
	display: flex;
	align-items: center;
	gap: 26px;
	padding: 0 22px;
	border-bottom: 1px solid var( --ed-mist, #eef2f7 );
}

.eds-scd-store__logo {
	font-family: var( --eds-font-display );
	font-size: 22px;
	letter-spacing: -0.4px;
}

.eds-scd-store__nav {
	display: flex;
	gap: 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-scd-frame.is-mobile .eds-scd-store__nav {
	display: none;
}

.eds-scd-store__cart {
	margin-left: auto;
	position: relative;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 10px;
	background: none;
	color: var( --ed-ink, #1c2430 );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.eds-scd-store__cart:hover {
	background: var( --ed-mist, #f1f4f8 );
}

.eds-scd-store__cart.is-trigger {
	box-shadow: 0 0 0 2px var( --ed-azure, #2f62a8 );
}

.eds-scd-store__count {
	position: absolute;
	top: 3px;
	right: 1px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var( --ed-ink, #1c2430 );
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eds-scd-store__notice {
	margin: 16px 28px 0;
	padding: 11px 14px;
	border-radius: 10px;
	border-left: 3px solid var( --ed-azure, #2f62a8 );
	background: var( --ed-azure-wash, #eaf0f8 );
	font-size: 13.5px;
	line-height: 1.5;
	color: var( --ed-ink, #1c2430 );
}

.eds-scd-store__product {
	padding: 28px;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: 28px;
	align-items: start;
	max-width: 980px;
}

.eds-scd-frame.is-mobile .eds-scd-store__product {
	grid-template-columns: minmax( 0, 1fr );
	padding: 20px;
}

.eds-scd-store__image {
	height: 380px;
	border-radius: 14px;
	background: repeating-linear-gradient( 135deg, #e8edf4 0 8px, #f3f6fa 8px 16px );
}

.eds-scd-frame.is-mobile .eds-scd-store__image {
	height: 240px;
}

.eds-scd-store__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.eds-scd-store__cat {
	font-family: var( --ed-font-mono, monospace );
	font-size: 10.5px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var( --ed-ink-3, #8794a4 );
}

.eds-scd-store__name {
	font-family: var( --eds-font-display );
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: -0.8px;
}

.eds-scd-store__price {
	font-size: 20px;
	font-weight: 700;
}

.eds-scd-store__desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var( --ed-ink-2, #5a6675 );
}

.eds-scd-store__add {
	height: 50px;
	border: none;
	border-radius: 10px;
	background: var( --ed-ink, #1c2430 );
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.1s ease;
}

.eds-scd-store__add:active {
	transform: scale( 0.98 );
}

.eds-scd-store__hint {
	font-size: 12.5px;
	color: var( --ed-ink-3, #8794a4 );
}

/* Simulated full-page reload (ajax_add_to_cart off). */
.eds-scd-reload {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.eds-scd-reload.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Floating trigger — mirrors .sc-trigger. */
.eds-scd-trigger {
	position: absolute;
	bottom: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	padding: 12px 18px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 16px rgba( 20, 24, 32, 0.2 );
	border: 1px solid #dadada;
	color: #555;
	background: #fff;
}

.eds-scd-trigger--floating_right {
	right: 22px;
}

.eds-scd-trigger--floating_left {
	left: 22px;
}

.eds-scd-trigger--badge-none {
	padding: 18px;
}

.eds-scd-trigger__icon,
.eds-scd-button__icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var( --scd-icon-url ) no-repeat center / contain;
	mask: var( --scd-icon-url ) no-repeat center / contain;
}

.eds-scd-trigger--badge-none .eds-scd-trigger__icon {
	width: 32px;
	height: 32px;
}

.eds-scd-trigger--badge-count .eds-scd-trigger__icon {
	width: 26px;
	height: 26px;
}

.eds-scd-trigger--badge-total .eds-scd-trigger__icon {
	width: 24px;
	height: 24px;
}

.is-bump {
	animation: eds-scd-bump 0.6s ease;
}

@keyframes eds-scd-bump {
	0%,
	100% {
		transform: scale( 1 );
	}
	40% {
		transform: scale( 1.15 );
	}
}

/* ===== Drawer replica (values copied from the plugin's drawer.css) ===== */

.eds-scd-drawer-root {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: none;
}

.eds-scd-drawer-root.is-open {
	display: block;
}

.eds-scd-drawer-root.is-animated {
	display: block;
	visibility: hidden;
	transition: visibility 0s linear 0.25s;
}

.eds-scd-drawer-root.is-animated.is-open {
	visibility: visible;
	transition-delay: 0s;
}

.eds-scd-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 20, 24, 32, 0.45 );
}

.eds-scd-drawer-root.is-animated .eds-scd-overlay {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.eds-scd-drawer-root.is-animated.is-open .eds-scd-overlay {
	opacity: 1;
}

.eds-scd-drawer {
	--scd-line: #eef2f7;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: #1c2430;
	font-family: var( --eds-font-body );
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}

.eds-scd-drawer-root .eds-scd-drawer {
	position: absolute;
	top: 0;
	bottom: 0;
	width: min( var( --scd-width, 420px ), 100% );
	box-shadow: 0 0 32px rgba( 20, 24, 32, 0.25 );
}

.eds-scd-drawer-root--right .eds-scd-drawer {
	right: 0;
	border-radius: var( --scd-radius, 10px ) 0 0 var( --scd-radius, 10px );
	transform: translateX( 100% );
}

.eds-scd-drawer-root--left .eds-scd-drawer {
	left: 0;
	border-radius: 0 var( --scd-radius, 10px ) var( --scd-radius, 10px ) 0;
	transform: translateX( -100% );
}

.eds-scd-drawer-root.is-animated .eds-scd-drawer {
	transition: transform 0.25s ease, width 0.2s ease;
}

.eds-scd-drawer-root.is-open .eds-scd-drawer {
	transform: none;
}

/* Static mini preview on the homepage section. */
.eds-scd-drawer--static {
	border-radius: var( --scd-radius, 10px );
}

.eds-scd-drawer *,
.eds-scd-drawer *::before,
.eds-scd-drawer *::after {
	box-sizing: border-box;
}

.eds-scd-drawer button {
	font: inherit;
}

.eds-scd-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.eds-scd-slot {
	padding: 16px 20px;
	border-bottom: 1px solid var( --scd-line );
}

.eds-scd-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	border-bottom: 1px solid #dce3ec;
}

.eds-scd-title {
	margin: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	color: #1c2430;
}

.eds-scd-title__count {
	font-size: 13px;
	font-weight: 400;
	color: #8794a4;
}

.eds-scd-close {
	border: none;
	background: none;
	padding: 0;
	font-size: 25px;
	line-height: 1;
	color: #000;
	cursor: pointer;
}

/* Placeholder product imagery (the demo has no real photos). */
.eds-scd-ph {
	background: repeating-linear-gradient( 135deg, #e8edf4 0 6px, #f3f6fa 6px 12px );
}

.eds-scd-ph[data-tone='1'] {
	background: repeating-linear-gradient( 135deg, #e4eaf2 0 6px, #eff3f8 6px 12px );
}

.eds-scd-ph[data-tone='2'] {
	background: repeating-linear-gradient( 135deg, #ece6dc 0 6px, #f6f2ec 6px 12px );
}

.eds-scd-ph[data-tone='3'] {
	background: repeating-linear-gradient( 135deg, #e3ece6 0 6px, #f1f6f2 6px 12px );
}

.eds-scd-ph[data-tone='4'] {
	background: repeating-linear-gradient( 135deg, #eadfd2 0 6px, #f5efe8 6px 12px );
}

.eds-scd-ph[data-tone='5'] {
	background: repeating-linear-gradient( 135deg, #e6e2ee 0 6px, #f2f0f7 6px 12px );
}

/* Cart items */
.eds-scd-slot--items {
	flex: 1 1 auto;
	padding-top: 4px;
	padding-bottom: 4px;
}

.eds-scd-items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eds-scd-item {
	position: relative;
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var( --scd-line );
}

.eds-scd-item:last-child {
	border-bottom: none;
}

.eds-scd-item__image {
	flex: 0 0 auto;
	width: var( --scd-img, 64px );
	height: var( --scd-img, 64px );
	border-radius: var( --scd-corner, 0 );
}

.eds-scd-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.eds-scd-item__name {
	font-size: 14px;
	font-weight: 600;
}

.eds-scd-item__meta {
	display: flex;
	gap: 4px;
	margin: 3px 0 0;
	font-size: 12px;
	color: #8794a4;
}

.eds-scd-item__meta dd {
	margin: 0;
}

.eds-scd-qty {
	display: inline-flex;
	align-items: center;
	margin-top: 8px;
	border: 1px solid #dce3ec;
	border-radius: var( --scd-corner, 0 );
	overflow: hidden;
	padding: 0 2px;
}

.eds-scd-qty button {
	width: 26px;
	height: 25px;
	border: none;
	border-radius: var( --scd-corner, 0 );
	background: #fff;
	color: #555;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	cursor: pointer;
}

.eds-scd-qty button:hover {
	background: #f6f8fb;
}

.eds-scd-qty__value {
	min-width: 32px;
	text-align: center;
	font-size: 13px;
}

.eds-scd-item__remove {
	position: absolute;
	left: -5px;
	top: 5px;
	width: 20px;
	height: 20px;
	border: 1px solid #dcdcdc;
	border-radius: 50%;
	background: #fff;
	color: #5a6675;
	font-size: 9px;
	line-height: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.eds-scd-item__price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	white-space: nowrap;
}

.eds-scd-item__current {
	font-size: 15px;
	font-weight: 600;
}

.eds-scd-item__regular {
	font-size: 12px;
	color: #8794a4;
	text-decoration: line-through;
}

.eds-scd-item__savings {
	font-size: 11px;
	color: #2e7d32;
}

/* Progressive Discount reward ladder */
.eds-scd-pd__message,
.eds-scd-ship__message {
	margin: 0 0 8px;
	font-size: 13px;
}

.eds-scd-pd__message {
	margin-bottom: 16px;
}

.eds-scd-ship__message.is-met {
	color: #2e7d32;
	font-weight: 600;
}

.eds-scd-pd__track {
	position: relative;
	height: 6px;
	margin: 0 12px 26px 4px;
	border-radius: 999px;
	background: #eef2f7;
}

.eds-scd-pd__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 999px;
	background: var( --scd-accent, #2f62a8 );
	transition: width 0.3s ease;
}

.eds-scd-pd__dot {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border-radius: 999px;
	border: 2px solid #dce3ec;
	background: #fff;
	color: transparent;
	font-size: 9px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.eds-scd-pd__dot.is-done {
	border-color: var( --scd-accent, #2f62a8 );
	background: var( --scd-accent, #2f62a8 );
	color: #fff;
}

.eds-scd-pd__label {
	position: absolute;
	top: 16px;
	transform: translateX( -50% );
	font-size: 11.5px;
	font-weight: 700;
	color: #8794a4;
	white-space: nowrap;
}

.eds-scd-pd__label.is-done {
	color: var( --scd-accent, #2f62a8 );
}

/* Free shipping */
.eds-scd-ship__bar {
	height: 6px;
	border-radius: 3px;
	background: #eef2f7;
	overflow: hidden;
}

.eds-scd-ship__fill {
	height: 100%;
	background: var( --scd-accent, #2f62a8 );
	transition: width 0.3s ease;
}

/* Cross sell */
.eds-scd-cs__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.eds-scd-cs__title {
	font-size: 14px;
	font-weight: 700;
}

.eds-scd-cs__description {
	margin: 0 0 10px;
	font-size: 12px;
	color: #5a6675;
}

.eds-scd-cs__nav {
	display: flex;
	gap: 6px;
}

.eds-scd-cs__nav button {
	width: 22px;
	height: 22px;
	border-radius: 8px;
	border: 1px solid #dce3ec;
	background: #fff;
	color: #5a6675;
	font-size: 20px;
	line-height: 1;
	padding: 0 0 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.eds-scd-cs__nav button:disabled {
	border-color: #edf1f6;
	color: #d5dce6;
	cursor: default;
}

.eds-scd-cs__slider {
	overflow: hidden;
	margin: 0 -2px;
	padding: 2px;
}

.eds-scd-cs__track {
	display: flex;
	gap: 10px;
	transition: transform 0.28s cubic-bezier( 0.22, 0.7, 0.3, 1 );
}

.eds-scd-cs__track .eds-scd-card {
	flex: 0 0 140px;
}

.eds-scd-cs__dots {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 11px;
}

.eds-scd-cs__dot {
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: #dce3ec;
	transition: all 0.2s ease;
}

.eds-scd-cs__dot.is-active {
	width: 16px;
	background: var( --scd-accent, #2f62a8 );
}

.eds-scd-cs__list {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.eds-scd-cs__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.eds-scd-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e9edf3;
	border-radius: var( --scd-corner, 0 );
	padding: 10px;
	background: #fff;
}

.eds-scd-card__image {
	position: relative;
	height: 96px;
	margin-bottom: 9px;
	border-radius: var( --scd-corner, 0 );
}

.eds-scd-card__badge {
	position: absolute;
	top: -3px;
	left: -3px;
	padding: 2px 7px;
	border-radius: 6px;
	background: #b4443a;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
}

.eds-scd-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.eds-scd-card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 34px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
}

.eds-scd-card__rating {
	margin: 2px 0;
}

.eds-scd-stars {
	position: relative;
	display: inline-block;
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 1;
	color: #dce3ec;
}

.eds-scd-stars::before {
	content: '★★★★★';
}

.eds-scd-stars::after {
	content: '★★★★★';
	position: absolute;
	left: 0;
	top: 0;
	width: var( --scd-stars, 0% );
	overflow: hidden;
	color: #e3a008;
}

.eds-scd-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 2px 0 0;
	font-size: 11px;
	line-height: 1.4;
	color: #8794a4;
}

.eds-scd-card__price {
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 700;
}

.eds-scd-card__price del {
	margin-right: 4px;
	font-size: 11.5px;
	font-weight: 400;
	color: #afbbca;
}

.eds-scd-card__price ins {
	text-decoration: none;
	color: #b4443a;
}

.eds-scd-card__button {
	width: 100%;
	height: 32px;
	margin-top: 9px;
	border: 1px solid #dce3ec;
	border-radius: var( --scd-corner, 0 );
	background: #fff;
	color: #1c2430;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.eds-scd-card__button.is-variable {
	border-color: #c9daf0;
	color: var( --scd-accent, #2f62a8 );
}

.eds-scd-card--list {
	flex-direction: row;
	align-items: center;
	gap: 11px;
	padding: 9px;
}

.eds-scd-card--list .eds-scd-card__image {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	margin-bottom: 0;
}

.eds-scd-card--list .eds-scd-card__name {
	display: block;
	min-height: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.eds-scd-card--list .eds-scd-card__button {
	width: auto;
	flex: 0 0 auto;
	margin-top: 0;
	padding: 0 12px;
}

/* Coupon */
.eds-scd-coupon > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
}

.eds-scd-coupon > summary::-webkit-details-marker {
	display: none;
}

.eds-scd-coupon__arrow {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	color: #5a6675;
	transform: rotate( 90deg );
	transition: transform 0.15s ease;
}

.eds-scd-coupon[open] .eds-scd-coupon__arrow {
	transform: rotate( -90deg );
}

.eds-scd-coupon__form {
	display: flex;
	gap: 8px;
	padding-top: 10px;
}

.eds-scd-coupon__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 1px solid #dce3ec;
	border-radius: var( --scd-corner, 0 );
	padding: 8px 10px;
	font: inherit;
	font-size: 13px;
	color: #1c2430;
	outline: none;
}

.eds-scd-coupon__submit {
	border: 1px solid #dce3ec;
	border-radius: var( --scd-corner, 0 );
	background: #fff;
	padding: 8px 14px;
	font-size: 13px;
	color: #1c2430;
	cursor: pointer;
}

.eds-scd-coupon__submit:hover {
	background: #f6f8fb;
}

.eds-scd-coupon__message {
	margin: 6px 0 0;
	min-height: 14px;
	font-size: 12px;
	color: #c0392b;
}

.eds-scd-coupon__message.is-ok {
	color: #2e7d32;
}

/* Checkout & totals — sticky at the bottom, like .sc-slot--checkout. */
.eds-scd-slot--checkout {
	position: sticky;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: auto;
	padding: 14px 20px;
	background: #fff;
	border-top: 1px solid #dce3ec;
	border-bottom: none;
}

.eds-scd-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 0;
	font-size: 13px;
}

.eds-scd-totals__row.is-total {
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var( --scd-line );
	font-size: 16px;
	font-weight: 700;
}

.eds-scd-totals__remove {
	margin-left: 6px;
	border: none;
	background: none;
	padding: 0;
	font-size: 12px;
	color: #5a6675;
	text-decoration: underline;
	cursor: pointer;
}

.eds-scd-totals__note {
	font-size: 12px;
	color: #8794a4;
}

.eds-scd-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: var( --scd-corner, 0 );
	background: var( --scd-accent, #2f62a8 );
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.eds-scd-button__icon {
	width: 16px;
	height: 16px;
}

.eds-scd-button__total {
	font-weight: 700;
}

/* Empty state */
.eds-scd-empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	text-align: center;
}

.eds-scd-empty__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
}

.eds-scd-empty__description {
	margin: 0 0 16px;
	font-size: 13px;
	color: #5a6675;
}

.eds-scd-empty__button {
	border: none;
	border-radius: 6px;
	background: var( --scd-accent, #2f62a8 );
	color: #fff;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* "Choose options" in-drawer bottom sheet */
.eds-scd-sheet {
	position: absolute;
	inset: 0;
	z-index: 4;
}

.eds-scd-sheet__overlay {
	position: absolute;
	inset: 0;
	background: rgba( 20, 24, 32, 0.35 );
}

.eds-scd-sheet__panel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 18px 20px 20px;
	border-radius: 16px 16px 0 0;
	background: #fff;
	box-shadow: 0 -10px 30px rgba( 20, 24, 32, 0.18 );
}

.eds-scd-sheet__panel.is-entering {
	animation: eds-scd-sheet-up 0.25s ease;
}

@keyframes eds-scd-sheet-up {
	from {
		transform: translateY( 100% );
	}
	to {
		transform: none;
	}
}

.eds-scd-sheet__handle {
	display: block;
	width: 36px;
	height: 4px;
	margin: 0 auto 14px;
	border-radius: 999px;
	background: #dce3ec;
}

.eds-scd-sheet__close {
	position: absolute;
	top: 12px;
	right: 14px;
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: #5a6675;
	cursor: pointer;
}

.eds-scd-sheet__product {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.eds-scd-sheet__image {
	width: 56px;
	height: 56px;
	border-radius: var( --scd-corner, 0 );
}

.eds-scd-sheet__name {
	font-size: 14px;
	font-weight: 600;
}

.eds-scd-sheet__label {
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #8794a4;
}

.eds-scd-sheet__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.eds-scd-sheet__option {
	border: 1px solid #dce3ec;
	border-radius: var( --scd-corner, 0 );
	background: #fff;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: #1c2430;
	cursor: pointer;
}

.eds-scd-sheet__option.is-selected {
	border-color: var( --scd-accent, #2f62a8 );
	box-shadow: 0 0 0 1px var( --scd-accent, #2f62a8 );
	color: var( --scd-accent, #2f62a8 );
}

.eds-scd-sheet__add {
	width: 100%;
	border: none;
	border-radius: var( --scd-corner, 0 );
	background: var( --scd-accent, #2f62a8 );
	color: #fff;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.eds-scd-sheet__add:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ===== Responsive ===== */

@media ( max-width: 960px ) {
	/* style.css collapses .eds-product--split to `1fr`, which can't shrink
	   below its content's min-content width — minmax(0, …) lets the long
	   price note / pill wrap instead of being clipped on phones. */
	.eds-sc-showcase {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}

	.eds-scd {
		padding: 0;
	}

	.eds-scd__window {
		border-radius: 0;
	}

	.eds-scd__topbar {
		padding: 0 8px 0 16px;
		gap: 10px;
	}

	.eds-scd__live,
	.eds-scd__device,
	.eds-scd__ghost[data-scd-reset] {
		display: none;
	}

	.eds-scd .eds-scd__pane-switch {
		display: inline-flex;
		margin: 0 auto;
	}

	.eds-scd__layout {
		grid-template-columns: minmax( 0, 1fr );
	}

	.eds-scd__panel {
		display: none;
		border-right: none;
	}

	.eds-scd.is-pane-settings .eds-scd__panel {
		display: block;
	}

	.eds-scd.is-pane-settings .eds-scd__stage {
		display: none;
	}

	.eds-scd__stage {
		padding: 0;
	}

	.eds-scd-frame,
	.eds-scd-frame.is-mobile {
		max-width: none;
		border-radius: 0;
		box-shadow: none;
	}

	.eds-scd-store__nav {
		display: none;
	}

	.eds-scd-store__product {
		grid-template-columns: minmax( 0, 1fr );
		padding: 20px;
	}

	.eds-scd-store__image {
		height: 220px;
	}
}

@media ( max-width: 720px ) {
	.eds-sc-showcase__body h3 {
		font-size: 30px;
	}

	.eds-sc-showcase__actions {
		margin-left: 0;
		width: 100%;
	}

	.eds-sc-showcase__actions .eds-btn {
		flex: 1 1 auto;
	}

	.eds-sc-showcase__visual {
		padding: 20px 16px;
	}

	.eds-sc-showcase__frame {
		height: 450px;
	}

	.eds-sc-showcase__veil {
		padding: 0 16px 20px;
	}

	.eds-sc-showcase__pill {
		font-size: 13.5px;
	}

	.eds-sc-showcase__price-note {
		white-space: normal;
	}

	.eds-scd__title {
		display: none;
	}

	.eds-scd__get {
		padding: 0 12px;
		font-size: 13px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.eds-sc-showcase__pulse,
	.is-bump,
	.eds-scd-slot.is-highlight,
	.eds-scd-sheet__panel {
		animation: none;
	}

	.eds-scd,
	.eds-scd-frame,
	.eds-scd-drawer-root .eds-scd-drawer,
	.eds-scd-cs__track {
		transition: none;
	}
}