/*
Theme Name: Emotive Labs
Theme URI: https://example.com/
Author: Emotive Labs
Description: A calm, editorial WooCommerce-ready storefront theme.
Version: 1.0.0
Text Domain: emotive-labs
*/

:root { --sand:#c4a882; --forest:#294a3a; --cream:#fbf7f1; --fog:#eee8df; --ink:#25302b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--cream); color:var(--ink); font-family:Inter,Arial,sans-serif; }
a { color:inherit; }
.site-header { position:fixed; inset:0 0 auto; z-index:30; display:flex; align-items:center; justify-content:space-between; padding:19px clamp(20px,4vw,62px); background:rgba(251,247,241,.88); border-bottom:1px solid rgba(37,48,43,.1); backdrop-filter:blur(14px); }
.brand { color:var(--forest); font-family:Georgia,serif; font-size:1.35rem; font-weight:700; letter-spacing:.13em; text-decoration:none; }
.primary-nav ul { display:flex; gap:clamp(16px,2.5vw,36px); margin:0; padding:0; list-style:none; }
.primary-nav a { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; }
.primary-nav a:hover, .primary-nav a:focus-visible { color:var(--sand); }
.hero { position:relative; display:grid; min-height:100svh; place-items:center; overflow:hidden; background:#1d2521; isolation:isolate; }
.hero video { position:absolute; width:100%; height:100%; object-fit:cover; opacity:.7; z-index:-2; }
.hero::after { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(18,27,22,.15),rgba(18,27,22,.52)); content:""; }
.hero__content { max-width:850px; padding:120px 24px 60px; color:#fff; text-align:center; }
.eyebrow { margin:0 0 15px; color:var(--sand); font-size:.7rem; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
h1,h2,h3 { margin:0; color:var(--forest); font-family:Georgia,serif; font-weight:400; line-height:.94; }
.hero h1 { color:#fff; font-size:clamp(4rem,10vw,9rem); letter-spacing:-.06em; }
.hero__content p:last-child { margin:22px 0 0; font-size:clamp(.9rem,1.4vw,1.1rem); line-height:1.6; }
.button { display:inline-block; margin-top:28px; padding:15px 24px; border:1px solid var(--sand); color:#fff; font-size:.73rem; font-weight:800; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; transition:.25s ease; }
.button:hover,.button:focus-visible { background:var(--sand); color:var(--ink); }
.story { overflow:hidden; background:var(--cream); }
.story__track { display:flex; width:300vw; }
.story-card { position:relative; display:grid; width:100vw; min-height:100svh; place-items:center; padding:120px 10vw 70px; overflow:hidden; }
.story-card::after { position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,rgba(31,45,37,.28),transparent 58%); content:""; pointer-events:none; }
.story-card--studio { background:#e8dfd2; }.story-card--train { background:#26332d; }.story-card--water { background:#d7e4e1; }.story-card--train::after { background:linear-gradient(90deg,rgba(7,12,9,.48),rgba(7,12,9,.04)); }
.story-card__label { position:absolute; z-index:1; top:50%; color:rgba(41,74,58,.09); font-size:clamp(4rem,13vw,15rem); font-weight:800; letter-spacing:-.08em; line-height:.8; white-space:nowrap; transform:translateY(-50%); }.story-card--train .story-card__label { color:rgba(255,255,255,.1); }
.story-card img { position:relative; z-index:1; width:min(53vw,730px); height:min(72svh,760px); object-fit:cover; opacity:.78; box-shadow:0 25px 60px rgba(23,35,28,.2); }
.story-card__title { position:absolute; z-index:3; width:70%; color:#fff; font-size:clamp(3.5rem,8vw,8rem); letter-spacing:-.07em; text-shadow:0 3px 20px rgba(0,0,0,.42); }
.story-card__copy { position:absolute; z-index:4; bottom:12vh; max-width:330px; padding:15px 0 15px 18px; border-left:2px solid var(--sand); background:linear-gradient(90deg,rgba(251,247,241,.8),transparent); color:var(--ink); font-size:.97rem; line-height:1.65; }.story-card--train .story-card__copy { color:#fff; background:linear-gradient(90deg,rgba(18,25,20,.66),transparent); }
.story-card--left .story-card__title,.story-card--left .story-card__copy { left:10vw; }.story-card--right .story-card__title,.story-card--right .story-card__copy { right:10vw; text-align:right; }.story-card--center .story-card__title { left:15vw; }.story-card--center .story-card__copy { left:12vw; }
.collections { padding:clamp(70px,10vw,140px) 5vw; background:var(--fog); }.section-heading { max-width:720px; margin:0 auto 48px; text-align:center; }.section-heading h2 { font-size:clamp(3rem,6vw,5.3rem); letter-spacing:-.06em; }.section-heading p { margin:16px 0 0; line-height:1.6; }
.product-grid { display:grid; grid-template-columns:1.35fr .85fr .85fr; gap:18px; max-width:1400px; margin:auto; }.collection-card { display:flex; flex-direction:column; padding:24px; background:var(--cream); color:var(--ink); text-decoration:none; transition:transform .25s ease,box-shadow .25s ease; }.collection-card:hover { box-shadow:0 20px 40px rgba(37,48,43,.13); transform:translateY(-6px); }.collection-card img { width:100%; height:270px; object-fit:contain; mix-blend-mode:multiply; }.collection-card:first-child { grid-row:span 2; background:#dce6e0; }.collection-card:first-child img { height:420px; object-fit:cover; mix-blend-mode:normal; }.collection-card h3 { margin-top:20px; font-size:2rem; letter-spacing:-.04em; }.collection-card p { margin:10px 0 0; line-height:1.5; }.collection-card span { margin-top:auto; padding-top:20px; color:var(--forest); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.bundle-modal[hidden] { display:none; }.bundle-modal { position:fixed; z-index:100; inset:0; background:rgba(17,27,22,.7); backdrop-filter:blur(8px); }.bundle-modal__dialog { position:relative; width:100%; height:100%; overflow:hidden; background:var(--cream); }.bundle-modal__image { display:none; }.bundle-modal__content { position:absolute; z-index:3; top:0; left:0; width:min(400px,44vw); height:100%; padding:clamp(28px,4vw,62px); background:rgba(251,247,241,.93); backdrop-filter:blur(15px); }.bundle-modal__content h2 { font-size:clamp(2.8rem,5vw,5rem); letter-spacing:-.06em; }.bundle-modal__content p { line-height:1.6; }.bundle-modal__content h3 { margin-top:28px; font-family:Inter,Arial,sans-serif; font-size:.73rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.bundle-modal__content ul { margin:14px 0 0; padding:0; list-style:none; }.bundle-modal__content li { padding:7px 0; border-bottom:1px solid rgba(37,48,43,.12); font-size:.86rem; }.bundle-modal__shop { color:var(--forest); background:var(--sand); }.bundle-modal__close { position:absolute; z-index:5; top:20px; right:24px; display:grid; width:44px; height:44px; place-items:center; border:0; border-radius:50%; background:var(--cream); color:var(--ink); font-size:1.5rem; cursor:pointer; box-shadow:0 3px 18px rgba(0,0,0,.13); }
.bundle-product-rail { display:flex; height:100%; overflow-x:auto; overscroll-behavior-x:contain; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; }.bundle-product-rail::-webkit-scrollbar { display:none; }.bundle-product { position:relative; display:grid; flex:0 0 100%; place-items:center; overflow:hidden; scroll-snap-align:start; background:linear-gradient(135deg,#dce6e0,#f7f1e8); }.bundle-product:nth-child(even) { background:linear-gradient(135deg,#e9e0d4,#d7e4e1); }.bundle-product img { width:min(56vw,720px); height:min(65svh,700px); object-fit:contain; mix-blend-mode:multiply; filter:drop-shadow(0 28px 26px rgba(23,35,28,.16)); }.bundle-product span { position:absolute; right:7vw; bottom:16vh; color:var(--forest); font-family:Georgia,serif; font-size:clamp(2.2rem,5vw,5rem); letter-spacing:-.06em; }.bundle-product p { position:absolute; right:7vw; bottom:9vh; width:min(360px,32vw); margin:0; font-size:.9rem; line-height:1.55; }.bundle-modal__previous,.bundle-modal__next { position:absolute; z-index:4; bottom:32px; display:grid; width:52px; height:52px; place-items:center; border:1px solid rgba(37,48,43,.25); border-radius:50%; background:rgba(251,247,241,.9); color:var(--forest); font-size:1.6rem; cursor:pointer; }.bundle-modal__previous { right:96px; }.bundle-modal__next { right:32px; }
.bundle-product input { position:absolute; top:28px; right:30px; width:25px; height:25px; accent-color:var(--forest); cursor:pointer; }
.bundle-product-rail { cursor:grab; }.bundle-product-rail:active { cursor:grabbing; }.bundle-modal__previous,.bundle-modal__next { display:none; }
.site-footer { padding:60px 5vw 24px; background:var(--forest); color:#e8eee7; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; max-width:1400px; margin:auto; }.site-footer h2 { color:var(--sand); font-size:2rem; }.site-footer h3 { color:#fff; font-family:Inter,Arial,sans-serif; font-size:.77rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.site-footer ul { padding:0; list-style:none; }.site-footer li { margin:12px 0; }.site-footer a { color:#e8eee7; text-decoration:none; }.footer-note { max-width:1400px; margin:45px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); color:#c1cec5; font-size:.78rem; }
@media (max-width:800px) { .site-header { padding:17px 20px; }.primary-nav li:first-child { display:none; }.brand { font-size:1.05rem; }.story__track { display:block; width:auto; }.story-card { min-height:86svh; padding:100px 24px 48px; }.story-card img { width:76vw; height:51svh; }.story-card__title { top:18%; width:80%; font-size:3.8rem; }.story-card__copy { right:24px!important; bottom:48px; left:24px!important; max-width:none; text-align:left!important; }.story-card__label { font-size:5.5rem; }.product-grid { grid-template-columns:repeat(2,1fr); }.collection-card:first-child { grid-row:auto; }.collection-card:first-child img,.collection-card img { height:190px; }.collection-card { padding:15px; }.collection-card h3 { font-size:1.55rem; }.footer-grid { grid-template-columns:1fr; gap:24px; } }
@media (max-width:650px) { .bundle-modal__content { top:auto; bottom:0; width:100%; height:auto; max-height:46svh; padding:24px; }.bundle-modal__content h2 { font-size:2.8rem; }.bundle-modal__content h3,.bundle-modal__content ul { display:none; }.bundle-product img { width:88vw; height:58svh; }.bundle-product span { right:22px; bottom:50svh; font-size:2.8rem; }.bundle-product p { right:22px; bottom:43svh; width:calc(100% - 44px); font-size:.78rem; }.bundle-modal__previous,.bundle-modal__next { bottom:calc(46svh + 18px); }.bundle-modal__previous { right:82px; }.bundle-modal__next { right:18px; } }
@media (max-width:430px) { .primary-nav ul { gap:13px; }.primary-nav a { font-size:.62rem; }.product-grid { grid-template-columns:1fr; }.collection-card img { height:240px; } }