/* =========================================================================
   Rocket Wishlist — front-end styles
   Refined & theme-adaptive: a token system the host theme can override, with
   colours derived from `currentColor` via color-mix so cards/borders blend into
   ANY light or dark theme. Typography is always inherited. The one branded note
   is the accent heart. Override any --rww-* token in your theme to restyle.
   ========================================================================= */

:root {
	/* Brand accent (the heart). The single intentional colour — override freely;
	   the strong/soft variants derive from it, so setting --rww-accent alone restyles
	   every accented surface (button, popup, badge, dialogs). */
	--rww-accent: #e8344e;
	--rww-accent-strong: color-mix(in srgb, var(--rww-accent) 82%, #000);
	--rww-on-accent: #fff;
	--rww-accent-soft: color-mix(in srgb, var(--rww-accent) 12%, transparent);

	/* Theme-adaptive neutrals: mixed from the inherited text colour so they sit
	   correctly on a white OR a dark theme with no configuration. */
	--rww-border: color-mix(in srgb, currentColor 14%, transparent);
	--rww-border-strong: color-mix(in srgb, currentColor 28%, transparent);
	--rww-surface: color-mix(in srgb, currentColor 3%, transparent);
	--rww-surface-hover: color-mix(in srgb, currentColor 6%, transparent);
	--rww-muted: color-mix(in srgb, currentColor 62%, transparent);

	/* Shape + motion. */
	--rww-radius: 12px;
	--rww-radius-sm: 8px;
	--rww-radius-pill: 999px;
	--rww-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .06);
	--rww-shadow-hover: 0 4px 10px rgba(0, 0, 0, .07), 0 16px 40px rgba(0, 0, 0, .12);
	--rww-shadow-pop: 0 18px 50px rgba(0, 0, 0, .28);
	--rww-ease: cubic-bezier(.22, .61, .36, 1);
	--rww-transition: .22s var(--rww-ease);

	/* Opaque surfaces for floating overlays (toast/modal). */
	--rww-pop-surface: #fff;
	--rww-pop-fg: #16181d;
	--rww-toast-surface: #16181d;
	--rww-toast-fg: #fff;
}

/* ----------------------------- heart button ----------------------------- */
.rww-btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	cursor: pointer;
	border: 1px solid var(--rww-border-strong);
	background: var(--rww-surface);
	border-radius: var(--rww-radius-pill);
	padding: .5em .95em;
	font: inherit;
	line-height: 1;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	transition: background var(--rww-transition), border-color var(--rww-transition), color var(--rww-transition), transform .1s var(--rww-ease);
}

.rww-btn:hover {
	border-color: var(--rww-accent);
	background: var(--rww-accent-soft);
	color: var(--rww-accent);
}

.rww-btn:active { transform: scale(.96); }

.rww-btn.is-active {
	border-color: var(--rww-accent);
	color: var(--rww-accent);
}

.rww-btn__icon {
	position: relative;
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
	align-items: center;
	justify-content: center;
}

.rww-btn__icon::before {
	content: "\2661"; /* outline heart */
	font-size: 1.15em;
	line-height: 1;
	transition: transform var(--rww-transition);
}

.rww-btn.is-active .rww-btn__icon::before {
	content: "\2665"; /* filled heart */
	color: var(--rww-accent);
}

/* Signature: a radiating ring + pop, fired by JS (.rww-burst) on a real click —
   never on silent hydration, so saved-state buttons don't flash on load. */
.rww-btn__icon::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid var(--rww-accent);
	opacity: 0;
	transform: scale(.4);
	pointer-events: none;
}

.rww-btn.rww-burst .rww-btn__icon::before { animation: rww-heart-pop .42s var(--rww-ease); }
.rww-btn.rww-burst .rww-btn__icon::after { animation: rww-heart-ring .55s var(--rww-ease); }

@keyframes rww-heart-pop {
	0% { transform: scale(1); }
	30% { transform: scale(.7); }
	60% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

@keyframes rww-heart-ring {
	0% { opacity: .7; transform: scale(.4); }
	80% { opacity: 0; transform: scale(1.8); }
	100% { opacity: 0; transform: scale(1.8); }
}

.rww-btn.is-loading {
	opacity: .55;
	cursor: progress;
}

.rww-btn:focus-visible {
	outline: 2px solid var(--rww-accent);
	outline-offset: 2px;
}

.rww-btn--icon-only {
	gap: 0;
	padding: .5em;
	aspect-ratio: 1;
	justify-content: center;
}

/* Auto-injected button (page-builder fallback) — give it a little breathing room from the
   add-to-cart it sits beside. */
.rww-btn--injected { margin-top: .5rem; }

/* ----------------------------- app shell ----------------------------- */
.rww-app {
	--rww-cols: 4;
}

.rww-app__title {
	margin: 0 0 .25rem;
}

.rww-app__status {
	color: var(--rww-muted);
	font-size: .95em;
}

/* ----------------------------- list switcher ----------------------------- */
.rww-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin: .75rem 0 1.25rem;
	padding-bottom: .85rem;
	border-bottom: 1px solid var(--rww-border);
}

.rww-switcher__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	flex: 1 1 auto;
}

.rww-switcher__tab {
	border: 1px solid var(--rww-border);
	background: var(--rww-surface);
	border-radius: var(--rww-radius-pill);
	padding: .4em 1em;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	transition: background var(--rww-transition), border-color var(--rww-transition), color var(--rww-transition);
}

.rww-switcher__tab:hover {
	border-color: var(--rww-accent);
	color: var(--rww-accent);
}

.rww-switcher__tab.is-active {
	background: var(--rww-accent);
	border-color: var(--rww-accent);
	color: var(--rww-on-accent);
}

.rww-switcher__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-left: auto; /* push the actions to the right (and onto their own line on mobile). */
}

.rww-switcher__action {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	border: 1px solid var(--rww-border);
	background: var(--rww-surface);
	padding: .45em .85em;
	border-radius: var(--rww-radius-pill);
	font: inherit;
	font-size: .85em;
	line-height: 1;
	color: var(--rww-muted);
	cursor: pointer;
	transition: background var(--rww-transition), border-color var(--rww-transition), color var(--rww-transition), transform .1s var(--rww-ease);
}

.rww-switcher__action::before {
	font-size: 1.05em;
	line-height: 1;
}
.rww-switcher__action--new::before { content: "+"; font-weight: 700; }
.rww-switcher__action--rename::before { content: "\270E"; } /* pencil */
.rww-switcher__action--delete::before { content: "\2715"; } /* ✕ */

.rww-switcher__action:hover {
	border-color: currentColor;
	background: var(--rww-surface-hover);
	color: inherit;
}
.rww-switcher__action:active { transform: scale(.97); }

/* New list = the primary action. */
.rww-switcher__action--new {
	border-color: var(--rww-accent);
	color: var(--rww-accent);
}
.rww-switcher__action--new:hover {
	background: var(--rww-accent);
	border-color: var(--rww-accent);
	color: var(--rww-on-accent);
}

/* Delete reads as destructive on hover. */
.rww-switcher__action--delete:hover {
	border-color: var(--rww-accent);
	color: var(--rww-accent);
}

/* ----------------------------- items: grid ----------------------------- */
.rww-app__items {
	display: grid;
	grid-template-columns: repeat(var(--rww-cols, 4), minmax(0, 1fr));
	gap: 1.1rem;
	margin-top: 1rem;
	padding: 0;
	list-style: none;
}

@media (max-width: 782px) {
	.rww-app__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
}

@media (max-width: 480px) {
	.rww-app__items { grid-template-columns: minmax(0, 1fr); }
}

.rww-item {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rww-border);
	border-radius: var(--rww-radius);
	background: var(--rww-surface);
	padding: .85rem;
	transition: transform var(--rww-transition), box-shadow var(--rww-transition), border-color var(--rww-transition);
	animation: rww-rise .45s var(--rww-ease) both;
}

.rww-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--rww-shadow-hover);
	border-color: var(--rww-border-strong);
}

/* Gentle staggered entrance on load. */
.rww-item:nth-child(1) { animation-delay: .02s; }
.rww-item:nth-child(2) { animation-delay: .06s; }
.rww-item:nth-child(3) { animation-delay: .10s; }
.rww-item:nth-child(4) { animation-delay: .14s; }
.rww-item:nth-child(5) { animation-delay: .18s; }
.rww-item:nth-child(6) { animation-delay: .22s; }
.rww-item:nth-child(7) { animation-delay: .26s; }
.rww-item:nth-child(8) { animation-delay: .30s; }

@keyframes rww-rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.rww-item img {
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: .65rem;
	border-radius: var(--rww-radius-sm);
	aspect-ratio: 1;
	object-fit: cover;
}

.rww-item__name {
	font-weight: 600;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
}

.rww-item__name:hover { color: var(--rww-accent); }

.rww-item__price {
	display: block;
	margin-top: .2rem;
	color: var(--rww-muted);
}

.rww-item__price .amount { color: inherit; font-weight: 600; }

.rww-item__drop {
	display: inline-block;
	align-self: flex-start;
	background: var(--rww-accent);
	color: var(--rww-on-accent);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: .2em .6em;
	border-radius: var(--rww-radius-pill);
	margin: .35rem 0 0;
}

.rww-item__remove {
	position: absolute;
	top: .55rem;
	right: .55rem;
	z-index: 1;
	border: 0;
	background: var(--rww-pop-surface);
	color: #16181d;
	box-shadow: var(--rww-shadow);
	border-radius: 50%;
	width: 1.85em;
	height: 1.85em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transform: scale(.85);
	transition: opacity var(--rww-transition), transform var(--rww-transition), background var(--rww-transition), color var(--rww-transition);
}

.rww-item:hover .rww-item__remove,
.rww-item__remove:focus-visible {
	opacity: 1;
	transform: scale(1);
}

.rww-item__remove:hover {
	background: var(--rww-accent);
	color: var(--rww-on-accent);
}

/* ----------------------------- items: list layout ----------------------------- */
.rww-app__items--list {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.rww-app__items--list .rww-item {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem 1rem;
	padding: .7rem .85rem;
	animation: none;
}

.rww-app__items--list .rww-item:hover { transform: none; }

.rww-app__items--list .rww-item img {
	width: 64px;
	height: 64px;
	margin: 0;
	flex: 0 0 auto;
}

.rww-app__items--list .rww-item__name { flex: 1 1 180px; }
.rww-app__items--list .rww-item__price { margin-top: 0; }

.rww-app__items--list .rww-item__notewrap,
.rww-app__items--list .rww-item__note-ro {
	flex-basis: 100%;
	margin-top: .25rem;
}

.rww-app__items--list .rww-item__remove {
	position: static;
	opacity: 1;
	transform: none;
	box-shadow: none;
	background: var(--rww-surface);
	color: inherit;
	order: 5;
}

.rww-app__items--list .rww-item__cart { margin-top: 0; }

/* ----------------------------- notes ----------------------------- */
.rww-item__notewrap { margin-top: .6rem; width: 100%; }

.rww-item__note-toggle {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: .9em;
	color: var(--rww-muted);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--rww-transition);
}

.rww-item__note-toggle::before {
	content: "\270e"; /* pencil */
	font-size: 1.05em;
}

.rww-item__note-toggle:hover { color: var(--rww-accent); }

.rww-item__note-toggle.has-note {
	color: inherit;
	font-style: italic;
	opacity: .9;
}

.rww-item__note-toggle.has-note::before { content: "\201c"; }

.rww-item__note {
	width: 100%;
	margin-top: .35rem;
	font: inherit;
	color: inherit;
	background: var(--rww-pop-surface);
	border: 1px solid var(--rww-border-strong);
	border-radius: var(--rww-radius-sm);
	padding: .5em;
	box-sizing: border-box;
	resize: vertical;
}

.rww-item__note:focus-visible {
	outline: 2px solid var(--rww-accent);
	outline-offset: 1px;
	border-color: var(--rww-accent);
}

.rww-item__note[hidden] { display: none; }

.rww-item__note-ro {
	margin-top: .5rem;
	font-style: italic;
	color: var(--rww-muted);
}

/* ----------------------------- cart buttons ----------------------------- */
.rww-item__cart,
.rww-item__view,
.rww-app__addall {
	margin-top: .65rem;
	cursor: pointer;
	border: 1px solid var(--rww-border-strong);
	background: var(--rww-surface);
	color: inherit;
	border-radius: var(--rww-radius-pill);
	padding: .5em .9em;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	transition: background var(--rww-transition), border-color var(--rww-transition), color var(--rww-transition), transform .1s var(--rww-ease);
}

.rww-item__cart,
.rww-item__view { margin-top: auto; }

/* These buttons are links — keep them looking like buttons. */
.rww-item__view,
.rww-item__select {
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

.rww-item__cart:hover,
.rww-item__view:hover,
.rww-item__view:focus-visible,
.rww-app__addall:hover {
	border-color: var(--rww-accent);
	background: var(--rww-accent);
	color: var(--rww-on-accent);
}

.rww-item__cart:active,
.rww-item__view:active,
.rww-app__addall:active { transform: scale(.97); }

.rww-app__items--list .rww-item__view { margin-top: 0; }

.rww-app__addall {
	display: inline-flex;
	align-items: center;
	margin: 0 0 1.25rem;
}

.rww-item__cart[disabled] {
	opacity: .55;
	cursor: progress;
}

/* ----------------------------- empty state ----------------------------- */
.rww-app__empty,
.rww-empty {
	text-align: center;
	padding: 3rem 1.25rem;
	border: 1px dashed var(--rww-border-strong);
	border-radius: var(--rww-radius);
	color: var(--rww-muted);
}

.rww-app__empty::before,
.rww-empty::before {
	content: "\2661";
	display: block;
	font-size: 2.75rem;
	color: var(--rww-accent);
	margin-bottom: .5rem;
	line-height: 1;
}

.rww-empty__cta {
	width: auto;
	margin: 1rem auto 0;
	max-width: max-content;
}

/* ----------------------------- share buttons ----------------------------- */
.rww-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--rww-border);
	justify-content: flex-end;
}

.rww-share__label {
	color: var(--rww-muted);
	margin-right: .15rem;
	margin-left: auto;
}

.rww-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	border: 1px solid var(--rww-border);
	background: var(--rww-surface);
	color: inherit;
	text-decoration: none;
	font: inherit;
	cursor: pointer;
	line-height: 1;
	transition: color var(--rww-transition), border-color var(--rww-transition), background var(--rww-transition), transform .12s var(--rww-ease);
}

/* Network buttons are icon-only circles; the "Share wishlist" starter keeps a text pill. */
.rww-share__btn:not(.rww-share__btn--start) {
	width: 2.5em;
	height: 2.5em;
	padding: 0;
	border-radius: 50%;
}

.rww-share__btn--start {
	padding: .5em .9em;
	border-radius: var(--rww-radius-pill);
}

.rww-share__svg {
	width: 1.15em;
	height: 1.15em;
	display: block;
}

.rww-share__btn:hover {
	border-color: currentColor;
	background: var(--rww-surface-hover);
	transform: translateY(-1px);
}

.rww-share__btn:active { transform: scale(.95); }

.rww-share__btn--whatsapp:hover { color: #25d366; border-color: #25d366; }
.rww-share__btn--facebook:hover { color: #1877f2; border-color: #1877f2; }
.rww-share__btn--x:hover { color: currentColor; border-color: currentColor; }
.rww-share__btn--pinterest:hover { color: #e60023; border-color: #e60023; }
.rww-share__btn--email:hover,
.rww-share__btn--copy:hover,
.rww-share__btn--native:hover { color: var(--rww-accent); border-color: var(--rww-accent); }

/* Accessible label hidden from view (themes usually ship this; included as a safe fallback). */
.rww-app .screen-reader-text,
.rww-share .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ----------------------------- table layout ----------------------------- */
.rww-tablewrap {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--rww-border);
	border-radius: var(--rww-radius);
	box-shadow: var(--rww-shadow);
}

.rww-wishtable {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font: inherit;
}

/* The <tbody> uses its own class (never .rww-app__items, which is display:grid) so the table
   keeps native table formatting. Rows are plain <tr class="rww-trow"> — they avoid the
   .rww-item card class so none of its flex/padding/animation can collapse the layout. */
.rww-table__body { display: table-row-group; }

.rww-wishtable thead th {
	text-align: left;
	font-weight: 600;
	font-size: .82em;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rww-muted);
	padding: .9rem 1rem;
	border-bottom: 1px solid var(--rww-border);
	background: var(--rww-surface);
	white-space: nowrap;
}

.rww-wishtable td {
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--rww-border);
	vertical-align: middle;
}

.rww-wishtable tbody tr:last-child td { border-bottom: 0; }
.rww-wishtable tbody tr { transition: background var(--rww-transition); }
.rww-wishtable tbody tr:hover { background: var(--rww-surface); }

.rww-col-check,
.rww-col-remove { width: 1%; white-space: nowrap; text-align: center; }

.rww-col-img { width: 76px; }
.rww-col-img a { display: inline-block; line-height: 0; }
.rww-col-img img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--rww-radius-sm);
	display: block;
	background: var(--rww-surface);
}

.rww-col-name .rww-item__name { font-weight: 600; text-decoration: none; }
.rww-col-name .rww-item__name:hover { color: var(--rww-accent); }
.rww-col-name .rww-item__price { display: block; margin-top: .2rem; color: var(--rww-muted); font-size: .92em; }
.rww-col-name .rww-item__notewrap { margin-top: .4rem; }

.rww-col-date { color: var(--rww-muted); white-space: nowrap; font-size: .92em; }
.rww-col-act { text-align: right; white-space: nowrap; }

/* Remove button reverts to an inline glyph inside its cell (no card hover-reveal). */
.rww-wishtable .rww-item__remove {
	position: static;
	opacity: 1;
	transform: none;
	box-shadow: none;
	background: transparent;
	color: var(--rww-muted);
	width: 1.9em;
	height: 1.9em;
}
.rww-wishtable .rww-item__remove:hover { background: var(--rww-accent); color: var(--rww-on-accent); }

.rww-wishtable .rww-item__cart,
.rww-wishtable .rww-item__view,
.rww-wishtable .rww-item__select { margin: 0; }

.rww-col-empty { text-align: center; padding: 2rem 1rem; }
.rww-col-empty .rww-app__empty { margin: 0; }

.rww-row-check,
input[data-rww-select-all] { width: 1.05em; height: 1.05em; cursor: pointer; }

/* ----------------------------- bulk actions bar ----------------------------- */
.rww-bulk {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1rem;
	border-top: 1px solid var(--rww-border);
	background: var(--rww-surface);
}

.rww-bulk__select {
	font: inherit;
	padding: .45em .7em;
	border: 1px solid var(--rww-border-strong);
	border-radius: var(--rww-radius-sm);
	background: var(--rww-pop-surface);
	color: var(--rww-pop-fg);
	max-width: 220px;
}

.rww-bulk__apply {
	font: inherit;
	cursor: pointer;
	padding: .5em 1.1em;
	border: 1px solid var(--rww-accent);
	border-radius: var(--rww-radius-pill);
	background: transparent;
	color: var(--rww-accent);
	line-height: 1;
	transition: background var(--rww-transition), color var(--rww-transition), transform .1s var(--rww-ease);
}

.rww-bulk__apply:hover { background: var(--rww-accent); color: var(--rww-on-accent); }
.rww-bulk__apply:active { transform: scale(.97); }
.rww-bulk__apply[disabled] { opacity: .6; cursor: default; }

/* On narrow screens each row reflows into a compact card via CSS grid. Rows use the dedicated
   .rww-trow class (never .rww-item), so there's no card/flex conflict to fight. The same grid
   template serves the owner table (check/remove present) and the read-only shared table (those
   cells absent — their min-content columns simply collapse to zero). */
@media (max-width: 600px) {
	.rww-tablewrap { overflow: visible; }
	.rww-wishtable,
	.rww-wishtable tbody { display: block; }
	.rww-wishtable thead { display: none; }

	.rww-wishtable tr.rww-trow {
		display: grid;
		grid-template-columns: min-content 64px 1fr auto min-content;
		grid-template-areas:
			"check img name name remove"
			"check img date act  remove";
		column-gap: .8rem;
		row-gap: .5rem;
		align-items: center;
		padding: 1rem;
		border-bottom: 1px solid var(--rww-border);
	}
	.rww-wishtable tbody tr:last-child.rww-trow { border-bottom: 0; }

	.rww-wishtable td { display: block; padding: 0; border: 0; }
	.rww-col-check  { grid-area: check; }
	.rww-col-img    { grid-area: img; width: auto; }
	.rww-col-name   { grid-area: name; }
	.rww-col-date   { grid-area: date; align-self: center; }
	.rww-col-act    { grid-area: act; text-align: right; align-self: center; }
	.rww-col-remove { grid-area: remove; align-self: start; }

	/* Note sits under the product name, lightly separated; date + action share one row. */
	.rww-col-name .rww-item__notewrap { margin-top: .4rem; }
	.rww-col-act:empty { display: none; }

	.rww-bulk { flex-wrap: wrap; }
}

/* ----------------------------- count badge ----------------------------- */
.rww-count {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	color: inherit;
	line-height: 1;
	text-decoration: none;
}

.rww-count__icon::before {
	content: "\2665";
	font-size: 1.15em;
	color: var(--rww-accent);
}

.rww-count__badge {
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 .4em;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rww-radius-pill);
	background: var(--rww-accent);
	color: var(--rww-on-accent);
	font-size: .72em;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rww-accent) 22%, transparent);
}

.rww-count__badge[hidden] { display: none; }

/* A quick pulse when the count changes (JS toggles .is-bumped). */
.rww-count__badge.is-bumped { animation: rww-badge-pulse .35s var(--rww-ease); }

@keyframes rww-badge-pulse {
	0% { transform: scale(1); }
	45% { transform: scale(1.28); }
	100% { transform: scale(1); }
}

/* ----------------------------- toasts ----------------------------- */
.rww-toasts {
	position: fixed;
	z-index: 100000;
	right: 1.25rem;
	bottom: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	max-width: min(92vw, 380px);
	pointer-events: none;
}

.rww-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .8em 1.1em;
	border-radius: var(--rww-radius-sm);
	background: var(--rww-toast-surface);
	color: var(--rww-toast-fg);
	font-size: .95em;
	line-height: 1.35;
	box-shadow: var(--rww-shadow-pop);
	cursor: pointer;
	opacity: 0;
	transform: translateY(.85rem) scale(.98);
	transition: opacity var(--rww-transition), transform var(--rww-transition);
}

.rww-toast::before {
	content: "\2665";
	color: var(--rww-accent);
	font-size: 1.05em;
	line-height: 1;
}

.rww-toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.rww-toast--error { background: #8a1f25; }
.rww-toast--error::before { content: "\26a0"; color: #ffd7d9; }

.rww-toast__msg { flex: 1 1 auto; }

.rww-toast__action {
	flex: 0 0 auto;
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ----------------------------- modal / popup ----------------------------- */
.rww-modal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(10, 12, 16, .55);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--rww-transition);
}

.rww-modal.is-visible { opacity: 1; }

.rww-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: var(--rww-pop-surface);
	color: var(--rww-pop-fg);
	border-radius: var(--rww-radius);
	padding: 1.75rem 1.5rem 1.5rem;
	box-shadow: var(--rww-shadow-pop);
	text-align: center;
	transform: translateY(1rem) scale(.96);
	transition: transform var(--rww-transition);
}

.rww-modal.is-visible .rww-modal__dialog { transform: translateY(0) scale(1); }

.rww-modal__thumb {
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 auto 1rem;
	object-fit: cover;
	border-radius: var(--rww-radius-sm);
	box-shadow: var(--rww-shadow);
}

.rww-modal__glyph { display: block; margin: 0 auto 1rem; text-align: center; }

.rww-modal__glyph::before {
	content: "\2665";
	font-size: 2.6rem;
	color: var(--rww-accent);
}

.rww-modal__title {
	margin: 0 0 1.25rem;
	font-size: 1.1em;
	line-height: 1.45;
}

.rww-modal__title strong { font-weight: 700; }

.rww-modal__list {
	margin: 0 0 1.25rem;
	font-size: .9em;
	color: color-mix(in srgb, var(--rww-pop-fg) 60%, transparent);
}

.rww-modal__list-select {
	margin-left: .35rem;
	max-width: 60%;
	padding: .3rem 1.6rem .3rem .55rem;
	border: 1px solid color-mix(in srgb, var(--rww-pop-fg) 22%, transparent);
	border-radius: var(--rww-radius-sm);
	background: var(--rww-pop-surface);
	color: var(--rww-pop-fg);
	font: inherit;
	cursor: pointer;
}

.rww-modal__list-select:disabled { opacity: .6; cursor: default; }

.rww-modal__actions {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.rww-turnstile {
	display: flex;
	justify-content: center;
	min-height: 65px;
	margin-top: .5rem;
}

.rww-modal__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	padding: .8em 1em;
	border: 1px solid var(--rww-accent);
	border-radius: var(--rww-radius-pill);
	background: var(--rww-pop-surface);
	color: var(--rww-accent);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--rww-transition), color var(--rww-transition), transform .1s var(--rww-ease);
}

.rww-modal__view { background: var(--rww-accent); color: var(--rww-on-accent); }

.rww-modal__btn:hover,
.rww-modal__btn:focus-visible {
	background: var(--rww-accent-strong);
	border-color: var(--rww-accent-strong);
	color: var(--rww-on-accent);
}

.rww-modal__close {
	border-color: color-mix(in srgb, var(--rww-pop-fg) 18%, transparent);
	color: var(--rww-pop-fg);
}

.rww-modal__close:hover,
.rww-modal__close:focus-visible {
	background: color-mix(in srgb, var(--rww-pop-fg) 8%, transparent);
	border-color: color-mix(in srgb, var(--rww-pop-fg) 30%, transparent);
	color: var(--rww-pop-fg);
}

.rww-modal__btn:active { transform: scale(.98); }

/* ----------------------------- prompt / confirm dialogs ----------------------------- */
.rww-modal__dialog--form { text-align: left; }

.rww-modal__heading {
	margin: 0 0 .85rem;
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--rww-pop-fg);
}

.rww-modal__message {
	margin: 0 0 1.35rem;
	font-size: .95em;
	line-height: 1.5;
	color: color-mix(in srgb, var(--rww-pop-fg) 75%, transparent);
}

.rww-modal__input {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 1.35rem;
	padding: .7em .85em;
	border: 1px solid color-mix(in srgb, var(--rww-pop-fg) 22%, transparent);
	border-radius: var(--rww-radius-sm);
	background: var(--rww-pop-surface);
	color: var(--rww-pop-fg);
	font: inherit;
}

.rww-modal__input:focus {
	outline: none;
	border-color: var(--rww-accent);
	box-shadow: 0 0 0 3px var(--rww-accent-soft);
}

.rww-modal__input[readonly] { cursor: text; opacity: .85; }

.rww-modal__actions--row {
	flex-direction: row;
	justify-content: flex-end;
}

.rww-modal__actions--row .rww-modal__btn { width: auto; min-width: 6.5rem; }

.rww-modal__btn--primary {
	background: var(--rww-accent);
	border-color: var(--rww-accent);
	color: var(--rww-on-accent);
}

.rww-modal__btn--primary:hover,
.rww-modal__btn--primary:focus-visible {
	background: var(--rww-accent-strong);
	border-color: var(--rww-accent-strong);
	color: var(--rww-on-accent);
}

.rww-modal__btn--ghost {
	background: var(--rww-pop-surface);
	border-color: color-mix(in srgb, var(--rww-pop-fg) 18%, transparent);
	color: var(--rww-pop-fg);
}

.rww-modal__btn--ghost:hover,
.rww-modal__btn--ghost:focus-visible {
	background: color-mix(in srgb, var(--rww-pop-fg) 8%, transparent);
	border-color: color-mix(in srgb, var(--rww-pop-fg) 30%, transparent);
	color: var(--rww-pop-fg);
}

.rww-modal__btn--danger {
	background: var(--rww-accent-strong);
	border-color: var(--rww-accent-strong);
	color: var(--rww-on-accent);
}

.rww-modal__btn--danger:hover,
.rww-modal__btn--danger:focus-visible {
	background: color-mix(in srgb, var(--rww-accent-strong) 82%, #000);
	border-color: color-mix(in srgb, var(--rww-accent-strong) 82%, #000);
	color: var(--rww-on-accent);
}

.rww-ico--heart::before { content: "\2665"; font-size: 1.1em; }
.rww-ico--x::before { content: "\00d7"; font-size: 1.3em; line-height: 1; }

/* ----------------------------- alert opt-in ----------------------------- */
.rww-alerts {
	display: flex;
	gap: .75rem;
	align-items: flex-start;
	margin: 0 0 1.5rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--rww-border);
	border-radius: var(--rww-radius);
	background: var(--rww-accent-soft);
}

.rww-alerts__icon::before {
	content: "\1F514"; /* bell */
	font-size: 1.2rem;
	line-height: 1.4;
}

.rww-alerts__body { flex: 1 1 auto; min-width: 0; }

.rww-alerts__label {
	display: block;
	margin-bottom: .55rem;
	font-weight: 600;
	font-size: .95em;
}

.rww-alerts__form {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.rww-alerts__input {
	flex: 1 1 180px;
	min-width: 0;
	padding: .55em .75em;
	border: 1px solid var(--rww-border-strong);
	border-radius: var(--rww-radius-sm);
	background: var(--rww-pop-surface);
	color: var(--rww-pop-fg);
	font: inherit;
}

.rww-alerts__input:focus {
	outline: none;
	border-color: var(--rww-accent);
	box-shadow: 0 0 0 3px var(--rww-accent-soft);
}

.rww-alerts__btn {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid var(--rww-accent);
	background: var(--rww-accent);
	color: var(--rww-on-accent);
	border-radius: var(--rww-radius-pill);
	padding: .55em 1.1em;
	font: inherit;
	font-weight: 700;
	transition: background var(--rww-transition), transform .1s var(--rww-ease);
}

.rww-alerts__btn:hover,
.rww-alerts__btn:focus-visible { background: var(--rww-accent-strong); border-color: var(--rww-accent-strong); }
.rww-alerts__btn:active { transform: scale(.97); }
.rww-alerts__btn[disabled] { opacity: .6; cursor: progress; }

.rww-alerts__done { margin: 0; font-weight: 600; }

.rww-alerts__check {
	display: flex;
	align-items: center;
	gap: .55rem;
	font-weight: 600;
	font-size: .95em;
	cursor: pointer;
}

.rww-alerts__check input { flex: 0 0 auto; }

/* ----------------------------- social proof ----------------------------- */
.rww-social-proof {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	margin: .5em 0;
	font-size: .9em;
	color: var(--rww-muted);
}

.rww-social-proof__icon::before {
	content: "\2665";
	color: var(--rww-accent);
	font-size: 1.05em;
}

/* ----------------------------- gift registry ----------------------------- */
/* Reserve-dialog newsletter consent row (separate, unchecked opt-in). */
.rww-modal__consent {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: .2rem 0 .2rem;
	font-size: .88em;
	line-height: 1.35;
	color: var(--rww-muted);
	cursor: pointer;
}

.rww-modal__consent input {
	margin: .15em 0 0;
	flex: 0 0 auto;
}

/* Shared-view intro line. */
.rww-registry__intro {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	border: 1px solid var(--rww-border);
	border-radius: var(--rww-radius-sm);
	background: var(--rww-accent-soft);
	font-size: .9em;
}

/* Per-item reserve control on the shared registry view. */
.rww-reserve {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .65rem;
	margin-top: .65rem;
	width: 100%;
}

.rww-app__items--list .rww-reserve { margin-top: .5rem; }

.rww-reserve__status {
	font-size: .82em;
	font-weight: 600;
	color: var(--rww-muted);
}

.rww-reserve__btn {
	cursor: pointer;
	border: 1px solid var(--rww-border-strong);
	background: var(--rww-surface);
	color: inherit;
	border-radius: var(--rww-radius-pill);
	padding: .4rem .9rem;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.2;
	transition: var(--rww-transition);
}

.rww-reserve__btn:hover,
.rww-reserve__btn:focus-visible {
	border-color: var(--rww-accent);
	background: var(--rww-accent);
	color: var(--rww-on-accent);
}

.rww-reserve__btn:active { transform: scale(.97); }

/* The giver's own reservation: a quiet "I changed my mind" affordance. */
.rww-reserve__btn.is-mine {
	border-color: var(--rww-accent);
	background: var(--rww-accent-soft);
	color: inherit;
}

.rww-reserve__btn.is-mine:hover,
.rww-reserve__btn.is-mine:focus-visible {
	background: var(--rww-accent);
	color: var(--rww-on-accent);
}

.rww-reserve__btn[disabled] {
	opacity: .55;
	cursor: default;
	border-color: var(--rww-border);
	background: var(--rww-surface);
	color: var(--rww-muted);
}

.rww-reserve__btn[disabled]:hover { background: var(--rww-surface); color: var(--rww-muted); }

/* Owner-side "N reserved" badge on each item. */
.rww-item__reserved:not(:empty) {
	display: inline-block;
	align-self: flex-start;
	margin-top: .35rem;
	padding: .12em .55em;
	border-radius: var(--rww-radius-pill);
	background: var(--rww-accent-soft);
	color: var(--rww-accent-strong);
	font-size: .74em;
	font-weight: 700;
	letter-spacing: .01em;
}

.rww-item__reserved.is-full:not(:empty) {
	background: var(--rww-accent);
	color: var(--rww-on-accent);
}

/* Owner-page "Gift registry mode" toggle + badge. */
.rww-registry-toggle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .8rem;
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	border: 1px solid var(--rww-border);
	border-radius: var(--rww-radius-sm);
	background: var(--rww-surface);
}

.rww-registry-toggle__label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	cursor: pointer;
	font-weight: 600;
}

.rww-registry-toggle__badge {
	display: inline-block;
	padding: .12em .6em;
	border-radius: var(--rww-radius-pill);
	background: var(--rww-accent);
	color: var(--rww-on-accent);
	font-size: .72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.rww-registry-toggle__hint {
	flex-basis: 100%;
	margin: 0;
	font-size: .82em;
	color: var(--rww-muted);
}

/* ----------------------------- empty-state actions ----------------------------- */
/* Buttons shown when a list is empty (incl. after deleting your last list): a way to make a
   new list plus the browse-shop link. Without the New button there'd be no way back to a list. */
.rww-app__empty-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin-top: 1rem;
}

.rww-empty__new {
	border: 0;
	cursor: pointer;
}

/* ----------------------------- theme & page-builder armor ----------------------------- */
/* Page builders (Elementor, Divi) and some themes ship contextual resets such as
   `.elementor a` / `.elementor button` (specificity 0,1,1) that outrank our single-class
   component styles (0,1,0) and re-skin our controls with the theme's button look. We re-assert
   the essentials at raised specificity — `.rww-app …` (0,2,0) for in-app controls, a doubled
   class for the loose heart/count — and the stylesheet is enqueued late so equal-specificity
   ties resolve in our favour. Values mirror each component's own rule above. */

/* Universal: a theme must never give our buttons an appearance, underline or shadow. */
.rww-app .rww-share__btn,
.rww-app .rww-item__cart,
.rww-app .rww-item__view,
.rww-app .rww-item__select,
.rww-app .rww-item__note-toggle,
.rww-app .rww-item__remove,
.rww-app .rww-reserve__btn,
.rww-app .rww-app__addall,
.rww-app .rww-bulk__apply,
.rww-app .rww-switcher__tab,
.rww-app .rww-switcher__action,
.rww-app .rww-empty__new,
.rww-app .rww-empty__cta,
.rww-btn.rww-btn,
.rww-count.rww-count {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	text-transform: none;
}

/* Share buttons (links, the most exposed to `a` resets): restore surface + circle identity. */
.rww-app .rww-share__btn {
	border: 1px solid var(--rww-border);
	background: var(--rww-surface);
	color: inherit;
	font: inherit;
	line-height: 1;
}

.rww-app .rww-share__btn:not(.rww-share__btn--start) {
	width: 2.5em;
	height: 2.5em;
	padding: 0;
	border-radius: 50%;
}

/* Add-note toggle: a plain text affordance, never a themed button box. */
.rww-app .rww-item__note-toggle {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rww-muted);
	font: inherit;
	font-size: .9em;
}

/* Reserve button keeps its pill identity against theme button skins. */
.rww-app .rww-reserve__btn {
	border: 1px solid var(--rww-border-strong);
	background: var(--rww-surface);
	color: inherit;
	font: inherit;
	font-size: .85em;
	font-weight: 600;
	border-radius: var(--rww-radius-pill);
}

/* The loose heart + count render inside theme/builder content, so double-class to outrank
   `.elementor`-style ancestor selectors and keep their own look. */
.rww-btn.rww-btn {
	border: 1px solid var(--rww-border-strong);
	background: var(--rww-surface);
	color: inherit;
	font: inherit;
	border-radius: var(--rww-radius-pill);
}

.rww-count.rww-count {
	color: inherit;
	text-decoration: none;
}

/* ----------------------------- reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rww-item,
	.rww-toast,
	.rww-modal,
	.rww-modal__dialog,
	.rww-btn__icon::before,
	.rww-btn__icon::after {
		animation: none !important;
		transition: none !important;
	}
}