/* =======================================================================
   Color variables - overridable from Settings → Widget Appearance.
   Defaults match the original hardcoded palette, so sites that never
   touch the new settings look exactly as before.

   Specificity note: every selector below is rooted at
   `div.nudgesells-upsell-wrap.nudgesells-upsell-wrap` (the wrapper class
   doubled) and every class in the chain is qualified with its actual
   element tag (e.g. `input.nudgesells-input`, `span.nudgesells-price`).
   This raises specificity well above what active themes typically apply
   to generic elements (inputs, selects, buttons, links) so the widget's
   own look survives without ever needing `!important`. Ambiguous classes
   that can land on more than one tag (an "upgrade option" is a <label>
   for the host product and a <div> for each upsell) use `:is(...)`
   rather than a bare class so the boosted specificity still applies to
   both.
   ======================================================================= */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap {
	--nudgesells-accent: #1E5F46;
	--nudgesells-accent-dark: #164734;
	--nudgesells-success: #2a7d2a;
	--nudgesells-success-bg: #e6f4e6;
	--nudgesells-border: #e2e2e2;
	--nudgesells-bg: #fafafa;
	--nudgesells-card-bg: #ffffff;
	--nudgesells-text: #000000;
	--nudgesells-text-muted: #767676;
	--nudgesells-price: #000000;
	--nudgesells-discount-progress: #C56B25;
	--nudgesells-countdown: #D63A18;
	--nudgesells-selection: #000000;
	--nudgesells-selection-border: #000000;
	--nudgesells-radius: 10px;
	--nudgesells-radius-sm: 6px;
}

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap {
	margin: 18px 0;
	border: 1px solid var(--nudgesells-border);
	border-radius: 18px;
	padding: 20px 22px;
	background: var(--nudgesells-card-bg);
	box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.03);
	color: var(--nudgesells-text);
	direction: inherit; /* follow the surrounding page direction (RTL-aware) */
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap--pending,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap--empty {
	margin: 0;
	border: none;
	padding: 0;
	background: none;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap--locked {
	background: color-mix(in srgb, var(--nudgesells-accent) 6%, #fbf6ee);
	border-color: #f0e2c8;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap--locked p.nudgesells-locked-note {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #8a6d1d;
	text-align: center;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section + div.nudgesells-section { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #ddd; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap p.nudgesells-section-title { font-weight: 700; font-size: 18px; margin: 0 0 8px; }

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section-header {
	display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px;
	position: relative;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap img.nudgesells-section-icon {
	width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto;
	background: var(--nudgesells-selection);
	border-radius: 12px;
	padding: 0;
	box-sizing: border-box;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section-heading-text { flex: 1 1 auto; min-width: 0; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section-heading-text p.nudgesells-section-title { margin-bottom: 2px; }

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-countdown-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-inline-start: 8px;
	vertical-align: middle;
	padding: 2px 9px;
	border-radius: var(--nudgesells-radius-sm);
	background: color-mix(in srgb, var(--nudgesells-countdown) 10%, transparent);
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-countdown-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--nudgesells-countdown);
	flex: 0 0 auto;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-countdown-time {
	color: var(--nudgesells-countdown);
	font-weight: 700;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	white-space: nowrap;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap p.nudgesells-section-subline { margin: 0; font-size: 12px; color: var(--nudgesells-text-muted); }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap a.nudgesells-section-readmore {
	position: absolute;
	top: 2px; inset-inline-end: 0;
	font-size: 12px; font-weight: 700; text-decoration: none;
	color: var(--nudgesells-accent); white-space: nowrap;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap a.nudgesells-section-readmore:hover { color: var(--nudgesells-accent-dark); text-decoration: underline; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap a.nudgesells-section-readmore:focus-visible { outline: 2px solid var(--nudgesells-accent); outline-offset: 2px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section-header:has(a.nudgesells-section-readmore) p.nudgesells-section-title {
	padding-inline-end: 70px;
}

/* Visually hidden but still announced by screen readers - used for the
   "(opens in a new tab)" hint on external links. Defined locally rather
   than relying on the active theme providing .screen-reader-text, since
   not every theme includes it on the frontend. */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; overflow: hidden; position: absolute;
	word-wrap: normal; margin: -1px; padding: 0;
}

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap :is(label, div).nudgesells-upgrade-option {
	display: flex; flex-direction: column; gap: 6px;
	padding: 14px 16px; border: 1px solid var(--nudgesells-border); border-radius: 14px;
	margin-bottom: 8px; background: var(--nudgesells-card-bg);
	transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-upgrade-option label,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap label.nudgesells-upgrade-option.nudgesells-upgrade-original { display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap label.nudgesells-upgrade-option.nudgesells-upgrade-original { cursor: pointer; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap :is(label, div).nudgesells-upgrade-option.nudgesells-selected,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap :is(label, div).nudgesells-upgrade-option:has(input:checked) {
	border-color: var(--nudgesells-selection-border);
	background: color-mix(in srgb, var(--nudgesells-accent) 4%, var(--nudgesells-card-bg));
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap :is(label, div).nudgesells-upgrade-option:has(input:focus-visible) { outline: 2px solid var(--nudgesells-accent); outline-offset: 2px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-upgrade-option--variable { align-items: flex-start; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-upgrade-variations { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 2px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-upgrade-body {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap strong.nudgesells-upgrade-price-end {
	flex: 0 0 auto;
	display: block;
	text-align: end;
	margin-inline-start: auto;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap strong.nudgesells-upgrade-price-end span.nudgesells-savings-badge {
	display: block;
	width: fit-content;
	margin-top: 4px;
	margin-inline-start: auto;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap select.nudgesells-upgrade-attribute { min-width: 140px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-variation-attribute-group { display: inline-flex; flex-direction: column; gap: 0; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap label.nudgesells-variation-attribute-label { font-size: 11px; font-weight: 600; color: var(--nudgesells-text-muted); margin-top: 8px; margin-bottom: 2px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-upgrade-text-wrap { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-upgrade-text { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-upgrade-sublabel { font-size: 12px; color: var(--nudgesells-text-muted); }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap strong.nudgesells-price { color: var(--nudgesells-price); font-weight: 600; font-size: 14px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap del.nudgesells-price-original { color: var(--nudgesells-text-muted); font-weight: 400; }

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-row {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--nudgesells-border);
	border-radius: 14px;
	background: var(--nudgesells-card-bg);
	margin-bottom: 10px;
	transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-row:last-child { margin-bottom: 0; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-row.nudgesells-addon-row--active {
	background: color-mix(in srgb, var(--nudgesells-accent) 5%, var(--nudgesells-card-bg));
	border-color: var(--nudgesells-selection-border);
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-row:has(:focus-visible) { border-color: var(--nudgesells-accent); }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap :is(div, label).nudgesells-addon-check { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; cursor: pointer; min-width: 0; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-check--qty { cursor: default; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap img.nudgesells-addon-thumb { width: 20%; height: auto; object-fit: cover; border-radius: 12px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > span.nudgesells-addon-info {
	flex: 1 1 auto;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > span.nudgesells-addon-price,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > span.nudgesells-qty-stepper,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > input.nudgesells-addon-qty {
	flex: 0 0 auto;
	margin-inline-start: auto;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > span.nudgesells-addon-price {
	text-align: end;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-badge {
	display: inline-block;
	align-self: flex-start;
	font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	color: var(--nudgesells-accent);
	white-space: nowrap;
	margin-bottom: 2px;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-name { font-size: 15px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap a.nudgesells-product-link { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap a.nudgesells-product-link:hover { color: var(--nudgesells-accent); border-bottom-style: solid; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap a.nudgesells-product-link:focus-visible { outline: 2px solid var(--nudgesells-accent); outline-offset: 2px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-subline { font-size: 12px; color: var(--nudgesells-text-muted); }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-variations { display: inline-flex; flex-wrap: wrap; gap: 6px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap select.nudgesells-addon-attribute { max-width: 160px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input.nudgesells-addon-qty { width: 56px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-price { display: block; font-size: 14px; font-weight: 600; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-row > span.nudgesells-addon-price {
	flex: 0 0 auto;
	margin-inline-start: auto;
	text-align: end;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-row > span.nudgesells-addon-price span.nudgesells-savings-badge {
	display: block;
	width: fit-content;
	margin-top: 4px;
	margin-inline-start: auto;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-price-discounted { color: var(--nudgesells-text); font-weight: 600; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap del.nudgesells-addon-price-original { color: var(--nudgesells-text-muted); font-weight: 400; margin-inline-start: 4px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-savings-badge {
	display: inline-block;
	font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
	color: var(--nudgesells-success);
	background: color-mix(in srgb, var(--nudgesells-success) 10%, transparent);
	border-radius: var(--nudgesells-radius-sm); padding: 1px 6px; margin-inline-start: 4px;
	white-space: nowrap;
}

/* ---- Fully custom checkboxes/radios: native controls render very
   differently across browsers/OSes even with `accent-color`, so these
   turn the browser's own box off entirely (`appearance: none`) and draw
   a consistent look ourselves - a rounded-square check with a CSS
   checkmark, and a circular radio with a solid center dot. ---- */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="checkbox"],
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	width: 22px; height: 22px;
	margin: 0;
	flex: 0 0 auto;
	border: 1.5px solid #c9c9c9;
	border-radius: 50%;
	background-color: #fff;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="checkbox"]:checked,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="radio"]:checked {
	background-color: var(--nudgesells-selection);
	border-color: var(--nudgesells-selection);
}
/* Checkmark: drawn from two rotated borders rather than an image, so it
   stays crisp at any zoom level and needs no extra asset. Its position
   is fixed regardless of text direction - a check mark isn't a
   directional glyph, so this intentionally does not use logical
   properties the way text-flow spacing elsewhere in this file does. */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 7px; top: 4px;
	width: 4px; height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	box-sizing: content-box;
	transform: rotate(45deg);
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 8px; height: 8px;
	background: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="checkbox"]:focus-visible,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="radio"]:focus-visible {
	outline: 2px solid var(--nudgesells-accent);
	outline-offset: 2px;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="checkbox"]:disabled,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="radio"]:disabled {
	opacity: .5;
	cursor: not-allowed;
}

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap select,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="number"],
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="text"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 1px solid #d5d5d5;
	border-radius: var(--nudgesells-radius-sm);
	background-color: #fff;
	padding: 6px 30px 6px 10px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--nudgesells-text);
	transition: border-color .12s ease, box-shadow .12s ease;
}
/* Selects get a custom chevron; the padding above assumes LTR icon
   placement, so RTL swaps both the icon side and its padding below. */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23767676'%3e%3cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 14px;
	cursor: pointer;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="number"] { padding-inline-end: 10px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap select:focus,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="number"]:focus,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="text"]:focus {
	outline: none;
	border-color: var(--nudgesells-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--nudgesells-accent) 20%, transparent);
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input.nudgesells-addon-qty:focus {
	box-shadow: none;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="number"]::-webkit-inner-spin-button,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap input[type="number"]::-webkit-outer-spin-button {
	opacity: 1;
}

/* Quantity stepper: +/- buttons flanking the number input, shown when
   Settings → "Quantity stepper" is enabled. The native spinner arrows
   are hidden here specifically so they don't duplicate the custom ones. */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper {
	display: inline-flex; align-items: stretch;
	flex-shrink: 0;
	border: 1px solid #d5d5d5; border-radius: 999px;
	overflow: hidden; background: #fff;
	margin-inline-start: auto;
	transition: border-color .12s ease;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper:has(button.nudgesells-qty-btn:active) input.nudgesells-addon-qty { border: none; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper:not(:has(button.nudgesells-qty-btn:active)) input.nudgesells-addon-qty { border: none; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-row > input.nudgesells-addon-qty {
	margin-inline-start: auto;
	flex-shrink: 0;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper input.nudgesells-addon-qty {
	border: none; border-radius: 0;
	width: 36px; text-align: center; padding: 6px 2px;
	background: var(--nudgesells-card-bg); color: var(--nudgesells-text);
	-moz-appearance: textfield;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper input.nudgesells-addon-qty:focus-visible { outline: none; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper input.nudgesells-addon-qty::-webkit-inner-spin-button,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper input.nudgesells-addon-qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section.nudgesells-addons span.nudgesells-qty-stepper button.nudgesells-qty-btn {
	appearance: none; -webkit-appearance: none; border: none; cursor: pointer;
	background: var(--nudgesells-card-bg); color: var(--nudgesells-text); font-size: 15px; line-height: 1;
	width: 28px; flex: 0 0 28px; padding: 0; transition: background-color .12s ease;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section.nudgesells-addons span.nudgesells-qty-stepper button.nudgesells-qty-minus { border-right: 1px solid var(--nudgesells-border); }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section.nudgesells-addons span.nudgesells-qty-stepper button.nudgesells-qty-plus { border-left: 1px solid var(--nudgesells-border); }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section.nudgesells-addons span.nudgesells-qty-stepper button.nudgesells-qty-btn:hover,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section.nudgesells-addons span.nudgesells-qty-stepper button.nudgesells-qty-btn:active,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-section.nudgesells-addons span.nudgesells-qty-stepper button.nudgesells-qty-btn:focus-visible {
	background: color-mix(in srgb, var(--nudgesells-text) 10%, var(--nudgesells-card-bg));
	color: var(--nudgesells-text);
	outline: none;
}

/* RTL: mirror the select chevron to the visual left instead of right,
   matching where a reading direction expects the affordance to sit. */
body.rtl div.nudgesells-upsell-wrap.nudgesells-upsell-wrap select {
	background-position: left 8px center;
	padding: 6px 10px 6px 30px;
}

/* Card display style: same markup, reflowed into a responsive grid of
   self-contained cards with a larger product image up top. */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 12px;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card div.nudgesells-addon-row {
	flex-direction: column;
	align-items: stretch;
	border: 1px solid var(--nudgesells-border);
	border-radius: 16px;
	padding: 14px;
	margin-bottom: 0;
	background: var(--nudgesells-card-bg);
	gap: 8px;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card div.nudgesells-addon-row.nudgesells-addon-row--active {
	background: color-mix(in srgb, var(--nudgesells-accent) 5%, var(--nudgesells-card-bg));
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card :is(div, label).nudgesells-addon-check,
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card div.nudgesells-addon-check--qty {
	position: relative;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	min-width: 0;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card :is(div, label).nudgesells-addon-check input.nudgesells-addon-toggle {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 2;
	margin: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card :is(div, label).nudgesells-addon-check input.nudgesells-addon-toggle:not(:checked) {
	background-color: #fff;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card span.nudgesells-addon-info { align-items: center; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card span.nudgesells-addon-badge { align-self: center; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card span.nudgesells-qty-stepper { margin-inline-start: 0; align-self: stretch; justify-content: center; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card div.nudgesells-addon-row > input.nudgesells-addon-qty { margin-inline-start: 0; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card img.nudgesells-addon-thumb {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card span.nudgesells-addon-name { font-weight: 600; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card span.nudgesells-addon-variations { width: 100%; justify-content: center; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card span.nudgesells-variation-attribute-group { width: 100%; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card select.nudgesells-addon-attribute { max-width: none; width: 100%; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card input.nudgesells-addon-qty { width: 100%; text-align: center; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-addon-list.nudgesells-addon-list--card span.nudgesells-addon-price { text-align: center; min-width: 0; }

/* Bundle/tier discount progress pills - one per configured add-on
   (bundle) or per configured tier, filled left-to-right as the customer
   selects add-ons / raises quantity toward each threshold. */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-progress-pills {
	display: flex;
	gap: 6px;
	margin-top: 10px;
	width: 100%;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-pill {
	display: block;
	flex: 1 1 0;
	height: 6px;
	min-height: 6px;
	min-width: 4px;
	border-radius: 999px;
	background-color: var(--nudgesells-border, #e2e2e2);
	transition: background-color .15s ease, transform .15s ease;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-pill.nudgesells-pill--active {
	background-color: var(--nudgesells-selection);
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-pill.nudgesells-pill--just-reached {
	transform: scaleY(1.6);
}

/* Single-bar alternative to the pills above - same underlying progress,
   shown as one continuous fill instead of discrete segments. */
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-progress-bar {
	display: block;
	height: 6px;
	min-height: 6px;
	width: 100%;
	border-radius: 999px;
	background-color: var(--nudgesells-border, #e2e2e2);
	margin-top: 10px;
	overflow: hidden;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-progress-bar-fill {
	display: block;
	height: 100%;
	min-height: 6px;
	width: 0%;
	border-radius: 999px;
	background-color: var(--nudgesells-selection);
	transition: width .25s ease;
}

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-discount-message {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	font-size: 12px; font-weight: 700; letter-spacing: 0.01em;
	text-align: center;
	color: var(--nudgesells-discount-progress);
	background: color-mix(in srgb, var(--nudgesells-discount-progress) 10%, transparent);
	border-radius: var(--nudgesells-radius-sm); padding: 5px 12px;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-discount-message:empty { display: none; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-discount-message.nudgesells-discount-message--reached {
	color: var(--nudgesells-success);
	background: color-mix(in srgb, var(--nudgesells-success) 10%, transparent);
}

div.nudgesells-upsell-wrap.nudgesells-upsell-wrap div.nudgesells-summary {
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nudgesells-border);
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	font-size: 15px;
}
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-summary-savings { color: var(--nudgesells-success); font-weight: 600; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-summary-total { font-weight: 600; margin-inline-start: auto; text-align: end; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap del.nudgesells-summary-total-original { color: var(--nudgesells-text-muted); font-weight: 400; margin-inline-end: 2px; }
div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-summary-total-final { color: var(--nudgesells-price); }

/* Below this width, a title + thumb + price/qty-control no longer
   comfortably fit on one line -- rather than let flex-shrink squeeze
   the qty input/stepper down to something unusable, the row wraps and
   the price/qty-control drops to its own full-width line underneath. */
@media (max-width: 480px) {
	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > span.nudgesells-addon-price,
	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > span.nudgesells-qty-stepper,
	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-addon-body > input.nudgesells-addon-qty {
		margin-inline-start: 0;
		text-align: start;
	}
	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-qty-stepper {
		justify-content: flex-start;
	}

	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap span.nudgesells-upgrade-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap strong.nudgesells-upgrade-price-end {
		margin-inline-start: 0;
		text-align: start;
	}
	div.nudgesells-upsell-wrap.nudgesells-upsell-wrap strong.nudgesells-upgrade-price-end span.nudgesells-savings-badge {
		margin-inline-start: 0;
	}
}
