/* Love Pharm · Hero Carousel — SHARED styles (structure & behavior only)
 * ---------------------------------------------------------------------------
 * This file holds ONLY what is common to every slide: layout grid, typography,
 * buttons, dots, animation and the mobile collapse.
 *
 * A slide's OWN look (background, text color, placeholder color) is NOT here —
 * each slide declares it in its own file (slides/NN-*.php) as CSS variables,
 * which the rules below consume:
 *      --lp-bg      slide background      (used by .lp-slide)
 *      --lp-ink     slide text color      (used by titles, subs, fine print…)
 *      --lp-accent  CTA background color  (used by .lp-cta)
 *      --lp-ph      empty-shape color     (used by .is-empty placeholders)
 *
 * Everything is scoped under .lp-hero. Enqueued only where the carousel renders
 * (see inc/hero-carousel/hero-carousel.php).
 * ---------------------------------------------------------------------------
 */

/* ========== Scope root & default tokens (overridden per slide) ========== */
.lp-hero {
	--lp-ink: #4a2338;
	--lp-accent: #1a1a1a;
	--lp-ph: #C56B93;
	--lp-radius: 0;
	--lp-ar: 1536 / 585;                /* desktop aspect ratio (w / h) */
	position: relative;
	width: 100%;
	font-family: "Heebo", "Assistant", "Rubik", -apple-system, "Segoe UI", Arial, sans-serif;
	border-radius: var(--lp-radius);
	overflow: hidden;
	direction: rtl;
	-webkit-tap-highlight-color: transparent;
	/* Make the banner feel like an image: no text selection, no long-press
	 * callout. Clicks/taps on the CTA links still work normally. */
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	contain: content;
}
.lp-hero * { box-sizing: border-box; margin: 0; padding: 0; }
.lp-hero img, .lp-hero a { -webkit-user-drag: none; }   /* no drag ghost on images/links */

/* ========== Track & slides ========== */
.lp-track { position: relative; width: 100%; aspect-ratio: var(--lp-ar); }
.lp-slide {
	position: absolute; inset: 0;
	padding-inline: clamp(48px, 4.5vw, 64px);   /* keep content clear of the nav arrows */
	display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
	background: var(--lp-bg, transparent);   /* ← per-slide, from its file */
	opacity: 0; transition: opacity .55s ease; pointer-events: none;
}
.lp-slide[data-active] { opacity: 1; pointer-events: auto; }
.lp-slide[hidden] { display: grid; }   /* keep grid; JS toggles [data-active] */

/* ========== Copy column ========== */
.lp-copy { padding: 0 clamp(24px, 4vw, 60px); z-index: 2; }
.lp-copy--narrow { padding-inline-end: clamp(16px, 2vw, 28px); }
.lp-eyebrow { font-size: clamp(12px, 1.15vw, 17px); letter-spacing: .14em; font-weight: 600; color: var(--lp-ink); opacity: .72; margin-bottom: .6em; }
.lp-title { font-size: clamp(20px, 2.9vw, 44px); font-weight: 700; line-height: 1.12; color: var(--lp-ink); letter-spacing: -.01em; }
.lp-title--light { color: #fff; }   /* optional force-white regardless of --lp-ink */
.lp-sub { font-size: clamp(13px, 1.15vw, 17px); font-weight: 500; line-height: 1.5; color: var(--lp-ink); opacity: .82; margin-top: .8em; }

/* Discount lockup (used by promo slides) */
.lp-discount { display: flex; align-items: center; gap: .22em; margin: clamp(10px, 1.6vw, 22px) 0 clamp(14px, 2vw, 26px); color: var(--lp-ink); line-height: .9; }
.lp-d-pre, .lp-d-post { font-size: clamp(22px, 3.4vw, 52px); font-weight: 800; }
.lp-d-num { font-size: clamp(40px, 6.6vw, 100px); font-weight: 900; letter-spacing: -.02em; }
.lp-discount--deal .lp-d-num { font-size: clamp(38px, 5.5vw, 84px); }
.lp-d-mid { font-size: clamp(20px, 2.6vw, 40px); font-weight: 800; opacity: .9; }
.lp-d-num--accent { color: #F0A6C4; }

/* CTA button */
.lp-cta {
	display: inline-flex; align-items: center; gap: .4em;
	background: var(--lp-accent); color: #fff; text-decoration: none;
	font-size: clamp(13px, 1.15vw, 16px); font-weight: 600;
	padding: clamp(10px, 1.1vw, 15px) clamp(24px, 2.6vw, 46px);
	border-radius: 0; transition: transform .15s ease, filter .15s ease;
}
.lp-cta:hover { filter: brightness(1.15); transform: translateY(-1px); }
.lp-cta--light { background: #fff; color: #1a1a1a; }  /* for dark backgrounds */
/* direction:ltr keeps the chevron from being bidi-mirrored by the RTL page,
 * so it reliably points left (forward) — no per-slide pre-flipped glyphs. */
.lp-arrow { direction: ltr; font-size: 1.25em; line-height: 0; transform: translateY(1px); }
.lp-fine { font-size: clamp(11px, .9vw, 14px); font-weight: 500; color: var(--lp-ink); opacity: .6; margin-top: clamp(12px, 1.6vw, 20px); }
.lp-pill { display: inline-block; background: var(--lp-accent); color: #fff; font-size: clamp(11px, .9vw, 13px); font-weight: 600; padding: .35em .9em; border-radius: 6px; margin-bottom: .9em; }

/* ========== Media column (product images / placeholders) ========== */
.lp-media { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.2vw, 18px); padding: 0 clamp(12px, 2vw, 28px) clamp(20px, 3.5vh, 52px); }
.lp-media--single { align-items: center; padding-bottom: 0; }
.lp-prod { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 62%; aspect-ratio: 1/3; animation: lp-rise .6s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc(var(--i) * .08s); }
.lp-prod--tall { height: 82%; }
.lp-prod--box { height: 70%; aspect-ratio: 1/1; }
.lp-prod img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(60, 25, 45, .28)); }
/* Placeholder shown when a slide has no product image yet (.is-empty) */
.lp-prod.is-empty::before {
	content: ""; width: clamp(34px, 4vw, 64px); height: 100%;
	border-radius: 999px 999px 12px 12px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%), var(--lp-ph);
	box-shadow: 0 16px 22px rgba(60, 25, 45, .22);
}
.lp-prod--box.is-empty::before { width: 64%; aspect-ratio: 1/1; border-radius: 14px; }

/* ========== Product cards (used by the bestsellers slide) ========== */
.lp-cards { display: flex; gap: clamp(8px, 1.2vw, 16px); align-items: stretch; padding: clamp(16px, 2vw, 28px) clamp(16px, 2.2vw, 32px) clamp(16px, 2vw, 28px) 0; height: 100%; }
.lp-card { flex: 1; background: rgba(255, 255, 255, .9); border-radius: 14px; padding: clamp(12px, 1.4vw, 20px); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; text-align: center; text-decoration: none; color: inherit; transition: transform .15s ease; }
.lp-card:hover { transform: translateY(-2px); }
.lp-badge { position: absolute; top: 10px; inset-inline-end: 10px; background: #E24B4A; color: #fff; font-size: clamp(10px, .85vw, 12px); font-weight: 600; padding: .25em .7em; border-radius: 5px; }
.lp-card-img { height: 52%; display: flex; align-items: center; justify-content: center; margin-bottom: .7em; }
.lp-card-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.lp-card-img.is-empty { width: clamp(40px, 4vw, 66px); height: clamp(84px, 11vw, 150px); }
.lp-card-img.is-empty::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 999px 999px 10px 10px; background: linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(0, 0, 0, 0) 55%), var(--lp-ph); }
.lp-card-name { font-size: clamp(12px, 1vw, 14px); font-weight: 500; color: #333; margin-bottom: .25em; }
.lp-card-price { font-size: clamp(14px, 1.25vw, 18px); font-weight: 700; color: #1a1a1a; }

/* ========== Nav arrows & dots ==========
 * Dot COLORS are set per active slide by the JS (based on the slide's
 * data-dots="light|dark") so they stay legible on any background. The values
 * below are just the pre-JS defaults. */
/* direction:ltr so the chevron glyphs render as authored (outward) instead of
 * being bidi-mirrored by the RTL page. Positioning is physical (left/right)
 * so it's unaffected by that direction. */
.lp-nav { position: absolute; top: 50%; transform: translateY(-50%); direction: ltr; width: clamp(32px, 3vw, 42px); height: clamp(32px, 3vw, 42px); border: none; border-radius: 50%; background: rgba(255, 255, 255, .82); color: #1a1a1a; font-size: 1.3em; line-height: 1; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.lp-nav:hover { background: #fff; }
.lp-nav--next { left: 14px; }    /* RTL: forward = leftward, so "next" sits on the left */
.lp-nav--prev { right: 14px; }   /* RTL: back = rightward */
.lp-dots { position: absolute; bottom: clamp(10px, 1.6vh, 18px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }   /* centered; dot order inherits RTL (right→left) */   /* LTR: dot order follows the physical arrows (left arrow → pill left) */
.lp-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(0, 0, 0, .22); transition: background .2s, width .2s; }
.lp-dot[aria-selected="true"] { width: 22px; border-radius: 5px; }

@keyframes lp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ========== Elementor fix: give the track an explicit height below 768px ======
 * Below Elementor's 768px breakpoint neither aspect-ratio nor the old padding-top
 * hack resolves a height for .lp-track, so the banner collapses to 0 and the page
 * below rides over it. Width is fine here — only the derived height fails — so we
 * set an explicit height instead. The carousel spans ~full viewport width at this
 * size, so a vw-based height matches its width and can never resolve to 0.       */
@media (max-width: 767px) {
	.lp-track { height: calc(100vw * 585 / 1536); }   /* desktop 1536:585 ratio */
}

/* ========== Mobile: collapse to 1:1 square, stack copy over media ========== */
@media (max-width: 500px) {
	.lp-track { height: 100vw; }   /* square on phones (overrides the ratio above) */
	.lp-slide { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; text-align: center; row-gap: clamp(10px, 3vh, 26px); padding: clamp(24px, 6vh, 48px) 0; }
	.lp-copy { padding: 0 22px; order: 1; }
	.lp-media, .lp-cards { order: 2; }
	.lp-discount { justify-content: center; }
	.lp-cards { padding: 0 22px; height: auto; }
	.lp-card-img { height: auto; }
	.lp-cta { margin-top: .4em; }
	.lp-nav { display: none; }   /* swipe instead */
}
@media (prefers-reduced-motion: reduce) {
	.lp-slide { transition: none; }
	.lp-prod { animation: none; }
}