/*
 * RahkarTheme — shared product card stylesheet.
 *
 * One file, one look, one source of truth. Loaded only on pages whose
 * markup contains a block that registered this style as a dependency
 * (see rahkar_product_card_register_style() in inc/product-card.php).
 *
 * Class prefix `.rpc-*` is intentionally block-agnostic — the same card
 * can sit inside an archive grid, a horizontal slider, a single-product
 * "related" rail, or any future container.
 */

.rpc-card {
	margin: 0;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: var(--rpc-radius, 12px);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	min-width: 0;
}
.rpc-card:hover {
	box-shadow: var(--wp--preset--shadow--md, 0 8px 24px rgba(0,0,0,.08));
	transform: translateY(-2px);
}

.rpc-card__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px;
	color: inherit;
	text-decoration: none;
	height: 100%;
}
.rpc-card__link:hover { text-decoration: none; }

/* Media slot — aspect-ratio reserves space so the card doesn't reflow
   when the image loads. Zero CLS on first paint. The shape is the shop's real
   photo ratio (--rh-product-ratio, portrait 4:5), NOT a square, so `cover`
   crops nothing on a normal product photo. */
.rpc-card__media {
	display: block;
	position: relative;
	aspect-ratio: var(--rh-product-ratio, 0.8);
	/* Palette surface — the letterbox tone behind every product photo (visible
	   whenever `contain` doesn't fill the slot exactly), in the archive grid
	   AND every slider, everywhere .rpc-card renders. */
	background: var(--wp--preset--color--surface);
	border-radius: calc(var(--rpc-radius, 12px) - 4px);
	overflow: hidden;
}
.rpc-card__img {
	width: 100%;
	height: 100%;
	/* `contain`, not `cover`: the slot already IS the photo ratio, so for a
	   normal 4:5 shot the two are pixel-identical — but an odd-shaped image
	   (a leftover square, a landscape pack shot) letterboxes on the surface
	   colour instead of being cropped. The images are never re-cut to fit. */
	object-fit: contain;
	display: block;
}

/* ─── Top-corner badges ─────────────────────────────────────────────── */
.rpc-card__badges {
	position: absolute;
	top: 8px;
	inset-inline-start: 0px;
	display: flex;
	/* A column, because a rail may add ONE campaign badge (`badge`) beneath the
	   product's own — «جدید» on top, the campaign label directly under it. With
	   a single badge (every other page) a column of one looks identical to the
	   row this used to be. */
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	z-index: 1;
}
.rpc-badge {
	display: inline-flex;
	align-items: center;
	/* Height as a token so the --deal variant (inline-block, because it has to
	   ellipsise) can line its text up with the flex-centred variants at every
	   breakpoint from one value. */
	--rpc-badge-h: 22px;
	height: var(--rpc-badge-h);
	padding-inline: 8px;
	font-size: 0.75rem;
	font-weight: var(--rh-fw-strong);
	border-radius: 6px 0px 0px 6px;
	color: #fff;
}
.rpc-badge--new { background: var(--wp--preset--color--success, #198754); }
/* "جدید" (new arrival): brand-primary blue so it reads distinctly from the
   green "ویژه" special badge — both used to share --new and looked identical. */
.rpc-badge--fresh { background: var(--wp--preset--color--primary, #0a66c2); }
/* Campaign badge (--deal): the extra label a campaign rail stacks under the
   product's own badge — «اسلایدر تخفیف‌ها» → RAHKAR_DEALS_BADGE. It uses the
   campaign token rather than any catalog-status colour precisely so it cannot
   be mistaken for one: «جدید»/«ویژه» describe the product, this describes the
   promotion it is currently in. Long admin text is clamped to one line. */
.rpc-badge--deal {
	background: var(--rh-deals-accent, #c2359d);
	/* inline-block, not the base inline-flex: text-overflow needs a real text
	   box, and a flex container has none. line-height carries the centring. */
	display: inline-block;
	line-height: var(--rpc-badge-h);
	max-width: 12ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* OOS badge: neutral muted dark — signals "inactive" without screaming red
   (red is reserved for the accent role, not catalog status). Sits over the
   image so the contrast stays readable on both dark and light photos. */
.rpc-badge--oos {
	background: rgba(26, 29, 35, 0.78);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ─── Out-of-stock card state ──────────────────────────────────────────
   Subtle desaturation + opacity on the image and a muted title color so
   the shopper's eye registers "unavailable" before reading. The price,
   the corner badge, and the swatches stay at full strength: the price
   so the shopper knows what they'd be paying, the badge because that's
   the load-bearing signal, the swatches because color choice is still
   useful info ("would have been available in 3 colors"). */
.rpc-card--oos .rpc-card__img {
	filter: grayscale(0.6);
	opacity: 0.62;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.rpc-card--oos .rpc-card__title {
	color: var(--wp--preset--color--text-muted, #5b6271);
}
/* Restore the image on hover — shopper is actively interested; reward
   the intent by showing the product in full color. */
.rpc-card--oos:hover .rpc-card__img {
	filter: grayscale(0);
	opacity: 0.88;
}

/* ─── Color swatches row (overlaid on image, bottom-left) ────────────
   Absolutely positioned inside .rpc-card__media so the swatches sit on
   top of the product photo at the visually-bottom-left corner. On RTL
   pages, "bottom-left" maps to inset-inline-end (inline-end = left in
   RTL). A translucent pill background keeps the dots readable against
   both light and dark imagery. Forced LTR keeps "dots → +N" stable. */
.rpc-card__swatches {
	position: absolute;
	bottom: 8px;
	inset-inline-end: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	direction: ltr;
	padding: 4px 6px;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 9999px;
	z-index: 1;
}
.rpc-swatch-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.10);
	display: inline-block;
	flex-shrink: 0;
}
.rpc-swatch-more {
	display: inline-flex;
	align-items: center;
	height: 14px;
	padding: 0 5px;
	margin-inline-start: 2px;
	font-size: 0.6875rem;
	font-weight: var(--rh-fw-strong);
	color: var(--wp--preset--color--text-muted, #5b6271);
	background: var(--wp--preset--color--surface, #f7f7f8);
	border-radius: 9999px;
	line-height: 1;
}

/* ─── Title ──────────────────────────────────────────────────────────
   Clamps to 2 lines and reserves the 2-line height so single-line titles
   don't make the card jump. */
.rpc-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9rem;
	font-weight: var(--rh-fw-base);
	line-height: 1.5;
	min-height: 2.85em;
	color: var(--wp--preset--color--text, #1a1d23);
}

/* ─── Price row ──────────────────────────────────────────────────────
   Two-column layout: prices on one side, discount pill pinned to the
   opposite card edge. 20px padding-bottom compensates for wc_price()'s
   <bdi> descenders that would otherwise clip under overflow:hidden. */
.rpc-card__price {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	padding-bottom: 0;
}
.rpc-price-stack {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 2px;
	min-width: 0;
	min-height: 2.4em;
}
.rpc-price-original {
	color: var(--wp--preset--color--text-muted, #5b6271);
	font-size: 0.75rem;
	font-weight: var(--rh-fw-base);
	text-decoration: line-through;
	line-height: 1.2;
}
.rpc-price-current,
.rpc-price-default {
	color: var(--wp--preset--color--contrast, #0f1115);
	font-size: 1rem;
	font-weight: var(--rh-fw-strong);
	line-height: 1.25;
}
.rpc-price-stack .woocommerce-Price-amount,
.rpc-price-stack bdi {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.rpc-pct-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 22px;
	padding-inline: 8px;
	border-radius: 9999px;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
	font-size: 0.7rem;
	font-weight: var(--rh-fw-strong);
	line-height: 1;
	flex-shrink: 0;
}

/* Mobile: edge-to-edge image, tighter type, smaller swatches. */
@media (max-width: 768px) {
	.rpc-card__link  { padding: 0; gap: 4px; }
	.rpc-card__media { border-radius: 0; }
	.rpc-card__title {
		font-size: 0.8rem;
		padding-inline: 8px;
		min-height: 2.4em;
	}
	.rpc-card__price {
		padding-inline: 8px;
		padding-bottom: 8px;
	}
	.rpc-price-original { font-size: 0.7rem; }
	.rpc-price-current,
	.rpc-price-default { font-size: 0.85rem; }
	.rpc-pct-badge { min-width: 32px; height: 20px; padding-inline: 6px; font-size: 0.65rem; }
	.rpc-badge { --rpc-badge-h: 18px; padding-inline: 6px; font-size: 0.65rem; border-radius: 4px 0px 0px 4px; }
	.rpc-card__badges { top: 6px; inset-inline-start: 0px; }
	.rpc-card__swatches { gap: 3px; padding: 2px 4px; }
	.rpc-swatch-dot { width: 8px; height: 8px; }
	.rpc-swatch-more { font-size: 0.6rem; height: 12px; padding: 0 3px; }
}
@media (hover: none) {
	.rpc-card:hover { transform: none; box-shadow: none; }
}

/* ═══════════ THEME SETTING: minimalist "LV" card (rpa--card-lv) ═══════════
   The card-APPEARANCE half of RAHKAR_ARCHIVE_CARD='lv' — a filled peach tile,
   soft radius, light right-aligned typography. Lives HERE (not product-archive
   .css) because it must apply EVERYWHERE .rpc-card renders — the archive grid
   AND every product slider (product-slider.tpl adds .rpa--card-* on its .rps
   root) + the look grid — so the whole site's cards follow the setting, not
   just the listing pages. The archive-GRID-only bit (its own gap, since the
   grid gutter and each card's internal padding are two separate concerns)
   stays in product-archive.css. */
/* Filled tile, not a borderless cut-out: ONE light layer (palette surface) on
   the card itself. The media slot below stays transparent so the tint is not
   stacked twice, and the photo multiplies onto it so the white margins baked
   into product photos take the card tone instead of showing as a white box.
   Padding on every side is what makes that fill visible as a margin around
   the photo and behind the title/price. */
/* Padding lives on the CARD, not on .rpc-card__link: when quick-view is on,
   the card is a flex column of __link + the .rpc-card__quick button (see
   .rpc-card--quick in quickview.css) — padding on __link alone would leave the
   button flush against the card's own edges (`چسبیده`) since it is __link's
   sibling, not its child. Padding on the shared parent insets both at once. */
.rpa--card-lv .rpc-card {
	padding: 12px 12px 16px;
	background: var(--wp--preset--color--surface);
	border: 0;
	border-radius: var(--rpc-radius, 12px);
	overflow: hidden;
}
.rpa--card-lv .rpc-card:hover {
	box-shadow: none;
	transform: none;
}
.rpa--card-lv .rpc-card__link {
	padding: 0;
	gap: 8px;
}
/* Media flush on a light surface, in the shop's photo ratio; `contain` never
   crops (fills the slot exactly for a 4:5 photo, letterboxes an odd one).
   Radius matches the base card's own media (calc(12px - 4px)): the theme's
   visual identity is soft everywhere — sharp corners here would read as a
   different, harder mode rather than a lighter one. */
.rpa--card-lv .rpc-card__media {
	aspect-ratio: var(--rh-product-ratio, 0.8);
	border-radius: var(--wp--custom--radius--md, 8px);
	background: transparent;
}
.rpa--card-lv .rpc-card__img { object-fit: contain; mix-blend-mode: multiply; }
/* Title: light weight, right-aligned (start = right in RTL). Reserved to
   exactly 2 lines (2 × line-height) so a one-line title and a two-line title
   in the same row end at the same height — otherwise the price row (and the
   quick-view button under it) floats to a different level per card, which is
   exactly the "قیمت‌ها یک تراز نیستند" a ragged grid produces. */
.rpa--card-lv .rpc-card__title {
	font-weight: var(--rh-fw-base);
	font-size: 0.9rem;
	line-height: 1.6;
	min-height: 3.2em;
	text-align: start;
	color: var(--wp--preset--color--text, #1a1d23);
}
/* Price at the inline-start (RIGHT in RTL), discount pill at the inline-end. */
.rpa--card-lv .rpc-card__price {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 0;
}
.rpa--card-lv .rpc-price-stack {
	min-height: 0;
	align-items: flex-start;
}
.rpa--card-lv .rpc-price-current,
.rpa--card-lv .rpc-price-default {
	font-weight: var(--rh-fw-base);
	font-size: 0.9rem;
}

/* Phone, lv card: the base mobile rules above inset the title/price by 8px for
   a card whose photo bled edge to edge; here the CARD already carries 12px of
   padding, so both stacked into 20px a side and squeezed the text. Keep only
   the card's own (smaller) padding, and drop the extra bottom room.
   Discounted cards: struck price and pill on one line, the current price
   alone on the next, never wrapping — before, the three pieces fought for one
   narrow row and «تومان» dropped under the number. */
@media (max-width: 768px) {
	.rpa--card-lv .rpc-card { padding: 8px 8px 10px; }
	.rpa--card-lv .rpc-card__title { padding-inline: 0; }
	.rpa--card-lv .rpc-card__price {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 3px 8px;
		padding: 0;
	}
	.rpa--card-lv .rpc-price-stack { display: contents; }
	.rpa--card-lv .rpc-price-original { order: 1; }
	.rpa--card-lv .rpc-pct-badge { order: 2; }
	.rpa--card-lv .rpc-price-current,
	.rpa--card-lv .rpc-price-default {
		order: 3;
		flex-basis: 100%;
		white-space: nowrap;
	}
	.rpa--card-lv .rpc-price-original { align-self: center; }
}

/* ═══════════ THEME SETTING: clean bordered card (rpa--card-bordered) ═══════════
   The third value of RAHKAR_ARCHIVE_CARD. Like the 'lv' block above it lives
   HERE rather than in product-archive.css, so it applies everywhere .rpc-card
   renders — the archive grid, every product slider, and the look/set grid.

   Distinct from the legacy 'classic' card (which is the BASE .rpc-card styling
   at the top of this file: 12px radius, hover = 24px-blur shadow + a 2px lift).
   This one is quieter and cheaper:
     - a thin hairline border and a small 8px radius,
     - image on white (not the grey 'lv' ground),
     - hover changes ONLY the border colour — no transform, no big shadow, so
       there is no lift, no compositing layer and no large repaint region.
       Hover is the one thing that runs while a shopper sweeps the mouse across
       a 5-column grid, so it stays as close to free as possible.

   Everything else (grid gap, columns, image sizes, markup) is unchanged, so
   switching modes costs nothing at runtime: same HTML, same requests, same
   queries — only which rules match. */
.rpa--card-bordered .rpc-card {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #e2e4e9);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}
.rpa--card-bordered .rpc-card:hover {
	border-color: var(--wp--preset--color--text-muted, #5b6271);
	box-shadow: none;
	transform: none;
}
/* Breathing room inside the frame — without it the border reads as a crop. */
.rpa--card-bordered .rpc-card__link {
	padding: 10px 10px 14px;
	gap: 8px;
}
/* Media on WHITE, in the shop's photo ratio, and `contain` never crops — so an
   odd-shaped image letterboxes into the card's own background instead of a grey
   plate, which is what keeps this mode looking "clean". */
.rpa--card-bordered .rpc-card__media {
	aspect-ratio: var(--rh-product-ratio, 0.8);
	border-radius: 4px;
	background: var(--wp--preset--color--base, #fff);
}
.rpa--card-bordered .rpc-card__img { object-fit: contain; }
/* Typography follows the same restrained scale as the lv card, so only the
   FRAME differs between the two modes — not the whole visual language. */
.rpa--card-bordered .rpc-card__title {
	font-weight: var(--rh-fw-base);
	font-size: 0.9rem;
	line-height: 1.6;
	min-height: 0;
	text-align: start;
	color: var(--wp--preset--color--text, #1a1d23);
}
.rpa--card-bordered .rpc-card__price {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 0;
}
.rpa--card-bordered .rpc-price-stack {
	min-height: 0;
	align-items: flex-start;
}
.rpa--card-bordered .rpc-price-current,
.rpa--card-bordered .rpc-price-default {
	font-weight: var(--rh-fw-base);
	font-size: 0.9rem;
}