/*
 * Complément CSS minimal — tout ce qui peut être exprimé via theme.json
 * (couleurs, typographie, espacements) doit y rester plutôt qu'ici.
 */

.leny-beauty-subcategories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 2rem;
}

.leny-beauty-subcat-pill {
	display: inline-block;
	padding: 0.4em 1em;
	border: 1px solid var(--wp--preset--color--border, #e6d9ee);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #000);
}

.leny-beauty-subcat-pill:hover {
	background: var(--wp--preset--color--secondary, #f6effa);
}

.leny-beauty-subcat-count {
	opacity: 0.6;
}

.leny-beauty-brand-marquee {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.leny-beauty-brand-marquee-track {
	display: flex;
	align-items: center;
	gap: 4rem;
	width: max-content;
	animation: leny-beauty-marquee 28s linear infinite;
}

.leny-beauty-brand-marquee-track img {
	height: 36px;
	width: auto;
	filter: grayscale(1);
	opacity: 0.65;
}

@keyframes leny-beauty-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.leny-beauty-brand-marquee-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* ==========================================================================
   Header fixe (sticky) + halo au scroll
   ========================================================================== */

/* Announcement bar and header stack as two independently fixed bars (rather
   than one wrapping container) so each template-part stays a simple,
   separately reusable block — the header's "top" offset equals the
   announcement bar's own height, which is stable (fixed padding/font-size). */
/* font-size/letter-spacing measured directly from the real reference
   (computed 18.4px / 0.69px letter-spacing on its announcement bar). */
.leny-announcement-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 101;
	font-size: 1.15rem;
	letter-spacing: 0.69px;
}

/* Real Nexus layout: 3 equal-ratio columns (1:2:1) — confirmed via its own
   flex children (.localization_wrapper / .announce_countdown-wrap /
   .social_wrapper_anouncement), each side column exactly 25% of the inset
   content width. Content is LEFT-aligned within each column (both sides),
   not pushed to the outer edge — that's what created the "icons touch the
   edge" gap the side-by-side screenshots flagged. */
.leny-announcement-bar__left,
.leny-announcement-bar__right {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.leny-announcement-bar__right {
	justify-content: flex-start;
}

.leny-announcement-bar__right a {
	color: inherit;
	display: inline-flex;
}

.leny-announcement-bar__center {
	margin: 0;
	text-align: center;
	flex: 2;
}

@media (max-width: 900px) {
	.leny-announcement-bar__left,
	.leny-announcement-bar__right {
		display: none;
	}
	.leny-announcement-bar__center {
		flex: 1;
	}
}

/* Nexus's "solid" header is dark purple with white text everywhere (mobile
   at all times, desktop once scrolled, and on every non-home page) — not a
   white background with dark text as first assumed. Measured directly on
   the real reference: #432051, the theme's own accent-dark token. */
.leny-site-header {
	position: fixed;
	/* Real measured announcement-bar height on this site is 43px, not the
	   34px previously assumed here (stale from before the bar's padding/
	   font-size were corrected). On desktop, Nexus's header and hero share
	   the exact same top Y (both start right where the announcement bar
	   ends) — measured directly (both at 41.2px on the reference). Matching
	   that requires this offset to equal our OWN real announcement height,
	   not Nexus's, since our announcement bar renders at a different height
	   (43px vs 41.2px) — see .leny-hero.swiper below for the matching value. */
	top: 43px;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--wp--preset--color--accent-dark, #432051);
	color: #fff;
	transition: background-color 0.3s ease, box-shadow 0.25s ease;
	/* The --header-height CSS custom property (94.65625px) turned out not to
	   match the real rendered header — direct measurement of the actual
	   .header_wrapper box on the live reference gives 137.91px, with the
	   nav row vertically centered within that full height (not just within
	   a padding box). Per the "rendered result over source CSS value" rule,
	   the measured figure wins: this is what was making our header visibly
	   more compact/cramped than Nexus's real one. */
	min-height: 137.91px;
}

.leny-site-header a,
.leny-site-header button {
	color: #fff;
}

.leny-site-header.is-scrolled {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* The uploaded logo file is already the violet/brand-color version — real
   Nexus DOM confirms two separate logo assets (colored + a dedicated
   "_branco_sticky" white one), used exactly this way: colored logo over
   the transparent hero, white logo once the header goes solid. We only
   have the one (colored) file, so white is faked via filter — but only in
   the states that actually need it, not unconditionally as before (that
   was backwards: it always showed white, even over the transparent hero
   where Nexus shows the colored logo). Width from the CSS var (170px);
   height corrected to 105px per direct Playwright measurement of the real
   rendered logo — the earlier 85px came from the --logo-height custom
   property, which measurement now shows isn't what's actually applied. */
.leny-site-header__logo img {
	width: 170px;
	height: 105px;
	object-fit: contain;
}

body:not(.home) .leny-site-header__logo img,
body.is-scrolled .leny-site-header__logo img {
	filter: brightness(0) invert(1);
}

/* Transparent overlay over the hero on the homepage only, until scrolled —
   other pages (no hero underneath) get the solid dark header immediately. */
body.home .leny-site-header:not(.is-scrolled) {
	background: transparent;
}

/* Nexus shows only the solid dark header once scrolled — no separate
   announcement strip stacked above it. */
body.is-scrolled .leny-announcement-bar {
	display: none;
}

body.is-scrolled .leny-site-header {
	top: 0;
}

body:not(.home) .wp-site-blocks {
	/* announcement (43px, real measured) + header (137.91px) — was 172px,
	   computed with the same stale 34px announcement figure fixed above. */
	padding-top: 180.91px;
}

@media (max-width: 768px) {
	/* STRUCTURAL FIX (not a compensating margin): direct measurement across
	   4 viewports showed the real Nexus hero starts at the SAME y as the
	   header on desktop (both overlaid, absolute-positioned header over the
	   hero) but ~94.6px LOWER than the announcement bar on mobile — i.e.
	   Nexus's mobile header sits in real document flow, pushing the hero
	   down, while its desktop header overlays transparently from page load.
	   Our header was `position:fixed` (overlay) at every width, which is
	   correct for desktop but was structurally wrong on mobile: the hero
	   started right under the fixed header instead of being pushed down,
	   and every "top offset"/"padding-top" value on mobile before this was
	   a workaround for that root cause, not a fix for it.
	   `position:sticky` puts the header back in real flow (so the hero and
	   any page content that follows are pushed down automatically, with no
	   manual padding-top needed) while still locking it to the viewport
	   once scrolled. margin-top reserves the space for the announcement bar
	   above it, which stays `position:fixed` deliberately — flipping that
	   one too to "real flow" would risk a layout jump when it's hidden via
	   display:none on scroll (mid-scroll, its space would suddenly
	   collapse); it's already out of flow today, so hiding it moves
	   nothing. */
	.leny-site-header {
		position: sticky;
		top: 0;
		margin-top: 34px;
		/* Nexus's mobile header is a compact solid bar, not the taller
		   signature-logo desktop bar — the bigger desktop padding/logo/
		   min-height above isn't appropriate here (was inherited
		   unintentionally). */
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		min-height: 0;
	}
	.leny-site-header__logo img {
		width: 110px !important;
		height: auto !important;
	}
	/* WordPress's own default block-gap margin (24px) between the header
	   template-part and the hero block accounts for most of the space now
	   that the header sits in real flow, but measured against the real
	   reference it's 6.94px short (125px real hero.top vs 131.94px target
	   at 390px) — an exact, quantified shortfall, not an arbitrary value. */
	.leny-hero.swiper {
		margin-top: 30.94px;
	}
	/* Mobile header is always the solid dark bar (never the transparent
	   overlay), on every page including home — so the logo is always white
	   here, not just on non-home/scrolled states. This background override
	   was missing until now: with the header in real flow (see the sticky
	   fix above) it no longer visually sits over the hero photo, so the
	   transparent rule left a blank white gap instead of showing the photo
	   through it — a direct, expected consequence of the structural fix,
	   not a new bug in that fix itself. */
	body.home .leny-site-header:not(.is-scrolled) {
		background: var(--wp--preset--color--accent-dark, #432051);
	}
	body.home .leny-site-header__logo img {
		filter: brightness(0) invert(1);
	}
}

/* The logo below is centered via absolute positioning against whatever
   containing block .leny-site-header establishes — fixed on desktop,
   sticky on mobile (see the 768px block above) — both are valid containing
   blocks, so no re-declaration is needed here. (A `position: fixed;`
   re-declaration used to live here "just for the containing block"; it
   silently overrode the mobile sticky rule above via source order, which
   is why the structural mobile fix wasn't taking effect — removed.) */


.leny-site-header__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* ---- Desktop mega-menu nav (custom markup — see header.html) ---- */

.leny-desktop-nav {
	display: none;
}

.leny-mobile-nav {
	display: block;
}

/* Raised from 900px to 1300px: the full desktop mega-menu nav collides with
   the absolutely-centered 170px logo below that width (confirmed by
   screenshot at 1024px — "Contacto" ran under the logo). No Nexus header
   CSS was available to source their own collapse point, so the mobile
   hamburger drawer is used through the medium-desktop range instead of
   shrinking the nav to fit — a measured, defensible fallback, not a value
   taken from their file. */
@media (min-width: 1300px) {
	.leny-desktop-nav {
		display: block;
	}
	.leny-mobile-nav {
		display: none !important;
	}
}

.leny-desktop-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

/* font-weight/letter-spacing measured directly from the real reference's
   computed style (400, not the assumed 500 — a real, confirmed gap). */
.leny-desktop-nav a {
	text-decoration: none;
	color: inherit;
	text-transform: none;
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: 0.69px;
	white-space: nowrap;
}

.leny-desktop-nav__has-mega {
	position: relative;
}

.leny-desktop-nav__caret {
	font-size: 0.7rem;
	margin-left: 0.2rem;
}

.leny-mega-menu {
	position: fixed;
	/* announcement (43px) + header (137.91px), same corrected offset as
	   .wp-site-blocks padding-top above — was 172px. */
	top: 180.91px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	padding: 2rem;
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #000);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.leny-desktop-nav__has-mega:hover .leny-mega-menu,
.leny-desktop-nav__has-mega:focus-within .leny-mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.leny-mega-menu__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 150px;
	text-decoration: none;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.leny-mega-menu__tile img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 12px;
}

.leny-mega-menu__tile span {
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
}

.leny-site-header__icons .wp-block-search__button {
	background: none !important;
	border: none;
	padding: 0.25rem !important;
	color: inherit !important;
}

.leny-site-header__icons svg,
.leny-site-header__icons .wc-block-customer-account__account-icon {
	color: inherit;
}

/* Real Nexus icon geometry (search/account paths extracted directly from
   its DOM), applied via mask so the native WooCommerce/search block markup,
   behaviour and accessibility stay untouched — only the paint changes. Not
   a Font Awesome / external icon set. */
.leny-site-header__icons .wp-block-search__button svg,
.leny-site-header__icons .wc-block-customer-account__visual svg,
.leny-site-header__icons .wc-block-mini-cart__icon {
	width: 0;
	visibility: hidden;
}

.leny-site-header__icons .wp-block-search__button,
.leny-site-header__icons .wc-block-customer-account__visual,
.leny-site-header__icons .wc-block-mini-cart__button {
	position: relative;
}

.leny-site-header__icons .wp-block-search__button::after,
.leny-site-header__icons .wc-block-customer-account__visual::after,
.leny-site-header__icons .wc-block-mini-cart__button::after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
}

.leny-site-header__icons .wp-block-search__button::after {
	mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.29167 1.28711C3.98586 1.28711 1.29297 3.97999 1.29297 7.28582C1.29297 10.5916 3.98586 13.2898 7.29167 13.2898C8.70368 13.2898 10.0023 12.7949 11.0286 11.9733L13.5273 14.4707C13.6534 14.5916 13.8219 14.6583 13.9965 14.6565C14.1712 14.6547 14.3382 14.5846 14.4618 14.4612C14.5854 14.3377 14.6558 14.1708 14.6578 13.9962C14.6598 13.8215 14.5934 13.653 14.4727 13.5267L11.974 11.0281C12.7962 10.0001 13.2917 8.69946 13.2917 7.28582C13.2917 3.97999 10.5975 1.28711 7.29167 1.28711ZM7.29167 2.62046C9.87689 2.62046 11.957 4.7006 11.957 7.28582C11.957 9.87104 9.87689 11.9564 7.29167 11.9564C4.70644 11.9564 2.6263 9.87104 2.6263 7.28582C2.6263 4.7006 4.70644 2.62046 7.29167 2.62046Z'/%3E%3C/svg%3E");
}

.leny-site-header__icons .wc-block-customer-account__visual::after {
	position: absolute;
	inset: 0;
	margin: auto;
	mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.4118 7.41891C11.4356 6.67225 12.1023 5.46387 12.1023 4.10256C12.1023 1.84041 10.2618 0 7.99969 0C5.73753 0 3.89713 1.84041 3.89713 4.10256C3.89713 5.46387 4.56378 6.67225 5.58759 7.41891C3.04259 8.39281 1.23047 10.8603 1.23047 13.7436C1.23047 14.9878 2.24269 16 3.48688 16H12.5125C13.7567 16 14.7689 14.9878 14.7689 13.7436C14.7689 10.8603 12.9568 8.39281 10.4118 7.41891ZM5.12791 4.10256C5.12791 2.51906 6.41619 1.23078 7.99969 1.23078C9.58319 1.23078 10.8715 2.51906 10.8715 4.10256C10.8715 5.68606 9.58319 6.97437 7.99969 6.97437C6.41619 6.97437 5.12791 5.68606 5.12791 4.10256ZM12.5125 14.7692H3.48688C2.92134 14.7692 2.46125 14.3091 2.46125 13.7436C2.46125 10.6896 4.94575 8.20509 7.99972 8.20509C11.0537 8.20509 13.5382 10.6896 13.5382 13.7436C13.5382 14.3091 13.0781 14.7692 12.5125 14.7692Z'/%3E%3C/svg%3E");
}

/* Same cart glyph as the mini-card's own add-to-cart button, for
   consistency with Nexus (which uses one cart icon throughout). */
.leny-site-header__icons .wc-block-mini-cart__button::after {
	mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M16.5352 7.97876C15.4412 0.494175 14.4913 0 8.38567 0C2.26978 0 1.31892 0.492342 0.227666 7.96895C-0.248242 11.2301 0.0124245 13.1314 1.09975 14.3274C2.40433 15.7614 4.7557 16.0416 8.37705 16.0416C12.004 16.0416 14.3592 15.7605 15.6642 14.3255C16.7505 13.1314 17.0111 11.2337 16.5352 7.97876ZM14.5802 13.4233C13.6388 14.4591 11.5092 14.6667 8.37772 14.6667C5.25192 14.6667 3.12605 14.4589 2.18506 13.4241C1.40881 12.5716 1.24446 10.9472 1.65165 8.1587C2.6418 1.37537 2.96649 1.37537 8.38615 1.37537C13.7955 1.37537 14.1193 1.37537 15.1122 8.16887C15.5184 10.9517 15.3547 12.5719 14.5802 13.4233Z'/%3E%3Cpath d='M10.776 3.20801C10.5854 3.20801 10.4026 3.28044 10.2678 3.40937C10.133 3.5383 10.0573 3.71317 10.0573 3.89551C10.0573 4.32096 9.8806 4.72899 9.56609 5.02983C9.25157 5.33066 8.825 5.49967 8.38021 5.49967C7.93542 5.49967 7.50885 5.33066 7.19433 5.02983C6.87982 4.72899 6.70312 4.32096 6.70312 3.89551C6.70312 3.71317 6.6274 3.5383 6.49261 3.40937C6.35782 3.28044 6.175 3.20801 5.98438 3.20801C5.79375 3.20801 5.61093 3.28044 5.47614 3.40937C5.34135 3.5383 5.26562 3.71317 5.26562 3.89551C5.26562 4.68563 5.59377 5.44339 6.17787 6.0021C6.76196 6.5608 7.55417 6.87467 8.38021 6.87467C9.20625 6.87467 9.99845 6.5608 10.5826 6.0021C11.1666 5.44339 11.4948 4.68563 11.4948 3.89551C11.4948 3.71317 11.4191 3.5383 11.2843 3.40937C11.1495 3.28044 10.9667 3.20801 10.776 3.20801Z'/%3E%3C/svg%3E");
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.leny-site-header__icons {
	gap: 1rem;
	/* Above the absolutely-centered logo (z-index:auto) in the stacking order —
	   without this, the logo's bounding box visually covers the search icon
	   on narrow viewports where the two are close together. */
	position: relative;
	z-index: 2;
}

/* Nexus's own mobile header shows only search + cart (no account icon) —
   matches the real reference rather than an assumed "keep everything" default. */
@media (max-width: 600px) {
	.leny-site-header__icons .wp-block-woocommerce-customer-account {
		display: none;
	}
}

.leny-site-header__lang {
	margin: 0;
	font-size: 0.85rem;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.leny-site-header__lang {
		display: none;
	}
}

/* ==========================================================================
   Scroll-reveal (fade-in) for homepage sections
   ========================================================================== */

.leny-fade-section {
	opacity: 0;
	transform: translateY(1rem);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.leny-fade-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.leny-fade-section {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Fidélité visuelle Nexus : rayons, ombres, rythme vertical, cartes produit
   ========================================================================== */

.wp-block-cover {
	border-radius: 16px;
	overflow: hidden;
}

.wp-block-image img,
.wc-block-components-product-image img,
.wc-block-grid__product-image img {
	border-radius: 16px;
}

.wc-block-components-product-image {
	overflow: hidden;
	border-radius: 16px;
	display: block;
}

.wc-block-components-product-image img {
	transition: transform 0.5s ease;
}

/* Proper card container for the product grid (legacy "Hand-picked Products"
   block, used on the homepage) — plain images with link-styled titles look
   unfinished; Nexus wraps each product in a bordered, shadowed white card. */
.wc-block-grid__product {
	background: var(--wp--preset--color--base, #fff);
	border-radius: 16px;
	box-shadow: 0 0.15rem 1rem rgba(0, 0, 0, 0.07);
	padding: 1rem 1rem 1.25rem;
}

.wc-block-grid__product-title {
	color: var(--wp--preset--color--contrast, #000) !important;
	font-weight: 600;
	text-transform: none;
	text-decoration: none !important;
}

.wc-block-grid__product-link {
	text-decoration: none !important;
}

.wc-block-grid__product-price {
	color: var(--wp--preset--color--contrast, #000);
	opacity: 0.75;
}

.wc-block-grid__product:hover .wc-block-components-product-image img,
.wc-block-components-product-image:hover img {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-product-image img {
		transition: none;
	}
	.wc-block-grid__product:hover .wc-block-components-product-image img,
	.wc-block-components-product-image:hover img {
		transform: none;
	}
}

.wp-block-button__link,
.wp-element-button {
	border-radius: 8px !important;
	transition: transform 0.2s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

/* Quick-add: circular icon button floating over the product image, revealed
   on hover/focus — closer to the Nexus product card than a full-width text
   button always visible under the price. The link's own text stays in the
   DOM (visually hidden only) so screen readers still announce it.
   Two different WooCommerce block markups are covered: the legacy
   "Hand-picked Products" grid (.wc-block-grid__*, used on the homepage) and
   the newer Product Collection template (.wc-block-product-template / core
   Product Button, used on archive-product.html). !important is used
   deliberately to win over WooCommerce's own bundled CSS for these buttons. */
.wc-block-grid__product,
.wc-block-product-template li.wc-block-product {
	position: relative !important;
}

.wc-block-grid__product-add-to-cart,
.wc-block-product-template .wp-block-woocommerce-product-button {
	position: absolute !important;
	top: 12px;
	right: 12px;
	z-index: 2;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.wc-block-grid__product:hover .wc-block-grid__product-add-to-cart,
.wc-block-grid__product:focus-within .wc-block-grid__product-add-to-cart,
.wc-block-product-template li.wc-block-product:hover .wp-block-woocommerce-product-button,
.wc-block-product-template li.wc-block-product:focus-within .wp-block-woocommerce-product-button {
	opacity: 1;
	transform: translateY(0);
}

.wc-block-grid__product-add-to-cart .add_to_cart_button,
.wc-block-components-product-button__button {
	width: 44px !important;
	height: 44px !important;
	min-height: 44px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.18);
	font-size: 0 !important;
	line-height: 0 !important;
	background-color: var(--wp--preset--color--primary, #bc87d0) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' width='18' height='18'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

@media (max-width: 640px) {
	/* No hover on touch devices — keep the button always visible there. */
	.wc-block-grid__product-add-to-cart,
	.wc-block-product-template .wp-block-woocommerce-product-button {
		opacity: 1;
		transform: none;
	}
}

/* Consistent vertical rhythm between homepage sections (48px desktop / 24px mobile,
   matching the Nexus reference's --vertical-spacing token). */
.leny-section-pad {
	padding-top: 48px;
	padding-bottom: 48px;
}

@media (max-width: 768px) {
	.leny-section-pad {
		padding-top: 24px;
		padding-bottom: 24px;
	}
}

/* ==========================================================================
   Hero slideshow (Swiper — see assets/vendor/swiper/, README "Dépendances")
   ========================================================================== */

/* Explicit, JS-independent dimensions: this block renders correctly even if
   Swiper fails to load/initialise — the height comes from CSS, not from
   Swiper's own layout pass. Selectors are deliberately more specific than
   Swiper's own base ".swiper-slide" rules (which set "display:block" and
   load after ours), with !important as a deliberate, documented override of
   a third-party library's base styles — not a general habit. */
/* Nexus sizes the hero by a real aspect-ratio (--aspect-ratio:50%, i.e.
   height = 50% of width = a 2:1 box), not a fraction of the viewport height. */
/* WordPress's own generated block CSS constrains direct children of
   .wp-site-blocks to the theme's wideSize unless a parent ".is-layout-
   constrained" wrapper is present to interpret .alignfull — a bare raw
   HTML block doesn't get that, confirmed at 1920px (rendered 1840px
   instead of full width even with the alignfull class added). Breaking
   out explicitly instead; body gets overflow-x:hidden as a safety net
   against the 100vw/scrollbar edge case this technique can introduce. */
html {
	overflow-x: hidden;
}

.leny-hero.swiper {
	position: relative;
	overflow: hidden;
	/* WordPress's own core global styles inject a 24px margin-block-start
	   between .wp-site-blocks children (the header template-part and this
	   hero block) — an accidental default, never an intentional value. On
	   desktop the header is fixed/out-of-flow, so without an explicit
	   override the hero actually starts at y=24 while the fixed header
	   starts at y=43 (announcement height): two different top offsets where
	   Nexus's real header and hero share the exact same one (both 41.2px on
	   the reference). Explicit 43px here matches our OWN real announcement
	   height (see .leny-site-header above) so both start flush together,
	   same as Nexus — overridden again for mobile real-flow layout below. */
	margin-top: 43px;
	/* A real aspect-ratio, not a fixed/clamped height — a min/max-height here
	   would silently override the ratio at the very viewport widths (narrow
	   phones, ultra-wide desktops) where checking it actually matters. */
	aspect-ratio: 2 / 1;
	height: auto;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* Nexus forces a taller minimum here (its own .slideshow-swipe__slide
   min-height:50rem / 575px on its root), overriding the pure aspect-ratio
   in this specific bracket — confirmed by direct measurement at 1024px
   (575px real height vs 512px the ratio alone would give). */
@media (min-width: 990px) and (max-width: 1100px) {
	.leny-hero.swiper {
		aspect-ratio: unset;
		height: 575px;
	}
}

.leny-hero.swiper .swiper-wrapper {
	height: 100% !important;
}

.leny-hero .swiper-slide.leny-hero__slide {
	position: relative !important;
	height: 100% !important;
	min-height: 100% !important;
	display: flex !important;
	align-items: center !important;
}

.leny-hero__bg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	z-index: 0 !important;
}

/* Flat overlay, not a gradient — confirmed directly from Nexus's real inline
   style (--overlay: 30%) and its .slideshow-swipe__media::before rule
   (background:#000; opacity:var(--overlay)). Darker on mobile (55%),
   also taken directly from their own mobile-only override. */
.leny-hero__scrim {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 1;
}

@media (max-width: 640px) {
	.leny-hero__scrim {
		background: rgba(0, 0, 0, 0.55);
	}
}

/* Padding taken directly from Nexus's own breakpoints: 3rem at <=1441px,
   5rem above that (confirmed by the real measured heroHeading.x growing
   from 34.5px at 1440 to 74.5px at 1920 — a plain fixed padding undershoots
   the wider breakpoint). max-width:600px (--max-width:600px) is exact. */
/* Padding in px, not rem: Nexus's "3rem"/"5rem" are on its own ~11.5px
   root font-size (34.5px / 57.5px rendered) — copying the rem number
   verbatim onto our 16px root overshoots (48px / 80px instead). */
/* padding-left/right only (no top/bottom): the slide centers this block
   vertically as a whole (align-items:center above); Nexus's own mechanism
   is different (a full-height flex box that centers children internally,
   where top/bottom padding mathematically cancels out of the final
   position) but produces the exact same final vertical position ONLY if
   our own vertical padding is zero — top/bottom padding here would get
   baked into "block height" and shift the centered result by that amount,
   which is exactly what was pushing our content lower than Nexus's real
   position at narrow widths. Horizontal padding is unaffected by this and
   stays as measured. (Tried matching their flex-fill-and-center structure
   directly first — it triggered an unrelated CTA sizing bug from an
   inherited core block style, so this simpler, equivalent fix was used
   instead.) */
.leny-hero__content {
	position: relative;
	z-index: 2;
	padding: 0 34.5px;
	max-width: 37.5rem;
	color: #fff;
}

@media (min-width: 1442px) {
	.leny-hero__content {
		padding: 0 57.5px;
	}
}

/* content-inner max-width tiers, confirmed directly: <=768px -> 25rem
   (287.5px); 1000-1250px -> 45rem (517.5px); default (this rule's own
   600px) covers >=1250px up to 1442px and >1750px. */
@media (max-width: 768px) {
	.leny-hero__content {
		max-width: 287.5px;
	}
}

@media (min-width: 1000px) and (max-width: 1250px) {
	.leny-hero__content {
		max-width: 517.5px;
	}
}

/* fontSize/letter-spacing measured directly (computed 20.7px, no letter-
   spacing on the eyebrow specifically — unlike the description, which does
   carry 0.69px). Zero gap to the heading below (eyebrow bottom == heading
   top in the real DOM), so no margin-bottom here either. */
.leny-hero__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.29rem;
	margin: 0;
	opacity: 0.9;
}

/* Sized/measured directly against the real Shopify reference (getComputedStyle
   at 1440px viewport: heading 48.3px / line-height 56px) rather than estimated. */
/* font-weight:400 confirmed against the real reference's computed style
   (Poppins, same font, same real static 400 face already loaded on our
   side via the "body" font slug) — theme.json's global heading style
   (600) is overridden here for this element only, not sitewide. */
.leny-hero__title {
	font-size: clamp(1.8rem, 1.3rem + 1.91vw, 3.02rem);
	line-height: 1.16;
	font-weight: 400;
	margin: 0;
	color: #fff;
}

/* margin-bottom before the CTA: the base/unscoped Nexus rule is
   margin-top:2rem (23px on their root) — 4rem (46px) is a >=1400px-only
   bump I had wrongly applied everywhere, inflating the content block tall
   enough to overflow shorter heroes at mid-range viewports (confirmed at
   768px: content 412px tall inside a 384px hero). */
.leny-hero__text {
	font-size: 1rem;
	letter-spacing: 0.69px;
	margin: 1rem 0 23px;
	max-width: 37.5rem;
}

@media (min-width: 1400px) {
	.leny-hero__text {
		margin-bottom: 46px;
	}
}

/* Shared base for the cursor-tracking radial fill span (magnetic-fill.js
   creates and positions it; color is set per-button below). z-index:-1
   keeps it behind the button's own text/icon (normal-flow, non-positioned
   content) without needing to wrap that content in an extra span. */
.leny-fill-anim {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	pointer-events: none;
	z-index: -1;
}

@media (prefers-reduced-motion: reduce) {
	.leny-fill-anim {
		transition: none;
	}
}

/* White/outline CTA — matches the Nexus hero button (white bg, brand-purple
   text, white border) which is deliberately distinct from the theme's global
   solid-purple button used elsewhere on the site. Padding/radius measured
   directly (11.5px/34.5px, 8px). The hover fill is NOT a flat background-
   color transition — Nexus uses a circle that grows from the cursor's entry
   point (a real, observed mechanism, see magnetic-fill.js) — so background
   stays static here and only the text/border colour respond to :hover,
   layered visually above the JS-driven fill span. */
.leny-hero__content .wp-block-button__link.wp-element-button {
	/* z-index:0 (not just position:relative) is required to actually
	   establish a local stacking context — without it, the fill span's
	   z-index:-1 escapes to an ancestor context instead of staying just
	   behind this button's own text, and renders invisible behind other
	   page content instead. Found by direct DOM inspection: the span had
	   every correct computed style (white/black bg, correct size) yet
	   never appeared on screen. */
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: #fff;
	color: var(--wp--preset--color--primary, #bc87d0);
	border: 1px solid #fff;
	border-radius: 8px;
	padding: 0.72rem 2.16rem;
	font-size: 1.01rem;
	letter-spacing: 0.69px;
	transition: color 0.15s ease-in-out;
}

.leny-hero__content .wp-block-button__link.wp-element-button:hover,
.leny-hero__content .wp-block-button__link.wp-element-button:focus {
	color: #fff;
	border-color: #000;
}

.leny-hero__content .wp-block-button__link.wp-element-button .leny-fill-anim {
	background: #000;
}

/* Product mini-card: vertical layout (image full-width on top, body below).
   Size/position measured directly against the real Shopify reference
   (getComputedStyle at 1440px: card 368x489px, right 9%, top ~17% of the
   viewport) — a much larger, higher-placed panel than a small corner badge. */
/* border-radius/background measured directly: 11.5px, #F9F6F8 (not white). */
.leny-hero__product {
	position: absolute;
	z-index: 2;
	/* Nexus scales this card down at intermediate widths, not just a single
	   fixed size everywhere >=768px — right:6% / width:28rem (322px) is the
	   *default* bracket (roughly 1100-1400px), confirmed by its own
	   unscoped .slideshow_products rule. */
	right: 6%;
	/* Not a fixed top offset: direct measurement of the real reference shows
	   .slideshow_products uses equal top/bottom offsets (a true vertical
	   center within the hero), which is why a fixed `top:16%` only looked
	   right at one viewport (1440) and drifted ~82px off at 1920 — the
	   taller the hero, the bigger the drift. `top:50%; translateY(-50%)` is
	   the height-independent equivalent, same mechanism already used for
	   .leny-hero__vnav below. */
	top: 50%;
	transform: translateY(-50%);
	background: #f9f6f8;
	border-radius: 11.5px;
	box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.18);
	/* Default bracket (Nexus's own unscoped rule, roughly 1100-1400px): 322px. */
	width: 322px;
	/* The card's total height is fixed (image + panel-at-rest) — the hover
	   reveal repositions content *inside* that box, it never grows past it,
	   so clipping here is safe and correct (matches Nexus: .stl-product
	   also has overflow:hidden). */
	overflow: hidden;
}

/* Nexus scales the mini-card at several distinct widths — not one fixed
   size from 768px up: <=989px -> 172.5px (15rem, still visible down to
   750px where it's hidden entirely); 990-1100px -> 253px (22rem); default
   (1101-1399px) -> 322px (28rem, set above); >=1400px -> 368px (32rem,
   right:9%). */
@media (max-width: 989px) {
	.leny-hero__product {
		width: 172.5px;
	}
}

@media (min-width: 990px) and (max-width: 1100px) {
	.leny-hero__product {
		width: 253px;
	}
}

@media (min-width: 1400px) {
	.leny-hero__product {
		width: 368px;
		right: 9%;
	}
}

.leny-hero__product .leny-beauty-product-mini--vertical {
	display: block;
	padding: 0;
}

.leny-hero__product .leny-beauty-product-mini__image-link {
	display: block;
}

/* Square image — confirmed directly from Nexus's own inline style
   (.shop-look-product.ratio has --aspect-ratio: 100%), not an elongated
   guess tuned by hand against a screenshot. */
.leny-hero__product .leny-beauty-product-mini__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	display: block;
}

/* The panel (title + price + CTA) is the real hover mechanism, ported
   directly from Nexus's own CSS logic:
     .dual_product_info .product_card_add { height: 0; overflow: hidden; }
     .stl-product-info.dual_product_info { margin-top: 0; }
     :hover .product_card_add { height: 5rem; }
     :hover .dual_product_info { margin-top: -5rem; }
   The panel slides UP over the image by exactly the amount the CTA grows
   DOWN into — the panel's own bottom edge never moves, so nothing is
   "pushed" into the page flow and the card's total height never changes. */
.leny-hero__product .leny-beauty-product-mini__panel {
	position: relative;
	background: #f9f6f8;
	margin-top: 0;
	transition: margin-top 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

.leny-hero__product .leny-beauty-product-mini__body-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Padding measured directly: 11.5px top/sides, 17.25px bottom (the real
   card_product_info margin-bottom — the 1.5rem from the base CSS file, on
   Nexus's own 11.5px root, not ours). */
.leny-hero__product .leny-beauty-product-mini__body {
	display: block;
	padding: 11.5px 11.5px 17.25px;
	text-align: center;
}

.leny-hero__product .leny-beauty-product-mini__title {
	display: block;
	font-size: 18.4px;
	margin-bottom: 5.75px;
}

.leny-hero__product .leny-beauty-product-mini__price {
	display: block;
	font-size: 16.1px;
}

.leny-hero__product .leny-beauty-product-mini__cta {
	height: 0;
	overflow: hidden;
	transition: height 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
}

/* Button geometry measured directly: padding 11.5px/34.5px, real height on
   reveal 55.19px (not 5rem/80px), normal letter-spacing (not a guessed
   0.05em). */
/* This button's own hover ALSO has a cursor-tracking radial fill (white,
   distinct from the black-fill main CTA) — confirmed by direct observation:
   hovering the already-black revealed button grows a white circle from the
   pointer's entry point and the label turns brand-purple. overflow:hidden
   clips the oversized circle; position:relative anchors it. */
.leny-hero__product .leny-beauty-product-mini__cta .ajax_add_to_cart {
	/* z-index:0 needed alongside position:relative to actually establish a
	   stacking context — see the main CTA rule above for why. */
	position: relative;
	z-index: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 11.5px 34.5px;
	background: #000;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: normal;
	font-weight: 600;
	font-size: 0.8rem;
	line-height: 32.19px;
	transition: color 0.15s ease-in-out;
}

.leny-hero__product .leny-beauty-product-mini__cta .ajax_add_to_cart:hover,
.leny-hero__product .leny-beauty-product-mini__cta .ajax_add_to_cart:focus {
	color: var(--wp--preset--color--primary, #bc87d0);
}

.leny-hero__product .leny-beauty-product-mini__cta .ajax_add_to_cart .leny-fill-anim {
	background: #fff;
}

/* Small cart glyph before the label — visually present on the real
   reference's revealed button, missing from ours (text-only WooCommerce
   default). Same mask technique as the header icons. */
.leny-hero__product .leny-beauty-product-mini__cta .ajax_add_to_cart::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M16.5352 7.97876C15.4412 0.494175 14.4913 0 8.38567 0C2.26978 0 1.31892 0.492342 0.227666 7.96895C-0.248242 11.2301 0.0124245 13.1314 1.09975 14.3274C2.40433 15.7614 4.7557 16.0416 8.37705 16.0416C12.004 16.0416 14.3592 15.7605 15.6642 14.3255C16.7505 13.1314 17.0111 11.2337 16.5352 7.97876ZM14.5802 13.4233C13.6388 14.4591 11.5092 14.6667 8.37772 14.6667C5.25192 14.6667 3.12605 14.4589 2.18506 13.4241C1.40881 12.5716 1.24446 10.9472 1.65165 8.1587C2.6418 1.37537 2.96649 1.37537 8.38615 1.37537C13.7955 1.37537 14.1193 1.37537 15.1122 8.16887C15.5184 10.9517 15.3547 12.5719 14.5802 13.4233Z'/%3E%3Cpath d='M10.776 3.20801C10.5854 3.20801 10.4026 3.28044 10.2678 3.40937C10.133 3.5383 10.0573 3.71317 10.0573 3.89551C10.0573 4.32096 9.8806 4.72899 9.56609 5.02983C9.25157 5.33066 8.825 5.49967 8.38021 5.49967C7.93542 5.49967 7.50885 5.33066 7.19433 5.02983C6.87982 4.72899 6.70312 4.32096 6.70312 3.89551C6.70312 3.71317 6.6274 3.5383 6.49261 3.40937C6.35782 3.28044 6.175 3.20801 5.98438 3.20801C5.79375 3.20801 5.61093 3.28044 5.47614 3.40937C5.34135 3.5383 5.26562 3.71317 5.26562 3.89551C5.26562 4.68563 5.59377 5.44339 6.17787 6.0021C6.76196 6.5608 7.55417 6.87467 8.38021 6.87467C9.20625 6.87467 9.99845 6.5608 10.5826 6.0021C11.1666 5.44339 11.4948 4.68563 11.4948 3.89551C11.4948 3.71317 11.4191 3.5383 11.2843 3.40937C11.1495 3.28044 10.9667 3.20801 10.776 3.20801Z'/%3E%3C/svg%3E");
}

.leny-hero__product:hover .leny-beauty-product-mini__panel,
.leny-hero__product:focus-within .leny-beauty-product-mini__panel {
	margin-top: -55.19px;
}

.leny-hero__product:hover .leny-beauty-product-mini__cta,
.leny-hero__product:focus-within .leny-beauty-product-mini__cta {
	height: 55.19px;
}

@media (prefers-reduced-motion: reduce) {
	.leny-hero__product .leny-beauty-product-mini__panel,
	.leny-hero__product .leny-beauty-product-mini__cta {
		transition: none;
	}
}

/* Touch devices have no reliable hover — keep the CTA reachable rather than
   hiding it behind a gesture that may not exist (desktop mini-card is
   already hidden below 768px, so this only matters for touch-with-hover
   hybrids and tablets above that breakpoint). */
@media (hover: none) {
	.leny-hero__product .leny-beauty-product-mini__panel {
		margin-top: -55.19px;
	}
	.leny-hero__product .leny-beauty-product-mini__cta {
		height: 55.19px;
	}
}

/* Vertical navigation strip on the right edge, matching the Nexus reference
   (up arrow / progress track / down arrow) instead of horizontal dots.
   Dimensions measured directly at 1440px: circles 43.69px diameter, track
   5.75x184px. Real behaviour is a CUMULATIVE FILL BAR growing from the top
   (transform-origin:top; scaleY grows 0.25 -> 0.5 -> 0.75 -> 1 across the 4
   slides), not a moving 25%-tall highlighted segment as first built. */
.leny-hero__vnav {
	position: absolute;
	z-index: 3;
	right: 28.79px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.leny-hero__vnav-btn {
	width: 43.69px;
	height: 43.69px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Measured colors: prev (pale lilac bg, matches the announcement bar's own
   secondary token) / next (solid brand purple bg, white icon). */
.leny-hero__vnav-prev {
	background: var(--wp--preset--color--secondary, #f6efFA);
	color: var(--wp--preset--color--primary, #bc87d0);
}

.leny-hero__vnav-next {
	background: var(--wp--preset--color--primary, #bc87d0);
	color: #fff;
}

.leny-hero__vnav-track {
	position: relative;
	width: 5.75px;
	/* Not a fluid/continuous scale: direct measurement of the real reference
	   (.pagitaion_container .line) across 768–3000px shows exactly two
	   heights with a single hard breakpoint, not a gradual grow — 184px
	   below 1442px, 322px at/above it (root-font-independent px, since our
	   root is 16px, not Nexus's 11.5px — see below for the matching
	   breakpoint). No hidden intermediate tier: swept every ~50px from 990
	   to 1442 and got 184px throughout. */
	height: 184px;
	background: #ebdfe8;
	border-radius: 2.3px;
	overflow: hidden;
}

@media (min-width: 1442px) {
	.leny-hero__vnav-track {
		height: 322px;
	}
}

.leny-hero__vnav-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--primary, #bc87d0);
	transform: scaleY(0.25);
	transform-origin: top;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal dot pagination: Nexus swaps the desktop vertical arrow+track nav
   for simple dots below the hero on mobile (arrows hidden below 768px) —
   hidden by default here, shown only in the mobile breakpoint below. */
.leny-hero__dots {
	display: none;
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 1rem;
	justify-content: center;
	gap: 0.4rem;
}

.leny-hero__dots .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
}

.leny-hero__dots .swiper-pagination-bullet-active {
	background: #fff;
}

/* Three genuinely separate Nexus breakpoints — NOT one single mobile
   cutoff. Confirmed directly in its CSS: the vertical-nav/dots swap happens
   at 989/990px, the mini-card disappears at 750px, and the mobile visual
   treatment (aspect-ratio, darker overlay, tighter content padding) only
   kicks in at 640px. Bundling all three into one 768px block (as before)
   made 768-989px render wrong: vertical nav hidden too early, and 990-1100px
   never got its own card size (see the width media queries above). */

/* Vertical nav <-> horizontal dots: real threshold is 989/990px, not 768. */
@media (max-width: 989px) {
	.leny-hero__vnav {
		display: none;
	}
	.leny-hero__dots {
		display: flex;
	}
}

/* Mini-card disappears below 750px (Nexus: display:none!important). */
@media (max-width: 750px) {
	.leny-hero__product {
		display: none;
	}
}

/* Mobile visual treatment: real threshold is 640px. Cross-referencing two
   real measurements (390px->382.5px, 430px->415.8px) against the raw
   --aspect-ratio-mob (83.333%) resolves an apparent contradiction: height =
   width*0.8333 + 57.5px exactly at both points — the fixed 57.5px is the
   pagination-dots strip below the ratio box (Nexus's own mobile CSS
   reserves margin-bottom:5rem there). A single aspect-ratio alone, or a
   flat min-height, each undershoot one end. */
@media (max-width: 640px) {
	.leny-hero.swiper {
		aspect-ratio: unset;
		height: calc(83.333vw + 57.5px);
	}
	/* Real DOM carries "slideshow-swipe__content-mobile--middle_left" —
	   mobile IS vertically centered, same as desktop. max-width/padding
	   taken directly from --max-width-mobile and the real <=640px rule. */
	.leny-hero__content {
		padding: 0 1.5rem;
		max-width: 350px;
	}
}

/* ==========================================================================
   Category spotlight — dual synced Swiper (small centered image layered over
   large pale background text), ported from the Nexus reference component.
   ========================================================================== */

.leny-spotlight-v2 {
	position: relative;
	background: var(--wp--preset--color--secondary, #f6effa);
	min-height: 13rem;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.leny-spotlight__text-slider {
	width: 100%;
}

.leny-spotlight__text-slider .swiper-slide {
	text-align: center;
}

.leny-spotlight__text-slider a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	text-transform: uppercase;
	/* Nexus uses two independent settings (mobile vw vs desktop vw), not one
	   continuous fluid curve — measured targets: ~20px at ≤640px jumping to
	   50.4px at 1440px, so a single clamp() across both undershoots one end. */
	font-size: 1.25rem;
	color: var(--wp--preset--color--primary, #bc87d0);
	opacity: 0.35;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.leny-spotlight__image-slider {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* Nexus's own CSS says 18rem, but that's on their ~11.5px root font-size
	   (measured 207px rendered) — our root is the standard 16px, so the
	   equivalent absolute size is ~13rem, not a literal unit-for-unit copy. */
	width: 13rem;
	height: 13rem;
	padding: 0.5rem;
	background: transparent;
}

.leny-spotlight__image-slider img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
}

@media (max-width: 640px) {
	.leny-spotlight-v2 {
		min-height: 8.5rem;
	}
	.leny-spotlight__image-slider {
		width: 8rem;
		height: 8rem;
	}
}

@media (min-width: 641px) {
	.leny-spotlight__text-slider a {
		font-size: clamp(2.2rem, 0.9rem + 2.5vw, 3.15rem);
	}
}

/* Compact product card used inside the hero and other custom sections
   (rendered dynamically from WooCommerce via [leny_beauty_product_mini]). */
.leny-beauty-product-mini {
	display: flex;
	flex-direction: column;
	padding: 0.75rem;
	gap: 0.5rem;
}

.leny-beauty-product-mini__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #000);
}

.leny-beauty-product-mini__image img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
}

.leny-beauty-product-mini__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.leny-beauty-product-mini__title {
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.3;
}

.leny-beauty-product-mini__price {
	font-size: 0.85rem;
	opacity: 0.75;
}

.leny-beauty-product-mini .button,
.leny-beauty-product-mini .add_to_cart_button {
	font-size: 0.8rem;
	text-align: center;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--primary, #bc87d0);
	color: #fff;
	text-decoration: none;
	display: block;
}