/* Wishlist (Phase 10B) — header "Saved" link/count, My Account list + share
   panel, public share page. The product-card/PDP button's own base styling
   stays in product-card.css / product.css (it already owned that selector
   from the disabled placeholder); this file only adds the two files' shared
   interactive/"saved" state, plus everything that didn't exist before this
   phase. */

.k-header__utility [data-wishlist-count],
.k-mobile-panel__wishlist {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

/* Phase 11B.1: the desktop utility bar's own copy doesn't fit its content at
   phone widths (confirmed cause of a real horizontal-overflow bug — Playwright
   measured 409px of content in a 390px viewport, entirely from this one link).
   Same max-width: 899px pattern the theme toggle, region selector, and search
   toggle already use for this identical problem (see header.css/region-
   selector.css/search.css) — the header copy hides, .k-mobile-panel__wishlist
   (already always visible in the mobile nav panel) is the reachable control
   below this width instead. Nothing about Wishlist itself is removed. */
@media (max-width: 899px) {
	.k-header__utility [data-wishlist-count] {
		display: none;
	}
}

/* ---- My Account / share page list ---- */
/* Visual Polish 3: brought onto the same restrained-hairline/token language
   as the rest of the account shell (account.css) and PDP/header — this
   panel previously used --k-border-cta (a strong, 0.5-alpha border meant
   for outline CTA buttons, see base/components.css's .k-btn--outline) for
   plain dividers and a literal 300ms everywhere a token already exists for
   that, which read as heavier/more generic than the rest of the system.
   Buttons keep --k-border-cta (that IS the right token for an outline
   button, same as .k-btn--outline) — only the non-button dividers/panel
   border below move to the quieter hairline tokens. */

.k-wishlist {
	max-width: 720px;
}

.k-wishlist__share {
	background: var(--k-color-bg-surface);
	border: 1px solid var(--k-border-hairline);
	padding: 24px;
	margin-bottom: clamp(28px, 3.4vw, 44px);
}

.k-wishlist__share-heading {
	font-size: var(--k-text-label);
	letter-spacing: var(--k-tracking-label);
	text-transform: uppercase;
	color: var(--k-color-muted-2);
	margin: 0 0 10px;
}

.k-wishlist__share-note {
	color: var(--k-color-muted-2);
	font-size: 13px;
	margin: 0 0 12px;
}

.k-wishlist__share-btn {
	background: none;
	border: 1px solid var(--k-border-cta);
	padding: 9px 18px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
	color: var(--k-color-text);
	cursor: pointer;
	margin: 0 8px 0 0;
	transition: background var(--k-duration-base), color var(--k-duration-base), border-color var(--k-duration-base);
}

.k-wishlist__share-btn:hover,
.k-wishlist__share-btn:focus-visible {
	background: var(--k-color-text);
	border-color: var(--k-color-text);
	color: var(--k-color-bg);
}

.k-wishlist__share-btn--danger {
	border-color: var(--k-color-danger);
	color: var(--k-color-danger);
}

.k-wishlist__share-btn--danger:hover,
.k-wishlist__share-btn--danger:focus-visible {
	background: var(--k-color-danger);
	border-color: var(--k-color-danger);
	color: var(--k-color-bg);
}

.k-wishlist__share-url {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.k-wishlist__share-input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid var(--k-border-hairline-strong);
	background: var(--k-color-bg-raised);
	color: var(--k-color-text);
	font: inherit;
}

/* A single quiet line still reads as sparse next to the refined share
   panel above it — real copy (karataki_t(), unchanged), just given room
   and a top rule so it presents as a considered empty state, not a
   leftover default WooCommerce sentence. */
.k-wishlist__empty {
	color: var(--k-color-muted-2);
	padding: clamp(28px, 4vw, 48px) 0;
	border-top: 1px solid var(--k-border-hairline);
	text-align: center;
}

.k-wishlist__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.k-wishlist__item {
	display: grid;
	grid-template-columns: 84px 1fr auto;
	gap: 20px;
	align-items: center;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--k-border-hairline);
}

.k-wishlist__item-media {
	display: block;
	width: 84px;
	height: 84px;
	background: var(--k-color-disabled-surface);
	overflow: hidden;
}

.k-wishlist__item-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.k-wishlist__item-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.k-wishlist__item-name {
	font-size: 15px;
	color: var(--k-color-text);
}

.k-wishlist__item-price {
	color: var(--k-color-muted-2);
	font-variant-numeric: tabular-nums;
}

.k-wishlist__item-stock {
	font-size: var(--k-text-label);
	letter-spacing: var(--k-tracking-label);
	text-transform: uppercase;
	color: var(--k-color-danger);
}

.k-wishlist__item-remove {
	background: none;
	border: 1px solid var(--k-border-cta);
	padding: 9px 16px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
	color: var(--k-color-text);
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--k-duration-base), color var(--k-duration-base), border-color var(--k-duration-base);
}

.k-wishlist__item-remove:hover,
.k-wishlist__item-remove:focus-visible {
	background: var(--k-color-text);
	border-color: var(--k-color-text);
	color: var(--k-color-bg);
}

@media (max-width: 480px) {
	.k-wishlist__item {
		grid-template-columns: 56px 1fr;
		gap: 14px;
		padding-bottom: 18px;
	}

	/* The media column shrank to 56px above (kept from before this pass) —
	   the image itself was still hardcoded to the desktop 72px/now 84px
	   box here, silently overflowing its own grid column at this width.
	   Not something this pass introduced, but real and worth fixing while
	   already in this file for the "keep mobile stack clean" goal. */
	.k-wishlist__item-media {
		width: 56px;
		height: 56px;
	}

	.k-wishlist__item-remove {
		grid-column: 1 / -1;
	}
}