/* ================================================
   RED POINT — PRODUCT CARD  (Figma 109:377)
   ================================================
   Shared by Best Sellers, Worth Attention, upsell, "you may like".
   card 318x563 (full) / 244x438 (compact)
   ================================================ */

/* FIXED HEIGHT (client adjustment #3).
   Not a magic pixel value — the card is built out of fixed slots instead, so it holds its
   height at every breakpoint and every font size:

     photo  362px / 279px compact   (already fixed)
     name   exactly two lines       (clamped, and reserved even for a one-line name)
     stars  one row                 (already fixed)
     desc   exactly three lines     (clamped, and reserved even when empty)
     button pinned to the bottom    (margin-top:auto)

   height:100% lets a card fill its grid cell, so the row is uniform even if one card somehow
   runs over. A hardcoded height would have to be re-guessed for every breakpoint and would
   clip Hebrew, which sets taller than the Latin the design was drawn with. */
.rp-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The body takes the remaining height so margin-top:auto on the button has something to push
   against. */
.rp-pcard__body {
	flex: 1 1 auto;
}

/* ------------------------------------------------
   IMAGE  (109:377) — 362px, 1px white/10 border, 4px top radius
   ------------------------------------------------ */
.rp-pcard__media {
	position: relative;
	display: block;
	height: 362px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}

.rp-pcard--compact .rp-pcard__media {
	height: 279px;
}

/* Ancestor in the selector (0,2,0) so it beats Elementor's `.elementor img{height:auto}`
   (0,1,1) — otherwise the photo collapses to natural aspect. See redpoint.css. */
.rp-pcard__media .rp-pcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Badge, top-LEFT (109:400). left, not right — it stays on the left under RTL.

   Filled with the site's accent red at 70% (client request). It was white at 20%, which
   disappeared against a pale product photo — the client could find where to change the badge
   in the admin but could barely see the badge itself on the page. The accent still lets the
   photo through, so it reads as a label rather than a solid block. */
.rp-pcard__badge {
	position: absolute;
	top: 15px;
	left: 15px;
	display: inline-flex;
	align-items: center;
	padding: 8px 12px;
	border-radius: 100px;
	background-color: rgba(255, 59, 59, 0.7);
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1;
	color: #FFFFFF;
}

.rp-pcard--compact .rp-pcard__badge {
	font-size: 14px;
	padding: 6px 10px;
}

/* ------------------------------------------------
   BODY  (109:378) — #111, 16px padding, 4px bottom radius
   ------------------------------------------------ */
.rp-pcard__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px;
	background-color: #111111;
	border-radius: 0 0 4px 4px;
}

/* Compact body is tighter than the full card (109:865): 12px padding, 12px group->button
   gap. Without this override the full card's 16/16 spacing inflates the compact card past
   the design's fixed 438px height and the archive grid runs ~100px tall over three rows. */
.rp-pcard--compact .rp-pcard__body {
	gap: 12px;
	padding: 12px;
}

.rp-pcard__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Compact group rows sit 8px apart (109:866: name y0, stars y22 after a 14px row, desc y40
   after a 10px row) rather than the full card's 12px. */
.rp-pcard--compact .rp-pcard__group {
	gap: 8px;
}

/* Name (right) | prices (left). leading-none keeps the row exactly as tall as the 18px
   name — Tailwind/Elementor default line-heights would inflate it, which is what pushed the
   grids off their design height on the Next.js build. */
.rp-pcard__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: 1;
}

/* Two lines, always. Real product names run from three words to a full line of Hebrew, and
   letting the row size itself is what made the grid ragged. line-height goes to 1.2 because a
   clamped two-line block at 1.0 collides with its own descenders. */
.rp-pcard__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.4em;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.2;
	color: #FFFFFF;
	text-decoration: none;
}

.rp-pcard--compact .rp-pcard__name {
	font-size: 14px;
}

/* new price first (right under RTL), struck old price second (left). */
.rp-pcard__prices {
	display: flex;
	align-items: center;
	gap: 12px;
	line-height: 1;
}

.rp-pcard__price {
	font-family: 'Google Sans', sans-serif;
	font-size: 16px;
	line-height: 1;
	color: #FFFFFF;
	white-space: nowrap;
}

.rp-pcard--compact .rp-pcard__price {
	font-size: 12px;
}

.rp-pcard__price--old {
	color: #FF3B3B;
	text-decoration: line-through;
}

/* WooCommerce wraps prices in <span class="woocommerce-Price-amount">; strip its default
   spacing so it sits inline. */
.rp-pcard__price .woocommerce-Price-amount {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/* Stars — five 11px gold glyphs (109:384). */
.rp-pcard__stars {
	display: flex;
	align-items: center;
	gap: 4px;
}

.rp-pcard__star {
	width: 11px;
	height: 11px;
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.15);
}

.rp-pcard__star.is-on {
	color: #FFD13B;
}

.rp-pcard--compact .rp-pcard__star {
	width: 10px;
	height: 10px;
}

/* ------------------------------------------------
   DESCRIPTION — a three-line slot with the full text on hover
   ------------------------------------------------
   The slot is a fixed three lines whatever the description is, INCLUDING when there is none —
   that is what keeps the cards in a row the same height. The client's catalogue descriptions
   run from one line to a full paragraph, which is what made the grid ragged.

   The wrapper is also the hover target and the positioning context for the panel. */
.rp-pcard__descwrap {
	position: relative;
	/* 3 lines at 14px/1.4. Set here rather than on the <p> so the empty-description card
	   reserves the same space. */
	height: 58.8px;
}

.rp-pcard--compact .rp-pcard__descwrap {
	/* 3 lines at 12px/1.4 (109:883 draws this as a fixed 51px). */
	height: 50.4px;
}

/* No dir attribute: the description inherits the page direction. It carried a hardcoded
   dir="ltr" once, which reversed embedded Latin words in the client's Hebrew copy. */
.rp-pcard__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-family: 'Google Sans', sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #818181;
	text-align: right;
}

.rp-pcard--compact .rp-pcard__desc {
	font-size: 12px;
}

/* THE HOVER PANEL — the whole description, unclamped.
   Anchored to the BOTTOM of the slot so it grows UPWARD, over the stars and the photo. Growing
   downward would cover the add-to-cart button and make it unreachable for as long as the panel
   was open.

   The trigger is the wrapper, not the card: leaving the description closes the panel, so
   reaching the button never means crossing it. The panel is a descendant of the trigger, so
   hovering the panel itself keeps it open.

   Guarded on `hover: hover` — a touch device has no hover, and the clamped text would otherwise
   be stuck expanded from the first tap. */
@media (hover: hover) {

	.rp-pcard__descwrap:hover .rp-pcard__desc,
	.rp-pcard__desc:focus-visible {
		position: absolute;
		bottom: -8px;
		inset-inline: -8px;
		z-index: 5;
		display: block;
		-webkit-line-clamp: unset;
		line-clamp: unset;
		/* Very long copy stops at a readable height rather than running off the card. */
		max-height: 260px;
		overflow-y: auto;
		padding: 10px 12px;
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 8px;
		background-color: #1A1A1A;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
		color: #C9C9C9;
	}
}

/* Button — full width, 40px, 1px white/40 pill, 12px label.
   margin-top:auto pins it to the foot of the body, so every card's button sits on the same
   line whatever the copy above it did. */
.rp-pcard__btn {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 32px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 100px;
	font-family: 'Google Sans', sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.rp-pcard__btn:hover {
	border-color: rgba(255, 255, 255, 0.9);
	color: #FFFFFF;
}

.rp-pcard--compact .rp-pcard__btn {
	height: 32px;
}

/* Out of stock — still a link to the product page (the customer may want to look), but it must
   not read as a live add-to-cart. */
.rp-pcard .rp-pcard__btn--oos {
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.45);
}

.rp-pcard .rp-pcard__btn--oos:hover {
	border-color: rgba(255, 255, 255, 0.28);
	color: rgba(255, 255, 255, 0.55);
}