<section class="mu-ec" aria-label="Maison Elara luxury e-commerce demo">
  <nav>
    <div class="nav-links">
      <span class="nav-link active">New Arrivals</span>
      <span class="nav-link">Collections</span>
      <span class="nav-link">Maison</span>
      <span class="nav-link">Editorials</span>
    </div>
    <div class="brand">Maison Elara</div>
    <div class="nav-actions">
      <span class="nav-icon">Search</span>
      <span class="nav-icon">Account</span>
      <span class="nav-icon nav-icon-cart">
        Cart
        <span class="cart-count">3</span>
      </span>
    </div>
  </nav>

  <section class="hero">
    <div class="hero-left">
      <div class="hero-bg-text" aria-hidden="true">SS</div>
      <div class="hero-season">Spring / Summer 2025 — Exclusive Debut</div>
      <h1 class="hero-title">The Art<br>of <em>Quiet</em><br>Luxury</h1>
      <p class="hero-desc">Sculpted in the finest Florentine calfskin. Each piece is an architecture of restraint — where silence becomes the loudest statement.</p>
      <div class="hero-cta-group">
        <button class="btn-primary" type="button">Explore Collection</button>
        <button class="btn-ghost" type="button">View Lookbook</button>
      </div>
      <div class="hero-scroll">
        <div class="scroll-line"></div>
        <span class="scroll-txt">Scroll to discover</span>
      </div>
    </div>
    <div class="hero-right">
      <div class="hero-img-area">
        <svg class="hero-product-svg" width="280" height="380" viewBox="0 0 280 380" aria-hidden="true">
          <defs>
            <linearGradient id="mu-ec-bg" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stop-color="#c8b89a"/>
              <stop offset="50%" stop-color="#a89070"/>
              <stop offset="100%" stop-color="#8a7255"/>
            </linearGradient>
            <linearGradient id="mu-ec-sh" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stop-color="#7a6248"/>
              <stop offset="100%" stop-color="#9a7a5a"/>
            </linearGradient>
          </defs>
          <rect x="20" y="60" width="240" height="300" rx="2" fill="url(#mu-ec-bg)"/>
          <rect x="110" y="20" width="60" height="50" rx="2" fill="url(#mu-ec-sh)"/>
          <rect x="128" y="10" width="24" height="15" rx="12" fill="#6a5238" stroke="#5a4228" stroke-width="1"/>
          <line x1="20" y1="160" x2="260" y2="160" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
          <rect x="90" y="175" width="100" height="30" rx="1" fill="rgba(255,255,255,0.08)"/>
          <text x="140" y="195" text-anchor="middle" font-family="'Cormorant Garamond',serif" font-size="10" fill="rgba(255,255,255,0.5)" letter-spacing="3">ELARA</text>
          <circle cx="140" cy="330" r="8" fill="rgba(0,0,0,0.2)"/>
          <circle cx="140" cy="330" r="4" fill="rgba(255,255,255,0.15)"/>
        </svg>
        <div class="hero-badge">
          <span class="badge-line1">New</span>
          <span class="badge-line2">2025</span>
        </div>
        <div class="hero-price-tag">
          <div class="price-label">Starting from</div>
          <div class="price-value">€ 1,890</div>
        </div>
      </div>
    </div>
  </section>

  <div class="marquee-bar">
    <div class="marquee-track">
      <div class="marquee-item">Handcrafted in Florence<span class="marquee-dot"></span>Free Express Shipping<span class="marquee-dot"></span>Complimentary Gift Wrapping<span class="marquee-dot"></span>Lifetime Authenticity Guarantee<span class="marquee-dot"></span>Made-to-Order Available</div>
      <div class="marquee-item">Handcrafted in Florence<span class="marquee-dot"></span>Free Express Shipping<span class="marquee-dot"></span>Complimentary Gift Wrapping<span class="marquee-dot"></span>Lifetime Authenticity Guarantee<span class="marquee-dot"></span>Made-to-Order Available</div>
    </div>
  </div>

  <div class="section-header">
    <div>
      <div class="section-eyebrow">Curated Selections</div>
      <h2 class="section-title">New <em>Arrivals</em></h2>
    </div>
    <a class="section-link" href="#">View all pieces →</a>
  </div>

  <div class="products-grid">
    <article class="product-card">
      <div class="product-tag new">New</div>
      <div class="product-img-wrap">
        <svg width="180" height="240" viewBox="0 0 180 240" aria-hidden="true">
          <defs><linearGradient id="mu-ec-p1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e8ddc8"/><stop offset="100%" stop-color="#c4b090"/></linearGradient></defs>
          <rect x="40" y="30" width="100" height="160" rx="2" fill="url(#mu-ec-p1)"/>
          <rect x="60" y="50" width="60" height="2" fill="rgba(0,0,0,0.1)"/>
          <rect x="60" y="60" width="60" height="2" fill="rgba(0,0,0,0.07)"/>
          <circle cx="90" cy="130" r="12" fill="rgba(0,0,0,0.06)" stroke="rgba(0,0,0,0.08)" stroke-width="1"/>
          <rect x="75" y="185" width="30" height="8" rx="1" fill="rgba(0,0,0,0.08)"/>
        </svg>
        <div class="product-quick">Add to Bag</div>
      </div>
      <div class="product-info">
        <div class="product-name">Alma Tote</div>
        <div class="product-sub">Full-grain calfskin · Almond</div>
        <div class="product-footer">
          <div class="product-price">€ 2,240</div>
          <div class="product-colors">
            <div class="color-dot color-almond"></div>
            <div class="color-dot color-noir"></div>
            <div class="color-dot color-bordeaux"></div>
          </div>
        </div>
      </div>
    </article>

    <article class="product-card">
      <div class="product-img-wrap product-img-noir">
        <svg width="160" height="220" viewBox="0 0 160 220" aria-hidden="true">
          <defs><linearGradient id="mu-ec-p2" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3a3530"/><stop offset="100%" stop-color="#1a1714"/></linearGradient></defs>
          <rect x="20" y="40" width="120" height="150" rx="1" fill="url(#mu-ec-p2)"/>
          <rect x="20" y="70" width="120" height="1" fill="rgba(255,255,255,0.08)"/>
          <rect x="55" y="10" width="50" height="35" rx="1" fill="#2a2520"/>
          <rect x="68" y="5" width="24" height="10" rx="5" fill="#1a1510" stroke="#333" stroke-width="0.5"/>
          <rect x="38" y="90" width="84" height="60" rx="1" fill="rgba(255,255,255,0.03)"/>
          <text x="80" y="124" text-anchor="middle" font-family="'Cormorant Garamond',serif" font-size="9" fill="rgba(255,255,255,0.3)" letter-spacing="4">ELARA</text>
        </svg>
        <div class="product-quick">Add to Bag</div>
      </div>
      <div class="product-info">
        <div class="product-name">Nox Clutch</div>
        <div class="product-sub">Patent leather · Noir</div>
        <div class="product-footer">
          <div class="product-price">€ 1,490</div>
          <div class="product-colors">
            <div class="color-dot color-noir"></div>
            <div class="color-dot color-cognac"></div>
          </div>
        </div>
      </div>
    </article>

    <article class="product-card">
      <div class="product-tag sale">−15%</div>
      <div class="product-img-wrap product-img-sand">
        <svg width="200" height="250" viewBox="0 0 200 250" aria-hidden="true">
          <defs><linearGradient id="mu-ec-p3" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#d4c4a8"/><stop offset="100%" stop-color="#b8a080"/></linearGradient></defs>
          <ellipse cx="100" cy="160" rx="70" ry="55" fill="url(#mu-ec-p3)"/>
          <rect x="85" y="60" width="30" height="105" rx="15" fill="#9a8060"/>
          <circle cx="100" cy="55" r="18" fill="none" stroke="#8a7050" stroke-width="2"/>
          <ellipse cx="100" cy="160" rx="45" ry="35" fill="rgba(0,0,0,0.06)"/>
          <line x1="30" y1="160" x2="170" y2="160" stroke="rgba(0,0,0,0.1)" stroke-width="1"/>
        </svg>
        <div class="product-quick">Add to Bag</div>
      </div>
      <div class="product-info">
        <div class="product-name">Serene Hobo</div>
        <div class="product-sub">Woven raffia &amp; leather · Sand</div>
        <div class="product-footer">
          <div class="product-price">€ 3,100 <span class="price-strike">€ 3,650</span></div>
          <div class="product-colors">
            <div class="color-dot color-sand"></div>
            <div class="color-dot color-bronze"></div>
          </div>
        </div>
      </div>
    </article>
  </div>

  <div class="editorial">
    <div class="editorial-img">
      <div class="editorial-bg" aria-hidden="true">Craft</div>
      <div class="editorial-eyebrow">The Atelier</div>
      <h3 class="editorial-headline">Where <em>Time</em><br>Stands Still</h3>
      <p class="editorial-body">Every stitch is placed by hands that have spent decades learning the language of leather. This is not production. This is devotion.</p>
    </div>
    <div class="editorial-content">
      <div class="editorial-feature">
        <div class="feature-num">01 —</div>
        <div class="feature-title">Florentine Mastery</div>
        <div class="feature-text">Our artisans train for a minimum of seven years before crafting a single Maison Elara piece. The result is an object that outlives trends.</div>
      </div>
      <div class="editorial-feature">
        <div class="feature-num">02 —</div>
        <div class="feature-title">Materials Without Compromise</div>
        <div class="feature-text">We source exclusively from tanneries that have operated for over a century, selecting only the top 3% of each hide for its texture and patina.</div>
      </div>
      <div class="editorial-feature">
        <div class="feature-num">03 —</div>
        <div class="feature-title">A Promise of Permanence</div>
        <div class="feature-text">Every piece comes with our lifetime restoration service — ensuring your Maison Elara companion ages into something even more extraordinary.</div>
      </div>
    </div>
  </div>

  <div class="footer-strip">
    <div class="footer-brand">Maison Elara</div>
    <div class="footer-note">© 2025 · Est. Florence, 1987</div>
    <div class="footer-links">
      <span class="footer-link">Sustainability</span>
      <span class="footer-link">Clienteling</span>
      <span class="footer-link">Stores</span>
      <span class="footer-link">Press</span>
    </div>
  </div>
</section>

/* ─── 02 Maison Elara — minimalist luxury e-commerce UI ────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

.mu-ec {
  --mu-ec-cream: #f5f0e8;
  --mu-ec-cream-dark: #ede6d8;
  --mu-ec-ink: #1a1714;
  --mu-ec-ink-mid: #6b6560;
  --mu-ec-ink-light: #b8b2aa;
  --mu-ec-gold: #c9a84c;
  --mu-ec-gold-light: #e8d5a0;
  --mu-ec-white: #fefcf8;
  --mu-ec-serif: 'Cormorant Garamond', serif;
  --mu-ec-sans: 'Jost', sans-serif;

  position: relative;
  width: 100%;
  min-height: 1400px;
  background: var(--mu-ec-cream);
  color: var(--mu-ec-ink);
  font-family: var(--mu-ec-sans);
  overflow-x: hidden;
  box-sizing: border-box;
}
.mu-ec *, .mu-ec *::before, .mu-ec *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-ec nav { position: sticky; top: 0; z-index: 10; background: var(--mu-ec-cream); border-bottom: 1px solid var(--mu-ec-cream-dark); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 48px; height: 64px; }
.mu-ec .nav-links { display: flex; gap: 36px; align-items: center; }
.mu-ec .nav-link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mu-ec-ink-mid); text-decoration: none; font-weight: 400; transition: color 0.2s; cursor: pointer; }
.mu-ec .nav-link:hover, .mu-ec .nav-link.active { color: var(--mu-ec-ink); }
.mu-ec .brand { font-family: var(--mu-ec-serif); font-size: 22px; font-weight: 300; letter-spacing: 0.1em; text-align: center; font-style: italic; }
.mu-ec .nav-actions { display: flex; gap: 28px; align-items: center; justify-content: flex-end; }
.mu-ec .nav-icon { font-size: 13px; letter-spacing: 0.1em; color: var(--mu-ec-ink-mid); cursor: pointer; transition: color 0.2s; position: relative; }
.mu-ec .nav-icon:hover { color: var(--mu-ec-ink); }
.mu-ec .nav-icon-cart { position: relative; }
.mu-ec .cart-count { position: absolute; top: -6px; right: -8px; width: 14px; height: 14px; background: var(--mu-ec-ink); color: var(--mu-ec-cream); border-radius: 50%; font-size: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--mu-ec-sans); }

.mu-ec .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.mu-ec .hero-left { background: var(--mu-ec-ink); display: flex; flex-direction: column; justify-content: flex-end; padding: 64px; position: relative; overflow: hidden; }
.mu-ec .hero-bg-text { position: absolute; top: -20px; left: -10px; font-family: var(--mu-ec-serif); font-size: 260px; font-weight: 300; color: rgba(255,255,255,0.03); line-height: 1; user-select: none; letter-spacing: -0.04em; }
.mu-ec .hero-season { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mu-ec-gold); margin-bottom: 24px; animation: mu-ec-fadeup 0.8s ease 0.1s both; }
.mu-ec .hero-title { font-family: var(--mu-ec-serif); font-size: 72px; font-weight: 300; color: var(--mu-ec-white); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 20px; animation: mu-ec-fadeup 0.8s ease 0.2s both; }
.mu-ec .hero-title em { font-style: italic; color: var(--mu-ec-gold-light); }
.mu-ec .hero-desc { font-size: 13px; color: var(--mu-ec-ink-light); line-height: 1.8; max-width: 340px; margin-bottom: 40px; font-weight: 300; animation: mu-ec-fadeup 0.8s ease 0.35s both; }
.mu-ec .hero-cta-group { display: flex; gap: 16px; align-items: center; animation: mu-ec-fadeup 0.8s ease 0.5s both; }
.mu-ec .btn-primary { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: var(--mu-ec-gold); color: var(--mu-ec-ink); padding: 14px 32px; border: none; cursor: pointer; font-family: var(--mu-ec-sans); font-weight: 500; transition: all 0.3s; }
.mu-ec .btn-primary:hover { background: var(--mu-ec-gold-light); }
.mu-ec .btn-ghost { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; background: transparent; color: var(--mu-ec-white); padding: 14px 32px; border: 1px solid rgba(255,255,255,0.2); cursor: pointer; font-family: var(--mu-ec-sans); font-weight: 400; transition: all 0.3s; }
.mu-ec .btn-ghost:hover { border-color: rgba(255,255,255,0.5); }
.mu-ec .hero-scroll { display: flex; align-items: center; gap: 12px; margin-top: 56px; }
.mu-ec .scroll-line { width: 40px; height: 1px; background: rgba(255,255,255,0.2); }
.mu-ec .scroll-txt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.3); }
@keyframes mu-ec-fadeup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.mu-ec .hero-right { background: var(--mu-ec-cream-dark); position: relative; overflow: hidden; }
.mu-ec .hero-img-area { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#e8e0d0 0%,#d5c9b5 100%); position: relative; min-height: 480px; }
.mu-ec .hero-product-svg { filter: drop-shadow(40px 40px 60px rgba(0,0,0,0.2)); }
.mu-ec .hero-badge { position: absolute; top: 48px; right: 48px; width: 80px; height: 80px; border-radius: 50%; background: var(--mu-ec-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mu-ec .badge-line1 { font-family: var(--mu-ec-serif); font-size: 10px; color: var(--mu-ec-gold); font-style: italic; }
.mu-ec .badge-line2 { font-size: 8px; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.mu-ec .hero-price-tag { position: absolute; bottom: 48px; left: 48px; background: var(--mu-ec-white); padding: 14px 20px; }
.mu-ec .price-label { font-size: 9px; letter-spacing: 0.2em; color: var(--mu-ec-ink-light); text-transform: uppercase; margin-bottom: 4px; }
.mu-ec .price-value { font-family: var(--mu-ec-serif); font-size: 28px; font-weight: 300; color: var(--mu-ec-ink); }

.mu-ec .marquee-bar { background: var(--mu-ec-ink); color: var(--mu-ec-cream); padding: 12px 0; overflow: hidden; border-top: 1px solid #2a2420; border-bottom: 1px solid #2a2420; }
.mu-ec .marquee-track { display: flex; gap: 0; animation: mu-ec-marquee 25s linear infinite; width: max-content; }
.mu-ec .marquee-item { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 0 48px; color: var(--mu-ec-ink-light); display: flex; align-items: center; gap: 48px; }
.mu-ec .marquee-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--mu-ec-gold); flex-shrink: 0; }
@keyframes mu-ec-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mu-ec .section-header { display: flex; align-items: flex-end; justify-content: space-between; padding: 64px 64px 40px; }
.mu-ec .section-eyebrow { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mu-ec-gold); margin-bottom: 10px; }
.mu-ec .section-title { font-family: var(--mu-ec-serif); font-size: 42px; font-weight: 300; line-height: 1.1; }
.mu-ec .section-title em { font-style: italic; }
.mu-ec .section-link { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mu-ec-ink-mid); text-decoration: none; border-bottom: 1px solid var(--mu-ec-ink-light); padding-bottom: 2px; cursor: pointer; transition: all 0.2s; }
.mu-ec .section-link:hover { color: var(--mu-ec-ink); border-color: var(--mu-ec-ink); }

.mu-ec .products-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; padding: 0 64px 64px; }
.mu-ec .product-card { background: var(--mu-ec-white); cursor: pointer; position: relative; overflow: hidden; }
.mu-ec .product-card:hover .product-img-wrap::after { opacity: 1; }
.mu-ec .product-card:hover .product-quick { opacity: 1; transform: translateY(0); }
.mu-ec .product-img-wrap { aspect-ratio: 3/4; background: linear-gradient(145deg,#ede6d8,#d8cdb8); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mu-ec .product-img-wrap.product-img-noir { background: linear-gradient(145deg,#1e1c19,#2a2620); }
.mu-ec .product-img-wrap.product-img-sand { background: linear-gradient(145deg,#f0e8dc,#e0d4c0); }
.mu-ec .product-img-wrap::after { content: ''; position: absolute; inset: 0; background: rgba(26,23,20,0.1); opacity: 0; transition: opacity 0.3s; }
.mu-ec .product-quick { position: absolute; bottom: 0; left: 0; right: 0; background: var(--mu-ec-ink); color: var(--mu-ec-cream); padding: 14px; text-align: center; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0; transform: translateY(100%); transition: all 0.3s cubic-bezier(0.23,1,0.32,1); z-index: 2; cursor: pointer; }
.mu-ec .product-info { padding: 20px 22px 22px; }
.mu-ec .product-name { font-family: var(--mu-ec-serif); font-size: 18px; font-weight: 300; margin-bottom: 4px; }
.mu-ec .product-sub { font-size: 11px; color: var(--mu-ec-ink-light); letter-spacing: 0.05em; margin-bottom: 12px; }
.mu-ec .product-footer { display: flex; align-items: center; justify-content: space-between; }
.mu-ec .product-price { font-family: var(--mu-ec-serif); font-size: 22px; font-weight: 300; }
.mu-ec .price-strike { font-size: 14px; color: var(--mu-ec-ink-light); text-decoration: line-through; }
.mu-ec .product-colors { display: flex; gap: 6px; }
.mu-ec .color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); cursor: pointer; }
.mu-ec .color-almond { background: #c4b090; } .mu-ec .color-noir { background: #1a1714; }
.mu-ec .color-bordeaux { background: #8b2020; } .mu-ec .color-cognac { background: #4a3020; }
.mu-ec .color-sand { background: #d4c4a8; } .mu-ec .color-bronze { background: #8a7050; }
.mu-ec .product-tag { position: absolute; top: 16px; left: 16px; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; z-index: 3; }
.mu-ec .product-tag.new { background: var(--mu-ec-ink); color: var(--mu-ec-cream); }
.mu-ec .product-tag.sale { background: var(--mu-ec-gold); color: var(--mu-ec-ink); }

.mu-ec .editorial { display: grid; grid-template-columns: 1fr 1fr; margin: 0 64px 64px; border: 1px solid var(--mu-ec-cream-dark); }
.mu-ec .editorial-img { background: linear-gradient(145deg,var(--mu-ec-ink) 0%,#3a3028 100%); position: relative; overflow: hidden; padding: 64px; display: flex; flex-direction: column; justify-content: flex-end; }
.mu-ec .editorial-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.06; font-family: var(--mu-ec-serif); font-size: 180px; font-weight: 300; color: var(--mu-ec-cream); display: flex; align-items: center; justify-content: center; letter-spacing: -0.05em; }
.mu-ec .editorial-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mu-ec-gold); margin-bottom: 16px; }
.mu-ec .editorial-headline { font-family: var(--mu-ec-serif); font-size: 40px; font-weight: 300; color: var(--mu-ec-white); line-height: 1.15; margin-bottom: 16px; }
.mu-ec .editorial-headline em { font-style: italic; color: var(--mu-ec-gold-light); }
.mu-ec .editorial-body { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.8; max-width: 320px; font-weight: 300; }
.mu-ec .editorial-content { padding: 64px; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.mu-ec .editorial-feature { padding-bottom: 28px; border-bottom: 1px solid var(--mu-ec-cream-dark); }
.mu-ec .editorial-feature:last-child { border-bottom: none; padding-bottom: 0; }
.mu-ec .feature-num { font-family: var(--mu-ec-serif); font-size: 13px; color: var(--mu-ec-gold); margin-bottom: 8px; }
.mu-ec .feature-title { font-family: var(--mu-ec-serif); font-size: 22px; font-weight: 300; margin-bottom: 8px; }
.mu-ec .feature-text { font-size: 12px; color: var(--mu-ec-ink-mid); line-height: 1.8; font-weight: 300; }

.mu-ec .footer-strip { background: var(--mu-ec-ink); padding: 36px 64px; display: flex; align-items: center; justify-content: space-between; }
.mu-ec .footer-brand { font-family: var(--mu-ec-serif); font-size: 24px; font-weight: 300; color: var(--mu-ec-cream); font-style: italic; }
.mu-ec .footer-note { font-size: 10px; letter-spacing: 0.15em; color: var(--mu-ec-ink-light); text-transform: uppercase; }
.mu-ec .footer-links { display: flex; gap: 32px; }
.mu-ec .footer-link { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--mu-ec-ink-light); cursor: pointer; transition: color 0.2s; }
.mu-ec .footer-link:hover { color: var(--mu-ec-cream); }

@media (max-width: 900px) {
  .mu-ec nav { padding: 0 24px; grid-template-columns: 1fr; height: auto; padding-bottom: 12px; padding-top: 12px; }
  .mu-ec .nav-links, .mu-ec .nav-actions { display: none; }
  .mu-ec .hero { grid-template-columns: 1fr; }
  .mu-ec .hero-left { padding: 40px 32px; }
  .mu-ec .hero-title { font-size: 48px; }
  .mu-ec .products-grid { grid-template-columns: 1fr; padding: 0 24px 40px; }
  .mu-ec .editorial { grid-template-columns: 1fr; margin: 0 24px 40px; }
  .mu-ec .editorial-img, .mu-ec .editorial-content { padding: 40px 32px; }
  .mu-ec .section-header { padding: 40px 24px 24px; flex-direction: column; gap: 16px; align-items: flex-start; }
  .mu-ec .footer-strip { padding: 24px; flex-direction: column; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-ec .marquee-track, .mu-ec .hero-season, .mu-ec .hero-title, .mu-ec .hero-desc, .mu-ec .hero-cta-group { animation: none !important; }
}