Maison Elara Storefront

Here's a working CSS Minimalist UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Maison Elara Storefront
Source: https://codefronts.com/design-styles/css-minimalist-ui/maison-elara-storefront/

A minimalist luxury e-commerce storefront UI in cream + deep ink with a Florentine fashion-house aesthetic — proving that high-end retail layouts work best when whitespace, typography hierarchy, and product photography do all the talking. Split-screen hero with a full-bleed dark left panel (oversized ghost-text "SS" letterform, gold-accented eyebrow, Cormorant Garamond display headline with italic accent, gold CTA), a composed SVG product silhouette on the right with hero badge + price tag, a scrolling marquee bar with five service propositions, a 3-column product grid with hover quick-add reveals + color-dot swatches + "−15%" sale tag, and an editorial "atelier" feature strip with three numbered principles framed by a giant ghost serif word. Typography: Cormorant Garamond + Jost. Best for luxury fashion e-commerce, premium retail storefronts, jewellery brands, perfume houses, boutique hotel landing pages.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
  }
}
```

Here's a working CSS Minimalist UI Design from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Maison Elara Storefront
Source: https://codefronts.com/design-styles/css-minimalist-ui/maison-elara-storefront/

A minimalist luxury e-commerce storefront UI in cream + deep ink with a Florentine fashion-house aesthetic — proving that high-end retail layouts work best when whitespace, typography hierarchy, and product photography do all the talking. Split-screen hero with a full-bleed dark left panel (oversized ghost-text "SS" letterform, gold-accented eyebrow, Cormorant Garamond display headline with italic accent, gold CTA), a composed SVG product silhouette on the right with hero badge + price tag, a scrolling marquee bar with five service propositions, a 3-column product grid with hover quick-add reveals + color-dot swatches + "−15%" sale tag, and an editorial "atelier" feature strip with three numbered principles framed by a giant ghost serif word. Typography: Cormorant Garamond + Jost. Best for luxury fashion e-commerce, premium retail storefronts, jewellery brands, perfume houses, boutique hotel landing pages.
## HTML
```html
<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>
```
## CSS
```css
/* ─── 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;
  }
}
```