/* Homepage stage: full-bleed slides under a clear header. */
.page-home .site-header.is-over-hero { margin-block-end: calc(var(--header-h) * -1); }
.page-home .site-header.is-over-hero:not(.is-solid)::before {
    clip-path: inset(0 0 100% 0);
    background: transparent;
}
.page-home .site-header.is-over-hero.on-dark:not(.is-solid),
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) a,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .main-nav__link,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .header-phone small,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .header-phone strong {
    color: #fffdf8;
}
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .icon-btn {
    color: #fffdf8;
    border-color: rgba(255, 253, 248, .35);
}

.stage {
    position: relative;
    min-block-size: calc(100svh - 2.4rem);
    background: #1c2416;
    color: #fffdf8;
    overflow: hidden;
}
.stage__viewport { position: absolute; inset: 0; }
.stage__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s;
}
.stage__slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.stage__photo {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transform: scale(1.08);
}
.stage__slide.is-active .stage__photo { animation: stage-ken 7.2s ease-out forwards; }
@keyframes stage-ken { to { transform: scale(1); } }
.stage__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(18, 22, 14, .15), rgba(18, 22, 14, .55) 78%),
        linear-gradient(to top, rgba(16, 20, 12, .55), transparent 42%);
}
.stage__copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    padding: calc(var(--header-h) + 1.5rem) 12vw 4.5rem;
    gap: .35rem;
}
.stage__eyebrow {
    margin: 0;
    font-family: var(--f-display);
    font-style: italic;
    font-size: clamp(1.4rem, 2vw, 2rem);
    letter-spacing: .02em;
}
.stage__leaf { color: #d7e2b8; display: block; margin-block: .15rem .2rem; }
.stage__title {
    margin: 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 5.4rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.stage__lead {
    margin: .35rem 0 1rem;
    max-inline-size: 36rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 253, 248, .92);
}
.stage__copy > * { opacity: 0; transform: translateY(16px); }
.stage__slide.is-active .stage__copy > * { animation: stage-rise .8s ease forwards; }
.stage__slide.is-active .stage__copy > *:nth-child(2) { animation-delay: .08s; }
.stage__slide.is-active .stage__copy > *:nth-child(3) { animation-delay: .16s; }
.stage__slide.is-active .stage__copy > *:nth-child(4) { animation-delay: .24s; }
.stage__slide.is-active .stage__copy > *:nth-child(5) { animation-delay: .32s; }
@keyframes stage-rise { to { opacity: 1; transform: none; } }

.stage__ribbon {
    display: inline-block;
    margin-block-start: .4rem;
    padding: .7rem 1.6rem;
    background: #fffdf8;
    color: #24301c;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .04em;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}
.stage__ribbon:hover { background: #6d8c3a; color: #fff; }

.stage__nav {
    position: absolute;
    inset-block-start: 50%;
    z-index: 3;
    translate: 0 -50%;
    inline-size: 48px;
    block-size: 48px;
    display: grid;
    place-items: center;
    background: #fff;
    color: #24301c;
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}
.stage__nav--prev { inset-inline-start: 1.25rem; }
.stage__nav--next { inset-inline-end: 1.25rem; }
.stage__nav:hover { background: #6d8c3a; color: #fff; }
[dir="rtl"] .stage__nav svg { transform: scaleX(-1); }

.stage__dots {
    position: absolute;
    inset-block-end: 1.4rem;
    inset-inline: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: .45rem;
}
.stage__dot {
    inline-size: 9px;
    block-size: 9px;
    padding: 0;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.stage__dot.is-active { inline-size: 38px; background: rgba(255, 255, 255, .28); }
.stage__dot.is-active::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    background: #fff;
    animation: stage-fill 6.8s linear forwards;
}
@keyframes stage-fill { to { inline-size: 100%; } }

.look { padding-block: 4.5rem 1rem; }
.look__head { text-align: center; margin-block-end: 1.75rem; }
.look__head h2 {
    margin: .3rem 0 0;
    font-family: var(--f-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.look__grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 1rem;
    align-items: stretch;
}
.look__grid figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 22px;
    min-block-size: 340px;
    background: #efe6d4;
}
.look__grid img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    min-block-size: 340px;
}
.look__grid figcaption {
    position: absolute;
    inset-inline: .8rem;
    inset-block-end: .8rem;
    display: grid;
    padding: .7rem .9rem;
    border-radius: 14px;
    background: rgba(255, 253, 248, .92);
    color: #24301c;
}
.look__grid figcaption span { color: #6a655c; font-size: .85rem; }

@media (max-width: 800px) {
    .stage__nav { inline-size: 40px; block-size: 40px; }
    .stage__nav--prev { inset-inline-start: .6rem; }
    .stage__nav--next { inset-inline-end: .6rem; }
    .stage__title { font-size: 2.3rem; }
    .look__grid { grid-template-columns: 1fr; }
    .look__grid figure, .look__grid img { min-block-size: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .stage__slide { transition: none; }
    .stage__slide.is-active .stage__photo,
    .stage__slide.is-active .stage__copy > *,
    .stage__dot.is-active::after { animation: none; }
    .stage__copy > * { opacity: 1; transform: none; }
    .stage__photo { transform: none; }
}

/* Solid menu bar so items stay readable on light photos. */
.page-home .site-header::before,
.page-home .site-header.is-solid::before,
.page-home .site-header.is-over-hero:not(.is-solid)::before {
    clip-path: inset(0 0 0 0);
    background: #2c3324;
    border-block-end-color: transparent;
}
.page-home .site-header,
.page-home .site-header.is-solid,
.page-home .site-header.is-solid a,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid),
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) a,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .main-nav__link,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .header-phone small,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .header-phone strong,
.page-home .site-header .icon-btn {
    color: #f6f1e4;
}
.page-home .site-header .main-nav__link::after { background: #e2b656; }
.page-home .site-header .icon-btn { border-color: rgba(246, 241, 228, .28); }
.page-home .site-header .mega,
.page-home .site-header .mega a,
.page-home .site-header .mega .eyebrow,
.page-home .site-header .mega__product-name,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .mega,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .mega a,
.page-home .site-header .main-nav__sub,
.page-home .site-header .main-nav__sub a,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .main-nav__sub a {
    color: #2b2a26;
}
.page-home .mega__cat-thumb {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 12px;
    background: #f3eee4;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.page-home .mega__cat-thumb img { object-fit: contain; padding: 4px; }


/* Language menu: dark type on the cream panel, green for the current language. */
.site-header .lang-switch__menu,
.page-home .site-header .lang-switch__menu,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .lang-switch__menu {
    background: #fffdf8;
    color: #2b2a26;
    border: 1px solid #e6decc;
    box-shadow: 0 16px 40px rgba(36, 48, 28, .16);
}
.site-header .lang-switch__menu a,
.page-home .site-header .lang-switch__menu a,
.page-home .site-header.is-solid .lang-switch__menu a,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .lang-switch__menu a {
    color: #2b2a26;
}
.site-header .lang-switch__menu a:hover,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .lang-switch__menu a:hover {
    background: #e7efd4;
    color: #3d5424;
}
.site-header .lang-switch__menu a.is-active,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .lang-switch__menu a.is-active {
    background: #6d8c3a;
    color: #fffdf8;
}
.site-header .lang-switch__menu a.is-active::before,
.page-home .site-header.is-over-hero.on-dark:not(.is-solid) .lang-switch__menu a.is-active::before {
    color: #fffdf8;
}
.page-home .search-overlay,
.search-overlay {
    inset: auto;
    inset-block-start: 4.5rem;
    inset-inline-end: max(12px, calc((100vw - min(1320px, 100vw)) / 2 + 12px));
    inline-size: min(420px, calc(100vw - 24px));
    max-block-size: min(68vh, 460px);
    background: #fffdf8;
    color: #2b2a26;
    border: 1px solid #e4dcc8;
    border-radius: 18px;
    box-shadow: 0 22px 50px rgba(36, 48, 28, .18);
    overflow: auto;
    z-index: 140;
}
.search-overlay__inner { padding: .85rem .9rem 1rem; }
.search-overlay__form {
    gap: .55rem;
    border: 1px solid #d7d0c2;
    border-block-end: 1px solid #d7d0c2;
    border-radius: 12px;
    padding: .4rem .65rem;
    background: #fff;
}
.search-overlay__form svg { inline-size: 20px; block-size: 20px; flex: none; color: #6d8c3a; }
.search-overlay__form input {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 650;
    color: #2b2a26;
}
.search-overlay__form input::placeholder { color: #8a8478; font-weight: 500; }
.search-overlay__results { padding-block: .7rem .15rem; }
@media (max-width: 720px) {
    .search-overlay {
        inset-inline: 12px;
        inline-size: auto;
        inset-block-start: 4.2rem;
    }
}