/* ==========================================================================
   Wejha Store — homepage V2 (loaded on the front page only: / and /en/)
   --------------------------------------------------------------------------
   Presentation for the homepage block patterns (patterns/home-*.php): hero composition, promotional cards,
   category tiles, product-collection grids (the product card itself is product-card.css), Wejha Bundles cards,
   campaign banner, tinted bands, section rhythm, and the motion layer (section 12: entrance, reveal-on-scroll,
   ambient drift, microinteractions — transform/opacity only, all behind prefers-reduced-motion). Colours, type,
   spacing, radii and shadows come from tokens.css. Logical properties only: Arabic (RTL) is the primary layout, English mirrors it.
   Breakpoints: phones < 690, tablets 690–999, desktop ≥ 1000 (Blocksy's); the category tiles add 768 (rail below it)
   and 1280 (one row of eight).
   ========================================================================== */

/* 1. Rhythm ------------------------------------------------------------------------ */
/* One distance from a section's content to the next section's heading: --wejha-section-gap (56px phones, 88px
   desktop). A band carries its own padding (--wejha-band-pad), so the gap on either side of a band shrinks by that
   padding, and two adjacent bands touch — their padding is the gap. */
.wejha-section {
	margin-block: 0 var(--wejha-section-gap);
}

.wejha-section.wejha-band,
.wejha-section:has(+ .wejha-band) {
	margin-block-end: calc(var(--wejha-section-gap) - var(--wejha-band-pad));
}

.wejha-section.wejha-band:has(+ .wejha-band) {
	margin-block-end: 0;
}

/* The last section keeps its breathing room above the footer (a margin there would collapse away) */
.wejha-section:last-child {
	margin-block-end: 0;
	padding-block-end: var(--wejha-section-gap);
}

.wejha-section.wejha-band:last-child {
	padding-block-end: var(--wejha-band-pad);
}

/* Empty commercial sections (empty catalog / no category picked) are hidden, heading row included. */
.wejha-collection:not(:has(.wc-block-product-template)),
.wejha-categories:not(:has(.wp-block-woocommerce-featured-category)) {
	display: none;
}

/* Bands: full-width tinted background, content in the container */
.wejha-band {
	position: relative;
	padding-block: var(--wejha-band-pad);
	overflow: hidden;
	isolation: isolate;
}

.wejha-band > .wejha-container {
	position: relative;
	z-index: 1;
	width: var(--wejha-container);
	max-width: var(--theme-container-edge-spacing, 90vw); /* the same width Blocksy gives the constrained sections */
	padding-inline: 0;
}

.wejha-band--yellow {
	background: linear-gradient(180deg, var(--wejha-tint-yellow) 0%, var(--wejha-sand) 100%);
}

.wejha-band--art {
	background: linear-gradient(180deg, var(--wejha-tint-teal) 0%, var(--wejha-white) 100%);
}

.wejha-band--white {
	background: radial-gradient(90% 60% at 100% 0%, var(--wejha-tint-teal) 0%, rgba(230, 246, 247, 0) 60%), var(--wejha-white);
}

/* 2. Section heading row ------------------------------------------------------------ */
/* One consistent heading row for every section: a short yellow mark, a confident navy title (22px phones →
   32px desktop), optional supporting line, and "View all" as a quiet outlined pill on the title's baseline. */
.wejha-section__head {
	align-items: flex-end;
	gap: var(--wejha-space-3) var(--wejha-space-5);
	margin-block-end: var(--wejha-space-5); /* 24px phones */
}

@media (min-width: 1000px) {
	.wejha-section__head {
		margin-block-end: 2.25rem; /* 36px */
	}
}

.wejha-section__titles {
	display: flex;
	flex-direction: column;
	gap: var(--wejha-space-2);
	min-width: 0;
}

.wejha-section__title {
	margin: 0;
	font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); /* 22px phones → 32px desktop */
	font-weight: 600;
	line-height: 1.25;
	color: var(--wejha-heading);
}

/* The same short brand mark above every section title (hierarchy: the eye lands on the section start) */
.wejha-section__title::before {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-block-end: var(--wejha-space-3);
	border-radius: var(--wejha-radius-pill);
	background: var(--wejha-yellow);
}

.wejha-section__subtitle {
	margin: 0;
	max-width: 52ch;
	font-size: 0.9375rem; /* 15px */
	line-height: 1.6;
	color: var(--wejha-text-muted);
}

@media (min-width: 1000px) {
	.wejha-section__subtitle {
		font-size: var(--wejha-text-md);
	}
}

.wejha-section__all {
	margin: 0 0 .25rem; /* sits on the title's baseline */
	font-weight: 500;
	font-size: var(--wejha-text-sm);
}

.wejha-section__all a {
	display: inline-flex;
	align-items: center;
	gap: var(--wejha-space-2);
	min-height: 40px;
	padding-inline: 1.125rem;
	border: 1px solid var(--wejha-border);
	border-radius: var(--wejha-radius-pill);
	background: var(--wejha-white);
	color: var(--wejha-heading);
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.wejha-section__all a::after,
.is-style-wejha-link .wp-block-button__link::after {
	content: "\2190"; /* ← : forward in RTL */
	font-size: 1.15em;
	line-height: 1;
	transition: transform .18s ease;
}

[dir="ltr"] .wejha-section__all a::after,
[dir="ltr"] .is-style-wejha-link .wp-block-button__link::after {
	content: "\2192"; /* → : forward in LTR */
}

.wejha-section__all a:hover,
.wejha-section__all a:focus-visible {
	background: var(--wejha-heading);
	border-color: var(--wejha-heading);
	color: var(--wejha-text-on-primary);
}

.wejha-section__all a:hover::after {
	transform: translateX(-3px);
}

[dir="ltr"] .wejha-section__all a:hover::after {
	transform: translateX(3px);
}

/* 3. Shared card pieces: kicker, copy, link-style button, image slots ------------------------ */
.wejha-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--wejha-space-2);
	margin: 0;
	padding: .2em .9em;
	border-radius: var(--wejha-radius-pill);
	background: var(--wejha-white);
	color: var(--wejha-navy);
	font-size: var(--wejha-text-sm);
	font-weight: 600;
	line-height: 1.7;
	box-shadow: var(--wejha-shadow-sm);
}

.wejha-kicker::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wejha-yellow);
}

.wejha-card__title {
	margin: 0;
	color: var(--wejha-heading);
	line-height: 1.2;
}

.wejha-card__text {
	margin: 0;
	color: var(--wejha-text);
}

.wejha-card__actions {
	gap: var(--wejha-space-3);
	margin-block-start: var(--wejha-space-2);
}

/* Buttons inside cards: pill, 48px, navy; the "outline" style is the secondary CTA.
   Microinteraction: 1px lift + whisper of shadow on hover, a 0.98 press on active — never a jump. */
.wejha-card__actions .wp-block-button__link {
	min-height: 48px;
	padding-inline: var(--wejha-space-6);
	border-radius: var(--wejha-radius-pill);
	font-weight: 500;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.wejha-card__actions .wp-block-button:not(.is-style-wejha-link) .wp-block-button__link:hover,
.wejha-card__actions .wp-block-button:not(.is-style-wejha-link) .wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(5, 48, 90, 0.16);
}

.wejha-card__actions .wp-block-button__link:active {
	transform: scale(.98);
	box-shadow: none;
	transition-duration: .08s;
}

.wejha-card__actions .is-style-outline .wp-block-button__link {
	border: 2px solid var(--wejha-navy);
	background: transparent;
	color: var(--wejha-navy);
}

.wejha-card__actions .is-style-outline .wp-block-button__link:hover,
.wejha-card__actions .is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wejha-navy);
	color: var(--wejha-text-on-primary);
}

/* Link-style CTA (promos, bundles): text + arrow, 44px tap target, no box */
.wejha-card__actions .is-style-wejha-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wejha-space-2);
	min-height: var(--wejha-control-height);
	padding: 0;
	background: transparent;
	color: var(--wejha-navy);
	font-weight: 600;
	box-shadow: none;
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: transparent;
	--theme-button-text-initial-color: var(--wejha-navy);
	--theme-button-text-hover-color: var(--wejha-teal-text);
}

.wejha-card__actions .is-style-wejha-link .wp-block-button__link:hover,
.wejha-card__actions .is-style-wejha-link .wp-block-button__link:focus-visible {
	color: var(--wejha-teal-text);
}

.wejha-card__actions .is-style-wejha-link .wp-block-button__link:hover::after {
	transform: translateX(-3px);
}

[dir="ltr"] .wejha-card__actions .is-style-wejha-link .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* Image slots: positioned by their composition; white product shots are blended onto the tint.
   The blend sits on the figure (the rotated element) so it composites against the card, not against its own
   transform stacking context; stages therefore never set a z-index of their own. */
.wejha-slot {
	position: absolute;
	margin: 0;
	mix-blend-mode: multiply;
}

.wejha-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 4. Hero -------------------------------------------------------------------------- */
/* One campaign scene: copy on the start side (≈ 47%), a photographed-looking product composition on the end
   side (≈ 53%) — one dominant product on a soft cream plate, three supporting products overlapping it at
   different scales and depths, one teal arc, one coral stroke, a soft yellow glow. The fifth image slot stays
   in the editable pattern but is not shown (four products read as a scene; five read as thumbnails). */
/* The storefront starts Header → Hero: the card keeps a little air under the header */
.wejha-hero {
	--wejha-hero-edge: 12px; /* outside margin of the surface: phones 12, tablets 20, desktop 28 */
	margin-block: var(--wejha-space-5) var(--wejha-space-5);
}

/* Full-bleed surface: the hero leaves the constrained content width (Blocksy hands every direct child of the
   content the container width) and spans the viewport minus the outside margin — a campaign banner, not a centred
   card. The copy and the scene inside stay on a ≤ 1320px band (the card's inline padding grows on wide screens) and
   the scene keeps the size it has in the 1280 container, so line lengths and the copy / product balance do not
   change. width + auto margins rather than side margins: the layout rules for constrained content force the latter. */
.entry-content > .wejha-hero,
.wejha-section.wejha-hero {
	width: calc(100% - 2 * var(--wejha-hero-edge));
	max-width: none;
	margin-inline: auto;
}

@media (min-width: 690px) {
	.wejha-hero {
		--wejha-hero-edge: 20px;
	}
}

@media (min-width: 1000px) {
	.wejha-hero {
		--wejha-hero-edge: 28px;
		margin-block-start: var(--wejha-space-6);
	}
}

.wejha-hero__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); /* the scene takes ≈ 52% of the card once padding and gap are counted */
	align-items: center;
	gap: var(--wejha-space-7);
	min-height: 560px;
	padding-block: var(--wejha-space-8);
	padding-inline: var(--wejha-space-7) var(--wejha-space-6);
	border-radius: var(--wejha-radius-2xl);
	background:
		radial-gradient(70% 90% at 100% 100%, rgba(230, 246, 247, 0.9) 0%, rgba(230, 246, 247, 0) 60%),
		linear-gradient(110deg, var(--wejha-tint-yellow) 0%, var(--wejha-cream) 52%, var(--wejha-sand) 100%);
	box-shadow: var(--wejha-shadow-sm);
	overflow: hidden;
	isolation: isolate;
}

/* Desktop: premium radius for the surface with outside margins; the scene column is capped at the size it has in
   the 1280 container (≈ 660px), so extra viewport width becomes air around the copy and the scene, never a bigger
   composition; the content band stays ≤ 1320px */
@media (min-width: 1000px) {
	.wejha-hero__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, min(56%, 660px));
		padding-inline: max(var(--wejha-space-7), calc((100% - 1320px) / 2)) max(var(--wejha-space-6), calc((100% - 1320px) / 2));
		border-radius: var(--wejha-radius-3xl);
	}
}

/* Soft yellow glow behind the composition (gradient edge, no blur filter; drifts slowly — section 12) */
.wejha-hero__card::before {
	content: "";
	position: absolute;
	inset-block-start: -22%;
	inset-inline-end: -8%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--wejha-tint-yellow-2) 0%, rgba(255, 237, 191, 0.55) 40%, rgba(255, 237, 191, 0) 70%);
	z-index: -1;
}

/* Coral stroke: one small, confident accent at the top of the scene */
.wejha-hero__card::after {
	content: "";
	position: absolute;
	inset-block-start: 5%;
	inset-inline-end: 6%;
	width: 64px;
	height: 12px;
	border-radius: var(--wejha-radius-pill);
	background: var(--wejha-red);
	opacity: .82;
	transform: rotate(-18deg);
	z-index: -1; /* above the card background, behind the plate and the products */
}

.wejha-hero__copy {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wejha-space-4);
}

/* Eyebrow: quieter than the title — a light pill, yellow dot */
.wejha-hero .wejha-kicker {
	background: rgba(255, 255, 255, 0.72);
	box-shadow: none;
}

/* Title: the dominant element of the page */
.wejha-hero .wejha-card__title {
	font-size: clamp(2.25rem, 1.3rem + 2.9vw, 3.6rem); /* 36px → 58px */
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	max-width: 14ch;
	text-wrap: balance;
}

[dir="rtl"] .wejha-hero .wejha-card__title {
	letter-spacing: 0; /* Arabic script joins; no tracking */
}

.wejha-hero .wejha-card__text {
	font-size: clamp(1.0625rem, .95rem + .45vw, 1.3rem);
	line-height: 1.6;
	max-width: 32ch;
	color: var(--wejha-text-muted);
}

.wejha-hero .wejha-card__actions {
	margin-block-start: var(--wejha-space-4);
}

.wejha-hero .wejha-card__actions .wp-block-button__link {
	min-height: 54px;
	padding-inline: var(--wejha-space-6);
	font-size: var(--wejha-text-md);
	font-weight: 600;
}

/* Secondary CTA: light outline that fills on hover (the primary stays navy) */
.wejha-hero .wejha-card__actions .is-style-outline .wp-block-button__link {
	border-color: rgba(5, 48, 90, 0.35);
	background: rgba(255, 255, 255, 0.55);
}

/* Stage: the scene container */
.wejha-hero__stage {
	position: relative;
	align-self: stretch;
	min-height: 460px;
}

/* Cream plate the dominant product sits on (an organic rounded shape with a soft ground shadow) */
.wejha-hero__stage::after {
	content: "";
	position: absolute;
	inset-inline-start: 8%;
	inset-inline-end: 4%;
	inset-block-start: 8%;
	inset-block-end: 6%;
	border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
	background: linear-gradient(160deg, var(--wejha-white) 0%, var(--wejha-sand) 100%);
	box-shadow: 0 30px 60px rgba(5, 48, 90, 0.10);
	z-index: 0;
}

/* Teal arc: a thin line that crosses behind the scene */
.wejha-hero__stage::before {
	content: "";
	position: absolute;
	inset-inline-start: -34%;
	inset-block-start: -12%;
	width: 128%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1.5px solid rgba(2, 170, 177, 0.35);
	pointer-events: none;
	z-index: 1;
}

/* Products: white studio shots multiplied onto the plate. Ground shadows are soft grey ellipses (a drop-shadow
   filter would shadow the whole white photo rectangle). */
.wejha-slot--hero-1::after,
.wejha-slot--hero-3::after {
	content: "";
	position: absolute;
	inset-inline: 10%;
	inset-block-end: -3%;
	height: 16%;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(5, 48, 90, 0.20) 0%, rgba(5, 48, 90, 0) 68%);
	z-index: -1;
}

/* Desktop composition (stage ≈ 560 × 460): the notebook set dominates at ~76% of the stage width; the pencil
   case overlaps its bottom-end corner, the pens lean in from the top-start, the sticky notes anchor the
   bottom-start. Rotations are small and all different. */
.wejha-slot--hero-1 { inset-inline-end: 4%; inset-block-start: 3%; width: 76%; aspect-ratio: 1; z-index: 2; }
.wejha-slot--hero-2 { inset-inline-start: -5%; inset-block-start: -6%; width: 30%; aspect-ratio: 1; transform: rotate(-14deg); z-index: 3; }
.wejha-slot--hero-3 { inset-inline-end: -6%; inset-block-end: -2%; width: 46%; aspect-ratio: 1; transform: rotate(6deg); z-index: 4; }
.wejha-slot--hero-4 { inset-inline-start: 0; inset-block-end: 0; width: 36%; aspect-ratio: 1; transform: rotate(-6deg); z-index: 3; }
.wejha-slot--hero-5 { display: none; }

@media (max-width: 999.98px) {
	.wejha-hero__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wejha-space-5);
		min-height: 460px;
		padding: var(--wejha-space-6);
	}

	.wejha-hero__stage {
		min-height: 380px;
	}

	.wejha-hero__card::after {
		inset-block-start: 8%;
		inset-inline-end: 6%;
	}
}

/* Phones: copy → CTAs → a large three-product scene on its own plate (no small floating items) */
@media (max-width: 689.98px) {
	.wejha-hero__card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wejha-space-6);
		min-height: 0;
		padding: var(--wejha-space-6) var(--wejha-space-5) var(--wejha-space-5);
		border-radius: var(--wejha-radius-xl);
		background:
			radial-gradient(90% 50% at 50% 100%, rgba(230, 246, 247, 0.9) 0%, rgba(230, 246, 247, 0) 65%),
			linear-gradient(170deg, var(--wejha-tint-yellow) 0%, var(--wejha-cream) 60%, var(--wejha-sand) 100%);
	}

	.wejha-hero__card::before {
		inset-block-start: auto;
		inset-block-end: -14%;
		inset-inline-end: -16%;
		width: 80%;
	}

	.wejha-hero__card::after {
		inset-block-start: auto;
		inset-block-end: 36%;
		inset-inline-end: 6%;
		width: 48px;
		height: 10px;
	}

	.wejha-hero__copy {
		gap: var(--wejha-space-3);
	}

	.wejha-hero .wejha-card__title {
		max-width: none;
	}

	.wejha-hero .wejha-card__text {
		max-width: none;
	}

	.wejha-hero .wejha-card__actions {
		width: 100%;
		flex-wrap: wrap;
		margin-block-start: var(--wejha-space-2);
	}

	.wejha-hero .wejha-card__actions .wp-block-button {
		flex: 1 1 45%;
	}

	.wejha-hero .wejha-card__actions .wp-block-button__link {
		width: 100%;
		min-height: 50px;
		padding-inline: var(--wejha-space-3);
		font-size: var(--wejha-text-sm);
	}

	.wejha-hero__stage {
		min-height: 0;
		height: 300px;
		margin-block-start: var(--wejha-space-2);
	}

	.wejha-hero__stage::after {
		inset-inline-start: 4%;
		inset-inline-end: 4%;
		inset-block-start: 6%;
		inset-block-end: 4%;
		box-shadow: 0 20px 40px rgba(5, 48, 90, 0.10);
	}

	.wejha-hero__stage::before {
		inset-inline-start: -20%;
		inset-block-start: -30%;
		width: 140%;
	}

	.wejha-slot--hero-1 { inset-inline-end: 4%; inset-block-start: 2%; width: 74%; }
	.wejha-slot--hero-2 { inset-inline-start: -6%; inset-block-start: -2%; width: 34%; }
	.wejha-slot--hero-3 { inset-inline-end: -6%; inset-block-end: -4%; width: 44%; }
	.wejha-slot--hero-4,
	.wejha-slot--hero-5 { display: none; }
}

/* 5. Promotional cards ----------------------------------------------------------------- */
.wejha-promos__grid {
	gap: var(--wejha-space-5);
}

.wejha-promo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wejha-space-4);
	min-height: 250px;
	height: 100%;
	padding: var(--wejha-space-6) var(--wejha-space-6);
	border-radius: var(--wejha-radius-xl);
	overflow: hidden;
	isolation: isolate;
	transition: transform .2s ease, box-shadow .2s ease;
}

.wejha-promo:hover,
.wejha-promo:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--wejha-shadow-md);
}

.wejha-promo .wejha-slot img {
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.wejha-promo:hover .wejha-slot img {
		transform: scale(1.04);
	}
}

.wejha-promo--teal {
	background: linear-gradient(135deg, var(--wejha-tint-teal-2) 0%, var(--wejha-tint-teal) 100%);
}

.wejha-promo--coral {
	background: linear-gradient(135deg, var(--wejha-tint-coral-2) 0%, var(--wejha-tint-coral) 100%);
}

.wejha-promo::before {
	content: "";
	position: absolute;
	inset-inline-end: -14%;
	inset-block-end: -30%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	z-index: -1;
}

.wejha-promo__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wejha-space-2);
}

.wejha-promo .wejha-card__title {
	font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
}

.wejha-promo .wejha-card__text {
	font-size: var(--wejha-text-sm);
	color: var(--wejha-text-muted);
	max-width: 24ch;
}

.wejha-promo__stage {
	position: relative;
	height: 200px;
}

.wejha-slot--promo-1-1,
.wejha-slot--promo-2-1 { inset-inline-end: -4%; inset-block-start: -6%; width: 78%; aspect-ratio: 1; z-index: 2; }
.wejha-slot--promo-1-2,
.wejha-slot--promo-2-2 { inset-inline-start: -4%; inset-block-end: -10%; width: 56%; aspect-ratio: 1; transform: rotate(-7deg); z-index: 3; }

@media (max-width: 781.98px) {
	.wejha-promos__grid {
		gap: var(--wejha-space-4);
	}

	.wejha-promo {
		min-height: 0;
		padding: var(--wejha-space-5);
	}

	.wejha-promo__stage {
		height: 160px;
	}
}

/* 6. Category tiles (WooCommerce Featured Category blocks re-flowed into compact tiles) -------------- */
/* Eight destinations in as little height as possible: one row of eight compact tiles on wide screens (≥ 1280),
   4 × 2 in between, and a horizontal scroll-snap rail (≈ 2.5 tiles in view) on phones. A tile is a soft tinted
   surface with the category image large on it and the name under it — nothing else. The block's inner button link
   (the only link a Featured Category block renders) is stretched over the tile with its text hidden and, at render,
   named after the category (inc/woocommerce.php): the whole tile is the link. */
.wejha-categories .wejha-categories__grid {
	--wejha-tile-gap: var(--wejha-space-4);
	gap: var(--wejha-tile-gap);
}

/* ≥ 1280: all eight in one row (≈ 146px tiles in the 1280 container); 768–1279 keeps the block's 4 columns, 2 rows */
@media (min-width: 1280px) {
	.wejha-categories .wejha-categories__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

/* Phones: a rail. The grid becomes a flex track that bleeds to the viewport edges (the page gutter becomes its
   start padding), snaps tile by tile and hides its scrollbar — scrolling stays available to touch, wheel and
   keyboard (the tile links are focusable and scroll into view). No autoplay, no library. */
@media (max-width: 767.98px) {
	.wejha-categories .wejha-categories__grid {
		--wejha-tile-gap: var(--wejha-space-3);
		display: flex;
		gap: var(--wejha-tile-gap);
		margin-inline: calc(-1 * var(--wejha-gutter));
		padding-inline: var(--wejha-gutter);
		padding-block: 3px 6px; /* room for the focus lift inside the clipped track */
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wejha-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.wejha-categories .wejha-categories__grid::-webkit-scrollbar {
		display: none;
	}

	.wejha-categories .wejha-categories__grid > * {
		flex: 0 0 calc((100% - 2 * var(--wejha-tile-gap)) / 2.5); /* ≈ 2.5 tiles in view: the next one peeks */
		scroll-snap-align: start;
	}
}

.wejha-category-card.wc-block-featured-category {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0 !important; /* the block's inline min-height (overlay layout) */
	padding: 10px 10px 12px;
	background-color: var(--wejha-sand);
	background-image: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%);
	border: 0;
	border-radius: var(--wejha-radius-lg); /* 16px */
	overflow: hidden;
	isolation: isolate;
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease-out;
}

/* Tint shift on hover: a white veil fades in over the tile's own colour (opacity only) */
.wejha-category-card.wc-block-featured-category::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.22);
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease-out;
	z-index: 0;
}

/* Hover (pointer devices) and keyboard focus: the tile rises 2px, the image grows 3%, the tint lightens */
@media (hover: hover) {
	.wejha-category-card.wc-block-featured-category:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(5, 48, 90, 0.09);
	}

	.wejha-category-card.wc-block-featured-category:hover::after {
		opacity: 1;
	}

	.wejha-category-card.wc-block-featured-category:hover .wc-block-featured-category__background-image {
		transform: scale(1.03);
	}
}

.wejha-category-card.wc-block-featured-category:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(5, 48, 90, 0.09);
}

.wejha-category-card.wc-block-featured-category:focus-within::after {
	opacity: 1;
}

/* Controlled soft backgrounds, in order: yellow, teal, coral, lavender, navy, mint, sand, teal */
.wejha-categories__grid > :nth-child(8n + 1) { background-color: var(--wejha-tint-yellow); }
.wejha-categories__grid > :nth-child(8n + 2) { background-color: var(--wejha-tint-teal); }
.wejha-categories__grid > :nth-child(8n + 3) { background-color: var(--wejha-tint-coral); }
.wejha-categories__grid > :nth-child(8n + 4) { background-color: var(--wejha-tint-lavender); }
.wejha-categories__grid > :nth-child(8n + 5) { background-color: var(--wejha-tint-navy); }
.wejha-categories__grid > :nth-child(8n + 6) { background-color: var(--wejha-tint-mint); }
.wejha-categories__grid > :nth-child(8n + 7) { background-color: var(--wejha-sand); }
.wejha-categories__grid > :nth-child(8n + 8) { background-color: var(--wejha-tint-teal-2); }

.wejha-category-card .wc-block-featured-category__wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--wejha-space-2);
	position: static;
	z-index: 1;
	min-height: 0;
	padding: 0;
}

.wejha-category-card .background-dim__overlay {
	display: none;
}

/* The image is the tile: square, contain, blended onto the tint, filling the tile's width */
.wejha-category-card .wc-block-featured-category__background-image {
	position: static;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	padding: 4%;
	object-fit: contain !important; /* the block writes object-fit: cover inline */
	object-position: center;
	mix-blend-mode: multiply;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

.wejha-category-card .wc-block-featured-category__inner-blocks {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

/* The name: small, semibold, centred under the image, two lines at most (the box always reserves two, so a row of
   tiles lines up whatever the name lengths) */
.wejha-category-card .wejha-category-card__title,
.wejha-category-card .wc-block-featured-category__inner-blocks :is(h2, h3) {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.6em;
	margin: 0;
	padding-inline: 2px;
	color: var(--wejha-heading);
	font-size: var(--wejha-text-sm); /* 14px */
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-shadow: none;
}

.wejha-category-card .wc-block-featured-category__description {
	display: none;
}

/* The whole tile is the link: the button block collapses and its link is stretched over the tile. Its text stays in
   the markup for the editor; on the storefront it is hidden and the link carries the category name (aria-label). */
.wejha-category-card .wp-block-buttons,
.wejha-category-card .wp-block-button {
	position: static;
	height: 0;
	margin: 0;
	overflow: visible;
}

.wejha-category-card .wp-block-button__link {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: transparent;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-indent: -9999px;
	white-space: nowrap;
	overflow: hidden;
	box-shadow: none;
	transition: none;
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: transparent;
	--theme-button-text-initial-color: transparent;
	--theme-button-text-hover-color: transparent;
	--theme-button-shadow: none;
}

.wejha-category-card .wp-block-button__link:hover,
.wejha-category-card .wp-block-button__link:focus {
	background: transparent;
	color: transparent;
}

.wejha-category-card .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wejha-focus-ring);
	outline-offset: -3px;
}

@media (max-width: 767.98px) {
	.wejha-category-card.wc-block-featured-category {
		padding: 8px 8px 10px;
		border-radius: 14px;
	}

	.wejha-category-card .wejha-category-card__title,
	.wejha-category-card .wc-block-featured-category__inner-blocks :is(h2, h3) {
		font-size: var(--wejha-text-xs); /* 13px */
	}
}

/* 7. Product collections: the grid only (the product card itself is assets/css/product-card.css, shared by every
   product loop) ------------------------------------------------------------------------------------- */
.wejha-collection .wc-block-product-template {
	gap: var(--wejha-space-7) var(--wejha-space-5); /* 48 × 24 */
}

@media (min-width: 1000px) {
	.wejha-collection .wc-block-product-template.wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr)); /* always four: WooCommerce's auto-fill drops to three with our gap */
	}
}

@media (max-width: 999.98px) {
	.wejha-collection .wc-block-product-template.wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wejha-space-6) var(--wejha-space-4);
	}
}

@media (max-width: 689.98px) {
	.wejha-collection .wc-block-product-template.wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wejha-space-6) var(--wejha-space-3);
	}
}

/* The Art & Creativity band puts the card stages on white (the band itself is tinted) */
.wejha-band--art .wc-block-product .wc-block-components-product-image {
	background: var(--wejha-white);
}

/* 8. Wejha Bundles ------------------------------------------------------------------------- */
.wejha-bundles__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wejha-space-5);
}

.wejha-bundle {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wejha-space-4);
	padding: var(--wejha-space-5);
	border-radius: var(--wejha-radius-2xl);
	background: var(--wejha-white);
	box-shadow: var(--wejha-shadow-sm);
	overflow: hidden;
	isolation: isolate;
	transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease-out;
}

.wejha-bundle:hover,
.wejha-bundle:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--wejha-shadow-md);
}

/* Supporting cards: the 2 × 2 collage breathes on hover */
.wejha-bundle__stage .wejha-slot img {
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.wejha-bundle:not(.wejha-bundle--featured):hover .wejha-bundle__stage .wejha-slot img {
		transform: scale(1.05);
	}
}

.wejha-bundle--2 { background: linear-gradient(160deg, var(--wejha-white) 0%, var(--wejha-tint-teal) 70%); }
.wejha-bundle--3 { background: linear-gradient(160deg, var(--wejha-white) 0%, var(--wejha-tint-coral) 70%); }
.wejha-bundle--4 { background: linear-gradient(160deg, var(--wejha-white) 0%, var(--wejha-tint-lavender) 70%); }

.wejha-bundle__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wejha-space-2);
}

.wejha-bundle .wejha-kicker {
	background: var(--wejha-tint-yellow-2);
	box-shadow: none;
	font-size: var(--wejha-text-xs);
}

.wejha-bundle .wejha-kicker::before {
	background: var(--wejha-red);
}

.wejha-bundle .wejha-card__title {
	font-size: var(--wejha-text-xl);
}

.wejha-bundle .wejha-card__text {
	font-size: var(--wejha-text-sm);
	color: var(--wejha-text-muted);
}

.wejha-bundle .wejha-card__actions {
	margin-block-start: 0;
}

/* Supporting cards: a 2 × 2 mini collage on the card's own tint */
.wejha-bundle__stage {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wejha-space-2);
	order: -1;
	padding: var(--wejha-space-2);
	border-radius: var(--wejha-radius-lg);
	background: rgba(255, 255, 255, 0.45);
}

.wejha-bundle__stage .wejha-slot {
	position: relative;
	aspect-ratio: 1;
}

/* Featured card (spans both rows): copy on top, a large free collage below, on a yellow glow */
.wejha-bundle--featured {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wejha-space-5);
	padding: var(--wejha-space-6);
	background: linear-gradient(160deg, var(--wejha-white) 0%, var(--wejha-tint-yellow) 100%);
}

/* Featured card accents: a soft yellow orb (drifts, section 12) and a thin teal ring behind the collage */
.wejha-bundle--featured::before {
	content: "";
	position: absolute;
	inset-inline-start: -12%;
	inset-block-start: -14%;
	width: 54%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, var(--wejha-tint-yellow-2) 0%, rgba(255, 237, 191, 0.5) 45%, rgba(255, 237, 191, 0) 72%);
	z-index: -1;
}

.wejha-bundle--featured::after {
	content: "";
	position: absolute;
	inset-inline-end: -10%;
	inset-block-end: -16%;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 10px solid var(--wejha-tint-teal-2);
	z-index: -1;
}

.wejha-bundle--featured .wejha-bundle__copy {
	max-width: 34ch;
}

.wejha-bundle--featured .wejha-card__title {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.wejha-bundle--featured .wejha-card__text {
	font-size: var(--wejha-text-md);
}

.wejha-bundle--featured .wejha-bundle__stage {
	display: block;
	order: 0;
	align-self: center;
	width: min(100%, 520px);
	aspect-ratio: 1;
	min-height: 0;
	padding: 0;
	background: none;
}

.wejha-bundle--featured .wejha-bundle__stage .wejha-slot {
	position: absolute;
}

.wejha-bundle--featured .wejha-slot--bundle-1-1 { inset-inline-end: 2%; inset-block-start: 2%; width: 68%; aspect-ratio: 1; z-index: 2; }
.wejha-bundle--featured .wejha-slot--bundle-1-2 { inset-inline-start: -4%; inset-block-start: 8%; width: 46%; aspect-ratio: 1; transform: rotate(-10deg); z-index: 3; }
.wejha-bundle--featured .wejha-slot--bundle-1-3 { inset-inline-start: 4%; inset-block-end: 0; width: 50%; aspect-ratio: 1; transform: rotate(6deg); z-index: 3; }
.wejha-bundle--featured .wejha-slot--bundle-1-4 { inset-inline-end: 4%; inset-block-end: 4%; width: 42%; aspect-ratio: 1; z-index: 4; }

.wejha-bundle--2 { grid-column: 3; grid-row: 1; }
.wejha-bundle--3 { grid-column: 4; grid-row: 1; }

/* Fourth card: wide, copy beside the collage */
.wejha-bundle--4 {
	grid-column: 3 / span 2;
	grid-row: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.wejha-bundle--4 .wejha-bundle__stage {
	order: 0;
}

@media (max-width: 999.98px) {
	.wejha-bundles__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wejha-space-4);
	}

	.wejha-bundle--featured { grid-column: 1 / -1; grid-row: 1; }
	.wejha-bundle--2 { grid-column: 1; grid-row: 2; }
	.wejha-bundle--3 { grid-column: 2; grid-row: 2; }
	.wejha-bundle--4 { grid-column: 3; grid-row: 2; display: flex; }
	.wejha-bundle--4 .wejha-bundle__stage { order: -1; }

	.wejha-bundle--featured {
		flex-direction: row;
		align-items: center;
	}

	.wejha-bundle--featured .wejha-bundle__stage {
		flex: 0 0 52%;
	}
}

/* Phones: a scroll-snap track (one card ≈ 82% of the screen, next one peeking). The rail bleeds to the viewport
   edges by the page gutter and pads by the same gutter, and the scroll padding is that gutter too (as a length —
   a percentage here resolves against the rail's own width, not the container's, so the first snap position
   would sit flush to the screen edge), so the first card rests at the container edge on load in both directions
   (scroll-snap-align: start is the inline start: right in Arabic, left in English). */
@media (max-width: 689.98px) {
	.wejha-bundles__grid {
		display: flex;
		gap: var(--wejha-space-3);
		margin-inline: calc(-1 * var(--wejha-gutter));
		padding-inline: var(--wejha-gutter);
		padding-block-end: var(--wejha-space-2);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wejha-gutter);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.wejha-bundles__grid::-webkit-scrollbar {
		display: none;
	}

	.wejha-bundle,
	.wejha-bundle--featured,
	.wejha-bundle--4 {
		flex: 0 0 82%;
		display: flex;
		flex-direction: column;
		grid-column: auto;
		grid-row: auto;
		scroll-snap-align: start;
		padding: var(--wejha-space-4);
		border-radius: var(--wejha-radius-xl);
	}

	.wejha-bundle--featured .wejha-bundle__stage,
	.wejha-bundle--4 .wejha-bundle__stage {
		order: -1;
	}

	.wejha-bundle--featured .wejha-bundle__stage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 0;
		padding: var(--wejha-space-2);
		background: rgba(255, 255, 255, 0.45);
	}

	.wejha-bundle--featured .wejha-bundle__stage .wejha-slot {
		position: relative;
		inset: auto;
		width: auto;
		transform: none;
	}

	.wejha-bundle .wejha-card__title,
	.wejha-bundle--featured .wejha-card__title {
		font-size: var(--wejha-text-lg);
	}

	.wejha-bundle--featured .wejha-card__text {
		font-size: var(--wejha-text-sm);
	}
}

/* 9. Campaign banner (editorial, product tiles on navy) ------------------------------------- */
.wejha-campaign__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: var(--wejha-space-6);
	min-height: 340px;
	padding: var(--wejha-space-7) var(--wejha-space-8);
	border-radius: var(--wejha-radius-2xl);
	background: radial-gradient(120% 140% at 100% 0%, rgba(2, 170, 177, 0.35) 0%, transparent 55%), var(--wejha-navy);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.wejha-campaign__card::before {
	content: "";
	position: absolute;
	inset-inline-end: 30%;
	inset-block-end: -22%;
	width: 22%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 14px solid rgba(2, 170, 177, 0.28);
	z-index: -1;
}

/* One yellow arc on the copy side (a thin, mostly clipped circle) */
.wejha-campaign__card::after {
	content: "";
	position: absolute;
	inset-inline-start: -14%;
	inset-block-start: -40%;
	width: 42%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid rgba(253, 176, 26, 0.55);
	pointer-events: none;
	z-index: -1;
}

.wejha-campaign__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wejha-space-3);
}

.wejha-campaign .wejha-kicker {
	background: var(--wejha-yellow);
	color: var(--wejha-navy);
	box-shadow: none;
}

.wejha-campaign .wejha-kicker::before {
	background: var(--wejha-navy);
}

.wejha-campaign .wejha-card__title {
	color: #fff;
	font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

.wejha-campaign .wejha-card__text {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wejha-text-lg);
	max-width: 30ch;
}

.wejha-campaign .wejha-card__actions .wp-block-button__link {
	--theme-button-background-initial-color: var(--wejha-yellow);
	--theme-button-background-hover-color: var(--wejha-white);
	--theme-button-text-initial-color: var(--wejha-navy);
	--theme-button-text-hover-color: var(--wejha-navy);
}

.wejha-campaign__stage {
	position: relative;
	align-self: stretch;
	min-height: 280px;
}

/* On navy the products sit on white tiles instead of being blended */
.wejha-campaign__stage .wejha-slot {
	padding: 6%;
	border-radius: var(--wejha-radius-lg);
	background: var(--wejha-white);
	box-shadow: var(--wejha-shadow-lg);
	mix-blend-mode: normal;
}

/* Larger, overlapping composition; on hover the three tiles drift apart by a few pixels (transform on the
   image so the tile's rotation stays) */
.wejha-slot--campaign-1 { inset-inline-end: 20%; inset-block-start: 0; width: 54%; aspect-ratio: 1; z-index: 2; }
.wejha-slot--campaign-2 { inset-inline-start: -2%; inset-block-end: -2%; width: 42%; aspect-ratio: 1; transform: rotate(-8deg); z-index: 3; }
.wejha-slot--campaign-3 { inset-inline-end: -2%; inset-block-end: 6%; width: 38%; aspect-ratio: 1; transform: rotate(8deg); z-index: 3; }

.wejha-campaign__stage .wejha-slot img {
	transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}

@media (hover: hover) {
	.wejha-campaign__card:hover .wejha-slot--campaign-1 img { transform: translateY(-4px); }
	.wejha-campaign__card:hover .wejha-slot--campaign-2 img { transform: translate(-3px, 3px); }
	.wejha-campaign__card:hover .wejha-slot--campaign-3 img { transform: translate(3px, 3px); }
}

@media (max-width: 781.98px) {
	.wejha-campaign__card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wejha-space-5);
		min-height: 0;
		padding: var(--wejha-space-6) var(--wejha-space-5);
		border-radius: var(--wejha-radius-xl);
	}

	.wejha-campaign__stage {
		min-height: 0;
		height: 230px;
	}

	.wejha-campaign .wejha-card__text {
		font-size: var(--wejha-text-md);
	}

	.wejha-campaign .wejha-card__actions,
	.wejha-campaign .wejha-card__actions .wp-block-button,
	.wejha-campaign .wejha-card__actions .wp-block-button__link {
		width: 100%;
	}
}

/* 10. Art & Creativity: the playful band (soft shapes stay behind the products) ---------------- */
.wejha-band--art::before,
.wejha-band--art::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.wejha-band--art::before {
	inset-block-start: -120px;
	inset-inline-end: -80px;
	width: 320px;
	height: 320px;
	background: var(--wejha-tint-yellow-2);
	opacity: .7;
}

.wejha-band--art::after {
	inset-block-end: -140px;
	inset-inline-start: -60px;
	width: 300px;
	height: 300px;
	border: 22px solid var(--wejha-tint-coral-2);
	opacity: .8;
}

/* Third shape: a brush-stroke-like tilted pill in soft coral, behind the products */
.wejha-band--art > .wejha-container::before {
	content: "";
	position: absolute;
	inset-block-start: 38%;
	inset-inline-start: -8%;
	width: 220px;
	height: 44px;
	border-radius: var(--wejha-radius-pill);
	background: var(--wejha-tint-coral-2);
	opacity: .7;
	transform: rotate(-18deg);
	pointer-events: none;
	z-index: -1;
}

.wejha-band--art .wejha-section__all a {
	background: transparent;
	border-color: rgba(4, 122, 128, 0.35);
}

/* 11. Reduced motion: hover/entrance transforms off, everything instantly visible ---------------- */
@media (prefers-reduced-motion: reduce) {
	.wejha-promo,
	.wejha-promo .wejha-slot img,
	.wejha-bundle,
	.wejha-bundle__stage .wejha-slot img,
	.wejha-category-card.wc-block-featured-category,
	.wejha-category-card .wc-block-featured-category__background-image,
	.wejha-campaign__stage .wejha-slot img,
	.wejha-card__actions .wp-block-button__link,
	.wejha-section__all a::after,
	.is-style-wejha-link .wp-block-button__link::after {
		transition: none;
	}

	.wejha-promo:hover,
	.wejha-promo:hover .wejha-slot img,
	.wejha-bundle:hover,
	.wejha-bundle:hover .wejha-bundle__stage .wejha-slot img,
	.wejha-category-card.wc-block-featured-category:hover,
	.wejha-category-card.wc-block-featured-category:hover .wc-block-featured-category__background-image,
	.wejha-campaign__card:hover .wejha-slot img,
	.wejha-card__actions .wp-block-button__link:hover,
	.wejha-card__actions .is-style-wejha-link .wp-block-button__link:hover::after,
	.wejha-section__all a:hover::after {
		transform: none;
	}
}

/* 12. Motion layer (only when the visitor allows motion) ------------------------------------------
   Rules: transform + opacity only; entrance under 900ms; ambient drift almost imperceptible (the product card's own
   motion lives in product-card.css); reveal-on-scroll is
   applied by assets/js/main.js to sections below the fold (class .wejha-reveal, then .is-in once, then the classes
   are removed so hover styles own the element again). Nothing here blocks interaction. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes wejha-rise {
		from { opacity: 0; transform: translateY(14px); }
		to { opacity: 1; transform: none; }
	}

	@keyframes wejha-pop {
		from { opacity: 0; transform: translateY(10px) scale(.94); }
		to { opacity: 1; transform: none; }
	}

	@keyframes wejha-drift {
		from { transform: translate(0, 0); }
		to { transform: translate(2.5%, 3%); }
	}

	@keyframes wejha-drift-ring {
		from { transform: translate(0, 0) rotate(0deg); }
		to { transform: translate(-3%, -2%) rotate(6deg); }
	}

	@keyframes wejha-float {
		from { transform: translateY(0); }
		to { transform: translateY(-4px); }
	}

	/* Hero entrance: copy rises line by line, products pop in with a stagger, the main product larger and later,
	   the CTA row last (≈ 850ms in total) */
	.wejha-hero__copy > * {
		animation: wejha-rise .5s cubic-bezier(.2, .7, .2, 1) both;
	}

	.wejha-hero__copy > :nth-child(1) { animation-delay: 60ms; }
	.wejha-hero__copy > :nth-child(2) { animation-delay: 140ms; }
	.wejha-hero__copy > :nth-child(3) { animation-delay: 220ms; }
	.wejha-hero__copy > .wejha-card__actions { animation-delay: 400ms; animation-duration: .45s; }

	.wejha-hero__stage .wejha-slot img {
		animation: wejha-pop .5s cubic-bezier(.2, .7, .2, 1) both;
	}

	/* (same specificity as the shorthand above, later in the file, so the delays hold) */
	.wejha-hero__stage .wejha-slot--hero-2 img { animation-delay: 220ms; }
	.wejha-hero__stage .wejha-slot--hero-4 img { animation-delay: 280ms; }
	.wejha-hero__stage .wejha-slot--hero-3 img { animation-delay: 330ms; }
	.wejha-hero__stage .wejha-slot--hero-1 img { animation-delay: 380ms; animation-duration: .5s; } /* dominant product last; sequence ends ≈ 880ms */

	/* Ambient drift: hero orb and ring, featured-bundle orb, art-band shapes (20–30s, alternate, tiny) */
	.wejha-hero__card::before,
	.wejha-bundle--featured::before {
		animation: wejha-drift 22s ease-in-out infinite alternate;
	}

	.wejha-hero__card::after,
	.wejha-bundle--featured::after,
	.wejha-band--art::after {
		animation: wejha-drift-ring 28s ease-in-out infinite alternate;
	}

	.wejha-band--art::before {
		animation: wejha-drift 26s ease-in-out infinite alternate;
	}

	/* Featured bundle collage: two items float a few pixels over ~7s (desktop and tablet only) */
	@media (min-width: 690px) {
		.wejha-bundle--featured .wejha-slot--bundle-1-2 img,
		.wejha-bundle--featured .wejha-slot--bundle-1-4 img {
			animation: wejha-float 6.5s ease-in-out infinite alternate;
		}

		.wejha-bundle--featured .wejha-slot--bundle-1-4 img {
			animation-delay: -3s;
			animation-duration: 7.5s;
		}
	}

	/* Reveal on scroll: sections rise 20px over ~550ms; category tiles and bundle cards stagger inside */
	.wejha-reveal {
		opacity: 0;
		transform: translateY(20px);
	}

	.wejha-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: opacity .55s ease-out, transform .6s cubic-bezier(.2, .7, .2, 1);
	}

	.wejha-reveal--stagger .wejha-categories__grid > *,
	.wejha-reveal--stagger .wejha-bundles__grid > * {
		opacity: 0;
		transform: translateY(16px);
	}

	.wejha-reveal--stagger.is-in .wejha-categories__grid > *,
	.wejha-reveal--stagger.is-in .wejha-bundles__grid > * {
		opacity: 1;
		transform: none;
		transition: opacity .5s ease-out, transform .55s cubic-bezier(.2, .7, .2, 1);
	}

	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(1) { transition-delay: 60ms; }
	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(2) { transition-delay: 120ms; }
	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(3) { transition-delay: 180ms; }
	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(4) { transition-delay: 240ms; }
	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(5) { transition-delay: 300ms; }
	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(6) { transition-delay: 360ms; }
	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(7) { transition-delay: 420ms; }
	.wejha-reveal--stagger.is-in :is(.wejha-categories__grid, .wejha-bundles__grid) > :nth-child(n + 8) { transition-delay: 480ms; }

	/* Phones: shorter distances, fewer moving parts */
	@media (max-width: 689.98px) {
		@keyframes wejha-rise {
			from { opacity: 0; transform: translateY(8px); }
			to { opacity: 1; transform: none; }
		}

		.wejha-reveal {
			transform: translateY(12px);
		}

		.wejha-reveal--stagger .wejha-categories__grid > *,
		.wejha-reveal--stagger .wejha-bundles__grid > * {
			transform: translateY(10px);
		}

		.wejha-hero__card::before,
		.wejha-hero__card::after,
		.wejha-bundle--featured::before,
		.wejha-bundle--featured::after,
		.wejha-band--art::before,
		.wejha-band--art::after {
			animation: none;
		}
	}
}