/* LUMI & LOOM — EDITORIAL FASHION E-COMMERCE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0F0E0D;
  --ink2:#2A2826;
  --paper:#FAFAF7;
  --paper2:#F4F2EC;
  --paper3:#EBE9E2;
  --line:#E5E2DA;
  --line2:#D4D0C6;
  --text:#1A1816;
  --text2:#4A4641;
  --muted:#85807A;
  --muted2:#A8A39C;
  --accent:#8B5E3C;
  --sale:#C53030;
  --new:#0F6E56;

  --r:6px;
  --r-lg:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 24px rgba(0,0,0,.06);
  --shadow-lg:0 24px 60px rgba(0,0,0,.12);
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-size:14.5px;color:var(--text);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{display:block;max-width:100%}
.container{max-width:1280px;margin:0 auto;padding:0 32px}

em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:inherit;letter-spacing:-.01em}

h1,h2,h3,h4{font-family:'Inter',sans-serif;letter-spacing:-0.025em;line-height:1.05;color:var(--text);font-weight:700}

.eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:2.5px;color:var(--muted);text-transform:uppercase;margin-bottom:14px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:0;font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .25s;font-family:inherit;text-decoration:none;line-height:1;letter-spacing:.5px;text-transform:uppercase}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--ink2)}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6)}
.btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ANNOUNCE */
.announce{background:var(--ink);color:var(--paper);padding:9px 0;font-size:12px;letter-spacing:.3px}
.announce-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
.separator{opacity:.4}
.announce a{color:var(--paper);font-weight:600;display:inline-flex;align-items:center;gap:4px;text-decoration:underline;text-underline-offset:3px}

/* NAVBAR */
.navbar{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 0;gap:20px}
.nav-left,.nav-right{display:flex;align-items:center;gap:4px}
.nav-right{justify-content:flex-end}
.nav-left li a,.nav-right li a{font-size:13px;font-weight:500;color:var(--text2);padding:8px 12px;letter-spacing:.5px;transition:color .2s;display:inline-flex;align-items:center;gap:5px;text-transform:uppercase}
.nav-left li a:hover,.nav-right li a:hover{color:var(--ink)}
.nav-left .sale{color:var(--sale)}
.nav-right li a i{font-size:20px}
.cart-btn{position:relative}
.cart-count{position:absolute;top:0;right:0;background:var(--ink);color:var(--paper);font-size:9px;font-weight:700;padding:2px 5px;border-radius:8px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.logo{display:flex;align-items:center;gap:10px;justify-content:center}
.logo-mark{width:38px;height:38px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:13px;font-weight:700;letter-spacing:-.5px}
.logo-text{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.logo-text em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;color:var(--accent)}
.hamburger{display:none;background:none;border:none;cursor:pointer;font-size:24px;color:var(--ink);padding:4px}

/* HERO */
.hero{position:relative;height:88vh;min-height:600px;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.55) 100%);z-index:1}
.hero-content{position:relative;z-index:2;color:#fff;padding:0 80px 80px;max-width:780px}
.hero-collection{display:inline-block;font-size:11px;font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-bottom:20px;opacity:.85}
.hero h1{font-size:clamp(44px,7vw,84px);font-weight:700;line-height:1;letter-spacing:-.04em;margin-bottom:20px;color:#fff}
.hero h1 em{color:#fff;opacity:.95}
.hero p{font-size:17px;max-width:520px;margin-bottom:32px;line-height:1.55;opacity:.9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-scroll{position:absolute;bottom:30px;right:40px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;writing-mode:vertical-rl;text-orientation:mixed}
.hero-scroll span{font-size:10px;letter-spacing:3px;opacity:.7}
.hs-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:scrolldot 2s infinite}
@keyframes scrolldot{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(12px);opacity:.3}}

/* TICKER */
.ticker{background:var(--ink);color:var(--paper);padding:14px 0;overflow:hidden;border-bottom:1px solid var(--ink2)}
.ticker-track{display:flex;align-items:center;gap:32px;white-space:nowrap;animation:scroll 30s linear infinite;width:max-content}
.ticker-track span{font-size:13px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase}
.ticker-track i{color:var(--accent);font-size:10px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
.section{padding:100px 0}
.section-head{margin-bottom:60px;text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.section-head.between{display:flex;justify-content:space-between;align-items:flex-end;text-align:left;max-width:100%;flex-wrap:wrap;gap:20px}
.section-head h2{font-size:clamp(32px,4.5vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.section-head .eyebrow{margin-bottom:12px}
.head-link{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:4px;transition:gap .2s}
.head-link:hover{gap:10px}

/* CATEGORIES */
.cat-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:300px 300px;gap:12px}
.cat-card{position:relative;overflow:hidden;display:block;text-decoration:none;color:#fff;cursor:pointer;border-radius:var(--r-lg)}
.cat-card.big{grid-row:span 2}
.cat-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.cat-card:hover .cat-img{transform:scale(1.08)}
.cat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.7) 100%);transition:background .3s}
.cat-card:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.75) 100%)}
.cat-info{position:absolute;bottom:0;left:0;right:0;padding:28px;z-index:2}
.cat-num{font-size:11px;font-weight:600;letter-spacing:2.5px;opacity:.85;font-family:'Inter',sans-serif;margin-bottom:8px;display:block}
.cat-info h3{font-size:34px;font-weight:700;color:#fff;letter-spacing:-.025em;margin-bottom:10px}
.cat-card.big .cat-info h3{font-size:48px}
.cat-link{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.cat-card:hover .cat-link{gap:12px}

/* FILTER PILLS */
.filter-pills{display:flex;gap:8px;margin-bottom:36px;overflow-x:auto;scrollbar-width:none}
.filter-pills::-webkit-scrollbar{display:none}
.pill{padding:9px 18px;border:1px solid var(--line2);background:var(--paper);color:var(--text2);font-size:13px;font-weight:500;border-radius:999px;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .2s}
.pill:hover{border-color:var(--ink);color:var(--ink)}
.pill.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* PRODUCTS */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.product{display:flex;flex-direction:column;cursor:pointer}
.product-img{position:relative;aspect-ratio:3/4;background-size:cover;background-position:center;overflow:hidden;margin-bottom:14px;background-color:var(--paper2)}
.badge{position:absolute;top:12px;left:12px;font-size:10px;font-weight:600;padding:5px 10px;letter-spacing:1px;text-transform:uppercase;color:#fff;z-index:2}
.badge.new{background:var(--new)}
.badge.sale{background:var(--sale)}
.quick-add{position:absolute;bottom:12px;left:12px;right:12px;background:rgba(255,255,255,.95);color:var(--ink);border:none;padding:11px 16px;font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;opacity:0;transform:translateY(8px);transition:all .3s}
.product:hover .quick-add{opacity:1;transform:translateY(0)}
.quick-add:hover{background:var(--ink);color:var(--paper)}
.wishlist{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text2);transition:all .2s}
.wishlist:hover{background:var(--ink);color:var(--paper)}
.product-info{display:flex;flex-direction:column;gap:6px}
.cat-label{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase}
.product-info h3{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--text)}
.colors{display:flex;gap:5px;margin:4px 0 6px}
.c{width:14px;height:14px;border-radius:50%;cursor:pointer;border:1.5px solid transparent;transition:border-color .2s}
.c:hover{border-color:var(--ink2)}
.product-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:2px}
.price{font-size:15px;font-weight:600;color:var(--ink);font-feature-settings:'tnum'}
.price-old{font-size:13px;color:var(--muted);text-decoration:line-through;margin-left:6px;font-weight:400}
.sizes{font-size:11px;color:var(--muted);letter-spacing:.5px}

/* EDITORIAL */
.editorial{padding:0;background:var(--paper2)}
.editorial-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:600px;padding:0;max-width:none}
.ed-left{background-size:cover;background-position:center;min-height:500px}
.ed-right{padding:80px 80px 80px 60px;display:flex;flex-direction:column;justify-content:center;max-width:600px}
.ed-right .eyebrow{text-align:left;margin-bottom:14px}
.ed-right h2{font-size:clamp(34px,4vw,52px);font-weight:700;letter-spacing:-.035em;margin-bottom:24px;line-height:1.05}
.ed-right p{font-size:15px;color:var(--text2);line-height:1.75;margin-bottom:16px}
.ed-values{display:flex;flex-direction:column;gap:12px;margin:28px 0 32px}
.ev{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--text)}
.ev i{font-size:22px;color:var(--accent)}
.ev strong{font-weight:500}

/* LOOKBOOK */
.lookbook-section{background:var(--paper)}
.lookbook-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:280px 280px;gap:10px}
.lb{background-size:cover;background-position:center;border-radius:var(--r);transition:transform .5s cubic-bezier(.4,0,.2,1);cursor:pointer}
.lb:hover{transform:scale(1.02)}
.lb.tall{grid-row:span 2}
.lb.wide{grid-column:span 2}

/* REVIEWS */
.reviews-section{background:var(--paper2)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.review{padding:36px;background:var(--paper);border-radius:var(--r-lg)}
.stars{color:var(--accent);font-size:18px;margin-bottom:18px;letter-spacing:2px}
.review p{font-size:16px;color:var(--text);line-height:1.65;margin-bottom:20px;font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
.review-author{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.5px;text-transform:uppercase}

/* NEWSLETTER */
.newsletter-section{padding:0 32px 100px}
.newsletter-card{background:var(--ink);color:var(--paper);border-radius:var(--r-lg);padding:80px 64px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1280px;margin:0 auto}
.nl-left .eyebrow{color:var(--accent);text-align:left;margin-bottom:14px}
.nl-left h2{font-size:clamp(28px,3.5vw,42px);font-weight:700;letter-spacing:-.03em;color:var(--paper);margin-bottom:14px;line-height:1.1}
.nl-left h2 em{color:var(--paper)}
.nl-left p{font-size:14px;color:rgba(250,250,247,.7);line-height:1.7}
.nl-form{display:flex;gap:8px;flex-wrap:wrap}
.nl-form input{flex:1;padding:14px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;font-size:14px;font-family:inherit;border-radius:0;min-width:200px}
.nl-form input::placeholder{color:rgba(255,255,255,.5)}
.nl-form input:focus{outline:none;border-color:#fff}
.nl-form .btn-primary{background:var(--paper);color:var(--ink)}
.nl-form .btn-primary:hover{background:#fff}

/* FOOTER */
.footer{background:var(--paper);padding:80px 0 0;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid var(--line)}
.footer-brand .logo{justify-content:flex-start;margin-bottom:18px}
.footer-brand p{font-size:14px;color:var(--text2);margin-bottom:24px;line-height:1.7;max-width:340px}
.footer-socials{display:flex;gap:6px}
.footer-socials a{width:38px;height:38px;border-radius:50%;background:var(--paper2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .2s;font-size:18px}
.footer-socials a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.footer-col h4{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink);margin-bottom:18px}
.footer-col ul{display:flex;flex-direction:column;gap:10px}
.footer-col ul li a{font-size:13.5px;color:var(--text2);transition:color .2s}
.footer-col ul li a:hover{color:var(--ink)}
.footer-bottom{padding:24px 0}
.fb-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12.5px;color:var(--muted)}
.fb-inner strong{color:var(--ink);font-weight:600}
.payment-icons{display:flex;gap:8px}
.payment-icons span{padding:4px 10px;background:var(--paper2);border:1px solid var(--line);border-radius:4px;font-size:11px;font-weight:500;color:var(--text2)}

/* RESPONSIVE */
@media(max-width:1024px){
  .nav-inner{grid-template-columns:auto 1fr auto}
  .nav-left{display:none}
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:1fr 1fr;grid-template-rows:280px 280px}
  .cat-card.big{grid-row:span 1;grid-column:span 2}
  .editorial-grid{grid-template-columns:1fr}
  .ed-left{min-height:400px}
  .ed-right{padding:60px 32px}
  .lookbook-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,260px)}
  .lb.wide{grid-column:span 2}
  .lb.tall{grid-row:span 1}
  .reviews-grid{grid-template-columns:1fr}
  .newsletter-card{grid-template-columns:1fr;padding:48px 32px;text-align:center}
  .nl-left .eyebrow,.nl-left h2{text-align:center}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:768px){
  .container{padding:0 20px}
  .hamburger{display:block}
  .nav-inner{grid-template-columns:auto 1fr auto;padding:14px 0}
  .nav-right li:not(:last-child):not(:nth-last-child(2)){display:none}
  .logo-text{font-size:17px}
  .logo-mark{width:32px;height:32px;font-size:11px}
  .announce-inner{font-size:11px;gap:10px}
  .announce-inner span:nth-of-type(2){display:none}
  .hero{height:80vh;min-height:500px}
  .hero-content{padding:0 24px 60px}
  .hero-scroll{display:none}
  .section{padding:64px 0}
  .section-head{margin-bottom:40px}
  .section-head.between{flex-direction:column;align-items:flex-start}
  .cat-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,260px)}
  .cat-card.big{grid-column:span 1}
  .cat-info h3,.cat-card.big .cat-info h3{font-size:32px}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .quick-add{opacity:1;transform:none}
  .ed-right{padding:48px 24px}
  .lookbook-grid{grid-template-columns:1fr;grid-template-rows:repeat(5,240px)}
  .lb.wide,.lb.tall{grid-column:span 1;grid-row:span 1}
  .review{padding:28px}
  .newsletter-section{padding:0 20px 80px}
  .newsletter-card{padding:36px 24px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-brand .logo{justify-content:flex-start}
  .fb-inner{flex-direction:column;text-align:center}
  .ticker-track span{font-size:11px}
  .ticker-track{gap:20px}
}