/* ════════════════════════════════════════════════════════════
   IMPORTS & FONTS
════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&display=swap');


/* ════════════════════════════════════════════════════════════
   VARIABLES
════════════════════════════════════════════════════════════ */
:root {
  --color-primary:    #1a1a1a;
  --color-secondary:  #ffffff;
  --color-accent:     #F5F2A8;
  --color-text:       #000000;
  --color-text-light: #000000;
  --color-bg:         #ffffff;
  --font-primary:     "Montserrat", sans-serif;
  --font-display:     "courier-new", sans-serif;
  --gap:              5px;
  --transition-base:  0.3s ease;
  --transition-slow:  0.5s ease;
}

/* ════════════════════════════════════════════════════════════
   BASE
════════════════════════════════════════════════════════════ */
.lookbook *, .lookbook *::before, .lookbook *::after { box-sizing: border-box; }

.lookbook {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 0;
  font-family: var(--font-primary);
  color: var(--color-text);
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--color-bg);
}

.lookbook a { color: inherit; text-decoration: none; }
.lookbook a:focus-visible,
.lookbook button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lookbook picture { display: block; width: 100%; max-width: 100%; }
.lookbook picture img { display: block; }

/* ════════════════════════════════════════════════════════════
   SÉCURITÉ GLOBALE ANTI-DÉBORDEMENT
   (empêche tout débordement HORIZONTAL uniquement — ne touche
   jamais à la hauteur, pour ne pas couper de texte ou d'image)
════════════════════════════════════════════════════════════ */
.lookbook img,
.lookbook svg {
  max-width: 100%;
  height: auto;
}

.lookbook .line {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* jamais overflow: hidden — coupe verticalement le contenu qui dépasse */
}

.lookbook .cell {
  min-width: 0; /* empêche flexbox de forcer une largeur trop grande sur le contenu (texte/image) */
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════
   IMAGES
════════════════════════════════════════════════════════════ */
.lookbook .img-responsive { width: 100%; height: auto; display: block; object-fit: cover; }
.lookbook .img-container img { transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); }
.lookbook a:hover .img-container img { transform: scale(1.015); }

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   LINES — STRUCTURE
════════════════════════════════════════════════════════════ */
.lookbook .line {
  position: relative;
  animation: fadeInUp 0.6s ease forwards;
}

.lookbook .line-margin { margin-bottom: var(--gap); }

.lookbook .line-flex .cell:nth-child(1) { animation-delay: 0.1s; }
.lookbook .line-flex .cell:nth-child(2) { animation-delay: 0.2s; }
.lookbook .line-flex .cell:nth-child(3) { animation-delay: 0.3s; }

.lookbook .no-gap,
.lookbook .line-flex.no-gap,
.lookbook .line-2-img.no-gap { gap: 0 !important; padding: 0 !important; }
.lookbook .no-gap .cell { margin: 0 !important; padding: 0 !important; }

/* ════════════════════════════════════════════════════════════
   CTA — TOKEN UNIQUE
   Base (desktop) : padding 14px 30px | font-size 14px
   Override par breakpoint via media queries
   (mobile = 11px | tablette = 14px | desktop = 14px)
════════════════════════════════════════════════════════════ */

/* ── Apparence partagée (toutes tailles) ── */
.lookbook .beijos-cta-header {
  display: inline-block;
  background-color: transparent;
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  padding: 14px 30px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap;
  z-index: 10;
}

/* ── Overlay sur image (positionné en absolu) ── */
.lookbook .beijos-cta-header {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Mobile-only : caché par défaut ── */
.lookbook .beijos-cta-mobile-only { display: none !important; }

/* ════════════════════════════════════════════════════════════
   CELL CTA CASA — fond jaune + image pleine + CTA overlay centré
════════════════════════════════════════════════════════════ */
.lookbook .cell-cta-casa {
  background-color: var(--color-accent);
  position: relative;
  padding: 20px;
}

.lookbook .cell-cta-casa .img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.lookbook .cell-cta-casa .img-container picture {
  display: block;
  height: 100%;
}

.lookbook .cell-cta-casa .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lookbook .cell-cta-casa .beijos-cta-header {
  position: absolute !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* ════════════════════════════════════════════════════════════
   HEADER HERO — logo + CTA (overlay desktop/tablette)
════════════════════════════════════════════════════════════ */
.lookbook .header-hero {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
  color: var(--color-secondary);
  width: 90%;
  max-width: 480px;
}

.lookbook .header-hero-logo {
  display: block;
  width: 360px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 24px;
}

.lookbook .header-hero-cta {
  position: static;
  transform: none;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ════════════════════════════════════════════════════════════
   CARROUSEL VERTICAL — 3 images, VRAI SCROLL natif (swipe/molette)
   Fond visible (#F4F4EC) derrière/entre les images. Chaque scroll
   avance d'une image, qui vient se centrer pile — y compris la
   1ère et la dernière, grâce aux espaceurs (.vertical-carousel-spacer).
════════════════════════════════════════════════════════════ */
.lookbook .vertical-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background-color: #F4F4EC; /* le fond visible entre/autour des images */
}

.lookbook .vertical-carousel-track {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lookbook .vertical-carousel-track::-webkit-scrollbar { display: none; }

.lookbook .vertical-carousel-slide {
  height: 80%; /* < 100% : laisse apparaître le fond + un aperçu des slides voisines */
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: center; /* la slide se centre PILE au milieu du cadre */
  scroll-snap-stop: always;
  box-sizing: border-box;
  display: flex;
  align-items: center;   /* centrage vertical de l'image dans la slide */
  justify-content: center; /* centrage horizontal de l'image dans la slide */
}

/* Espaceurs haut/bas — en CSS pur (%), donnent la place nécessaire pour
   que même la 1ère et la dernière image puissent se centrer au scroll. */
.lookbook .vertical-carousel-spacer {
  height: 10%; /* (100% - hauteur d'une slide) / 2 */
  width: 100%;
  flex-shrink: 0;
}

.lookbook .vertical-carousel-slide .img-container {
  width: 45%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.lookbook .vertical-carousel-slide .img-container,
.lookbook .vertical-carousel-slide .img-container picture,
.lookbook .vertical-carousel-slide .img-container img {
  display: block;
  object-fit: cover;
}

.lookbook .vertical-carousel-slide .img-container picture,
.lookbook .vertical-carousel-slide .img-container img {
  width: 100%;
  height: 100%;
}

.lookbook .vertical-carousel-nav {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 10px;
  pointer-events: none;
  z-index: 20;
}

.lookbook .vertical-carousel-nav button {
  pointer-events: all;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.lookbook .vertical-carousel:hover .vertical-carousel-nav button { opacity: 1; }

.lookbook .vertical-carousel-nav button svg { width: 12px; height: 12px; }
.lookbook .vertical-carousel-nav button svg path {
  stroke: #000000;
  stroke-width: 2;
  fill: none;
  /* filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); */
}

/* ════════════════════════════════════════════════════════════
   PRODUCT INFO (nom / prix) — SOUS L'IMAGE, HORS OVERLAY
   RÈGLE GÉNÉRALE UNIQUE : tout le padding vertical (haut + bas)
   du bloc nom/prix est géré ICI, pour TOUS les types de blocs
   (2-img, scroll, carrousel...). Toujours entre 15px et 30px.
   Ne jamais surcharger padding-top/bottom ailleurs avec !important —
   seul le padding horizontal (left/right) se différencie par bloc.
   Taille de texte : mobile 11px | tablette 14px | desktop 14px.
════════════════════════════════════════════════════════════ */
.lookbook .product-info {
  width: 100%;
  padding: 16px 0;
}

.lookbook .product-info-left  { text-align: left; }
.lookbook .product-info-right { text-align: right; }

.lookbook .libelle { margin: 0 0 4px; padding: 0; }
.lookbook .libelle:last-child { margin-bottom: 0; }

.lookbook .libelle a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.4;
  transition: opacity var(--transition-base);
}

.lookbook .libelle a:hover { opacity: 0.6; }

/* ════════════════════════════════════════════════════════════
   GRILLE 2 IMAGES PORTRAIT — base
════════════════════════════════════════════════════════════ */
.lookbook .line-2-img { display: flex; gap: 0; align-items: flex-start; flex-wrap: wrap; }

.lookbook .line-2-img .cell {
  flex: 1 1 260px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Ratio fixe pour que les 2 images d'une même rangée aient toujours la même hauteur,
   peu importe le nombre de lignes de nom/prix affichées en dessous */
.lookbook .line-2-img .cell:not(.cell-cta-casa) .img-container { aspect-ratio: 2 / 3; overflow: hidden; }
.lookbook .line-2-img .cell:not(.cell-cta-casa) .img-container img { width: 100%; height: 100%; object-fit: cover; }
.lookbook .line-2-img .cell > a { display: block; }
.lookbook .line-2-img .cell > a > .img-container { width: 100%; }
.lookbook .line-2-img .cell > a > .img-container picture { display: block; height: 100%; }
.lookbook .line-2-img .cell > a > .img-container picture img { height: 100%; object-fit: cover; }
.lookbook .line-2-img .cell .product-info { padding-left: 15px; padding-right: 15px; padding-bottom: 30px; padding-top: 20px;}

/* Override : la carte storytelling (fond-coquillage) s'affiche à sa taille
   réelle (pas étirée par le ratio 2/3 générique du 2-img ci-dessus) */
.lookbook .line-2-img .cell .storytelling-photo.img-container {
  aspect-ratio: auto !important;
  height: auto !important;
}
.lookbook .line-2-img .cell .storytelling-photo.img-container img {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: unset !important;
}

/* ════════════════════════════════════════════════════════════
   LIGNE SCROLL (IMAGE PAYSAGE) — base
   La largeur est TOUJOURS 100% du conteneur, la hauteur suit
   proportionnellement (jamais l'inverse) — corrige le débordement
   horizontal causé par une image plus large que son conteneur
════════════════════════════════════════════════════════════ */
.lookbook .line-scroll .cell {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.lookbook .line-scroll .img-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.lookbook .line-scroll .img-container picture {
  width: 100%;
  max-width: 100%;
  display: block;
}

.lookbook .line-scroll .img-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Harmonisation : le texte produit (nom/prix) des blocs "IMAGE PAYSAGE"
   doit avoir le même padding horizontal que celui des blocs "2 IMAGES PORTRAIT",
   sinon il est collé au bord alors que l'autre a 15px de marge */
.lookbook .line-scroll .product-info {
  padding-left: 15px;
  padding-right: 15px;
}

/* ════════════════════════════════════════════════════════════
   QUICKSHOP — base
════════════════════════════════════════════════════════════ */
.lookbook .quickshop { display: block; position: relative; text-decoration: none; }

.lookbook .quickAddToCartMobile__button {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  z-index: 15;
  padding: 0;
}

.lookbook .quickAddToCartMobile__button:hover { transform: scale(1.15); }

.lookbook .quickAddToCartMobile__buttonIcon {
  font-size: 22px;
  color: var(--color-secondary);
  opacity: 0.9;
  transition: opacity var(--transition-base);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.lookbook .quickAddToCartMobile__button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.lookbook .quickAddToCartMobile__button:active::before { width: 50px; height: 50px; }

/* ════════════════════════════════════════════════════════════
   STORYTELLING — base (desktop/tablette)
   Structure : fond plein cadre (fond-storytelling) > carte centrée
   > image coquillage (fond-coquillage) > logo en haut + texte en bas
   L'image coquillage s'affiche à sa TAILLE RÉELLE (non étirée,
   non croppée) — le texte reste superposé SUR l'image, en bas.
════════════════════════════════════════════════════════════ */
.lookbook .cell-storytelling {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.lookbook .cell-storytelling .img-container { flex: 1; }

.lookbook .storytelling-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 88%;
  max-height: 92%;
  z-index: 10;
  overflow: visible;
  text-align: center;
}

.lookbook .storytelling-photo {
  position: relative;
  display: inline-block;
  width: auto;
  max-width: 100%;
  overflow: visible;
}

.lookbook .storytelling-photo picture {
  display: block;
}

.lookbook .storytelling-photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Logo — en haut de la carte */
.lookbook .storytelling-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8% 10% 0;
  text-align: center;
  z-index: 2;
}

.lookbook .storytelling-logo {
  display: block;
  width: 55%;
  max-width: 200px;
  height: auto;
  margin: 0;
}

/* Texte — superposé SUR l'image, collé à son bas */
.lookbook .storytelling-text-group {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  padding: 0 10%;
  text-align: center;
  z-index: 2;
}

.lookbook .storytelling-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 8px;
}

/* ════════════════════════════════════════════════════════════
   STORYTELLING MOBILE — bloc dédié, indépendant du desktop
   Structure attendue en HTML :
   .line.line-storytelling-mobile
     > .img-container (fond, picture > img)
     > .storytelling-card
         > .storytelling-photo (picture > img du coquillage)
         > .storytelling-overlay (logo)
         > .storytelling-text-group (texte)

   Le fond est en aspect-ratio 3/4 (portrait, pas carré).
   Le logo et le texte sont positionnés par rapport à .storytelling-card
   (taille stable, %), PAS par rapport à .storytelling-photo (qui elle
   suit la taille réelle de l'image et peut être plus petite) — ainsi
   le texte ne se retrouve jamais coupé ou caché hors de la carte.
   Caché par défaut, affiché uniquement dans les breakpoints mobile.
   Rendu identique quelle que soit la largeur mobile (11px).
════════════════════════════════════════════════════════════ */
.lookbook .line-storytelling-mobile {
  display: none;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: var(--gap);
}

.lookbook .line-storytelling-mobile .img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.lookbook .line-storytelling-mobile .img-container > picture,
.lookbook .line-storytelling-mobile .img-container > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lookbook .line-storytelling-mobile .storytelling-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 82%;
  z-index: 10;
  text-align: center;
  overflow: visible;
}

.lookbook .line-storytelling-mobile .storytelling-photo {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}

.lookbook .line-storytelling-mobile .storytelling-photo picture {
  display: block;
}

.lookbook .line-storytelling-mobile .storytelling-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.lookbook .line-storytelling-mobile .storytelling-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10% 8% 0;
  text-align: center;
  z-index: 2;
}

.lookbook .line-storytelling-mobile .storytelling-logo {
  display: block;
  width: 55%;
  max-width: 130px;
  height: auto;
  margin: 0;
}

.lookbook .line-storytelling-mobile .storytelling-text-group {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  padding: 0 10%;
  text-align: center;
  z-index: 2;
}

.lookbook .line-storytelling-mobile .storytelling-text {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   CARROUSEL MACAO — MOBILE UNIQUEMENT
   Bloc indépendant, même gabarit que .line-storytelling-mobile
   (padding 10px, ratio 3/4) — évite tout conflit de spécificité
   avec les règles .no-gap du bloc desktop équivalent.
   Caché par défaut, affiché uniquement dans les breakpoints mobile.
════════════════════════════════════════════════════════════ */
.lookbook .line-look-macao-mobile {
  display: none;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: var(--gap);
}

.lookbook .line-look-macao-mobile .vertical-carousel {
  aspect-ratio: 3 / 4;
}

.lookbook .line-look-macao-mobile .product-info {
  padding-left: 0;
  padding-right: 0;
  padding-top: 12px;
  padding-bottom: 4px;
}

.lookbook .line-look-macao-mobile .vertical-carousel-slide .img-container {
  width: 45%;
}

/* ════════════════════════════════════════════════════════════
   CTA NOUVELLE COLLECTION — MOBILE UNIQUEMENT
   Bloc indépendant, même gabarit que .line-storytelling-mobile
   et .line-look-macao-mobile (padding 10px, ratio 3/4).
   Caché par défaut, affiché uniquement dans les breakpoints mobile.
════════════════════════════════════════════════════════════ */
.lookbook .line-cta-casa-mobile {
  display: none;
  padding: 20px;
  box-sizing: border-box;
  margin-bottom: var(--gap);
}

.lookbook .line-cta-casa-mobile .img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.lookbook .line-cta-casa-mobile .img-container picture,
.lookbook .line-cta-casa-mobile .img-container picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ════════════════════════════════════════════════════════════
   BLOC "LOOK FEU" — MOBILE UNIQUEMENT
   Texte intro > 2 images côte à côte > liste produits (droite)
   > grand logo TIERRA en texte (police serif display)
   Caché par défaut, affiché uniquement dans les media queries mobile.
   Rendu identique quelle que soit la largeur mobile (11px).
════════════════════════════════════════════════════════════ */
.lookbook .line-look-feu-mobile {
  display: none;
  padding: 24px 20px 32px;
  box-sizing: border-box;
}

.lookbook .look-feu-intro {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 16px;
  text-align: left;
}

.lookbook .look-feu-images {
  display: flex;
  gap: var(--gap);
}

.lookbook .look-feu-cell {
  display: block;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.lookbook .look-feu-cell .img-container {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.lookbook .look-feu-cell .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lookbook .look-feu-list {
  margin-top: 16px;
  text-align: right;
}

.lookbook .look-feu-list .libelle {
  margin: 0 0 6px;
}

.lookbook .look-feu-list .libelle:last-child { margin-bottom: 0; }

.lookbook .look-feu-list .libelle a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.8;
  transition: opacity var(--transition-base);
}

.lookbook .look-feu-list .libelle a:hover { opacity: 0.6; }

.lookbook .look-feu-brand {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 36px auto 0;
}

/* ════════════════════════════════════════════════════════════
   BLOC PRODUITS + LOGO VERTICAL "TIERRA"
════════════════════════════════════════════════════════════ */
.lookbook .line-products-vertical {
  display: flex;
  flex-wrap: wrap;
  position: relative; /* contexte pour le débordement vertical du logo TIERRA */
}

.lookbook .cell-products-block {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
}

.lookbook .products-block-intro {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-text);
  margin: 120px 0 20px;
}

/* Rangée : images + liste + logo — tous alignés sur la même hauteur */
.lookbook .products-block-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 30px;
}

.lookbook .products-block-images {
  display: flex;
  gap: var(--gap);
  width: 40%;
  min-width: 200px;
  flex: 1 1 40%;
}

.lookbook .products-block-image-cell {
  display: block;
  position: relative;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.lookbook .products-block-image-cell .img-container {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.lookbook .products-block-image-cell .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookbook .products-block-list {
  flex: 1 1 auto;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 16px;
}

.lookbook .products-block-list .libelle {
  margin: 0 0 4px;
}

.lookbook .products-block-list .libelle a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity var(--transition-base);
  /* font-size / letter-spacing / line-height hérités de .lookbook .libelle a
     pour rester cohérent avec les breakpoints (mobile 11px | tablette 14px | desktop 14px) */
}

.lookbook .products-block-list .libelle a:hover { opacity: 0.6; }

/* Logo TIERRA — IMAGE (pas du texte), pivotée à la verticale, collée
   sur le côté droit de la ligne (margin-left: auto), mais dimensionnée
   pour dépasser la hauteur de la ligne elle-même (voir breakpoints) */
.lookbook .cell-vertical-brand {
  flex: 0 0 auto;
  container-type: size;
  width: clamp(40px, 9vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  overflow: visible; /* laisse le logo déborder au lieu d'être rogné */
  position: relative;
}

.lookbook .vertical-brand-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100cqh;   /* hauteur de base = hauteur de la colonne (voir breakpoints pour l'agrandir) */
  height: 100cqw;  /* épaisseur du logo = largeur de la colonne ci-dessus */
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-90deg);
  display: block;
  z-index: 5; /* passe au-dessus du storytelling qu'il chevauche en débordant */
}

/* ════════════════════════════════════════════════════════════
   BLOC "LOOK ROBE PERFECT" — 2 images resserrées à gauche,
   grand espace vide, texte produit aligné en bas à droite
════════════════════════════════════════════════════════════ */
.lookbook .line-look-perfect {
  display: flex;
  align-items: flex-end;
  gap: var(--gap);
}

.lookbook .line-look-perfect-images {
  display: flex;
  gap: var(--gap);
  width: 55%;
  max-width: 620px;
  flex: 0 0 auto;
}

.lookbook .line-look-perfect-cell {
  display: block;
  position: relative;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}

.lookbook .line-look-perfect-cell .img-container {
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

.lookbook .line-look-perfect-cell .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookbook .line-look-perfect-info {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  padding: 16px 20px 8px 0;
}

.lookbook .line-look-perfect-info .libelle {
  margin: 0 0 4px;
}

.lookbook .line-look-perfect-info .libelle:last-child {
  margin-bottom: 0;
}

.lookbook .line-look-perfect-info .libelle a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity var(--transition-base);
  /* font-size / letter-spacing / line-height hérités de .lookbook .libelle a
     pour rester cohérent avec les breakpoints (mobile 11px | tablette 14px | desktop 14px) */
}

.lookbook .line-look-perfect-info .libelle a:hover { opacity: 0.6; }

/* ════════════════════════════════════════════════════════════
   BLOC "LOOK ALMA/DAISY" — images paysage, sans crop, sécurisées
════════════════════════════════════════════════════════════ */
.lookbook .line-2-img.line-look-alma {
  gap: 20px !important;
  padding: 30px !important;
  box-sizing: border-box;
  /* align-items: center !important; */
  flex-wrap: wrap;
}

.lookbook .line-2-img.line-look-alma .cell {
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  flex: 1 1 280px;
}

.lookbook .line-2-img.line-look-alma .cell .img-container {
  aspect-ratio: auto !important;
  height: auto !important;
  width: 100%;
  max-width: 100%;
  max-height: 70vh;
  overflow: hidden;
}

.lookbook .line-2-img.line-look-alma .cell .img-container img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain !important;
}

.lookbook .line-2-img.line-look-alma .cell > a > .img-container picture img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain !important;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  BREAKPOINTS — DU PLUS GRAND AU PLUS PETIT              ║
   ╚══════════════════════════════════════════════════════════╝

   ┌─────────────────────────────────────────────────────────┐
   │  DESKTOP (unifié) ≥ 1025px  → texte 14px                │
   │    (le rendu est identique pour tout écran ≥1025px,     │
   │     y compris au‑delà de 1440px : plus de variante       │
   │     "large desktop" séparée)                             │
   │  TABLET   768px – 1024px    → texte 14px                │
   │    (mêmes dimensions/espacements que le desktop,          │
   │     seule la taille du texte change)                      │
   │  MOBILE   ≤ 767px           → texte 11px                │
   │    (rendu unique et homogène sur toute la plage mobile,   │
   │     plus de distinction "mobile" / "mobile small")        │
   └─────────────────────────────────────────────────────────┘ */

/* ════════════════════════════════════════════════════════════
   DESKTOP (unifié) ≥ 1025px — texte 14px
   Couvre l'ancien "Desktop 1025–1439" ET l'ancien
   "Large Desktop ≥1440" : rendu strictement identique au‑delà
   de 1440px, comme demandé.
════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .lookbook .hidden-d { display: none !important; }
  .lookbook .beijos-cta-mobile-only { display: none !important; }
  .lookbook .line-storytelling-mobile { display: none !important; }

  .lookbook .line-flex { display: flex; flex-wrap: wrap; gap: var(--gap); padding: 60px var(--gap) 30px; }

  .lookbook .quickshop:hover .quickAddToCartMobile__button { display: flex; }

  /* Product info — texte 14px */
  .lookbook .product-info { padding: 24px 0; }
  .lookbook .libelle a   { font-size: 14px; letter-spacing: 1px; }

  /* CTA */
  .lookbook .beijos-cta-header { padding: 14px 30px; font-size: 14px; }

  /* Header hero */
  .lookbook .header-hero-logo { width: 260px; }

  /* Storytelling */
  .lookbook .storytelling-card    { width: 420px; }
  .lookbook .storytelling-logo    { max-width: 200px; }
  .lookbook .storytelling-text    { font-size: 14px; margin-bottom: 12px; }
  .lookbook .storytelling-subtext { font-size: 14px; }

  /* Bloc produits + TIERRA */
  .lookbook .products-block-intro { font-size: 14px; }
  .lookbook .cell-vertical-brand {
    width: clamp(90px, 13vw, 200px); /* colonne + épaisse pour un logo plus imposant */
  }
  }
  .lookbook .products-block-list { padding-top: 24px; }

  /* Bloc LOOK ROBE PERFECT */
  .lookbook .line-look-perfect-info { padding-top: 24px; }

  /* Bloc Alma/Daisy */
  .lookbook .line-2-img.line-look-alma .cell .img-container,
  .lookbook .line-2-img.line-look-alma .cell .img-container img { max-height: 65vh; }
}

/* ════════════════════════════════════════════════════════════
   TABLET 768px – 1024px — texte 14px
   Toutes les dimensions/espacements/mises en page sont alignés
   sur le bloc DESKTOP ci‑dessus : seule la taille du texte change.
   Les quelques exceptions (bouton quickshop et flèches carrousel
   toujours visibles) sont conservées car nécessaires au tactile
   (pas de survol/hover disponible sur tablette).
════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) {
  /* hidden-m NE doit PAS être masqué en tablette : ces blocs (carrousels,
     CTA...) n'ont pas d'équivalent "mobile uniquement" affiché en tablette
     (les blocs -mobile ne s'affichent que ≤767px). Les masquer ici créerait
     un trou où rien ne s'affiche entre 768px et 1024px. La tablette affiche
     donc la même version que le desktop pour ces blocs. */
  /* hidden-mob-only : caché uniquement en mobile, visible en tablette */
  .lookbook .hidden-mob-only { display: flex !important; }
  .lookbook .line-storytelling-mobile { display: none !important; }
  .lookbook .beijos-cta-mobile-only { display: none !important; }

  .lookbook .line-flex { display: flex; flex-wrap: wrap; gap: var(--gap); padding: 60px var(--gap) 30px; }

  /* CTA — même gabarit que desktop, texte 14px */
  .lookbook .beijos-cta-header { padding: 14px 30px; font-size: 14px; }

  /* Quickshop — toujours visible (pas de hover tactile) */
  .lookbook .quickAddToCartMobile__button { display: flex; }

  /* Carrousel vertical — flèches toujours visibles (pas de hover tactile) */
  .lookbook .vertical-carousel-nav button { opacity: 1; width: 18px; height: 18px; }

  /* Header hero — même gabarit que desktop */
  .lookbook .header-hero.hidden-mob-only { display: block !important; }
  .lookbook .header-hero-logo { width: 260px; }

  /* Product info — même gabarit que desktop, texte 14px */
  .lookbook .product-info { padding: 24px 0; }
  .lookbook .libelle a   { font-size: 14px; letter-spacing: 1px; }

  /* Storytelling — même gabarit que desktop, texte 14px */
  .lookbook .storytelling-card    { width: 420px; }
  .lookbook .storytelling-logo    { max-width: 200px; }
  .lookbook .storytelling-text    { font-size: 14px; margin-bottom: 12px; }
  .lookbook .storytelling-subtext { font-size: 14px; }

  /* Bloc produits + TIERRA — même gabarit que desktop, texte 14px */
  .lookbook .products-block-intro { font-size: 14px; }
  .lookbook .cell-vertical-brand { width: clamp(55px, 9vw, 120px); }
  .lookbook .products-block-list { padding-top: 24px; }

  /* Bloc LOOK ROBE PERFECT — même gabarit que desktop */
  .lookbook .line-look-perfect-info { padding-top: 24px; }

  /* Bloc Alma/Daisy — même gabarit que desktop */
  .lookbook .line-2-img.line-look-alma .cell .img-container,
  .lookbook .line-2-img.line-look-alma .cell .img-container img { max-height: 65vh; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE ≤ 767px — texte 11px
   Bloc unique et homogène : plus de distinction "mobile" (480‑767)
   / "mobile small" (≤479) — même rendu quelle que soit la largeur
   de l'écran mobile.
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .lookbook .hidden-m { display: none !important; }
  .lookbook .hidden-mob-only { display: none !important; }

  .lookbook .line-flex { display: flex; flex-wrap: wrap; gap: var(--gap); padding: 0 var(--gap); }
  .lookbook .line-2-img:not(.line-look-alma) { flex-direction: row; gap: var(--gap); }
  .lookbook .line-2-img:not(.line-look-alma) .cell { width: calc(50% - 2.5px); flex: none; }

  /* CTA */
  .lookbook .beijos-cta-header {
    padding: 10px 20px;
    font-size: 11px;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
  }

  .lookbook .beijos-cta-mobile-only {
    display: block !important;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 10;
  }

  /* Product info — texte 11px, homogène sur toute la plage mobile */
  .lookbook .product-info { padding: 18px 0; }
  .lookbook .line-2-img .cell .product-info { padding-left: 10px; padding-right: 10px; }
  .lookbook .line-scroll .product-info { padding-left: 10px; padding-right: 10px; }
  .lookbook .libelle a   { font-size: 11px; letter-spacing: 1px; line-height: 1.2; }

  /* Quickshop */
  .lookbook .quickAddToCartMobile__button { display: flex; width: 36px; height: 36px; top: 12px; right: 12px; }
  .lookbook .quickAddToCartMobile__buttonIcon { font-size: 20px; }

  /* Carrousel vertical */
  .lookbook .vertical-carousel-nav button { opacity: 1; width: 18px; height: 18px; }
  .lookbook .vertical-carousel-nav button svg { width: 10px; height: 10px; }
  .lookbook .vertical-carousel-slide .img-container { width: 65%; }

  /* cell-cta-casa */
  .lookbook .cell-cta-casa { padding: 10px; }

  /* Bloc produits + TIERRA — texte 11px */
  .lookbook .products-block-intro { font-size: 11px; }
  .lookbook .products-block-list { padding-top: 18px; }

  /* Bloc LOOK ROBE PERFECT — images plus grandes, centrées, texte dessous */
  .lookbook .line-look-perfect {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px !important;
    gap: 0 !important;
  }
  .lookbook .line-look-perfect-images {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center;
  }
  .lookbook .line-look-perfect-info {
    width: 100%;
    padding: 16px 0 0 0 !important;
    text-align: right;
  }

  /* Storytelling mobile */
  .lookbook .line-storytelling-mobile { display: block; }

  /* Look feu mobile */
  .lookbook .line-look-feu-mobile { display: block; }

  /* Carrousel Macao mobile */
  .lookbook .line-look-macao-mobile { display: block; }

  /* CTA Nouvelle collection mobile */
  .lookbook .line-cta-casa-mobile { display: block; }

  /* Bloc Alma/Daisy — 2 images côte à côte, SANS crop, homogène sur toute la plage mobile */
  .lookbook .line-2-img.line-look-alma {
    padding: 0px !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  .lookbook .line-2-img.line-look-alma .cell {
    width: calc(50% - 5px) !important;
    flex: none !important;
  }
  .lookbook .line-2-img.line-look-alma .cell .img-container,
  .lookbook .line-2-img.line-look-alma .cell .img-container img {
    max-height: 45vh;
  }
  .lookbook .line-2-img.line-look-alma .product-info {
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }
}