/**
 * Smart Cart Drawer — cart drawer.
 *
 * Every visual value is a CSS custom property with a neutral default, so a
 * store restyles the plugin from the Appearance settings screen rather than
 * by editing this file. Defaults inherit the theme's typeface.
 *
 * Everything is namespaced under .scd and scoped tightly enough that no theme
 * rule is overridden by accident and no theme rule leaks in.
 */

.scd {
	/*
	 * Defaults. Every one of these is overridable from Appearance settings,
	 * which emit a :root block of the same custom properties — so a store
	 * restyles the whole plugin without touching a stylesheet.
	 */
	--scd-ink: #111111;
	--scd-grey: #767676;
	--scd-line: #e5e5e5;
	--scd-bg: #ffffff;
	--scd-soft: #f7f7f7;
	--scd-go: #1f8f4e;
	--scd-go-soft: #e8f5ec;
	--scd-alert: #b3261e;
	--scd-primary-bg: var(--scd-ink);
	--scd-primary-text: #ffffff;
	--scd-primary-hover: #000000;
	--scd-outline-border: var(--scd-line);
	--scd-outline-text: var(--scd-ink);
	--scd-overlay-color: #000000;
	--scd-loader: var(--scd-ink);
	--scd-loader-wash: rgba(255, 255, 255, 0.55);
	--scd-radius-button: 30px;
	--scd-radius-chip: 20px;
	--scd-font-size: 13px;
	--scd-tracking: 0.18em;

	/* ---- Set from PHP settings (see Cart_Drawer::css_variables) ---- */
	--scd-width: 420px;
	--scd-width-tablet: 400px;
	--scd-speed: 320ms;
	--scd-overlay: 0.45;
	--scd-track: var(--scd-soft);
	--scd-success: var(--scd-go);

	--scd-ease: cubic-bezier(0.32, 0.72, 0, 1);
	/* Inherit the theme's typeface unless the store sets one. */
	--scd-font: inherit;

	position: fixed;
	inset: 0;
	z-index: 999990;
	font-family: var(--scd-font);
	color: var(--scd-ink);
	-webkit-font-smoothing: antialiased;
}

.scd[hidden] {
	display: none;
}

/* Keep the drawer inert until it is opened, so its contents are never
   focusable or announced while off-screen. */
.scd:not(.is-open) {
	pointer-events: none;
}

/* ---------------------------------------------------------------- Overlay */

.scd__overlay {
	position: absolute;
	inset: 0;
	background: var(--scd-overlay-color);
	opacity: 0;
	transition: opacity var(--scd-speed) var(--scd-ease);
	will-change: opacity;
}

.scd.is-open .scd__overlay {
	opacity: var(--scd-overlay);
	pointer-events: auto;
}

/* ------------------------------------------------------------------ Panel */

.scd__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--scd-width);
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--scd-bg);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
	transform: translate3d(100%, 0, 0);
	transition: transform var(--scd-speed) var(--scd-ease);
	will-change: transform;
	overscroll-behavior: contain;
}

.scd.is-open .scd__panel {
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
}

.scd__contents {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* ----------------------------------------------------------------- Header */

.scd-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--scd-line);
	flex: 0 0 auto;
}

.scd-head__title {
	margin: 0;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--scd-ink);
}

.scd-close {
	appearance: none;
	border: 0;
	background: none;
	padding: 0 2px;
	font-size: 20px;
	line-height: 1;
	color: var(--scd-grey);
	cursor: pointer;
	transition: color 0.15s ease;
}

.scd-close:hover,
.scd-close:focus-visible {
	color: var(--scd-ink);
}

/* ------------------------------------------------------------ Scroll area */

.scd-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------- Free-shipping progress */

.scd-ship {
	padding: 18px 22px 20px;
	border-bottom: 1px solid var(--scd-line);
}

.scd-ship__msg {
	margin: 0 0 11px;
	font-size: 13px;
	line-height: 1.5;
}

.scd-ship__msg b,
.scd-ship__msg strong {
	font-weight: 700;
}

.scd-ship__amount {
	color: var(--scd-go);
	font-weight: 700;
}

.scd-bar {
	height: 6px;
	background: var(--scd-track);
	border-radius: 20px;
	overflow: hidden;
}

.scd-bar__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--scd-go);
	border-radius: 20px;
	transition: width 480ms var(--scd-ease), background-color 240ms ease;
}

.scd-ship.is-unlocked {
	background: var(--scd-go-soft);
}

.scd-ship.is-unlocked .scd-ship__msg {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--scd-success);
	font-weight: 600;
	font-size: 12px;
	margin-bottom: 0;
}

.scd-ship.is-unlocked .scd-bar {
	display: none;
}

.scd-ship__tick {
	font-size: 13px;
	line-height: 1;
}

/* ------------------------------------------------------------ Line items */

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

.scd-item {
	display: flex;
	gap: 14px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--scd-line);
	transition: opacity 0.2s ease;
}

.scd-item.is-busy {
	opacity: 0.45;
	pointer-events: none;
}

.scd-item__thumb {
	display: block;
	width: 66px;
	height: 80px;
	flex-shrink: 0;
	border-radius: 3px;
	overflow: hidden;
	background: var(--scd-soft);
}

.scd-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.scd-item__name {
	display: block;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--scd-ink);
	text-decoration: none;
}

.scd-item__name:hover {
	text-decoration: underline;
}

.scd-item__variant {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: var(--scd-grey);
}

.scd-item__qty-fixed {
	margin: 12px 0 0;
	font-size: 12px;
	color: var(--scd-grey);
}

.scd-item__price {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

.scd-item__price del {
	color: var(--scd-grey);
	font-weight: 400;
	margin-right: 4px;
}

.scd-item__remove {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	margin: 9px 0 0;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--scd-grey);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.scd-item__remove:hover,
.scd-item__remove:focus-visible {
	color: var(--scd-ink);
}

/* ------------------------------------------------------ Quantity control */

/*
 * The stepper carries no outer spacing of its own.
 *
 * It used to set `margin-top: 12px`, which is a line-item concern, not a
 * property of the control — and every other context then had to override it.
 * That override lived in a second stylesheet at equal specificity, so which
 * one won came down to load order. Spacing now belongs to the context that
 * wants it (see `.scd-item .scd-qty` below), and no override is needed.
 */
.scd-qty {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 0;
	border: 1px solid var(--scd-line);
	border-radius: 20px;
	padding: 3px 12px;
	font-size: 13px;
}

/* The drawer line item is what wants the gap, so it asks for it. */
.scd-item .scd-qty {
	margin-top: 12px;
}

.scd-qty__btn {
	appearance: none;
	border: 0;
	background: none;
	padding: 2px 0;
	font-family: inherit;
	font-size: 14px;
	line-height: 1;
	color: var(--scd-grey);
	cursor: pointer;
	transition: color 0.15s ease;
}

.scd-qty__btn:hover:not(:disabled),
.scd-qty__btn:focus-visible:not(:disabled) {
	color: var(--scd-ink);
}

.scd-qty__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.scd-qty__value {
	min-width: 1ch;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------- Complete the set */

.scd-set {
	padding: 18px 22px 20px;
	border-bottom: 1px solid var(--scd-line);
	background: var(--scd-soft);
}

.scd-set__title {
	margin: 0 0 14px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #555;
}

.scd-set__row {
	display: flex;
	align-items: center;
	gap: 13px;
}

.scd-set__thumb {
	display: block;
	width: 50px;
	height: 60px;
	flex-shrink: 0;
	border-radius: 3px;
	overflow: hidden;
	background: #e3e3e0;
}

.scd-set__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

.scd-set__name {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--scd-ink);
	text-decoration: none;
}

.scd-set__name:hover {
	text-decoration: underline;
}

.scd-set__variant {
	margin: 3px 0 0;
	font-size: 11px;
	color: var(--scd-grey);
}

.scd-set__price {
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 600;
}

.scd-set__price del {
	color: var(--scd-grey);
	font-weight: 400;
}

.scd-set__add {
	appearance: none;
	border: 1px solid var(--scd-ink);
	background: transparent;
	color: var(--scd-ink);
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 9px 15px;
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.scd-set__add:hover,
.scd-set__add:focus-visible {
	background: var(--scd-ink);
	color: #fff;
}

.scd-set__add.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.scd-set__sizes {
	margin-top: 14px;
}

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

.scd-set__sizes-label {
	margin: 0 0 8px;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #555;
}

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

.scd-chip {
	appearance: none;
	border: 1px solid var(--scd-line);
	background: #fff;
	color: var(--scd-ink);
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-width: 36px;
	padding: 7px 9px;
	border-radius: var(--scd-radius-chip);
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.scd-chip:hover,
.scd-chip:focus-visible {
	border-color: var(--scd-ink);
	background: var(--scd-ink);
	color: #fff;
}

/* ----------------------------------------------------------------- Footer */

.scd-foot {
	flex: 0 0 auto;
	padding: 20px 22px 24px;
	padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	background: var(--scd-bg);
	border-top: 1px solid var(--scd-line);
}

.scd-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 4px;
}

.scd-subtotal__label {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #555;
}

.scd-subtotal__value {
	font-size: 18px;
	font-weight: 700;
}

.scd-taxnote {
	margin: 0 0 16px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--scd-grey);
}

/* ---------------------------------------------------------------- Buttons */

.scd-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 16px;
	border-radius: var(--scd-radius-button);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.scd-btn--primary {
	background: var(--scd-primary-bg);
	color: var(--scd-primary-text);
}

.scd-btn--primary:hover,
.scd-btn--primary:focus-visible {
	background: var(--scd-primary-hover);
	color: var(--scd-primary-text);
}

.scd-btn--outline {
	background: var(--scd-bg);
	color: var(--scd-outline-text);
	border: 1px solid var(--scd-outline-border);
}

.scd-btn--outline:hover,
.scd-btn--outline:focus-visible {
	border-color: var(--scd-ink);
	color: var(--scd-ink);
}

/* ----------------------------------------------------------- Express pay */

.scd-express {
	margin-top: 12px;
}

.scd-express__host:not([hidden]) {
	display: block;
	min-height: 44px;
}

.scd-express__host:not(:empty) + .scd-express__fallback {
	display: none;
}

.scd-express__fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 12px;
	letter-spacing: 0.12em;
}

.scd-express__methods {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: none;
	color: var(--scd-grey);
	font-weight: 400;
}

/* --------------------------------------------------------- Trust badges */

.scd-trust {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 18px;
}

.scd-trust__item {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: var(--scd-grey);
}

.scd-trust__icon {
	flex-shrink: 0;
}

/*
 * Placements outside the drawer inherit the theme's own type.
 *
 * The width/flex-basis pair is load-bearing: these lists are injected into
 * theme markup we do not control, and the product-page hook may land
 * inside a flex row the theme owns. Without claiming a full
 * row the badges become flex siblings of the add-to-cart button and spill
 * outside it.
 */
.scd-trust--product,
.scd-trust--checkout,
.scd-trust--shortcode {
	font-family: inherit;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	flex: 1 1 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 12px;
	gap: 8px 18px;
}

.scd-trust--product .scd-trust__item,
.scd-trust--checkout .scd-trust__item,
.scd-trust--shortcode .scd-trust__item {
	font-size: 12px;
	min-width: 0;
}

.scd-viewcart {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--scd-grey);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.scd-viewcart:hover,
.scd-viewcart:focus-visible {
	color: var(--scd-ink);
}

/* ------------------------------------------------------------ Empty state */

.scd-empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 48px 22px;
	text-align: center;
}

.scd-empty__text {
	margin: 0;
	font-size: 13px;
	color: var(--scd-grey);
}

.scd-empty .scd-btn {
	max-width: 240px;
}

/* -------------------------------------------------------------- Skeleton */

.scd-skeleton {
	padding: 20px 22px;
}

.scd-skeleton__bar,
.scd-skeleton__row {
	background: linear-gradient(90deg, #f0f0ee 25%, #e6e6e3 37%, #f0f0ee 63%);
	background-size: 400% 100%;
	border-radius: 3px;
	animation: scd-shimmer 1.4s ease infinite;
}

.scd-skeleton__bar {
	height: 6px;
	margin-bottom: 24px;
}

.scd-skeleton__row {
	height: 80px;
	margin-bottom: 16px;
}

@keyframes scd-shimmer {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

/* ========================================================================
 * Busy overlay
 * ========================================================================
 *
 * Adding to the cart is a server round trip that can take a few seconds on
 * a real store. Without a signal the customer cannot tell a slow request
 * from a dead button, and clicks again. This is deliberately light — a wash
 * rather than a scrim — because the page behind it is still the thing they
 * were looking at, and it is about to be covered by the drawer anyway.
 *
 * Sits below the drawer (999990) and above the sticky bar (999980), so the
 * drawer slides cleanly over it as it fades out.
 * ==================================================================== */

.scd-loader {
	position: fixed;
	inset: 0;
	z-index: 999985;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--scd-loader-wash);
	backdrop-filter: saturate(120%) blur(2px);
	-webkit-backdrop-filter: saturate(120%) blur(2px);
	opacity: 0;
	transition: opacity 160ms ease;
	/* Swallow taps during the wait so a second click cannot double-add. */
	cursor: progress;
}

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

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

.scd-loader__spinner {
	width: 34px;
	height: 34px;
	border: 2px solid color-mix(in srgb, var(--scd-loader) 16%, transparent);
	border-top-color: var(--scd-loader);
	border-radius: 50%;
	animation: scd-spin 700ms linear infinite;
}

@keyframes scd-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Reduced motion: no rotation. A slow opacity pulse still reads as "working"
 * without spinning anything.
 */
@media (prefers-reduced-motion: reduce) {
	.scd-loader {
		transition-duration: 1ms;
	}

	.scd-loader__spinner {
		animation: scd-pulse 1.2s ease-in-out infinite;
		border-top-color: rgba(10, 10, 10, 0.14);
		background: #0a0a0a;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		border-width: 0;
	}

	@keyframes scd-pulse {
		0%, 100% { opacity: 0.25; }
		50%      { opacity: 1; }
	}
}

/* ---------------------------------------------------------------------
 * Drawer-internal busy state
 *
 * When the drawer is already open — a "Complete the Set" add, a quantity
 * change — a full-screen wash would be heavy-handed. A hairline
 * indeterminate bar along the top of the panel says the same thing at a
 * fraction of the visual cost.
 * ------------------------------------------------------------------ */

.scd__panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--scd-ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
	opacity: 0;
	transition: opacity 120ms ease;
	z-index: 3;
}

.scd__panel.is-busy::before {
	opacity: 1;
	animation: scd-indeterminate 1.1s ease-in-out infinite;
}

@keyframes scd-indeterminate {
	0%   { transform: scaleX(0); transform-origin: 0 50%; }
	50%  { transform: scaleX(1); transform-origin: 0 50%; }
	51%  { transform: scaleX(1); transform-origin: 100% 50%; }
	100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.scd__panel.is-busy::before {
		animation: none;
		transform: scaleX(1);
		opacity: 0.5;
	}
}

/* ---------------------------------------------------------------- Notices */

.scd-notice {
	margin: 0;
	padding: 12px 22px;
	font-size: 12px;
	line-height: 1.45;
	background: #fdf3f0;
	color: #a5341a;
	border-bottom: 1px solid #f3ddd6;
}

.scd-notice--success {
	background: var(--scd-go-soft);
	color: #16673a;
	border-bottom-color: #d3ead9;
}

/* Visually hidden live region for screen readers. */
.scd-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- A11y focus */

.scd :focus-visible {
	outline: 2px solid var(--scd-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

.scd__panel:focus {
	outline: none;
}

/* Scroll lock applied to <body> while the drawer is open. */
body.scd-locked {
	overflow: hidden;
	touch-action: none;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.scd__panel {
		width: var(--scd-width-tablet);
	}
}

@media (max-width: 600px) {
	.scd__panel {
		width: 100%;
		max-width: none;
	}

	.scd-head,
	.scd-ship,
	.scd-item,
	.scd-set,
	.scd-foot {
		padding-left: 18px;
		padding-right: 18px;
	}

	.scd-item__thumb {
		width: 58px;
		height: 70px;
	}

	.scd-trust {
		gap: 14px;
	}
}

/* Very short viewports (landscape phones): keep the footer reachable. */
@media (max-height: 520px) {
	.scd-foot {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.scd-btn {
		padding: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scd__panel,
	.scd__overlay,
	.scd-bar__fill {
		transition-duration: 1ms;
	}

	.scd-skeleton__bar,
	.scd-skeleton__row {
		animation: none;
	}
}

/* ==========================================================================
 * Specificity armour
 * ==========================================================================
 *
 * The drawer is injected into a page whose theme applies global resets from
 * the body class, e.g. in css/style-header-footer.css:
 *
 *   body.some-theme a      { color: inherit; }
 *   body.some-theme button { border: 0; background: transparent;
 *                            color: inherit; padding: 0; font-size: 16px; }
 *
 * Those selectors score (0,1,1) and beat every single-class rule above, which
 * scores (0,1,0). In practice that made the checkout link inherit the footer's
 * near-black colour — black text on a black button — and stripped the border,
 * padding and background off "+ Add" and the quantity steppers.
 *
 * Re-asserting the same declarations prefixed with `.scd` scores (0,2,x) and
 * wins cleanly, with no !important and no reach outside the drawer. Everything
 * that a global `a`/`button` reset can damage is restated here, in one place,
 * so this stays auditable rather than scattered through the file.
 * ========================================================================== */

.scd a.scd-btn,
.scd a.scd-btn:hover,
.scd a.scd-viewcart {
	text-decoration: none;
}

.scd .scd-btn {
	box-sizing: border-box;
	font-family: inherit;
	font-size: 13px;
	padding: 16px;
	border-radius: 30px;
	cursor: pointer;
}

.scd .scd-btn--primary,
.scd a.scd-btn--primary,
.scd button.scd-btn--primary {
	background: var(--scd-primary-bg);
	border: 1px solid var(--scd-primary-bg);
	color: var(--scd-primary-text);
}

.scd .scd-btn--primary:hover,
.scd a.scd-btn--primary:hover {
	color: #fff;
}

.scd .scd-btn--outline,
.scd a.scd-btn--outline,
.scd button.scd-btn--outline {
	background: #fff;
	border: 1px solid var(--scd-line);
	color: var(--scd-ink);
}

.scd button.scd-set__add {
	border: 1px solid var(--scd-ink);
	background: transparent;
	color: var(--scd-ink);
	font-size: 11px;
	padding: 9px 15px;
	border-radius: 20px;
}

.scd button.scd-set__add:hover,
.scd button.scd-set__add:focus-visible {
	background: var(--scd-ink);
	color: #fff;
}

.scd button.scd-chip {
	border: 1px solid var(--scd-line);
	background: #fff;
	color: var(--scd-ink);
	font-size: 11px;
	padding: 7px 9px;
	border-radius: var(--scd-radius-chip);
}

.scd button.scd-chip:hover,
.scd button.scd-chip:focus-visible {
	background: var(--scd-ink);
	border-color: var(--scd-ink);
	color: #fff;
}

.scd .scd-qty {
	border: 1px solid var(--scd-line);
	border-radius: 20px;
	padding: 3px 12px;
	margin-top: 0;
}

.scd .scd-item .scd-qty {
	margin-top: 12px;
}

.scd button.scd-qty__btn {
	border: 0;
	background: none;
	color: var(--scd-grey);
	font-size: 14px;
	padding: 2px 0;
}

.scd button.scd-qty__btn:hover:not(:disabled) {
	color: var(--scd-ink);
}

.scd button.scd-close {
	border: 0;
	background: none;
	color: var(--scd-grey);
	font-size: 20px;
	padding: 0 2px;
}

.scd button.scd-item__remove {
	border: 0;
	background: none;
	color: var(--scd-grey);
	font-size: 11px;
	padding: 0;
}

.scd .scd-head__title {
	font-size: 13px;
	color: var(--scd-ink);
}

/* The theme constrains paragraph width and adds large vertical margins. */
.scd p {
	max-width: none;
	margin: 0;
}

.scd .scd-ship__msg {
	margin: 0 0 11px;
}

.scd .scd-item__variant {
	margin: 4px 0 0;
}

.scd .scd-taxnote {
	margin: 0 0 16px;
}

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