/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'luma-lookbook-page.css'"
Line 18:0 Unexpected "<"
Line 122:0 Unexpected "<"
Line 158:63 Unterminated string token
Line 171:137 Unterminated string token
Line 199:66 Unterminated string token
Line 208:70 Unterminated string token
Line 209:120 Unterminated string token
... and 3 more hidden warnings

**/
{{ 'luma-lookbook-page.css' | asset_url | stylesheet_tag }}

<style>
.luma-lookbook { font-family:'Red Hat Display',sans-serif; font-weight:300; color:#111110; }

.lb-cover { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.lb-cover-left { background:linear-gradient(170deg,#FEF4EC 0%,#FEF0F4 50%,#FAF0F8 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:64px 56px; position:relative; overflow:hidden; border-right:1px solid rgba(0,0,0,.07); }
.lb-cover-left::before { content:'LUMA'; position:absolute; top:40px; left:-20px; font-family:'Bayon',sans-serif; font-size:200px; color:rgba(17,17,16,.04); line-height:1; pointer-events:none; }
.lb-tag { font-weight:600; font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:#b5afa7; margin-bottom:20px; }
.lb-cover-title { font-family:'Bayon',sans-serif; font-size:clamp(56px,6vw,96px); text-transform:uppercase; color:#111110; line-height:.92; margin-bottom:8px; }
.lb-cover-accent { font-family:'Trirong',serif; font-style:italic; font-size:clamp(36px,4vw,60px); color:#6b6560; display:block; margin-bottom:40px; }
.lb-cover-desc { font-size:14px; line-height:1.85; color:#6b6560; max-width:380px; font-weight:300; }
.lb-cover-right { display:grid; grid-template-rows:1fr 1fr; gap:2px; background:#FEF0F4; }
.lb-cover-img { overflow:hidden; position:relative; }
.lb-cover-img img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .8s; }
.lb-cover-img:hover img { transform:scale(1.04); }
.lb-cover-img-label { position:absolute; bottom:20px; right:20px; font-family:'Bayon',sans-serif; font-size:18px; text-transform:uppercase; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.3); }

.lb-intro { padding:88px 48px; display:grid; grid-template-columns:1fr 2fr; gap:0; border-bottom:1px solid rgba(0,0,0,.07); background:linear-gradient(135deg,#FEF4EC 0%,#FEF0F6 50%,#FAF4FC 100%); }
.lb-intro-label { font-weight:600; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#b5afa7; padding-top:6px; }
.lb-intro-title { font-family:'Bayon',sans-serif; font-size:clamp(40px,4vw,68px); text-transform:uppercase; color:#111110; line-height:.95; margin-bottom:6px; }
.lb-intro-accent { font-family:'Trirong',serif; font-style:italic; font-size:clamp(30px,3.2vw,52px); color:#6b6560; display:block; margin-bottom:32px; }
.lb-intro-body { font-size:15px; line-height:1.9; color:#6b6560; max-width:580px; font-weight:300; }

.lb-chapter { padding:32px 48px 0; display:flex; align-items:center; gap:20px; border-top:1px solid rgba(0,0,0,.07); }
.lb-chapter-num { font-family:'Bayon',sans-serif; font-size:72px; line-height:1; opacity:.15; }
.lb-chapter-label { font-weight:600; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#b5afa7; margin-bottom:4px; }
.lb-chapter-title { font-family:'Trirong',serif; font-style:italic; font-size:28px; color:#6b6560; }

.lb-look { display:grid; grid-template-columns:1.2fr 1fr; min-height:580px; border-bottom:1px solid rgba(0,0,0,.07); }
.lb-look--rev { grid-template-columns:1fr 1.2fr; }
.lb-look--rev .lb-look-img { order:2; }
.lb-look--rev .lb-look-content { order:1; border-left:none; border-right:1px solid rgba(0,0,0,.07); }
.lb-look-img { overflow:hidden; }
.lb-look-img img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .7s; }
.lb-look:hover .lb-look-img img { transform:scale(1.03); }
.lb-look-content { padding:60px 52px; display:flex; flex-direction:column; justify-content:center; border-left:1px solid rgba(0,0,0,.07); }
.lb-look-name { font-family:'Bayon',sans-serif; font-size:60px; text-transform:uppercase; color:#111110; line-height:.9; margin-bottom:4px; }
.lb-look-price { font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#b5afa7; margin-bottom:24px; }
.lb-divider { width:36px; height:1px; background:#ece8e0; margin-bottom:24px; }
.lb-look-quote { font-family:'Trirong',serif; font-style:italic; font-size:20px; color:#6b6560; line-height:1.5; margin-bottom:24px; }
.lb-look-desc { font-size:13px; line-height:1.8; color:#b5afa7; font-weight:300; margin-bottom:24px; }
.lb-tenue { padding:14px 18px; margin-bottom:28px; border:1px solid rgba(0,0,0,.07); background:rgba(249,248,246,.6); }
.lb-tenue-label { font-weight:600; font-size:9px; letter-spacing:.25em; text-transform:uppercase; color:#b5afa7; margin-bottom:8px; }
.lb-tenue-items { font-size:12px; color:#6b6560; line-height:1.7; }
.lb-btn { display:inline-flex; align-items:center; gap:10px; background:#111110; color:#f9f8f6; border:none; padding:13px 26px; font-family:'Red Hat Display',sans-serif; font-weight:600; font-size:10px; letter-spacing:.22em; text-transform:uppercase; cursor:pointer; transition:gap .3s,opacity .3s; text-decoration:none; align-self:flex-start; }
.lb-btn:hover { gap:16px; opacity:.85; }

.lb-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border-bottom:1px solid rgba(0,0,0,.07); }
.lb-trio-cell { position:relative; overflow:hidden; }
.lb-trio-cell img { width:100%; aspect-ratio:1; object-fit:cover; display:block; transition:transform .6s; }
.lb-trio-cell:hover img { transform:scale(1.06); }
.lb-trio-caption { position:absolute; bottom:0; left:0; right:0; padding:16px 20px; background:linear-gradient(transparent,rgba(17,17,16,.5)); display:flex; justify-content:space-between; align-items:flex-end; }
.lb-trio-name { font-family:'Bayon',sans-serif; font-size:22px; text-transform:uppercase; color:#fff; }
.lb-trio-price { font-weight:600; font-size:11px; color:rgba(255,255,255,.7); }

.lb-quote { padding:96px 48px; text-align:center; background:linear-gradient(135deg,#FEF4EC 0%,#FEF0F6 50%,#FAF4FC 100%); border-top:1px solid rgba(0,0,0,.07); border-bottom:1px solid rgba(0,0,0,.07); }
.lb-quote-text { font-family:'Trirong',serif; font-style:italic; font-size:clamp(28px,3.5vw,52px); color:#6b6560; line-height:1.4; max-width:800px; margin:0 auto 24px; }
.lb-quote-line { width:1px; height:48px; background:#b5afa7; margin:0 auto 20px; }
.lb-quote-author { font-weight:600; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:#b5afa7; }

.lb-duo { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid rgba(0,0,0,.07); }
.lb-duo-panel { position:relative; overflow:hidden; min-height:520px; cursor:pointer; }
.lb-duo-panel img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .7s; filter:brightness(.88); }
.lb-duo-panel:hover img { transform:scale(1.04); filter:brightness(1); }
.lb-duo-info { position:absolute; bottom:28px; left:28px; color:#fff; }
.lb-duo-name { font-family:'Bayon',sans-serif; font-size:38px; text-transform:uppercase; line-height:1; margin-bottom:4px; }
.lb-duo-quote { font-family:'Trirong',serif; font-style:italic; font-size:15px; opacity:.8; }
.lb-duo-btn { position:absolute; top:20px; right:20px; padding:8px 14px; font-family:'Red Hat Display',sans-serif; font-weight:600; font-size:9px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; background:#f9f8f6; color:#111110; opacity:0; transform:translateY(-6px); transition:opacity .3s,transform .3s; }
.lb-duo-panel:hover .lb-duo-btn { opacity:1; transform:translateY(0); }

.lb-grid-section { padding:72px 48px; background:linear-gradient(135deg,#FEF8F0 0%,#FEF0F8 100%); }
.lb-grid-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:36px; }
.lb-grid-title { font-family:'Bayon',sans-serif; font-size:40px; text-transform:uppercase; color:#111110; }
.lb-grid-accent { font-family:'Trirong',serif; font-style:italic; font-size:32px; color:#6b6560; display:block; }
.lb-grid-link { font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#6b6560; text-decoration:none; border-bottom:1px solid #b5afa7; padding-bottom:2px; transition:color .2s,border-color .2s; }
.lb-grid-link:hover { color:#111110; border-color:#111110; }
.lb-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.lb-fcard { text-decoration:none; color:inherit; cursor:pointer; }
.lb-fcard-img { overflow:hidden; aspect-ratio:3/4; background:#ece8e0; }
.lb-fcard-img img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; transition:transform .6s; }
.lb-fcard:hover .lb-fcard-img img { transform:scale(1.06); }
.lb-fcard-info { padding:12px 0 16px; }
.lb-fcard-name { font-family:'Bayon',sans-serif; font-size:18px; text-transform:uppercase; color:#111110; margin-bottom:2px; }
.lb-fcard-price { font-size:13px; color:#6b6560; }

.lb-reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }
.lb-reveal.lb-visible { opacity:1; transform:translateY(0); }

@media (max-width:749px) {
  .lb-cover { grid-template-columns:1fr; }
  .lb-cover-right { display:none; }
  .lb-cover-left { min-height:100vh; padding:60px 20px; }
  .lb-intro { grid-template-columns:1fr; padding:60px 20px; }
  .lb-chapter { padding:24px 20px 0; }
  .lb-look, .lb-look--rev { grid-template-columns:1fr; }
  .lb-look--rev .lb-look-img { order:1; }
  .lb-look--rev .lb-look-content { order:2; border-right:none; border-top:1px solid rgba(0,0,0,.07); }
  .lb-look-content { padding:40px 20px; border-left:none; border-top:1px solid rgba(0,0,0,.07); }
  .lb-trio { grid-template-columns:1fr; }
  .lb-duo { grid-template-columns:1fr; }
  .lb-quote { padding:60px 20px; }
  .lb-grid-section { padding:60px 20px; }
  .lb-grid { grid-template-columns:repeat(2,1fr); }
  .lb-grid-header { flex-direction:column; align-items:flex-start; gap:16px; }
}
</style>

<div class="luma-lookbook">

  <section class="lb-cover">
    <div class="lb-cover-left">
      <p class="lb-tag">Lookbook · Printemps 2026</p>
      <h1 class="lb-cover-title">Tissus qui ont</h1>
      <span class="lb-cover-accent">une ame</span>
      <p class="lb-cover-desc">Seize pochettes. Seize prenoms. Des motifs jacquard et brodes qui racontent quelque chose — du quotidien au soir.</p>
    </div>
    <div class="lb-cover-right">
      <div class="lb-cover-img">
        <img src="/cdn/shop/files/5708306A-3283-4EC6-B5D4-D0DF427DFBAB.jpg?v=1780312276" alt="Romane">
        <div class="lb-cover-img-label">Romane</div>
      </div>
      <div class="lb-cover-img">
        <img src="/cdn/shop/files/43A8D7D8-47A7-4F64-9D2D-D567E165C038.jpg?v=1780043810" alt="Iris">
        <div class="lb-cover-img-label">Iris</div>
      </div>
    </div>
  </section>

  <div class="lb-intro lb-reveal">
    <div class="lb-intro-label">Edito</div>
    <div>
      <h2 class="lb-intro-title">Porter quelque chose</h2>
      <span class="lb-intro-accent">qui a un caractere</span>
      <p class="lb-intro-body">Chez Luma, chaque pochette recoit un prenom avant d'etre proposee. Parce qu'une piece qui a un nom a une personnalite. Ce lookbook Printemps 2026 est une invitation a les rencontrer.</p>
    </div>
  </div>

  <div class="lb-chapter lb-reveal" style="background:#FDF5F2;">
    <div class="lb-chapter-num" style="color:#ECE4D8;">01</div>
    <div>
      <p class="lb-chapter-label">Premier regard</p>
      <p class="lb-chapter-title">Les pieces qui s'imposent</p>
    </div>
  </div>

  <div class="lb-look lb-reveal">
    <div class="lb-look-img">
      <img src="/cdn/shop/files/5708306A-3283-4EC6-B5D4-D0DF427DFBAB.jpg?v=1780312276" alt="Romane">
    </div>
    <div class="lb-look-content" style="background:linear-gradient(160deg,#FEF4EC 0%,#FEF0F4 100%);">
      <h2 class="lb-look-name">Romane</h2>
      <p class="lb-look-price">Pochette clutch · 89 €</p>
      <div class="lb-divider"></div>
      <p class="lb-look-quote">« Pour les soirs qui commencent doucement et finissent tard. »</p>
      <p class="lb-look-desc">Tissu jacquard aux motifs floraux dores. Une piece qui s'assume en soiree, mais surprend aussi le jour.</p>
      <div class="lb-tenue">
        <p class="lb-tenue-label">Comment la porter</p>
        <p class="lb-tenue-items">Robe midi fluide ivoire · Sandales dorees · Aucun bijou — Romane suffit.</p>
      </div>
      <a href="/products/romane" class="lb-btn">Voir Romane →</a>
    </div>
  </div>

  <div class="lb-trio lb-reveal">
    <div class="lb-trio-cell" style="background:#FEF4EC;">
      <img src="/cdn/shop/files/C1783CC3-2235-4ABC-82D4-1F13F90170FA.jpg?v=1780043924" alt="Zoe">
      <div class="lb-trio-caption"><span class="lb-trio-name">Zoe</span><span class="lb-trio-price">89 €</span></div>
    </div>
    <div class="lb-trio-cell" style="background:#FEF0F4;">
      <img src="/cdn/shop/files/90EEB73E-4CD1-4963-B66F-5BB9F4972DDD.jpg?v=1780044049" alt="Mia">
      <div class="lb-trio-caption"><span class="lb-trio-name">Mia</span><span class="lb-trio-price">89 €</span></div>
    </div>
    <div class="lb-trio-cell" style="background:#FAF0F8;">
      <img src="/cdn/shop/files/EF07EACF-BF35-434B-A57C-0C01373375DE.jpg?v=1780001268" alt="Alya">
      <div class="lb-trio-caption"><span class="lb-trio-name">Alya</span><span class="lb-trio-price">89 €</span></div>
    </div>
  </div>

  <div class="lb-chapter lb-reveal" style="background:#FDF8F2;">
    <div class="lb-chapter-num" style="color:#ECE8D8;">02</div>
    <div>
      <p class="lb-chapter-label">Le quotidien</p>
      <p class="lb-chapter-title">Celles qu'on emporte partout</p>
    </div>
  </div>

  <div class="lb-look lb-look--rev lb-reveal">
    <div class="lb-look-content" style="background:linear-gradient(160deg,#FEF8F0 0%,#FEF0F8 100%);">
      <h2 class="lb-look-name">Iris</h2>
      <p class="lb-look-price">Pochette clutch · 89 €</p>
      <div class="lb-divider"></div>
      <p class="lb-look-quote">« Elle s'assume, meme sans toi. »</p>
      <p class="lb-look-desc">Broderie dense aux tons profonds. Iris transforme n'importe quelle tenue en statement.</p>
      <div class="lb-tenue">
        <p class="lb-tenue-label">Comment la porter</p>
        <p class="lb-tenue-items">Jean brut · Blazer creme oversize · Mocassins noirs · Laissez Iris parler.</p>
      </div>
      <a href="/products/iris" class="lb-btn">Voir Iris →</a>
    </div>
    <div class="lb-look-img">
      <img src="/cdn/shop/files/43A8D7D8-47A7-4F64-9D2D-D567E165C038.jpg?v=1780043810" alt="Iris">
    </div>
  </div>

  <div class="lb-quote lb-reveal">
    <p class="lb-quote-text">« Un accessoire qui a un prenom, c'est un accessoire qui a une ame. »</p>
    <div class="lb-quote-line"></div>
    <p class="lb-quote-author">La Maison Luma · Printemps 2026</p>
  </div>

  <div class="lb-chapter lb-reveal" style="background:#FDF2F6;">
    <div class="lb-chapter-num" style="color:#ECD8E4;">03</div>
    <div>
      <p class="lb-chapter-label">Les douceurs</p>
      <p class="lb-chapter-title">Pour les apres-midi ensoleilles</p>
    </div>
  </div>

  <div class="lb-duo lb-reveal">
    <div class="lb-duo-panel">
      <img src="/cdn/shop/files/7F2A0E34-A1F8-4203-8C82-6C9DFB61646F.jpg?v=1780312538" alt="Rose">
      <div class="lb-duo-info"><div class="lb-duo-name">Rose</div><div class="lb-duo-quote">« Douce comme un matin d'ete. »</div></div>
      <a href="/products/rose" class="lb-duo-btn">79 € — Voir →</a>
    </div>
    <div class="lb-duo-panel">
      <img src="/cdn/shop/files/EA742E07-7A57-465C-89A6-C9F275B5953D.jpg?v=1780312168" alt="Jade">
      <div class="lb-duo-info"><div class="lb-duo-name">Jade</div><div class="lb-duo-quote">« Naturelle, jamais ordinaire. »</div></div>
      <a href="/products/jade" class="lb-duo-btn">79 € — Voir →</a>
    </div>
  </div>

  <div class="lb-look lb-reveal">
    <div class="lb-look-img">
      <img src="/cdn/shop/files/839026FF-DBCC-4DE2-A15C-705D99F9F299.jpg?v=1780001117" alt="Cassandre">
    </div>
    <div class="lb-look-content" style="background:linear-gradient(160deg,#FEF4EC 0%,#FAF0F8 100%);">
      <h2 class="lb-look-name">Cassandre</h2>
      <p class="lb-look-price">Pochette clutch · 89 €</p>
      <div class="lb-divider"></div>
      <p class="lb-look-quote">« Elegante meme sur le quai d'une gare. »</p>
      <p class="lb-look-desc">Motifs geometriques aux tons profonds. Cassandre s'impose aussi bien en journee qu'en soiree.</p>
      <div class="lb-tenue">
        <p class="lb-tenue-label">Comment la porter</p>
        <p class="lb-tenue-items">Trench coat camel · Jean slim noir · Bottines chelsea · Echarpe soie nouee loosement.</p>
      </div>
      <a href="/products/cassandre" class="lb-btn">Voir Cassandre →</a>
    </div>
  </div>

  <div class="lb-look lb-look--rev lb-reveal">
    <div class="lb-look-content" style="background:linear-gradient(160deg,#FEF8F0 0%,#FEF4EC 100%);">
      <h2 class="lb-look-name">Mia</h2>
      <p class="lb-look-price">Pochette clutch · 89 €</p>
      <div class="lb-divider"></div>
      <p class="lb-look-quote">« La dentelle rouge qui ne demande pas la permission. »</p>
      <p class="lb-look-desc">Broderie dense rouge et bordeaux. Mia transforme une tenue simple en declaration.</p>
      <div class="lb-tenue">
        <p class="lb-tenue-label">Comment la porter</p>
        <p class="lb-tenue-items">Robe noire courte · Escarpins noirs · Rouge a levres bordeaux · Boucles or rouge.</p>
      </div>
      <a href="/products/mia" class="lb-btn">Voir Mia →</a>
    </div>
    <div class="lb-look-img">
      <img src="/cdn/shop/files/90EEB73E-4CD1-4963-B66F-5BB9F4972DDD.jpg?v=1780044049" alt="Mia">
    </div>
  </div>

  <div class="lb-grid-section lb-reveal">
    <div class="lb-grid-header">
      <div>
        <h2 class="lb-grid-title">Toutes les pieces</h2>
        <span class="lb-grid-accent">du lookbook</span>
      </div>
      <a href="/collections/all" class="lb-grid-link">Voir la collection →</a>
    </div>
    <div class="lb-grid">
      <a href="/products/lea" class="lb-fcard"><div class="lb-fcard-img"><img src="/cdn/shop/files/1D90E5D4-8DA5-40B4-862F-2082534A6330.jpg?v=1780312712" alt="Lea"></div><div class="lb-fcard-info"><h3 class="lb-fcard-name">Lea</h3><p class="lb-fcard-price">69 €</p></div></a>
      <a href="/products/sofia" class="lb-fcard"><div class="lb-fcard-img"><img src="/cdn/shop/files/B7BE251D-0ED2-412F-8BBF-863FB429E615.jpg?v=1780312642" alt="Sofia"></div><div class="lb-fcard-info"><h3 class="lb-fcard-name">Sofia</h3><p class="lb-fcard-price">79 €</p></div></a>
      <a href="/products/elea" class="lb-fcard"><div class="lb-fcard-img"><img src="/cdn/shop/files/C70E4078-4C3C-4B6F-A4EA-AF8D0DF25EAE.jpg?v=1780312318" alt="Elea"></div><div class="lb-fcard-info"><h3 class="lb-fcard-name">Elea</h3><p class="lb-fcard-price">79 €</p></div></a>
      <a href="/products/lola" class="lb-fcard"><div class="lb-fcard-img"><img src="/cdn/shop/files/CC0E6CE7-A088-4831-A17F-09B6813FBDD4_c8f94ca4-5ae5-468a-8e77-c7b8fcd2a3a5.jpg?v=1780312125" alt="Lola"></div><div class="lb-fcard-info"><h3 class="lb-fcard-name">Lola</h3><p class="lb-fcard-price">79 €</p></div></a>
    </div>
  </div>

</div>

<script>
const io = new IntersectionObserver(e => {
  e.forEach(el => { if(el.isIntersecting){ el.target.classList.add('lb-visible'); io.unobserve(el.target); }});
}, { threshold:.07, rootMargin:'0px 0px -30px 0px' });
document.querySelectorAll('.lb-reveal').forEach(el => io.observe(el));
</script>