/**
 * JAFRA — Homepage
 *
 * Source: JAFRA Homepage.dc.html. Conditionally enqueued on the front page only.
 * Every value resolves to a token from tokens.css.
 *
 * Desktop and mobile are separate compositions throughout — where a section
 * changes structure, copy or imagery between breakpoints, that is implemented
 * deliberately rather than left to reflow.
 */

/* ==========================================================================
 * ENTRANCE ANIMATION
 * Source: @keyframes jfup + .hup1/.hup2/.hup3 in the homepage design.
 * Staggered 0.05s / 0.18s / 0.32s, 1s on the JAFRA easing curve.
 * ========================================================================== */

@keyframes jafra-rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.jafra-rise-1,
.jafra-rise-2,
.jafra-rise-3 {
	animation: jafra-rise var(--jafra-duration-hero) var(--jafra-ease) both;
}

.jafra-rise-1 { animation-delay: var(--jafra-hero-delay-1); }
.jafra-rise-2 { animation-delay: var(--jafra-hero-delay-2); }
.jafra-rise-3 { animation-delay: var(--jafra-hero-delay-3); }

/*
 * base.css already collapses animation duration under reduced-motion, but the
 * end state must also be forced: `both` would otherwise leave the element on
 * its `from` frame (opacity 0) for users who asked for less motion.
 */
@media (prefers-reduced-motion: reduce) {
	.jafra-rise-1,
	.jafra-rise-2,
	.jafra-rise-3 {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
 * 03 · EDITORIAL HERO
 * Source: section 03. Desktop 760px / mobile 580px.
 * ========================================================================== */

.jafra-hero {
	position: relative;
	block-size: var(--jafra-hero-height-mobile);
	overflow: hidden;
	background-color: var(--jafra-color-ink);
	color: var(--jafra-color-text-on-dark);
}

.jafra-hero__media,
.jafra-hero__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Mobile carries ONE gradient; desktop stacks TWO. Both are layered on a
 * single element via multiple backgrounds so the markup stays identical.
 * The overlay base is rgba(24,21,17) — deliberately not --jafra-color-ink.
 */
.jafra-hero__scrim {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		0deg,
		rgba(var(--jafra-overlay-rgb), 0.78) 6%,
		rgba(var(--jafra-overlay-rgb), 0) 52%
	);
}

.jafra-hero__body {
	position: absolute;
	inset-inline: var(--jafra-gutter-mobile-section);
	inset-block-end: 34px;
}

.jafra-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-block-end: 14px;
	font-size: var(--jafra-text-10-5);
	letter-spacing: var(--jafra-ls-26);
	text-transform: uppercase;
	color: var(--jafra-color-beige-eyebrow);
}

/* The 38px rule is desktop-only. */
.jafra-hero__rule {
	display: none;
	flex: 0 0 auto;
	inline-size: 38px;
	block-size: 1px;
	background-color: var(--jafra-color-beige);
}

.jafra-hero__eyebrow-desktop {
	display: none;
}

.jafra-hero__headline {
	font-weight: var(--jafra-weight-semibold);
	line-height: var(--jafra-lh-96);
}

.jafra-hero__headline-ar {
	display: block;
	font-size: var(--jafra-text-58);
	font-weight: var(--jafra-weight-semibold);
	line-height: var(--jafra-lh-96);
}

.jafra-hero__headline-en {
	display: block;
	margin-block-start: 6px;
	font-size: var(--jafra-text-24);
	font-style: italic;
	font-weight: var(--jafra-weight-regular);
	line-height: normal;
	color: #F3EEE4;
}

/* Desktop only — the mobile hero has no body paragraph. */
.jafra-hero__text {
	display: none;
}

.jafra-hero__actions {
	display: flex;
	gap: var(--jafra-space-16);
	margin-block-start: 24px;
}

.jafra-hero__cta {
	inline-size: 100%;
	padding-block: 16px;
	padding-inline: 0;
	font-size: var(--jafra-text-12-5);
}

/* Desktop only — mobile shows a single CTA. */
.jafra-hero__cta--secondary {
	display: none;
}

@media (min-width: 1024px) {
	.jafra-hero {
		block-size: var(--jafra-hero-height);
	}

	.jafra-hero__scrim {
		background-image:
			linear-gradient(
				100deg,
				rgba(var(--jafra-overlay-rgb), 0.68) 0%,
				rgba(var(--jafra-overlay-rgb), 0.32) 34%,
				rgba(var(--jafra-overlay-rgb), 0) 62%
			),
			linear-gradient(
				0deg,
				rgba(var(--jafra-overlay-rgb), 0.55) 0%,
				rgba(var(--jafra-overlay-rgb), 0) 42%
			);
	}

	.jafra-hero__body {
		inset-inline-start: 72px;
		inset-inline-end: auto;
		inset-block-end: 84px;
		max-inline-size: 640px;
	}

	.jafra-hero__eyebrow {
		margin-block-end: 26px;
		font-size: var(--jafra-text-12);
		letter-spacing: var(--jafra-ls-32);
	}

	.jafra-hero__rule {
		display: block;
	}

	.jafra-hero__eyebrow-desktop {
		display: inline;
	}

	.jafra-hero__eyebrow-mobile {
		display: none;
	}

	.jafra-hero__headline-ar {
		font-size: var(--jafra-text-96);
		letter-spacing: var(--jafra-ls-01);
	}

	.jafra-hero__headline-en {
		margin-block-start: var(--jafra-space-12);
		font-size: var(--jafra-text-38);
		font-weight: var(--jafra-weight-medium);
	}

	.jafra-hero__text {
		display: block;
		margin-block-start: 22px;
		max-inline-size: 430px;
		font-size: var(--jafra-text-16-5);
		line-height: var(--jafra-lh-165);
		color: #E6E1D7;
	}

	.jafra-hero__actions {
		margin-block-start: 38px;
	}

	.jafra-hero__cta {
		inline-size: auto;
		padding-block: 17px;
		padding-inline: 36px;
		font-size: var(--jafra-text-13);
	}

	.jafra-hero__cta--secondary {
		display: inline-flex;
		padding-inline: 32px;
	}
}

/* ==========================================================================
 * 04 · BRAND VALUES
 * Source: section 04. Desktop is a 4-up strip in an 1160px container; mobile
 * is a 2x2 grid with no subtitles and two shortened titles.
 * ========================================================================== */

.jafra-values {
	background-color: var(--jafra-color-bg);
	border-block-end: var(--jafra-border-hairline);
}

.jafra-values__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 14px;
	padding: 26px 20px;
	margin: 0;
	list-style: none;
}

.jafra-values__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	text-align: center;
}

/*
 * Burgundy is fixed by the design; the icon inherits it via currentColor.
 * Drawn at viewBox 26 but RENDERED at 22px on mobile and 26px on desktop, so
 * the size is set here rather than baked into the markup.
 */
.jafra-values__icon {
	inline-size: 22px;
	block-size: 22px;
	color: var(--jafra-color-burgundy);
}

.jafra-values__title {
	font-size: var(--jafra-text-12-5);
	font-weight: var(--jafra-weight-semibold);
}

.jafra-values__title-desktop {
	display: none;
}

/* Desktop only. */
.jafra-values__subtitle {
	display: none;
}

@media (min-width: 1024px) {
	.jafra-values__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--jafra-space-32);
		max-inline-size: 1160px;
		margin-inline: auto;
		padding: 40px;
	}

	.jafra-values__item {
		gap: 10px;
	}

	.jafra-values__icon {
		inline-size: 26px;
		block-size: 26px;
	}

	.jafra-values__title {
		font-size: var(--jafra-text-14);
		letter-spacing: var(--jafra-ls-02);
	}

	.jafra-values__title-desktop {
		display: inline;
	}

	.jafra-values__title-mobile {
		display: none;
	}

	.jafra-values__subtitle {
		display: block;
		margin-block-start: 3px;
		font-size: var(--jafra-text-12-5);
		color: var(--jafra-color-text-muted);
	}
}

/* ==========================================================================
 * 05 · THE ARCHIVE (FEATURED COLLECTIONS)
 * ========================================================================== */

.jafra-collections__inner {
	padding: 50px 20px 22px;
}

.jafra-collections__header {
	margin-block-end: 22px;
}

.jafra-collections__heading {
	font-size: var(--jafra-text-44);
	font-weight: var(--jafra-weight-semibold);
	line-height: var(--jafra-lh-95);
}

.jafra-collections__text {
	margin-block-start: 8px;
	font-size: var(--jafra-text-13-5);
	color: var(--jafra-color-text-muted);
}

.jafra-collections__text--desktop {
	display: none;
}

/* Desktop only. */
.jafra-collections__cta {
	display: none;
}

.jafra-collections__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jafra-space-12);
}

@media (min-width: 1024px) {
	.jafra-collections__inner {
		max-inline-size: var(--jafra-container);
		margin-inline: auto;
		padding: 108px var(--jafra-gutter) 48px;
	}

	.jafra-collections__header {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-block-end: 48px;
	}

	.jafra-collections__heading {
		font-size: var(--jafra-text-64);
		line-height: var(--jafra-lh-92);
		letter-spacing: var(--jafra-ls-tight);
	}

	.jafra-collections__text {
		margin-block-start: var(--jafra-space-12);
		max-inline-size: 420px;
		font-size: var(--jafra-text-15);
	}

	.jafra-collections__text--desktop {
		display: block;
	}

	.jafra-collections__text--mobile {
		display: none;
	}

	.jafra-collections__cta {
		display: inline-flex;
		padding-block-end: 10px;
	}

	.jafra-collections__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
	}
}

/* ==========================================================================
 * 06 · BRAND STORY
 * Source: section 06. Desktop: image left, text right, two equal columns.
 * Mobile: image band on top, text below, and a different focal point.
 * ========================================================================== */

.jafra-story {
	margin-block-start: 26px;
	background-color: var(--jafra-color-surface-warm-2);
}

.jafra-story__media {
	block-size: 360px;
	overflow: hidden;
	background-color: var(--jafra-color-ink);
}

.jafra-story__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Mobile pulls the crop 2% higher than desktop. */
	object-position: 50% 32%;
}

.jafra-story__body {
	padding: 38px var(--jafra-gutter-mobile-section);
}

.jafra-story__eyebrow {
	margin-block-end: 14px;
	color: var(--jafra-color-beige-story);
}

.jafra-story__heading {
	font-size: var(--jafra-text-40);
	font-weight: var(--jafra-weight-semibold);
	line-height: var(--jafra-lh-100);
	/* `normal` here collapses the stored newline to a space. */
	white-space: normal;
}

.jafra-story__heading-ar {
	margin-block-start: 10px;
	font-size: var(--jafra-text-24);
	color: var(--jafra-color-burgundy);
}

.jafra-story__text p {
	margin-block-start: 18px;
	font-size: var(--jafra-text-15);
	line-height: var(--jafra-lh-175);
	color: var(--jafra-color-text-warm);
}

.jafra-story__text--desktop {
	display: none;
}

.jafra-story__cta {
	margin-block-start: 22px;
	font-size: var(--jafra-text-12);
}

@media (min-width: 1024px) {
	.jafra-story {
		margin-block-start: var(--jafra-section-gap);
	}

	.jafra-story__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		max-inline-size: var(--jafra-container-wide);
		margin-inline: auto;
	}

	.jafra-story__media {
		block-size: auto;
		min-block-size: 640px;
	}

	.jafra-story__image {
		object-position: 50% 34%;
	}

	.jafra-story__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 96px 88px;
	}

	.jafra-story__eyebrow {
		margin-block-end: var(--jafra-space-24);
	}

	.jafra-story__heading {
		font-size: var(--jafra-text-60);
		letter-spacing: var(--jafra-ls-tight);
		/* `pre-line` honours the stored newline as a real line break. */
		white-space: pre-line;
	}

	.jafra-story__heading-ar {
		margin-block-start: var(--jafra-space-16);
		font-size: var(--jafra-text-30);
	}

	.jafra-story__text--desktop {
		display: block;
	}

	.jafra-story__text--mobile {
		display: none;
	}

	.jafra-story__text p {
		max-inline-size: 440px;
		font-size: var(--jafra-text-16-5);
		margin-block-start: var(--jafra-space-16);
	}

	.jafra-story__text p:first-child {
		margin-block-start: 28px;
	}

	.jafra-story__cta {
		align-self: flex-start;
		margin-block-start: 34px;
		font-size: var(--jafra-text-12-5);
	}
}

/* ==========================================================================
 * 07 · TRENDING PRODUCTS
 * ========================================================================== */

.jafra-products__inner {
	padding: 52px 20px 22px;
}

.jafra-products__header {
	margin-block-end: 30px;
	text-align: center;
}

.jafra-products__heading {
	font-size: var(--jafra-text-40);
	font-weight: var(--jafra-weight-semibold);
	line-height: var(--jafra-lh-100);
}

/* Desktop only. */
.jafra-products__text {
	display: none;
}

.jafra-products__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.jafra-products__actions {
	margin-block-start: 28px;
}

.jafra-products__cta {
	display: block;
	inline-size: 100%;
	padding-block: 15px;
	padding-inline: 0;
	font-size: var(--jafra-text-12);
}

@media (min-width: 1024px) {
	.jafra-products__inner {
		max-inline-size: var(--jafra-container);
		margin-inline: auto;
		padding: 108px var(--jafra-gutter) 48px;
	}

	.jafra-products__header {
		margin-block-end: 56px;
	}

	/*
	 * The eyebrow's bottom margin is section-specific in the designs:
	 * collections 18px, products 16px, manifesto 22px, brand story 24px.
	 * The shared rule carries the collections value; the others override.
	 */
	.jafra-products .jafra-section-eyebrow {
		margin-block-end: var(--jafra-space-16);
	}

	.jafra-products__heading {
		font-size: var(--jafra-text-56);
	}

	.jafra-products__text {
		display: block;
		margin-block-start: 10px;
		font-size: var(--jafra-text-15);
		color: var(--jafra-color-text-muted);
	}

	.jafra-products__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 22px;
	}

	.jafra-products__actions {
		margin-block-start: 52px;
		text-align: center;
	}

	.jafra-products__cta {
		display: inline-block;
		inline-size: auto;
		padding-block: var(--jafra-space-16);
		padding-inline: var(--jafra-gutter);
		font-size: var(--jafra-text-12-5);
	}
}

/* ==========================================================================
 * 08 · EDITORIAL MANIFESTO
 * Source: section 08. The mirror of the brand story — text left, image right
 * on desktop; image on top, text below on mobile.
 * ========================================================================== */

.jafra-manifesto {
	margin-block-start: 26px;
	background-color: var(--jafra-color-ink-deep);
	color: var(--jafra-color-text-on-dark);
}

/*
 * DOM order is text-then-image so the heading is read first, which is also
 * what the desktop grid needs (text left, image right). The MOBILE design puts
 * the image on top, so it is reordered visually rather than in the markup.
 */
.jafra-manifesto__inner {
	display: flex;
	flex-direction: column;
}

.jafra-manifesto__media {
	order: -1;
	block-size: 400px;
	overflow: hidden;
	background-color: var(--jafra-color-ink-panel);
}

.jafra-manifesto__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.jafra-manifesto__body {
	padding: 40px var(--jafra-gutter-mobile-section);
}

.jafra-manifesto__eyebrow {
	margin-block-end: 14px;
	color: var(--jafra-color-beige);
}

.jafra-manifesto__heading {
	font-weight: var(--jafra-weight-semibold);
}

.jafra-manifesto__heading-ar {
	display: block;
	font-size: var(--jafra-text-40);
	font-weight: var(--jafra-weight-semibold);
	line-height: var(--jafra-lh-105);
	color: var(--jafra-color-text-on-dark);
}

.jafra-manifesto__heading-en {
	display: block;
	margin-block-start: var(--jafra-space-8);
	font-size: var(--jafra-text-24);
	font-style: italic;
	font-weight: var(--jafra-weight-regular);
	line-height: normal;
	color: var(--jafra-color-text-on-dark-3);
}

.jafra-manifesto__text {
	margin-block-start: var(--jafra-space-16);
	font-size: var(--jafra-text-15);
	line-height: var(--jafra-lh-175);
	color: var(--jafra-color-text-on-dark-body);
}

.jafra-manifesto__text--desktop {
	display: none;
}

.jafra-manifesto__cta {
	margin-block-start: 20px;
	font-size: var(--jafra-text-12);
	color: var(--jafra-color-text-on-dark);
}

@media (min-width: 1024px) {
	.jafra-manifesto {
		margin-block-start: var(--jafra-section-gap);
	}

	.jafra-manifesto__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		max-inline-size: var(--jafra-container-wide);
		margin-inline: auto;
	}

	.jafra-manifesto__media {
		order: 0;
		block-size: auto;
		min-block-size: 600px;
	}

	.jafra-manifesto__body {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 104px 88px;
	}

	.jafra-manifesto__eyebrow {
		margin-block-end: 22px;
	}

	.jafra-manifesto__heading-ar {
		font-size: var(--jafra-text-52);
	}

	.jafra-manifesto__heading-en {
		margin-block-start: var(--jafra-space-12);
		font-size: var(--jafra-text-34);
	}

	.jafra-manifesto__text {
		display: none;
		margin-block-start: 26px;
		max-inline-size: 440px;
		font-size: var(--jafra-text-16-5);
		line-height: 1.8;
	}

	.jafra-manifesto__text--desktop {
		display: block;
	}

	.jafra-manifesto__cta {
		align-self: flex-start;
		margin-block-start: 34px;
		font-size: var(--jafra-text-12-5);
	}
}

/* ==========================================================================
 * 09 · REVIEWS
 * Source: section 09. Desktop shows three cards; mobile shows ONE plus three
 * decorative dots — see the note in template-parts/home/reviews.php.
 * ========================================================================== */

.jafra-reviews {
	background-color: var(--jafra-color-surface-warm);
}

.jafra-reviews__inner {
	padding: 48px 20px;
}

.jafra-reviews__header {
	margin-block-end: 26px;
	text-align: center;
}

.jafra-reviews__heading {
	font-size: var(--jafra-text-30);
	font-style: italic;
	font-weight: var(--jafra-weight-medium);
}

.jafra-reviews__summary {
	margin-block-start: var(--jafra-space-8);
	font-size: var(--jafra-text-12-5);
	letter-spacing: var(--jafra-ls-10);
	color: var(--jafra-color-burgundy);
}

.jafra-reviews__summary-desktop {
	display: none;
}

/* Mobile: a swipeable scroll-snap track — one card per view. The native scroll
 * handles the swipe (no carousel library), the same pattern as the product
 * gallery. Desktop switches back to a 3-up grid below. */
.jafra-reviews__grid {
	display: flex;
	gap: var(--jafra-space-16);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-padding-inline: var(--jafra-gutter-mobile-section);
	padding-inline: var(--jafra-gutter-mobile-section);
	margin-inline: calc(-1 * var(--jafra-gutter-mobile-section));
}

.jafra-reviews__grid::-webkit-scrollbar {
	display: none;
}

.jafra-review-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 100%;
	scroll-snap-align: center;
	padding: 30px var(--jafra-gutter-mobile-section);
	margin: 0;
	background-color: var(--jafra-color-bg);
	border: 1px solid var(--jafra-color-border-warm);
}

.jafra-review-card__stars {
	font-size: var(--jafra-text-12);
	letter-spacing: var(--jafra-ls-18);
	color: var(--jafra-color-burgundy);
}

.jafra-review-card__quote {
	margin: 14px 0 0;
	font-size: 19px;
	font-style: italic;
	line-height: var(--jafra-lh-150);
	color: var(--jafra-color-text-quote);
}

.jafra-review-card__author {
	display: flex;
	align-items: center;
	gap: var(--jafra-space-12);
	margin-block-start: 20px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--jafra-color-border-warm);
}

.jafra-review-card__avatar {
	flex: 0 0 auto;
	display: block;
	inline-size: 42px;
	block-size: 42px;
	border-radius: var(--jafra-radius-round);
	overflow: hidden;
	background-color: var(--jafra-color-surface-sand);
}

.jafra-review-card__avatar-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.jafra-review-card__name {
	display: block;
	font-size: var(--jafra-text-13);
	font-weight: var(--jafra-weight-semibold);
}

.jafra-review-card__product {
	display: block;
	font-size: var(--jafra-text-11);
	color: var(--jafra-color-text-muted);
}

.jafra-review-card__verified-desktop {
	display: none;
}

.jafra-reviews__dots {
	display: flex;
	gap: 6px;
	justify-content: center;
	margin-block-start: 18px;
}

/* Buttons, but drawn as the designed bars. Padding gives a comfortable tap
 * target while the visible bar (::before) stays small. */
.jafra-reviews__dot {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 9px 3px;
	background: transparent;
	line-height: 0;
	cursor: pointer;
}

.jafra-reviews__dot::before {
	content: "";
	display: block;
	inline-size: 8px;
	block-size: 3px;
	background-color: var(--jafra-color-dot-idle);
	transition: inline-size var(--jafra-duration-normal) ease, background-color var(--jafra-duration-normal) ease;
}

.jafra-reviews__dot.is-active::before {
	inline-size: 24px;
	background-color: var(--jafra-color-ink);
}

.jafra-reviews__dot:focus-visible {
	outline: 2px solid var(--jafra-color-burgundy);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.jafra-reviews__dot::before {
		transition: none;
	}
}

@media (min-width: 1024px) {
	.jafra-reviews__inner {
		max-inline-size: var(--jafra-container);
		margin-inline: auto;
		padding: 96px var(--jafra-gutter);
	}

	.jafra-reviews__header {
		margin-block-end: 52px;
	}

	.jafra-reviews__heading {
		font-size: var(--jafra-text-44);
	}

	.jafra-reviews__summary {
		margin-block-start: 10px;
		font-size: var(--jafra-text-14);
		letter-spacing: var(--jafra-ls-14);
	}

	.jafra-reviews__summary-desktop {
		display: inline;
	}

	.jafra-reviews__summary-mobile {
		display: none;
	}

	/* Desktop: back to a static 3-up grid (no scroll track). */
	.jafra-reviews__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		overflow: visible;
		padding-inline: 0;
		margin-inline: 0;
	}

	.jafra-review-card {
		flex: initial;
		padding: 36px var(--jafra-space-32);
	}

	.jafra-review-card__stars {
		font-size: var(--jafra-text-13);
	}

	.jafra-review-card__quote {
		flex: 1;
		margin-block-start: 18px;
		font-size: var(--jafra-text-20);
	}

	.jafra-review-card__author {
		gap: 13px;
		margin-block-start: 26px;
		padding-block-start: 22px;
	}

	.jafra-review-card__avatar {
		inline-size: 46px;
		block-size: 46px;
	}

	.jafra-review-card__name {
		font-size: var(--jafra-text-14);
	}

	.jafra-review-card__product {
		font-size: var(--jafra-text-12);
	}

	.jafra-review-card__verified-desktop {
		display: inline;
	}

	.jafra-review-card__verified-mobile {
		display: none;
	}

	.jafra-reviews__dots {
		display: none;
	}
}

/* ==========================================================================
 * 10 · COMMUNITY
 * ========================================================================== */

.jafra-community__inner {
	padding: 48px 20px;
}

.jafra-community__header {
	margin-block-end: 22px;
	text-align: center;
}

.jafra-community__heading {
	font-weight: var(--jafra-weight-semibold);
}

.jafra-community__heading-ar {
	display: block;
	font-size: var(--jafra-text-28);
	font-weight: var(--jafra-weight-semibold);
}

.jafra-community__handle {
	display: block;
	font-size: var(--jafra-text-18);
	font-style: italic;
	font-weight: var(--jafra-weight-regular);
	color: var(--jafra-color-text-muted);
}

.jafra-community__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jafra-community__tile {
	position: relative;
	display: block;
	aspect-ratio: var(--jafra-ratio-square);
	overflow: hidden;
	background-color: var(--jafra-color-surface-sand);
}

.jafra-community__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--jafra-duration-tile) var(--jafra-ease);
}

/* Desktop only — a touch device has no hover to reveal it. */
.jafra-community__overlay {
	display: none;
}

@media (min-width: 1024px) {
	.jafra-community__inner {
		max-inline-size: 1440px;
		margin-inline: auto;
		padding: 96px var(--jafra-gutter);
	}

	.jafra-community__header {
		margin-block-end: 44px;
	}

	.jafra-community__heading-ar {
		font-size: var(--jafra-text-36);
	}

	.jafra-community__handle {
		margin-block-start: 2px;
		font-size: var(--jafra-text-24);
	}

	.jafra-community__grid {
		grid-template-columns: repeat(6, 1fr);
		gap: var(--jafra-space-12);
	}

	.jafra-community__overlay {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(var(--jafra-overlay-rgb), 0.34);
		color: var(--jafra-color-text-on-dark);
		opacity: 0;
		transition: opacity var(--jafra-duration-normal) ease;
	}

	.jafra-community__tile:hover .jafra-community__image {
		transform: scale(1.06);
	}

	.jafra-community__tile:hover .jafra-community__overlay,
	.jafra-community__tile:focus-visible .jafra-community__overlay {
		opacity: 1;
	}
}