/*
 * EMOTIVE Homepage Geometry v8.1
 * Homepage-only spatial correction.
 * No colour, font, WooCommerce, footer or non-home rules.
 */

/* =========================================================
   HEADER SAFE ZONE
   ========================================================= */

body.home .emotive-site-header,
body.home .emotive-header-main,
body.home .emotive-header-inner {
    position: relative !important;
    z-index: 1000 !important;
}

body.home .emotive-header-inner {
    min-height: 112px !important;
    height: 112px !important;
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    overflow: visible !important;
}

body.home .emotive-main-nav {
    position: relative !important;
    z-index: 1002 !important;
    align-self: center !important;
}

body.home .emotive-brand-lockup,
body.home .emotive-brand-wrap,
body.home .emotive-header-brand {
    position: relative !important;
    z-index: 1003 !important;
    align-self: center !important;
    margin: 0 !important;
    transform: none !important;
}

body.home .emotive-header-actions {
    position: relative !important;
    z-index: 1003 !important;
    align-self: center !important;
    justify-self: end !important;
    transform: none !important;
}

/* =========================================================
   HERO STARTS BELOW HEADER
   ========================================================= */

body.home .emotive-clean-hero {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 24px !important;
    overflow: visible !important;
}

body.home .emotive-clean-hero-grid {
    align-items: start !important;
    overflow: visible !important;
}

body.home .emotive-clean-hero-copy {
    position: relative !important;
    z-index: 5 !important;
    padding-top: 12px !important;
    overflow: visible !important;
}

/* Keep the eyebrow in the hero copy, never inside the header */
body.home .emotive-clean-hero-copy > .emotive-clean-kicker {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* =========================================================
   COLLAGE — MOVE DOWN AS ONE UNIT
   ========================================================= */

body.home .emotive-clean-hero-collage {
    position: relative !important;
    top: 80px !important;
    margin-top: 0 !important;
    overflow: visible !important;
    z-index: 2 !important;
}

/* Keep the image slots exactly as a single composition */
body.home .emotive-clean-hero-slot {
    position: absolute !important;
    overflow: hidden !important;
}

/*
 * Small refinements only:
 * - retain overall proportions
 * - close centre notch slightly
 */
body.home .emotive-clean-hero-slot-1 {
    left: 9% !important;
    top: 2% !important;
    width: 43% !important;
    height: 52% !important;
}

body.home .emotive-clean-hero-slot-2 {
    left: 52% !important;
    top: 2% !important;
    width: 40% !important;
    height: 36% !important;
}

body.home .emotive-clean-hero-slot-3 {
    left: 6% !important;
    top: 46% !important;
    width: 53% !important;
    height: 39% !important;
}

body.home .emotive-clean-hero-slot-4 {
    left: 59% !important;
    top: 34% !important;
    width: 33% !important;
    height: 51% !important;
}

/* =========================================================
   NUMBER LABELS — TIGHTEN AGAINST COLLAGE
   ========================================================= */

body.home .emotive-clean-hero-label {
    position: absolute !important;
    z-index: 20 !important;
    overflow: visible !important;
}

/* left-side labels closer to images */
body.home .emotive-clean-hero-label-1 {
    left: 7.7% !important;
    top: 21% !important;
    transform: translateX(-100%) !important;
    text-align: right !important;
}

body.home .emotive-clean-hero-label-3 {
    left: 4.7% !important;
    top: 68% !important;
    transform: translateX(-100%) !important;
    text-align: right !important;
}

/* right-side labels pulled inward so they cannot clip */
body.home .emotive-clean-hero-label-2 {
    left: 93.2% !important;
    top: 7% !important;
    transform: none !important;
    text-align: left !important;
}

body.home .emotive-clean-hero-label-4 {
    left: 93% !important;
    top: 60% !important;
    transform: none !important;
    text-align: left !important;
}

/* =========================================================
   DESKTOP HERO HEIGHT
   Leave enough room for the collage after shifting it down.
   ========================================================= */

@media (min-width: 1101px) {
    body.home .emotive-clean-hero {
        min-height: 760px !important;
        padding-bottom: 78px !important;
    }

    body.home .emotive-clean-hero-collage {
        min-height: 560px !important;
        height: 560px !important;
    }
}

/* =========================================================
   TABLET / MOBILE
   Do not force the desktop 80px offset on stacked layouts.
   ========================================================= */

@media (max-width: 1100px) {
    body.home .emotive-header-inner {
        height: auto !important;
        min-height: 92px !important;
    }

    body.home .emotive-clean-hero-collage {
        top: 24px !important;
        margin-bottom: 24px !important;
    }
}

@media (max-width: 700px) {
    body.home .emotive-header-inner {
        min-height: 78px !important;
    }

    body.home .emotive-clean-hero {
        padding-top: 12px !important;
    }

    body.home .emotive-clean-hero-collage {
        top: 12px !important;
    }
}

/* === FINAL HERO SPACING TIGHTENING === */

@media (min-width:1101px){

    body.home .emotive-clean-hero-grid{
        grid-template-columns:520px 760px !important;
        column-gap:24px !important;
        justify-content:center !important;
    }

    body.home .emotive-clean-hero-collage{
        transform:translateX(-18px) !important;
    }

}

/* === FINAL COLLAGE POSITIONING === */

@media (min-width:1101px){

    body.home .emotive-clean-hero-collage{
        width:690px !important;
        height:520px !important;

        transform:translateX(-42px) !important;
        top:34px !important;
    }

    /* 01 FLOW */
    body.home .emotive-clean-hero-slot-1{
        left:46px !important;
        top:54px !important;

        width:220px !important;
        height:286px !important;

        z-index:12 !important;
    }

    /* 02 SWELL */
    body.home .emotive-clean-hero-slot-2{
        left:244px !important;
        top:18px !important;

        width:330px !important;
        height:220px !important;

        z-index:8 !important;
    }

    /* 03 ROAM */
    body.home .emotive-clean-hero-slot-3{
        left:12px !important;
        top:320px !important;

        width:390px !important;
        height:176px !important;

        z-index:7 !important;
    }

    /* 04 YOGA */
    body.home .emotive-clean-hero-slot-4{
        left:392px !important;
        top:198px !important;

        width:200px !important;
        height:300px !important;

        z-index:13 !important;
    }

    /* LABEL 01 */
    body.home .emotive-clean-hero-label-1{
        left:20px !important;
        top:148px !important;
    }

    /* LABEL 02 */
    body.home .emotive-clean-hero-label-2{
        left:590px !important;
        top:76px !important;
    }

    /* LABEL 03 */
    body.home .emotive-clean-hero-label-3{
        left:-10px !important;
        top:374px !important;
    }

    /* LABEL 04 */
    body.home .emotive-clean-hero-label-4{
        left:604px !important;
        top:350px !important;
    }

}

/* === SHIFT ENTIRE HERO COLLAGE RIGHT === */

@media (min-width:1101px){

    body.home .emotive-clean-hero-collage{
        transform:translateX(38px) !important;
    }

}

/* === HERO COLLAGE SHIFT RIGHT - ROUND 2 === */
@media (min-width:1101px){
  body.home .emotive-clean-hero-collage{
    transform: translateX(72px) !important;
  }
}

/* ==========================================================
   HERO FINAL TWO-SIDED POSITIONING
   Left copy moves left.
   Complete collage + 01/02/03/04 moves right.
   ========================================================== */

@media (min-width:1101px){

    /* LEFT SIDE — heading, description, button, categories */
    body.home .emotive-clean-hero-copy{
        transform:translateX(-48px) !important;
    }

    /* RIGHT SIDE — entire image collage AND numbered labels */
    body.home .emotive-clean-hero-collage{
        transform:translateX(140px) !important;
    }

}

/* === ENLARGE COMPLETE HERO COLLAGE === */

@media (min-width:1101px){

    body.home .emotive-clean-hero-collage{
        transform: translateX(115px) scale(1.20) !important;
        transform-origin: center center !important;
    }

}


/* === HERO META FONT +2PT === */
body.home .emotive-clean-meta span{
    font-size:10.67px !important;
}

/* === BUILD YOURS FINAL IMAGES === */

body.home .emotive-clean-placeholder-stage .emotive-clean-slot{
    overflow:hidden !important;
}

body.home .emotive-clean-placeholder-stage .emotive-clean-slot img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}


/* === BUILD YOURS FINAL POSITIONING === */

@media (min-width:1101px){

    /* Move complete image collage about 5% right */
    body.home .emotive-clean-placeholder-stage{
        transform:translateX(5%) !important;
    }

    /* 01 — left of VOLT image */
    body.home .emotive-clean-label-1{
        left:8% !important;
        top:15% !important;
        transform:translateX(-100%) !important;
        text-align:right !important;
        z-index:20 !important;
    }

    /* 02 — right of Yoga image */
    body.home .emotive-clean-label-2{
        left:98% !important;
        top:15% !important;
        transform:none !important;
        text-align:left !important;
        z-index:20 !important;
    }

    /* 03 — left of Flow image */
    body.home .emotive-clean-label-3{
        left:8% !important;
        top:69% !important;
        transform:translateX(-100%) !important;
        text-align:right !important;
        z-index:20 !important;
    }

    /* 04 — right of Socks image */
    body.home .emotive-clean-label-4{
        left:97% !important;
        top:76% !important;
        transform:none !important;
        text-align:left !important;
        z-index:20 !important;
    }
}