/**
 * PP wishlist — inline variation add-to-cart.
 * Swatch base styles (size, border, dot) live in the wishlist shortcode widget's
 * Elementor Custom CSS (.pp-wl-swatch*). This file only adds the interactive
 * selected state + the inline Add-To-Cart button + status message.
 */
.pp-wl-swatches--inline .pp-wl-swatch {
	cursor: pointer;
	background: none;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
}

.pp-wl-swatches--inline .pp-wl-swatch.is-selected {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1053b7;
}

.pp-wl-swatches--inline .pp-wl-swatch:focus-visible {
	outline: 2px solid #1053b7;
	outline-offset: 2px;
}

/* Colour that can't reach a real variation given the current selection. */
.pp-wl-swatches--inline .pp-wl-swatch.is-unavailable {
	opacity: 0.3;
	cursor: not-allowed;
	position: relative;
}

.pp-wl-swatches--inline .pp-wl-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient( to top right, transparent 45%, #6b7075 45%, #6b7075 55%, transparent 55% );
}

/* Centre the whole inline column (swatch rows, dropdown, button) on the
   Add To Cart button. The container is a column flex, so align-items centres
   every child on the cross axis; justify-content centres swatches within a row. */
.pp-wl-swatches--inline {
	align-items: center;
	text-align: center;
}

.pp-wl-swatches--inline .pp-wl-swatch-group {
	justify-content: center;
}

/* Each colour axis = a label (e.g. "Seat & Top Color") to the LEFT of its swatch
   row. Fixed-width right-aligned label so the swatch rows line up in a column. */
.pp-wl-swatches--inline .pp-wl-axis {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.pp-wl-swatches--inline .pp-wl-group-label {
	flex: 0 0 auto;
	width: 130px;
	text-align: right;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: #0e141b;
}

/* Non-colour axis dropdown (e.g. material). Basic on-brand styling — pending
   Miranda's design spec for the in-wishlist dropdown. */
.pp-wl-swatches--inline .pp-wl-select {
	display: block;
	margin-top: 10px;
	max-width: 220px;
	padding: 8px 12px;
	border: 1px solid #d9dad9;
	border-radius: 4px;
	background: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #0e141b;
	cursor: pointer;
}

.pp-wl-swatches--inline .pp-wl-select:focus-visible {
	outline: 2px solid #1053b7;
	outline-offset: 1px;
}

.pp-wl-atc {
	display: flex;
	align-items: center;
	justify-content: center; /* Figma 1469:37848 — Add To Cart centered under swatches */
	gap: 12px;
	margin-top: 8px;
}

/* NOTE: a site-wide `button { …!important }` rule (Elementor/PowerPack global CSS —
   transparent bg + 4px #1053b7 bottom border + 16px padding) overrides plain
   button styling, so these Figma values need !important to win (class+!important
   beats element+!important). Scoped to our class only — affects nothing else.
   The YITH wishlist "Edit Title" / save / cancel buttons share this styling so
   they match the Add To Cart text-link (Tif, July 6). */
.pp-wl-atc-btn,
.wishlist-title-container .show-title-form,
.wishlist-title-container .save-title-form,
.wishlist-title-container .hide-title-form {
	background: none !important;
	border: 0 !important;
	border-bottom: 0 !important;         /* kill injected 4px #1053b7 border */
	padding: 0 !important;               /* kill injected 16px padding */
	cursor: pointer;
	color: #1053b7 !important;           /* Figma: cobalt text */
	font-weight: 500 !important;         /* Figma: Inter Medium */
	font-size: 16px !important;
	line-height: 1.8 !important;         /* override injected 1.6 */
	text-decoration: underline !important;
	text-decoration-color: #1e70eb !important; /* Figma: lighter-blue underline */
	text-decoration-thickness: 2px !important; /* Figma: ~12% */
	font-family: 'Inter', sans-serif !important;
}

.pp-wl-atc-btn:hover,
.wishlist-title-container .show-title-form:hover,
.wishlist-title-container .save-title-form:hover,
.wishlist-title-container .hide-title-form:hover {
	color: #1e70eb !important;
}

.pp-wl-atc-btn[disabled] {
	color: #9aa0a6;
	cursor: not-allowed;
	text-decoration: none;
}

.pp-wl-atc-msg {
	font-size: 13px;
	color: #15950e;
}

.pp-wl-atc-msg--error {
	color: #e5001d;
}

/* "Add all to cart" status message + rows still needing a colour choice. */
.pp-wl-addall-msg {
	display: inline-block;
	margin-left: 12px;
	font-size: 14px;
	color: #15950e;
}

.pp-wl-addall-msg--error {
	color: #e5001d;
}

.pp-wl-needs-select,
.pp-wl-needs-select td {
	background: #fff5f5;
}

.pp-wl-needs-select td:first-child {
	box-shadow: inset 3px 0 0 0 #e5001d;
}

/* Inline rows render our swatch UI + text-link "Add To Cart" — suppress YITH's
   redundant native "Select options"/"Add to cart" button (not in Miranda's Figma).
   Scoped to rows that contain OUR button, so non-inline rows keep their native
   button (they have no inline add-to-cart). */
.wishlist_table td.product-add-to-cart:has( .pp-wl-atc-btn ) a.add_to_cart_button {
	display: none !important;
}

/* BugHerd #30272163 / #30272148 — wishlist table sizing.
   Desktop only; the mobile stacked view is Alex's (#30270785). */
@media (min-width: 992px) {
	.wishlist_table {
		width: 752px;
		max-width: 100%;
	}

	.wishlist_table td.product-name,
	.wishlist_table th.product-name {
		width: 220px;
	}
}

/* #369 — restore the inline variation swatches on mobile.
   The wishlist widget's Elementor Custom CSS hides `.pp-wl-swatches` inside its
   `@media (max-width:768px)` card treatment (the mobile stacked replacement,
   #30270785, was never built), so mobile users saw NO colour options and could
   not add a variable product to the cart from the wishlist. Un-hide the existing
   swatch UI and adapt it for a narrow card. Scoped to our own class; `!important`
   wins over the widget's non-important `display:none` regardless of its higher
   selector specificity, and avoids coupling to the fragile page/element IDs. */
@media (max-width: 768px) {
	.pp-wl-swatches--inline {
		display: flex !important;
	}

	/* The desktop axis is a 130px right-aligned label beside its swatch row —
	   too wide for a phone card. Stack the label above its swatches. */
	.pp-wl-swatches--inline .pp-wl-axis {
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}

	.pp-wl-swatches--inline .pp-wl-group-label {
		width: auto;
		text-align: center;
	}
}