/*
 * WDA Wishlist and Quick View for WooCommerce
 * Frontend styles.
 */

:root {
	--wda-wqv-accent: #e2401c;
	--wda-wqv-dark: #000000;
	--wda-wqv-success: #0f834d;
	--wda-wqv-warning: #a16207;
	--wda-wqv-surface: #fff;
	--wda-wqv-text: #333;
	--wda-wqv-muted: #757575;
	--wda-wqv-image-bg: #f3f4f6;
	--wda-wqv-chip-bg: #f1f5f9;
	--wda-wqv-chip-text: #334155;
	--wda-wqv-table-head-bg: #f6f6f6;
	--wda-wqv-separator: #ededed;
	--wda-wqv-radius: 0px;
	--wda-wqv-modal-width: 940px;
	--wda-wqv-overlay: rgba(15, 23, 42, 0.3);
	--wda-wqv-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
}

/* Visually hidden, still announced by screen readers. */
.wda-wqv-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wda-wqv-btn:focus-visible,
.wda-wqv-remove:focus-visible,
.wda-wqv-thumb:focus-visible,
.wda-wqv-modal__close:focus-visible,
.wda-wqv-count-wrap:focus-visible,
.wda-wqv-share a:focus-visible,
.wda-wqv-share button.wda-wqv-share-copy:focus-visible,
.wda-wqv-toast__close:focus-visible,
.wda-wqv-toast a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Buttons (wishlist + quick view)
 * ------------------------------------------------------------------ */

.wda-wqv-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	/* Fixed px, not em: relative sizes balloon on large-base themes
	 * (Twenty Twenty-Five's fluid base is ~18px). */
	font-size: 14px;
	/* Middle, not the default baseline: inline-flex siblings align by text
	 * baseline, so an icon-less (text-only) button would sit lower than
	 * its icon+text neighbour. Nowrap keeps multi-word labels on one line
	 * in narrow columns. */
	vertical-align: middle;
	white-space: nowrap;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* :focus-visible, not :focus — a mouse click leaves the button focused
 * (and closing the modal focuses the opener again), which would freeze
 * the hover look until the user clicks elsewhere. */
.wda-wqv-btn:hover,
.wda-wqv-btn:focus-visible {
	color: var(--wda-wqv-accent);
	text-decoration: none;
}

/* A mouse click leaves the button focused, and themes decorate plain
 * :focus (e.g. Astra's `a:focus { outline: thin dotted }`), leaving a
 * stray ring until the shopper clicks elsewhere. Pointer focus shows no
 * ring; keyboard focus keeps the focus-visible ring above. */
.wda-wqv-btn:focus:not(:focus-visible) {
	outline: none !important;
}

/* The circles' own elevation, re-asserted for themes that use a
 * box-shadow focus ring instead of an outline. */
.wda-wqv-loop-overlay .wda-wqv-btn:focus:not(:focus-visible) {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

.theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn:focus:not(:focus-visible),
.wp-theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn:focus:not(:focus-visible) {
	box-shadow: none !important;
}

/* Armor for every button context (see the loop-overlay armor note):
 * theme link rules with :not()-inflated specificity and !important
 * repaint our inline buttons with the theme's link color, animated
 * underline and font size. `inherit` (not a fixed color) keeps the
 * buttons matching the surrounding text on dark and light themes alike;
 * the on-image/Kadence armor rules below override this with their own
 * higher-specificity looks. */
.wda-wqv-btn:not(#wda-wqv-boost) {
	color: inherit !important;
	background: none !important;
	text-decoration: none !important;
	font-size: 14px !important;
	transition: color 0.2s ease, opacity 0.2s ease !important;
}

.wda-wqv-btn:not(#wda-wqv-boost):hover,
.wda-wqv-btn:not(#wda-wqv-boost):focus-visible {
	color: var(--wda-wqv-accent) !important;
}

.wda-wqv-btn .wda-wqv-icon {
	display: inline-flex;
}

.wda-wqv-btn .wda-wqv-icon svg {
	width: 1.15em;
	height: 1.15em;
	display: block;
}

.wda-wqv-btn.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.wda-wqv-style-icon .wda-wqv-label {
	display: none;
}

.wda-wqv-style-text .wda-wqv-icon {
	display: none;
}

/* Wishlist heart states: the added heart keeps the outline style with an
 * accent-colored stroke (matching the hover look) instead of a solid fill. */
.wda-wqv-wishlist-btn .wda-wqv-icon-filled {
	display: none;
}

.wda-wqv-wishlist-btn.wda-wqv-added .wda-wqv-icon-outline {
	color: var(--wda-wqv-accent);
}

/* Loop placement */
ul.products li.product {
	position: relative;
}

ul.products li.product .wda-wqv-btn {
	margin-block: 0.35em;
	margin-inline: 0 1em;
}

/* Row container for the before/after-add-to-cart placements: block-level,
 * so the buttons always get their own line instead of flowing inline
 * next to the theme's add-to-cart button (WooCommerce's default button
 * is inline-block, e.g. in Hello Elementor). */
.wda-wqv-loop-inline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-block: 8px;
}

.wda-wqv-loop-inline .wda-wqv-btn {
	margin: 0;
}

/* OceanWP centers its card content; center the row to match. */
.oceanwp-theme .wda-wqv-loop-inline {
	justify-content: center;
}

/* Over-image overlay. Whole-pixel px units throughout (not em): with
 * em, theme font sizes produce fractional pixel offsets/sizes, and the
 * circles + icon strokes rasterize on half-pixels — icons then look
 * blurry or ~1px off-center, varying by theme. */
/* No z-index on the container itself: a stacking context here would
 * isolate blend-mode children (the premium wishlist-count number
 * inverts against the product image). The buttons carry it instead. */
.wda-wqv-loop-overlay {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Theme compatibility: Astra's on-card add-to-cart icon occupies the same
 * image corner — when a card contains it, start our overlay below it so
 * neither element hides the other. */
ul.products li.product:has(.ast-on-card-button) .wda-wqv-loop-overlay {
	inset-block-start: 56px;
}

/* Theme compatibility: wpdevart themes park WooCommerce's sale badge in
 * the top-right corner — the buttons live in the top-LEFT corner there
 * so the two never overlap. */
.wpdevart-woocommerce .wda-wqv-loop-overlay {
	inset-inline-end: auto;
	inset-inline-start: 20px;
}

a.button.wda-wqv-add-all {
    text-decoration: none !important;
}

a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
    text-decoration: none !important;
}

/* Theme compatibility: Kadence renders the loop hooks inside its slide-up
 * .product-action-wrap panel, which reserves only one line of height — a
 * stacked button row would overlap the price above it. The buttons share
 * the add-to-cart line instead, anchored to its end, styled flat to match
 * Kadence's minimal action link. */
.theme-kadence .product-action-wrap,
.wp-theme-kadence .product-action-wrap {
	position: relative;
	padding-inline-end: 5em;
}

.theme-kadence .product-action-wrap .wda-wqv-loop-overlay,
.wp-theme-kadence .product-action-wrap .wda-wqv-loop-overlay {
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	flex-direction: row;
	gap: 6px;
	margin: 0;
}

.theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn,
.wp-theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn {
	opacity: 1;
	transform: none;
	width: 32px;
	height: 32px;
	box-shadow: none;
}

/* :not(#id) + !important so this flat variant outranks the armor rule
 * below (same ID level, more classes). */
.theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn:not(#wda-wqv-boost),
.wp-theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn:not(#wda-wqv-boost) {
	background: transparent !important;
	color: inherit !important;
}

.theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn:not(#wda-wqv-boost):hover,
.wp-theme-kadence .product-action-wrap .wda-wqv-loop-overlay .wda-wqv-btn:not(#wda-wqv-boost):hover {
	color: var(--wda-wqv-accent) !important;
}

.wda-wqv-loop-overlay .wda-wqv-btn {
	/* Re-asserted here: block/theme styles like
	 * `.wp-block-woocommerce-product-image a` outrank the base class and
	 * would break the icon centering. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	/* Moved off the container (see its comment): keeps the circles above
	 * theme sale badges without isolating blended siblings. */
	z-index: 5;
	/* Even px sizes: (40 - 18) / 2 leaves the icon on a whole pixel. */
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wda-wqv-surface);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	color: var(--wda-wqv-text);
	opacity: 0;
	transform: translateY(-4px);
	transition: 0.35s ease;
}

/* Armor for the circles' visual identity. Themes ship link rules like
 * `.container a:not(<huge list>) { color/background … !important }` —
 * the :not() list inflates their specificity to (0,7,5)+, which beats
 * any class-only selector even with !important. The :not(#id) below
 * lifts these declarations to ID-level specificity (1,x,0), out of
 * reach of class-based theme rules. Only identity properties live
 * here; opacity/transform stay in the base rule so the reveal states
 * keep working. */
.wda-wqv-loop-overlay .wda-wqv-btn:not(#wda-wqv-boost) {
	background: var(--wda-wqv-surface) !important;
	color: var(--wda-wqv-text) !important;
	border: 0 !important;
	text-decoration: none !important;
	transition: 0.35s ease !important;
}

/* Hover feedback — matches the modal close/nav circles. */
.wda-wqv-loop-overlay .wda-wqv-btn:not(#wda-wqv-boost):hover,
.wda-wqv-loop-overlay .wda-wqv-btn:not(#wda-wqv-boost):focus-visible {
	color: var(--wda-wqv-accent) !important;
}

.wda-wqv-loop-overlay .wda-wqv-btn .wda-wqv-label {
	display: none;
}

/* Center the icon against the circle itself rather than through the
 * anchor's flex layout: theme rules on the <a> (display, line-height,
 * baseline, gap) then cannot nudge the icon off-center. */
.wda-wqv-loop-overlay .wda-wqv-btn .wda-wqv-icon {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	line-height: 1;
}

/* The rule above outranks the base filled-heart hide — re-hide it so the
 * wishlist button never stacks two hearts. */
.wda-wqv-loop-overlay .wda-wqv-btn .wda-wqv-icon-filled {
	display: none;
}

/* Fixed px icon size (pairs with the 40px circle above). */
.wda-wqv-loop-overlay .wda-wqv-btn .wda-wqv-icon svg {
	width: 18px;
	height: 18px;
}

/* The overlay is icon-only by design — with the "Text only" button style
 * both the label (above) and the icon (style rule) would be hidden,
 * leaving an empty bubble. Force the icon back on; keep the filled
 * variant hidden so the wishlist button never shows two hearts. */
.wda-wqv-loop-overlay .wda-wqv-btn.wda-wqv-style-text .wda-wqv-icon {
	display: inline-flex;
}

.wda-wqv-loop-overlay .wda-wqv-btn.wda-wqv-style-text .wda-wqv-icon-filled {
	display: none;
}

ul.products li.product:hover .wda-wqv-loop-overlay .wda-wqv-btn,
.wp-block-post:hover .wda-wqv-loop-overlay .wda-wqv-btn,
.wp-block-woocommerce-product-image:hover .wda-wqv-loop-overlay .wda-wqv-btn,
.wda-wqv-loop-overlay .wda-wqv-btn:focus-visible,
.wda-wqv-loop-overlay .wda-wqv-btn.wda-wqv-added {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.wda-wqv-loop-overlay .wda-wqv-btn {
		opacity: 1;
		transform: none;
	}
}

/* Compact overlay on phones: the controls are always visible there and
 * grid images are small — full-size circles cover most of the photo and
 * the stack can spill past short images onto the card title. 32px keeps
 * a comfortable tap target at ~60% of the footprint. */
@media (max-width: 600px) {
	.wda-wqv-loop-overlay {
		inset-block-start: 8px;
		inset-inline-end: 8px;
		gap: 6px;
	}

	.wda-wqv-loop-overlay .wda-wqv-btn {
		width: 32px;
		height: 32px;
	}

	.wda-wqv-loop-overlay .wda-wqv-btn .wda-wqv-icon svg {
		width: 14px;
		height: 14px;
	}

	/* The below-the-badge offsets shrink with the controls. */
	ul.products li.product:has(.ast-on-card-button) .wda-wqv-loop-overlay {
		inset-block-start: 48px;
	}

	.wp-block-woocommerce-product-image:has(.wc-block-components-product-sale-badge) .wda-wqv-loop-overlay {
		inset-block-start: 46px;
	}
}

/* Single product */
.wda-wqv-single-wishlist {
	margin: 0.75em 0;
}

/* Block themes: Product Collection / product blocks */
.wp-block-woocommerce-product-image {
	position: relative;
}

/* The Product Image block puts its sale badge in the same top corner —
 * when one is present, start our overlay below it. */
.wp-block-woocommerce-product-image:has(.wc-block-components-product-sale-badge) .wda-wqv-loop-overlay {
	inset-block-start: 54px;
}

.wc-block-product-template .wda-wqv-btn,
.wp-block-post .wda-wqv-btn {
	margin-block: 0.35em;
	margin-inline: 0 1em;
}

/* ------------------------------------------------------------------
 * Wishlist counter
 * ------------------------------------------------------------------ */

.wda-wqv-count-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	text-decoration: none;
}

.wda-wqv-count-wrap .wda-wqv-icon svg {
	width: 1.2em;
	height: 1.2em;
	display: block;
}

.wda-wqv-count {
	display: inline-flex;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--wda-wqv-accent);
	color: #fff;
	font-size: 0.8em;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------------
 * Quick view modal
 * ------------------------------------------------------------------ */

.wda-wqv-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}

.wda-wqv-modal.is-open {
	display: flex;
}

.wda-wqv-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--wda-wqv-overlay);
	animation: wda-wqv-fade 0.2s ease;
}

.wda-wqv-modal__dialog {
	position: relative;
	width: 100%;
	max-width: var(--wda-wqv-modal-width);
	height: min(620px, 85vh);
	display: flex;
	flex-direction: column;
	/* Clipping lives on __content, so the nav arrows can sit outside
	 * the dialog on the overlay. */
	overflow: visible;
	background: var(--wda-wqv-surface);
	border-radius: var(--wda-wqv-radius);
	box-shadow: var(--wda-wqv-shadow);
	animation: wda-wqv-pop 0.25s ease;
}

/* Fully owned at raised specificity: themes style bare <button> hard
 * enough to repaint half-styled controls. Sizes are px on purpose —
 * themes that rescale the root font size (OceanWP & co.) must not
 * shrink the controls. The armor block after the nav rules re-asserts
 * the visual identity against page builders that win the cascade. */
.wda-wqv-modal .wda-wqv-modal__close {
	position: absolute;
	inset-block-start: 24px;
	inset-inline-end: 24px;
	z-index: 3;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	line-height: 1;
	text-transform: none;
	background: var(--wda-wqv-surface);
	color: var(--wda-wqv-text);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	transition: 0.35s ease;
}

.wda-wqv-modal .wda-wqv-modal__close:hover {
	color: var(--wda-wqv-surface);
	background: var(--wda-wqv-dark);
}

.wda-wqv-modal .wda-wqv-modal__close svg {
	width: 16px;
	height: 16px;
}

.wda-wqv-modal__content {
	flex: 1 1 auto;
	/* Explicit height (the dialog has a definite pixel height) so the
	 * grid/image % chain resolves — a flex-grown height is treated
	 * inconsistently as a percentage base across themes. */
	height: 100%;
	min-height: 0;
	display: flex;
	overflow: hidden;
	border-radius: var(--wda-wqv-radius);
}

/* Newly loaded product fades in for a smooth switch. */
.wda-wqv-modal__content > .wda-wqv-product {
	animation: wda-wqv-qv-in 0.28s ease;
}

/* Loading veil: covers the content while the next product loads, so the
 * modal never blanks between products (matches the smooth switch of
 * commercial quick views). The previous product stays visible underneath. */
.wda-wqv-modal__loader {
	position: absolute;
	inset: 0;
	/* Below the close (3) and nav (3) buttons, above the content. */
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.72);
	border-radius: var(--wda-wqv-radius);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wda-wqv-modal__dialog.is-loading .wda-wqv-modal__loader {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.wda-wqv-modal__loader .wda-wqv-spinner {
	margin: 0;
}

@keyframes wda-wqv-qv-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Prev/next product navigation (shown by JS when neighbours exist).
 * The buttons stay INSIDE the dialog in the DOM (aria-modal excludes
 * outside content for screen readers) but sit visually outside it on
 * the overlay; the clamp walks them back inside on narrow viewports. */
.wda-wqv-modal .wda-wqv-modal__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	line-height: 1;
	background: var(--wda-wqv-surface);
	color: var(--wda-wqv-text);
	cursor: pointer;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
	transition: 0.35s ease;
}

.wda-wqv-modal .wda-wqv-modal__nav:hover {
	color: var(--wda-wqv-surface);
	background: var(--wda-wqv-dark);
}

.wda-wqv-modal .wda-wqv-modal__nav--prev {
	inset-inline-start: calc(-1 * clamp(-12px, (100vw - 100%) / 2 - 20px, 72px));
}

.wda-wqv-modal .wda-wqv-modal__nav--next {
	inset-inline-end: calc(-1 * clamp(-12px, (100vw - 100%) / 2 - 20px, 72px));
}

.wda-wqv-modal .wda-wqv-modal__nav[hidden] {
	display: none;
}

.wda-wqv-modal .wda-wqv-modal__nav svg {
	width: 19px;
	height: 19px;
}

/* Theme armor for the modal's own controls: page builders (Elementor
 * kits & co.) paint every <button> with backgrounds, borders, padding
 * and min-sizes at a specificity that beats the base rules above — the
 * modal close and product arrows are plugin-branded UI and must look
 * identical on every theme. ID + !important on the visual identity only;
 * positioning stays in the base rules. */
#wda-wqv-modal .wda-wqv-modal__close:not(#wda-wqv-boost),
#wda-wqv-modal .wda-wqv-modal__nav:not(#wda-wqv-boost) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wda-wqv-surface) !important;
	color: var(--wda-wqv-text) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

#wda-wqv-modal .wda-wqv-modal__close:not(#wda-wqv-boost) {
	width: 36px !important;
	height: 36px !important;
}

#wda-wqv-modal .wda-wqv-modal__nav:not(#wda-wqv-boost) {
	width: 44px !important;
	height: 44px !important;
}

#wda-wqv-modal .wda-wqv-modal__close:not(#wda-wqv-boost):hover,
#wda-wqv-modal .wda-wqv-modal__nav:not(#wda-wqv-boost):hover {
	background: var(--wda-wqv-dark) !important;
	color: var(--wda-wqv-surface) !important;
}

#wda-wqv-modal .wda-wqv-modal__close:not(#wda-wqv-boost):focus-visible,
#wda-wqv-modal .wda-wqv-modal__nav:not(#wda-wqv-boost):focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
}

/* The armored display must not defeat the JS [hidden] toggle. */
#wda-wqv-modal .wda-wqv-modal__nav:not(#wda-wqv-boost)[hidden] {
	display: none !important;
}

.wda-wqv-modal-error {
	text-align: center;
	padding: 3rem 1rem;
	margin: auto;
}

/* Stacked single-column layout on small screens: the whole card
 * scrolls, the image returns to a natural banner. */

body.wda-wqv-modal-open {
	overflow: hidden;
}

@keyframes wda-wqv-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes wda-wqv-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: none; }
}

/* Product layout inside the modal: the image column fills its half of
 * the card edge-to-edge; the summary column scrolls on its own. */
.wda-wqv-product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* An explicit 1fr row fills the dialog height. Without it the row
	 * defaults to `auto`, which collapses to the summary's content
	 * height (the image column's children are absolutely positioned and
	 * contribute no height) — leaving a white gap below short products. */
	grid-template-rows: minmax(0, 1fr);
	gap: 0;
	width: 100%;
	height: 100%;
}

.wda-wqv-product__images {
	position: relative;
	height: 100%;
	overflow: hidden;
	/* Neutral matting so any image aspect ratio reads as intentional,
	 * never as a raw white gap. */
	background: var(--wda-wqv-image-bg, #f3f4f6);
}

/* Anchored with inset:0 rather than height:100%. A percentage-height
 * chain silently collapses on block themes (any ancestor without a
 * definite height makes the img fall back to its intrinsic ratio and
 * leaves a gap); absolute positioning fills the column no matter what
 * the cascade reports. */
.wda-wqv-modal .wda-wqv-images-inner {
	position: absolute;
	inset: 0;
}

.wda-wqv-images-inner .onsale {
	position: absolute;
	inset-block-start: 0.9em;
	inset-inline-start: 0.9em;
	z-index: 2;
}

.wda-wqv-modal .wda-wqv-main-image {
	position: absolute;
	inset: 0;
}

.wda-wqv-modal .wda-wqv-main-image img {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 0;
}

/* Thumbnails float over the bottom of the image column. */
.wda-wqv-thumbs {
	position: absolute;
	inset-inline-start: 0.75rem;
	inset-inline-end: 0.75rem;
	inset-block-end: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	z-index: 2;
}

.wda-wqv-modal .wda-wqv-thumb {
	margin: 0;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.9);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	line-height: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wda-wqv-thumb img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.wda-wqv-modal .wda-wqv-thumb.is-active {
	border-color: var(--wda-wqv-dark);
}

/* Summary column: an inner scroll area plus a footer bar pinned below
 * it, so the "View Details" link stays visible while content scrolls. */
.wda-wqv-product__summary {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.wda-wqv-product__summary-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 2.5rem 2.75rem 2.25rem 2.5rem;
	/* Thin minimal scrollbar (Firefox + Chromium 121+). */
	scrollbar-width: thin;
	scrollbar-color: #c1c1c1 transparent;
}

/* Same thin scrollbar for older WebKit/Chromium. */
.wda-wqv-product__summary-scroll::-webkit-scrollbar {
	width: 6px;
}

.wda-wqv-product__summary-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.wda-wqv-product__summary-scroll::-webkit-scrollbar-thumb {
	background-color: #c1c1c1;
	border-radius: 6px;
}

.wda-wqv-product__summary-scroll::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}

/* The modal owns its type scale — theme product-page sizes are too
 * large for this column. The summary pins its own base font too:
 * fluid-typography themes (e.g. Twenty Twenty-Five, ~18px base) would
 * otherwise inflate every inherited size in the modal. */
.wda-wqv-product__summary {
	font-size: 15px;
	line-height: 1.6;
}

/* Paragraphs take their container's size — block themes emit element-
 * level `p` font rules that would override inheritance. */
.wda-wqv-product__summary p {
	font-size: inherit;
	line-height: inherit;
}

.wda-wqv-product__summary .product_title {
	font-size: 23px;
	line-height: 1.25;
	font-weight: 600;
	margin: 0 0 0.6rem;
	padding-inline-end: 2rem;
}

.wda-wqv-product__summary .price {
	display: block;
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 1rem;
}

.wda-wqv-product__summary .woocommerce-product-details__short-description {
	font-size: 14px;
	line-height: 1.65;
}

.wda-wqv-product__summary .product_meta {
	font-size: 13px;
	color: var(--wda-wqv-muted);
	margin-top: 1rem;
}

.wda-wqv-product__summary .product_meta > span {
	display: block;
	margin-bottom: 0.3rem;
}

.wda-wqv-product__summary form.cart {
	margin: 1.25rem 0;
}

/* ------------------------------------------------------------------
 * Modal form + content polish (theme-proofed)
 * ------------------------------------------------------------------ */

/* Qty + add-to-cart aligned on one row. :has() limits the flex to forms
 * with a direct quantity child, so grouped forms (table layout) keep
 * their block flow; old browsers simply keep the theme layout. */
.wda-wqv-modal form.cart:has(> .quantity),
.wda-wqv-modal .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.wda-wqv-modal form.cart:has(> .quantity) .button,
.wda-wqv-modal .woocommerce-variation-add-to-cart .button {
	margin: 0;
}

/* Quantity stepper: −/+ buttons added by JS, since many themes hide or
 * break the native number spinners, leaving no way to change quantity.
 * Armored (see the loop-overlay armor note). */
.wda-wqv-modal .quantity.wda-wqv-qty {
	display: inline-flex;
	align-items: stretch;
	height: 44px;
	margin: 0;
	float: none;
	border: 1px solid #d7d9dd;
	border-radius: 6px;
	background: var(--wda-wqv-surface);
	overflow: hidden;
}

.wda-wqv-modal .wda-wqv-qty input.qty:not(#wda-wqv-boost) {
	width: 44px !important;
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--wda-wqv-text) !important;
	font-size: 15px;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

.wda-wqv-modal .wda-wqv-qty input.qty::-webkit-outer-spin-button,
.wda-wqv-modal .wda-wqv-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wda-wqv-modal .wda-wqv-qty-btn:not(#wda-wqv-boost) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--wda-wqv-muted) !important;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.wda-wqv-modal .wda-wqv-qty-btn:not(#wda-wqv-boost):hover,
.wda-wqv-modal .wda-wqv-qty-btn:not(#wda-wqv-boost):focus-visible {
	background: #f5f6f7 !important;
	color: var(--wda-wqv-text) !important;
}

/* Stock status line: "Availability:" label + status, one row. Covers
 * WooCommerce's native output (low-stock counts, out of stock) and the
 * plugin's fallback badge alike. */
.wda-wqv-modal .wda-wqv-product .wda-wqv-availability {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 0.75rem;
	font-size: 13px;
}

.wda-wqv-modal .wda-wqv-product .wda-wqv-availability__label {
	font-weight: 600;
	color: var(--wda-wqv-text);
}

.wda-wqv-modal .wda-wqv-product .wda-wqv-availability p.stock {
	margin: 0;
}

.wda-wqv-modal .wda-wqv-product p.stock {
	margin: 0 0 0.75rem;
	font-size: 13px;
	font-weight: 600;
}

.wda-wqv-modal .wda-wqv-product p.stock.in-stock {
	color: var(--wda-wqv-success);
}

.wda-wqv-modal .wda-wqv-product p.stock.out-of-stock {
	color: var(--wda-wqv-accent);
}

.wda-wqv-modal .wda-wqv-product p.stock.available-on-backorder {
	color: var(--wda-wqv-warning);
}

/* Rating: stars and the review-count link on one line. Prefixed with
 * .wda-wqv-product to outrank WooCommerce core's div.product rating
 * rules (floats, margins), which match inside the modal too. */
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	/* Flush left, on the same edge as the title and the rest of the
	 * summary — themes center or indent this block. */
	justify-content: flex-start;
	gap: 8px;
	float: none;
	width: 100%;
	margin: 0 0 0.6rem;
	padding: 0;
	text-align: start;
}

.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating .star-rating {
	float: none;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

/* Stars first, link second — some theme templates print them reversed. */
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating .star-rating,
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating .wda-wqv-stars {
	order: 1;
}

.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating .woocommerce-review-link {
	order: 2;
}

/* WooCommerce's clearfix ::before/::after on this block become FLEX
 * ITEMS in our flex row — the ::before claims the first slot plus the
 * gap, indenting the stars off the title's left edge. */
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating::before,
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating::after {
	content: none !important;
	display: none !important;
}

/* Only stars + link may occupy the row: themes inject extra elements
 * into the rating block, and even an invisible one claims a flex slot
 * plus the gap, indenting the stars off the title's left edge. */
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating > :not(.wda-wqv-stars):not(.star-rating):not(.woocommerce-review-link) {
	display: none;
}

/* Never show the theme's star markup next to our SVG stars. */
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating:has(.wda-wqv-stars) .star-rating {
	display: none;
}

/* Armor the flush-left alignment against high-specificity theme rules. */
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating:not(#wda-wqv-boost) {
	margin-inline-start: 0 !important;
	padding-inline-start: 0 !important;
	text-indent: 0 !important;
}

.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating:not(#wda-wqv-boost) > :first-child {
	margin-inline-start: 0 !important;
	padding-inline-start: 0 !important;
}

/* Own SVG stars (rendered by the modal in place of the star font):
 * an outline base row with an amber filled row clipped to the rating
 * percentage on top. Immune to theme star-font styling. */
.wda-wqv-modal .wda-wqv-product .wda-wqv-stars {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	line-height: 0;
}

.wda-wqv-modal .wda-wqv-stars .wda-wqv-stars__base,
.wda-wqv-modal .wda-wqv-stars .wda-wqv-stars__fill {
	display: inline-flex;
	gap: 2px;
	white-space: nowrap;
}

.wda-wqv-modal .wda-wqv-stars .wda-wqv-stars__base {
	color: #cfd2d6;
}

.wda-wqv-modal .wda-wqv-stars .wda-wqv-stars__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: #f7a71b;
}

.wda-wqv-modal .wda-wqv-stars svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	display: block;
}

.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating .woocommerce-review-link {
	font-size: 13px;
	line-height: 1.2;
	color: var(--wda-wqv-muted);
	text-decoration: none;
}

.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating .woocommerce-review-link:hover,
.wda-wqv-modal .wda-wqv-product .woocommerce-product-rating .woocommerce-review-link:focus-visible {
	color: var(--wda-wqv-accent);
	text-decoration: underline;
}

/* Attributes / additional information table: flat, compact rows in the
 * modal's own style — themes bring doubled borders, zebra stripes and
 * italics that read as broken here. */
.wda-wqv-modal .wda-wqv-attributes {
	margin: 1rem 0;
}

.wda-wqv-modal .wda-wqv-attributes table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	border: 1px solid var(--wda-wqv-separator);
	font-size: 13px;
}

.wda-wqv-modal .wda-wqv-attributes th,
.wda-wqv-modal .wda-wqv-attributes td {
	padding: 0.55rem 0.8rem;
	border: 0;
	border-bottom: 1px solid var(--wda-wqv-separator);
	background: none;
	text-align: start;
	vertical-align: middle;
}

.wda-wqv-modal .wda-wqv-attributes tr:last-child th,
.wda-wqv-modal .wda-wqv-attributes tr:last-child td {
	border-bottom: 0;
}

.wda-wqv-modal .wda-wqv-attributes th {
	width: 38%;
	font-weight: 600;
	color: var(--wda-wqv-text);
}

.wda-wqv-modal .wda-wqv-attributes td {
	color: var(--wda-wqv-muted);
	font-style: normal;
}

.wda-wqv-modal .wda-wqv-attributes td p {
	margin: 0;
	font-size: 13px;
	font-style: normal;
}

/* Variations form: quiet table, sized selects. */
.wda-wqv-modal table.variations {
	width: 100%;
	margin: 0 0 0.75rem;
	border: 0;
	border-collapse: collapse;
}

.wda-wqv-modal table.variations th,
.wda-wqv-modal table.variations td {
	padding: 0.3rem 0;
	border: 0;
	background: none;
	text-align: start;
	vertical-align: middle;
}

.wda-wqv-modal table.variations th {
	padding-inline-end: 0.75rem;
	font-weight: 600;
	font-size: 14px;
}

.wda-wqv-modal table.variations select {
	max-width: 100%;
	min-height: 38px;
	font-size: 14px;
}

.wda-wqv-modal .reset_variations {
	font-size: 12px;
	color: var(--wda-wqv-muted);
}

.wda-wqv-modal .woocommerce-variation-price {
	margin-bottom: 0.5rem;
}

/* Grouped products list. */
.wda-wqv-modal .woocommerce-grouped-product-list {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
}

.wda-wqv-modal .woocommerce-grouped-product-list td {
	padding: 0.5rem 0.5rem 0.5rem 0;
	border: 0;
	border-bottom: 1px solid var(--wda-wqv-separator);
	background: none;
	vertical-align: middle;
}

/* Sale price pair: quiet the old price, no underline on the new one. */
.wda-wqv-product__summary .price del {
	opacity: 0.55;
	font-weight: 400;
	font-size: 0.85em;
}

.wda-wqv-product__summary .price ins {
	text-decoration: none;
}

/* Footer bar: uppercase label + arrow, pinned below the scroll area. */
.wda-wqv-modal .wda-wqv-details-link {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.2rem;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--wda-wqv-separator);
	background: var(--wda-wqv-surface);
	color: var(--wda-wqv-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: 0.35s ease;
}

.wda-wqv-modal .wda-wqv-details-link:hover,
.wda-wqv-modal .wda-wqv-details-link:focus {
	background: #f7f7f7;
	color: var(--wda-wqv-accent);
	text-decoration: none;
}

.wda-wqv-modal .wda-wqv-details-link:focus-visible {
	outline: 2px solid var(--wda-wqv-accent);
	outline-offset: -2px;
}

.wda-wqv-modal .wda-wqv-details-link svg {
	width: 16px;
	height: 16px;
}

.wda-wqv-description {
	margin: 0.75rem 0;
	font-size: 14px;
	line-height: 1.65;
}

.wda-wqv-attributes {
	margin-top: 1rem;
}

.wda-wqv-modal form.cart.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Spinner */
/* Orbit spinner: three rings spinning on tilted 3D axes. */
.wda-wqv-spinner {
	position: relative;
	width: 62px;
	height: 62px;
	margin: auto;
	border-radius: 50%;
	perspective: 780px;
}

.wda-wqv-spinner__orbit {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	border-radius: 50%;
}

.wda-wqv-spinner__orbit--one {
	border-bottom: 3px solid var(--wda-wqv-dark, #000);
	animation: wda-wqv-orbit-one 1.15s linear infinite;
}

.wda-wqv-spinner__orbit--two {
	border-right: 3px solid var(--wda-wqv-dark, #000);
	animation: wda-wqv-orbit-two 1.15s linear infinite;
}

.wda-wqv-spinner__orbit--three {
	border-top: 3px solid var(--wda-wqv-dark, #000);
	animation: wda-wqv-orbit-three 1.15s linear infinite;
}

@keyframes wda-wqv-orbit-one {
	from { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
	to { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}

@keyframes wda-wqv-orbit-two {
	from { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
	to { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes wda-wqv-orbit-three {
	from { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
	to { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}

/* ------------------------------------------------------------------
 * Toast notifications
 * ------------------------------------------------------------------ */

.wda-wqv-toasts {
	position: fixed;
	inset-inline-end: 1.25rem;
	inset-block-end: 1.25rem;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
}

.wda-wqv-toast {
	position: relative;
	max-width: min(440px, calc(100vw - 2.5rem));
	background: var(--wda-wqv-dark);
	color: #fff;
	padding: 0.9em 1.2em;
	border-radius: var(--wda-wqv-radius);
	box-shadow: var(--wda-wqv-shadow);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	font-size: 0.95em;
}

.wda-wqv-toast--sticky {
	padding-inline-end: 2.4em;
}

.wda-wqv-toast__close {
	position: absolute;
	inset-block-start: 0.35em;
	inset-inline-end: 0.35em;
	width: 1.6em;
	height: 1.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
}

.wda-wqv-toast__close:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* Theme-proofing: own the native-button reset on every control we
 * render as a <button>, at raised specificity. */
#wda-wqv-toasts .wda-wqv-toast__close,
.wda-wqv-wishlist .wda-wqv-remove,
.wda-wqv-share .wda-wqv-share-copy,
.wda-wqv-share .wda-wqv-share-native {
	appearance: none;
	-webkit-appearance: none;
	font-family: inherit;
	text-transform: none;
}

/* Elementor kit button styles are site-wide and the toast lives outside
 * any content container — re-own its close button at ID specificity. */
#wda-wqv-toasts .wda-wqv-toast__close {
	background: transparent;
	border: 0;
	border-radius: 999px;
	padding: 0;
	box-shadow: none;
	color: #fff;
}

#wda-wqv-toasts .wda-wqv-toast__close:hover,
#wda-wqv-toasts .wda-wqv-toast__close:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.wda-wqv-toast.is-visible {
	opacity: 1;
	transform: none;
}

.wda-wqv-toast--success {
	border-inline-start: 4px solid var(--wda-wqv-success);
}

.wda-wqv-toast--error {
	border-inline-start: 4px solid var(--wda-wqv-accent);
}

/* ID specificity: themes style bare `a`/`a:hover` globally (dark or
 * underline-effect treatments) which would repaint this link on the dark
 * toast into near-invisibility. */
#wda-wqv-toasts .wda-wqv-toast a {
	color: #fff;
	background: none;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity 0.15s ease;
}

#wda-wqv-toasts .wda-wqv-toast a:hover,
#wda-wqv-toasts .wda-wqv-toast a:focus-visible {
	color: #fff;
	background: none;
	opacity: 0.75;
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * Wishlist page table
 *
 * Self-contained layout: block themes have no shop_table styles and a
 * narrow content column, so the table brings its own minimum width,
 * scroll fallback, and a stacked layout for narrow containers.
 * ------------------------------------------------------------------ */

/* The whole wishlist section is the size container, so both the table
 * AND the actions row below it can adapt to the space they really get. */
.wda-wqv-wishlist {
	container: wda-wishlist / inline-size;
}

.wda-wqv-table-wrap {
	overflow-x: auto;
}

/* Own every border: zero out whatever the theme draws, then add back a
 * single row separator. Selectors are prefixed with the wrapper class so
 * theme rules like `.woocommerce table td` cannot outrank them. A slightly
 * reduced font size keeps the table refined against large theme
 * typography. */
.wda-wqv-wishlist .wda-wqv-wishlist-table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.875em;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table thead {
	background: var(--wda-wqv-table-head-bg);
}

.wda-wqv-wishlist .wda-wqv-wishlist-table th,
.wda-wqv-wishlist .wda-wqv-wishlist-table td {
	padding: 0.8rem 0.7rem;
	vertical-align: middle;
	text-align: start;
	border: 0;
	background: none;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table th {
	font-weight: 600;
	/* Explicit, because the head band's background is our own light token:
	 * dark themes set a light text color on the page container (some with
	 * !important) and inheritance would leave light-on-light header text.
	 * A direct declaration always beats inherited color. */
	color: var(--wda-wqv-text);
}

.wda-wqv-wishlist .wda-wqv-wishlist-table tbody tr {
	border: 0;
	border-bottom: 1px solid var(--wda-wqv-separator);
}

.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-remove {
	width: 28px;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-thumb {
	width: 96px;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-thumb a {
	display: block;
	max-width: 80px;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-thumb img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	border-radius: 6px;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-name a {
	font-weight: 600;
	text-decoration: none;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-name a:hover {
	text-decoration: underline;
}

.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-actions {
	text-align: end;
}

.wda-wqv-col-actions .button,
.wda-wqv-col-actions .add_to_cart_button {
	white-space: nowrap;
	margin: 0;
}

/* WooCommerce appends a "View cart" link right after any AJAX cart
 * button — cramped against the button in a table cell, and redundant
 * here: the toast confirms the add and the mini-cart updates. */
.wda-wqv-wishlist .wda-wqv-wishlist-table .added_to_cart {
	display: none;
}

/* Narrow containers (block-theme content columns, small screens):
 * stack each row as a labelled card instead of scrolling, and stack the
 * actions row so Add-all and Share cannot collide. */
@container wda-wishlist (max-width: 639px) {
	.wda-wqv-wishlist .wda-wqv-wishlist-table,
	.wda-wqv-wishlist .wda-wqv-wishlist-table tbody {
		display: block;
		min-width: 0;
	}

	.wda-wqv-wishlist .wda-wqv-wishlist-table thead {
		display: none;
	}

	.wda-wqv-wishlist .wda-wqv-wishlist-table tbody tr {
		display: block;
		position: relative;
		padding: 0.9rem 0;
		border: 0;
		border-bottom: 1px solid var(--wda-wqv-separator);
	}

	.wda-wqv-wishlist .wda-wqv-wishlist-table td {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 0.3rem 0;
		border: 0;
	}

	.wda-wqv-wishlist .wda-wqv-wishlist-table td[data-title]::before {
		content: attr(data-title);
		font-weight: 600;
	}

	.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-remove {
		position: absolute;
		inset-block-start: 0.9rem;
		inset-inline-end: 0;
		width: auto;
		padding: 0;
	}

	.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-thumb,
	.wda-wqv-wishlist .wda-wqv-wishlist-table .wda-wqv-col-actions {
		justify-content: flex-start;
	}

	.wda-wqv-wishlist .wda-wqv-wishlist-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wda-wqv-wishlist .wda-wqv-add-all {
		text-align: center;
	}

	.wda-wqv-wishlist .wda-wqv-share {
		justify-content: center;
	}
}

.wda-wqv-remove {
	display: inline-flex;
	width: 2em;
	height: 2em;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	line-height: 1;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	color: var(--wda-wqv-muted) !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.wda-wqv-remove svg {
	width: 14px;
	height: 14px;
	display: block;
}

.wda-wqv-remove:hover {
	background: var(--wda-wqv-chip-bg);
	color: var(--wda-wqv-accent) !important;
}

/* Armor (see the loop-overlay armor note): Elementor kit stylesheets
 * style every <button> site-wide — `.elementor-kit-N button:hover` paints
 * the kit's accent background and squares the corners, turning the ×
 * into a colored rectangle. ID-level lift keeps the circle ours. */
.wda-wqv-remove:not(#wda-wqv-boost) {
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 0 !important;
	box-shadow: none !important;
}

.wda-wqv-remove:not(#wda-wqv-boost):hover,
.wda-wqv-remove:not(#wda-wqv-boost):focus-visible {
	background: var(--wda-wqv-chip-bg) !important;
	color: var(--wda-wqv-accent) !important;
}

.wda-wqv-stock.in-stock {
	color: var(--wda-wqv-success);
}

.wda-wqv-stock.on-backorder {
	color: var(--wda-wqv-warning);
}

.wda-wqv-stock.out-of-stock {
	color: var(--wda-wqv-accent);
}

.wda-wqv-wishlist-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	margin-top: 1rem;
}

.wda-wqv-share {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.wda-wqv-share__label {
	font-weight: 600;
}

.wda-wqv-share a,
.wda-wqv-share button {
	display: inline-flex;
	width: 2.2em;
	height: 2.2em;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wda-wqv-chip-bg);
	color: var(--wda-wqv-chip-text);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.wda-wqv-share a:hover,
.wda-wqv-share button:hover {
	background: var(--wda-wqv-dark);
	color: #fff;
}

/* Armor (see the loop-overlay armor note): theme link rules with
 * :not()-inflated specificity and !important recolor the share anchors
 * while leaving the <button> ones alone, breaking the set's design and
 * consistency. ID-level lift keeps every circle in the chip style. */
.wda-wqv-share a:not(#wda-wqv-boost),
.wda-wqv-share button:not(#wda-wqv-boost) {
	background: var(--wda-wqv-chip-bg) !important;
	color: var(--wda-wqv-chip-text) !important;
	text-decoration: none !important;
	/* Elementor kit button styles square and repaint <button>s site-wide. */
	border: 0 !important;
	border-radius: 999px !important;
	padding: 0 !important;
	box-shadow: none !important;
	/* Buttons do not inherit font-size (UA 13px default) — on themes that
	   never restyle plain <button> the copy/native 2.2em circles would
	   compute smaller than the anchor ones. */
	font-size: inherit !important;
}

.wda-wqv-share a:not(#wda-wqv-boost):hover,
.wda-wqv-share a:not(#wda-wqv-boost):focus-visible,
.wda-wqv-share button:not(#wda-wqv-boost):hover,
.wda-wqv-share button:not(#wda-wqv-boost):focus-visible {
	background: var(--wda-wqv-dark) !important;
	color: #fff !important;
}

.wda-wqv-share-native[hidden] {
	display: none;
}

.wda-wqv-share svg {
	width: 1.1em;
	height: 1.1em;
}

.wda-wqv-pagination {
	margin-top: 1rem;
}

.wda-wqv-suggestions {
	margin-top: 2rem;
}

/* Stacked full-screen layout (QODE-style): image banner on top, summary
 * below, one vertical scroll. */
@media (max-width: 900px) {
	.wda-wqv-modal {
		padding: 0;
	}

	.wda-wqv-modal__dialog {
		width: 100%;
		max-width: none;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}

	/* Keep the sheet below the toolbar for logged-in users; the custom
	 * property is set by core whenever the bar renders. */
	.admin-bar .wda-wqv-modal__dialog {
		margin-block-start: var(--wp-admin--admin-bar--height, 0px);
		height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	}

	.wda-wqv-modal__content {
		display: block;
		height: 100%;
		overflow-y: auto;
		border-radius: 0;
	}

	.wda-wqv-product {
		/* minmax(0,…) as on desktop: a bare 1fr track floors at the image's
		 * min-content width, so a landscape photo (55dvh tall, width from
		 * aspect ratio) pushes the whole card wider than the phone screen. */
		grid-template-columns: minmax(0, 1fr);
		height: auto;
	}

	/* Back to normal flow so the stacked banner has real height (the
	 * desktop layout absolutely-positions these). */
	.wda-wqv-product__images {
		height: auto;
	}

	.wda-wqv-modal .wda-wqv-images-inner,
	.wda-wqv-modal .wda-wqv-main-image {
		position: static;
		height: auto;
	}

	/* Capped banner: content peeks above the fold (deliberate deviation
	 * from QODE's natural-height image). */
	.wda-wqv-modal .wda-wqv-main-image img {
		height: 55vh;
		height: 55dvh;
		object-fit: cover;
	}

	.wda-wqv-product__summary {
		display: block;
	}

	.wda-wqv-product__summary-scroll {
		overflow: visible;
		padding: 18px 28px 28px;
	}

	.wda-wqv-spinner {
		margin: 4rem auto;
	}
}


/* ------------------------------------------------------------------
 * Reduced motion
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.wda-wqv-modal__overlay,
	.wda-wqv-modal__dialog,
	.wda-wqv-modal__content > .wda-wqv-product {
		animation: none;
	}

	.wda-wqv-modal__loader {
		transition: none;
	}

	.wda-wqv-btn,
	.wda-wqv-loop-overlay .wda-wqv-btn,
	.wda-wqv-toast,
	.wda-wqv-remove,
	.wda-wqv-share a,
	.wda-wqv-share button,
	.wda-wqv-modal__close,
	.wda-wqv-modal .wda-wqv-details-link,
	.wda-wqv-modal .wda-wqv-details-link svg {
		transition: none;
	}

	.wda-wqv-modal .wda-wqv-details-link:hover svg {
		transform: none;
	}

	.wda-wqv-modal .wda-wqv-qty-btn:not(#wda-wqv-boost) {
		transition: none;
	}

	.wda-wqv-loop-overlay .wda-wqv-btn {
		transform: none;
	}

	.wda-wqv-toast {
		transform: none;
	}

	/* The spinner stays (it conveys loading state) but orbits gently. */
	.wda-wqv-spinner__orbit {
		animation-duration: 2.4s;
	}
}

.wpdevart-main-container .wda-wqv-wishlist .wda-wqv-wishlist-table thead {
	background: #141414;
}

.wpdevart-main-container .wda-wqv-wishlist .wda-wqv-wishlist-table th {
	color: #ffffff;
}

.wpdevart-main-container .wda-wqv-wishlist .wda-wqv-wishlist-table tbody tr {
    border-bottom: 1px solid #3c3c3c;
}