/* =============================================================================
 * RahkarTheme — quick view: the card button + the modal body.
 *
 * The modal SHELL (position, backdrop, the mobile bottom-sheet slide) is the
 * theme's shared <dialog> pattern driven by bottom-sheet.js; only the pieces
 * specific to quick view live here.
 *
 * Layout inside the modal (RTL): gallery at the inline START (visual RIGHT),
 * information beside it. Under 780px the two stack, gallery first.
 * ========================================================================== */

/* ---- The card button — DEFAULT skin (classic / bordered card modes) -----
 * Sits under the card's price, OUTSIDE its <a> (an interactive element cannot
 * nest in a link). That placement needs the card itself to become a column:
 * .rpc-card__link is `height: 100%`, so a plain second child would be pushed
 * past the card's box and clipped by its `overflow: hidden` — present in the
 * DOM and invisible on screen. Making the card a flex column and letting the
 * link GROW instead fixes it, and has a second benefit: the button lands on the
 * card's bottom edge, so the buttons line up across the row even when titles
 * wrap to different heights (the reference design).
 *
 * This is the FALLBACK look — a static full-width pill under the price, always
 * visible. The active card mode (rpa--card-lv) overrides it further down into
 * an overlay on the photo; see that block for why.
 *
 * The modifier is only on cards that actually have the button, so every other
 * card in the theme keeps its existing box model untouched. */
.rpc-card--quick {
	display: flex;
	flex-direction: column;
}
.rpc-card--quick .rpc-card__link {
	flex: 1 1 auto;
	height: auto;
}
.rpc-card__quick-slot { display: contents; }
/* Outline in the brand color, fills with it on hover — matches the product
   page's own «ثبت دیدگاه» (.rh-reviews__summary-cta): a secondary action still
   reads as branded, not neutral ink. Was foreground/black; changed by request
   to keep every outline-then-fill button on the same rule. */
.rpc-card__quick {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-block-start: 10px;
	padding: 11px 10px;
	border: 1px solid var(--wp--preset--color--primary, #cb6686);
	border-radius: var(--wp--custom--button--radius, 10px);
	background: transparent;
	color: var(--wp--preset--color--primary, #cb6686);
	font: inherit;
	font-size: 0.875rem;
	font-weight: var(--rh-fw-strong);
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.rpc-card__quick:hover,
.rpc-card__quick:focus-visible {
	background: var(--wp--preset--color--primary, #cb6686);
	color: var(--wp--preset--color--base, #fff);
}
.rpc-card__quick-icon { flex: none; }

/* ═══════════ THEME SETTING: minimalist "LV" card — quick view OVERLAY ═══════
 * The active card mode. Requested change: instead of a static bar under the
 * price (pushing every card to a different height depending on its own
 * text), the trigger now lives ON THE PHOTO — revealed on hover for a mouse,
 * always on as a small icon for touch (there is no hover to reveal it with).
 *
 * THE GHOST-BOX TRICK: .rpc-card__quick-slot is an invisible box positioned
 * exactly where the photo is — same inset as the card's own padding, same
 * aspect-ratio as .rpc-card__media — so its rendered height always matches
 * the image's rendered height, at any card width, with no JS measuring it.
 * The button then aligns to the BOTTOM (desktop) or a CORNER (touch) of that
 * ghost box, which is the same as aligning to the photo itself.
 *
 * `pointer-events: none` on the slot lets every click reach the photo's own
 * link underneath, except on the button — the one spot that re-enables them. */
.rpa--card-lv .rpc-card { position: relative; }
.rpa--card-lv .rpc-card__quick-slot {
	display: block;
	position: absolute;
	inset-inline: 12px;             /* matches .rpa--card-lv .rpc-card's own padding */
	top: 12px;
	aspect-ratio: var(--rh-product-ratio, 0.8);
	pointer-events: none;
	z-index: 2;                     /* above badges/swatches (z-index: 1) */
}
.rpa--card-lv .rpc-card__quick {
	margin-block-start: 0;
	width: auto;
	pointer-events: auto;
}

/* Mouse/trackpad: hidden until the card is hovered (or a keyboard user tabs
   into it — :focus-within, so it is reachable without a pointer at all), then
   slides up as a full-width pill flush with the bottom of the photo. */
@media (hover: hover) and (pointer: fine) {
	.rpa--card-lv .rpc-card__quick-slot {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		padding: 0 10px 10px;
	}
	.rpa--card-lv .rpc-card__quick {
		width: 100%;
		opacity: 0;
		transform: translateY(6px);
		box-shadow: var(--wp--preset--shadow--sm, 0 2px 6px rgba(0,0,0,.08));
		transition: opacity 160ms ease, transform 160ms ease, background 150ms ease, color 150ms ease;
	}
	.rpa--card-lv .rpc-card:hover .rpc-card__quick,
	.rpa--card-lv .rpc-card:focus-within .rpc-card__quick {
		opacity: 1;
		transform: translateY(0);
		/* Filled pink the moment it's revealed — hovering the CARD is already
		   the signal, so it shouldn't need a second, separate hover on the
		   button itself just to stop looking like an outline. */
		background: var(--wp--preset--color--primary, #cb6686);
		color: var(--wp--preset--color--base, #fff);
	}
}

/* Touch: no quick view on the card. There is no hover to reveal it with, and an
   always-on circle over every photo cost more in looks than it gave back — a
   tap on the card already opens the product page, which is the same
   information one step further. The button stays in the DOM (hover devices
   use it); it is just not painted here. */
@media (hover: none), (max-width: 900px) {
	.rpa--card-lv .rpc-card__quick-slot {
		display: none;
	}
}

/* ---- Modal shell -------------------------------------------------------
 * Desktop: a centred card in the top layer. Mobile: RHSheet switches to
 * dialog.show() + the shared backdrop, so the panel is pinned to the bottom
 * and needs its own geometry — see the media query at the end. */
.rh-qv-modal {
	width: min(1040px, calc(100vw - 40px));
	max-width: none;
	max-height: min(88vh, 780px);
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--card, 14px);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--foreground, #1a1d23);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}
.rh-qv-modal::backdrop {
	background: rgba(0, 0, 0, 0.45);
}
.rh-qv-modal__handle { display: none; }
.rh-qv-modal__close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--foreground, #1a1d23);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	cursor: pointer;
}
.rh-qv-modal__close:hover { opacity: 0.75; }
.rh-qv-modal__body {
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.rh-qv-modal__loading {
	margin: 0;
	padding: 48px 20px;
	text-align: center;
	color: var(--wp--preset--color--text, #4a4f57);
}

/* ---- Body: gallery + information --------------------------------------- */
.rh-qv {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(16px, 2.5vw, 36px);
	padding: clamp(16px, 2.5vw, 32px);
}

.rh-qv__gallery {
	min-width: 0;
	align-self: start;   /* don't stretch to the info column's height */
}
.rh-qv__stage {
	/* The shop's own photo ratio, so a normal product image fills the frame
	   exactly — same token the cards and the product gallery use. The cap stops
	   a 4:5 photo from making the modal taller than the screen on a wide
	   viewport; `contain` below means the capped frame letterboxes instead of
	   cropping the product. */
	aspect-ratio: var(--rh-product-ratio, 0.8);
	max-height: 56vh;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--surface, #f4f5f7);
}
.rh-qv__main,
.rh-qv__nophoto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.rh-qv__thumbs {
	display: flex;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.rh-qv__thumbs::-webkit-scrollbar { display: none; }
.rh-qv__thumb {
	flex: 0 0 64px;
	width: 64px;
	aspect-ratio: var(--rh-product-ratio, 0.8);
	padding: 0;
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 8px;
	background: var(--wp--preset--color--surface, #f4f5f7);
	overflow: hidden;
	cursor: pointer;
	transition: border-color 120ms linear;
}
.rh-qv__thumb.is-active,
.rh-qv__thumb:hover { border-color: var(--wp--preset--color--foreground, #1a1d23); }
.rh-qv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rh-qv__info {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* Clear of the close button on desktop, where it sits in this column. */
	padding-inline-end: 40px;
}
.rh-qv__title {
	margin: 0;
	font-size: clamp(1.1rem, 1.8vw, 1.45rem);
	font-weight: var(--rh-fw-strong);
	line-height: 1.45;
}
.rh-qv__rating:empty { display: none; }
.rh-qv__prices { font-size: 1.05rem; }

.rh-qv__features {
	margin: 0;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--wp--preset--color--border, #e2e4e9);
	font-size: 0.875rem;
}
.rh-qv__feature {
	display: flex;
	gap: 8px;
	padding-block: 4px;
}
.rh-qv__feature dt {
	flex: 0 0 40%;
	font-weight: var(--rh-fw-base);
	color: var(--wp--preset--color--text, #6b7078);
}
.rh-qv__feature dd {
	margin: 0;
	min-width: 0;
	font-weight: var(--rh-fw-strong);
	/* An ingredients list can run to a paragraph. Three lines is enough to
	   recognise it; the full text is one click away on the product page. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
 * The injected PRODUCT-PAGE controls.
 *
 * quickview.tpl includes the theme's own product partials (product-prices,
 * product-variants, product-add-to-cart), so the modal ships markup whose
 * styling normally comes from product-single.css + product-single-ps.css —
 * and those two sheets (3,150 lines) load ONLY on the product page. Without
 * this block the modal renders raw: bare radio buttons, an unstyled submit,
 * a naked number input. That is what "کوییک ویو استایل نداره" was.
 *
 * The fix is these ~110 scoped lines rather than loading 3,150 on the
 * homepage. Everything is under `.rh-qv`, so nothing here can reach the rest
 * of the page, and the quick view stays self-contained enough to drop onto any
 * other page later without dragging the product sheet along.
 *
 * TRADE-OFF, stated plainly: this duplicates the product page's control
 * styling. If the swatch or CTA design changes there, change it here too.
 * ========================================================================= */

/* The ported rules read --rh-pd-*; product-single.css defines them on :root,
   which is not loaded here, so bind them to the same theme tokens locally. */
.rh-qv {
	--rh-pd-fg: var(--wp--preset--color--text, #1a1d23);
	--rh-pd-muted: var(--wp--preset--color--text-muted, #5b6271);
	--rh-pd-bg: var(--wp--preset--color--base, #fff);
	--rh-pd-surface: var(--wp--preset--color--surface, #f7f7f8);
	--rh-pd-border: var(--wp--preset--color--border, #e2e4e9);
	--rh-pd-primary: var(--wp--preset--color--primary, #0a66c2);
}

/* ---- Price ---- */
.rh-qv .rh-product__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rh-qv .rh-product__price-current,
.rh-qv .current-price-value {
	font-size: 1.2rem;
	font-weight: var(--rh-fw-strong);
	color: var(--rh-pd-primary);
	line-height: 1.4;
}
.rh-qv .rh-product__price-old,
.rh-qv .regular-price {
	font-size: 0.9rem;
	color: var(--rh-pd-muted);
	text-decoration: line-through;
}
.rh-qv .tax-shipping-delivery-label:empty { display: none; }

/* ---- Variants ---- */
.rh-qv .rh-variations:empty { display: none; }
.rh-qv .rh-variations__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-block-end: 12px;
}
.rh-qv .rh-variations__row:last-child { margin-block-end: 0; }
.rh-qv .rh-variations__label {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	font-size: 13px;
	font-weight: var(--rh-fw-strong);
}
.rh-qv .rh-variations__selected-name {
	font-weight: var(--rh-fw-base);
	color: var(--rh-pd-muted);
}
.rh-qv .rh-variations__select {
	width: 100%;
	max-width: 320px;
	height: 40px;
	padding: 0 12px;
	font: inherit;
	color: inherit;
	border: 1px solid var(--rh-pd-border);
	border-radius: 8px;
	background: var(--rh-pd-bg);
	cursor: pointer;
}
.rh-qv .rh-swatch-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rh-qv .rh-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 38px;
	height: 34px;
	padding: 0 10px;
	font: inherit;
	color: inherit;
	background: var(--rh-pd-bg);
	border: 1.5px solid var(--rh-pd-border);
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	transition: border-color 120ms ease, color 120ms ease;
}
/* The REAL PrestaShop radio lives inside the label and drives the combination
   AJAX — it is hidden, never removed. */
.rh-qv .rh-swatch input[type="radio"],
.rh-qv .rh-swatch input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.rh-qv .rh-swatch.is-selected,
.rh-qv .rh-swatch:has(input:checked) {
	border-color: var(--rh-pd-primary);
	color: var(--rh-pd-primary);
	box-shadow: inset 0 0 0 0.5px var(--rh-pd-primary);
}
.rh-qv .rh-swatch__dot {
	display: block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rh-swatch-color, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.rh-qv .rh-swatch__name {
	font-size: 13px;
	font-weight: var(--rh-fw-base);
	line-height: 1;
	white-space: nowrap;
}
.rh-qv .rh-swatch.is-unavailable,
.rh-qv .rh-swatch.is-sold-out { color: var(--rh-pd-muted); }
.rh-qv .rh-swatch.is-unavailable .rh-swatch__name,
.rh-qv .rh-swatch.is-sold-out .rh-swatch__name { text-decoration: line-through; }

/* ---- Quantity + add to cart ----
 * On the product page .product-add-to-cart is `display: contents` so its
 * children join the verbatim WP cart-bar. There is no cart-bar here, so it
 * stays a real box and simply stacks. */
.rh-qv .product-add-to-cart {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-block-start: 4px;
}
.rh-qv .rh-product__qty-select {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rh-qv .rh-product__qty-label {
	font-size: 13px;
	font-weight: var(--rh-fw-strong);
}
.rh-qv .rh-product__qty-select .qty { display: inline-flex; }
.rh-qv #quantity_wanted {
	width: 64px;
	height: 40px;
	font: inherit;
	color: inherit;
	text-align: center;
	border: 1px solid var(--rh-pd-border);
	border-radius: 8px;
	background: var(--rh-pd-bg);
}
.rh-qv .rh-wishlist {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--rh-pd-border);
	border-radius: 8px;
	background: var(--rh-pd-bg);
	color: var(--rh-pd-fg);
	cursor: pointer;
	transition: color 120ms ease, border-color 120ms ease;
}
.rh-qv .rh-wishlist:hover,
.rh-qv .rh-wishlist.is-wished { color: #e3342f; border-color: #e3342f; }
.rh-qv .rh-wishlist.is-wished .rh-wishlist__icon { fill: currentColor; }

.rh-qv .rh-product__cart,
.rh-qv .rh-product__cart .add { width: 100%; }
.rh-qv .rh-product__add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--button--gap, 8px);
	width: 100%;
	min-height: var(--wp--custom--button--h--lg, 52px);
	padding: 0 var(--wp--custom--button--px--lg, 22px);
	border: 0;
	border-radius: var(--wp--custom--button--radius, 10px);
	background: var(--rh-pd-primary);
	color: #fff;
	font: inherit;
	font-size: var(--wp--custom--button--fs--lg, 1rem);
	font-weight: var(--wp--custom--button--fw, 600);
	cursor: pointer;
	transition: background-color 120ms linear;
}
.rh-qv .rh-product__add-btn:hover:not(:disabled) { filter: brightness(0.93); }
.rh-qv .rh-product__add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rh-qv .rh-product__add-btn-icon { display: inline-flex; }

/* The in-cart +/- stepper. It ships `hidden`; product-qtystep.js reveals it
   when this product is already in the cart. */
.rh-qv .rh-qtystep[hidden] { display: none; }
.rh-qv .rh-qtystep {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	padding: 4px;
	border: 1px solid var(--rh-pd-border);
	border-radius: 10px;
}
.rh-qv .rh-qtystep__btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.rh-qv .rh-qtystep__btn:hover { background: var(--rh-pd-surface); }
.rh-qv .rh-qtystep__val { min-width: 2ch; text-align: center; font-weight: var(--rh-fw-strong); }

.rh-qv .rh-product__stock,
.rh-qv .product-minimal-quantity {
	font-size: 12px;
	color: var(--rh-pd-muted);
	margin: 0;
}
.rh-qv .rh-product__stock:empty,
.rh-qv .product-minimal-quantity:empty { display: none; }

.rh-qv__form { margin: 0; }
/* «مشاهده محصول» — the escape hatch under the button, for everything the quick
   view deliberately leaves out (description, reviews, shipping…). */
.rh-qv__more {
	align-self: flex-start;
	font-size: 0.9rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--foreground, #1a1d23);
	text-decoration: underline;
	text-underline-offset: 5px;
}
.rh-qv__more:hover { opacity: 0.65; color: inherit; }

/* ---- Mobile: bottom sheet, stacked -------------------------------------
 * The breakpoint is 900px, NOT a round 780: that is where RHSheet itself
 * switches from showModal() to the show()+backdrop sheet path (bottom-sheet.js
 * `isSheet`, default 901). Any other number would leave a band of widths where
 * the dialog opens as a sheet but is still styled as a centred card.
 *
 * show() keeps the dialog OUT of the top layer, so it needs an explicit z-index
 * to sit above .rh-sheet-backdrop (z-index 999) — the same treatment global.css
 * gives the theme's other sheets. */
@media (max-width: 900px) {
	.rh-qv-modal[open] { z-index: 1000; }
	.rh-qv-modal {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		max-height: 92vh;
		margin: 0;
		border-radius: 16px 16px 0 0;
	}
	.rh-qv-modal__handle {
		display: block;
		width: 42px;
		height: 4px;
		margin: 10px auto 2px;
		border-radius: 999px;
		background: var(--wp--preset--color--border, #d9dce1);
	}
	.rh-qv {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 12px 16px 20px;
	}
	.rh-qv__stage { aspect-ratio: 1; }
	.rh-qv__info { padding-inline-end: 0; }
}