/*
 * EMOTIVE LAYOUT PREVIEW
 * Only loaded with ?emotive_preview=1
 *
 * Goal:
 * - improve normal 100% desktop composition
 * - preserve approved hero styling
 * - avoid affecting live production
 */


/* =========================================================
   DESKTOP — 1101PX+
   ========================================================= */

@media (min-width:1101px) {

    /* Keep the approved upward hero position */
    body.home .emotive-home-reference-hero {
        margin-top:-55px !important;

        /*
         * Replace accumulated compressed geometry with a
         * calmer 42 / 58 split.
         */
        grid-template-columns:42% 58% !important;

        width:100% !important;
        min-height:0 !important;
        align-items:stretch !important;
    }

    body.home .emotive-home-reference-copy {
        min-width:0 !important;
        min-height:0 !important;
    }

    body.home .emotive-home-reference-copy-inner {
        min-width:0 !important;

        padding-left:56px !important;
        padding-right:48px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
    }

    /* Stop the collage being artificially pulled left */
    body.home .emotive-home-reference-collage {
        margin-left:0 !important;
        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;

        display:flex !important;
        align-items:stretch !important;

        overflow:hidden !important;
    }

    body.home .emotive-home-reference-collage img {
        display:block !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        aspect-ratio:auto !important;

        object-fit:contain !important;
        object-position:center center !important;
    }

    /* Supporting hero typography */
    body.home .emotive-home-reference-eyebrow {
        font-size:16px !important;
    }

    body.home .emotive-home-reference-intro {
        font-size:21px !important;
    }

    body.home .emotive-home-reference-cta,
    body.home .emotive-home-reference-cta span:not(.emotive-home-reference-arrow) {
        font-size:16px !important;
    }

    body.home .emotive-home-reference-footer,
    body.home .emotive-home-reference-footer span {
        font-size:13px !important;
    }


    /* ---------- ABOUT ---------- */

    body.home .emotive-clean-about {
        padding-top:90px !important;
        padding-bottom:90px !important;
    }

    body.home .emotive-clean-about-grid {
        display:block !important;

        width:min(100% - 80px, 1100px) !important;
        max-width:1100px !important;

        margin:0 auto !important;

        text-align:center !important;
    }

    body.home .emotive-clean-about-grid > div {
        width:100% !important;
        max-width:1000px !important;

        margin:0 auto !important;
    }

    body.home .emotive-clean-about h2 {
        max-width:1000px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
    }

    body.home .emotive-clean-about-grid > div > p {
        max-width:820px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        font-size:20px !important;
        line-height:1.55 !important;

        text-align:center !important;
    }


    /* ---------- SOLO / CUSTOM MIX ---------- */

    .emotive-mix-showcase {
        padding-left:24px !important;
        padding-right:24px !important;
    }

    .emotive-mix-stage {
        max-width:1460px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .emotive-mix-copy-solo {
        left:9.3% !important;
        top:67.4% !important;
        width:30% !important;
    }

    .emotive-mix-copy-custom {
        position:absolute !important;

        left:50.7% !important;
        top:77.2% !important;

        width:37% !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;

        padding:0 !important;

        background:transparent !important;
        box-shadow:none !important;
    }

    .emotive-mix-button,
    .emotive-mix-copy-custom .emotive-mix-text-link {
        width:100% !important;
        max-width:445px !important;
        min-height:65px !important;
    }
}


/* =========================================================
   TABLET — 701PX TO 1100PX
   ========================================================= */

@media (min-width:701px) and (max-width:1100px) {

    body.home .emotive-home-reference-hero {
        grid-template-columns:44% 56% !important;
        min-height:0 !important;
    }

    body.home .emotive-home-reference-copy-inner {
        padding:46px 30px 42px !important;
    }

    body.home .emotive-home-reference-title {
        font-size:clamp(48px, 6vw, 66px) !important;
    }

    body.home .emotive-home-reference-intro {
        font-size:18px !important;
    }

    body.home .emotive-home-reference-collage,
    body.home .emotive-home-reference-collage img {
        min-height:0 !important;
        height:auto !important;
    }

    body.home .emotive-home-reference-collage img {
        width:100% !important;
        object-fit:contain !important;
        object-position:center !important;
    }

    body.home .emotive-clean-about {
        padding:72px 0 !important;
    }

    body.home .emotive-clean-about-grid {
        display:block !important;

        width:min(100% - 48px, 900px) !important;

        margin:0 auto !important;

        text-align:center !important;
    }

    body.home .emotive-clean-about-grid > div > p {
        max-width:760px !important;

        margin-left:auto !important;
        margin-right:auto !important;

        text-align:center !important;
    }
}


/* =========================================================
   MOBILE — 700PX AND BELOW
   ========================================================= */

@media (max-width:700px) {

    /* Header */
    .emotive-site-header .emotive-header-inner {
        min-height:68px !important;
        height:68px !important;

        padding:0 14px !important;

        display:grid !important;
        grid-template-columns:auto 1fr auto !important;

        align-items:center !important;
    }

    .emotive-site-header .emotive-main-nav {
        display:none !important;
    }

    .emotive-site-header .emotive-brand-lockup {
        grid-column:1 !important;
        justify-self:start !important;

        align-items:flex-start !important;
    }

    .emotive-site-header .emotive-header-actions {
        grid-column:3 !important;
        justify-self:end !important;
    }

    .emotive-site-header .emotive-mobile-menu-toggle {
        display:inline-flex !important;
    }


    /* Hero */
    body.home .emotive-home-reference-hero {
        display:flex !important;
        flex-direction:column !important;

        margin-top:0 !important;

        min-height:0 !important;
    }

    body.home .emotive-home-reference-copy-inner {
        padding:42px 22px 34px !important;
    }

    body.home .emotive-home-reference-eyebrow {
        font-size:14px !important;
    }

    body.home .emotive-home-reference-title {
        font-size:clamp(46px, 14vw, 66px) !important;
        line-height:.86 !important;
    }

    body.home .emotive-home-reference-intro {
        margin-top:26px !important;

        font-size:18px !important;
        line-height:1.45 !important;
    }

    body.home .emotive-home-reference-cta {
        width:100% !important;
        max-width:none !important;

        min-height:58px !important;
    }

    body.home .emotive-home-reference-footer {
        margin-top:32px !important;

        grid-template-columns:28px repeat(2,auto) !important;
        gap:12px 16px !important;

        font-size:11px !important;
    }

    body.home .emotive-home-reference-footer span:nth-child(4),
    body.home .emotive-home-reference-footer span:nth-child(5) {
        display:none !important;
    }

    body.home .emotive-home-reference-collage {
        min-height:0 !important;
        height:auto !important;
    }

    body.home .emotive-home-reference-collage img {
        display:block !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        aspect-ratio:auto !important;

        object-fit:contain !important;
        object-position:center !important;
    }


    /* About */
    body.home .emotive-clean-about {
        padding:58px 20px !important;
    }

    body.home .emotive-clean-about-grid {
        display:block !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 auto !important;

        text-align:center !important;
    }

    body.home .emotive-clean-about-grid > div {
        width:100% !important;
    }

    body.home .emotive-clean-about h2 {
        font-size:clamp(42px, 12vw, 58px) !important;

        text-align:center !important;
    }

    body.home .emotive-clean-about-grid > div > p {
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        font-size:18px !important;
        line-height:1.55 !important;

        text-align:center !important;
    }


    /* Solo / Custom Mix */
    .emotive-mix-showcase {
        padding:56px 16px 64px !important;
    }

    .emotive-mix-intro h2 {
        font-size:clamp(40px, 11vw, 54px) !important;
        line-height:1 !important;
    }

    .emotive-mix-description {
        font-size:16px !important;
        line-height:1.5 !important;
    }

    .emotive-mix-stage {
        display:flex !important;
        flex-direction:column !important;

        aspect-ratio:auto !important;

        margin-top:34px !important;
    }

    .emotive-mix-collage {
        position:relative !important;

        width:100% !important;
        height:auto !important;
    }

    .emotive-mix-label,
    .emotive-mix-copy-solo,
    .emotive-mix-copy-custom {
        position:static !important;

        top:auto !important;
        left:auto !important;

        width:100% !important;
        height:auto !important;
    }

    .emotive-mix-label-solo {
        order:2 !important;

        padding:20px 20px 0 !important;

        background:transparent !important;
    }

    .emotive-mix-copy-solo {
        order:3 !important;

        padding:10px 20px 24px !important;

        background:transparent !important;
    }

    .emotive-mix-label-custom {
        order:4 !important;

        padding:24px 20px 0 !important;

        background:transparent !important;
    }

    .emotive-mix-copy-custom {
        order:5 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;

        padding:10px 20px 28px !important;

        background:transparent !important;
    }

    .emotive-mix-copy-solo h3,
    .emotive-mix-copy-custom h3 {
        font-size:40px !important;
    }

    .emotive-mix-button,
    .emotive-mix-copy-custom .emotive-mix-text-link {
        width:100% !important;
        max-width:none !important;

        min-height:58px !important;
    }
}


/* =========================================================
   PREVIEW — DESKTOP HERO BALANCE
   ========================================================= */

@media (min-width:1101px) {

    body.home .emotive-home-reference-copy-inner {
        justify-content:flex-start !important;
        padding-top:72px !important;
        padding-bottom:54px !important;
    }

    body.home .emotive-home-reference-title {
        font-size:clamp(68px, 5.4vw, 94px) !important;
        line-height:.83 !important;
    }

    body.home .emotive-home-reference-collage {
        align-self:start !important;
        margin-top:72px !important;
    }

    body.home .emotive-home-reference-collage img {
        align-self:start !important;
    }

}


/* =========================================================
   PREVIEW — HORIZONTAL OVERFLOW FIX
   Nothing on the homepage may exceed the viewport.
   ========================================================= */

/* Correct width calculations */
html,
body,
body.home,
body.home * {
    box-sizing:border-box;
}

/* Safety guard — page itself must never become wider */
html,
body {
    max-width:100%;
    overflow-x:clip;
}

body.home {
    width:100%;
    max-width:100%;
}


/* =========================================================
   HEADER CONTAINMENT
   ========================================================= */

body.home .emotive-site-header,
body.home .emotive-header-main,
body.home .emotive-header-inner {
    max-width:100% !important;
}


/* =========================================================
   HERO — FIX THE ACTUAL OVERFLOW SOURCE
   ========================================================= */

@media (min-width:1101px) {

    body.home .emotive-home-reference-hero {
        width:100% !important;
        max-width:100% !important;

        /*
         * minmax(0, ...) prevents either grid column
         * from forcing the page wider than the viewport.
         */
        grid-template-columns:
            minmax(0, 42%)
            minmax(0, 58%) !important;

        column-gap:0 !important;
        gap:0 !important;

        overflow:hidden !important;
    }

    body.home .emotive-home-reference-copy,
    body.home .emotive-home-reference-copy-inner,
    body.home .emotive-home-reference-collage {
        min-width:0 !important;
        max-width:100% !important;
    }

    body.home .emotive-home-reference-collage {
        width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    body.home .emotive-home-reference-collage img {
        display:block !important;

        width:100% !important;
        max-width:100% !important;
        height:auto !important;

        margin:0 !important;
        padding:0 !important;
    }
}


/* =========================================================
   OTHER HOMEPAGE SECTIONS
   ========================================================= */

body.home .emotive-clean-about,
body.home .emotive-clean-about-grid,
body.home .emotive-mix-showcase,
body.home .emotive-mix-stage {
    max-width:100% !important;
}

body.home img {
    max-width:100%;
}


/* =========================================================
   SOLO / CUSTOM MIX — BUTTON COLOUR + ALIGNMENT
   ========================================================= */

@media (min-width:1001px) {

    /* Shared button appearance */
    .emotive-mix-button,
    .emotive-mix-copy-custom .emotive-mix-text-link {
        width:100% !important;
        max-width:430px !important;
        min-height:72px !important;

        margin:0 !important;
        padding:0 34px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        background:#5A4338 !important;

        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;

        color:#fff !important;
        -webkit-text-fill-color:#fff !important;

        text-decoration:none !important;
    }

    /* SOLO block */
    .emotive-mix-copy-solo {
        left:9.3% !important;
        top:66.5% !important;

        width:30% !important;
        max-width:430px !important;
    }

    .emotive-mix-copy-solo h3 {
        margin:0 0 8px !important;
    }

    .emotive-mix-copy-solo p {
        margin:0 0 18px !important;
    }

    /* CUSTOM MIX block */
    .emotive-mix-copy-custom {
        left:52% !important;
        top:73.5% !important;

        width:34% !important;
        max-width:430px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
    }

    .emotive-mix-copy-custom h3 {
        margin:0 0 16px !important;
    }

    /* Ensure exact same button width */
    .emotive-mix-copy-custom .emotive-mix-text-link {
        max-width:none !important;
    }

    /* Arrow alignment */
    .emotive-mix-button span:last-child,
    .emotive-mix-copy-custom .emotive-mix-text-link span:last-child {
        margin-left:auto !important;
        padding-left:24px !important;

        font-size:22px !important;
        letter-spacing:0 !important;
    }
}


/* =========================================================
   EMOTIVE HOMEPAGE CTA REVISION
   Unified: Explore Collection / Shop Solo / Build Your Mix
   ========================================================= */

@media (min-width:761px) {

    body.home .emotive-home-reference-cta,
    body.home .emotive-mix-button,
    body.home .emotive-mix-text-link,
    body.home .emotive-mix-copy-custom .emotive-mix-text-link {

        width:300px !important;
        max-width:300px !important;
        min-width:300px !important;

        min-height:52px !important;
        height:52px !important;

        box-sizing:border-box !important;

        padding:0 24px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;

        background:#332219 !important;
        background-color:#332219 !important;

        color:#FFFFFF !important;
        -webkit-text-fill-color:#FFFFFF !important;

        border:0 !important;
        border-radius:0 !important;

        box-shadow:none !important;

        font-family:Inter,Arial,Helvetica,sans-serif !important;
        font-size:12px !important;
        font-weight:500 !important;
        line-height:1 !important;
        letter-spacing:.18em !important;

        text-transform:uppercase !important;
        text-decoration:none !important;
    }


    body.home .emotive-home-reference-cta span,
    body.home .emotive-mix-button span,
    body.home .emotive-mix-text-link span {

        color:#FFFFFF !important;
        -webkit-text-fill-color:#FFFFFF !important;

        font-family:Inter,Arial,Helvetica,sans-serif !important;
        font-size:12px !important;
        font-weight:500 !important;
        line-height:1 !important;
        letter-spacing:.18em !important;
    }


    body.home .emotive-home-reference-arrow,
    body.home .emotive-mix-button span:last-child,
    body.home .emotive-mix-text-link span:last-child {

        font-size:20px !important;
        font-weight:400 !important;
        letter-spacing:0 !important;
        line-height:1 !important;
    }


    body.home .emotive-home-reference-cta:hover,
    body.home .emotive-mix-button:hover,
    body.home .emotive-mix-text-link:hover {

        background:#594439 !important;
        background-color:#594439 !important;

        color:#FFFFFF !important;
        -webkit-text-fill-color:#FFFFFF !important;
    }
}