/* Canonical commerce-drawer values, mirrored in the Next and FunnelKit CSS:
 * ivory shell, 22px/17px header padding, 9px copper eyebrow, 30px serif
 * title, 44px close target, 82px/72px media, and 19px/14px title-price rhythm.
 * All values reuse existing ZENAUURA tokens; do not create a parallel palette. */

body.z-wishlist-drawer-open {
	overflow: hidden;
}

/* Drawer backdrop */
.z-wishlist-drawer {
	position: fixed;
	inset: 0;
	z-index: 1200;
	visibility: hidden;
}

.z-wishlist-drawer.is-open {
	visibility: visible;
}

.z-wishlist-drawer__overlay {
	position: absolute;
	inset: 0;
	background: var(--z-midnight);
	opacity: 0.58;
	backdrop-filter: blur(2px);
}

/* Panel slides in from right */
.z-wishlist-drawer.is-open .z-wishlist-drawer__panel {
	transform: none;
}

.z-wishlist-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: min(460px, 90vw);
	height: 100%;
	background: var(--z-ivory);
	box-shadow: -28px 0 70px rgba(2, 10, 19, 0.3);
	color: var(--z-color-midnight);
	transform: translateX(100%);
	transition: transform var(--z-transition-menu);
}

/* Header selectors include the rendered panel structure so global heading and
 * control rules cannot compress the approved drawer typography. */
body .z-wishlist-drawer__panel > .z-wishlist-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px;
	border-bottom: 1px solid rgba(29, 33, 30, 0.12);
	background: var(--z-ivory);
	color: var(--z-color-midnight);
}

body .z-wishlist-drawer__panel > .z-wishlist-drawer__header > div {
	flex: 1 1 auto;
	min-width: 0;
}

/* Explicit display defeats broad WordPress/plugin paragraph visibility rules
 * without changing the approved header rhythm. */
body .z-wishlist-drawer__panel > .z-wishlist-drawer__header > div > .z-wishlist-drawer__eyebrow {
	display: block !important;
	visibility: visible;
	opacity: 1;
	margin: 0;
	color: var(--z-copper-dark);
	font: 800 9px/1.4 var(--z-family-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

body .z-wishlist-drawer__panel > .z-wishlist-drawer__header h2 {
	margin: 4px 0 0;
	color: var(--z-color-midnight);
	font: 600 30px/1.05 var(--z-family-heading);
	letter-spacing: -0.02em;
	white-space: normal;
}

body .z-wishlist-drawer__panel > .z-wishlist-drawer__header h2 span {
	font: inherit;
	letter-spacing: inherit;
}

body .z-wishlist-drawer__panel > .z-wishlist-drawer__header > .z-wishlist-drawer__close {
	display: grid;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--z-color-midnight);
	border-radius: 0;
	transition: background var(--z-transition-fast), color var(--z-transition-fast);
}

body .z-wishlist-drawer__panel > .z-wishlist-drawer__header > .z-wishlist-drawer__close:hover {
	background: var(--z-cream);
	color: var(--z-copper-dark);
}

body .z-wishlist-drawer__panel > .z-wishlist-drawer__header > .z-wishlist-drawer__close svg {
	width: 21px;
	height: 21px;
}

/* Body scrolls independently */
body .z-wishlist-drawer__panel > .z-wishlist-drawer__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 7px 22px 22px;
}

/* Product rows match cart proportions */
.z-wishlist-drawer__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Item row: same as cart .fkcart--item */
body .z-wishlist-drawer__body .z-wishlist-drawer__item {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr) 32px;
	gap: 18px;
	padding: 19px 0;
	border-bottom: 1px solid rgba(29, 33, 30, 0.12);
}

/* Image: same 82px × 82px wrapper as cart, image 100% of wrapper */
.z-wishlist-drawer__image {
	width: 82px;
	height: 82px;
	flex: 0 0 82px;
	background: var(--z-cream);
}

.z-wishlist-drawer__image img {
	width: 100%;
	height: 100%;
	border: 1px solid rgba(161, 109, 44, 0.2);
	border-radius: var(--z-radius-compact);
	object-fit: cover;
}

/* Product title + price + stock */
.z-wishlist-drawer__copy {
	min-width: 0;
}

body .z-wishlist-drawer__item > .z-wishlist-drawer__copy > a {
	color: var(--z-color-midnight);
	font: 600 19px/1.15 var(--z-family-heading);
	text-decoration: none;
}

body .z-wishlist-drawer__item .z-wishlist-drawer__price {
	margin-top: 7px;
	font: 700 14px/1.4 var(--z-family-body);
	color: var(--z-copper-dark);
}

/* Stock state */
.z-wishlist-drawer__stock {
	display: block;
	margin-top: 7px;
	font: 800 9px/1.4 var(--z-family-body);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.z-wishlist-drawer__stock.is-in-stock {
	color: #56704b;
}

.z-wishlist-drawer__stock.is-out-of-stock {
	color: #9b3b2d;
}

/* Add to Cart retains TI's existing action semantics. */
.z-wishlist-drawer__actions {
	display: block;
	margin-top: 15px;
}

/* Remove control matches the public drawer's upper-right 32px X. */
.z-wishlist-drawer__remove {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	align-self: start;
	border: 1px solid rgba(161, 109, 44, 0.35);
	border-radius: 50%;
	background: var(--z-ivory);
	box-shadow: 0 3px 10px rgba(4, 16, 31, 0.15);
	color: var(--z-copper-dark);
	cursor: pointer;
}

.z-wishlist-drawer__remove:hover,
.z-wishlist-drawer__remove:focus-visible {
	border-color: var(--z-copper-dark);
	color: var(--z-navy);
	outline: none;
}

.z-wishlist-drawer__remove svg {
	width: 16px;
	height: 16px;
}

/* Primary action button: same as cart primary button */
.z-wishlist-drawer__button {
	display: inline-flex;
	min-height: 52px;
	padding: 0 16px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--z-copper-dark);
	background: var(--z-copper-dark);
	color: #fff;
	font: 700 13px/1.2 var(--z-family-sans);
	letter-spacing: var(--z-track-button);
	text-transform: uppercase;
	box-shadow: 0 12px 26px rgba(87, 52, 14, 0.18);
	transition: background var(--z-transition-fast), border-color var(--z-transition-fast), transform var(--z-transition-fast);
	cursor: pointer;
}

.z-wishlist-drawer__button:hover,
.z-wishlist-drawer__button:focus {
	border-color: var(--z-copper-hover);
	background: var(--z-copper-hover);
	transform: translateY(-1px);
}

.z-wishlist-drawer__button:disabled {
	cursor: wait;
	opacity: 0.65;
}

/* Empty state matches cart zero state */
.z-wishlist-drawer__empty {
	display: grid;
	min-height: 300px;
	place-content: center;
	gap: 17px;
	margin: 0;
	padding: 54px 22px;
	text-align: center;
}

.z-wishlist-drawer__empty p {
	margin: 0;
	font: 600 30px/1.05 var(--z-family-heading);
	color: var(--z-color-navy);
}

/* CTA button in empty state: same copper primary as cart */
.z-wishlist-drawer__empty .z-wishlist-drawer__button {
	min-height: 52px;
	padding: 0 15px;
}

/* Small phones: near-full width with the shared 8px edge gap. */
@media (max-width: 480px) {
	.z-wishlist-drawer__panel {
		right: 8px;
		width: calc(100vw - 16px);
		height: calc(100% - 16px);
		top: 8px;
	}

	body .z-wishlist-drawer__panel > .z-wishlist-drawer__header {
		padding: 20px 17px;
	}

	body .z-wishlist-drawer__panel > .z-wishlist-drawer__header h2 {
		font-size: 30px;
	}

	body .z-wishlist-drawer__panel > .z-wishlist-drawer__body {
		padding: 7px 17px 22px;
	}

	body .z-wishlist-drawer__body .z-wishlist-drawer__item {
		grid-template-columns: 72px minmax(0, 1fr) 32px;
		gap: 14px;
		padding: 17px 0;
	}

	.z-wishlist-drawer__image {
		width: 72px;
		height: 72px;
	}

	.z-wishlist-drawer__image img {
		height: 72px;
	}

	body .z-wishlist-drawer__item > .z-wishlist-drawer__copy > a {
		font-size: 19px;
	}
}

/* Keep the entire drawer below WordPress's logged-in admin bar while retaining
 * the approved 8px outer gap and a matching 8px bottom gap. */
body.admin-bar .z-wishlist-drawer__panel {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + 8px);
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px) - 16px);
}

@media (max-width: 782px) {
	body.admin-bar .z-wishlist-drawer__panel {
		top: calc(var(--wp-admin--admin-bar--height, 46px) + 8px);
		height: calc(100dvh - var(--wp-admin--admin-bar--height, 46px) - 16px);
	}
}