/*
 * Heikaya v6.20.3 — FINAL PHONE-ONLY homepage refinements.
 *
 * This file is deliberately loaded after the older mobile/homepage styles so
 * these three final phone layouts cannot be overwritten by legacy rules:
 * 1) Egermann copy order: Featured Collection > title > description > button > video.
 * 2) Premium Instagram section redesign.
 * 3) Pre-footer benefits reorganized into icon | divider | copy rows.
 *
 * Desktop and tablet (768px+) are intentionally untouched.
 */

@media (max-width: 767px) {

    /* ==========================================================
       1) EGermann — COPY FIRST, VIDEO LAST
       Force the requested sequence even if older grid rules load.
       ========================================================== */
    html body.home section.lumiere-egermann-feature.heikaya-restored-egermann-feature {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "egermann-copy"
            "egermann-media" !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 24px 0 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    html body.home section.lumiere-egermann-feature.heikaya-restored-egermann-feature > .lumiere-egermann-feature__copy {
        grid-area: egermann-copy !important;
        order: -10 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 34px 22px 32px !important;
        background: #f7f2e9 !important;
        color: #15120f !important;
        text-align: left !important;
    }

    html body.home .lumiere-egermann-feature__copy > .lumiere-eyebrow {
        order: 1 !important;
        margin: 0 0 10px !important;
        color: #15120f !important;
        font-size: 9px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: .16em !important;
        text-transform: uppercase !important;
    }

    html body.home .lumiere-egermann-feature__copy > h2 {
        order: 2 !important;
        margin: 0 !important;
        color: #15120f !important;
        font-size: clamp(42px, 11vw, 54px) !important;
        line-height: .96 !important;
    }

    html body.home .lumiere-egermann-feature__copy > p:not(.lumiere-eyebrow) {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px 0 23px !important;
        color: #4e4943 !important;
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    html body.home .lumiere-egermann-feature__copy > .lumiere-button {
        order: 4 !important;
        margin: 0 !important;
    }

    html body.home section.lumiere-egermann-feature.heikaya-restored-egermann-feature > .lumiere-egermann-feature__media {
        grid-area: egermann-media !important;
        order: 10 !important;
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        aspect-ratio: 16 / 10 !important;
        overflow: hidden !important;
        background: #15120f !important;
    }

    html body.home .lumiere-egermann-feature__media > video,
    html body.home .lumiere-egermann-feature__media > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* ==========================================================
       2) INSTAGRAM — cleaner luxury editorial treatment
       Warm paper, centered hierarchy, compact profile CTA and a
       disciplined 2x2 image grid rather than a bulky phone carousel.
       ========================================================== */
    html body .lumiere-instagram {
        --ig-phone-ink: #15120f;
        --ig-phone-paper: #f7f2e9;
        --ig-phone-line: rgba(21, 18, 15, .14);
        width: 100% !important;
        margin: 0 !important;
        padding: 50px 16px 52px !important;
        overflow: hidden !important;
        background: #f7f2e9 !important;
        border-top: 1px solid var(--ig-phone-line) !important;
        color: var(--ig-phone-ink) !important;
    }

    html body .lumiere-instagram__inner {
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    html body .lumiere-instagram__heading {
        display: grid !important;
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        margin: 0 0 24px !important;
        text-align: center !important;
    }

    html body .lumiere-instagram__heading > div {
        width: 100% !important;
    }

    html body .lumiere-instagram__eyebrow {
        display: inline-flex !important;
        align-items: center !important;
        gap: 9px !important;
        margin: 0 0 9px !important;
        color: #6c6258 !important;
        font-size: 8.5px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        letter-spacing: .22em !important;
        text-transform: uppercase !important;
    }

    html body .lumiere-instagram__eyebrow::before,
    html body .lumiere-instagram__eyebrow::after {
        content: "" !important;
        display: block !important;
        width: 24px !important;
        height: 1px !important;
        background: rgba(21, 18, 15, .28) !important;
    }

    html body .lumiere-instagram h2 {
        max-width: 100% !important;
        margin: 0 !important;
        color: var(--ig-phone-ink) !important;
        font-family: "Cormorant Garamond", Georgia, serif !important;
        font-size: clamp(39px, 11vw, 50px) !important;
        font-weight: 500 !important;
        line-height: .94 !important;
        letter-spacing: -.025em !important;
    }

    html body .lumiere-instagram__profile {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 42px !important;
        margin: 17px 0 0 !important;
        padding: 0 18px !important;
        border: 1px solid #15120f !important;
        border-radius: 0 !important;
        background: #15120f !important;
        box-shadow: none !important;
        color: #fffdf9 !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .13em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
    }

    html body .lumiere-instagram__profile::after {
        content: "↗" !important;
        margin-left: 9px !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
    }

    html body .lumiere-instagram__gallery-row {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Remove the old decorative side rail on phone; the new heading is the visual anchor. */
    html body .lumiere-instagram__rail {
        display: none !important;
    }

    html body .lumiere-instagram__feed {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Owner-selected images. */
    html body .heikaya-instagram-custom-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html body .heikaya-instagram-custom-card {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(21, 18, 15, .10) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(31, 24, 16, .07) !important;
    }

    html body .heikaya-instagram-custom-card__media {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        border-radius: inherit !important;
        background: #eee8df !important;
    }

    html body .heikaya-instagram-custom-card img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
    }

    /* Instagram Feed plugin fallback — same visual language as custom images. */
    html body .lumiere-instagram #sb_instagram,
    html body .lumiere-instagram #sb_instagram #sbi_images {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body .lumiere-instagram #sb_instagram #sbi_images {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    html body .lumiere-instagram #sb_instagram #sbi_images .sbi_item {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(21, 18, 15, .10) !important;
        border-radius: 10px !important;
        background: #fff !important;
        box-shadow: 0 10px 24px rgba(31, 24, 16, .07) !important;
        scroll-snap-align: none !important;
        transform: none !important;
    }

    html body .lumiere-instagram #sb_instagram #sbi_images .sbi_item:nth-child(n+5) {
        display: none !important;
    }

    html body .lumiere-instagram #sb_instagram .sbi_photo_wrap,
    html body .lumiere-instagram #sb_instagram .sbi_photo {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: inherit !important;
    }

    html body .lumiere-instagram #sb_instagram .sbi_photo {
        background-size: cover !important;
        background-position: center !important;
    }

    html body .lumiere-instagram #sb_instagram .sbi_photo::after,
    html body .lumiere-instagram #sb_instagram #sbi_images .sbi_item::after {
        display: none !important;
    }

    /* ==========================================================
       3) BENEFITS — PATCHI-REFERENCE ORGANIZATION
       Same Heikaya dark palette, but each feature is now sorted as:
       icon | vertical divider | title + description.
       ========================================================== */
    html body .lumiere-benefits {
        width: 100% !important;
        margin: 0 !important;
        padding: 30px 22px 32px !important;
        background: #15120f !important;
        border-top: 1px solid rgba(255, 253, 249, .14) !important;
        border-bottom: 1px solid rgba(255, 253, 249, .14) !important;
        color: #fffdf9 !important;
    }

    html body .lumiere-benefits__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
    }

    html body .lumiere-benefit {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        column-gap: 28px !important;
        row-gap: 7px !important;
        align-items: start !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 126px !important;
        margin: 0 !important;
        padding: 23px 0 !important;
        text-align: left !important;
    }

    html body .lumiere-benefit:not(:last-child)::after {
        display: none !important;
    }

    /* The vertical divider from the reference image. */
    html body .lumiere-benefit::before {
        position: absolute !important;
        top: 18px !important;
        bottom: 18px !important;
        left: 77px !important;
        width: 1px !important;
        height: auto !important;
        content: "" !important;
        background: rgba(255, 253, 249, .54) !important;
    }

    html body .lumiere-benefit__icon,
    html body .lumiere-benefit__icon--image {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: center !important;
        justify-self: center !important;
        width: 46px !important;
        height: 46px !important;
        margin: 0 !important;
        color: #fffdf9 !important;
        transform: none !important;
    }

    html body .lumiere-benefit__icon--image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1) !important;
        opacity: .95 !important;
        transform: none !important;
    }

    html body .lumiere-benefit h3 {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: end !important;
        margin: 0 !important;
        color: #fffdf9 !important;
        font-family: Montserrat, Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: .085em !important;
        text-align: left !important;
        text-transform: uppercase !important;
    }

    html body .lumiere-benefit p {
        grid-column: 2 !important;
        grid-row: 2 !important;
        max-width: none !important;
        margin: 0 !important;
        color: rgba(255, 253, 249, .76) !important;
        font-family: Montserrat, Arial, sans-serif !important;
        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 1.58 !important;
        text-align: left !important;
        opacity: 1 !important;
    }
}