
/*
 * EMOTIVE Final Theme v5
 * This file is intentionally loaded last.
 */

:root {
    --emotive-bg: #F3EDE3;
    --emotive-bg-2: #E9DDCC;
    --emotive-ink: #090909;
    --emotive-brown: #2A1B14;
    --emotive-muted: #66594F;
    --emotive-line: #D4C6B4;
    --emotive-white: #FFFFFF;
}

/* =========================================================
   GLOBAL SITE
   ========================================================= */

html,
body,
.wp-site-blocks,
main,
.site-main,
body.page,
body.archive,
body.single,
body.blog,
body.search,
body.single-product,
body.woocommerce-page {
    background: var(--emotive-bg) !important;
    color: var(--emotive-ink) !important;
}

.entry-content,
.wp-block-post-content,
.wp-block-group,
.woocommerce,
.woocommerce-page main,
.single-product main {
    background: transparent !important;
}

body,
p,
li,
dt,
dd,
label,
input,
textarea,
select {
    color: var(--emotive-ink);
}

h1,h2,h3,h4,h5,h6 {
    color: var(--emotive-brown) !important;
}

a {
    color: var(--emotive-ink);
}

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

.emotive-site-header,
.emotive-header-main,
.emotive-header-inner,
header.wp-block-template-part {
    background: var(--emotive-bg) !important;
}

.emotive-site-header .emotive-main-nav a,
.emotive-site-header .emotive-main-nav a:link,
.emotive-site-header .emotive-main-nav a:visited,
.emotive-site-header .emotive-nav-item > a,
.emotive-site-header .emotive-dropdown-title,
.emotive-site-header .emotive-home-nav-link {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 1 !important;
    text-shadow:
        0 1px 0 rgba(255,255,255,.72),
        0 -1px 0 rgba(0,0,0,.18),
        0 1px 2px rgba(0,0,0,.08) !important;
}

.emotive-site-header .emotive-brand-word,
.emotive-site-header .emotive-brand-lockup,
.emotive-site-header .emotive-brand-lockup *,
.emotive-site-header .site-title,
.emotive-site-header .site-description {
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    opacity:1 !important;
}

.emotive-site-header .emotive-header-actions a,
.emotive-site-header .emotive-header-actions button,
.emotive-site-header .emotive-header-icon {
    color:#000 !important;
    opacity:1 !important;
}

.emotive-site-header svg,
.emotive-site-header svg * {
    color:#000 !important;
    opacity:1 !important;
}

.emotive-site-header svg path,
.emotive-site-header svg circle,
.emotive-site-header svg line,
.emotive-site-header svg polyline,
.emotive-site-header svg rect {
    stroke:#000 !important;
    stroke-opacity:1 !important;
}

.emotive-site-header svg [fill]:not([fill="none"]):not([fill="transparent"]) {
    fill:#000 !important;
}

.emotive-site-header .emotive-cart-count {
    background:#000 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border-color:#000 !important;
}

/* =========================================================
   STANDARD PAGE LAYOUT
   ========================================================= */

body.page main,
body.blog main,
body.single-post main,
body.search main {
    color:var(--emotive-ink) !important;
}

body.page .entry-content,
body.blog .entry-content,
body.single-post .entry-content {
    max-width:1180px;
    margin-inline:auto;
}

body.page h1,
body.blog h1,
body.single-post h1 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-weight:400 !important;
    letter-spacing:-.035em !important;
}

/* =========================================================
   BUTTONS / FORMS
   ========================================================= */

.wp-element-button,
.emotive-clean-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.single_add_to_cart_button,
input[type="submit"] {
    background:var(--emotive-brown) !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border-color:var(--emotive-brown) !important;
    border-radius:0 !important;
}

.wp-element-button:hover,
.emotive-clean-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover {
    background:#000 !important;
    color:#fff !important;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background:rgba(255,255,255,.20) !important;
    color:var(--emotive-ink) !important;
    border:1px solid var(--emotive-line) !important;
    border-radius:0 !important;
}

/* =========================================================
   WOOCOMMERCE
   ========================================================= */

.woocommerce ul.products li.product,
.woocommerce div.product,
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
    background:transparent !important;
    color:var(--emotive-ink) !important;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color:var(--emotive-brown) !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background:rgba(255,255,255,.24) !important;
    color:var(--emotive-ink) !important;
    border-color:var(--emotive-line) !important;
}

/* =========================================================
   HOME - SEAMLESS
   ========================================================= */

body.home,
body.home .wp-site-blocks,
body.home .emotive-clean-home,
body.home .emotive-clean-hero,
body.home .emotive-clean-about,
body.home .emotive-clean-build {
    background:var(--emotive-bg) !important;
}

body.home .emotive-clean-about,
body.home .emotive-clean-build,
body.home .emotive-clean-about::before,
body.home .emotive-clean-build::before {
    border:0 !important;
    box-shadow:none !important;
}

body.home .emotive-clean-about::before,
body.home .emotive-clean-build::before {
    display:none !important;
}

body.home .emotive-clean-shell {
    width:min(1320px, calc(100% - 64px)) !important;
    max-width:1320px !important;
    margin-inline:auto !important;
}

/* =========================================================
   HOME HERO
   ========================================================= */

body.home .emotive-clean-hero {
    min-height:690px !important;
    padding:42px 0 78px !important;
    overflow:visible !important;
}

body.home .emotive-clean-hero-grid {
    display:grid !important;
    grid-template-columns:minmax(390px,.78fr) minmax(650px,1.22fr) !important;
    gap:70px !important;
    align-items:start !important;
    overflow:visible !important;
}

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

/* Top of F fix */
body.home .emotive-clean-hero h1 {
    margin:0 0 30px !important;
    padding:.12em 0 .04em !important;
    overflow:visible !important;
    max-width:600px !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:clamp(66px,5.1vw,90px) !important;
    font-weight:400 !important;
    line-height:.98 !important;
    letter-spacing:-.045em !important;
}

body.home .emotive-clean-kicker {
    margin:0 0 22px !important;
    letter-spacing:.34em !important;
    font-size:11px !important;
}

body.home .emotive-clean-lead {
    max-width:510px !important;
    margin:0 0 30px !important;
    font-size:16px !important;
    line-height:1.6 !important;
}

body.home .emotive-clean-button {
    display:inline-flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    min-width:296px !important;
    gap:48px !important;
    padding:20px 24px !important;
    text-decoration:none !important;
}

body.home .emotive-clean-meta {
    display:flex !important;
    gap:34px !important;
    max-width:430px !important;
    margin-top:34px !important;
    padding-top:18px !important;
    border-top:1px solid var(--emotive-line) !important;
}

body.home .emotive-clean-meta span {
    font-size:8px !important;
    letter-spacing:.25em !important;
    color:var(--emotive-muted) !important;
}

/* =========================================================
   HERO COLLAGE
   ========================================================= */

body.home .emotive-clean-hero-collage {
    position:relative !important;
    width:100% !important;
    height:590px !important;
    min-height:590px !important;
    margin-top:8px !important;
    overflow:visible !important;
}

body.home .emotive-clean-hero-slot {
    position:absolute !important;
    overflow:hidden !important;
}

body.home .emotive-clean-hero-slot-1 {
    left:9% !important;
    top:4% !important;
    width:42% !important;
    height:53% !important;
}

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

body.home .emotive-clean-hero-slot-3 {
    left:3% !important;
    top:48% !important;
    width:55% !important;
    height:35% !important;
}

body.home .emotive-clean-hero-slot-4 {
    left:60% !important;
    top:36% !important;
    width:32% !important;
    height:47% !important;
}

body.home .emotive-clean-placeholder {
    width:100% !important;
    height:100% !important;
    background:var(--emotive-bg-2) !important;
    border:1px dashed rgba(42,27,20,.22) !important;
    position:relative !important;
    display:grid !important;
    place-items:center !important;
}

body.home .emotive-clean-placeholder::before,
body.home .emotive-clean-placeholder::after {
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
}

body.home .emotive-clean-placeholder::before {
    background:linear-gradient(to bottom right, transparent 49.85%, rgba(42,27,20,.10) 50%, transparent 50.15%) !important;
}

body.home .emotive-clean-placeholder::after {
    background:linear-gradient(to top right, transparent 49.85%, rgba(42,27,20,.10) 50%, transparent 50.15%) !important;
}

body.home .emotive-clean-placeholder span {
    z-index:2 !important;
    padding:10px 14px !important;
    background:rgba(243,237,227,.93) !important;
    font-size:8px !important;
    letter-spacing:.22em !important;
    color:var(--emotive-muted) !important;
}

/* clickable labels */
body.home .emotive-clean-hero-label,
body.home .emotive-clean-label {
    position:absolute !important;
    z-index:20 !important;
    width:78px !important;
    text-decoration:none !important;
    color:var(--emotive-brown) !important;
    transform:none !important;
}

body.home .emotive-clean-hero-label strong,
body.home .emotive-clean-label strong {
    display:block !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:25px !important;
    font-weight:400 !important;
    line-height:1 !important;
}

body.home .emotive-clean-hero-label i,
body.home .emotive-clean-label i {
    display:block !important;
    width:28px !important;
    height:1px !important;
    margin:9px 0 10px !important;
    background:rgba(42,27,20,.55) !important;
}

body.home .emotive-clean-hero-label span,
body.home .emotive-clean-label span {
    display:block !important;
    color:var(--emotive-ink) !important;
    font-size:8px !important;
    line-height:1.55 !important;
    letter-spacing:.22em !important;
}

body.home .emotive-clean-hero-label:hover,
body.home .emotive-clean-label:hover {
    opacity:.68 !important;
}

/* inward positions so no clipping */
body.home .emotive-clean-hero-label-1 {
    left:8% !important;
    top:22% !important;
    transform:translateX(-100%) !important;
    text-align:right !important;
}
body.home .emotive-clean-hero-label-2 {
    left:92.5% !important;
    top:8% !important;
}
body.home .emotive-clean-hero-label-3 {
    left:2% !important;
    top:67% !important;
    transform:translateX(-100%) !important;
    text-align:right !important;
}
body.home .emotive-clean-hero-label-4 {
    left:93% !important;
    top:58% !important;
}
body.home .emotive-clean-hero-label-1 i,
body.home .emotive-clean-hero-label-3 i {
    margin-left:auto !important;
}

/* =========================================================
   ABOUT
   ========================================================= */

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

body.home .emotive-clean-about-grid {
    display:grid !important;
    grid-template-columns:260px minmax(0,1fr) !important;
    gap:56px !important;
    align-items:start !important;
}

body.home .emotive-clean-about h2 {
    margin:0 0 28px !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:clamp(48px,5vw,74px) !important;
    font-weight:400 !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
}

body.home .emotive-clean-about-grid > div > p {
    max-width:720px !important;
    font-size:16px !important;
    line-height:1.75 !important;
}

/* =========================================================
   BUILD YOURS
   ========================================================= */

body.home .emotive-clean-build {
    padding:100px 0 120px !important;
}

body.home .emotive-clean-build-grid {
    display:grid !important;
    grid-template-columns:minmax(340px,.72fr) minmax(650px,1.28fr) !important;
    gap:64px !important;
    align-items:start !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}

body.home .emotive-clean-build h2 {
    margin:24px 0 28px !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:clamp(62px,5vw,86px) !important;
    font-weight:400 !important;
    line-height:.98 !important;
    letter-spacing:-.04em !important;
}

body.home .emotive-clean-build h2 em {
    color:#9C684E !important;
}

body.home .emotive-clean-placeholder-stage {
    position:relative !important;
    min-height:660px !important;
    overflow:visible !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:transparent !important;
}

body.home .emotive-clean-placeholder-stage::before,
body.home .emotive-clean-placeholder-stage::after {
    display:none !important;
}

body.home .emotive-clean-slot {
    position:absolute !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
}

body.home .emotive-clean-slot-1 { left:10% !important; top:0 !important; width:52% !important; height:48% !important; }
body.home .emotive-clean-slot-2 { left:64% !important; top:0 !important; width:33% !important; height:58% !important; }
body.home .emotive-clean-slot-3 { left:10% !important; top:50% !important; width:49% !important; height:45% !important; }
body.home .emotive-clean-slot-4 { left:61% !important; top:60% !important; width:35% !important; height:35% !important; }

/* labels close, visible, no clipping */
body.home .emotive-clean-label-1 {
    left:8% !important;
    top:15% !important;
    transform:translateX(-100%) !important;
    text-align:right !important;
}
body.home .emotive-clean-label-2 {
    left:98% !important;
    top:14% !important;
}
body.home .emotive-clean-label-3 {
    left:8% !important;
    top:69% !important;
    transform:translateX(-100%) !important;
    text-align:right !important;
}
body.home .emotive-clean-label-4 {
    left:97% !important;
    top:70% !important;
}
body.home .emotive-clean-label-1 i,
body.home .emotive-clean-label-3 i {
    margin-left:auto !important;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer,
.wp-site-blocks > footer,
.emotive-site-footer,
.emotive-footer,
.site-footer,
footer.wp-block-template-part {
    background:#000 !important;
    color:#fff !important;
}

footer *,
.emotive-site-footer *,
.emotive-footer *,
.site-footer * {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    border-color:rgba(255,255,255,.18) !important;
}

footer a,
footer a:link,
footer a:visited,
.emotive-site-footer a,
.emotive-footer a,
.site-footer a {
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
}

footer svg,
footer svg *,
.emotive-site-footer svg,
.emotive-site-footer svg * {
    color:#fff !important;
    stroke:#fff !important;
}

footer input,
footer textarea {
    background:transparent !important;
    color:#fff !important;
    border-color:rgba(255,255,255,.45) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1100px) {
    body.home .emotive-clean-hero-grid,
    body.home .emotive-clean-build-grid {
        grid-template-columns:1fr !important;
        gap:44px !important;
    }

    body.home .emotive-clean-hero-collage,
    body.home .emotive-clean-placeholder-stage {
        width:min(760px,100%) !important;
        margin-inline:auto !important;
    }

    body.home .emotive-clean-about-grid {
        grid-template-columns:1fr !important;
    }
}

@media (max-width:700px) {
    body.home .emotive-clean-shell {
        width:min(100% - 32px,1320px) !important;
    }

    body.home .emotive-clean-hero {
        min-height:auto !important;
        padding-top:20px !important;
    }

    body.home .emotive-clean-hero h1 {
        font-size:clamp(52px,16vw,74px) !important;
    }

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

    body.home .emotive-clean-build h2 {
        font-size:clamp(52px,15vw,72px) !important;
    }
}
