/**
 * KG Cosmetics — Home page interaction polish + home-only design-system trim.
 *
 * Applies a few principles from Apple's "Designing Fluid Interfaces":
 * instant press feedback (never wait for the gesture to end), motion that
 * eases like a critically-damped spring instead of a linear/step curve,
 * and a reduced-motion fallback that keeps feedback but drops movement.
 *
 * The behaviour here is unchanged from the original pass; only the colours
 * and a few measurements were retuned to the near-black / cream / hairline
 * palette. Palette tokens come from kg-design-system.css, which is enqueued
 * site-wide ahead of this file.
 *
 * Loaded only on the front page — see kava_child_enqueue_home_styles()
 * in functions.php.
 */

/* 1) Category tiles & promo banners (.jet-banner) ------------------------ */

.jet-banner {
	overflow: hidden; /* the image scales inside its own frame, nothing shifts layout */
}

/**
 * The tiles are real product photography with four different native aspect
 * ratios, and Jet's "lily" preset draws each image 50px wider than its frame
 * and shifted 40px left so it can slide sideways on hover — which left the
 * row on a ragged baseline and fought the scale-on-hover below.
 *
 * Crop every tile to one portrait frame instead: the row reads as a grid, the
 * captions land at the same height, and the hover keeps a single motion.
 * Specificity has to clear .jet-banner.jet-effect-lily .jet-banner__img (0,3,0).
 */
.elementor-widget-jet-banner .jet-banner.jet-effect-lily .jet-banner__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: clamp(240px, 24vw, 360px);
	object-fit: cover;
	transform: none;
	transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.elementor-widget-jet-banner .jet-banner.jet-effect-lily:hover .jet-banner__img,
.jet-banner__link:hover .jet-banner__img {
	transform: scale(1.04);
}

/* Instant feedback on press — never wait for release to react. */
.elementor-widget-jet-banner .jet-banner.jet-effect-lily .jet-banner__link:active .jet-banner__img,
.jet-banner__link:active .jet-banner__img {
	transform: scale(0.99);
	transition: transform 100ms ease-out;
}

/* Caption sits in the scrim at the foot of the frame, not floating mid-image. */
.jet-banner__content-wrap {
	justify-content: flex-end;
}

/**
 * The tile captions are white type on photography. The bottom-weighted ink
 * scrim that keeps them legible is set on each banner's own Overlay controls
 * (Style › Overlay: gradient + opacity 1) rather than here, because Elementor
 * emits `opacity: 0` per widget at (0,4,0) and a stylesheet rule would have to
 * fight it. Edit it in Elementor, not in CSS.
 */

/* The card title is tracked uppercase now, so the old negative tracking
   would fight the letter-spacing set on the widget. */
.jet-banner__title {
	letter-spacing: 0.11em;
	margin-bottom: 4px;
}

/**
 * 1b) "Our Categories" row only — icon tiles ------------------------------
 *
 * This row (Face / Eyes & Brows / Lips / Tools, section .elementor-element-
 * 063a8da) is the only .jet-banner row that got the icon treatment. Every
 * selector below is scoped to that section: a first pass scoped by class
 * only (`.jet-banner__link[href*="/face/"]`, etc.) also matched the lower
 * "Radiant Skin / Perfect Lips / Blush & Glow" row (section .elementor-
 * element-86c52f5, different widgets, same Jet Banner classes — "Radiant
 * Skin" even reuses the /face/ category link), which silently lost its
 * photos and hover zoom. That row is real model photography and was never
 * meant to change, so nothing here may drop the section-063a8da prefix.
 */

/* Elementor hardcodes "Nunito" as a per-widget rule keyed by element ID
   (`.elementor-element-5168dc0 .jet-banner__title`, one per tile) — same
   (0,3,0) specificity problem as the colour override below, so this needs
   !important too, not just the section scope. */
.elementor-element-063a8da .jet-banner__title {
	font-family: "Playfair Display", Georgia, serif !important;
}

/**
 * Each tile shows a single hand-drawn line icon on a flat card instead of a
 * product photo: a glyph reads instantly at this size and keeps all four
 * tiles visually identical no matter what's actually in stock. Jet Banner
 * has no icon field, so `.jet-banner__img` stays in the markup but hidden,
 * and the glyph is a background-image on the link's ::after, picked per
 * tile by its Elementor widget ID (5168dc0 Face, 3af9dd4 Eyes & Brows,
 * e962025 Lips, 866ad64 Tools). It used to match the link's href, which
 * broke silently when the Eyes tile was re-pointed from /eyes-brows/ to
 * /eyes/ (2026-09-24) — the widget ID doesn't change when links do.
 *
 * Hiding the image removes the one in-flow child that was giving the frame
 * its height (the caption and overlay are both position: absolute), so a
 * fixed height moves onto the figure itself here. Captions were white-on-
 * photo; on a cream card that's invisible, so they move to ink here too.
 * Sized smaller than the row below on purpose — an icon+label card doesn't
 * need the same footprint as a photo.
 */
.elementor-element-063a8da .elementor-widget-jet-banner .jet-banner.jet-effect-lily .jet-banner__img {
	display: none;
}

.elementor-element-063a8da .elementor-widget-jet-banner .jet-banner.jet-effect-lily {
	height: clamp(170px, 15vw, 230px);
	background: var(--kg-cream, #FBF8F5);
}

/* Elementor writes each tile's own colour as a per-widget rule keyed by its
   element ID (`.elementor-element-XXXXXXX .jet-banner__title`), which outranks
   a plain class selector — !important is the only way a stylesheet wins here. */
.elementor-element-063a8da .jet-banner__title,
.elementor-element-063a8da .jet-banner__text {
	color: var(--kg-ink, #1C1C1C) !important;
}

.elementor-element-063a8da .jet-banner__text {
	opacity: 0.7;
}

.elementor-element-063a8da .jet-banner__link::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 38%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 22%;
	max-width: 56px;
	min-width: 32px;
	aspect-ratio: 1 / 1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
}

/* Face — spa/flower mark (skincare & complexion). */
.elementor-element-063a8da .elementor-element-5168dc0 .jet-banner__link::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='1.3'%3E%3Ccircle cx='16.2' cy='12' r='3.6'/%3E%3Ccircle cx='14.1' cy='8.36' r='3.6'/%3E%3Ccircle cx='9.9' cy='8.36' r='3.6'/%3E%3Ccircle cx='7.8' cy='12' r='3.6'/%3E%3Ccircle cx='9.9' cy='15.64' r='3.6'/%3E%3Ccircle cx='14.1' cy='15.64' r='3.6'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E");
}

/* Eyes & Brows — almond eye with lashes-line brow above. */
.elementor-element-063a8da .elementor-element-3af9dd4 .jet-banner__link::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12 Q12 5 21 12 Q12 19 3 12 Z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3Cpath d='M5 6 Q12 2.5 19 6'/%3E%3C/svg%3E");
}

/* Lips — kiss outline with a seam line. */
.elementor-element-063a8da .elementor-element-e962025 .jet-banner__link::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12 C7 8 10 8 12 10 C14 8 17 8 20 12 C18 17 14 18 12 16.5 C10 18 6 17 4 12 Z'/%3E%3Cpath d='M4 12 C8 13.5 16 13.5 20 12'/%3E%3C/svg%3E");
}

/* Tools — a fan-bristle makeup brush (wide head, so it doesn't read as a
   dropper — the first pass, a narrow bristle tip, looked like a pipette). */
.elementor-element-063a8da .elementor-element-866ad64 .jet-banner__link::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3 C7 5 7.5 7 9 8.5 L15 8.5 C16.5 7 17 5 16 3 C14 1.5 10 1.5 8 3 Z'/%3E%3Cpath d='M10 4.3 L10 7'/%3E%3Cpath d='M12 4 L12 7.3'/%3E%3Cpath d='M14 4.3 L14 7'/%3E%3Crect x='9.5' y='8.5' width='5' height='2'/%3E%3Crect x='10.7' y='10.5' width='2.6' height='10.5' rx='1.3'/%3E%3C/svg%3E");
}

/* 2) Add-to-cart buttons -------------------------------------------------- */

/* Press feedback for every button on the site now lives in
   kg-design-system.css (it used to be home-only, which left /shop/ and
   product pages with a dead Add to Cart button — see the
   find-animation-opportunities pass). Nothing left to add here. */

/* 3) Product grid items: a gentle lift on hover, no layout shift --------- */

.jet-woo-products__item {
	transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jet-woo-products__item:hover {
	transform: translateY(-4px);
}

/* 4) Hero slider CTA ------------------------------------------------------ */

/* The CTA is a Smart Slider heading layer styled as a solid ink block; give
   it the same press feedback as every other button on the page. */
#n2-ss-2 [class*="n-uc-cta-"] .n2-ss-layer-content,
#n2-ss-2 [class*="n-uc-cta-"] a {
	transition: background-color 200ms ease-out, transform 100ms ease-out;
}

#n2-ss-2 [class*="n-uc-cta-"]:active {
	transform: scale(0.97);
	transition: transform 80ms ease-out;
}

/**
 * The three hero photos (kg-hero-1/2/3.jpg) are pale, airy pastel shots —
 * on-brand, but the heading/CTA layers on top are set to white, so the type
 * was landing straight on near-white photography with no scrim under it.
 * Same fix as the .jet-banner__content-wrap captions above: a bottom-weighted
 * ink gradient behind the text, not a flat tint over the whole photo, so the
 * image still reads as light and the copy stays legible.
 */
/* Smart Slider already renders this element position: absolute, which is
   enough to contain the ::after below — don't touch position here, its
   inline top/left/width/height come from the slider's own layout JS. */
#n2-ss-2 .n2-ss-slide-background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(28, 28, 28, 0.12) 0%, rgba(28, 28, 28, 0.5) 100%);
	pointer-events: none;
}

/**
 * The heading's per-letter reveal effect (Smart Slider's character-split
 * "in" animation) never plays: TweenJS sets each <ss-char> to
 * `opacity: 0; transform: scale(5, 5)` as its start frame and that's where
 * it stays — the timeline that's supposed to animate it to opacity 1 never
 * ticks, on every slide, every load, so this isn't a one-off stutter to wait
 * out. Net effect: the headline was permanently invisible regardless of the
 * scrim above. Force the end state directly so the copy always renders; this
 * only touches the split-text spans Smart Slider generates for this one
 * slider's headings, nothing else on the page uses <ss-char>.
 */
#n2-ss-2 ss-char {
	opacity: 1 !important;
	transform: none !important;
}

/* 5) Testimonials --------------------------------------------------------- */

/* The quote is the one long-form serif passage on the page; give it a
   comfortable measure and a hairline card instead of a shadowed box. */
.jet-testimonials__item-inner {
	background: var(--kg-paper, #FFFFFF);
	border: 1px solid var(--kg-rule, #E5E5E5);
	padding: 34px 30px 30px;
	height: 100%;
}

.jet-testimonials__comment {
	max-width: 46ch;
	margin-inline: auto;
}

.jet-testimonials__name {
	margin-top: 18px;
}

/* 6) Scroll entrance for the home page's major widgets -------------------- */

/**
 * Plays once, the first time each widget enters the viewport — Delight tier
 * (rare, first-time-per-visit), not an interaction, so the usual frequency
 * ceiling on motion doesn't apply here. See home-reveal.js for the observer
 * that adds .is-visible per item.
 *
 * A widget opts in entirely through its own Elementor "CSS Classes" field
 * (kg-reveal-item, plus kg-reveal-delay-1/2/3 on the 2nd/3rd/4th tile in a
 * row so the row reads as one staggered sweep) — nothing hard-wired to a
 * page or element ID. Section-level "CSS Classes" doesn't render in this
 * Elementor version (only widgets apply it), which is why this targets
 * individual tiles/cards rather than wrapping whole rows.
 */
.kg-reveal-item {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 450ms var(--kg-ease), transform 450ms var(--kg-ease);
}

.kg-reveal-item.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.kg-reveal-delay-1 { transition-delay: 40ms; }
.kg-reveal-delay-2 { transition-delay: 80ms; }
.kg-reveal-delay-3 { transition-delay: 120ms; }

/* 7) Reduced motion: keep the feedback, drop the movement ---------------- */

@media (prefers-reduced-motion: reduce) {
	.jet-banner__img,
	.elementor-widget-jet-banner .jet-banner.jet-effect-lily .jet-banner__img,
	.elementor-widget-jet-banner .jet-banner.jet-effect-lily:hover .jet-banner__img,
	.jet-banner__link:active .jet-banner__img,
	.jet-banner .jet-banner__overlay,
	.jet-woo-products__item,
	#n2-ss-2 [class*="n-uc-cta-"],
	.kg-reveal-item {
		transition: opacity 200ms ease !important;
		transform: none !important;
	}
}