/* Homepage motion layer (Apple-style). Classes are prefixed h- to stay clear of the base theme. */
.btn .arr { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }
.btn:hover .arr { transform: translateX(-4px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); }

.h-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; }
.h-disc { position: absolute; left: 50%; top: 50%; width: min(78vw, 540px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
	background: radial-gradient(circle at 50% 46%, var(--disc-c, #efe7da) 0 30%, color-mix(in srgb, var(--disc-c, #efe7da) 45%, transparent) 50%, transparent 68%); pointer-events: none; }
.h-float { position: relative; display: block; }
.h-bottle { display: block; width: var(--bw, 150px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .32)); will-change: transform; }
.h-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 48%, transparent 60%); background-size: 260% 100%; }

/* Hero */
.h-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; text-align: center; padding: clamp(48px, 8vh, 96px) var(--gutter) 0; }
.h-hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 18px; }
.h-hero__title { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 7.4rem); line-height: 1.05; color: #fff; }
.h-hero__title .w { display: inline-block; }
.h-hero__lead { color: rgba(255, 255, 255, .62); max-width: 30em; font-size: clamp(1rem, 1.6vw, 1.15rem); }
.h-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.h-hero__stage { position: relative; display: grid; place-items: center; width: 100%; height: min(60vh, 520px); margin-top: 8px; --disc-c: #efe7da; --bw: min(30vw, 160px); }
.h-hero__glow { position: absolute; inset: auto 0 -30% 0; height: 60%; background: radial-gradient(50% 60% at 50% 0%, rgba(201, 162, 90, .2), transparent 70%); pointer-events: none; }

/* Statement */
.h-statement { background: var(--ink); color: #fff; padding: clamp(72px, 14vh, 160px) var(--gutter); }
.h-statement p { max-width: 980px; margin-inline: auto; font-family: var(--font-display); font-size: clamp(1.9rem, 5vw, 4.2rem); line-height: 1.3; text-align: center; }
.h-statement .w { color: rgba(255, 255, 255, .16); }
.no-motion .h-statement .w { color: #fff; }

/* Personas: horizontal travel while pinned */
.h-personas { position: relative; overflow: hidden; }
.h-track { display: flex; width: max-content; }
.h-persona { position: relative; width: 100vw; height: calc(100svh - 72px); min-height: 520px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 40px var(--gutter); overflow: hidden; background: var(--bg); color: var(--fg); }
.h-persona__stage { position: relative; height: 100%; display: grid; place-items: center; --bw: min(22vw, 175px); }
.h-persona__copy { position: relative; z-index: 2; display: grid; gap: 12px; max-width: 460px; justify-self: center; }
.h-persona__code { font: 600 .9rem var(--font-latin); letter-spacing: .3em; opacity: .7; }
.h-persona__name { font: 500 clamp(2.4rem, 6vw, 4.8rem)/1 var(--font-latin); letter-spacing: -.02em; }
.h-persona__mood { font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.55rem); }
.h-persona__notes { opacity: .8; }
.h-persona__price { font-size: 1.2rem; }
.h-persona__copy .btn { justify-self: start; }
@media (max-width: 760px) {
	.h-persona { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: calc(100svh - 64px); padding: 20px 20px 36px; text-align: center; gap: 6px; }
	.h-persona__stage { order: -1; min-height: 0; --bw: 28vw; }
	.h-persona .h-disc { width: 72vw; }
	.h-persona__copy { justify-items: center; gap: 6px; }
	.h-persona__copy .btn { justify-self: center; min-height: 44px; }
	.h-persona__name { font-size: 2.3rem; }
	.h-persona__notes { font-size: .92rem; }
}
/* Without JS/GSAP the track scrolls sideways instead of pinning */
.no-motion .h-personas { overflow-x: auto; scroll-snap-type: x mandatory; }
.no-motion .h-persona { scroll-snap-align: start; }

/* Mood tiles get their own particles */
.mood .h-particles { z-index: -1; }
.mood { min-height: 240px; }

@media (prefers-reduced-motion: reduce) {
	.h-statement .w { color: #fff; }
}

/* Winter collection band */
.h-winter { position: relative; overflow: hidden; color: #fbeedd; background: radial-gradient(120% 80% at 80% 0%, #7a3e1c 0%, transparent 60%), radial-gradient(90% 70% at 0% 100%, #4a2412 0%, transparent 60%), #1a0f09; padding-block: clamp(48px, 7vw, 88px); }
.h-winter__in { position: relative; z-index: 1; display: grid; gap: 28px; }
.h-winter__head { display: grid; gap: 10px; justify-items: start; max-width: 560px; }
.h-winter__head .eyebrow { color: #e9b77a; }
.h-winter__head h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); color: #fff; }
.h-winter__head p { color: rgba(251, 238, 221, .75); }
.h-winter .card { background: rgba(255, 255, 255, .97); color: var(--ink); }
@media (max-width: 760px) { .h-winter__head { justify-items: center; text-align: center; margin-inline: auto; } }

/* Personas: size everything from the real viewport so nothing is cut off */
.h-persona { height: calc(100svh - var(--head, 72px)); min-height: 0; }
.h-persona .h-bottle { width: auto; height: min(56svh, 460px); }
@media (max-width: 760px) {
	.h-persona { grid-template-rows: minmax(0, 1fr) auto; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); gap: 4px; }
	.h-persona__stage { height: auto; min-height: 0; }
	.h-persona .h-bottle { height: min(42svh, 340px); }
	.h-persona .h-disc { width: min(64vw, 40svh); }
	.h-persona__copy { gap: 4px; }
	.h-persona__code { font-size: .78rem; }
	.h-persona__name { font-size: clamp(1.8rem, 8vw, 2.3rem); }
	.h-persona__mood { font-size: 1.05rem; }
	.h-persona__notes { font-size: .86rem; }
	.h-persona__price { font-size: 1rem; }
	.h-persona__copy .btn { min-height: 42px; padding: 0 20px; margin-top: 4px; }
}
@media (max-width: 760px) and (max-height: 640px) { .h-persona__notes { display: none; } .h-persona .h-bottle { height: 30svh; } }
@media (max-width: 760px) {
	.h-persona__copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 14px; row-gap: 4px; }
	.h-persona__code, .h-persona__name, .h-persona__mood, .h-persona__notes { width: 100%; }
	.h-persona__copy .btn { margin-top: 0; }
	.h-persona .h-bottle { height: min(40svh, 320px); }
}

/* Product photo frame (full photo, nothing cut out) */
.h-photo { position: relative; display: block; width: var(--ps, min(72vw, 420px)); aspect-ratio: 1; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.h-photo .h-bottle, .h-persona .h-photo .h-bottle { width: 100%; height: 100%; object-fit: contain; filter: none; display: block; }
.h-hero__stage { --ps: min(74vw, 46vh, 440px); height: auto; padding-block: 18px 48px; }
.h-persona__stage { --ps: min(38vw, calc(var(--vh, 100svh) * .58), 460px); }
.h-persona .h-disc { width: calc(var(--ps) * 1.35); }

/* Persona panel height from the real visible viewport (set in JS), works on every browser */
.h-persona { height: calc(var(--vh, 100svh) - var(--head, 72px)); }
@media (max-width: 760px) {
	.h-persona__stage { --ps: min(78vw, calc(var(--vh, 100svh) * .36)); }
	.h-persona .h-bottle { height: 100%; }
}

/* Winter carousel */
.h-carousel { display: grid; gap: 16px; }
.h-carousel__track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 10px; overscroll-behavior-x: contain; }
.h-carousel__track::-webkit-scrollbar { display: none; }
.h-carousel__item { flex: 0 0 calc((100% - 3 * 14px) / 4); scroll-snap-align: start; }
.h-carousel__item .card { height: 100%; }
.h-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.h-carousel__btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .25); color: #fff; font-size: 1.1rem; cursor: pointer; transition: border-color .2s ease, opacity .2s ease; }
.h-carousel__btn:hover { border-color: #e9b77a; }
.h-carousel__btn:disabled { opacity: .3; cursor: default; }
.h-carousel__dots { display: flex; gap: 6px; }
.h-carousel__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: width .3s ease, background .3s ease; }
.h-carousel__dots i.on { width: 20px; background: #e9b77a; }
@media (max-width: 1024px) { .h-carousel__item { flex-basis: calc((100% - 2 * 14px) / 3); } }
@media (max-width: 720px) { .h-carousel__item { flex-basis: 72%; } .h-carousel__track { gap: 12px; } }

/* Personas v2: note chips + price/button row */
.h-persona__stage { text-decoration: none; }
.h-persona__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; opacity: 1; }
.h-persona__notes li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; padding-inline: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .55); color: inherit; font-size: .86rem; }
.h-persona[data-motion="ember"] .h-persona__notes li { background: rgba(0, 0, 0, .28); }
.h-persona__notes img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.h-persona__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.h-persona__foot .h-persona__price { margin: 0; }

/* Phones: a swipeable row of cards sized to their content (no pinning, nothing cut off) */
@media (max-width: 760px) {
	.h-personas { overflow: visible; padding: 8px 0 28px; background: var(--ink); }
	.h-personas__pin { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
	.h-personas__pin::-webkit-scrollbar { display: none; }
	.h-track { gap: 12px; padding: 0 16px; transform: none !important; }
	.h-persona, .h-persona { width: 84vw; height: auto !important; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; border-radius: 28px; scroll-snap-align: center; text-align: center; }
	.h-persona__stage { order: 0; --ps: min(58vw, 260px); height: auto; padding: 8px 0 4px; }
	.h-persona .h-disc { width: calc(var(--ps) * 1.25); }
	.h-persona__copy { display: grid !important; justify-items: center; gap: 6px; max-width: none; }
	.h-persona__copy > * { width: auto !important; }
	.h-persona__name { font-size: 2rem; }
	.h-persona__notes { justify-content: center; }
	.h-persona__notes li { font-size: .8rem; }
	.h-persona__foot { justify-content: center; }
	.h-persona__copy .btn { min-height: 44px; }
	.h-persona .h-particles { border-radius: inherit; }
}

/* Banner: two drifting rows of bottles, logo and promises in the middle */
.h-banner { position: relative; overflow: hidden; isolation: isolate; min-height: min(86svh, 760px); display: grid; place-items: center; padding: 28px 0 40px; background: var(--ink); color: #fff; }
.h-banner__wall { position: absolute; inset: -6% -20%; z-index: -2; display: grid; align-content: space-around; gap: 6px; transform: rotate(-6deg); opacity: .7; }
.h-banner__row { display: flex; align-items: flex-end; gap: clamp(26px, 4vw, 54px); width: max-content; animation: suz-wall 60s linear infinite; }
.h-banner__row--1 { animation-direction: reverse; animation-duration: 70s; }
.h-banner__tile { flex: 0 0 auto; height: clamp(170px, 24vw, 280px); }
.h-banner__tile img { height: 100%; width: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .7)); }
.h-banner__row--1 .h-banner__tile { height: clamp(140px, 19vw, 230px); }
@keyframes suz-wall { to { transform: translateX(-50%); } }
.lang-ar .h-banner__row { animation-name: suz-wall-rtl; }
@keyframes suz-wall-rtl { to { transform: translateX(50%); } }
.h-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 55% at 50% 50%, rgba(20, 17, 13, .92) 0%, rgba(20, 17, 13, .78) 45%, rgba(20, 17, 13, .35) 100%), linear-gradient(180deg, rgba(20, 17, 13, .6), transparent 25%, transparent 75%, var(--ink)); }
.h-banner .h-particles { z-index: -1; }
.h-banner__center { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 0 var(--gutter); max-width: 760px; }
.h-banner__logo { width: clamp(150px, 26vw, 230px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; padding: 26px;
	background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .08), rgba(20, 17, 13, .85) 70%); border: 1px solid rgba(230, 201, 139, .35);
	box-shadow: 0 0 0 10px rgba(230, 201, 139, .05), 0 30px 80px -20px rgba(176, 138, 62, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.h-banner__logo img { width: 100%; height: auto; }
.h-banner__title { font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3.2rem); color: #fff; }
.h-banner__stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.h-banner__stats li { display: grid; gap: 2px; min-width: 150px; padding: 12px 18px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.h-banner__stats b { font: 600 1.15rem var(--font-latin); color: var(--gold-soft); }
.lang-ar .h-banner__stats b { font-family: var(--font-body); }
.h-banner__stats span { font-size: .84rem; color: rgba(255, 255, 255, .72); }
.h-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
@media (max-width: 760px) {
	.h-banner { min-height: 0; padding: 36px 0 44px; }
	.h-banner__wall { inset: -20% -60%; gap: 12px; }
	.h-banner__row { gap: 22px; }
	.h-banner__tile { height: 150px; }
	.h-banner__row--1 .h-banner__tile { height: 125px; }
	.h-banner__stats li { min-width: 0; flex: 1 1 140px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .h-banner__row { animation: none; } }