/* Unified Archive Hero — commerce-first cover with a compact overlay. */
.product-archive-title .archive-description:has(.lemont-archive-hero) {
    max-width: none;
    margin: 0;
}

.lemont-archive-hero {
    --archive-ink: #29211d;
    --archive-paper: #f8f3ec;
    --archive-muted: #806d5e;
    --archive-line: #e5d9cb;
    position: relative;
    height: clamp(360px, 31vw, 460px);
    margin: 0;
    overflow: hidden;
    color: var(--archive-paper);
    background: #40362f;
    text-align: left;
}

.lemont-archive-hero *,
.lemont-archive-hero *::before {
    box-sizing: border-box;
}

.lemont-archive-hero__media,
.lemont-archive-hero__image {
    width: 100%;
    height: 100%;
}

.lemont-archive-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #d6c6b4;
}

.woocommerce .lemont-archive-hero__image {
    display: block;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: var(--lemont-cover-position, center center);
}

.lemont-archive-hero__content {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    inset: 0 auto 0 0;
    width: min(48rem, 62%);
    min-height: 0;
    max-width: none;
    padding: clamp(2.5rem, 5vw, 5rem);
}

.lemont-archive-hero__content::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    content: '';
    pointer-events: none;
    background: linear-gradient(90deg, rgba(23, 18, 15, .61) 0%, rgba(23, 18, 15, .37) 64%, transparent 100%);
}

.lemont-archive-hero__title {
    max-width: 13ch;
    margin: 0;
    color: inherit;
    font-family: "Playfair Display", "Playfair-fallback", serif;
    font-size: clamp(3rem, 4.2vw, 3.75rem);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.05;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.lemont-archive-hero__description {
    display: -webkit-box;
    max-width: 34rem;
    margin: 1rem 0 0;
    overflow: hidden;
    color: inherit;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.lemont-archive-hero--text-only {
    min-height: 0;
    margin-block: clamp(1.5rem, 4vw, 3rem);
    overflow: visible;
    color: var(--archive-ink);
    background: var(--archive-paper);
    border-block: 1px solid var(--archive-line);
}

.lemont-archive-hero--text-only .lemont-archive-hero__content {
    position: relative;
    display: block;
    max-width: 78rem;
    min-height: 0;
    padding: clamp(2rem, 4vw, 4rem);
    margin-inline: auto;
}

.lemont-archive-hero--text-only .lemont-archive-hero__content::before {
    display: none;
}

.lemont-archive-hero--text-only .lemont-archive-hero__title {
    max-width: 18ch;
}

.lemont-archive-hero--text-only .lemont-archive-hero__description {
    color: var(--archive-muted);
}

.lemont-archive-seo {
    max-width: 58rem;
    padding: clamp(2.5rem, 5vw, 4.5rem) 0;
    margin: 0 auto;
    color: var(--archive-ink);
    font-size: 1rem;
    line-height: 1.75;
}

.lemont-archive-seo p { margin: 0 0 1rem; }
.lemont-archive-seo p:last-child { margin-bottom: 0; }

/* Shop only: Kadence owns the full-width archive wrapper. WooCommerce emits
   the dynamic Shop cover lower in the document, then the small head script in
   archive-hero.php moves it here. Keep the native shell hidden until that
   hand-off finishes so customers never see its former blank taupe band. */
body.woocommerce-shop .entry-hero.product-archive-hero-section {
    display: none;
}

html.lemont-shop-hero-ready body.woocommerce-shop .entry-hero.product-archive-hero-section {
    display: block;
    min-height: 0;
    margin: 0;
    background: transparent;
}

html.lemont-shop-hero-ready body.woocommerce-shop .entry-hero.product-archive-hero-section .entry-hero-container-inner,
html.lemont-shop-hero-ready body.woocommerce-shop .entry-hero.product-archive-hero-section .hero-container,
html.lemont-shop-hero-ready body.woocommerce-shop .entry-hero.product-archive-hero-section .entry-header {
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 0;
    margin: 0;
}

html.lemont-shop-hero-ready body.woocommerce-shop .entry-hero.product-archive-hero-section .hero-section-overlay {
    display: none;
}

html.lemont-shop-hero-ready body.woocommerce-shop .entry-hero.product-archive-hero-section .entry-header > .lemont-archive-hero {
    width: 100% !important;
    margin: 0 !important;
    background: #40362f !important;
}

/* Kadence changes to its compact header before 768px on this storefront. The
   archive must use the compact overlay treatment through tablet too, otherwise
   768–1023px receives an oversized desktop title in the wrong composition. */
@media (max-width: 1023px) {
    .lemont-archive-hero {
        width: 100vw;
        height: clamp(210px, 55vw, 260px);
        min-height: 0;
        margin-left: calc(50% - 50vw);
        overflow: hidden;
    }

    .lemont-archive-hero__media {
        width: 100%;
        height: 100%;
        margin-left: 0;
    }

    .lemont-archive-hero__content {
        justify-content: flex-end;
        inset: 0;
        width: 100%;
        min-height: 100%;
        max-width: none;
        padding: 20px;
    }

    .lemont-archive-hero__content::before {
        inset: 0;
        width: 100%;
        background: linear-gradient(90deg, rgba(20, 16, 13, .52) 0%, rgba(20, 16, 13, .24) 56%, rgba(20, 16, 13, .02) 100%), linear-gradient(0deg, rgba(20, 16, 13, .22) 0%, transparent 58%);
    }

    .lemont-archive-hero__title {
        max-width: 11ch;
        font-size: clamp(32px, 9vw, 40px);
        line-height: 1.05;
    }

    .lemont-archive-hero__description {
        max-width: 19rem;
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.55;
        -webkit-line-clamp: 2;
    }

    .lemont-archive-hero--text-only {
        min-height: 0;
        margin: 1.25rem 0;
    }

    .lemont-archive-hero--text-only .lemont-archive-hero__content {
        padding: 24px 20px;
    }

    .lemont-archive-hero--text-only .lemont-archive-hero__title {
        max-width: none;
        font-size: clamp(34px, 9vw, 42px);
    }

    .lemont-archive-seo {
        padding: 2rem 1.25rem;
        font-size: .96rem;
    }
}