/* ─── BHÉTÉ86 — site officiel ───
   Shared shell: the fixed bar (SHOP · ABOUT · logo · CONTACT · SOUND), the
   full-screen video behind it, and the page frame every section sits in.
   The sign-up page keeps its own styles.css. */

:root {
  --ink-0: #000000;
  --paper-0: #FFFFFF;
  --paper-1: #F5F5F3;
  --paper-2: #8A8A86;
  --line-1: #2A2A28;
  --accent: #7E2B2B;      /* le rouge des sérigraphies */
  --accent-dark: #641F1F;

  --font-core: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --weight-regular: 300;
  --weight-medium: 400;
  --weight-semibold: 500;
  --nav-size: 15px;
  --nav-tracking: 0.08em;

  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-slow: 900ms;
}

/* Yeezy's type: IBM Plex Mono, thin and mechanical. While it loads, the
   system mono stands in so nothing jumps from proportional to monospaced. */
@font-face {
  font-family: "Plex Mono Fallback";
  src: local("SF Mono"), local("Menlo"), local("Consolas"), local("Courier New");
  font-weight: 200 600;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body { margin: 0; padding: 0; background: #000000; }
body {
  color: var(--paper-1);
  font-family: var(--font-core);
  font-size: 15px;
  line-height: 1.55;
}
[hidden] { display: none !important; }
.b86 { position: relative; touch-action: manipulation; }
.b86 :focus-visible { outline: 1px solid var(--paper-1); outline-offset: 3px; }

/* ─── The bar ─── */
.b86-nav {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
  padding: clamp(16px, 3.2vh, 32px) clamp(12px, 4vw, 56px);
  animation: b86-fade var(--duration-slow) var(--ease-premium) both;
}
/* Two links each side of the mark, at every width: no burger, nothing hidden. */
.b86-nav-side {
  display: flex;
  align-items: center;
  gap: clamp(12px, 4.5vw, 64px);
  min-width: 0;
}
.b86-nav-side--end { justify-content: flex-end; }
/* `.b86 ` prefix on purpose: on the contact page styles.css loads after this
   file and its `.b86-page a` rule would otherwise grey the bar out. */
.b86 .b86-nav a {
  font-size: clamp(12px, 1.35vw, 18px);
  font-weight: var(--weight-medium);
  letter-spacing: clamp(0.04em, 0.3vw, 0.08em);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--paper-0);
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86 .b86-nav a:hover { color: #FFFFFF; opacity: 0.6; }
.b86 .b86-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.b86-nav-home { display: block; line-height: 0; }
.b86-nav-mark {
  display: block;
  width: clamp(130px, 19vw, 250px);
  height: auto;
  filter: brightness(0) invert(1);
}
/* The bar reads white over the video; on the white pages it flips to ink. */
.b86.b86--light .b86-nav a { color: var(--ink-0); }
.b86--light .b86-nav-mark { filter: brightness(0); }

/* FR / EN, a pair of letters before the cart: the current one is underlined. */
.b86-tongue { display: inline-flex; align-items: center; gap: 7px; }
.b86 .b86-nav .b86-tongue-btn {
  padding: 6px 1px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: clamp(13px, 1.3vw, 16px);
  font-weight: var(--weight-medium);
  letter-spacing: clamp(0.04em, 0.3vw, 0.08em);
  line-height: 1;
  color: var(--paper-0);
  opacity: 0.45;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86 .b86-nav .b86-tongue-btn:hover { opacity: 0.8; }
.b86 .b86-nav .b86-tongue-btn[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.b86-tongue-sep { width: 1px; height: 12px; background: currentColor; opacity: 0.35; color: var(--paper-0); }
.b86.b86--light .b86-nav .b86-tongue-btn, .b86--light .b86-tongue-sep { color: var(--ink-0); }
.b86 .b86-nav--ink .b86-tongue-btn, .b86-nav--ink .b86-tongue-sep { color: var(--ink-0); }

/* Phones: the two sides take exactly the room their words need and the mark
   fits whatever is left, so nothing ever touches. The mark sits a hair off the
   true centre when one side is longer than the other, which nobody notices;
   words colliding with the logo, everybody does. */
@media (max-width: 640px) {
  .b86-nav {
    gap: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .b86-nav-home { justify-self: center; min-width: 0; max-width: 100%; }
  /* with only the menu and the cart beside it, the mark can take the room */
  .b86-nav-mark { width: clamp(118px, 40vw, 168px); max-width: 100%; }
  .b86 .b86-nav a { font-size: 11px; letter-spacing: 0.025em; }
  .b86-nav-side { gap: 10px; }
  .b86 .b86-nav .b86-tongue-btn { font-size: 13px; letter-spacing: 0.02em; }
  .b86-tongue { gap: 6px; }
  .b86-cart svg { width: 20px; height: 20px; }
}
@media (max-width: 360px) {
  .b86 .b86-nav a { font-size: 10px; letter-spacing: 0.02em; }
  .b86 .b86-nav .b86-tongue-btn { font-size: 12px; }
  .b86-nav-side { gap: 8px; }
  .b86-nav { gap: 8px; }
}

/* ─── Full-screen video stage ─── */
.b86-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000000;
}
.b86-stage-video,
.b86-stage-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.b86-stage-still { transition: opacity 400ms var(--ease-premium); }
/* any stage, not just the home one: À propos uses its own container */
.b86-moving .b86-stage-still { opacity: 0; }
.b86-video-off { display: none !important; }
/* No native chrome, in any state: iOS otherwise paints its own play button. */
.b86-stage-video::-webkit-media-controls,
.b86-stage-video::-webkit-media-controls-enclosure,
.b86-stage-video::-webkit-media-controls-panel,
.b86-stage-video::-webkit-media-controls-play-button,
.b86-stage-video::-webkit-media-controls-overlay-play-button,
.b86-stage-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
/* Just enough shade under the bar for white type to hold on any frame. */
.b86-stage-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.12) 18%, rgba(0,0,0,0) 36%);
}

@keyframes b86-fade { from { opacity: 0; } to { opacity: 1; } }

/* ─── Light pages (shop, about, contact, sound) ─── */
.b86--light { background: var(--paper-0); color: var(--ink-0); min-height: 100vh; }
.b86-page-body {
  padding: calc(clamp(18px, 3.4vh, 34px) + clamp(74px, 11vh, 104px)) clamp(20px, 4vw, 56px) clamp(60px, 12vh, 120px);
  max-width: 1040px;
  margin: 0 auto;
}
.b86-section-title {
  margin: 0 0 clamp(26px, 5vh, 54px);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-0);
}

/* Product blocks: the garment whole, then the pill, then how it is worn. */
.b86-drop { display: flex; flex-direction: column; gap: clamp(72px, 14vh, 150px); }
.b86-item {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  animation: b86-fade var(--duration-slow) var(--ease-premium) both;
}
/* Never cropped: the piece is shown in its own proportions, centred on white. */
.b86-shot {
  display: block;
  width: auto;
  max-width: min(100%, 560px);
  max-height: clamp(300px, 52vh, 520px);
  margin: 0 auto;
  object-fit: contain;
}
.b86-shot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #E9E9E6;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9A9A95;
}
.b86-buy {
  display: block;
  width: 100%;
  margin-top: clamp(14px, 2.4vh, 22px);
  padding: 19px 24px;
  border: 0;
  border-radius: 2px;
  background: #F2DCE4;
  color: var(--ink-0);
  font-family: var(--font-core);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-premium);
}
.b86-buy:hover { filter: brightness(0.96); }
.b86-buy--blue { background: #DCE2F2; }
.b86-buy--ink { background: var(--ink-0); color: var(--paper-0); }
.b86-soon { cursor: default; pointer-events: none; }

/* Plain text pages */
.b86-prose { max-width: 62ch; margin: 0 auto; }
.b86-prose p { margin: 0 0 1.3em; font-size: 15px; line-height: 1.75; }
.b86-prose a { color: var(--ink-0); }
.b86-links { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 8px; }
.b86-links a {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-0);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: 3px;
}

/* ─── Contact = the sign-up page under the bar ─── */
/* styles.css draws the form; the bar needs room above it, and the socials sit
   just under the sign-up block. */
.b86.b86-page--contact { padding-top: clamp(74px, 12vh, 110px); }
.b86-contact {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* a little below the consent line, without reaching the bottom of the screen */
  margin-top: clamp(34px, 6.5vh, 64px);
  animation: b86-fade var(--duration-slow) var(--ease-premium) 820ms both;
}
.b86-contact-icons { display: flex; align-items: center; gap: 26px; }
.b86-page a.b86-contact-icons > a,
.b86-contact-icons a {
  display: flex;
  color: #FFFFFF;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86-contact-icons a:hover { opacity: 0.6; }
.b86-page a.b86-contact-mail,
.b86-contact-mail {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
}

/* Thank-you, in place of the form */
#b86-thanks {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  text-align: center;
  animation: b86-fade 600ms var(--ease-premium) both;
}
.b86-thanks-title {
  margin: 0 0 14px;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.b86-thanks-line {
  margin: 0;
  max-width: 34ch;
  margin-inline: auto;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* The contact form is tall: on a phone it would push the monogram up into the
   bar. The column starts from the top instead of centring, and the page scrolls
   when the screen is too short. */
.b86.b86-page--contact .b86-main {
  justify-content: flex-start;
  padding-top: clamp(4px, 1.6vh, 22px);
}
/* a slightly smaller monogram here: the form is long, every pixel counts */
.b86.b86-page--contact .b86-ice { width: clamp(76px, 10vw, 120px); }

/* Drop line under the Shop title */
.b86-drop-note {
  margin: -28px 0 clamp(30px, 5vh, 56px);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: #8A8A86;
}
.b86-item-name {
  margin: clamp(22px, 3.4vh, 34px) 0 0;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* One photo at a time: swipe on a phone, small arrows everywhere else.
   Every shot is shown whole — nothing is cropped, packshot or worn. */
.b86-carousel { position: relative; }
.b86-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* no `scroll-behavior: smooth` here: on iPhone it fights the finger and the
     track snaps back to the same slide. The script asks for smooth scrolling
     itself when it moves the track. */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.b86-track::-webkit-scrollbar { display: none; }
.b86-track img {
  flex: 0 0 100%;
  scroll-snap-align: center;
  width: 100%;
  height: clamp(320px, 54vh, 540px);
  object-fit: contain;
}
/* No round buttons: a hairline that fills as you go, and the count in the
   brand's own lettering. On a mouse, the halves of the image step through. */
.b86-carousel-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(16px, 2.6vh, 26px);
}
.b86-progress {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(0, 0, 0, 0.14);
}
.b86-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink-0);
  transition: width 320ms var(--ease-premium);
}

/* the invisible halves that advance the slide under a mouse */
.b86-step {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.b86-step--prev { left: 0; cursor: w-resize; }
.b86-step--next { right: 0; cursor: e-resize; }
@media (hover: none) {
  .b86-step { display: none; }   /* on a phone the finger does the work */
}

/* Plain text pages */
.b86-prose { max-width: 62ch; margin: 0 auto; }
.b86-prose p { margin: 0 0 1.3em; font-size: 15px; line-height: 1.75; }
.b86-prose a { color: var(--ink-0); }
.b86-links { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 8px; }
.b86-links a {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-0);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  padding-bottom: 3px;
}

/* ─── Contact = the sign-up page under the bar ─── */
/* styles.css draws the form; the bar needs room above it, and the socials sit
   just under the sign-up block. */
.b86.b86-page--contact { padding-top: clamp(74px, 12vh, 110px); }
.b86-contact {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* a little below the consent line, without reaching the bottom of the screen */
  margin-top: clamp(34px, 6.5vh, 64px);
  animation: b86-fade var(--duration-slow) var(--ease-premium) 820ms both;
}
.b86-contact-icons { display: flex; align-items: center; gap: 26px; }
.b86-page a.b86-contact-icons > a,
.b86-contact-icons a {
  display: flex;
  color: #FFFFFF;
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86-contact-icons a:hover { opacity: 0.6; }
.b86-page a.b86-contact-mail,
.b86-contact-mail {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
}

/* Thank-you, in place of the form */
#b86-thanks {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  text-align: center;
  animation: b86-fade 600ms var(--ease-premium) both;
}
.b86-thanks-title {
  margin: 0 0 14px;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.b86-thanks-line {
  margin: 0;
  max-width: 34ch;
  margin-inline: auto;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* The contact form is tall: on a phone it would push the monogram up into the
   bar. The column starts from the top instead of centring, and the page scrolls
   when the screen is too short. */
.b86.b86-page--contact .b86-main {
  justify-content: flex-start;
  padding-top: clamp(4px, 1.6vh, 22px);
}
/* a slightly smaller monogram here: the form is long, every pixel counts */
.b86.b86-page--contact .b86-ice { width: clamp(76px, 10vw, 120px); }

/* Drop line under the Shop title */
.b86-drop-note {
  margin: -28px 0 clamp(30px, 5vh, 56px);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: #8A8A86;
}
.b86-item-name {
  margin: clamp(22px, 3.4vh, 34px) 0 0;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* How it is worn: two large frames, plenty of air, no cramped thumbnails. */
.b86-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.8vw, 20px);
  margin-top: clamp(26px, 4.5vh, 48px);
}
.b86-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #F1F1EF;
}

/* ─── Film grain ───
   A noise tile that jumps to a new offset ten times a second: the image stops
   looking like clean digital video and starts looking shot. Costs nothing in
   file weight — it is drawn by the browser, not baked into the video. */
.b86-grain {
  position: absolute;
  z-index: 1;
  inset: -120px;
  pointer-events: none;
  opacity: 0.17;
  mix-blend-mode: overlay;
  /* the noise is recentred on mid-grey: in overlay, anything brighter would
     wash the image out instead of just texturing it */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170'><filter id='n' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncR type='linear' slope='0.55' intercept='0.225'/><feFuncG type='linear' slope='0.55' intercept='0.225'/><feFuncB type='linear' slope='0.55' intercept='0.225'/></feComponentTransfer></filter><rect width='170' height='170' filter='url(%23n)'/></svg>");
  background-size: 170px 170px;
  animation: b86-grain 800ms steps(1, end) infinite;
  will-change: transform;
}
@keyframes b86-grain {
  0%   { transform: translate3d(0, 0, 0); }
  12%  { transform: translate3d(-9px, 5px, 0); }
  25%  { transform: translate3d(7px, -8px, 0); }
  37%  { transform: translate3d(-6px, -7px, 0); }
  50%  { transform: translate3d(8px, 6px, 0); }
  62%  { transform: translate3d(-10px, 3px, 0); }
  75%  { transform: translate3d(5px, 9px, 0); }
  87%  { transform: translate3d(-4px, -5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .b86-grain { animation: none; }
}
/* touch screens: no blend mode over the film. Blending makes the browser
   recompose the whole screen on every frame of video, and the scroll pays
   for it; a faint plain grain keeps the look for next to nothing. */
@media (hover: none) {
  .b86-grain { mix-blend-mode: normal; opacity: 0.06; }
}

/* ─── The shop, right under the video ─── */
.b86-shop {
  position: relative;
  z-index: 2;
  background: var(--paper-0);
  color: var(--ink-0);
  padding: clamp(54px, 10vh, 110px) clamp(20px, 4vw, 56px) clamp(70px, 13vh, 140px);
}
.b86-shop > * { max-width: 1040px; margin-inline: auto; }
.b86-shop .b86-drop-note { margin-top: 0; }

/* Over the video the bar is white; once the white shop scrolls under it, the
   bar turns to ink and lays a sheet of white behind itself to stay readable. */
.b86-nav--ink {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}
.b86 .b86-nav--ink a { color: var(--ink-0); }
.b86-nav--ink .b86-nav-mark { filter: brightness(0); }
.b86-nav { transition: background var(--duration-fast) var(--ease-premium); }

/* The cart sits alone on the right: same weight as the words on the left. */
.b86-cart { display: flex; }
.b86-cart svg { display: block; }

/* ─── Product page ─── */
.b86-product {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vh, 56px);
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(clamp(16px, 3.2vh, 32px) + clamp(76px, 11vh, 108px)) clamp(20px, 4vw, 56px) clamp(70px, 12vh, 130px);
}
@media (min-width: 900px) {
  .b86-product {
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(40px, 5vw, 90px);
    align-items: start;
  }
  /* the photos stay in view while the right column is read */
  .b86-product-info { position: sticky; top: clamp(96px, 14vh, 140px); }
}
.b86-product-media .b86-track img { height: clamp(360px, 62vh, 620px); }

/* Name and price face each other across one rule, like a spec sheet. */
.b86-product-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-0);
  margin-bottom: clamp(24px, 3.6vh, 34px);
}
.b86-product-name {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.b86-product-price {
  margin: 0;
  flex: 0 0 auto;
  font-size: 13px;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
.b86-field-label {
  margin: 0 0 9px;
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #9A9A95;
}
/* One strip, split by hairlines: reads as a control, not as six buttons. */
.b86-sizes {
  display: flex;
  margin-bottom: clamp(24px, 3.6vh, 34px);
  border: 1px solid var(--ink-0);
}
.b86-size {
  flex: 1 1 0;
  min-width: 0;
  padding: 15px 4px;
  background: transparent;
  border: 0;
  border-right: 0.5px solid rgba(0, 0, 0, 0.22);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-0);
  transition: border-color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium);
}
.b86-size:last-child { border-right: 0; }
.b86-size:hover { background: rgba(0, 0, 0, 0.06); }
.b86-size[aria-pressed="true"] { background: var(--ink-0); color: var(--paper-0); }

/* Quantity and the buy button share one line. */
.b86-buy-row { display: flex; gap: 8px; }
.b86-qty {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--ink-0);
}
.b86-qty button {
  width: 36px;
  height: 100%;
  min-height: 54px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 15px;
  line-height: 1;
  color: var(--ink-0);
}
.b86-qty button:hover { background: rgba(0, 0, 0, 0.05); }
.b86-qty span {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}
.b86-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  padding: 19px 24px;
  background: var(--ink-0);
  border: 1px solid var(--ink-0);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}
.b86-add:hover { background: transparent; color: var(--ink-0); }
.b86-add svg { display: block; }
.b86-product-hint {
  margin: 12px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8A8A86;
}
/* Matière, livraison, retours: rows that open, hairline between each. */
.b86-specs { margin-top: clamp(34px, 5.5vh, 56px); border-top: 1px solid var(--ink-0); }
.b86-spec { border-bottom: 0.5px solid rgba(0, 0, 0, 0.16); }
.b86-spec summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-0);
  transition: letter-spacing var(--duration-fast) var(--ease-premium);
}
.b86-spec summary:hover { letter-spacing: 0.33em; }
.b86-spec summary::-webkit-details-marker { display: none; }
.b86-spec-icon { display: flex; flex: 0 0 auto; }
.b86-spec-icon svg { display: block; width: 19px; height: 19px; }
.b86-spec-label { flex: 1 1 auto; }
/* the sign draws its own plus, and loses a bar once the row is open */
.b86-spec-sign { position: relative; width: 11px; height: 11px; flex: 0 0 auto; }
.b86-spec-sign::before,
.b86-spec-sign::after {
  content: "";
  position: absolute;
  background: var(--ink-0);
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86-spec-sign::before { top: 5px; left: 0; width: 11px; height: 1px; }
.b86-spec-sign::after { left: 5px; top: 0; width: 1px; height: 11px; }
.b86-spec[open] .b86-spec-sign::after { opacity: 0; }
.b86-spec-body { padding: 0 2px 22px 0; }
.b86-spec-body p {
  margin: 0 0 8px;
  padding-left: 14px;
  border-left: 1px solid rgba(0, 0, 0, 0.14);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  color: #55534F;
}
.b86-spec-body p:last-child { margin-bottom: 0; }

/* The name on the home page, with its own little cart */
.b86-item-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink-0);
}
.b86-item-cart {
  display: flex;
  opacity: 0.45;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86-item-link:hover .b86-item-cart { opacity: 1; }

/* ─── Cursor ───
   On a mouse, the arrow is replaced by a small mark that trails behind and
   opens up over anything clickable. Touch screens keep their own behaviour. */
@media (hover: hover) and (pointer: fine) {
  .b86 { cursor: none; }
  .b86 a, .b86 button, .b86 input, .b86 textarea, .b86 .b86-step { cursor: none; }
  .b86-cursor {
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
  }
  .b86-cursor-ring {
    position: fixed;
    z-index: 89;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    border: 1px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.55;
    transform: translate3d(-50%, -50%, 0);
    transition: width 220ms var(--ease-premium), height 220ms var(--ease-premium), opacity 220ms var(--ease-premium);
  }
  .b86-cursor-ring.is-live { width: 54px; height: 54px; opacity: 1; }
  /* white over the video, ink over the white sections */
  .b86-cursor, .b86-cursor-ring { color: #FFFFFF; mix-blend-mode: difference; }
}

/* A clip sits in the run of photos like any other frame. */
.b86-slide-video {
  flex: 0 0 100%;
  scroll-snap-align: center;
  width: 100%;
  height: clamp(320px, 54vh, 540px);
  object-fit: contain;
  background: var(--paper-0);
}
.b86-product-media .b86-slide-video { height: clamp(360px, 62vh, 620px); }
.b86-slide-video::-webkit-media-controls,
.b86-slide-video::-webkit-media-controls-start-playback-button,
.b86-slide-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* Price under the name, shipping under the price */
.b86-item-link { flex-direction: column; gap: 11px; }
.b86-item-meta { display: flex; align-items: center; gap: 13px; }
.b86-item-price {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #6E6E6A;
}
.b86-item-cart svg { display: block; }
/* Payment marks under the button: wordmarks in thin frames, never fake logos. */
.b86-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: clamp(16px, 2.6vh, 22px);
}
.b86-pay span {
  padding: 7px 10px;
  border: 0.5px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6E6E6A;
}
.b86-pay-note {
  margin: 12px 0 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9A95;
}

/* ─── Cart ─── */
.b86-cart { position: relative; }
.b86-cart-badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink-0);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.b86-cart-badge.is-on { display: flex; animation: b86-pop 420ms var(--ease-premium); }
@keyframes b86-pop {
  0% { transform: scale(0.2); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

.b86-drawer { position: fixed; z-index: 95; inset: 0; }
.b86-drawer-veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  animation: b86-fade 260ms var(--ease-premium) both;
}
.b86-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--paper-0);
  color: var(--ink-0);
  animation: b86-slide 420ms var(--ease-premium) both;
}
@keyframes b86-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.b86-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 18px;
  border-bottom: 1px solid var(--ink-0);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.b86-drawer-close {
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-0);
}
.b86-drawer-items { flex: 1 1 auto; overflow-y: auto; padding: 8px 26px; }
.b86-line { display: flex; gap: 14px; padding: 20px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.14); }
.b86-line img { width: 72px; height: 88px; object-fit: contain; background: #F4F4F2; flex: 0 0 auto; }
.b86-line-body { flex: 1 1 auto; min-width: 0; }
.b86-line-name {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.b86-line-meta { margin: 0; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8A86; }
.b86-line-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.b86-line-price { font-size: 11px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.b86-line-drop {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9A9A95;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.b86-line-drop:hover { color: var(--ink-0); }
.b86-drawer-empty {
  padding: 40px 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: #9A9A95;
}
.b86-drawer-foot { padding: 20px 26px 26px; border-top: 1px solid var(--ink-0); }
.b86-drawer-total {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.b86-checkout {
  width: 100%;
  padding: 19px 24px;
  background: var(--ink-0);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86-checkout:hover { opacity: 0.85; }
.b86-checkout[disabled] { opacity: 0.35; cursor: default; }
.b86-drawer-note {
  margin: 12px 0 16px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #9A9A95;
}
/* Payment marks, drawn plainly — Shopify serves the official ones at checkout. */
/* One line, equal optical height, no frames. */
.b86-pay { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 20px); }
.b86-pay svg { height: 16px; width: auto; }
.b86-pay-mark[title="Mastercard"] svg,
.b86-pay-mark[title="American Express"] svg { height: 19px; }
.b86-pay-mark { display: flex; align-items: center; justify-content: center; }
.b86-pay-mark svg { display: block; }

/* ─── Checkout ─── */
.b86-checkout-page {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 6vh, 62px);
  max-width: 1120px;
  margin: 0 auto;
  padding: calc(clamp(16px, 3.2vh, 32px) + clamp(76px, 11vh, 108px)) clamp(20px, 4vw, 56px) clamp(70px, 12vh, 130px);
}
@media (min-width: 940px) {
  .b86-checkout-page { grid-template-columns: 1.25fr 1fr; gap: clamp(46px, 6vw, 96px); align-items: start; }
  .b86-checkout-recap { position: sticky; top: clamp(96px, 14vh, 140px); }
}
.b86-checkout-title {
  margin: 0 0 clamp(26px, 4vh, 40px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-0);
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.b86-checkout-form .b86-field-label { margin-top: clamp(22px, 3.4vh, 32px); }
.b86-checkout-form .b86-field-label:first-of-type { margin-top: 0; }
.b86-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.b86-input {
  width: 100%;
  height: 54px;
  margin-bottom: 8px;
  padding: 0 15px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 0;
  outline: none;
  font-family: var(--font-core);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-0);
  transition: border-color var(--duration-fast) var(--ease-premium);
}
.b86-input::placeholder { color: #9A9A95; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.16em; }
.b86-input:focus { border-color: var(--ink-0); }
.b86-select { position: relative; }
.b86-select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--ink-0);
  border-bottom: 1px solid var(--ink-0);
  transform: rotate(45deg);
  pointer-events: none;
}
.b86-select select { appearance: none; -webkit-appearance: none; text-transform: uppercase; font-size: 11px; letter-spacing: 0.16em; }

/* Payment choices: a row of marks, one of them picked. */
.b86-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 4px; }
.b86-method {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 6px 8px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium);
}
.b86-method:hover { opacity: 0.75; }
.b86-method[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--ink-0); }
.b86-method svg { display: block; flex: 0 0 auto; }

.b86-pay-button {
  width: 100%;
  margin-top: clamp(22px, 3.4vh, 32px);
  padding: 20px 24px;
  background: var(--ink-0);
  border: 1px solid var(--ink-0);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}
.b86-pay-button:hover { background: transparent; color: var(--ink-0); }
.b86-checkout-hint {
  margin: 12px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-error, #C8534B);
}
.b86-checkout-safe {
  margin: 16px 0 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: #9A9A95;
}

/* The recap column */
.b86-checkout-recap { border-top: 1px solid var(--ink-0); padding-top: 18px; }
.b86-recap-line { display: flex; gap: 13px; padding: 15px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.12); }
.b86-recap-line img { width: 60px; height: 74px; object-fit: contain; background: #F4F4F2; flex: 0 0 auto; }
.b86-recap-line p { margin: 0; }
.b86-recap-name { font-size: 10px; font-weight: var(--weight-medium); letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; }
.b86-recap-meta { margin-top: 5px !important; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #9A9A95; }
.b86-recap-price { margin-left: auto !important; font-size: 10.5px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.b86-recap-lines { padding: 16px 0; border-bottom: 0.5px solid rgba(0, 0, 0, 0.12); }
.b86-recap-lines div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E6E6A;
  font-variant-numeric: tabular-nums;
}
.b86-recap-lines div:last-child { margin-bottom: 0; }
.b86-recap-total {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* Promo code, above the subtotal */
.b86-promo { display: flex; gap: 6px; margin-bottom: 14px; }
.b86-promo input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 13px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: 0;
  outline: none;
  font-family: var(--font-core);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-0);
}
.b86-promo input::placeholder { color: #9A9A95; font-size: 10px; letter-spacing: 0.14em; }
.b86-promo input:focus { border-color: var(--ink-0); }
.b86-promo button {
  flex: 0 0 auto;
  width: 54px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--ink-0);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  color: var(--ink-0);
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}
.b86-promo button:hover { background: var(--ink-0); color: var(--paper-0); }
.b86-promo-state {
  margin: -6px 0 14px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6E6E6A;
}
.b86-drawer-total--light { font-weight: var(--weight-regular); color: #6E6E6A; }

/* Quantity inside a cart line */
.b86-line-qty {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9A9A95;
}
.b86-line-qty button {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.22);
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 13px;
  line-height: 1;
  color: var(--ink-0);
}
.b86-line-qty button:hover { border-color: var(--ink-0); background: rgba(0, 0, 0, 0.05); }
.b86-line-qty-value {
  min-width: 14px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
}

/* ─── À propos ───
   The film stays put behind the page; only the words travel. */
.b86-about-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000000; }
.b86-about-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.66) 40%, rgba(0,0,0,0.82) 100%);
}
.b86-about {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: calc(clamp(16px, 3.2vh, 32px) + clamp(90px, 16vh, 150px)) clamp(22px, 5vw, 48px) clamp(80px, 16vh, 160px);
  color: #FFFFFF;
}
/* Tablet and up: the mark is taller, the title keeps its distance. The bar
   height is padding ×2 + the mark (ratio 499/1400), plus the breathing room. */
@media (min-width: 768px) {
  .b86-about {
    padding-top: calc(clamp(16px, 3.2vh, 32px) * 2 + clamp(130px, 19vw, 250px) * 0.3564 + clamp(72px, 11vh, 120px));
  }
}
/* The story scrolls under the bar: a soft veil keeps the mark legible. */
.b86--about .b86-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: -56px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.b86-about-title {
  margin: 0 0 clamp(30px, 5vh, 54px);
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  line-height: 1.22;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}
.b86-about-text p {
  margin: 0 0 clamp(20px, 3vh, 30px);
  font-size: clamp(13px, 1.25vw, 15px);
  line-height: 1.95;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.b86-about-text strong { font-weight: var(--weight-semibold); color: #FFFFFF; }
/* the two lines that carry the brand stand apart */
.b86-about-mark {
  font-weight: var(--weight-medium);
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: #FFFFFF !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
}
.b86-about-trio {
  padding-left: clamp(14px, 2vw, 22px);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

/* ─── Footer ─── */
.b86-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(28px, 4.5vh, 44px) clamp(20px, 4vw, 56px);
  text-align: center;
  color: #FFFFFF;
}
.b86-foot-mark { display: block; flex: 0 0 auto; line-height: 0; }
.b86-foot-mark img {
  display: block;
  width: clamp(92px, 9vw, 118px);
  height: auto;
  filter: brightness(0) invert(1);
}
.b86-foot-links { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 30px); }
.b86-foot-links a,
.b86-foot-links span {
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.75;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86-foot-links a:hover { opacity: 1; }
.b86-foot-links span { opacity: 0.4; }
.b86-foot-mention {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}
/* On the white pages */
.b86-foot--ink {
  background: var(--paper-0);
  color: var(--ink-0);
}
.b86-foot--ink .b86-foot-mark img { filter: brightness(0); }
.b86-foot--cream { background: #F3F2EF; color: #121211; }
.b86-nav.b86-nav--cream { background: rgba(243, 242, 239, 0.94); }
/* touch screens: the bar lays a near-solid sheet instead of frosted glass —
   glass is re-blurred on every frame the ripples draw under it */
@media (hover: none) {
  .b86-nav--ink { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.96); }
  .b86-nav.b86-nav--cream { background: rgba(243, 242, 239, 0.96); }
}
/* back to the top: a small hollow circle above the mark; the arrow lifts on hover */
.b86-foot-top {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 6px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}
.b86-foot-top svg { display: block; transition: transform 320ms var(--ease-premium); }
.b86-foot-top:hover svg, .b86-foot-top:focus-visible svg { transform: translateY(-3px); }
.b86-foot-top:active { background: currentColor; }
.b86-foot-top:active svg { color: #121211; }
.b86-foot--ink .b86-foot-top:active svg { color: #F3F2EF; }
.b86-foot-socials { display: flex; justify-content: center; gap: 22px; }
.b86-foot-socials a { display: block; line-height: 0; color: inherit; opacity: 0.85; transition: opacity var(--duration-fast) var(--ease-premium); }
.b86-foot-socials a:hover { opacity: 0.5; }
.b86-foot-socials svg { display: block; }
@media (max-width: 620px) {
  .b86-foot-mention { width: 100%; }
}
/* the maker's signature, as on the MG Conciergerie site, kept quiet: the
   name only underlined; the white mark turns ink on the light footers */
.b86-foot-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.b86-foot-by span { opacity: 0.5; }
.b86-foot-by a {
  display: inline-block;
  color: inherit;
  opacity: 0.75;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.b86-foot-by img { display: block; width: auto; height: 24px; opacity: 0.85; }
.b86-foot--ink .b86-foot-by img { filter: brightness(0); }


/* The spinning stone from the sign-up screen, as a seal under the story. */
.b86-seal {
  position: relative;
  z-index: 2;
  width: clamp(150px, 20vw, 230px);
  margin: clamp(10px, 3vh, 30px) auto clamp(44px, 8vh, 84px);
  mix-blend-mode: screen;
}
.b86-seal-frame { display: block; position: relative; width: 100%; aspect-ratio: 700 / 394; overflow: hidden; }
.b86-seal-frame img {
  position: absolute;
  top: 0;
  left: 0;
  width: 3000%;      /* the sheet holds its 30 frames side by side */
  max-width: none;
  height: 100%;
  animation: b86-gemroll 1200ms steps(30, end) infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes b86-gemroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .b86-seal-frame img { animation-duration: 12s; }
}

.b86-promo-drop {
  margin-left: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9A95;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.b86-promo-drop:hover { color: var(--ink-0); }

.b86-add[disabled] { opacity: 0.35; cursor: default; }
.b86-add[disabled]:hover { background: var(--ink-0); color: #FFFFFF; }

/* ─── One voice ───
   IBM Plex Mono already spaces every glyph on the same grid: the tracking the
   site carried over from its old proportional face only pulls words apart.
   Everything reads at the font's own rhythm, as on yeezy.com. */
body *:not(text) { letter-spacing: 0 !important; }

/* ─── Menu ───
   Fear of God's way: a single word in the bar, and behind it a frosted panel
   that slides over the page, the page still showing through. */
.b86-nav-side:not(.b86-nav-side--end) > a,
.b86-nav-side--end > a:not(.b86-cart) { display: none; }
.b86-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: clamp(12px, 1.35vw, 15px);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  color: var(--paper-0);
}
.b86-menu-icon { display: grid; gap: 5px; width: 20px; }
.b86-menu-icon span { display: block; height: 1.5px; background: currentColor; }
.b86-menu-btn:hover { opacity: 0.6; }
.b86--light .b86-menu-btn, .b86-nav--ink .b86-menu-btn { color: var(--ink-0); }
@media (max-width: 380px) { .b86-menu-word { display: none; } }

.b86-menu { position: fixed; inset: 0; z-index: 60; }
.b86-menu-veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 380ms var(--ease-premium);
}
.b86-menu-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  padding: 22px clamp(22px, 5vw, 40px) calc(28px + env(safe-area-inset-bottom));
  background: rgba(22, 22, 20, 0.52);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  /* the sliding panel is its own layer from the start: no hitch as it opens */
  will-change: transform;
  color: #FFFFFF;
  transform: translateX(-100%);
  transition: transform 460ms var(--ease-premium);
  overflow-y: auto;
}
@media (hover: none) {
  .b86-menu-panel { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); background: rgba(22, 22, 20, 0.68); }
}
.b86-menu--open .b86-menu-veil { opacity: 1; }
.b86-menu--open .b86-menu-panel { transform: none; }
.b86-menu-close {
  position: relative;
  align-self: flex-start;
  width: 34px;
  height: 34px;
  margin-left: -6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}
.b86-menu-close span::before,
.b86-menu-close span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 7px;
  right: 7px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg);
}
.b86-menu-close span::after { transform: rotate(-45deg); }
.b86-menu-links {
  list-style: none;
  margin: clamp(40px, 9vh, 80px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.6vh, 22px);
}
.b86-menu-links a {
  font-size: clamp(22px, 6.4vw, 30px);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  transition: opacity var(--duration-fast) var(--ease-premium);
}
.b86-menu-links a:hover { opacity: 0.55; }
.b86-menu-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.b86-menu-foot { margin-top: auto; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.b86-menu-label { margin: 0 0 14px; font-size: 11px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.b86-menu-socials { display: flex; gap: 22px; margin-bottom: 26px; }
/* the maker's line, last thing in the panel, in small letters */
.b86-menu-by {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 28px 0 0;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
}
.b86-menu-by a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.b86-menu-by img { width: 20px; height: 20px; display: block; opacity: 0.9; }
.b86-menu-socials a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  text-decoration: none;
  color: #FFFFFF;
}
.b86-menu-socials a:hover { opacity: 0.6; }
.b86-menu-socials svg { display: block; width: 24px; height: 24px; }
/* icons only: give each a comfortable tap target */
.b86-menu-socials a { padding: 6px; margin: -6px; }
.b86-menu .b86-tongue-btn {
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-core);
  font-size: 13px;
  color: #FFFFFF;
  opacity: 0.45;
}
.b86-menu .b86-tongue-btn[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.b86-menu .b86-tongue-sep { width: 1px; height: 11px; background: #FFFFFF; opacity: 0.35; }
.b86-menu .b86-tongue { gap: 10px; }
@media (prefers-reduced-motion: reduce) {
  .b86-menu-panel, .b86-menu-veil { transition: none; }
}

/* ─── Feature ───
   The Fear of God cover: one image the height of the screen, the mark on the
   left, the piece's name on the right, one white button underneath. */
.b86-feature {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #111110;
  color: #FFFFFF;
}
.b86-feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* wide screens: the portrait stays sharp in the middle, a blurred copy fills
   the sides instead of stretching the photo past its resolution */
.b86-feature-blur { display: none; }
@media (min-aspect-ratio: 4/5) {
  .b86-feature-blur {
    display: block;
    position: absolute;
    inset: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    object-fit: cover;
    filter: blur(38px) saturate(115%) brightness(0.72);
  }
  .b86-feature-img {
    left: 50%;
    width: auto;
    max-width: none;
    height: 100%;
    aspect-ratio: 933 / 1400;
    transform: translateX(-50%);
    object-fit: cover;
  }
}
.b86-feature-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.28) 72%, rgba(0,0,0,0.5) 100%);
}
.b86-feature-row {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  right: clamp(20px, 5vw, 64px);
  top: 58%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  transform: translateY(-50%);
}
.b86-feature-mark {
  display: block;
  width: clamp(130px, 34vw, 300px);
  height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.35));
}
/* the iced pendant takes the mark's place: shown as it is, with its shadow */
.b86-feature-gem {
  display: block;
  width: clamp(92px, 23vw, 180px);
  height: auto;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
.b86-feature-name {
  margin: 0;
  text-align: right;
  font-size: clamp(13px, 3.4vw, 22px);
  font-weight: var(--weight-regular);
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.b86-feature-name { white-space: nowrap; font-size: clamp(11.5px, 3.1vw, 22px); text-transform: uppercase; letter-spacing: 0.04em; }
.b86-feature-name span { display: block; }
/* The cover's entrance (driven by site.js, played each time the cover fills
   the screen): the orange-wall portrait is there from the start, then the
   other shots take turns sliding over it, each from its own side
   (data-from), twice round, the portrait landing last to stay. site.js sets
   the positions inline with `translate`, not `transform`, so they add to the
   centring on wide screens. Without JS the portrait simply sits on top. */
.b86-feature-shade { z-index: 40; }
.b86-feature-row { z-index: 41; }
/* the stacking never changes: the resting portrait at the bottom, then each
   shot in the order it slides in, the portrait's travelling copy on top */
.b86-feature-img[data-cover] { z-index: 1; translate: 0 0; }
.b86-feature-img[data-from="bottom"] { z-index: 2; }
.b86-feature-img[data-from="left"] { z-index: 3; }
.b86-feature-img[data-from="right"] { z-index: 4; }
.b86-feature-top { z-index: 5; }
/* once the cover is near the screen, the shots get their own layers before
   the first slide, so it starts clean instead of stalling on the first frame */
.b86-feature--near .b86-feature-img[data-from] { will-change: translate; }
.b86-feature-cta {
  position: absolute;
  left: 50%;
  bottom: clamp(36px, 8vh, 76px);
  width: min(300px, calc(100% - 80px));
  padding: 15px 20px;
  background: #FFFFFF;
  color: #000000;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: var(--weight-medium);
  transform: translateX(-50%);
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}
.b86-feature-cta:hover { background: #000000; color: #FFFFFF; }

/* ─── Journal ───
   A page from a fanzine: paper tone, hairlines, a figure cut out with scissors
   and taped down, the notes beside it. */
/* No z-index here on purpose: the journal's paper stays under the shop's
   ripple field, which drifts up over its bottom half (site.js), while its
   words and pictures (z-index 3 below) stay above the ripples. */
.b86-journal {
  position: relative;
  background: #F3F2EF;
  color: #121211;
  padding: clamp(80px, 13vh, 130px) clamp(20px, 5vw, 64px) clamp(70px, 12vh, 120px);
}
.b86-journal > * { position: relative; z-index: 3; }
.b86-journal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto clamp(30px, 6vh, 56px);
  padding-bottom: 12px;
  border-bottom: 1px solid #121211;
  font-size: 12px;
  text-transform: uppercase;
}
/* The spread: a small quote on top, the two guys shoulder to shoulder in the
   middle, each piece's name and two lines of copy tucked right against them,
   the black tee's on the left, the white tee's on the right. Small type, thin
   rules: a magazine page, not a poster. */
.b86-journal-lead {
  max-width: 1080px;
  margin: 0 auto clamp(26px, 5vh, 46px);
  font-size: 13px;
  font-weight: var(--weight-regular);
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: #121211;
}
.b86-journal-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
/* the two guys side by side, feet on the same line, shoulders just touching */
.b86-journal-fig {
  grid-column: 1 / -1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0 0 22px;
}
/* one flat JPEG on the paper colour (tools/compose_journal.swift): the pair,
   their shadows are baked in, a tenth of the weight of the
   two transparent cut-outs */
.b86-journal-fig img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(360px, 62vh, 640px);
  object-fit: contain;
}
.b86-journal-piece { padding-top: 12px; border-top: 1px solid #121211; }
.b86-journal-piece--right { text-align: right; }
.b86-journal-piece p { margin: 0; }
.b86-journal-name {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1.25;
  text-transform: uppercase;
}
.b86-journal-piece p:not(.b86-journal-note) { font-size: 11.5px; line-height: 1.7; color: #4A4945; }
.b86-journal-note {
  margin-top: 10px !important;
  font-size: 10.5px;
  text-transform: uppercase;
  color: #8C8B86;
}
/* wide screens: the copy steps out to either side of the guys, at hip height */
@media (min-width: 860px) {
  .b86-journal-spread {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: clamp(20px, 3vw, 44px);
    align-items: end;
  }
  .b86-journal-fig { grid-column: 2; grid-row: 1; margin: 0; }
  .b86-journal-fig img { max-width: none; height: clamp(460px, 70vh, 680px); }
  .b86-journal-piece { grid-row: 1; max-width: 230px; margin-bottom: 18%; }
  .b86-journal-piece--left { grid-column: 1; justify-self: end; text-align: right; }
  .b86-journal-piece--right { grid-column: 3; justify-self: start; text-align: left; }
}
.b86-journal-foot {
  max-width: 440px;
  margin: clamp(30px, 6vh, 54px) auto 0;
  text-align: center;
}
.b86-journal-coda {
  margin: 0;
  font-size: 13px;
  font-weight: var(--weight-medium);
  line-height: 1.6;
  text-transform: uppercase;
  color: #121211;
}
.b86-journal-specs { margin: clamp(26px, 4vh, 36px) 0; border-top: 1px solid rgba(18, 18, 17, 0.25); }
.b86-journal-specs div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(18, 18, 17, 0.25);
  font-size: 13px;
}
.b86-journal-specs dt { color: #6B6A66; text-transform: uppercase; }
.b86-journal-specs dd { margin: 0; text-align: right; }
/* "Acheter": a small solid-ink button; on hover or press the ink drops away
   and it turns hollow, the arrow nudges down. Clicking glides the page to the
   shop (site.js). */
.b86-journal-buy {
  position: relative;
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  gap: 10px;
  margin-top: clamp(24px, 4vh, 34px);
  padding: 10px 20px;
  border: 1px solid #121211;
  color: #F3F2EF;
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color 420ms var(--ease-premium);
}
.b86-journal-buy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #121211;
  transform: translateY(0);
  transition: transform 420ms var(--ease-premium);
}
/* solid ink at rest; pressed or hovered, the ink drops away and the button
   turns hollow */
.b86-journal-buy svg { transition: transform 420ms var(--ease-premium); }
.b86-journal-buy:hover, .b86-journal-buy:focus-visible, .b86-journal-buy:active, .b86-journal-buy.is-pressed { color: #121211; }
.b86-journal-buy:hover::before, .b86-journal-buy:focus-visible::before,
.b86-journal-buy:active::before, .b86-journal-buy.is-pressed::before { transform: translateY(101%); }
.b86-journal-buy:hover svg { transform: translateY(3px); }
/* the pieces land as the glide ends */
@keyframes b86-arrive { from { opacity: 0; transform: translateY(26px) scale(0.92); } }
.b86-orbit-item.b86-arrive .b86-orbit-stage,
.b86-orbit-item.b86-arrive .b86-orbit-meta { animation: b86-arrive 800ms var(--ease-premium) var(--arrive-delay, 0ms) both; }
.b86-orbit-item.b86-arrive .b86-orbit-meta { animation-delay: calc(var(--arrive-delay, 0ms) + 120ms); }
.b86-journal-cta {
  display: inline-block;
  min-width: 220px;
  padding: 15px 26px;
  background: #121211;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: var(--weight-medium);
  transition: background var(--duration-fast) var(--ease-premium), color var(--duration-fast) var(--ease-premium);
}
.b86-journal-cta:hover { background: transparent; color: #121211; box-shadow: inset 0 0 0 1px #121211; }

/* ─── Orbit (the shop, after cavempt.com) ───
   Black ground, the pieces floating on it, dashed ripples spreading from each
   one (canvas, site.js) and the piece's name running round it. */
.b86-orbit {
  position: relative;
  z-index: 2;
  background: #F3F2EF;   /* the journal's paper white */
  color: #121211;
}
.b86-orbit-field { position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; }
/* the paper fading in over the top of the field (site.js sets its height):
   the rings drift up under it and melt into the journal */
.b86-orbit-veil {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, #F3F2EF, rgba(243, 242, 239, 0));
}
.b86-orbit-stage, .b86-orbit-meta { position: relative; z-index: 1; }
.b86-orbit-list { position: relative; display: grid; }
@media (min-width: 851px) {
  .b86-orbit-list { grid-template-columns: 1fr 1fr; min-height: 100vh; align-items: center; }
}
.b86-orbit-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(46px, 9vh, 80px);
  min-height: 100vh;
  min-height: 100svh;
  padding: 90px 20px 60px;
  overflow: hidden;
  overflow: clip;
  background: #F3F2EF;
  text-decoration: none;
  color: #121211;
}
/* Phone: the cream and its ripples stay put (one backdrop, sticky behind the
   list) and only the pieces move. Each piece sticks while the next slides up
   into its place; site.js fades and shrinks the one being replaced. */
.b86-orbit-back { display: none; }
@media (max-width: 850px) {
  .b86-orbit-back {
    display: block;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    margin-bottom: -100vh;
    margin-bottom: -100svh;
    pointer-events: none;
  }
  .b86-orbit-back .b86-orbit-field { position: absolute; }
  .b86-orbit-item {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    background: transparent;
    /* the piece sits high in its card, so the next one can already show its
       ring and shoulders at the bottom of the screen: you see there are two */
    justify-content: flex-start;
    gap: clamp(22px, 4vh, 38px);
    padding-top: clamp(134px, 17vh, 148px);
  }
  .b86-orbit-item > .b86-orbit-field, .b86-orbit-item > .b86-orbit-veil { display: none; }
  .b86-orbit-stage, .b86-orbit-meta, .b86-orbit-next { will-change: transform, opacity; }
}
@media (min-width: 851px) { .b86-orbit-item { min-height: 0; padding: 140px 30px 90px; overflow: visible; background: transparent; } }
/* the piece itself is the link: the stage and its name, stacked like the card */
.b86-orbit-link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: inherit;
  color: inherit;
  text-decoration: none;
}
/* "L'autre pièce": under the first piece on a phone, a small pill with the
   white tee in a porthole and an arrow that keeps nudging down. It says there
   is a second piece and glides there (site.js). */
.b86-orbit-next {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(4px, 2vh, 18px);
  padding: 5px 16px 5px 5px;
  border: 1px solid #121211;
  border-radius: 999px;
  background: rgba(243, 242, 239, 0.86);
  color: #121211;
  font-family: var(--font-core);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 320ms var(--ease-premium), color 320ms var(--ease-premium);
}
.b86-orbit-next img {
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 50%;
  background: #E6E4DF;
  object-fit: contain;
}
.b86-orbit-next svg { animation: b86-nudge 1.6s var(--ease-premium) infinite; }
@keyframes b86-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.b86-orbit-next:hover, .b86-orbit-next:active { background: #121211; color: #F3F2EF; }
@media (min-width: 851px) { .b86-orbit-next { display: none; } }
@media (prefers-reduced-motion: reduce) { .b86-orbit-next svg { animation: none; } }
.b86-orbit-stage { display: block; width: min(62vw, 300px); aspect-ratio: 1; }
@media (min-width: 851px) { .b86-orbit-stage { width: min(22vw, 300px); } }
.b86-orbit-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 600ms var(--ease-premium);
  filter: drop-shadow(0 18px 24px rgba(18, 18, 17, 0.14));
}
@media (hover: hover) { .b86-orbit-link:hover .b86-orbit-img { transform: scale(1.12); } }
.b86-orbit-ring {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  overflow: visible;
  pointer-events: none;
}
@media (min-width: 851px) { .b86-orbit-ring { inset: -40%; width: 180%; height: 180%; } }
.b86-orbit-ring text {
  font-family: var(--font-core);
  font-size: 7.1px;
  font-weight: 500;
  text-transform: uppercase;
  /* solid ink: the hairline outlines broke up at this size, letters looked cut */
  fill: #121211;
  stroke: none;
}
.b86-orbit-rot {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: b86-orbit-spin 40s linear infinite;
}
@keyframes b86-orbit-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .b86-orbit-rot { animation: none; } }
.b86-orbit-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  text-align: center;
}
.b86-orbit-price { font-size: 13.5px; font-weight: var(--weight-regular); color: #6B6A66; }


/* ─── Back from Shopify: the thank-you note ─── */
.b86-thanks {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 18, 17, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 400ms var(--ease-premium);
}
.b86-thanks.is-open { opacity: 1; }
.b86-thanks-card {
  width: min(380px, 100%);
  padding: 34px 26px 26px;
  background: #F3F2EF;
  color: #121211;
  text-align: center;
  transform: translateY(18px);
  transition: transform 500ms var(--ease-premium);
}
.b86-thanks.is-open .b86-thanks-card { transform: none; }
.b86-thanks-mark { display: block; width: 120px; height: auto; margin: 0 auto 22px; filter: brightness(0); }
.b86 ~ .b86-thanks .b86-thanks-title, .b86-thanks .b86-thanks-title {
  margin: 0 0 12px;
  color: #121211;
  text-shadow: none;
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}
.b86-thanks-text { margin: 0 0 24px; font-size: 12px; line-height: 1.7; color: #4A4945; }
.b86-thanks-close {
  padding: 11px 26px;
  border: 1px solid #121211;
  background: #121211;
  color: #F3F2EF;
  font-family: var(--font-core);
  font-size: 11px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 320ms var(--ease-premium), color 320ms var(--ease-premium);
}
.b86-thanks-close:hover, .b86-thanks-close:focus-visible { background: transparent; color: #121211; }
@media (prefers-reduced-motion: reduce) { .b86-thanks, .b86-thanks-card { transition: none; } }

/* the ripples thin out and vanish before the footer, as they do into the journal */
.b86-orbit-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: clamp(180px, 38vh, 400px);
  background: linear-gradient(to bottom, rgba(243, 242, 239, 0), #F3F2EF 88%);
  pointer-events: none;
}