/**
 * Beyond Woo — Frontend styles (v1.1.0).
 *
 * Design system: tekFlip base brief + storefront guideline.
 * - Monochrome; borders (not shadows) define edges.
 * - Pill semantics: outline = available, FILLED BLACK = active.
 * - Motion 0.16s ease; reduced-motion kill switch.
 * - All classes bw- prefixed and scoped; nothing leaks into the theme.
 *
 * v1.1.0:
 * - Functional green accent (--bw-drop) for price drops ONLY — a
 *   deliberate, documented exception to the monochrome rule.
 * - Wishlist page: dark statement hero + chips + move-all, 2/3/5 grid,
 *   status pills, added-ago labels, drop lines.
 * - Compare page: dark hero, differences toggle, section headers,
 *   same/diff/best value weighting, computed pills, verdict panel.
 * - Page-level hover effects are wrapped in @media (hover: hover) so
 *   touch devices never see them (buttons/counters intentionally
 *   untouched — their sections are byte-identical to 1.0.x).
 *
 * The three --bw-* colors are injected inline from admin settings;
 * values below are fallbacks. Derived tokens live here.
 */

:root {
	--bw-ink: #020202;
	--bw-canvas: #f4f4f3;
	--bw-muted: #6d6d6d;

	/* Derived (base brief: hairlines from ink at .10 / .17 alpha). */
	--bw-card: #ffffff;
	--bw-line: rgba(2, 2, 2, 0.10);
	--bw-line-strong: rgba(2, 2, 2, 0.17);
	--bw-hi: #f5f5f5;
	--bw-lo: #a2a2a2;               /* muted text on dark surfaces */

	--bw-r: 16px;
	--bw-r-sm: 12px;
	--bw-pill: 999px;
	--bw-speed: 0.16s;

	/* v1.0.3 — button icon hover animations (tekFlip v8 reference). */
	--bw-beat-speed: 0.9s;
	--bw-shuttle-speed: 1s;

	/* v1.1.0 — price-drop accent (the ONE functional color exception).
	   Light-surface green ≈ Woo success; brighter variant for dark bands. */
	--bw-drop: #0f834d;
	--bw-drop-ondark: #7ee2a8;
}

/* =========================================================================
 * BUTTON — [bw_wishlist_button] / [bw_compare_button]
 * Neutral (server-rendered) = outline "available" pill.
 * .is-active (JS hydrated)  = filled black "active" pill.
 * ====================================================================== */

.bw-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 0;
	padding: 9px 16px;
	background: var(--bw-card);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-pill);
	color: var(--bw-ink);
	font: 600 0.8rem/1 inherit;
	font-family: inherit;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background var(--bw-speed) ease,
		color var(--bw-speed) ease,
		border-color var(--bw-speed) ease;
}

.bw-btn:hover {
	border-color: var(--bw-line-strong);
}

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

/* Active = filled black (pill semantics: treatment carries meaning). */
.bw-btn.is-active {
	background: var(--bw-ink);
	border-color: var(--bw-ink);
	color: var(--bw-hi);
}

/* In-flight AJAX. */
.bw-btn.is-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* ---- Icons: both states rendered, visibility flipped by .is-active ---- */

.bw-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
}

.bw-btn__icon svg,
.bw-btn__icon .bw-icon-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/*
 * No forced fill here: a CSS fill rule overrides the SVG's own
 * fill="none", which solid-filled the stroke-based outline icons
 * (the add-state heart looked like the filled counter heart).
 * The shipped SVGs already use currentColor for their fills and
 * strokes, so color inheritance still recolors them.
 */

.bw-btn__icon--added { display: none; }
.bw-btn.is-active .bw-btn__icon--add { display: none; }
.bw-btn.is-active .bw-btn__icon--added { display: inline-flex; }

/* ---- Texts: same flip ---- */

.bw-btn__text { white-space: nowrap; }

.bw-btn__text--added { display: none; }
.bw-btn.is-active .bw-btn__text--add { display: none; }
.bw-btn.is-active .bw-btn__text--added { display: inline; }

/* ---- Display mode: icon-only = 32px circle (storefront guideline).
        Size overrides (e.g. 48px beside a PDP CTA) belong to the user's
        custom class via the shortcode class attribute. ---- */

.bw-btn.bw-display-icon {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
}

.bw-btn.bw-display-icon .bw-btn__icon {
	width: 15px;
	height: 15px;
}

/* =========================================================================
 * COUNTER — [bw_wishlist_counter] / [bw_compare_counter]
 * Icon + small circular count badge. Dark-header ready: badge is a light
 * pill (inverted), matching the header cart-count pattern.
 * ====================================================================== */

.bw-counter {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: inherit;
	text-decoration: none;
}

.bw-counter:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: var(--bw-r-sm);
}

.bw-counter__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.bw-counter__icon svg,
.bw-counter__icon .bw-icon-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

/* Badge: light pill with dark text — reads correctly on the dark header.
   On light surfaces, add a custom class to invert if ever needed. */
.bw-counter__badge {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bw-hi);
	color: var(--bw-ink);
	border-radius: var(--bw-pill);
	font: 700 0.62rem/1 inherit;
	font-family: inherit;
	letter-spacing: 0;
}

/* =========================================================================
 * v1.0.3 — BUTTON ICON HOVER ANIMATIONS (tekFlip v8 reference)
 * The old position-lift hover is removed from buttons AND counters;
 * motion now lives only in the button ICONS:
 *   wishlist (both states)  → heartbeat loop
 *   compare, add state      → gentle horizontal shuttle loop
 *   compare, added state    → calm one-shot micro-lift
 * Counters have no hover animation at all.
 * ====================================================================== */

@keyframes bw-beat {
	0%, 100% { transform: scale(1); }
	30%      { transform: scale(1.14); }
	55%      { transform: scale(0.96); }
	75%      { transform: scale(1.06); }
}

@keyframes bw-shuttle {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(1.5px); }
	75%      { transform: translateX(-1.5px); }
}

/* Wishlist: heartbeat on hover, both states (add + added). */
.bw-btn--wishlist:hover .bw-btn__icon svg,
.bw-btn--wishlist:hover .bw-btn__icon .bw-icon-img,
.bw-btn--wishlist:hover .bw-btn__icon i {
	animation: bw-beat var(--bw-beat-speed) ease-in-out infinite;
	transform-origin: center;
}

/* Compare, add state: gentle shuttle on hover. */
.bw-btn--compare:hover .bw-btn__icon--add svg,
.bw-btn--compare:hover .bw-btn__icon--add .bw-icon-img,
.bw-btn--compare:hover .bw-btn__icon--add i {
	animation: bw-shuttle var(--bw-shuttle-speed) ease-in-out infinite;
}

/* Compare, added state: calm micro-lift (transition, not a loop). */
.bw-btn--compare .bw-btn__icon--added svg,
.bw-btn--compare .bw-btn__icon--added .bw-icon-img,
.bw-btn--compare .bw-btn__icon--added i {
	transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.bw-btn--compare:hover .bw-btn__icon--added svg,
.bw-btn--compare:hover .bw-btn__icon--added .bw-icon-img,
.bw-btn--compare:hover .bw-btn__icon--added i {
	transform: scale(1.06);
}

/* =========================================================================
 * TOAST — light card grammar (18px radius, hairline, ink text, arrow link)
 * ====================================================================== */

.bw-toasts {
	position: fixed;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
	max-width: min(340px, calc(100vw - 32px));
}

.bw-toasts--top-left      { top: 16px;    left: 16px; }
.bw-toasts--top-center    { top: 16px;    left: 50%; transform: translateX(-50%); align-items: center; }
.bw-toasts--top-right     { top: 16px;    right: 16px; align-items: flex-end; }
.bw-toasts--bottom-left   { bottom: 16px; left: 16px; }
.bw-toasts--bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); align-items: center; }
.bw-toasts--bottom-right  { bottom: 16px; right: 16px; align-items: flex-end; }

.bw-toast {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--bw-card);
	border: 1px solid var(--bw-line-strong);
	border-radius: 18px;
	color: var(--bw-ink);
	font-size: 0.82rem;
	line-height: 1.45;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--bw-speed) ease, transform var(--bw-speed) ease;
}

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

.bw-toast__msg {
	font-weight: 500;
}

.bw-toast__link {
	flex: 0 0 auto;
	color: var(--bw-ink);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid var(--bw-line-strong);
	transition: border-color var(--bw-speed) ease;
}

.bw-toast__link:hover {
	border-color: var(--bw-ink);
}

.bw-toast__link:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

/* =========================================================================
 * REDUCED MOTION — mandatory kill switch (base brief §7)
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.bw-btn,
	.bw-toast,
	.bw-toast__link,
	.bw-btn__icon svg,
	.bw-btn__icon .bw-icon-img,
	.bw-btn__icon i {
		transition: none;
		animation: none;
	}

	.bw-btn--compare:hover .bw-btn__icon--added svg,
	.bw-btn--compare:hover .bw-btn__icon--added .bw-icon-img,
	.bw-btn--compare:hover .bw-btn__icon--added i {
		transform: none;
	}
}

/* =========================================================================
 * v1.1.0 — SHARED PAGE VOCABULARY
 * Dark statement bands (wishlist + compare heroes, verdict), chips,
 * inverted primary button, arrow CTA. All on the "mixed surfaces" rule:
 * dark panels over the light page, filled buttons invert on dark.
 * ====================================================================== */

.bw-wl-hero,
.bw-cmp-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	padding: clamp(22px, 4vw, 32px) clamp(20px, 4vw, 32px);
	background: var(--bw-ink);
	border-radius: 18px;
	color: var(--bw-hi);
}

/* Text side of the band — allow shrinking so long titles wrap, not overflow. */
.bw-wl-hero__main,
.bw-cmp-hero__main {
	min-width: 0;
}

.bw-wl-hero__eyebrow,
.bw-cmp-hero__eyebrow {
	margin: 0 0 8px;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-lo);
}

.bw-wl-hero__title,
.bw-cmp-hero__title {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--bw-hi);
}

.bw-wl-hero__fade,
.bw-cmp-hero__fade {
	color: var(--bw-lo);
	font-weight: 700;
}

/* Chips (hero stats). */
.bw-wl-hero__chips,
.bw-cmp-hero__chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}

.bw-cmp-hero__chips { margin-top: 0; }

.bw-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	max-width: 100%;
	padding: 7px 13px;
	border: 1px solid rgba(245, 245, 245, 0.2);
	border-radius: var(--bw-pill);
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--bw-lo);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bw-chip b {
	font-weight: 700;
	color: var(--bw-hi);
	letter-spacing: -0.01em;
}

/* Price drops earned their color (Q12: functional green, drops only). */
.bw-chip--drop {
	border-color: rgba(126, 226, 168, 0.45);
	color: var(--bw-drop-ondark);
}

.bw-chip--drop b { color: var(--bw-drop-ondark); }

/* Woo price spans inside chips inherit the chip color. */
.bw-chip .woocommerce-Price-amount { color: inherit; }

/* Hero action column. */
.bw-wl-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

@media (max-width: 640px) {
	.bw-wl-hero__actions {
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Inverted primary — white pill on the dark band. */
.bw-btn-inv {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	background: var(--bw-hi);
	border: 1px solid var(--bw-hi);
	border-radius: var(--bw-pill);
	color: var(--bw-ink);
	font-size: 0.78rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: opacity var(--bw-speed) ease;
}

.bw-btn-inv:focus-visible {
	outline: 2px solid var(--bw-hi);
	outline-offset: 2px;
}

.bw-btn-inv.is-busy,
.bw-btn-inv:disabled {
	opacity: 0.55;
	pointer-events: none;
}

/* Arrow CTA (lives on dark bands). */
.bw-arrow-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--bw-hi);
	text-decoration: none;
}

.bw-arrow-cta:focus-visible {
	outline: 2px solid var(--bw-hi);
	outline-offset: 2px;
}

.bw-arrow-cta__arr {
	transition: transform var(--bw-speed) ease;
}

@media (hover: hover) {
	.bw-btn-inv:hover { opacity: 0.88; color: var(--bw-ink); }
	.bw-arrow-cta:hover { color: var(--bw-hi); }
	.bw-arrow-cta:hover .bw-arrow-cta__arr { transform: translateX(3px); }
}

/* =========================================================================
 * WISHLIST PAGE (v1.1.0)
 * Hero + toolbar-free grid. Grid columns per spec: 2 mobile · 3 tablet ·
 * 5 desktop. All hover effects live behind (hover: hover).
 * ====================================================================== */

.bw-wishlist {
	width: 100%;
}

/* Filled region: hero + grid together. The existing JS hides this whole
   wrapper ([data-bw-wishlist-grid]) when the last card leaves. */
.bw-wl__filled {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Card grid — Q7: 2-up mobile, 3-up tablet, 5-up desktop. */
.bw-wl__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

@media (min-width: 768px) {
	.bw-wl__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
}

@media (min-width: 1200px) {
	.bw-wl__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;
	}
}

/* Legacy-markup safety net: if a page cache serves pre-1.1.0 wishlist HTML
   against this stylesheet, the old grid class still lays out sanely
   (the 1.0.x column map) instead of collapsing to one broken column. */
.bw-wishlist__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

@media (min-width: 640px) {
	.bw-wishlist__grid { gap: 20px; }
}

@media (min-width: 1024px) {
	.bw-wishlist__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1280px) {
	.bw-wishlist__grid { grid-template-columns: repeat(4, 1fr); }
}

.bw-wishlist__grid[hidden] { display: none !important; }

/* ---- The one card ---- */

.bw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	background: var(--bw-card);
	border: 1px solid var(--bw-line);
	border-radius: 18px;
	transition: transform var(--bw-speed) ease,
		border-color var(--bw-speed) ease,
		opacity 0.2s ease;
}

.bw-card.is-leaving {
	opacity: 0;
	transform: scale(0.96);
	pointer-events: none;
}

/* Remove icon — 32px hairline circle, top-right of the card. */
.bw-card__remove {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--bw-card);
	border: 1px solid var(--bw-line);
	border-radius: 50%;
	color: var(--bw-ink);
	cursor: pointer;
	transition: background var(--bw-speed) ease,
		color var(--bw-speed) ease,
		border-color var(--bw-speed) ease;
}

.bw-card__remove svg {
	width: 13px;
	height: 13px;
}

.bw-card__remove:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

/* Image well — white, hairline, 1:1, contain-fit with breathing room. */
.bw-card__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	background: #ffffff;
	border: 1px solid var(--bw-line);
	border-radius: 12px;
	overflow: hidden;
}

.bw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 7%;
	box-sizing: border-box;
	display: block;
}

/* Status pill on the image — one slot (Q11): "Price dropped" wins,
   otherwise "In stock" outline. Out-of-stock shows no image pill. */
.bw-pill {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: var(--bw-pill);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1;
}

.bw-pill--outline {
	background: var(--bw-card);
	border: 1px solid var(--bw-line-strong);
	color: var(--bw-ink);
}

.bw-pill--drop {
	background: var(--bw-drop);
	border: 1px solid var(--bw-drop);
	color: #ffffff;
}

.bw-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1 auto;
}

/* "Added X ago" micro-label. */
.bw-card__meta {
	margin: 0;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bw-muted);
}

/* Title — UI 600, sentence case, 2-line clamp. */
.bw-card__title {
	color: var(--bw-ink);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Price — 700, strike-through original in muted. */
.bw-card__price {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--bw-ink);
	letter-spacing: -0.01em;
}

.bw-card__price del {
	color: var(--bw-muted);
	font-weight: 500;
	margin-inline-start: 6px;
}

.bw-card__price ins {
	text-decoration: none;
}

/* Price-drop line — the functional green (Q12). */
.bw-card__droptext {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--bw-drop);
	line-height: 1.4;
}

.bw-card__droptext .woocommerce-Price-amount { color: inherit; }

.bw-card__stock {
	font-size: 0.72rem;
	color: var(--bw-muted);
}

/* Out-of-stock treatment: card mutes itself; action shows Stock Out. */
.bw-card.is-out .bw-card__title,
.bw-card.is-out .bw-card__price {
	color: var(--bw-muted);
}

.bw-card.is-out .bw-card__media img {
	opacity: 0.55;
}

/* Action slot — restyle Woo's hook button to the black pill. */
.bw-card__action {
	margin-top: auto;
	padding-top: 4px;
}

.bw-card__action .button,
.bw-card__action .add_to_cart_button,
.bw-card__action .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 16px;
	background: var(--bw-ink);
	border: 1px solid var(--bw-ink);
	border-radius: var(--bw-pill);
	color: var(--bw-hi);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--bw-speed) ease;
}

.bw-card__action .button.loading {
	opacity: 0.55;
	pointer-events: none;
}

/* Woo's post-add "View cart" link is redundant here — the card leaves. */
.bw-card__action .added_to_cart {
	display: none;
}

/* Stock Out — soft grey inert pill (pill semantics: soft = inert). */
.bw-card__stockout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 11px 16px;
	background: var(--bw-canvas);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-pill);
	color: var(--bw-muted);
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1;
}

/* Wishlist hover effects — hover-capable devices only (Q7). */
@media (hover: hover) {
	.bw-card:hover {
		transform: translateY(-2px);
		border-color: var(--bw-line-strong);
	}

	.bw-card__remove:hover {
		background: var(--bw-ink);
		border-color: var(--bw-ink);
		color: var(--bw-hi);
	}

	.bw-card__title:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.bw-card__action .button:hover,
	.bw-card__action .add_to_cart_button:hover {
		opacity: 0.85;
		color: var(--bw-hi);
	}
}

/* ---- Empty state holder + login prompt ---- */

.bw-page-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 0;
}

/*
 * The hidden attribute only maps to the browser's default display:none —
 * any author display rule (like the flex/grid above) overrides it. These
 * guards restore hidden's meaning for the toggled wishlist regions.
 * Attribute-based so they hold for the v1.1.0 wrapper and any older markup.
 */
.bw-page-empty[hidden],
[data-bw-wishlist-grid][hidden] {
	display: none !important;
}

.bw-login-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	background: var(--bw-ink);
	border-radius: var(--bw-pill);
	color: var(--bw-hi);
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	transition: opacity var(--bw-speed) ease;
}

.bw-login-cta:hover {
	opacity: 0.85;
	color: var(--bw-hi);
}

.bw-login-cta:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

/* =========================================================================
 * SHIPPED WISHLIST EMPTY STATE (author design — untouched)
 * ====================================================================== */

.wishlist-empty {
	--accent: #111111;
	--ghost-bg: #fafafa;
	--ghost-border: #d9d9d9;
	--skeleton: #ebebeb;
	--ink: #111111;
	--muted: #888888;
	--radius: 14px;
	--sweep: rgba(255, 255, 255, 0.7);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 48px 20px;
	box-sizing: border-box;
	color: var(--ink);
}

.wishlist-empty * { box-sizing: border-box; }

.wishlist-empty__heart {
	width: 48px;
	height: 48px;
	min-width: 48px;
	min-height: 48px;
	flex-shrink: 0;
	margin: 0 auto 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #ff4d4f;
	animation: wish-beat 2.4s ease-out infinite;
}

.wishlist-empty__heart svg { width: 30px; height: 30px; }

.wishlist-empty .rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 30px;
	width: 100%;
	max-width: 320px;
}

.wishlist-empty .row {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px;
	text-align: left;
	background: var(--ghost-bg);
	border: 1.5px dashed var(--ghost-border);
	border-radius: var(--radius);
	animation: wish-float 4s ease-in-out infinite;
}

.wishlist-empty .row:nth-child(2) { animation-delay: -2s; }

.wishlist-empty .row::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, var(--sweep) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: wish-sweep 3.6s ease-in-out infinite;
}

.wishlist-empty .row:nth-child(2)::after { animation-delay: 1.8s; }

.wishlist-empty .thumb {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--skeleton);
}

.wishlist-empty .lines { flex: 1 1 auto; min-width: 0; }

.wishlist-empty .bar {
	height: 8px;
	border-radius: 99px;
	background: var(--skeleton);
}

.wishlist-empty .bar.long { width: 80%; margin-bottom: 9px; }
.wishlist-empty .bar.short { width: 45%; }

.wishlist-empty__title {
	font-size: 19px;
	font-weight: 650;
	margin: 0 0 8px;
}

.wishlist-empty__text {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--muted);
	margin: 0 auto;
	max-width: 300px;
}

@keyframes wish-beat {
	0%, 100% { transform: scale(1); }
	12% { transform: scale(1.14); }
	24% { transform: scale(1); }
	36% { transform: scale(1.08); }
	48% { transform: scale(1); }
}

@keyframes wish-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@keyframes wish-sweep {
	0% { transform: translateX(-120%); }
	55%, 100% { transform: translateX(120%); }
}

@media (max-width: 480px) {
	.wishlist-empty { padding: 32px 16px; }
	.wishlist-empty__title { font-size: 20px; }
	.wishlist-empty__text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.bw-card,
	.bw-card__remove,
	.bw-card__action .button,
	.bw-login-cta,
	.bw-btn-inv,
	.bw-arrow-cta__arr {
		transition: none;
	}

	.bw-card:hover { transform: none; }
	.bw-arrow-cta:hover .bw-arrow-cta__arr { transform: none; }

	.wishlist-empty__heart,
	.wishlist-empty .row,
	.wishlist-empty .row::after { animation: none; }

	.wishlist-empty .row::after { display: none; }
}

/* =========================================================================
 * COMPARE PAGE
 * One scroll container: header cards sticky TOP, label column sticky LEFT
 * (kept on ALL viewports including mobile), vertical + horizontal scroll
 * both live on .bw-compare__scroll.
 * ====================================================================== */

.bw-compare {
	width: 100%;
	transition: opacity var(--bw-speed) ease;
}

.bw-compare.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* v1.1.0 hero + toolbar sit above the scroll container. */
.bw-cmp-hero {
	margin: 0 0 14px;
}

.bw-cmp-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 2px 12px;
}

.bw-cmp-bar__label {
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-muted);
}

/* "Differences only" toggle — pill button with a track + knob. */
.bw-difftoggle {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 9px 7px 14px;
	background: var(--bw-card);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-pill);
	color: var(--bw-ink);
	font-size: 0.74rem;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--bw-speed) ease;
}

.bw-difftoggle:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

.bw-difftoggle__track {
	position: relative;
	width: 34px;
	height: 20px;
	border-radius: var(--bw-pill);
	background: var(--bw-canvas);
	border: 1px solid var(--bw-line-strong);
	transition: background var(--bw-speed) ease;
}

.bw-difftoggle__knob {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--bw-ink);
	transition: transform var(--bw-speed) ease, background var(--bw-speed) ease;
}

.bw-difftoggle[aria-pressed="true"] .bw-difftoggle__track {
	background: var(--bw-ink);
	border-color: var(--bw-ink);
}

.bw-difftoggle[aria-pressed="true"] .bw-difftoggle__knob {
	transform: translateX(14px);
	background: var(--bw-hi);
}

/* Differences mode: server marks identical rows; JS flips this class. */
.bw-cmp-diff .bw-row--same {
	display: none !important;
}

.bw-compare__scroll {
	overflow: auto;
	max-height: 82vh;
	background: var(--bw-card);
	border: 1px solid var(--bw-line);
	border-radius: 18px;
	-webkit-overflow-scrolling: touch;
}

.bw-compare__table {
	display: grid;
	grid-template-columns: minmax(96px, 140px) repeat(var(--bw-cols, 1), minmax(160px, 1fr));
	min-width: min-content;
}

/* When an "Add product" column is present, product columns are width-capped
   and the plus column alone absorbs the leftover space — a lone product no
   longer stretches across the table. (--bw-pcols = products only; the plus
   track is declared explicitly as the last column.) */
.bw-compare__table--hasplus {
	grid-template-columns: minmax(96px, 140px) repeat(var(--bw-pcols, 1), minmax(160px, 230px)) minmax(170px, 1fr);
}

@media (max-width: 767px) {
	.bw-compare__table {
		grid-template-columns: minmax(84px, 96px) repeat(var(--bw-cols, 1), minmax(150px, 1fr));
	}

	.bw-compare__table--hasplus {
		grid-template-columns: minmax(84px, 96px) repeat(var(--bw-pcols, 1), minmax(150px, 190px)) minmax(150px, 1fr);
	}
}

/* ---- Cells ---- */

.bw-cell {
	padding: 12px 14px;
	border-bottom: 1px solid var(--bw-line);
	border-inline-end: 1px solid var(--bw-line);
	background: var(--bw-card);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--bw-ink);
	min-width: 0;
}

.bw-cell--value p { margin: 0 0 0.5em; }
.bw-cell--value p:last-child { margin-bottom: 0; }

.bw-dash { color: var(--bw-muted); }

.bw-rating { font-weight: 700; }
.bw-rating__count { color: var(--bw-muted); font-size: 0.72rem; }
.bw-stockout-text { color: var(--bw-muted); font-weight: 600; }
.bw-cmp-nodisc { color: var(--bw-muted); }

/* v1.1.0 value weighting: muted = identical, ink = differs, bold = best. */
.bw-cmp-val--same { color: var(--bw-muted); }
.bw-cmp-val--same .woocommerce-Price-amount { color: var(--bw-muted); }
.bw-cmp-val--diff { color: var(--bw-ink); font-weight: 600; }
.bw-cmp-val--best { color: var(--bw-ink); font-weight: 700; }

/* Computed winner pill (Lowest / Biggest / Highest). */
.bw-best {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 8px;
	padding: 3px 8px;
	border-radius: var(--bw-pill);
	background: var(--bw-ink);
	color: var(--bw-hi);
	font-size: 0.56rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	vertical-align: middle;
	white-space: nowrap;
}

/* Section header row — spans the grid; its text sticks to the left edge
   so titles stay readable while columns scroll horizontally. */
.bw-cell--section {
	grid-column: 1 / -1;
	display: block;
	padding: 16px 14px 8px;
	background: var(--bw-card);
	border-bottom: 1px solid var(--bw-line);
	border-inline-end: 0;
}

.bw-cell--section b {
	display: block;
	position: sticky;
	left: 14px;
	width: max-content;
	max-width: calc(100vw - 60px);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-ink);
}

.bw-cell--section small {
	display: block;
	position: sticky;
	left: 14px;
	width: max-content;
	max-width: calc(100vw - 60px);
	margin-top: 2px;
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--bw-muted);
}

/* Label column — micro-label voice, sticky left (all viewports). */
.bw-cell--label {
	position: sticky;
	left: 0;
	z-index: 2;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-muted);
	overflow-wrap: anywhere;
}

/* Mobile: the narrow sticky column must contain long single words
   ("DESCRIPTION", "AVAILABILITY") — tighter type + guaranteed wrap. */
@media (max-width: 767px) {
	.bw-cell--label {
		font-size: 0.58rem;
		letter-spacing: 0.07em;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* Touch scroll trap fix: no fixed height on mobile — the table grows to
	   its content, vertical swipes scroll the PAGE, horizontal swipes pan
	   the columns. (Sticky-top product cards are a desktop behavior; the
	   sticky-left label column still works, since horizontal scrolling
	   stays inside the container.) */
	.bw-compare__scroll {
		max-height: none;
	}
}

/* Header row — sticky top. Corner sits above both axes. */
.bw-cell--head {
	position: sticky;
	top: 0;
	z-index: 3;
	border-bottom: 1px solid var(--bw-line-strong);
}

.bw-cell--corner {
	left: 0;
	z-index: 4;
}

/* ---- Sticky product card (header cell) ---- */

.bw-pcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: sticky;
	top: 0;
}

.bw-pcard__remove {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--bw-card);
	border: 1px solid var(--bw-line);
	border-radius: 50%;
	color: var(--bw-ink);
	cursor: pointer;
	transition: background var(--bw-speed) ease,
		color var(--bw-speed) ease,
		border-color var(--bw-speed) ease;
}

.bw-pcard__remove svg { width: 11px; height: 11px; }

.bw-pcard__remove:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

.bw-pcard__media {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	max-height: 120px;
	background: #ffffff;
	border: 1px solid var(--bw-line);
	border-radius: 12px;
	overflow: hidden;
}

.bw-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 7%;
	box-sizing: border-box;
	display: block;
}

/* v1.1.0 category tag — static pill between title and price. */
.bw-pcard__cat {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: -2px 0;
	padding: 3px 9px;
	background: var(--bw-canvas);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-pill);
	color: var(--bw-muted);
	font-size: 0.54rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bw-pcard__title {
	color: var(--bw-ink);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bw-pcard__price {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bw-pcard__price del {
	color: var(--bw-muted);
	font-weight: 500;
	margin-inline-start: 6px;
}

.bw-pcard__price ins { text-decoration: none; }

.bw-pcard__action { margin-top: auto; }

.bw-pcard__action .button,
.bw-pcard__action .add_to_cart_button,
.bw-pcard__action .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	background: var(--bw-ink);
	border: 1px solid var(--bw-ink);
	border-radius: var(--bw-pill);
	color: var(--bw-hi);
	font-size: 0.74rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity var(--bw-speed) ease;
}

.bw-pcard__action .button.loading {
	opacity: 0.55;
	pointer-events: none;
}

.bw-pcard__action .added_to_cart {
	background: var(--bw-card);
	color: var(--bw-ink);
	border-color: var(--bw-line-strong);
	margin-top: 6px;
}

.bw-pcard__action .bw-card__stockout { padding: 10px 14px; font-size: 0.74rem; }

/* ---- Plus column ---- */

.bw-cell--plus {
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

.bw-plusbtn {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 180px;
	padding: 16px;
	background: var(--bw-canvas);
	border: 1.5px dashed var(--bw-line-strong);
	border-radius: 12px;
	color: var(--bw-muted);
	font-size: 0.74rem;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--bw-speed) ease, border-color var(--bw-speed) ease;
}

.bw-plusbtn:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

.bw-plusbtn__icon {
	display: inline-flex;
	width: 22px;
	height: 22px;
}

.bw-plusbtn__icon svg { width: 100%; height: 100%; }

.bw-cell--filler { background: var(--bw-canvas); }

/* ---- "Add a product" button under the empty state ---- */

.bw-addfirst {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--bw-ink);
	border: 1px solid var(--bw-ink);
	border-radius: var(--bw-pill);
	color: var(--bw-hi);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity var(--bw-speed) ease;
}

.bw-addfirst:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

.bw-addfirst__plus { font-size: 1rem; line-height: 1; font-weight: 700; }

/* Compare hover effects — hover-capable devices only (Q7). */
@media (hover: hover) {
	.bw-pcard__remove:hover {
		background: var(--bw-ink);
		border-color: var(--bw-ink);
		color: var(--bw-hi);
	}

	.bw-pcard__title:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}

	.bw-pcard__action .button:hover,
	.bw-pcard__action .add_to_cart_button:hover {
		opacity: 0.85;
		color: var(--bw-hi);
	}

	.bw-plusbtn:hover {
		color: var(--bw-ink);
		border-color: var(--bw-ink);
	}

	.bw-addfirst:hover { opacity: 0.85; }

	.bw-difftoggle:hover { border-color: var(--bw-line-strong); }
}

/* =========================================================================
 * v1.1.0 — COMPARE VERDICT PANEL ("By the numbers", computed)
 * Dark bookend below the table.
 * ====================================================================== */

.bw-cmp-verdict {
	margin-top: 16px;
	padding: clamp(20px, 4vw, 30px);
	background: var(--bw-ink);
	border-radius: 18px;
	color: var(--bw-hi);
}

.bw-cmp-verdict__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.bw-cmp-verdict__head h2 {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-lo);
}

.bw-cmp-verdict__head small {
	font-size: 0.68rem;
	color: var(--bw-lo);
}

.bw-cmp-verdict__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.bw-cmp-verdict__item {
	padding: 14px 16px;
	border: 1px solid rgba(245, 245, 245, 0.12);
	border-radius: var(--bw-r-sm);
	transition: border-color var(--bw-speed) ease;
}

.bw-cmp-verdict__tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--bw-pill);
	background: var(--bw-hi);
	color: var(--bw-ink);
	font-size: 0.58rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
}

.bw-cmp-verdict__item h3 {
	margin: 9px 0 4px;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bw-hi);
}

.bw-cmp-verdict__item p {
	margin: 0;
	font-size: 0.74rem;
	line-height: 1.55;
	color: var(--bw-lo);
}

.bw-cmp-verdict__item p .woocommerce-Price-amount {
	color: var(--bw-hi);
	font-weight: 600;
}

.bw-cmp-verdict .bw-arrow-cta {
	margin-top: 16px;
}

@media (hover: hover) {
	.bw-cmp-verdict__item:hover {
		border-color: rgba(245, 245, 245, 0.22);
	}
}

/* =========================================================================
 * PRODUCT SEARCH OVERLAY
 * Light card panel; result rows reuse the compact thumb+title+price
 * vocabulary (44px thumb, 2-line title, price with strike).
 * ====================================================================== */

.bw-search {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 8vh 16px 16px;
}

.bw-search[hidden] { display: none; }

.bw-search__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(2, 2, 2, 0.45);
}

.bw-search__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	background: var(--bw-card);
	border: 1px solid var(--bw-line-strong);
	border-radius: 18px;
	overflow: hidden;
}

.bw-search__inputwrap {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var(--bw-line);
}

.bw-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0 14px;
	background: var(--bw-canvas);
	border: 1px solid var(--bw-line);
	border-radius: var(--bw-r-sm);
	color: var(--bw-ink);
	font-size: 0.85rem;
	font-family: inherit;
}

.bw-search__input:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

.bw-search__closebtn {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: var(--bw-card);
	border: 1px solid var(--bw-line);
	border-radius: 50%;
	color: var(--bw-ink);
	cursor: pointer;
	transition: border-color var(--bw-speed) ease;
}

.bw-search__closebtn svg { width: 12px; height: 12px; }

.bw-search__closebtn:hover { border-color: var(--bw-ink); }

.bw-search__closebtn:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: 2px;
}

.bw-search__hint {
	padding: 10px 16px 0;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--bw-muted);
}

.bw-search__results {
	overflow-y: auto;
	padding: 8px;
	display: flex;
	flex-direction: column;
	transition: opacity var(--bw-speed) ease;
}

.bw-search__results.is-loading { opacity: 0.5; }

.bw-search__item {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 8px;
	background: transparent;
	border: 0;
	border-radius: var(--bw-r-sm);
	color: var(--bw-ink);
	font-family: inherit;
	text-align: start;
	cursor: pointer;
	transition: background var(--bw-speed) ease;
}

@media (hover: hover) {
	.bw-search__item:hover { background: var(--bw-canvas); }
}

.bw-search__item:focus-visible {
	outline: 2px solid var(--bw-ink);
	outline-offset: -2px;
}

.bw-search__item:disabled { opacity: 0.5; pointer-events: none; }

.bw-search__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	background: #ffffff;
	border: 1px solid var(--bw-line);
	border-radius: 10px;
	overflow: hidden;
	display: inline-flex;
}

.bw-search__thumb img,
.bw-search__thumbimg {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.bw-search__meta {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bw-search__title {
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bw-search__price {
	font-size: 0.74rem;
	font-weight: 700;
}

.bw-search__price del {
	color: var(--bw-muted);
	font-weight: 500;
	margin-inline-start: 5px;
}

.bw-search__price ins { text-decoration: none; }

.bw-search__none {
	padding: 24px 16px;
	text-align: center;
	color: var(--bw-muted);
	font-size: 0.82rem;
}

/* =========================================================================
 * SHIPPED COMPARE EMPTY STATE (author design; ghosts are buttons — untouched)
 * ====================================================================== */

.compare-empty {
	--accent: #111111;
	--ghost-bg: #fafafa;
	--ghost-border: #d9d9d9;
	--skeleton: #ebebeb;
	--ink: #111111;
	--muted: #888888;
	--radius: 16px;
	--sweep: rgba(255, 255, 255, 0.7);
	text-align: center;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 24px;
	box-sizing: border-box;
	color: var(--ink);
}

.compare-empty * { box-sizing: border-box; }

.compare-empty .ghosts {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 4vw, 24px);
	margin-bottom: 32px;
}

.compare-empty .ghost {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	overflow: hidden;
	flex: 1 1 0;
	max-width: 150px;
	min-width: 110px;
	padding: 16px;
	background: var(--ghost-bg);
	border: 1.5px dashed var(--ghost-border);
	border-radius: var(--radius);
	font-family: inherit;
	cursor: pointer;
	animation: compare-float 4s ease-in-out infinite;
}

.compare-empty .ghost:nth-child(3) { animation-delay: -2s; }

.compare-empty .ghost:hover { border-color: var(--accent); }

.compare-empty .ghost:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.compare-empty .ghost::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 30%, var(--sweep) 50%, transparent 70%);
	transform: translateX(-120%);
	animation: compare-sweep 3.6s ease-in-out infinite;
	pointer-events: none;
}

.compare-empty .ghost:nth-child(3)::after { animation-delay: 1.8s; }

.compare-empty .thumb {
	position: relative;
	display: grid;
	place-items: center;
	height: 64px;
	border-radius: 10px;
	background: var(--skeleton);
	margin-bottom: 14px;
}

.compare-empty .plus { width: 22px; height: 22px; color: var(--accent); }

.compare-empty .bar {
	display: block;
	height: 8px;
	border-radius: 99px;
	background: var(--skeleton);
	margin: 0 auto 8px;
}

.compare-empty .bar.long { width: 100%; }
.compare-empty .bar.short { width: 60%; margin-bottom: 0; }

.compare-empty .vs {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #ffffff;
	background: var(--accent);
	animation: compare-pulse 2.6s ease-out infinite;
}

.compare-empty__title {
	font-size: 19px;
	font-weight: 650;
	margin: 0 0 8px;
}

.compare-empty__text {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--muted);
	margin: 0 auto;
	max-width: 320px;
}

@keyframes compare-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes compare-sweep {
	0% { transform: translateX(-120%); }
	55%, 100% { transform: translateX(120%); }
}

@keyframes compare-pulse {
	0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.35); }
	70% { box-shadow: 0 0 0 14px rgba(17, 17, 17, 0); }
	100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.bw-compare,
	.bw-pcard__remove,
	.bw-plusbtn,
	.bw-addfirst,
	.bw-search__item,
	.bw-search__closebtn,
	.bw-search__results,
	.bw-difftoggle,
	.bw-difftoggle__track,
	.bw-difftoggle__knob,
	.bw-cmp-verdict__item {
		transition: none;
	}

	.compare-empty .ghost,
	.compare-empty .ghost::after,
	.compare-empty .vs { animation: none; }

	.compare-empty .ghost::after { display: none; }
}

/* =========================================================================
 * v1.0.1 — COUNTER CUSTOMIZATION
 * Dedicated counter icon + admin-controlled icon/badge colors.
 * Vars injected from settings; fallbacks match the shipped defaults.
 * ====================================================================== */

.bw-counter__icon {
	color: var(--bw-counter-icon, currentColor);
}

.bw-counter__badge {
	background: var(--bw-counter-badge-bg, var(--bw-hi));
	color: var(--bw-counter-badge-text, var(--bw-ink));
}

/* Same hidden-attribute guard as the wishlist regions: the display rule
   above would otherwise force the "0" badge visible on every counter. */
.bw-counter__badge[hidden] {
	display: none !important;
}

/* =========================================================================
 * v1.0.2 — ELEMENTOR COUNTER WIDGETS
 * Layout system for the BW Wishlist/Compare Counter widgets. All visual
 * styling (colors, sizes, typography) is written by Elementor per-instance
 * via {{WRAPPER}} selectors in includes/elementor.php; the classes below
 * only provide the structural layout modes the widget's Layout section
 * switches between. Non-widget shortcode counters are untouched.
 * ====================================================================== */

/* Widget counters size to their content instead of the fixed 34px box,
   so icon size / padding controls behave predictably. */
.bw-ecounter.bw-counter {
	width: auto;
	height: auto;
}

.bw-ecounter .bw-counter__icon {
	align-items: center;
	justify-content: center;
}

/* Font icons picked from the Elementor library render as <i>. */
.bw-ecounter .bw-counter__icon i {
	font-size: 20px;
	line-height: 1;
}

/* ---- Bubble mode (default): badge overlaps an icon corner ---- */

.bw-ecounter .bw-counter__badge {
	transform: translate(var(--bw-badge-x, 0px), var(--bw-badge-y, 0px));
}

/* Corner presets. Top-right is the shipped default (top:-4px; right:-6px). */
.bw-ecounter--corner-tl .bw-counter__badge { top: -4px; bottom: auto; left: -6px; right: auto; }
.bw-ecounter--corner-tr .bw-counter__badge { top: -4px; bottom: auto; right: -6px; left: auto; }
.bw-ecounter--corner-bl .bw-counter__badge { bottom: -4px; top: auto; left: -6px; right: auto; }
.bw-ecounter--corner-br .bw-counter__badge { bottom: -4px; top: auto; right: -6px; left: auto; }

/* ---- Inline mode: badge sits beside the icon in the flow ---- */

.bw-ecounter--inline {
	gap: var(--bw-badge-gap, 6px);
}

.bw-ecounter--inline .bw-counter__badge {
	position: static;
	transform: none;
}

/* Editor preview: sample badge shown while styling (never hydrated). */
.bw-ecounter .bw-counter__badge.bw-badge-preview {
	display: inline-flex !important;
}
/* =========================================================================
 * v1.0.4 — ELEMENTOR BUTTON WIDGETS
 * Helpers for the BW Wishlist/Compare Button widgets. All colors, borders,
 * padding, and typography are written per instance by Elementor via
 * {{WRAPPER}} selectors in includes/elementor.php.
 * ====================================================================== */

/* Font icons picked from the Elementor library render as <i>. */
.bw-btn__icon i {
	font-size: 16px;
	line-height: 1;
}

/* Per-instance animation toggle (widget switch OFF adds this class):
   kills the v1.0.3 icon hover animations for that button only. */
.bw-btn.bw-ebtn--noanim:hover .bw-btn__icon svg,
.bw-btn.bw-ebtn--noanim:hover .bw-btn__icon .bw-icon-img,
.bw-btn.bw-ebtn--noanim:hover .bw-btn__icon i {
	animation: none !important;
	transform: none !important;
}