/* Home-only overlay keeps the shared header's 90px height and 50% surface. */
.site-surface:has(> .site-main > .home-page) { padding-top: 0; }
.site-main:has(> .home-page) { max-width: none; padding-inline: 0; }
/* One continuous image below Lens Custom and behind the translucent footer. */
.home-footer-scene {
    flex-shrink: 0;
    background: #fbdde2 url('../images/main-page/main-footer.png') center top / cover no-repeat;
}
.home-footer-scene__art { min-height: clamp(240px, 24vw, 460px); }
.home-page { --home-feature-height: clamp(480px, 50vw, 840px); --home-product-title-size: 19px; }
.home-page h2, .home-page h3 { margin: 0; font-family: var(--font-manrope); }
.home-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.home-tone-1 { background: var(--color-primary); }
.home-tone-2 { background: #f1b0b8; }
.home-tone-3 { background: #e8a0ae; }
.home-carousel { position: relative; min-width: 0; }
.home-carousel__viewport { overflow: hidden; touch-action: pan-y; }
.home-carousel.is-ready .home-carousel__viewport { cursor: grab; user-select: none; }
.home-carousel.is-ready .home-carousel__viewport.is-dragging { cursor: grabbing; }
.home-carousel__track { display: flex; transition: transform 650ms cubic-bezier(.22, .68, .2, 1); }
.home-carousel__track:is(.is-resetting, .is-dragging) { transition: none; }
.home-carousel__slide { flex: 0 0 calc(100% / var(--carousel-visible, 1)); min-width: 0; }
.home-hero__media { position: relative; height: 80vh; height: 80svh; }
.home-hero__picture { display: block; width: 100%; height: 100%; }
.home-hero__media img, .home-product__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-hero__placeholder {
    display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center;
    gap: 20px; padding: 112px 24px 64px; color: var(--color-text-inverse); font-family: var(--font-manrope);
}
.home-hero__placeholder > span { font-size: 13px; letter-spacing: .2em; }
.home-hero__placeholder p { margin: 0; font-size: clamp(40px, 8vw, 140px); font-weight: 800; line-height: 1.15; letter-spacing: -.06em; }
.home-page .home-hero__shop { margin-top: 28px; min-width: 160px; pointer-events: auto; }
.home-hero__copy {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 48px 24px 80px;
    color: #fff; text-align: center; pointer-events: none;
    text-shadow: 0 2px 20px rgb(65 27 35 / 18%);
}
.home-page .home-hero__headline {
    font-family: "Inter", sans-serif; font-size: clamp(36px, 7.2vw, 112px);
    font-weight: 700; line-height: 1.04; letter-spacing: -.055em;
}
.home-hero__headline > span { display: block; }
.home-hero__headline em { font-style: italic; }
.home-hero__media--welcome .home-hero__copy {
    left: 50%; padding-inline: 24px;
    text-shadow: 0 2px 16px rgb(64 24 40 / 35%);
}
.home-page .home-hero__media--welcome .home-hero__headline {
    font-family: "Manrope", sans-serif; font-weight: 800; letter-spacing: -.045em;
    font-size: clamp(28px, 3.7vw, 64px); line-height: 1.12;
}
html:has(.home-page) { scroll-behavior: smooth; }
.home-hero__copy .home-hero__subtitle {
    max-width: 100%; margin: 28px 0 0;
    font-family: "Cormorant Garamond", serif; font-style: italic;
    font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; line-height: 1.3;
}
html[lang|="th"] .home-hero__copy .home-hero__subtitle {
    font-family: var(--font-noto-serif-thai); font-style: normal;
    font-size: clamp(16px, 1.5vw, 22px); line-height: 1.7;
}
/* Indicators float over imagery; no arrows, pause button or surrounding panel. */
.home-carousel__controls { position: absolute; inset: auto 0 20px; display: flex; justify-content: center; pointer-events: none; }
.home-carousel__controls[hidden] { display: none; }
.home-carousel__indicators { display: flex; align-items: center; pointer-events: auto; }
.home-carousel__dot {
    display: grid; place-items: center; width: 48px; height: 44px; padding: 0;
    background: none; border: 0; cursor: pointer;
}
.home-carousel__dot span {
    display: block; width: 7px; height: 7px; border-radius: 10px;
    background: var(--color-text-inverse); opacity: .65;
    transition: width 300ms ease, opacity var(--transition-ui);
}
.home-carousel__dot[aria-current=true] span { width: 40px; opacity: 1; }
.home-carousel__dot:is(:hover, :focus-visible) span { opacity: 1; }
.home-carousel__dot:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: -3px; }
.home-arrivals { max-width: var(--site-width); margin-inline: auto; padding: 80px var(--page-gutter) 88px; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.home-section-heading h2 { font-size: clamp(26px, 2.4vw, 40px); font-weight: 700; letter-spacing: -.035em; }
.home-page .home-view-all { font-size: var(--home-product-title-size); }
.home-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.home-product__link { display: block; color: inherit; text-decoration: none; }
.home-product__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 6px; }
.home-product { min-width: 0; }
.home-product__media { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.home-product__placeholder { color: rgb(255 255 255 / 75%); font: 700 clamp(48px, 6vw, 100px)/1 var(--font-manrope); letter-spacing: -.05em; }
.home-product__info { padding-top: 20px; }
.home-product__info h3 { font-size: var(--home-product-title-size); font-weight: 700; }
.home-product__info p { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; color: var(--color-text-secondary); font-size: 13px; }
.home-product__info--priced { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 4px 16px; }
.home-product__info--priced > h3, .home-product__info--priced > p { grid-column: 1; min-width: 0; }
.home-product__info--priced > p { margin: 0; }
.home-product__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; color: var(--color-primary); white-space: nowrap; font: 700 var(--home-product-title-size)/1.5 var(--font-manrope); }
.home-product__separator { width: 1px; height: 12px; background: var(--color-border-selected); }
.home-brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-brand {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 24px;
    min-width: 0; min-height: var(--home-feature-height);
    padding: 32px clamp(24px, 4vw, 76px);
    background-color: var(--color-surface-brand);
    background-image: linear-gradient(rgb(255 255 255 / 30%), rgb(255 255 255 / 30%)), url('../images/main-page/brand-imood.jpg');
    background-size: cover; background-position: center;
}
.home-brand:nth-child(2) {
    background-color: #f8e4e8;
    background-image: linear-gradient(rgb(255 255 255 / 30%), rgb(255 255 255 / 30%)), url('../images/main-page/brand-doonoon.jpg');
}
.home-brand__heading { min-width: 0; text-align: left; }
.home-brand__heading .ui-eyebrow { margin: 0 0 8px; color: var(--color-text-accent); font-size: clamp(10px, .85vw, 12px); }
.home-brand__heading h2 { font-size: clamp(40px, 3.3vw, 60px); font-weight: 800; font-style: italic; line-height: 1.15; letter-spacing: -.045em; }
.home-brand__tagline { margin: 22px 0 12px; font-family: "Manrope", sans-serif; font-size: clamp(18px, 1.45vw, 23px); font-weight: 700; line-height: 1.4; text-wrap: balance; }
.home-brand__description { max-width: 30ch; margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.8; }
.home-carousel--brand { width: min(100%, 320px); justify-self: end; }
.home-carousel--brand .home-product__media { width: 100%; aspect-ratio: 1; }
.home-carousel--brand .home-product__media img { object-fit: contain; }
.home-carousel--brand .home-product__info { padding: 14px 0 0; text-align: center; }
.home-carousel--brand .home-product__info p { justify-content: center; }
.home-carousel--brand .home-product__placeholder { font-size: clamp(48px, 6vw, 88px); }
/* The square overlay aligns indicators to the image bottom, above product text. */
.home-carousel--brand .home-carousel__controls { inset: 0 0 auto; aspect-ratio: 1; align-items: flex-end; padding-bottom: 8px; }
.home-preview { position: relative; overflow: hidden; background: #fdf9f6; }
.home-preview__inner {
    display: flex; align-items: center;
    max-width: var(--site-width); min-height: clamp(400px, 42.85vw, 820px); margin-inline: auto; padding: 72px var(--page-gutter);
}
.home-preview__copy { position: relative; z-index: 1; width: 44%; min-width: 0; text-align: left; }
.home-preview__copy h2, .home-custom__heading h2 { font-size: clamp(30px, 3.4vw, 56px); line-height: 1.2; letter-spacing: -.04em; }
.home-intro-description { margin: 20px 0 24px; color: var(--color-text-secondary); }
.home-page .home-feature-button {
    min-width: 160px; max-width: 100%; border-radius: 999px;
    border: var(--stroke-emphasis) solid var(--color-primary);
    color: var(--color-primary); background: transparent; white-space: normal;
}
.home-page .home-feature-button:is(:hover, :focus-visible, :active) {
    color: var(--color-text-inverse); background: var(--color-primary);
}
.home-preview__media { position: absolute; inset: 0; min-width: 0; overflow: hidden; }
.home-preview__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.home-preview__media > span { padding: 24px; color: var(--color-text-inverse); text-align: center; font: 700 clamp(24px, 3vw, 48px)/1.2 var(--font-manrope); }
.home-custom { background: var(--color-surface-brand); }
.home-custom__inner {
    display: grid; grid-template-columns: min(36%, 560px) minmax(0, 1fr);
    max-width: var(--site-width); margin-inline: auto;
}
.home-custom__media { position: relative; min-width: 0; aspect-ratio: 9 / 16; overflow: hidden; }
.home-custom__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.home-custom__content { display: flex; flex-direction: column; justify-content: center; gap: 40px; min-width: 0; padding: 64px var(--page-gutter); text-align: center; background: linear-gradient(rgb(255 255 255 / 50%), rgb(255 255 255 / 50%)), var(--color-surface-brand) url('../images/main-page/main-lens-custom.png') center / cover no-repeat; }
.home-custom__heading { text-align: center; }
.home-custom__heading .home-intro-description { margin-bottom: 0; }
.home-custom__empty { text-align: center; color: var(--color-text-secondary); }
.home-custom__link { margin-top: 24px; }
@media (max-width: 1199px) {
    .home-arrivals { padding-block: 56px 64px; }
    .home-product-grid { gap: 20px; }
    .home-brand { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
    .home-brand__description { max-width: 42ch; }
    .home-brand__tagline { margin-top: 16px; }
    .home-carousel--brand { justify-self: center; }
    .home-preview__inner { padding-block: 56px; }
    .home-custom__content { gap: 32px; padding-block: 48px; }
}
@media (max-width: 767px) {
    .home-footer-scene { background-image: url('../images/main-page/main-footer-m.png'); }
    .home-page { --home-feature-height: 480px; }
    .home-hero__placeholder p { font-size: clamp(38px, 11vw, 76px); }
    .home-hero__media::after { content: ''; position: absolute; z-index: 1; inset: 45% 0 0; background: linear-gradient(to bottom, rgb(64 64 64 / 0%), rgb(64 64 64 / 25%)); pointer-events: none; }
    .home-hero__copy { z-index: 2; justify-content: flex-end; padding: calc(var(--site-header-height) + 16px) 20px 84px; }
    .home-page .home-hero__shop { margin-top: 24px; }
    .home-page .home-hero__headline { font-size: clamp(28px, 7.7vw, 58px); }
    .home-page .home-hero__media--welcome .home-hero__headline { font-size: clamp(28px, 7.7vw, 58px); }
    .home-hero__media--welcome .home-hero__copy {
        left: 0; justify-content: flex-end;
        padding: calc(var(--site-header-height) + 16px) 20px 84px;
    }
    .home-hero__media--welcome .home-hero__subtitle { margin-top: 14px; font-size: 20px; }
    .home-hero__media--welcome .home-hero__scroll { margin-top: 16px; gap: 6px; }
    .home-hero__copy .home-hero__subtitle { max-width: 32ch; margin-top: 20px; font-size: 22px; }
    .home-arrivals { padding-block: 40px 48px; }
    .home-section-heading { gap: 8px; margin-bottom: 24px; }
    .home-section-heading h2 { font-size: 26px; }
    .home-product-grid { grid-template-columns: 1fr; gap: 32px; }
    .home-product__info { padding-top: 14px; }
    .home-brands { grid-template-columns: 1fr; }
    .home-brand { padding: 56px var(--page-gutter) 64px; gap: 36px; }
    .home-brand__heading { text-align: center; }
    .home-brand__description { margin-inline: auto; }
    .home-carousel--brand .home-product__info h3 { font-size: 16px; }
    .home-carousel--brand .home-product__info p { font-size: 12px; gap: 6px; }
    .home-carousel--brand .home-carousel__dot { width: 44px; }
    .home-carousel--brand .home-carousel__dot[aria-current=true] span { width: 32px; }
    .home-preview__inner { flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding-block: 40px 0; }
    .home-preview__copy { width: 100%; }
    .home-preview__copy h2 { font-size: clamp(28px, 6vw, 40px); }
    .home-preview__media {
        position: relative; inset: auto; flex: none; aspect-ratio: 1.2;
        margin-inline: calc(-1 * var(--page-gutter));
    }
    .home-custom__inner { grid-template-columns: minmax(0, 1fr); }
    .home-custom__media { width: min(100%, 320px); justify-self: center; }
    .home-custom__content { padding-block: 40px 56px; }
}
@media (prefers-reduced-motion: no-preference) {
    .home-carousel--hero .is-copy-pending .home-hero__copy > * { opacity: 0; transform: translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
    html:has(.home-page) { scroll-behavior: auto; }
    .home-carousel__track, .home-carousel__dot span { transition: none; }
}

/* Progressive home interactions: content remains visible without JavaScript. */
.home-page::before{content:'';position:fixed;top:0;left:0;right:0;height:3px;background:var(--color-primary);transform:scaleX(var(--home-progress,0));transform-origin:left;z-index:1000;pointer-events:none}
.home-reveal{opacity:0;transform:translateY(24px);transition:opacity 650ms ease var(--reveal-delay,0ms),transform 650ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms)}
.home-reveal.is-visible{opacity:1;transform:none}
.home-product__link{position:relative;transform:perspective(1000px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg));transition:transform 200ms ease}
.home-product__media{border-radius:12px;transition:box-shadow 250ms ease}
.home-product__media img{transition:transform 500ms cubic-bezier(.2,.7,.2,1)}
.home-product__link:focus-visible .home-product__media img{transform:scale(1.035)}
.home-product__info h3{transition:color 200ms ease}
.home-product__link:focus-visible h3{color:var(--color-primary)}
.home-page .ui-button .ui-forward-icon{transition:transform 200ms ease}
.home-page .ui-button:is(:hover,:focus-visible) .ui-forward-icon{transform:translateX(4px)}
.home-hero{overflow:hidden}
.home-hero__placeholder p{transform:translateY(var(--hero-shift,0px))}
.home-preview__media{transition:box-shadow 300ms ease}
.home-preview__media img{transition:transform 550ms ease}
@media(hover:hover) and (pointer:fine){
 .home-product__link:hover .home-product__media{box-shadow:0 12px 32px #bd75841c}
 .home-product__link:hover .home-product__media img{transform:scale(1.035)}
 .home-product__link:hover h3{color:var(--color-primary)}
 .home-preview__media:hover img{transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){
 .home-reveal{opacity:1;transform:none;transition:none}
 .home-product__link,.home-product__media img,.home-preview__media img,.home-hero__placeholder p{transform:none!important;transition:none}
 .home-page .ui-button .ui-forward-icon{transition:none;transform:none!important}
}