/* Maison Bayu — finitions V2 : boutique, filtres, outlet, fiche produit */

html.mbf-lock, html.mbf-lock body { overflow: hidden; }

/* ---------- Intro : variante texte seul (outlet) ---------- */
.shop-intro.is-textonly .shop-intro__grid { grid-template-columns: 1fr; }
.shop-intro.is-textonly h1 { max-width: none; }
.shop-intro.is-textonly .lede { max-width: 60ch; }

/* ---------- Barre de filtres ---------- */
.mbf { position: relative; padding: 8px 0 0; }
.mbf[hidden] { display: none !important; }
.mbf-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; border-top: 1px solid rgba(44,36,32,.12); border-bottom: 1px solid rgba(44,36,32,.12);
}
.mbf-open {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 16px 0 12px;
  background: none; border: 1px solid rgba(44,36,32,.2);
  font: inherit; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #2C2420;
  cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.mbf-open:hover { border-color: #2C2420; }
.mbf-n { font-style: normal; font-size: 10px; letter-spacing: 0; }
.mbf-n:not(:empty) {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: #2C2420; color: #fff;
}
.mbf-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
.mbf-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 12px;
  border: 1px solid rgba(44,36,32,.14); border-radius: 999px; background: #fff;
  font: inherit; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #2C2420; cursor: pointer;
}
.mbf-chip:hover { border-color: #2C2420; }
.mbf-count { margin: 0 0 0 auto; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6F675F; }

/* Tiroir */
.mbf-scrim {
  position: fixed; inset: 0; z-index: 10000; background: rgba(20,16,14,.28);
  opacity: 0; transition: opacity .26s ease;
}
.mbf-panel {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 10001;
  width: min(420px, 100vw); background: #fff; color: #2C2420;
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.7,.2,1);
  box-shadow: 20px 0 60px rgba(20,16,14,.08);
}
.mbf.is-open .mbf-scrim { opacity: 1; }
.mbf.is-open .mbf-panel { transform: none; }
.mbf-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 28px; border-bottom: 1px solid rgba(44,36,32,.1);
}
.mbf-head p { margin: 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.mbf-x { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -10px; background: none; border: 0; color: inherit; cursor: pointer; }
.mbf-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 28px 24px; overscroll-behavior: contain; }
.mbf-group { border: 0; margin: 0; padding: 22px 0 18px; border-bottom: 1px solid rgba(44,36,32,.08); }
.mbf-group:last-child { border-bottom: 0; }
.mbf-group legend { padding: 0; margin: 0 0 12px; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #6F675F; }
.mbf-opt {
  display: flex; align-items: center; gap: 12px; min-height: 40px; cursor: pointer;
  font-size: 14px; font-weight: 300;
}
.mbf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mbf-opt > span { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 auto; }
.mbf-opt > span::before {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid rgba(44,36,32,.35);
  background: #fff; transition: background .15s ease, box-shadow .15s ease;
}
.mbf-opt input[type="radio"] + span::before { border-radius: 50%; }
.mbf-opt input:checked + span::before { background: #2C2420; border-color: #2C2420; box-shadow: inset 0 0 0 3px #fff; }
.mbf-opt input:focus-visible + span { outline: 2px solid #2C2420; outline-offset: 3px; }
.mbf-opt small { font-size: 11px; color: #6F675F; }
.mbf-opt.is-empty { opacity: .4; }
.mbf-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mbf-foot {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 16px 28px 22px; border-top: 1px solid rgba(44,36,32,.1);
}
.mbf-clear, .mbf-go {
  min-height: 46px; padding: 0 18px; font: inherit; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
}
.mbf-clear { background: none; border: 1px solid rgba(44,36,32,.2); color: #2C2420; }
.mbf-go { background: #2C2420; border: 1px solid #2C2420; color: #fff; }

/* ---------- Lignes (une catégorie = une ligne qui swipe) ---------- */
.mb-rail-head.has-more {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.mb-rail-more {
  flex: 0 0 auto; padding-bottom: 4px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #2C2420;
  border-bottom: 1px solid currentColor;
}
.mb-rail-more:hover { opacity: .55; }
html body #grid > .mb-rail { padding-top: 40px; padding-bottom: 32px; }

/* ---------- Outlet ---------- */
html body #grid .cards.mb-outlet-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 18px; padding: 36px 0 56px;
}
@media (max-width: 980px) { html body #grid .cards.mb-outlet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; } }

/* ---------- Écran d'ouverture de la boutique ---------- */
.mb-welcome-gate {
  position: fixed; inset: 0; z-index: 10002;
  display: grid; grid-template-columns: 1fr; place-items: center; background: #fff; color: #2C2420;
  animation: mbw-in .6s ease both;
}
.mb-welcome-gate figure { margin: 0; overflow: hidden; }
.mb-welcome-gate figure img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 42%; }
.mb-welcome-gate__copy {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px clamp(28px, 6vw, 96px);
}
.mb-welcome-gate__logo { height: 44px; width: auto; margin: 0 0 48px; }
.mb-welcome-gate .kicker { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #6F675F; margin: 0 0 16px; }
.mb-welcome-gate h2 { font-weight: 300; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 40px; }
.mb-welcome-gate h2 em { display: block; font-style: italic; color: #9A7B5C; }
.mb-welcome-gate__lede { font-size: 16px; line-height: 1.6; color: #4A423B; max-width: 34ch; margin: -16px 0 36px; }
.mb-welcome-gate__go {
  min-height: 48px; padding: 0 30px; border: 0; background: #2C2420; color: #fff;
  font: inherit; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; cursor: pointer;
  transition: background .2s ease;
}
.mb-welcome-gate__go:hover { background: #000; }
.mb-welcome-gate.is-leaving { animation: mbw-out .65s cubic-bezier(.6,0,.2,1) forwards; pointer-events: none; }
@keyframes mbw-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mbw-out { to { opacity: 0; transform: translateY(-3%); } }
@media (max-width: 860px) {
  .mb-welcome-gate__copy { padding: 28px 22px 36px; }
  .mb-welcome-gate__logo { height: 32px; margin-bottom: 24px; }
  .mb-welcome-gate h2 { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mb-welcome-gate, .mb-welcome-gate.is-leaving { animation-duration: .01s; }
  .mbf-panel, .mbf-scrim { transition: none; }
}
@media (max-width: 640px) {
  .mbf-count { width: 100%; margin: 0; order: 3; }
  .mb-rail-head.has-more { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* ---------- Fiche produit : pyramide olfactive ---------- */
section.pyr2-film {
  margin-left: calc(50% - 50vw); width: 100vw;
  background: #fff; color: #2C2420;
  height: auto !important; padding: clamp(64px, 9vw, 128px) 0 clamp(56px, 8vw, 112px);
  border-top: 1px solid rgba(44,36,32,.1);
}
.pyr2-head { text-align: center; margin: 0 auto clamp(40px, 5vw, 72px); }
.pyr2-head .kicker { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: #6F675F; margin: 0 0 14px; }
.pyr2-head h2 { font-weight: 300; font-size: clamp(26px, 3.2vw, 44px); letter-spacing: .12em; text-transform: uppercase; line-height: 1.15; margin: 0; }
.pyr2-floors {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px); align-items: end;
  max-width: 1080px;
}
.pyr2[style*="--n:1"] .pyr2-floors { max-width: 420px; }
.pyr2[style*="--n:2"] .pyr2-floors { max-width: 760px; }
.pyr2-floor { display: flex; flex-direction: column; min-width: 0; }
/* escalier : la tête s'évapore la première, le fond reste */
.pyr2-img { margin: 0; overflow: hidden; background: #F4F1ED; aspect-ratio: 3 / 4; }
.pyr2[style*="--n:3"] .pyr2-floor:nth-child(1) .pyr2-img { aspect-ratio: 4 / 4; }
.pyr2[style*="--n:3"] .pyr2-floor:nth-child(2) .pyr2-img { aspect-ratio: 4 / 4.9; }
.pyr2[style*="--n:3"] .pyr2-floor:nth-child(3) .pyr2-img { aspect-ratio: 4 / 5.8; }
.pyr2[style*="--n:2"] .pyr2-floor:nth-child(1) .pyr2-img { aspect-ratio: 4 / 4.4; }
.pyr2[style*="--n:2"] .pyr2-floor:nth-child(2) .pyr2-img { aspect-ratio: 4 / 5.4; }
.pyr2-img img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center;
  filter: saturate(.9); transition: opacity .35s ease, transform 1.2s ease;
}
.pyr2-img img.is-swap { opacity: .15; }
.pyr2-floor:hover .pyr2-img img { transform: scale(1.03); }
.pyr2-txt { padding: 20px 0 0; border-top: 0; min-height: 132px; }
.pyr2-lvl {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.pyr2-lvl span { font-size: 10px; letter-spacing: .08em; color: #6F675F; }
.pyr2-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pyr2-notes button {
  padding: 4px 0; background: none; border: 0; font: inherit; font-size: 15px; font-weight: 300; color: #6F675F;
  border-bottom: 1px solid transparent; cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.pyr2-notes button[aria-pressed="true"], .pyr2-notes button:hover { color: #2C2420; border-bottom-color: #2C2420; }
@media (max-width: 760px) {
  .pyr2-floors { grid-template-columns: 1fr; max-width: 420px !important; gap: 40px; }
  .pyr2 .pyr2-floor .pyr2-img { aspect-ratio: 4 / 3 !important; }
  .pyr2-txt { min-height: 0; }
}

/* ---------- Fiche produit : 50 % texte / 50 % produits ---------- */
.also .mb-discover.is-split.is-half,
.also .mb-discover.is-split.is-half.is-flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(48px, 6vw, 88px) 4vw;
}
.also .mb-discover.is-half + .mb-discover.is-half { border-top: 1px solid rgba(44,36,32,.1); padding-top: clamp(48px, 6vw, 88px); }
.also .mb-discover.is-half .mb-discover-label { padding: 0; max-width: 34ch; }
.also .mb-discover.is-half.is-flip .mb-discover-label { justify-self: end; }
.also .mb-discover.is-half .section-title {
  font-size: clamp(24px, 3vw, 40px); font-weight: 300; letter-spacing: .1em; line-height: 1.15;
}
.also .mb-discover.is-half .section-title a { border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.also .mb-discover.is-half .section-title a:hover { border-bottom-color: currentColor; }
.cards.is-also-grid.is-5050 { gap: 28px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.is-also-grid.is-5050[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.cards.is-also-grid.is-5050[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.is-also-grid.is-5050[data-n="1"] .card .ph { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .also .mb-discover.is-split.is-half,
  .also .mb-discover.is-split.is-half.is-flip { grid-template-columns: 1fr; gap: 24px; }
  .also .mb-discover.is-half.is-flip .mb-discover-label { order: 0; justify-self: start; text-align: left; }
  .also .mb-discover.is-half.is-flip .mb-discover-board { order: 1; }
  .cards.is-also-grid.is-5050[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Diffuseurs : certaines photos sont en paysage — on remplit le carré pour que la ligne reste alignée */
html body .card .ph img.is-diffuser,
html body .card img.is-diffuser { object-fit: cover !important; }

/* ===== Discipline « Byredo » — boutique, catégories, outlet ===== */
html[data-house] main.wrap,
html[data-outlet] main.wrap { width: 100%; max-width: none; padding: 0 var(--g, 32px); }

/* Intro : texte en bas à gauche, image pleine hauteur collée au bord droit */
html body .shop-intro.wrap { width: 100%; max-width: none; padding: 0 0 0 var(--g, 32px); }
html body .shop-intro__grid { grid-template-columns: 1fr 1fr; gap: 0 var(--g, 32px); align-items: end; }
html body .shop-intro__copy { padding: 0 0 48px; align-self: end; }
html body .shop-intro__crumbs { display: none; }
html body .shop-intro h1 {
  font-size: clamp(34px, 4.4vw, 64px); font-weight: 300; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; max-width: none; color: #111;
}
/* compteur du H1 en pseudo-élément : hors du texte du titre (SEO), même rendu que l'ancien <sup> */
html body .shop-intro h1[data-mb-total]::after {
  content: attr(data-mb-total); font-size: .32em; letter-spacing: .04em; vertical-align: super; margin-left: .4em; font-weight: 400;
}
html body .shop-intro h1 sup,
html body .mb-rail .section-title sup {
  font-size: .32em; letter-spacing: .04em; vertical-align: super; margin-left: .4em; font-weight: 400;
}
html body .shop-intro .lede { max-width: 62ch; margin-top: 24px; font-size: 15px; line-height: 1.55; color: #111; }
html body .shop-intro__visual { min-height: 0; }
html body .shop-intro__visual figure {
  aspect-ratio: auto; height: calc(100svh - var(--mb-hdr-h, 80px) - 72px); min-height: 420px; max-height: 820px; background: #F4F3F1;
}
html body .shop-intro__visual img { filter: none; object-position: center; }
html body .shop-intro.is-textonly { padding: 72px var(--g, 32px) 8px; }
html body .shop-intro.is-textonly .shop-intro__copy { padding-bottom: 32px; }
html body .shop-intro__pills { display: none; }

/* Filtres : une ligne, sans cadre */
html body .mbf { padding: 0; }
html body .mbf-bar { border: 0; padding: 18px 0; }
html body .mbf-open { border: 0; padding: 0; min-height: 36px; gap: 12px; font-size: 12px; letter-spacing: .14em; }
html body .mbf-n:not(:empty) { background: none; color: inherit; min-width: 0; padding: 0; height: auto; font-size: 9px; vertical-align: super; }
html body .mbf-n:not(:empty)::before { content: "("; } html body .mbf-n:not(:empty)::after { content: ")"; }
html body .mbf-n:empty::before { content: "(0)"; font-size: 9px; }
html body .mbf-count { color: #111; font-size: 11px; }

/* Lignes : même marge que tout le reste, titres sobres */
html body #grid > .mb-rail { padding: 36px var(--g, 32px) 28px; }
html body #grid > .mb-rail + .mb-rail { box-shadow: none; }
html body .mb-rail .section-title {
  font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; letter-spacing: .16em; text-transform: uppercase; color: #111;
}
html body .mb-rail-desc { font-size: 14px; color: #6F675F; margin-top: 6px; }
html body .mb-rail-head { margin-bottom: 20px; }
html body .mb-rail-track { gap: 12px; }
html body .mb-rail-track .card { flex: 0 0 calc((100% - 36px) / 4); }
/* Familles : images de senteur carrées (entre deux pots différents, ou en fin de rangée courte), de la taille des cartes.
   2 ou 3 tuiles au total : elles se partagent toute la largeur (cartes plus grandes). */
html body .mb-rail-track .mb-rail-fill { margin: 0; overflow: hidden; align-self: flex-start; aspect-ratio: 1 / 1; flex: 0 0 calc((100% - 36px) / 4); background: #f7f7f7; }
html body .mb-rail-track .mb-rail-fill img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
html body .mb-rail-track:has(> .mb-rail-fill[data-t="2"]) > * { flex-basis: calc((100% - 12px) / 2); }
html body .mb-rail-track:has(> .mb-rail-fill[data-t="3"]) > * { flex-basis: calc((100% - 24px) / 3); }

/* Cartes : carré gris clair, produit centré, texte net, pas de rond noir */
html body .card .ph { background: #fff !important; }
html body .card .ph img { padding: 4% !important; }
html body .card .ph img.is-diffuser { padding: 0 !important; }
html body .card .meta { padding: 14px 4px 22px; }
html body .card .eye { font-size: 10px; letter-spacing: .14em; color: #6F675F; margin-bottom: 6px; }
html body .card h3 { font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: #111; }
html body .card .price { font-size: 13px; margin-top: 6px; color: #111; }
html body .card .mb-quick-add {
  width: 32px; height: 32px; top: 10px; right: 10px;
  background: transparent !important; color: transparent !important; border: 0; box-shadow: none;
  font-size: 0;
}
html body .card .mb-quick-add::before {
  content: ""; position: absolute; inset: 7px;
  background: #111;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V7a3 3 0 016 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V7a3 3 0 016 0v1'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .card .mb-quick-add:hover::before { background: #6F675F; }
html body .cards.mb-outlet-grid { gap: 24px 12px; padding-top: 8px; }

/* WhatsApp : discret, monochrome */
html body .mb-wa-btn { background: #111 !important; width: 44px !important; height: 44px !important; box-shadow: 0 6px 18px rgba(0,0,0,.18) !important; }

@media (max-width: 860px) {
  html body .shop-intro.wrap { padding: 0; }
  html body .shop-intro__grid { grid-template-columns: 1fr; }
  html body .shop-intro__copy { order: 2; padding: 28px var(--g, 16px) 8px; }
  html body .shop-intro__visual { order: 1; }
  html body .shop-intro__visual figure { height: 56svh; min-height: 0; }
  html body .shop-intro.is-textonly { padding: 40px var(--g, 16px) 0; }
  html body .mb-rail-track .card { flex-basis: 64%; }
  /* mobile : toutes les tuiles (produits et images de senteur) à la taille d'une grande carte, la rangée défile */
  html body .mb-rail-track > .card, html body .mb-rail-track > .mb-rail-fill { flex-basis: 64% !important; }
}

/* ---------- Fiche produit : un scroll = une page + témoin ---------- */
html.mb-snap { scroll-snap-type: y mandatory; }
html.mb-snap .mb-snap-page { scroll-snap-align: start; scroll-snap-stop: always; }
html.mb-snap body > .wrap:last-of-type,
html.mb-snap footer.mb-site-footer { scroll-snap-align: end; }
html.mb-snap .pdp { min-height: calc(100svh - var(--mb-hdr-h, 80px) - 60px); }
html.mb-snap section.pyr2-film.mb-snap-page { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
html.mb-snap .also .mb-discover.is-half.mb-snap-page { min-height: 100svh; align-content: center; }
.mbp {
  position: fixed; right: 22px; top: 50%; z-index: 40; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: #fff; transition: color .4s ease, opacity .4s ease;
}
.mbp[hidden] { display: none; }
.mbp.is-light { color: #2C2420; }
.mbp.is-off { opacity: 0; pointer-events: none; }
.mbp-track { position: relative; width: 1px; height: 132px; background: currentColor; opacity: .35; cursor: pointer; }
.mbp-track::before { content: ""; position: absolute; inset: 0 -10px; }
.mbp-thumb { position: absolute; left: -.5px; top: 0; width: 2px; background: currentColor; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.mbp-n { font-size: 10px; letter-spacing: .14em; font-variant-numeric: tabular-nums; writing-mode: vertical-rl; }
@media (max-width: 760px) { .mbp { right: 8px; } .mbp-track { height: 96px; } }
@media (prefers-reduced-motion: reduce) { .mbp-thumb { transition: none; } }
.pdp-snap-end { height: 1px; margin-top: -1px; }
html.mb-snap .pdp-snap-end.is-on { scroll-snap-align: end; scroll-snap-stop: always; scroll-margin-bottom: 24px; }
html body .mbp { right: 10px; }

/* ---------- Une page = un écran (fiche produit) ---------- */
/* Pyramide : les hauteurs d'image suivent la hauteur d'écran, l'escalier est conservé */
html.mb-snap section.pyr2-film.mb-snap-page {
  height: 100svh !important; min-height: 0; padding: 48px 0; box-sizing: border-box; overflow: hidden;
}
html.mb-snap .pyr2-head { margin-bottom: clamp(20px, 4svh, 48px); }
html.mb-snap .pyr2 .pyr2-img { aspect-ratio: auto !important; height: calc(var(--h, 44) * 1svh); width: 100%; }
html.mb-snap .pyr2[style*="--n:3"] .pyr2-floor:nth-child(1) { --h: 32; }
html.mb-snap .pyr2[style*="--n:3"] .pyr2-floor:nth-child(2) { --h: 40; }
html.mb-snap .pyr2[style*="--n:3"] .pyr2-floor:nth-child(3) { --h: 48; }
html.mb-snap .pyr2[style*="--n:2"] .pyr2-floor:nth-child(1) { --h: 40; }
html.mb-snap .pyr2[style*="--n:2"] .pyr2-floor:nth-child(2) { --h: 48; }
html.mb-snap .pyr2-txt { min-height: 0; padding-top: 16px; }

/* 50/50 : le carré de 4 tient dans l'écran */
html.mb-snap .also .mb-discover.is-half.mb-snap-page { height: 100svh; min-height: 0; padding-top: 40px; padding-bottom: 40px; box-sizing: border-box; overflow: hidden; }
html.mb-snap .also .mb-discover.is-half .mb-discover-board { width: 100%; justify-self: center; }
html.mb-snap .cards.is-also-grid.is-5050[data-n="4"] { max-width: calc(100svh - 300px); margin: 0 auto; gap: 16px 14px; }
html.mb-snap .cards.is-also-grid.is-5050[data-n="3"] { max-width: calc((100svh - 220px) * 1.6); margin: 0 auto; }
html.mb-snap .cards.is-also-grid.is-5050 .card .meta { padding: 10px 2px 4px; }
html.mb-snap .cards.is-also-grid.is-5050[data-n="1"] { max-width: calc(100svh - 260px); margin: 0 auto; }
html.mb-snap .cards.is-also-grid.is-5050[data-n="1"] .card .ph { aspect-ratio: 1; }

@media (max-width: 760px) {
  html.mb-snap section.pyr2-film.mb-snap-page { padding: 72px 0 32px; }
  html.mb-snap .pyr2-floors { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)) !important; max-width: none !important; gap: 10px; align-items: end; }
  html.mb-snap .pyr2[style*="--n:1"] .pyr2-floors { max-width: 60% !important; }
  html.mb-snap .pyr2[style*="--n:3"] .pyr2-floor:nth-child(1) { --h: 20; }
  html.mb-snap .pyr2[style*="--n:3"] .pyr2-floor:nth-child(2) { --h: 26; }
  html.mb-snap .pyr2[style*="--n:3"] .pyr2-floor:nth-child(3) { --h: 32; }
  html.mb-snap .pyr2[style*="--n:2"] .pyr2-floor:nth-child(1) { --h: 26; }
  html.mb-snap .pyr2[style*="--n:2"] .pyr2-floor:nth-child(2) { --h: 32; }
  html.mb-snap .pyr2-lvl { flex-direction: column; gap: 2px; font-size: 9px; letter-spacing: .14em; margin-bottom: 8px; }
  html.mb-snap .pyr2-notes { flex-direction: column; gap: 0; }
  html.mb-snap .pyr2-notes button { font-size: 12px; padding: 3px 0; text-align: left; }
  html.mb-snap .pyr2-head h2 { font-size: 22px; }
  html.mb-snap .pyr2-txt { padding-top: 12px; }
  html.mb-snap .also .mb-discover.is-half.mb-snap-page { padding: 72px var(--g, 16px) 24px; align-content: start; }
  html.mb-snap .cards.is-also-grid.is-5050[data-n="4"],
  html.mb-snap .cards.is-also-grid.is-5050[data-n="1"] { max-width: calc(100svh - 330px); }
  html.mb-snap .cards.is-also-grid.is-5050 .card h3 { font-size: 11px; }
  html.mb-snap .cards.is-also-grid.is-5050 .card .eye { font-size: 9px; }
}
@media (max-width: 760px) {
  html.mb-snap .pyr2-floors { padding-right: 16px; }
  html.mb-snap .also .mb-discover.is-half.mb-snap-page { padding-right: 28px; }
}

/* Fiche produit plus haute que l'écran : aimantation douce au lieu de stricte */
html.mb-snap.mb-snap-soft { scroll-snap-type: y proximity; }
html.mb-snap.mb-snap-soft .pdp-snap-end.is-on { scroll-snap-align: none; }

/* Carré « même accord » plus grand */
html.mb-snap .cards.is-also-grid.is-5050[data-n="4"],
html.mb-snap .cards.is-also-grid.is-5050[data-n="1"] { max-width: calc(100svh - 230px); }
@media (max-width: 860px) {
  html.mb-snap .also .mb-discover.is-half.mb-snap-page { padding: 64px 24px 20px var(--g, 16px); align-content: center; gap: 18px; }
  html.mb-snap .cards.is-also-grid.is-5050[data-n="4"],
  html.mb-snap .cards.is-also-grid.is-5050[data-n="3"],
  html.mb-snap .cards.is-also-grid.is-5050[data-n="1"] { max-width: min(100%, calc((100svh - 190px) / 1.24)); width: 100%; gap: 12px 12px; }
  html.mb-snap .cards.is-also-grid.is-5050 .card .meta { padding: 8px 2px 2px; }
  html.mb-snap .cards.is-also-grid.is-5050 .card .price { margin-top: 2px; }
}

/* Rangées de bas de page (« Iconiques · Les signatures ») : cartes plus grandes, 3 par ligne */
html body .mb-continue .mb-rail-track .card { flex-basis: calc((100% - 24px) / 3); }
@media (max-width: 860px) { html body .mb-continue .mb-rail-track .card { flex-basis: 72%; } }
/* Bougies parfumées : photo verticale Mojave Desert, cadrée sur la bougie (la fumée en haut peut être coupée) */
html[data-house="bougies"] body .shop-intro__visual img { object-position: 40% 74%; }
/* Parfums d'intérieur : diffuseur et brumes, cadrés au centre des produits */
html[data-house="interieur"] body .shop-intro__visual img { object-position: 55% 62%; }

/* Coffret : une pyramide par bougie */
.pyr-pack-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.pyr-pack-img { margin: 0 0 18px; aspect-ratio: 4 / 5; overflow: hidden; background: #f7f7f7; }
.pyr-pack-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pyr-pack-col h3 { font-size: 15px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.pyr-pack-col dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; line-height: 1.5; }
.pyr-pack-col dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6F675F; padding-top: 3px; }
.pyr-pack-col dd { margin: 0; }
@media (max-width: 760px) { .pyr-pack-cols { grid-template-columns: 1fr; } .pyr-pack-img { aspect-ratio: 16 / 9; } }
/* Coffret : « Dans le coffret » = les noms des senteurs, en grand, section compacte */
html body .also .mb-discover.is-pack-names, html.mb-snap body .also .mb-discover.is-pack-names.mb-snap-page { height: auto; min-height: 0; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); align-content: center; }
html body .is-pack-names .pack-scents { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
html body .is-pack-names .pack-scents li { font-size: clamp(26px, 3.2vw, 44px); font-weight: 300; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }

/* Fiche produit, mobile : « Découvrez aussi » / « Dans le même accord » en rangée à faire défiler, produits grands */
@media (max-width: 720px) {
  html body .also .cards.is-also-grid.is-5050 {
    display: flex !important; grid-template-columns: none; gap: 14px; max-width: none; margin: 0; padding: 0;
    overflow-x: auto !important; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html body .also .cards.is-also-grid.is-5050::-webkit-scrollbar { display: none; }
  html body .also .cards.is-also-grid.is-5050 > .card { flex: 0 0 78%; scroll-snap-align: start; }
  html body .also .cards.is-also-grid.is-5050[data-n="1"] > .card { flex-basis: 100%; }
  html body .also .cards.is-also-grid.is-5050 .card .ph { aspect-ratio: 1 / 1; }
}

/* ---------- Boutique et catégories (règle client 2026-09-29, inspirée de Byredo) : grille de 4 colonnes,
   lignes de 4 produits et grandes lignes (grand produit + grande photo de senteur), « Voir tout » sous la
   première ligne (category.js railTiles) ---------- */
html body #grid .mb-rail-track.is-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 12px;
  overflow: visible; scroll-snap-type: none;
}
html body #grid .mb-rail-track.is-grid > * { flex: none !important; width: auto !important; min-width: 0; }
html body #grid .mb-rail-track.is-grid > .mb-t-big { grid-column: span 2; }
html body #grid .mb-rail-track.is-grid > .mb-t-photo {
  grid-column: span 2; position: relative; margin: 0; aspect-ratio: 1 / 1; align-self: start; overflow: hidden; background: #f7f7f7;
}
html body #grid .mb-t-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body #grid .mb-t-photo figcaption,
html body #grid .mb-t-photo .mb-t-photo-cap {
  position: absolute; left: 18px; top: 16px; right: 18px; display: flex; flex-direction: column; gap: 8px;
  color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
html body #grid .mb-t-photo-k { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
html body #grid .mb-t-photo-n { font-size: clamp(20px, 1.8vw, 28px); font-weight: 300; letter-spacing: .06em; text-transform: uppercase; }
html body #grid a.mb-t-photo { display: block; color: #fff; }
html body #grid a.mb-t-photo img { transition: transform .6s ease; }
html body #grid a.mb-t-photo:hover img { transform: scale(1.03); }
html body #grid a.mb-t-photo .mb-t-photo-n { border-bottom: 1px solid transparent; align-self: flex-start; transition: border-color .2s ease; }
html body #grid a.mb-t-photo:hover .mb-t-photo-n { border-bottom-color: currentColor; }
.mb-note-chip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px var(--g, 32px) 0; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #6F675F; }
.mb-note-chip a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid #111; color: #111; }
.mb-note-chip a:hover { background: #111; color: #fff; }
.mb-note-chip i { font-style: normal; font-size: 14px; line-height: 1; }
html body #grid .mb-rail.is-collapsed .mb-more { display: none !important; }
html body #grid .mb-swipe-nav { display: none; }
html body #grid .mb-rail-all { display: flex; justify-content: center; padding-top: 26px; }
html body #grid .mb-rail-all button {
  background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 4px; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #111;
}
html body #grid .mb-rail-all button:hover { opacity: .6; }
html body #grid .mb-rail-all sup { font-size: 9px; letter-spacing: 0; }
@media (max-width: 860px) {
  html body #grid .mb-rail-track.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
  html body #grid .mb-rail-track.is-grid > .mb-t-pair { grid-column: span 1; }
  html body #grid .mb-rail-track.is-grid > .mb-t-photo { aspect-ratio: 2 / 1; }
}

/* ---------- Fiche produit : « Dans la même collection / famille » — concept de la maquette client au style du site
   (essai 3 validé le 2026-09-29) : moitié photo de senteur pleine hauteur / moitié titre, « Sélection … », produits sur une ligne ---------- */
.also .mb-disc2 {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(100svh, 920px);
  padding: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box;
}
.also .mb-disc2 + .mb-disc2 { margin-top: 2px; }
.also .mb-disc2 .section-title {
  margin: 0; font-size: clamp(24px, 2.8vw, 38px); font-weight: 300; letter-spacing: .1em; line-height: 1.15; text-transform: uppercase;
}
.also .mb-disc2 .section-title a { color: inherit; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.also .mb-disc2 .section-title a:hover { border-bottom-color: currentColor; }
.also .mb-disc2 .mb-disc2-body > .kicker { display: block; margin: 22px 0 22px; }
.mb-disc2-photo { margin: 0; height: 100%; overflow: hidden; background: #f7f7f7; }
.mb-disc2-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-disc2.is-flip .mb-disc2-photo { order: 2; }
.mb-disc2-body { min-width: 0; align-self: center; padding: clamp(40px, 6vh, 72px) clamp(28px, 5vw, 80px); }
.cards.is-also-grid.mb-disc2-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; }
html.mb-snap .also .mb-disc2.mb-snap-page { height: 100svh; min-height: 0; }
@media (max-width: 860px) {
  .also .mb-disc2 { display: block; min-height: 0; }
  .mb-disc2-photo { height: auto; aspect-ratio: 4 / 3; }
  .mb-disc2-body { padding: 28px 16px 40px; }
  .cards.is-also-grid.mb-disc2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-disc2-cards > :nth-child(3) { display: none; }
  html.mb-snap .also .mb-disc2.mb-snap-page { height: auto; }
}

/* Édition limitée : collection annoncée, pas encore de produits */
html body #grid > .mb-rail.mb-rail-soon { padding-bottom: 40px; }
html body .shop-intro__visual figure picture { display: block; width: 100%; height: 100%; }