/**
 * Jovvie Suggestions — storefront design system.
 *
 * ONE system, not per-component styles:
 *  - Tokens are declared once on every root scope (panel, bundle, landing).
 *    The merchant accent overrides --jvs-primary via a single injected rule
 *    (Assets::accent_inline_css) on the same scopes.
 *  - Two container breakpoints only: 600px (columns stack) and 380px
 *    (items become rows). Components measure their OWN column, never the
 *    viewport.
 *  - Shared primitives: brand header, item, add button, chip, stars,
 *    dismiss, progress, offer. Components compose them.
 *  - Type is inherited from the theme; neutrals are alpha-based so they sit
 *    on light or dark surfaces.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens + base (every root scope)
 * ------------------------------------------------------------------ */

.jvs-panel,
.jvs-bundle,
.jvs-landing,
.jvs-retain {
	--jvs-primary: #6d4aff;
	--jvs-on-primary: #ffffff;
	--jvs-border: rgba(128, 128, 128, 0.25);
	--jvs-muted: rgba(128, 128, 128, 0.95);
	--jvs-radius: 10px;
	--jvs-radius-sm: 7px;
	--jvs-star: #e7a018;
	--jvs-success: #1f9d55;
	--jvs-warn: #b45309;

	box-sizing: border-box;
	clear: both;
	width: 100%;
	font-family: inherit;
	font-size: 0.95em;
	line-height: 1.45;
}

.jvs-panel *,
.jvs-bundle *,
.jvs-landing *,
.jvs-retain *,
.jvs-panel *::before,
.jvs-bundle *::before,
.jvs-panel *::after,
.jvs-bundle *::after {
	box-sizing: border-box;
}

/* Panels and bundles measure their own column. */
.jvs-panel,
.jvs-bundle {
	position: relative;
	margin: 1.5em 0;
	container-type: inline-size;
}

/* Bordered section box (bundle always; panel unless embedded). */
.jvs-bundle {
	padding: 1em;
	border: 1px solid var(--jvs-border);
	border-radius: var(--jvs-radius);
}

/* ------------------------------------------------------------------ *
 * 2. Brand header (shared)
 * ------------------------------------------------------------------ */

.jvs-panel__head {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin-bottom: 0.8em;
}

.jvs-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jvs-primary);
	white-space: nowrap;
}

.jvs-orb {
	width: 0.9em;
	height: 0.9em;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--jvs-primary) 45%, #ffffff), var(--jvs-primary));
	box-shadow: 0 0 0 0.22em color-mix(in srgb, var(--jvs-primary) 16%, transparent);
	flex: 0 0 auto;
}

.jvs-panel__title {
	font-weight: 600;
	font-size: 1.05em;
	color: inherit;
}

.jvs-panel__subtitle {
	display: block;
	font-weight: 600;
	margin-bottom: 0.8em;
}

.jvs-panel[data-generating="1"].is-generating .jvs-orb {
	animation: jvs-breathe 0.9s ease-in-out 2;
}

@keyframes jvs-breathe {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.3); }
}

/* ------------------------------------------------------------------ *
 * 3. Item primitive (+ hero) and panel layouts
 * ------------------------------------------------------------------ */

.jvs-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.75em;
	border: 1px solid var(--jvs-border);
	border-radius: var(--jvs-radius);
	background: transparent;
}

.jvs-item__media {
	position: relative;
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.jvs-item__media img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: var(--jvs-radius-sm);
	display: block;
}

.jvs-badge {
	position: absolute;
	top: -0.5em;
	left: -0.5em;
	background: var(--jvs-primary);
	color: var(--jvs-on-primary);
	font-size: 0.62em;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.25em 0.55em;
	border-radius: 999px;
	line-height: 1.4;
}

.jvs-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.jvs-item__name {
	font-weight: 600;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.jvs-item__name:hover {
	color: var(--jvs-primary);
}

.jvs-item__reason {
	font-size: 0.82em;
	color: var(--jvs-muted);
	font-style: italic;
}

.jvs-item__reason--headline {
	font-size: 1em;
	font-weight: 700;
	font-style: normal;
	color: var(--jvs-primary);
	line-height: 1.3;
}

.jvs-item__price {
	font-size: 0.95em;
	font-weight: 600;
}

.jvs-item__price del {
	opacity: 0.55;
	font-weight: 400;
	margin-right: 0.35em;
}

.jvs-item__price ins {
	text-decoration: none;
}

.jvs-item__price del + ins {
	margin-left: 0.1em;
}

.jvs-item__action {
	flex: 0 0 auto;
}

/* Inline variation picker: one quiet row of selects inside the pick. */
.jvs-variations {
	flex: 1 1 100%;
	display: flex;
	align-items: flex-end;
	gap: 0.6em;
	flex-wrap: wrap;
	margin-top: 0.6em;
	padding-top: 0.6em;
	border-top: 1px dashed var(--jvs-border);
}

.jvs-variations__field {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	margin: 0;
	flex: 1 1 100%;
	font-size: 0.78em;
	color: var(--jvs-muted);
	min-width: 0;
}

/* The select is a peer control to the add button: same scale, same radius,
   full width — not a mini form field beside a big button. */
.jvs-variations__field select {
	width: 100%;
	max-width: none;
	font-family: inherit;
	font-size: 1.15em;
	color: inherit;
	min-height: 3.2em;
	padding: 0.5em 1em;
	border: 1px solid var(--jvs-border);
	border-radius: 999px;
	background: #fff;
}

.jvs-variations__price {
	font-weight: 700;
	margin-left: auto;
}

.jvs-variations__add {
	flex: 1 1 auto;
	min-width: 2.4em;
	min-height: 2.9em;
}

.jvs-choose.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

/* Scarcity + deal-expiry nudges: quiet, factual, never shouty. */
.jvs-item__scarcity {
	font-size: 0.78em;
	font-weight: 600;
	color: var(--jvs-warn);
}

.jvs-item__ends {
	display: inline-block;
	margin-left: 0.4em;
	font-size: 0.75em;
	color: var(--jvs-muted);
	white-space: nowrap;
}

/* Hero: the one conviction pick. */
.jvs-item--hero {
	border-color: color-mix(in srgb, var(--jvs-primary) 40%, transparent);
	background: color-mix(in srgb, var(--jvs-primary) 3%, transparent);
}

.jvs-panel--list .jvs-item--hero .jvs-item__media img,
.jvs-panel--bump .jvs-item--hero .jvs-item__media img {
	width: 84px;
	height: 84px;
}

.jvs-item--gap .jvs-item__reason--headline::after {
	content: ' 🚚';
}

/* Layout: list (cart, embedded, default) */
.jvs-panel--list .jvs-items {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

/* Layout: cards (product page standalone). auto-fit + capped tracks: a
   couple of picks center as substantial cards instead of hugging the left
   edge of a row of phantom empty columns. */
.jvs-panel--cards .jvs-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
	justify-content: center;
	gap: 0.9em;
}

.jvs-panel--cards .jvs-item {
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	padding: 1em;
	gap: 0.6em;
}

.jvs-panel--cards .jvs-item__media {
	align-self: center;
}

.jvs-panel--cards .jvs-item__media img {
	width: 130px;
	height: 130px;
}

.jvs-panel--cards .jvs-item__body {
	align-items: center;
}

.jvs-panel--cards .jvs-item__action {
	margin-top: auto;
}

.jvs-panel--cards .jvs-add {
	width: 100%;
	border-radius: var(--jvs-radius-sm);
	padding: 0.6em 1em;
	gap: 0.35em;
}

.jvs-panel--cards .jvs-item--hero {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	text-align: left;
}

.jvs-panel--cards .jvs-item--hero .jvs-item__media img {
	width: 110px;
	height: 110px;
}

.jvs-panel--cards .jvs-item--hero .jvs-item__body {
	align-items: flex-start;
}

.jvs-panel--cards .jvs-item--hero .jvs-item__action {
	margin-top: 0;
	flex: 0 0 auto;
}

.jvs-panel--cards .jvs-item--hero .jvs-add {
	width: auto;
}

/* Layout: bump (checkout order bump) */
.jvs-panel--bump {
	margin: 1.2em 0;
}

.jvs-panel--bump .jvs-items {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.jvs-panel--bump .jvs-item {
	border: 2px dashed color-mix(in srgb, var(--jvs-primary) 55%, transparent);
	background: color-mix(in srgb, var(--jvs-primary) 4%, transparent);
}

.jvs-panel--bump .jvs-add--bump {
	border-radius: var(--jvs-radius-sm);
	padding: 0.6em 1em;
	white-space: nowrap;
}

/* Layout: mini (drawer) */
/* Mini (drawer) — ALL widths: the drawer is narrow everywhere and shares
   space with the cart items, so picks are single utility rows and only ONE
   shows at a time (JS adds a quiet ‹ 1/3 › cycler; no-JS shows the first).
   Reasons, ratings, badges, dismiss, scarcity live on the product page —
   the drawer keeps image, name, price, add. */
.jvs-panel--mini {
	margin: 0.6em 0;
	font-size: 0.85em;
}

.jvs-panel--mini .jvs-items {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
}

.jvs-panel--mini .jvs-item:not(:first-of-type) {
	display: none;
}

.jvs-panel--mini .jvs-panel__head {
	margin-bottom: 0.4em;
}

.jvs-panel--mini .jvs-item {
	padding: 0.4em 0.5em;
	gap: 0.6em;
	/* wrap: the compact variation picker sits on its own line below the row. */
	flex-wrap: wrap;
}

.jvs-panel--mini .jvs-item__media img,
.jvs-panel--mini .jvs-item--hero .jvs-item__media img {
	width: 32px;
	height: 32px;
}

.jvs-panel--mini .jvs-stars,
.jvs-panel--mini .jvs-badge,
.jvs-panel--mini .jvs-chip,
.jvs-panel--mini .jvs-dismiss,
.jvs-panel--mini .jvs-item__reason,
.jvs-panel--mini .jvs-item__reason--headline,
.jvs-panel--mini .jvs-item__scarcity,
.jvs-panel--mini .jvs-item__ends {
	display: none;
}

.jvs-panel--mini .jvs-item__media {
	flex: 0 0 auto;
}

/* Image left; name with the price stacked under it on the right — one
   compact row instead of image and text on separate lines. */
.jvs-panel--mini .jvs-item__body {
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1em;
	min-width: 0;
}

.jvs-panel--mini .jvs-item__name {
	min-width: 0;
	font-size: 0.9em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
}

.jvs-panel--mini .jvs-item__price {
	font-size: 0.85em;
}

.jvs-panel--mini .jvs-item__action {
	flex: 0 0 auto;
	margin-top: 0;
}

.jvs-panel--mini .jvs-add {
	width: auto;
	min-width: 2.2em;
	min-height: 2.2em;
	padding: 0.25em 0.6em;
}

/* Variable-anchor bundle tile: a slim picker on the anchor's card
   (preselected to the default; totals reprice server-side on change). */
.jvs-bundle__variations {
	flex: 1 1 100%;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin-top: 0.45em;
	padding-top: 0;
	border-top: 0;
}

.jvs-bundle__variations select {
	width: 100%;
	min-height: 2.3em;
	font-family: inherit;
	font-size: 0.85em;
	color: inherit;
	padding: 0.3em 0.7em;
	border: 1px solid var(--jvs-border);
	border-radius: var(--jvs-radius-sm);
	background: #fff;
}

/* Drawer-scale variation picker: one slim select (preselected to the
   default) + a compact add — choosing happens IN the drawer, no link-out. */
.jvs-panel--mini .jvs-variations {
	margin-top: 0.4em;
	padding-top: 0.4em;
	gap: 0.4em;
	align-items: center;
}

.jvs-panel--mini .jvs-variations__field {
	flex: 1 1 60%;
	gap: 0;
}

.jvs-panel--mini .jvs-variations__field > span {
	display: none; /* the select's own value labels it */
}

.jvs-panel--mini .jvs-variations__field select {
	min-height: 2.4em;
	font-size: 1.05em;
	padding: 0.3em 0.8em;
}

.jvs-panel--mini .jvs-variations__add {
	flex: 1 1 auto;
	min-height: 2.4em;
	min-width: 2.4em;
}

/* The ‹ 1/3 › cycler in the panel head. */
.jvs-mini-nav {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.78em;
	color: var(--jvs-muted);
}

.jvs-mini-nav__btn {
	width: 1.8em;
	height: 1.8em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--jvs-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.jvs-mini-nav__btn:hover,
.jvs-mini-nav__btn:focus-visible {
	color: var(--jvs-primary);
	border-color: var(--jvs-primary);
}

/* Embedded inside the bundle container: quiet sub-section. */
.jvs-panel--embedded {
	border: 0;
	border-top: 1px solid var(--jvs-border);
	border-radius: 0;
	padding: 1em 0 0;
	margin: 1.2em 0 0;
}

/* ------------------------------------------------------------------ *
 * 4. Controls: add button, chip, stars, dismiss
 * ------------------------------------------------------------------ */

.jvs-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6em;
	min-height: 2.6em;
	padding: 0.35em 0.9em;
	border: none;
	border-radius: 999px;
	background: var(--jvs-primary);
	color: var(--jvs-on-primary);
	font-family: inherit;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.12s ease, transform 0.08s ease;
}

.jvs-add:hover {
	filter: brightness(1.08);
	color: var(--jvs-on-primary);
	transform: translateY(-1px);
}

.jvs-add:focus-visible {
	outline: 2px solid var(--jvs-primary);
	outline-offset: 2px;
}

.jvs-add[disabled] {
	opacity: 0.55;
	cursor: default;
	transform: none;
}

.jvs-add.is-added {
	background: var(--jvs-success);
}

/* Add-button text: merchant-editable per device class (Your voice). The
   mobile variant swaps in at the 500px viewport floor below. */
.jvs-add__text--desktop,
.jvs-add__text--mobile {
	line-height: 1.2;
}

.jvs-add__text--mobile {
	display: none;
}

.jvs-add--select {
	background: transparent;
	color: var(--jvs-primary);
	border: 1px solid var(--jvs-primary);
	font-size: 0.8em;
	white-space: nowrap;
}

.jvs-add--select:hover {
	color: var(--jvs-primary);
	background: color-mix(in srgb, var(--jvs-primary) 8%, transparent);
}

.jvs-chip {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.15em 0.55em;
	border-radius: 999px;
	background: var(--jvs-primary);
	color: var(--jvs-on-primary);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
	vertical-align: middle;
}

.jvs-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.8em;
	line-height: 1;
}

.jvs-stars__track {
	position: relative;
	display: inline-block;
	color: var(--jvs-border);
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.jvs-stars__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--jvs-star);
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.jvs-stars__count {
	color: var(--jvs-muted);
}

.jvs-dismiss {
	position: absolute;
	top: 0.35em;
	right: 0.35em;
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--jvs-muted);
	font-size: 0.95em;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.12s ease;
	z-index: 2;
}

.jvs-item:hover .jvs-dismiss,
.jvs-dismiss:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.jvs-dismiss {
		opacity: 0.6;
	}
}

.jvs-dismiss:hover {
	color: inherit;
	background: var(--jvs-border);
}

/* ------------------------------------------------------------------ *
 * 5. Progress strip + offer strip + landing banner
 * ------------------------------------------------------------------ */

.jvs-progress {
	margin: 0 0 0.9em;
}

.jvs-progress__label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.jvs-progress__label .woocommerce-Price-amount {
	color: var(--jvs-primary);
}

.jvs-progress__track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--jvs-border);
	overflow: hidden;
}

.jvs-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--jvs-primary), color-mix(in srgb, var(--jvs-primary) 60%, #ffffff));
	transition: width 0.4s ease;
}

/* Dashed accent surface shared by offer + landing. */
.jvs-offer,
.jvs-landing {
	display: flex;
	align-items: center;
	gap: 0.8em;
	flex-wrap: wrap;
	padding: 0.7em 0.9em;
	border: 2px dashed color-mix(in srgb, var(--jvs-primary) 55%, transparent);
	border-radius: var(--jvs-radius);
	background: color-mix(in srgb, var(--jvs-primary) 4%, transparent);
}

.jvs-offer {
	margin: 0 0 0.9em;
}

.jvs-landing {
	margin: 0 0 1em;
	font-size: 0.92em;
	line-height: 1.4;
}

.jvs-offer__text {
	font-weight: 700;
	flex: 1 1 160px;
}

.jvs-offer__text .woocommerce-Price-amount,
.jvs-landing__deal {
	color: var(--jvs-primary);
}

.jvs-landing__deal {
	white-space: nowrap;
}

.jvs-landing .jvs-brand {
	flex: 0 0 auto;
}

.jvs-landing__text {
	flex: 1 1 200px;
	min-width: 0;
}

.jvs-offer__items {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
	font-size: 0.85em;
}

.jvs-offer__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.jvs-offer__item img {
	width: 32px;
	height: 32px;
	border-radius: var(--jvs-radius-sm);
	object-fit: cover;
}

.jvs-offer__add {
	padding: 0.5em 1em;
	border-radius: var(--jvs-radius-sm);
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * 6. Bundle widget
 * ------------------------------------------------------------------ */

.jvs-bundle__body {
	display: flex;
	align-items: center;
	/* Center the whole band (tiles + CTA) in the section: leftover width
	   becomes symmetric margins, not a void on one side. */
	justify-content: center;
	gap: 1.2em;
	margin: 0.8em 0 0;
}

/* The set row NEVER orphan-wraps: items share the row and shrink together.
   flex 0 1: the row takes only the space it needs, so the CTA sits right
   beside the last tile instead of across a field of white space. */
.jvs-bundle__items {
	display: flex;
	align-items: stretch;
	gap: 0.6em;
	flex-wrap: nowrap;
	flex: 0 1 auto;
	min-width: 0;
}

.jvs-bundle__plus {
	align-self: center;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--jvs-muted);
	flex: 0 0 auto;
}

.jvs-bundle__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35em;
	padding: 1.6em 0.7em 0.7em;
	border: 1px solid var(--jvs-border);
	border-radius: var(--jvs-radius-sm);
	cursor: pointer;
	flex: 1 1 0;
	min-width: 0;
	max-width: 210px;
	text-align: center;
	margin: 0;
	transition: border-color 0.12s ease;
}

.jvs-bundle__item:has(.jvs-bundle__check:checked) {
	border-color: color-mix(in srgb, var(--jvs-primary) 45%, transparent);
}

/* Tiles stretch to equal height; their content must NEVER be shrunk to fit
   (a shrunk name box beheads its text mid-glyph). Tiles grow instead. */
.jvs-bundle__item > * {
	flex-shrink: 0;
}

.jvs-bundle__item img {
	width: 100%;
	max-width: 96px;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	border-radius: var(--jvs-radius-sm);
}

/* Selection control: a quiet accent circle, not a raw checkbox. */
.jvs-bundle__check {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: 0.45em;
	right: 0.45em;
	width: 1.3em;
	height: 1.3em;
	margin: 0;
	border: 2px solid var(--jvs-border);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.jvs-bundle__check:checked {
	border-color: var(--jvs-primary);
	background: var(--jvs-primary);
}

.jvs-bundle__check:checked::after {
	content: '\2713';
	color: var(--jvs-on-primary);
	font-size: 0.75em;
	line-height: 1;
	font-weight: 700;
}

.jvs-bundle__check:disabled {
	opacity: 0.7;
	cursor: default;
}

.jvs-bundle__check:focus-visible {
	outline: 2px solid var(--jvs-primary);
	outline-offset: 2px;
}

.jvs-bundle__name {
	font-size: 0.82em;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* "This item:" + two name lines — never vanish. */
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}

.jvs-bundle__name em {
	display: block;
	font-style: normal;
	font-size: 0.85em;
	color: var(--jvs-muted);
}

.jvs-bundle__price {
	font-weight: 600;
	font-size: 0.9em;
}

.jvs-bundle__item:has(.jvs-bundle__check:not(:checked)) {
	opacity: 0.45;
}

.jvs-bundle__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5em;
	flex: 0 0 auto;
	min-width: 190px;
	max-width: 240px;
	padding-left: 1.2em;
	border-left: 1px solid var(--jvs-border);
}

.jvs-bundle__money del {
	opacity: 0.55;
	margin-right: 0.35em;
}

.jvs-bundle__money ins {
	text-decoration: none;
	font-weight: 700;
	font-size: 1.1em;
}

.jvs-bundle__savings,
.jvs-bundle--set .jvs-chip {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.2em 0.6em;
	border-radius: 999px;
	background: var(--jvs-savings-bg, var(--jvs-primary));
	color: var(--jvs-on-primary);
	font-size: 0.78em;
	font-weight: 700;
}

.jvs-bundle--set .jvs-chip {
	margin-left: 0;
}

.jvs-bundle__savings .woocommerce-Price-amount {
	color: var(--jvs-on-primary);
}

.jvs-bundle__money--partial {
	color: var(--jvs-muted);
	font-size: 0.88em;
}

.jvs-bundle__add {
	width: 100%;
	justify-content: center;
	padding: 0.6em 1.4em;
	border-radius: var(--jvs-radius-sm);
}

/* ------------------------------------------------------------------ *
 * 7. Container breakpoints — exactly two, applied consistently
 * ------------------------------------------------------------------ */

/* 600px: side-by-side arrangements stack. */
@container (max-width: 600px) {
	.jvs-bundle__body {
		flex-direction: column;
		align-items: stretch;
	}

	.jvs-bundle__cta {
		border-left: 0;
		border-top: 1px solid var(--jvs-border);
		padding-left: 0;
		padding-top: 0.9em;
		min-width: 0;
		max-width: none;
	}
}

/* 380px: items become rows; actions go full width. */
@container (max-width: 380px) {
	.jvs-item {
		flex-wrap: wrap;
		row-gap: 0.5em;
	}

	.jvs-item__body {
		flex: 1 1 55%;
	}

	.jvs-item__action {
		flex: 1 1 100%;
	}

	.jvs-item__action .jvs-add {
		width: 100%;
		justify-content: center;
	}

	.jvs-item--hero .jvs-item__media img,
	.jvs-panel--bump .jvs-item--hero .jvs-item__media img {
		width: 56px;
		height: 56px;
	}

	.jvs-chip {
		display: block;
		width: max-content;
		margin: 0.3em 0 0;
	}

	.jvs-panel--cards .jvs-items {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.6em;
	}

	.jvs-panel--cards .jvs-item {
		padding: 0.7em;
	}

	.jvs-panel--cards .jvs-item__media img {
		width: 96px;
		height: 96px;
	}

	.jvs-bundle__items {
		flex-direction: column;
	}

	.jvs-bundle__plus {
		display: none;
	}

	.jvs-bundle__item {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr) auto 1.6em;
		grid-template-areas:
			'img name price check'
			'picker picker picker picker';
		align-items: center;
		column-gap: 0.7em;
		row-gap: 0.4em;
		text-align: left;
		max-width: none;
		padding: 0.6em;
	}

	.jvs-bundle__item img {
		grid-area: img;
		width: 48px;
		max-width: 48px;
	}

	.jvs-bundle__name {
		grid-area: name;
		min-width: 0;
	}

	.jvs-bundle__name em {
		display: inline;
		margin-right: 0.3em;
	}

	.jvs-bundle__price {
		grid-area: price;
		white-space: nowrap;
	}

	.jvs-bundle__variations {
		grid-area: picker;
		margin-top: 0;
	}

	.jvs-bundle__check {
		position: static;
		grid-area: check;
		top: auto;
		transform: none;
		justify-self: end;
	}

	/* Brand line and title each get their own full line — no cramped
	   two-column wrap next to the branding. */
	.jvs-bundle .jvs-panel__head {
		flex-wrap: wrap;
		row-gap: 0.15em;
	}

	.jvs-bundle .jvs-panel__title {
		flex: 1 1 100%;
	}
}

/* Viewport floor (v1.21.2): on real phones the stacked presentation is
   guaranteed by the SCREEN, not the container. Some themes ship mobile
   ancestors wider than the viewport (masked by body{overflow-x:hidden}),
   which fools container measurement into desktop layouts that then clip.
   Media queries cannot be fooled by ancestor layout. Placed after the
   container rules so it wins ties; desktop sidebars are unaffected. */
@media (max-width: 500px) {
	/* Merchant-editable add-button text: mobile variant swaps in. */
	.jvs-add__text--desktop {
		display: none;
	}

	.jvs-add__text--mobile {
		display: inline;
	}

	.jvs-panel,
	.jvs-bundle,
	.jvs-landing {
		max-width: calc(100vw - 24px);
	}

	.jvs-panel--cards .jvs-items {
		grid-template-columns: 1fr;
		gap: 0.6em;
	}

	/* Cards become rows: image left, body beside it, full-width button. */
	.jvs-panel--cards .jvs-item {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		text-align: left;
		row-gap: 0.5em;
		padding: 0.75em;
	}

	.jvs-panel--cards .jvs-item__media {
		align-self: auto;
	}

	.jvs-panel--cards .jvs-item__media img {
		width: 72px;
		height: 72px;
	}

	.jvs-panel--cards .jvs-item__body {
		align-items: flex-start;
		flex: 1 1 55%;
	}

	.jvs-item {
		flex-wrap: wrap;
		row-gap: 0.5em;
	}

	.jvs-item__body {
		flex: 1 1 55%;
	}

	.jvs-item__action,
	.jvs-panel--cards .jvs-item__action {
		flex: 1 1 100%;
		margin-top: 0;
	}

	.jvs-item__action .jvs-add {
		width: 100%;
		justify-content: center;
	}

	.jvs-bundle__body {
		flex-direction: column;
		align-items: stretch;
	}

	.jvs-bundle__cta {
		border-left: 0;
		border-top: 1px solid var(--jvs-border);
		padding-left: 0;
		padding-top: 0.9em;
		min-width: 0;
		max-width: none;
	}

	/* The drawer/mini panel on phones: cart items OWN the drawer, picks are
	   a guest. No internal scrolling (drawers trap touch-scroll), so the
	   height is bounded by construction: at most two picks, each collapsed
	   to a single utility row — image, one-line name, price, add. Reasons,
	   ratings, and dismiss go; the tap-through to the product keeps the
	   full story. Desktop drawers keep the regular mini form. */
	.jvs-panel--mini {
		margin: 0.5em 0;
	}

	.jvs-panel--mini .jvs-item:nth-of-type(n + 3) {
		display: none;
	}

	.jvs-panel--mini .jvs-panel__head {
		margin-bottom: 0.4em;
	}

	.jvs-panel--mini .jvs-item {
		padding: 0.4em 0.5em;
	}

	.jvs-panel--mini .jvs-item__reason,
	.jvs-panel--mini .jvs-item__reason--headline,
	.jvs-panel--mini .jvs-dismiss,
	.jvs-panel--mini .jvs-item__scarcity,
	.jvs-panel--mini .jvs-item__ends {
		display: none;
	}

	.jvs-panel--mini .jvs-item__media img,
	.jvs-panel--mini .jvs-item--hero .jvs-item__media img {
		width: 32px;
		height: 32px;
	}

	.jvs-panel--mini .jvs-item__body {
		flex-direction: row;
		align-items: center;
		gap: 0.5em;
		min-width: 0;
	}

	.jvs-panel--mini .jvs-item__name {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 0.9em;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.jvs-panel--mini .jvs-item__price {
		flex: 0 0 auto;
		font-size: 0.85em;
	}

	/* When the complete-the-set offer shares the phone drawer with picks,
	   the offer wins the space (it completes a choice already made): offer
	   + one pick, keeping the section's height budget intact. */
	.jvs-panel--mini:has(.jvs-offer) .jvs-item:nth-of-type(n + 2) {
		display: none;
	}

	.jvs-panel--mini .jvs-offer {
		padding: 0.5em;
		gap: 0.5em;
	}

	.jvs-panel--mini .jvs-item {
		/* wrap: the variation picker takes its own line — a nowrap row would
		   crush the product name to a couple of letters. */
		flex-wrap: wrap;
		row-gap: 0.4em;
	}

	.jvs-panel--mini .jvs-item__body {
		flex: 1 1 auto;
	}

	.jvs-panel--mini .jvs-item__action {
		flex: 0 0 auto;
		margin-top: 0;
	}

	.jvs-panel--mini .jvs-item__action .jvs-add {
		width: auto;
	}

	.jvs-panel--mini .jvs-item--hero .jvs-item__media img {
		width: 48px;
		height: 48px;
	}
}

/* Block-mounted panels always live in a narrow sidebar; give them the
   stacked item form even without container-query support. */
@supports not (container-type: inline-size) {
	.jvs-panel--block .jvs-item {
		flex-wrap: wrap;
		row-gap: 0.5em;
	}

	.jvs-panel--block .jvs-item__body {
		flex: 1 1 55%;
	}

	.jvs-panel--block .jvs-item__action {
		flex: 1 1 100%;
	}

	.jvs-panel--block .jvs-item__action .jvs-add {
		width: 100%;
		justify-content: center;
	}

	.jvs-panel--block .jvs-item--hero .jvs-item__media img {
		width: 56px;
		height: 56px;
	}
}

/* color-mix fallbacks (older engines). */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.jvs-orb {
		background: var(--jvs-primary);
		box-shadow: 0 0 0 0.22em rgba(109, 74, 255, 0.16);
	}

	.jvs-item--hero,
	.jvs-bundle__item:has(.jvs-bundle__check:checked) {
		border-color: var(--jvs-primary);
	}

	.jvs-panel--bump .jvs-item,
	.jvs-offer,
	.jvs-landing {
		border-color: var(--jvs-primary);
		background: rgba(109, 74, 255, 0.05);
	}

	.jvs-add--select:hover {
		background: rgba(109, 74, 255, 0.08);
	}

	.jvs-progress__fill {
		background: var(--jvs-primary);
	}
}

/* ------------------------------------------------------------------ *
 * 8. States + motion
 * ------------------------------------------------------------------ */

.jvs-panel.is-loading {
	opacity: 0.55;
	pointer-events: none;
}

.jvs-item.is-dismissed {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.jvs-panel .jvs-orb,
	.jvs-add,
	.jvs-progress__fill,
	.jvs-bundle__item {
		animation: none !important;
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 12. Subscription retention dialog (v1.20)
 *     Shown when a customer clicks Cancel on a subscription. One calm
 *     card, one decision: claim the discount or continue cancelling.
 * ------------------------------------------------------------------ */

.jvs-retain {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25em;
	margin: 0;
}

.jvs-retain[hidden] {
	display: none;
}

.jvs-retain__overlay {
	position: absolute;
	inset: 0;
	background: rgba(18, 16, 26, 0.55);
	backdrop-filter: blur(2px);
}

.jvs-retain__card {
	position: relative;
	width: 100%;
	max-width: 26em;
	background: #ffffff;
	color: #1f1d2b;
	border-radius: var(--jvs-radius);
	box-shadow: 0 24px 64px rgba(18, 16, 26, 0.28);
	padding: 2em 1.6em 1.5em;
	text-align: center;
	animation: jvs-retain-in 0.18s ease-out;
}

.jvs-retain__close {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 2em;
	height: 2em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--jvs-muted);
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
}

.jvs-retain__close:hover,
.jvs-retain__close:focus-visible {
	background: rgba(128, 128, 128, 0.12);
	color: inherit;
}

/* The deal is the hero: a ticket-style badge above the title. */
.jvs-retain__badge {
	display: inline-block;
	padding: 0.32em 1em;
	border: 1px dashed color-mix(in srgb, var(--jvs-primary) 50%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--jvs-primary) 8%, #ffffff);
	color: var(--jvs-primary);
	font-weight: 700;
	font-size: 1.1em;
	letter-spacing: 0.01em;
	margin-bottom: 0.9em;
}

.jvs-retain__title {
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.4em;
	text-wrap: balance;
}

.jvs-retain__msg {
	color: var(--jvs-muted);
	margin: 0 auto 1.3em;
	max-width: 34ch;
}

.jvs-retain__accept {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.9em;
	padding: 0.5em 1em;
	border: none;
	border-radius: 999px;
	background: var(--jvs-primary);
	color: var(--jvs-on-primary);
	font-family: inherit;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.jvs-retain__accept:hover:not(:disabled) {
	filter: brightness(1.08);
}

.jvs-retain__accept:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Declining is always available, never shouting. */
.jvs-retain__decline {
	display: inline-block;
	margin-top: 0.9em;
	background: none;
	border: none;
	padding: 0.2em;
	color: var(--jvs-muted);
	font-family: inherit;
	font-size: 0.88em;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.jvs-retain__decline:hover,
.jvs-retain__decline:focus-visible {
	color: inherit;
}

/* Accepted state: quiet confirmation, then back to the subscription. */
.jvs-retain__saved-icon {
	width: 2.6em;
	height: 2.6em;
	margin: 0 auto 0.7em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: color-mix(in srgb, var(--jvs-success) 12%, #ffffff);
	color: var(--jvs-success);
	font-size: 1.2em;
	font-weight: 700;
}

.jvs-retain__error {
	color: var(--jvs-warn);
	font-size: 0.88em;
	margin: 0.8em 0 0;
}

@keyframes jvs-retain-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.97);
	}
}

@media (prefers-reduced-motion: reduce) {
	.jvs-retain__card {
		animation: none;
	}
}

/* Picker close (v1.21.1): the picker replaces the "Choose options" trigger
   while open; this quiet × collapses it back. */
.jvs-variations__cancel {
	flex: 0 0 auto;
	width: 1.8em;
	height: 1.8em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--jvs-muted);
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.jvs-variations__cancel:hover,
.jvs-variations__cancel:focus-visible {
	background: rgba(128, 128, 128, 0.12);
	color: inherit;
}

/* ------------------------------------------------------------------ *
 * 13. Embeddable bundle sets grid (v1.24)
 *     [jovvie_bundles] / the "Jovvie Bundles" block: set cards on any
 *     page, composed from the same design-system primitives.
 * ------------------------------------------------------------------ */

.jvs-sets-embed__heading {
	margin: 0 0 0.8em;
}

.jvs-sets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1em;
}

.jvs-bundle--set {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	margin: 0;
}

.jvs-set__items {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
}

.jvs-set__item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	text-decoration: none;
	color: inherit;
}

.jvs-set__item img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--jvs-radius-sm);
	flex: 0 0 auto;
}

.jvs-set__name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jvs-set__item:hover .jvs-set__name {
	color: var(--jvs-primary);
}

.jvs-set__price {
	flex: 0 0 auto;
	font-size: 0.9em;
	color: var(--jvs-muted);
}

.jvs-set__totals {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: 0.7em;
	border-top: 1px dashed var(--jvs-border);
	font-weight: 700;
}

.jvs-set__price-line del {
	opacity: 0.55;
	font-weight: 400;
	margin-right: 0.35em;
}

.jvs-set__price-line ins {
	text-decoration: none;
}

.jvs-set__add {
	width: 100%;
	min-height: 2.9em;
	justify-content: center;
}

@media (max-width: 500px) {
	.jvs-sets {
		grid-template-columns: 1fr;
	}
}