/*
 * RahkarTheme — User Lists styles.
 *
 * Three visual surfaces in one stylesheet so the cascade resolves once
 * and the asset can be conditionally enqueued on both routes (product
 * single + my-account lists). Per the user's request, NOTHING here
 * styles the product-archive grid — heart icons live exclusively on
 * the single product page.
 *
 * Surfaces:
 *   1. .rh-list-actions    — floating heart + bookmark icon stack on
 *                            product single (positioned over gallery)
 *   2. .rh-list-modal      — "افزودن به لیست" <dialog>
 *   3. .rh-lists-page      — my-account lists screen (tabs + grid)
 *
 * Color tokens come from theme.json. Every prominent CTA in this feature
 * uses `primary` (the theme's brand blue) — that's what the shop owner
 * asked for, since `accent` (red) doesn't belong to their brand palette.
 *
 *   - primary       = #0a66c2 (blue) — heart fill, submit buttons,
 *                                       active tab underline, count
 *                                       badges, "+ لیست جدید", etc.
 *   - text          = #1a1d23
 *   - text-muted    = #5b6271
 *   - border        = #e2e4e9
 *   - surface       = #f7f7f8
 *   - muted         = #eceef1
 *   - base          = #ffffff
 *
 * Literal fallbacks accompany each var() so the file stays coherent if
 * a palette slug is later renamed.
 */

/* =====================================================================
 *  0. [hidden] attribute respect
 * =====================================================================
 *  Many elements below use display: flex/grid explicitly. Those rules
 *  beat the user-agent `[hidden] { display: none }` on specificity, so
 *  setting `el.hidden = true` in JS does nothing visually. We restate
 *  the rule scoped to this feature's classes so the JS toggle works.
 *  Scoped (not global) to avoid touching unrelated theme markup.
 */
.rh-list-actions [hidden],
.rh-list-modal   [hidden],
.rh-lists-page   [hidden] {
	display: none !important;
}

/* =====================================================================
 *  1. Heart + bookmark — inline beside the rating pill
 *
 *  Old behavior: floating absolute icons overlaying the gallery image.
 *  Now: rendered inside .rh-product__meta-row alongside .rh-product__rating
 *  on every viewport. One visible location, one tap each, no hidden
 *  affordance, no overlap with the product photo.
 * ===================================================================== */

.rh-list-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	/* When the rating pill renders alongside, this pushes the actions to
	 * the end of .rh-product__meta-row (left in RTL) — balanced row with
	 * meta info on one side, actions on the other. When the rating is
	 * absent (empty-state CTA only), this still works: a single flex item
	 * with margin-inline-start:auto + the CTA being inline-flex itself
	 * means the CTA hugs the start and the actions hug the end. */
	margin-inline-start: auto;
}
.rh-list-actions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 999px;
	color: var(--wp--preset--color--text-muted, #5b6271);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}
.rh-list-actions__btn svg {
	width: 19px;
	height: 19px;
}
.rh-list-actions__btn:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-list-actions__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 2px;
}

/* Heart — outline by default. Filled (primary blue) when active. */
.rh-list-actions__btn--fav svg {
	stroke: currentColor;
	stroke-width: 1.8;
	fill: none;
}
.rh-list-actions__btn--fav.is-active {
	color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-list-actions__btn--fav.is-active svg {
	fill: currentColor;
	stroke: currentColor;
}

@keyframes rh-list-pulse {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.18); }
	60%  { transform: scale(0.95); }
	100% { transform: scale(1); }
}
.rh-list-actions__btn.is-pulsing {
	animation: rh-list-pulse 0.4s ease;
}

/* =====================================================================
 *  2. "افزودن به لیست" modal (<dialog>)
 * ===================================================================== */
.rh-list-modal {
	border: none;
	padding: 0;
	background: transparent;
	max-width: none;
	max-height: none;
	overflow: visible;
}
.rh-list-modal::backdrop {
	background: rgba(15, 17, 21, 0.42);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.rh-list-modal {
	width: min(460px, calc(100vw - 32px));
	margin: auto;
	background: var(--wp--preset--color--base, #fff);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(15, 17, 21, 0.18);
	color: var(--wp--preset--color--text, #1a1d23);
	overflow: hidden;
}
.rh-list-modal__handle {
	display: none;
}
.rh-list-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px 6px;
}
.rh-list-modal__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}
.rh-list-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	color: var(--wp--preset--color--text, #1a1d23);
}
.rh-list-modal__close:hover {
	background: var(--wp--preset--color--muted, #eceef1);
}
.rh-list-modal__subtitle {
	margin: 0;
	padding: 0 20px 14px;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: 0.9rem;
}
.rh-list-modal__body {
	padding: 0 20px 16px;
	max-height: 60vh;
	overflow-y: auto;
}

/* "+ لیست جدید" — blue text link style (primary, not accent) */
.rh-list-modal__new-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 12px;
	background: transparent;
	color: var(--wp--preset--color--primary, #0a66c2);
	font-size: 0.95rem;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	margin-bottom: 10px;
}
.rh-list-modal__new-btn:hover {
	background: var(--wp--preset--color--surface, #f7f7f8);
}
.rh-list-modal__new-icon svg {
	width: 18px;
	height: 18px;
}

/* Inline new-list form */
.rh-list-modal__new-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 12px;
	margin-bottom: 10px;
	background: var(--wp--preset--color--surface, #f7f7f8);
}
.rh-list-modal__new-input {
	flex: 1 1 auto;
	padding: 8px 10px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	color: inherit;
	min-width: 0;
}
.rh-list-modal__new-input:focus {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 1px;
	border-color: transparent;
}
.rh-list-modal__new-save {
	padding: 8px 16px;
	border: none;
	border-radius: 8px;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	font-size: 0.9rem;
}
.rh-list-modal__new-save:hover {
	filter: brightness(0.95);
}
.rh-list-modal__new-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--text-muted, #5b6271);
	cursor: pointer;
	flex: 0 0 auto;
}

/* List rows */
.rh-list-modal__lists {
	list-style: none;
	padding: 0;
	margin: 0;
}
.rh-list-modal__item {
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 12px;
	margin-bottom: 8px;
	background: #fff;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}
.rh-list-modal__item:hover {
	border-color: var(--wp--preset--color--primary, #0a66c2);
}
/*
 * Grid layout (not flex with space-between) — `1fr auto` gives the
 * name column the full remaining width on whichever logical side it
 * lives, and the checkbox auto-sized on the opposite. align-items:
 * center keeps both children vertically centered no matter how the
 * name wraps. Solid baseline that survives wrapping + RTL/LTR.
 */
.rh-list-modal__check {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	cursor: pointer;
	min-height: 52px;
	margin-bottom: 0px !important;
}
.rh-list-modal__check-name {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text, #1a1d23);
	word-break: break-word;
}
/* Custom checkbox — consistent across browsers, brand-colored when on. */
.rh-list-modal__check input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1.6px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}
.rh-list-modal__check input[type="checkbox"]:checked {
	background: var(--wp--preset--color--primary, #0a66c2);
	border-color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-list-modal__check input[type="checkbox"]:checked::after {
	content: '';
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
.rh-list-modal__check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 2px;
}
.rh-list-modal__loading,
.rh-list-modal__empty {
	list-style: none;
	padding: 16px;
	text-align: center;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: 0.9rem;
}
.rh-list-modal__error {
	margin: 8px 0 0;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(10, 102, 194, 0.08);
	color: var(--wp--preset--color--primary, #0a66c2);
	font-size: 0.85rem;
}

/* Footer: انصراف + تایید — accent red */
.rh-list-modal__footer {
	display: flex;
	gap: 10px;
	padding: 14px 20px 20px;
	border-top: 1px solid var(--wp--preset--color--border, #e2e4e9);
}
.rh-list-modal__cancel,
.rh-list-modal__confirm {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--gap, 8px);
	min-height: var(--wp--custom--button--h--md, 44px);
	padding: 0 var(--wp--custom--button--px--md, 20px);
	border-radius: var(--wp--custom--button--radius, 10px);
	font-family: inherit;
	font-weight: var(--wp--custom--button--fw, 600);
	font-size: var(--wp--custom--button--fs--md, 0.9375rem);
	cursor: pointer;
	transition: filter 0.16s ease, background-color 0.16s ease;
}
.rh-list-modal__cancel {
	border: 1px solid var(--wp--preset--color--primary, #0a66c2);
	background: transparent;
	color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-list-modal__confirm {
	border: none;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
}
.rh-list-modal__confirm:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.rh-list-modal__cancel:hover  { background: rgba(10, 102, 194, 0.06); }
.rh-list-modal__confirm:hover { filter: brightness(0.95); }

/* Mobile bottom-sheet variant */
@media (max-width: 600px) {
	.rh-list-modal {
		width: 100%;
		max-width: 100%;
		margin: auto auto 0;
		border-radius: 16px 16px 0 0;
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.rh-list-modal__close { display: none; }
	.rh-list-modal__handle {
		display: block;
		width: 36px;
		height: 4px;
		background: var(--wp--preset--color--border, #e2e4e9);
		border-radius: 4px;
		margin: 10px auto 0;
	}
	.rh-list-modal__body { max-height: 50vh; }
}

/* =====================================================================
 *  3. My-account "/lists/" page
 * =====================================================================
 *  Pattern source: the "سفارش‌های من" (`/orders/`) screen — see
 *  assets/css/wc-account.css `.rh-acct-ord*` block. Token-for-token
 *  alignment with that file is the explicit user request so every
 *  custom account screen reads as one product.
 *
 *  Container has NO outer card — WC's my-account layout already provides
 *  the white background; we just claim a vertical rhythm with
 *  `padding-block: 1rem`. Same applies to title, tabs, empty state.
 */

.rh-lists-page {
	padding-block: 1rem;
	color: var(--wp--preset--color--text, #1a1d23);
}

.rh-lists-page__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1rem;
}
.rh-lists-page__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #0f1115);
}

/* Tab strip — matches .rh-acct-ord__tabs */
.rh-lists-tabs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--border, #e2e4e9);
	margin-block-end: 1rem;
	overflow-x: auto;          /* mobile: tabs scroll instead of wrap */
	scrollbar-width: none;
}
.rh-lists-tabs::-webkit-scrollbar { display: none; }
.rh-lists-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.625rem 0.75rem;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 600;
	color: var(--wp--preset--color--text-muted, #5b6271);
	background: transparent;
	border: none;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	font-family: inherit;
	transition: color 0.15s, border-color 0.15s;
}
.rh-lists-tab:hover {
	color: var(--wp--preset--color--contrast, #0f1115);
	text-decoration: none;
}
.rh-lists-tab.is-active {
	color: var(--wp--preset--color--primary, #0a66c2);
	border-bottom-color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-lists-tab__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.25rem;
	padding-inline: 0.375rem;
	border-radius: 0.625rem;
	background: var(--wp--preset--color--muted, #eceef1);
	color: var(--wp--preset--color--text, #1a1d23);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	font-weight: 700;
	line-height: 1;
}
.rh-lists-tab.is-active .rh-lists-tab__count {
	background: var(--wp--preset--color--primary, #0a66c2);
	color: var(--wp--preset--color--base, #fff);
}
.rh-lists-tab--add {
	width: 2.125rem;
	min-width: 2.125rem;
	justify-content: center;
	padding: 0.5rem 0;
	color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-lists-tab--add:hover {
	color: var(--wp--preset--color--primary, #0a66c2);
	background: var(--wp--preset--color--surface, #f7f7f8);
	border-radius: 0.5rem 0.5rem 0 0;
}

/* New-list form (right under tabs) */
.rh-lists-newform {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	margin-block-end: 1rem;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	background: var(--wp--preset--color--surface, #f7f7f8);
	flex-wrap: wrap;
}
.rh-lists-newform__input {
	flex: 1 1 200px;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 0.5rem;
	background: var(--wp--preset--color--base, #fff);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: inherit;
	min-width: 0;
}
.rh-lists-newform__input:focus {
	outline: 2px solid var(--wp--preset--color--primary, #0a66c2);
	outline-offset: 1px;
	border-color: transparent;
}
.rh-lists-newform__save {
	padding: 0.5rem 1.125rem;
	border: none;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: var(--wp--preset--color--base, #fff);
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}
.rh-lists-newform__save:hover { background: var(--wp--preset--color--primary-dark, #074a8d); }
.rh-lists-newform__cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--wp--preset--color--text-muted, #5b6271);
	cursor: pointer;
}
.rh-lists-newform__error {
	flex: 1 1 100%;
	margin: 0;
	color: var(--wp--preset--color--danger, #dc2626);
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}

/* Toolbar (sort + count) — same type scale as the orders meta row */
.rh-lists-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: 1rem;
	flex-wrap: wrap;
}
.rh-lists-toolbar__count {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-weight: 600;
}
.rh-lists-toolbar__count-num {
	color: var(--wp--preset--color--contrast, #0f1115);
}
.rh-lists-sort {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-lists-sort__label {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-inline-end: 0.25rem;
}
.rh-lists-sort__option {
	padding: 0.375rem 0.625rem;
	border: none;
	background: transparent;
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	font-weight: 500;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: color 0.16s ease, background-color 0.16s ease;
}
.rh-lists-sort__option:hover {
	background: var(--wp--preset--color--muted, #eceef1);
}
.rh-lists-sort__option.is-active {
	color: var(--wp--preset--color--primary, #0a66c2);
	font-weight: 700;
}

/* Panels */
.rh-lists-page__panels { margin-top: 4px; }
.rh-lists-panel { display: none; }
.rh-lists-panel.is-active { display: block; }

.rh-lists-panel__meta {
	display: flex;
	gap: 0.5rem;
	margin-block-end: 1rem;
	flex-wrap: wrap;
}
.rh-lists-panel__meta-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.625rem;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	background: transparent;
	color: var(--wp--preset--color--text-muted, #5b6271);
	border-radius: 0.5rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
	cursor: pointer;
}
.rh-lists-panel__meta-btn:hover {
	color: var(--wp--preset--color--text, #1a1d23);
	background: var(--wp--preset--color--surface, #f7f7f8);
}
.rh-lists-panel__meta-btn--danger:hover {
	color: var(--wp--preset--color--danger, #dc2626);
	border-color: var(--wp--preset--color--danger, #dc2626);
	background: rgba(220, 38, 38, 0.04);
}

/* Empty state — mirrors `.rh-acct-ord__empty` exactly so the lists
 * "no items" card looks identical to the orders "no orders" card. */
.rh-lists-panel__empty {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--wp--custom--radius--xl, 1rem);
	padding: 3rem 1.5rem;
	text-align: center;
	margin: 0;
}
.rh-lists-panel__empty-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--surface, #f7f7f8);
	color: var(--wp--preset--color--primary, #0a66c2);
}
.rh-lists-panel__empty-icon svg {
	width: 32px;
	height: 32px;
}
.rh-lists-panel__empty-text {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--md, 1rem);
	color: var(--wp--preset--color--text, #1a1d23);
}
.rh-lists-panel__empty-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.25rem;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: var(--wp--preset--color--base, #fff);
	border-radius: 0.5rem;
	font-weight: 600;
	text-decoration: none;
}
.rh-lists-panel__empty-cta:hover {
	background: var(--wp--preset--color--primary-dark, #074a8d);
	color: var(--wp--preset--color--base, #fff);
	text-decoration: none;
}

/* Grid */
.rh-lists-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
	gap: 0.875rem;
}

/* ---------- Mobile tweaks — same breakpoint as the orders screen ------- */
@media (max-width: 600px) {
	.rh-lists-page__title {
		font-size: var(--wp--preset--font-size--md, 1.125rem);
	}
	.rh-lists-tab {
		padding: 0.5rem 0.625rem;
	}
	.rh-lists-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}
	.rh-lists-panel__empty {
		padding: 2rem 1rem;
	}
	/* Toolbar wraps with the count on its own line — sort stays together */
	.rh-lists-toolbar {
		gap: 0.5rem;
	}
}

/*
 * Cells — thin wrapper around the shared product card.
 *
 * IMPORTANT: do not restyle .rpc-card / .rpc-card__title / .rpc-card__price
 * here. Those rules live in inc/product-card.css (enqueued via the
 * wp_enqueue_scripts hook in inc/user-lists-page.php) and we want the
 * cards on this screen to look pixel-identical to the archive grid.
 * Overrides here = visual drift; users notice.
 *
 * What this wrapper does:
 *   - Hosts the action bar (cart + trash) below the card.
 *   - Hides the card's own bottom-padding workaround so its bottom edge
 *     meets our action bar cleanly (the card reserves 20px under the
 *     price for descender clipping; inside our cell, the action bar
 *     border-top provides the same visual separation).
 *   - Pure layout — does not introduce a second border or shadow that
 *     would compete with the card's own.
 */
.rh-lists-cell {
	position: relative;
	display: flex;
	flex-direction: column;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.rh-lists-cell:hover {
	transform: translateY(-2px);
}
.rh-lists-cell.is-removing {
	opacity: 0.4;
	transform: scale(0.96);
	pointer-events: none;
}
/*
 * Disable the card's own hover-lift while it lives inside a cell — the
 * cell already lifts as a whole unit (above), so doubling the transform
 * would over-shoot. Card keeps its shadow on its own :hover; the cell's
 * combined silhouette is what reads as "hovering" to the user.
 */
.rh-lists-cell:hover .rpc-card {
	transform: none;
}
/*
 * The card is a self-contained <li class="rpc-card">. We let it own the
 * border + radius + background; the action bar nests inside its bottom
 * edge by sharing the same border-radius and sitting flush.
 *
 * `flex: 1 1 auto` lets cards in a row equalize height to the tallest;
 * the price row's `margin-top: auto` (set in product-card.css) then
 * pushes the price to the bottom of the card body, aligning every
 * card's price line at the same baseline.
 */
.rh-lists-cell .rpc-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/* Square off the bottom corners so the action bar's rounded bottom
	 * carries the visual radius for the combined unit. */
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.rh-lists-cell .rpc-card__link {
	flex: 1 1 auto;
}
/* Drop the 20px descender padding the card normally reserves under the
 * price — our action bar sits flush right below and the original gap
 * was meant for cards rendered with NO sibling. */
.rh-lists-cell .rpc-card__price {
	padding-bottom: 4px;
}
.rh-lists-cell__actions {
	display: flex;
	gap: 8px;
	padding: 8px;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-top: none;
	border-radius: 0 0 var(--rpc-radius, 12px) var(--rpc-radius, 12px);
	background: var(--wp--preset--color--surface, #f7f7f8);
}
.rh-lists-cell__form {
	flex: 1 1 auto;
	margin: 0;
}
.rh-lists-cell__add {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--wp--preset--color--primary, #0a66c2);
	background: #fff;
	color: var(--wp--preset--color--primary, #0a66c2);
	border-radius: 8px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.16s ease, color 0.16s ease;
}
.rh-lists-cell__add:hover {
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
}
.rh-lists-cell__add svg {
	width: 16px;
	height: 16px;
}
.rh-lists-cell__add.is-disabled {
	cursor: not-allowed;
	border-color: var(--wp--preset--color--border, #e2e4e9);
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-lists-cell__add.is-disabled:hover {
	background: #fff;
	color: var(--wp--preset--color--text-muted, #5b6271);
}
.rh-lists-cell__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	background: #fff;
	color: var(--wp--preset--color--text-muted, #5b6271);
	border-radius: 8px;
	cursor: pointer;
	flex: 0 0 auto;
	transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}
.rh-lists-cell__remove:hover {
	color: var(--wp--preset--color--primary, #0a66c2);
	border-color: var(--wp--preset--color--primary, #0a66c2);
	background: rgba(10, 102, 194, 0.04);
}
.rh-lists-cell__remove:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}