/* ==========================================================================
   STOREFRONT THEME  —  premium black / white / grey minimal
   Matches the 12 reference screenshots. Reads every value from tokens.css.
   Behaviour hooks (#navToggle, #cartDrawer, .add-to-cart, #checkoutForm …)
   are shared with assets/js/main.js — do not rename.
   ========================================================================== */

/* ---------- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-toast);
  background: var(--btn-bg); color: var(--btn-text);
  padding: 10px 16px; border-radius: var(--r-btn); font-size: var(--fs-small);
  transition: top var(--motion-fast);
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ----------------------------------------------------- */
.container,
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--sp-12); }
.page { min-height: 40vh; }

/* ---------- Buttons -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 28px;
  font-size: var(--fs-small); font-weight: var(--fw-heading);
  border: 1px solid transparent; border-radius: var(--r-btn);
  cursor: pointer; text-align: center;
  transition: opacity var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--btn-bg); color: var(--btn-text); }
.btn-primary:hover:not(:disabled) { opacity: .85; }
.btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover:not(:disabled) { background: var(--hover); color: var(--hover-text); }
/* Sits on top of the hero photo, so it is deliberately white in every palette
   - the label on the white hover fill must be dark ink, NOT var(--text)
   (which is near-white on a dark palette and disappeared). */
.btn-ghost {
  background: transparent; color: #fff; border-color: #fff;
}
.btn-ghost:hover { background: #fff; color: #121212; }
.btn-block { width: 100%; }
.btn-lg { padding: 18px 34px; }
.link-underline { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Icon buttons ------------------------------------------- */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-pill);
  color: var(--text); cursor: pointer;
  transition: opacity var(--motion-fast);
}
.icon-btn:hover { opacity: .55; }

/* ---------- Announcement bar ------------------------------------- */
.announcement {
  display: block;
  text-align: center;
  font-size: var(--fs-tiny); font-weight: var(--fw-medium);
  padding: 10px 20px;
  background: var(--bg); color: var(--text);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  overflow: hidden;
}
a.announcement:hover { opacity: .88; }
.announcement[hidden] { display: none; }

.announcement-content { display: inline-block; vertical-align: middle; max-width: 100%; }
.announcement-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  vertical-align: middle;
}
.announcement-image {
  height: 1.6em; max-height: 22px; width: auto; display: block; object-fit: contain;
}

/* A bar holding a countdown switches to flex so the timer can sit fixed
   beside the (possibly scrolling) text instead of being swept along with it —
   ticking digits flying past are unreadable. */
.announcement.has-timer {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.announcement.has-timer .announcement-content { overflow: hidden; min-width: 0; }

/* Seamless loop: two identical tracks laid side by side, each sliding left by
   exactly its own width — the moment the first is fully offscreen the second
   sits where the first started, so the handoff is invisible. */
.announcement.is-animated:not(.has-timer) {
  display: flex;
  padding-left: 0; padding-right: 0;
}
.announcement.is-animated .announcement-content {
  display: flex;
}
.announcement.is-animated .announcement-inner {
  flex-shrink: 0;
  padding: 0 28px;
  white-space: nowrap;
  animation: announcement-marquee 14s linear infinite;
}
@keyframes announcement-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .announcement.is-animated .announcement-inner { animation: none; }
  .announcement.is-animated [aria-hidden="true"] { display: none; }
}

/* ---------- Announcement countdown timer -------------------------- */
.announcement-timer {
  display: inline-flex; align-items: flex-end; gap: 6px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.at-seg { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.at-val {
  display: inline-block; min-width: 1.6em;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(127,127,127,.18);
  font-weight: 700; letter-spacing: .02em;
  line-height: 1.3;
}
.at-lbl {
  display: none;
  font-size: .62em; font-weight: 600; letter-spacing: .06em;
  opacity: .7; text-transform: uppercase;
}
.at-sep { opacity: .5; align-self: center; padding-bottom: 1px; }

/* Timer-only: nothing else shares the bar, so it gets to be the whole
   point — bigger digits, labels visible, like the dedicated widget it
   stands in for instead of a cramped inline afterthought. */
.announcement.timer-only { padding-top: 14px; padding-bottom: 14px; }
.announcement.timer-only .announcement-timer { gap: 10px; }
.announcement.timer-only .at-val { font-size: 1.7em; min-width: 1.4em; padding: 2px 6px; }
.announcement.timer-only .at-lbl { display: block; }
.announcement.timer-only .at-sep { font-size: 1.7em; }

/* ---------- Header --------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--bg);
  /* Declared, not inherited: on checkout.php the palette is scoped to this
     element, so the ink has to be re-resolved here or the nav and wordmark
     keep the page's colour and vanish into a dark header. */
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--container-max); margin-inline: auto;
  padding-inline: var(--container-pad);
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
}
/* Farfetch-style wordmark: heavy grotesk sans, all caps, tightly kerned —
   swapped from the earlier serif "Bodoni Moda" treatment. */
.header-logo {
  font-family: var(--font-sans);
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: -.03em; white-space: nowrap; line-height: 1;
}
@media (min-width: 1024px) { .header-logo { font-size: 26px; } }
/* Merchant uploaded a logo (Reglages > Identite du site) - the wordmark
   becomes the image, capped so a tall file cannot stretch the header. */
.header-logo--image { display: inline-flex; align-items: center; }
.header-logo--image img {
  height: 30px; width: auto; max-width: 180px;
  object-fit: contain; display: block;
}
.header-nav { display: none; gap: 30px; align-items: center; flex: 1; justify-content: center; }
.header-nav > a, .nav-shop-toggle {
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--text); background: none; border: 0; padding: 0; cursor: pointer;
  transition: opacity var(--motion-fast);
}
.header-nav > a:hover,
.header-nav > a[aria-current="page"],
.nav-shop-toggle:hover { opacity: .55; }

/* "Boutique" dropdown */
.nav-shop { position: static; }
.nav-shop-toggle { display: inline-flex; align-items: center; gap: 5px; }
.nav-shop-toggle svg { transition: transform var(--motion-fast); }
.nav-shop.is-open .nav-shop-toggle svg { transform: rotate(180deg); }

.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 40px -24px rgba(0,0,0,.25);
}
.mega-menu[hidden] { display: none; }
.mega-inner {
  max-width: var(--container-max); margin-inline: auto;
  padding: 32px var(--container-pad) 40px;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start;
}
.mega-cols {
  display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px 32px;
}
.mega-link {
  font-size: var(--fs-body); font-weight: var(--fw-body); color: var(--text);
  padding: 5px 0; transition: opacity var(--motion-fast);
}
.mega-link:hover { opacity: .55; }
.mega-link--all { grid-column: 1 / -1; margin-top: 8px; font-weight: var(--fw-heading); }
.mega-promos { display: flex; gap: 14px; }
.mega-promo {
  position: relative; width: 190px; aspect-ratio: 1 / 1;
  background: #1a1714 center/cover no-repeat; overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px;
  color: #fff;
}
.mega-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.6)); }
.mega-promo span {
  position: relative; z-index: 1; font-size: var(--fs-small); font-weight: var(--fw-heading);
  line-height: 1.25;
}
.mega-promo:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72)); }
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.header-cart, .header-wishlist { position: relative; }
/* Track-order icon: a raster PNG (solid black glyph), recoloured with
   background-color + mask-image so it inherits currentColor like every other
   stroked SVG icon in this row — same ink, same hover dim, on any palette. */
.header-track-icon {
  display: block; width: 19px; height: 19px;
  background-color: currentColor;
  -webkit-mask: var(--pin-url) center / contain no-repeat;
          mask: var(--pin-url) center / contain no-repeat;
}
.cart-count, .wish-count {
  position: absolute; top: 3px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--btn-text);
  font-size: 10px; font-weight: var(--fw-heading); line-height: 1;
  border-radius: var(--r-pill);
}
.cart-count[hidden], .wish-count[hidden] { display: none; }
.wish-count { background: #E11D2A; }
.header-cart.is-bump, .header-wishlist.is-bump { animation: header-bump .5s ease; }
@keyframes header-bump {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.35); }
  60%      { transform: scale(.92); }
}

/* An icon (heart / cart) arcs from the tapped control into its header icon */
.fly-icon {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  line-height: 0;
  animation: fly-to-header .72s cubic-bezier(.5, -0.4, .75, 1) forwards;
}
@keyframes fly-to-header {
  0%   { transform: translate(0, 0) scale(1);        opacity: 1; }
  18%  { transform: translate(0, -26px) scale(1.35); opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fly-icon { animation-duration: .01s; }
  .header-cart.is-bump, .header-wishlist.is-bump { animation: none; }
}

/* mobile: hamburger + logo on the left, search + heart + cart on the right */
.header-menu-toggle { margin-left: -8px; }
@media (max-width: 1023px) {
  .header-inner { position: relative; }

  /* Logo left-aligned, right next to the menu button — not centred. It sits
     in normal flex flow now (no more position: absolute), so it can never
     grow into the icons on the right; it just shrinks to what's left after
     .header-actions claims its own space via margin-left: auto below. The
     search icon that used to live here moved into .header-actions instead,
     next to the heart and cart. */
  .header-logo {
    min-width: 0; max-width: 46vw;
    font-size: 18px;
    overflow: hidden; text-overflow: ellipsis;
  }
  .header-logo--image img { max-width: 100%; height: auto; max-height: 30px; }

  /* The phone-only search button used to live loose beside the menu button;
     now .header-actions is the one place search + wishlist + cart all live,
     on both phone and desktop, so nothing here needs to hide it any more. */
}

/* Four icons now share this row (pin, search, heart, cart) where two used to.
   Past ~400px there's room to spare, but a genuinely narrow phone (320–360px)
   ran the wordmark out of space and it clipped to "DABS…" — the icon cluster
   claims its width first (margin-left: auto), the logo only gets whatever is
   left. Trim the icons themselves a little instead of shrinking the logo
   further: same tap targets are less critical to preserve pixel-for-pixel
   than the store's own name being legible. */
@media (max-width: 400px) {
  .header-inner { gap: 10px; }
  .header-actions { gap: 0; }
  .header-actions .icon-btn { width: 36px; height: 36px; }
}

@media (min-width: 1024px) {
  .header-menu-toggle { display: none; }
  .header-nav { display: flex; }
  .header-logo { margin-right: 8px; }
}

/* ---------- Drawers + backdrop ------------------------------- */
.backdrop {
  position: fixed; inset: 0; z-index: var(--z-backdrop);
  background: var(--overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-panel);
}
.backdrop.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; bottom: 0; z-index: var(--z-drawer);
  width: min(92vw, 480px);
  background: var(--bg);
  display: flex; flex-direction: column;
  transition: transform var(--motion-panel);
}
.drawer--left  { left: 0;  transform: translateX(-100%); }
.drawer--right { right: 0; transform: translateX(100%); }
.menu-drawer.open,
.drawer--right.is-open { transform: translateX(0); }
.menu-drawer { width: min(88vw, 420px); }

.drawer-close {
  align-self: flex-start;
  width: 44px; height: 44px; margin: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  transition: opacity var(--motion-fast);
}
.drawer--right .drawer-close { align-self: flex-end; }
.drawer-close:hover { opacity: .55; }

/* Top public tabs — Homme / Femme / Offres as a small photo carousel, the
   name overlaid on each tile rather than captioned under it. Real links, not
   JS tab-panels. Same two-element scroller as .brand-rail (an outer
   overflow:auto that only scrolls + an inner flex track that only lays out,
   with scroll-padding-inline on the outer one) — see the long note on
   .brand-rail below for why a single flex-container-that-also-scrolls loses
   its own leading gutter the moment scroll-snap is involved. */
.menu-tabs {
  flex-shrink: 0;
  padding-bottom: 16px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto; scroll-snap-type: x proximity;
  scroll-padding-inline: 24px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tabs-track { display: flex; gap: 10px; padding-inline: 24px; width: max-content; }
.menu-tab {
  position: relative;
  flex: 0 0 104px; scroll-snap-align: start;
  aspect-ratio: 3 / 4;
  border-radius: 4px; overflow: hidden;
  background: #2b2622 center/cover no-repeat;
  display: flex; align-items: flex-end;
}
.menu-tab::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 75%);
}
.menu-tab-label {
  position: relative; z-index: 1;
  padding: 10px;
  font-size: 13px; font-weight: var(--fw-heading);
  text-transform: uppercase; letter-spacing: .03em; color: #fff;
}
.menu-tab.is-active { box-shadow: inset 0 0 0 2px #fff; }

/* The drawer itself never scrolls — the links list does, so the bottom
   button can float over its lower edge. */
.menu-drawer { overflow: hidden; }
.menu-drawer-links {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 24px 24px;
}
/* With the button present, reserve room so every link can still be scrolled
   up clear of it. When order-tracking is off, `.has-track-card` is absent
   and the list scrolls to the very bottom as normal. */
.menu-drawer.has-track-card .menu-drawer-links { padding-bottom: 90px; }
.menu-drawer-links a {
  padding: 14px 0; font-size: 28px; font-weight: var(--fw-body);
  letter-spacing: var(--tracking-tight);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.menu-link-chevron { flex-shrink: 0; color: var(--text-muted); }

/* Order tracking — one plain black button, the same weight as a "Connexion"
   button, floating over the bottom of the drawer. No card, no illustration. */
.menu-drawer-bottom { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; }
.menu-track-btn {
  display: block; text-align: center;
  background: var(--btn-bg); color: var(--btn-text);
  border-radius: 0;
  padding: 16px; font-size: var(--fs-small); font-weight: var(--fw-medium);
  letter-spacing: .02em;
}

/* ---------- Cart drawer ---------------------------------- */
.cart-drawer-close { align-self: flex-end; margin: 10px 12px; }
.cart-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 14px; padding: 24px 32px 80px;
}
.cart-empty[hidden] { display: none; }
.cart-empty h2 { font-size: 30px; }
.cart-empty p { font-size: var(--fs-body); color: var(--text); }
.cart-empty .btn { min-width: 236px; margin-top: 8px; }

.cart-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cart-content[hidden] { display: none; }
.cart-progress { padding: 16px 24px; border-bottom: 1px solid var(--border); }
.cart-progress-text { font-size: var(--fs-small); margin-bottom: 8px; }
.cart-progress-text sup { font-size: .7em; }
.cart-progress-track { height: 4px; background: var(--surface-muted); border-radius: var(--r-pill); overflow: hidden; }
.cart-progress-fill { height: 100%; background: var(--text); border-radius: var(--r-pill); transition: width var(--motion-panel); }

/* Compact rows — leaves room in the drawer for the "Vous avez aimé" strip
   below without the whole thing needing to scroll. */
.cart-items-wrap { position: relative; flex: 1; min-height: 64px; display: flex; }
.cart-items { flex: 1; overflow-y: auto; padding: 14px 24px; display: flex; flex-direction: column; gap: 12px; }
.cart-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.cart-item img { width: 56px; height: 56px; object-fit: cover; background: var(--surface-muted); }
.cart-item .cart-item-noimg { width: 56px; height: 56px; background: var(--surface-muted); }
.cart-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-item-name { font-size: var(--fs-tiny); font-weight: var(--fw-medium); }
.cart-item-unit-price { font-size: var(--fs-tiny); color: var(--text-muted); }
.cart-item-controls { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
/* Cart drawer stepper - same component as the checkout summary, one size down
   so it sits comfortably next to the 72px row thumbnail. */
.cart-item-controls .qty-control { padding: 2px; }
.cart-item-controls .qty-control button { width: 28px; height: 28px; font-size: 16px; }
.cart-item-controls .qty-control strong { min-width: 20px; font-size: var(--fs-small); }
.cart-remove-link { background: 0; border: 0; padding: 0; font-size: var(--fs-tiny); color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Fade + blur mask where the scrollable cart list runs out of room — the
   overflowing rows dissolve behind the liked-products strip instead of
   getting cut off flat. Shown by JS only while the list actually overflows. */
.cart-items-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg) 80%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.cart-items-fade[hidden] { display: none; }

/* "Vous avez aimé" — wishlisted products not yet in the cart, swipeable */
.cart-liked { padding: 10px 24px 2px; border-top: 1px solid var(--border); }
.cart-liked[hidden] { display: none; }
.cart-liked-title {
  font-size: 11px; font-weight: var(--fw-heading); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.cart-like-track {
  display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.cart-like-track::-webkit-scrollbar { display: none; }
.cart-like-card {
  position: relative; flex: 0 0 82px; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 4px;
}
.cart-like-media {
  display: block; width: 82px; height: 82px;
  background: var(--bg); border: 1px solid var(--border); overflow: hidden;
}
.cart-like-media img { width: 100%; height: 100%; object-fit: contain; }
.cart-like-add {
  position: absolute; right: 4px; top: 4px; z-index: 2;
  width: 24px; height: 24px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--btn-text); border: 0; cursor: pointer;
  box-shadow: 0 2px 6px rgba(18, 18, 18, .3);
  transition: transform var(--motion-fast);
}
.cart-like-add:hover { transform: scale(1.1); }
.cart-like-name {
  font-size: 10.5px; color: var(--text); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cart-like-price { font-size: 10.5px; font-weight: var(--fw-heading); }

.cart-foot { border-top: 1px solid var(--border); padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.cart-summary-row, .cart-total-row { display: flex; justify-content: space-between; font-size: var(--fs-small); }
.cart-total-row { font-weight: var(--fw-heading); font-size: var(--fs-body); }
.cart-total-value { display: inline-flex; gap: 8px; align-items: baseline; }
.cart-old-price { color: var(--text-muted); text-decoration: line-through; font-weight: var(--fw-body); }
.cart-note { font-size: var(--fs-tiny); color: var(--text-muted); }
.cart-summary-row--offer { color: var(--text); }
.cart-summary-row--offer[hidden] { display: none; }
.cart-foot .btn { margin-top: 4px; }

/* ---------- "Added to cart" sheet ---------------------- */
.added-sheet {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 130%);
  z-index: var(--z-overlay);
  width: min(94vw, 440px);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  padding: 16px 18px 20px;
  transition: transform var(--motion-panel);
}
.added-sheet.is-open { transform: translate(-50%, 0); }
.added-sheet .drawer-close { position: absolute; top: 6px; right: 6px; margin: 0; width: 36px; height: 36px; }
.added-banner { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-heading); margin-bottom: 12px; }
.added-item { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.added-item img { width: 56px; height: 56px; object-fit: cover; background: var(--surface-muted); }
.added-item strong { display: block; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.added-item span { font-size: var(--fs-small); color: var(--text-muted); }
.added-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.added-actions .btn { padding: 13px 16px; }

/* ---------- Search overlay — slide-in panel from the right ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--motion-fast);
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }
.search-overlay[hidden] { display: none; }

.search-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(520px, 100vw);
  background: var(--bg);
  display: flex; flex-direction: column;
  box-shadow: -24px 0 60px -16px rgba(0, 0, 0, .28);
  transform: translateX(100%);
  transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}
.search-overlay.is-open .search-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .search-panel { transition: none; } }

.search-row {
  display: flex; align-items: center; gap: 14px;
  padding: 26px 24px 18px;
  border-bottom: 1px solid var(--text);
  margin: 0 24px;
  flex-shrink: 0;
}
.search-panel .search-input {
  flex: 1; min-width: 0; height: auto;
  border: 0; border-radius: 0; background: 0; padding: 0;
  font-size: 24px; font-weight: var(--fw-medium); line-height: 1.2;
  color: var(--text);
}
.search-panel .search-input::placeholder { color: var(--text-muted); }
.search-panel .search-input:focus,
.search-panel .search-input:focus-visible { outline: 0; border: 0; }
.search-clear {
  flex-shrink: 0; background: 0; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-small); color: var(--text-muted);
}
.search-clear:hover { color: var(--text); }
.search-clear[hidden] { display: none; }
.search-close {
  flex-shrink: 0; width: 40px; height: 40px; margin-right: -8px;
  background: 0; border: 0; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.search-close:hover { opacity: .55; }

.search-body { flex: 1; overflow-y: auto; padding: 22px 24px 32px; }

.search-popular[hidden], .search-hits[hidden] { display: none; }
.search-popular-title {
  font-size: var(--fs-small); font-weight: var(--fw-bold);
  color: var(--text-muted); margin-bottom: 6px;
}
.search-popular-link {
  display: block; padding: 12px 0;
  font-size: 20px; font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--border);
  transition: opacity var(--motion-fast);
}
.search-popular-link:last-child { border-bottom: 0; }
.search-popular-link:hover { opacity: .55; }
.search-popular-title--suggested { margin-top: 26px; }

.search-empty { font-size: var(--fs-body); padding: 30px 0; color: var(--text-muted); }
.search-hit {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
  transition: opacity var(--motion-fast);
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover { opacity: .6; }
.search-hit img {
  width: 56px; height: 56px; object-fit: cover;
  background: var(--surface-muted); flex-shrink: 0;
}
.search-hit-title { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.3; }
.search-hit-price { font-size: var(--fs-small); color: var(--text-muted); margin-left: auto; white-space: nowrap; }

/* ---------- Hero — fills the phone screen ------ */
.hero {
  position: relative;
  min-height: 100svh;                 /* full screen on mobile */
  display: flex; align-items: flex-end; justify-content: flex-start;   /* content bottom-left */
  color: #fff;
  background: #1a1714 center/cover no-repeat;
  background-image: var(--hero-mobile, var(--hero-desktop));   /* phone cover */
  overflow: hidden;
}
@media (min-width: 700px) {
  .hero { background-image: var(--hero-desktop); }              /* laptop cover */
}
/* No card behind the name any more — a black scrim rising off the bottom
   edge instead, solid enough to read white text on right at the very bottom
   and fading out to nothing well before the midpoint, so the top of the
   photo stays completely clear. The name + slogan sit directly on it, no
   box, no blur, no fill of their own. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg,
    rgba(0, 0, 0, .82) 0%,
    rgba(0, 0, 0, .55) 16%,
    rgba(0, 0, 0, .26) 32%,
    rgba(0, 0, 0, 0) 52%);
}
/* No photo yet: a quiet dark ground instead of a flat brown block. */
.hero--plain { background: radial-gradient(120% 90% at 50% 0%, #2b2622 0%, #14110f 70%); }
.hero--plain::after { background: none; }

.hero-content {
  position: relative; z-index: 1;
  padding: 0 20px calc(30px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  .hero { min-height: min(88vh, 760px); }
  .hero-content { padding: 0 var(--container-pad) 48px; }
}

/* Name + slogan, straight on the photo — the scrim above is what keeps them
   legible, not a background of their own. */
.hero-badge { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hero-badge-logo {
  font-family: var(--font-sans); font-weight: 900; font-size: 26px;
  text-transform: uppercase; letter-spacing: -.03em; line-height: 1; color: #fff;
}
.hero-badge-slogan { font-size: var(--fs-small); color: rgba(255, 255, 255, .9); letter-spacing: .01em; }
@media (min-width: 1024px) {
  .hero-badge-logo { font-size: 32px; }
  .hero-badge-slogan { font-size: var(--fs-body); }
}

/* ---------- Home "Homme / Femme" split -------- */
.home-split { display: grid; grid-template-columns: 1fr 1fr; }
.home-split-tile {
  position: relative; display: block;
  aspect-ratio: 3 / 4;
  background: #1a1714 center/cover no-repeat;
  color: #fff; overflow: hidden;
}
@media (min-width: 700px) { .home-split-tile { aspect-ratio: 4 / 5; } }
@media (min-width: 1024px) { .home-split-tile { aspect-ratio: 16 / 11; } }
.home-split-tile--plain:nth-child(1) { background: radial-gradient(120% 100% at 30% 20%, #322c27, #15120f); }
.home-split-tile--plain:nth-child(2) { background: radial-gradient(120% 100% at 70% 20%, #2c2a2f, #131215); }
.home-split-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.55) 100%);
  transition: background var(--motion-fast);
}
.home-split-tile:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.7) 100%); }
.home-split-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 22px 18px 26px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.home-split-title { font-size: var(--fs-h2); font-weight: var(--fw-display); letter-spacing: var(--tracking-tight); }
.home-split-cta {
  font-size: var(--fs-tiny); font-weight: var(--fw-heading);
  text-transform: uppercase; letter-spacing: .14em;
  padding-bottom: 3px; border-bottom: 1px solid rgba(255,255,255,.6);
  transition: border-color var(--motion-fast);
}
.home-split-tile:hover .home-split-cta { border-color: #fff; }

/* ---------- Brand rail — black 1:1 tiles ------ */
.brand-rail-wrap { padding: var(--sp-12) 0 var(--sp-6); }
.brand-rail-title {
  padding-inline: var(--container-pad);
  font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-4);
}
/* The real cause of the first tile sitting flush against the screen edge:
   scroll-snap. Every tile is scroll-snap-align: start, so the browser treats
   only a tile's OWN left edge as a valid resting position — the 20px gutter
   in front of tile 1 isn't one, so the moment snapping settles (including on
   initial load) it lands on tile 1's edge, i.e. scrollLeft 20, hiding the
   gutter completely. scroll-padding-inline tells the snap machinery "shrink
   the scrollport by this much when deciding what counts as aligned", which
   makes scrollLeft 0 — gutter visible — a valid snap point too, so that's the
   nearest one and where it actually rests. (Plain padding/margin on the row
   alone, with no snap-padding, cannot fix this — proven: both were tried.) */
.brand-rail {
  overflow-x: auto; scroll-snap-type: x proximity;
  scroll-padding-inline: var(--container-pad);
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 4px;
}
.brand-rail::-webkit-scrollbar { display: none; }
.brand-rail-track {
  display: flex; gap: 12px;
  padding-inline: var(--container-pad);
  width: max-content;
}
.brand-tile {
  flex: 0 0 46vw; min-width: 0; max-width: 200px; aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  display: grid; place-items: center; text-align: center;
  padding: 18px;
  background: #121212; color: #fff;
  transition: background var(--motion-fast), transform var(--motion-fast);
}
@media (min-width: 700px)  { .brand-tile { flex-basis: 190px; } }
.brand-tile span {
  font-size: var(--fs-body); font-weight: var(--fw-heading);
  text-transform: uppercase; letter-spacing: .1em;
}
.brand-tile--logo img {
  width: 120px; max-width: 100%; height: 56px; object-fit: contain;
  /* every logo forced to a single flat white, whatever colour it shipped in */
  filter: brightness(0) invert(1);
  opacity: .92; transition: opacity var(--motion-fast);
}
.brand-tile--logo:hover img { opacity: 1; }
.brand-tile:hover { background: #000; transform: translateY(-2px); }

/* ---------- Product grid + card ------------- */
.products-block { padding-block: var(--sp-12) var(--sp-16); }
.products-block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: var(--sp-6);
}
.products-block-head h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
.products-block-more {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-small); font-weight: var(--fw-heading); color: var(--text);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.products-block-more svg { transition: transform var(--motion-fast); }
.products-block-more:hover svg { transform: translateX(3px); }

/* Cards sit in a shared 1px grid (no gap) — the border between two cells is a
   single hairline, with a full outer frame. Full-bleed on mobile (edge to
   edge, like the reference); the container padding returns on laptop. */
.product-grid {
  display: grid;
  /* minmax(0, 1fr), never plain 1fr.
     `1fr` is really `minmax(auto, 1fr)`, and `auto` here means the item's
     min-content width — so a card whose title or image cannot get any narrower
     forces its track WIDER than the container instead of wrapping. On a 360px
     Android that pushed two 193px columns into a 360px grid and sliced the
     right-hand card in half. The 0 lets the track shrink and the content wrap. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
@media (max-width: 1023px) {
  .product-grid { margin-inline: calc(-1 * var(--container-pad)); border-left: 0; border-right: 0; }
}
@media (min-width: 900px)  { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The track can shrink now; the card has to be able to as well. A grid item's
   default `min-width: auto` would re-impose the same floor one level down. */
.product-grid > * { min-width: 0; }
.product-card, .product-card * { min-width: 0; }
.product-card h3, .product-card p, .product-card [class*="title"] { overflow-wrap: anywhere; }

.product-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 900px)  { .product-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .product-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.product-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
/* Hover frame: a full 1.5px dark border around the WHOLE card. Drawn by an
   overlay pseudo-element (not box-shadow / not border) so it sits on top of the
   image and the body alike — a box-shadow was painted over by the media's own
   background and only showed along the bottom. */
.product-card::after {
  content: ""; position: absolute; inset: 0; z-index: 4;
  border: 1.5px solid transparent; pointer-events: none;
  transition: border-color var(--motion-fast);
}
.product-card:hover { z-index: 1; }
.product-card:hover::after { border-color: var(--text); }

.product-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg);
}
.product-card-link { display: block; height: 100%; }
.pc-track {
  display: flex; height: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pc-track::-webkit-scrollbar { display: none; }
.pc-track img {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover;                 /* fill the 1:1 frame — crop, no letterbox */
  scroll-snap-align: center;
  transition: transform var(--motion-fast);
}
.product-card:hover .pc-track img { transform: scale(1.03); }
.product-card.is-out-of-stock .pc-track img { opacity: .55; }

.pc-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  display: flex; justify-content: center; gap: 5px;
}
.pc-dot {
  width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(18, 18, 18, .22); cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast);
}
.pc-dot.is-active { background: var(--text); transform: scale(1.15); }

/* Badge / stock label: inset from the top-left corner, over the tinted panel */
.product-card-oos {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  font-size: var(--fs-tiny); font-weight: var(--fw-heading);
  background: var(--bg); padding: 4px 8px; border-radius: 4px;
}
.product-card-badges {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  display: flex; pointer-events: none;
}

/* Sold-out stamp — sits above everything else in the card (dots, heart, the
   hover border), lower half of the photo rather than dead centre, never
   intercepts the click-through to the product. */
.product-card-sold-stamp {
  position: absolute; left: 50%; top: 70%; z-index: 5;
  transform: translate(-50%, -50%);
  width: 58%;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* Favourite heart — floats over the media, top-right. Borderless and quiet so
   the card reads as "image + name + one button", like the reference. */
.product-card-fav {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 34px; height: 34px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text);
  cursor: pointer; opacity: .55;
  transition: opacity var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.product-card-fav:hover { opacity: 1; }
.product-card-fav svg { transition: transform var(--motion-fast); }
.product-card-fav.is-active { opacity: 1; color: #E11D2A; }
.product-card-fav.is-active svg { fill: #E11D2A; animation: heart-pop .32s ease; }

.product-card-body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 16px 14px 18px; text-align: center;
}
@media (min-width: 700px) { .product-card-body { padding: 20px 18px 22px; } }
.product-card-title {
  font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text);
  letter-spacing: var(--tracking-tight);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card-title:hover { opacity: .6; }
.product-card-sub {
  font-size: var(--fs-small); color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* One full-width outline button — "🛒 AJOUTER AU PANIER".
   Always the same black outline, and always the same height within a grid:
   min-height reserves room for the label's worst case (two lines, on a narrow
   card) so a card whose label happens to fit on one line doesn't end up a
   different height from its neighbour whose label wrapped — every card in the
   row lines up regardless of what its own text needed. */
.product-card-choose {
  /* auto, not a fixed 14px: pushes the button to the bottom of the card's
     body regardless of how many lines the name/colour above it took. The
     card itself is stretched to the row's tallest neighbour (CSS Grid's
     default align-items: stretch), so with this every button in a row lines
     up at the same height even when one product's name wraps and another's
     doesn't — the row-alignment counterpart to min-height above, which only
     keeps each button's OWN box a fixed size. */
  margin-top: auto; width: 100%; min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 10px;
  border: 1.5px solid var(--text); background: var(--bg); color: var(--text);
  font: inherit; font-size: 11px; font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.product-card-choose svg { flex: none; width: 15px; height: 15px; }
.product-card-choose:hover:not(:disabled) { background: var(--hover); color: var(--hover-text); border-color: var(--hover); }
.product-card-choose:disabled { border-color: var(--border); color: var(--text-muted); cursor: not-allowed; }
@media (min-width: 700px) {
  .product-card-choose { font-size: 11.5px; letter-spacing: .07em; padding: 12px; min-height: 46px; white-space: nowrap; }
}
@keyframes heart-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* PDP: title + favourite heart on one row */
.pdp-title-row { display: flex; align-items: flex-start; gap: 12px; }
.pdp-title-row h1 { flex: 1; min-width: 0; }
.pdp-fav {
  flex-shrink: 0; margin-top: 2px;
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
  transition: color var(--motion-fast);
}
.pdp-fav:hover { color: var(--text); }
.pdp-fav svg { transition: transform var(--motion-fast); }
.pdp-fav.is-active { color: #E11D2A; }
.pdp-fav.is-active svg { fill: #E11D2A; animation: heart-pop .32s ease; }

.price-compare { color: var(--price-compare); text-decoration: line-through; }
.price-current { color: var(--text); }

/* ---------- Product option sheet (bottom snackbar) ---------- */
.option-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer);
  background: var(--bg);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  box-shadow: 0 -14px 44px -14px rgba(0, 0, 0, .28);
  padding: 24px 20px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(105%);
  transition: transform var(--motion-panel);
}
.option-sheet.is-open { transform: translateY(0); }
@media (min-width: 640px) {
  .option-sheet {
    left: 50%; right: auto; bottom: 16px;
    width: min(460px, 94vw); border-radius: 18px;
    transform: translate(-50%, 130%);
  }
  .option-sheet.is-open { transform: translate(-50%, 0); }
}
.option-sheet .drawer-close { position: absolute; right: 8px; top: 8px; margin: 0; width: 38px; height: 38px; }
.option-sheet-top {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  margin: 4px 34px 18px 0;
}
.option-sheet-top img { width: 64px; height: 64px; object-fit: contain; }
.option-sheet-info strong { display: block; font-size: var(--fs-body); font-weight: var(--fw-heading); }
.option-sheet-price { font-size: var(--fs-small); color: var(--text); }
.option-price-old { color: var(--text-muted); text-decoration: line-through; margin-right: 6px; }
.option-sheet-qty {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.option-sheet-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Wishlist page ("Ma collection", wishlist.php) ---------- */
.wishlist { padding-block: var(--sp-8) var(--sp-16); }
.wishlist-head { margin-bottom: var(--sp-6); }
.wishlist-head h1 { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); }
.wishlist-intro { margin-top: 8px; color: var(--text-muted); font-size: var(--fs-body-sm); max-width: 52ch; }
.wishlist-intro[hidden] { display: none; }

.wishlist-empty {
  text-align: center; padding: var(--sp-16) 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.wishlist-empty[hidden] { display: none; }
.wishlist-empty-heart { color: var(--border); }
.wishlist-empty h2 { font-size: var(--fs-h2); }
.wishlist-empty p { color: var(--text-muted); }
.wishlist-empty .btn { margin-top: 6px; }

.wishlist-grid[hidden] { display: none; }

.wl-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 12px 12px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.wl-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.wl-media > a { display: block; height: 100%; }
.wl-media img { width: 100%; height: 100%; object-fit: contain; }
.wl-remove {
  position: absolute; right: 6px; top: 6px; z-index: 2;
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-pill);
  color: #E11D2A; cursor: pointer;
  transition: transform var(--motion-fast);
}
.wl-remove:hover { transform: scale(1.08); }

.wl-body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding-top: 12px; text-align: center;
}
.wl-name {
  font-size: var(--fs-body-sm); font-weight: var(--fw-heading); color: var(--text);
  letter-spacing: var(--tracking-tight);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wl-name:hover { opacity: .6; }
.wl-sub { font-size: var(--fs-small); color: var(--text-muted); }
.wl-price { font-size: var(--fs-small); margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.wl-price s { color: var(--text-muted); margin-right: 6px; white-space: nowrap; }
.wl-price strong { font-weight: var(--fw-heading); white-space: nowrap; }
/* Minimalist outlined add-to-cart — square corners, single line */
.wl-add {
  margin-top: auto; width: 100%;
  display: block; padding: 11px 8px;
  background: transparent; color: var(--text);
  border: 1px solid var(--text); border-radius: 0;
  font: inherit; font-size: 11px; font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .03em;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.wl-add:hover:not(:disabled) { background: var(--hover); color: var(--hover-text); }
.wl-add:disabled { border-color: var(--border); color: var(--text-muted); cursor: not-allowed; }

/* Promotion badge — compact, RED OUTLINE, square corners. */
.promo-badge {
  display: inline-flex; align-items: center;
  background: var(--bg); color: #E11D2A;
  border: 1.5px solid #E11D2A;
  font-size: 10px; font-weight: var(--fw-heading);
  line-height: 1; letter-spacing: .04em; white-space: nowrap;
  padding: 5px 9px; border-radius: 5px;
}

/* ---------- Collection / catalog page ------- */
.collection-head { padding-block: var(--sp-12) var(--sp-8); }
.collection-head h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.collection-eyebrow {
  margin-bottom: 14px;
  font-size: var(--fs-tiny); font-weight: var(--fw-heading);
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted);
}
.collection-intro { margin-top: 16px; max-width: 56ch; color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.collection-more {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 16px;
  font-size: var(--fs-small); font-weight: var(--fw-heading); color: var(--text);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* A collection with its own hero photo (e.g. Boss) — full width, above the
   title, same photo and treatment at every breakpoint. Edge-to-edge on
   purpose (padding-inline: 0 overrides the .container it also carries, so
   it still gets the max-width/centering but not the side gutters) and
   flush against the header (margin-top: 0). Height is viewport-relative
   (not a fixed crop) so a portrait lifestyle photo keeps showing most of
   its frame — including both faces — rather than being squeezed into a
   wide/short band. Shorter on phones on purpose: tall enough to read as a
   hero, short enough that the product grid peeks in under the fold so a
   visitor knows to keep scrolling. */
.collection-hero { position: relative; overflow: hidden; margin-top: 0; padding-inline: 0; height: clamp(360px, 58vh, 620px); }
@media (max-width: 780px) {
  .collection-hero { height: clamp(180px, 29vh, 235px); }
}
.collection-hero picture { display: block; width: 100%; height: 100%; }
.collection-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* Pulls the title block right up under the hero photo instead of the usual
   generous top padding a collection page gives itself when it has no hero. */
.collection-hero + .collection-head { padding-top: var(--sp-4); }
.collection-title-logo { display: block; height: clamp(48px, 9vw, 84px); width: auto; max-width: 100%; }
/* Two stops, not one straight ramp — a single linear fade from opaque to
   transparent reads as a harder edge than it measures, because the eye is
   more sensitive to contrast in the first third. Holding near-transparent
   a little longer softens exactly that. */
.collection-hero-fade {
  display: block;
  position: absolute; inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.5) 55%,
    var(--bg) 100%);
  pointer-events: none;
}
.collection-more svg { transition: transform var(--motion-fast); }
.collection-more:hover svg { transform: translateX(3px); }

.collection-toolbar {
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
  padding-bottom: var(--sp-6);
  font-size: var(--fs-small);
}
.collection-count { color: var(--text-muted); margin-right: auto; }
@media (min-width: 700px) { .collection-count { margin-right: 0; } }
.toolbar-sort { position: relative; }
.toolbar-sort select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: 0; padding: 6px 22px 6px 4px;
  font: inherit; font-size: var(--fs-small); cursor: pointer;
}
.toolbar-sort::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 7px; height: 7px; border-right: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.toolbar-density { display: none; gap: 4px; }
@media (min-width: 700px) { .toolbar-density { display: flex; } }
.toolbar-density button {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: 0; border-radius: 6px; color: var(--text); cursor: pointer;
}
.toolbar-density button[aria-pressed="true"] { background: var(--surface-muted); }

/* ---------- Empty state ---------------------- */
.empty-state { text-align: center; padding: var(--sp-16) 20px var(--sp-24); }
.empty-state h2 { font-size: var(--fs-display); margin-bottom: 16px; }
.empty-state p { font-size: 18px; color: var(--text); }
.empty-state a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Forms --------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: var(--fs-small); font-weight: var(--fw-medium); }
input[type=text], input[type=tel], input[type=email], input[type=search],
select, textarea {
  width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-input);
  background: var(--bg);
  color: var(--text);          /* form controls do not inherit it */
  padding: 0 18px; height: 56px;
  font-size: var(--fs-body);
  transition: border-color var(--motion-fast);
}
textarea { height: auto; min-height: 160px; padding: 14px 18px; resize: vertical; line-height: var(--lh-body); }
select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 44px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--text); }
.form-error { color: #b00020; font-size: var(--fs-small); }
.form-error[hidden] { display: none; }

/* ---------- Contact page ------------------- */
.contact-page { padding-block: var(--sp-16) var(--sp-24); }
.contact-page h1 { font-size: var(--fs-display); text-align: center; margin-bottom: var(--sp-12); }
/* Public contact details (Reglages > Coordonnees) above the form. */
.contact-details {
  max-width: 900px; margin: 0 auto var(--sp-12);
  display: grid; grid-template-columns: 1fr; gap: 14px;
  padding-bottom: var(--sp-8); border-bottom: 1px solid var(--border);
}
@media (min-width: 640px) { .contact-details { grid-template-columns: repeat(3, 1fr); } }
.contact-detail { display: flex; flex-direction: column; gap: 3px; }
.contact-detail-label {
  font-size: var(--fs-tiny); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.contact-detail a { text-decoration: underline; text-underline-offset: 3px; }

.contact-form { max-width: 900px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.contact-form .row-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .contact-form .row-2 { grid-template-columns: 1fr 1fr; } }
.contact-form .btn { align-self: flex-start; margin-top: 8px; }
.contact-done { font-size: var(--fs-body); }
.contact-done[hidden] { display: none; }

/* ---------- Order tracker (track.php) ------ */
.track-page { padding-block: var(--sp-16) var(--sp-24); max-width: 720px; margin-inline: auto; }
.track-page h1 { font-size: var(--fs-display); text-align: center; margin-bottom: 10px; }
.track-lead { text-align: center; color: var(--text-muted); margin-bottom: var(--sp-12); }
.track-form { display: flex; flex-direction: column; gap: 16px; }
.track-form .row-2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .track-form .row-2 { grid-template-columns: 1fr 1fr; } }
.track-form .btn { align-self: stretch; }
.track-empty { margin-top: var(--sp-12); text-align: center; color: var(--text-muted); }
.track-empty a { text-decoration: underline; text-underline-offset: 3px; }

.track-result { margin-top: var(--sp-16); border: 1px solid var(--border); border-radius: var(--r-input); padding: 22px; }
.track-summary { display: flex; flex-direction: column; gap: 3px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.track-order-no { font-weight: var(--fw-bold); font-size: var(--fs-body); }
.track-order-meta { color: var(--text-muted); font-size: var(--fs-small); }
.track-cancelled { color: #b00020; }
.track-cancelled a { text-decoration: underline; }

.track-timeline { list-style: none; margin: 0; padding: 0; }
.track-step { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; padding-bottom: 26px; }
.track-step:last-child { padding-bottom: 0; }
.track-step::before {                     /* the connector line */
  content: ""; position: absolute; left: 11px; top: 22px; bottom: 2px; width: 2px;
  background: var(--border);
}
.track-step:last-child::before { display: none; }
.track-dot {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  border: 2px solid var(--border); background: var(--bg); box-sizing: border-box;
  position: relative; z-index: 1;
}
.track-step-body { display: flex; flex-direction: column; gap: 2px; }
.track-step-label { font-weight: var(--fw-medium); }
.track-step-sub { font-size: var(--fs-small); color: var(--text-muted); }

.track-step.is-done .track-dot,
.track-step.is-current .track-dot { border-color: var(--text); background: var(--text); }
.track-step.is-current .track-dot { box-shadow: 0 0 0 4px rgba(18, 18, 18, .12); }
.track-step.is-done::before { background: var(--text); }
.track-step.is-wait .track-step-label { color: var(--text-muted); }

.track-bl { margin-top: 22px; }

/* ---------- Footer ------------------------- */
.site-footer { border-top: 1px solid var(--border); margin-top: var(--sp-16); }
.footer-newsletter {
  max-width: var(--container-max); margin-inline: auto;
  padding: var(--sp-12) var(--container-pad);
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
}
@media (min-width: 900px) { .footer-newsletter { grid-template-columns: 1fr 1fr; gap: 48px; } }
.footer-newsletter h2 { font-size: var(--fs-h2); margin-bottom: 10px; }
.footer-newsletter p { color: var(--text-muted); }
.newsletter-form { position: relative; }
.newsletter-form input {
  height: 60px; border-radius: var(--r-pill); padding-right: 64px;
}
.newsletter-form button {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.newsletter-form button:hover { opacity: .55; }
.newsletter-done { position: absolute; inset: 0; display: flex; align-items: center; padding-inline: 24px; background: var(--bg); font-size: var(--fs-small); border: 1px solid var(--border); border-radius: var(--r-pill); }
.newsletter-done[hidden] { display: none; }

/* Dark card footer — brand blurb + link columns, a "Propulsé par Adness" CTA,
   and an oversized wordmark clipped at the card's bottom edge. Monochrome
   (site's own black/white palette), not the reference template's colour. */
.footer-dark {
  max-width: var(--container-max); margin: var(--sp-8) auto 0;
  padding-inline: var(--container-pad);
}
.footer-dark-inner {
  background: var(--btn-bg); color: var(--btn-text);
  border-radius: var(--r-panel);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
}
.footer-top {
  display: flex; flex-direction: column; gap: var(--sp-8);
  padding-bottom: var(--sp-6);
}
.footer-about-logo {
  font-family: var(--font-sans); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.03em; font-size: var(--fs-h2); line-height: 1;
}
.footer-about-text {
  margin-top: 14px; max-width: 34ch;
  color: rgba(255, 255, 255, .62); font-size: var(--fs-small); line-height: var(--lh-body);
}
.footer-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4);
}
.footer-col h3 {
  font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .04em;
  color: rgba(255, 255, 255, .5); margin-bottom: 14px; font-weight: 600;
}
.footer-col { display: flex; flex-direction: column; }
.footer-col a {
  display: block; text-decoration: none; color: rgba(255, 255, 255, .85);
  font-size: var(--fs-small); padding-block: 6px;
  transition: color var(--motion-fast);
}
.footer-col a:hover { color: var(--btn-text); }
@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .footer-top { flex-direction: row; justify-content: space-between; gap: var(--sp-12); }
  .footer-about { max-width: 320px; flex-shrink: 0; }
  .footer-cols { flex: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Partner / carrier logos — one row, never wraps. Two-element scroller (outer
   overflow-x:auto + inner flex track) rather than a single flex+scroll
   element: on this codebase that single-element combo loses its own leading
   padding on first paint (see .brand-rail). Logos keep their real brand
   colour; a small white chip sits behind each one since a couple of them
   (Navex, Adex) are dark navy and would nearly disappear straight on black. */
.footer-partners {
  overflow-x: auto; scroll-snap-type: x proximity;
  scroll-padding-inline: 0; -ms-overflow-style: none; scrollbar-width: none;
  padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-partners::-webkit-scrollbar { display: none; }
.footer-partners-track {
  display: flex; align-items: center; gap: var(--sp-4);
  width: max-content;
}
.footer-partner {
  display: inline-flex; align-items: center; scroll-snap-align: start;
  flex-shrink: 0;
  background: var(--btn-text); border-radius: var(--r-input);
  padding: 8px 14px;
}
.footer-partner img {
  display: block; height: 20px; width: auto; max-width: 110px;
  object-fit: contain;
}
.footer-partner--adness {
  background: transparent; padding-inline: 0;
}
.footer-partner--adness img { height: 20px; filter: brightness(0) invert(1); }
.footer-partner-divider {
  width: 1px; height: 22px; background: rgba(255, 255, 255, .2);
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .footer-partner img { height: 26px; max-width: 140px; }
  .footer-partner--adness img { height: 24px; }
}

.footer-mid {
  display: flex; flex-direction: column; gap: var(--sp-4);
  align-items: center; text-align: center;
  padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-tiny); color: rgba(255, 255, 255, .55);
}
@media (min-width: 640px) {
  .footer-mid { flex-direction: row; justify-content: space-between; text-align: left; }
}
.footer-powered {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--btn-text); color: var(--btn-bg);
  border-radius: var(--r-pill); padding: 10px 18px;
  font-size: var(--fs-tiny); font-weight: 600; text-decoration: none;
  transition: opacity var(--motion-fast);
  flex-shrink: 0;
}
.footer-powered:hover { opacity: .8; }
.footer-powered svg { flex-shrink: 0; }

.footer-wordmark {
  font-family: var(--font-sans); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.04em; line-height: .8; text-align: center;
  color: var(--btn-text);
  font-size: clamp(52px, 15vw, 200px);
  padding: 0 var(--sp-4);
  margin-top: clamp(8px, 3vw, 24px);
  white-space: nowrap; overflow: hidden;
  user-select: none;
}

/* ---------- Body scroll lock (main.js sets body overflow hidden) -------- */
body { overflow-x: hidden; }

/* ---------- Breadcrumb ------------------------------------------------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-block: var(--sp-6) 0;
  font-size: var(--fs-tiny); color: var(--text-muted);
}
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span:last-child { color: var(--text); }

/* ---------- Product detail page (PDP) -------------------------------- */
.pdp {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8);
  padding-block: var(--sp-6) var(--sp-16);
}
/* minmax(0, …), never plain 1fr / 1.1fr — see the note on .product-grid above.
   `1fr` is really `minmax(auto, 1fr)`, so a column whose content cannot get any
   narrower (the price row's nowrap price + compare-price + promo badge) forced
   the buybox column WIDER than the viewport instead of letting the price row
   wrap — the badge was clipped at the screen edge rather than dropping to its
   own line. The 0 floor lets the column shrink and the price row wrap as
   designed. */
@media (min-width: 1000px) {
  .pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
}

.pdp-gallery { position: relative; }
/* Wraps just the photo strip (not the thumbnails/progress dots below it) so
   the sold-out stamp can be positioned as a percentage of the PHOTO itself —
   anchoring it to .pdp-gallery directly would measure against the taller
   box that also includes the thumbnail row on desktop. Scroll stays on
   .gallery-main; the frame itself never scrolls, so the stamp holds still
   while the shopper swipes between photos. */
.gallery-frame { position: relative; }
.gallery-main {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card); background: var(--surface-muted);
}
.gallery-main::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.pdp-sold-stamp {
  position: absolute; left: 50%; top: 70%; z-index: 3;
  transform: translate(-50%, -50%);
  width: 52%;
  pointer-events: none;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.25));
}
/* Line pagination (phone) — a row of equal segments, the active one solid
   black, the rest a pale hairline. Tap one to jump; swiping the photo updates
   it automatically (assets/js/main.js listens to the gallery's own scroll). */
.gallery-progress { display: flex; gap: 4px; margin-top: 10px; }
@media (min-width: 1000px) { .gallery-progress { display: none; } }
.gallery-progress-seg {
  flex: 1; height: 2.5px; padding: 0; border: 0; border-radius: 2px;
  background: var(--border); cursor: pointer;
  transition: background var(--motion-fast);
}
.gallery-progress-seg.is-active { background: var(--text); }

.gallery-thumbs { display: none; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
@media (min-width: 1000px) { .gallery-thumbs { display: flex; } }
.thumb {
  width: 64px; height: 64px; padding: 0; border: 1px solid var(--border);
  background: var(--surface-muted); cursor: pointer; border-radius: var(--r-input); overflow: hidden;
}
.thumb.active { border-color: var(--text); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-next {
  position: absolute; right: 12px; top: calc(50% - 20px);
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
@media (max-width: 999px) { .pdp-gallery:hover .gallery-next { display: inline-flex; } }

.pdp-buybox { display: flex; flex-direction: column; gap: var(--sp-4); }
@media (min-width: 1000px) { .pdp-buybox { position: sticky; top: calc(var(--header-h) + 20px); } }
.pdp-buybox h1 { font-size: var(--fs-h2); }
.pdp-price { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 20px; font-weight: var(--fw-heading); }
.pdp-price > * { white-space: nowrap; }
.pdp-price .promo-badge { align-self: center; }
.pdp-desc { color: var(--text); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.pdp-desc p + p { margin-top: .8em; }
.see-more { background: 0; border: 0; padding: 4px 0; font-weight: var(--fw-heading); font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pdp-oos { font-size: var(--fs-small); color: #b00020; }

/* "Ajouter au panier" (outline) + "Acheter maintenant" (filled, jumps to the
   order form further down) side by side — the top-of-page mirror of the
   .cod-actions pair down in the form itself, same square-corners treatment so
   the two places this pattern appears read as one design, not two. The link
   is a real <a href="#checkoutForm">, so it still works before theme.js
   upgrades it to a smooth scroll; scroll-margin-top on the target keeps the
   sticky header off it. */
.pdp-buy-row { display: flex; gap: 10px; align-items: stretch; margin-top: var(--sp-4); }
.pdp-buy-row .btn { flex: 1; min-width: 0; }
@media (max-width: 640px) { .pdp-buy-row { flex-direction: column; } }

.pdp-buy-addcart, .pdp-buy-now {
  min-height: 54px; padding: 14px 18px;
  font-size: var(--fs-small);
  text-align: center; white-space: normal;
  text-decoration: none;
  border-radius: 0;   /* squared to match its companion — see .cod-addcart */
  transition: opacity var(--motion-fast);
}
/* "Acheter maintenant" keeps its own established look (uppercase, tracked
   out) — unchanged from before this pairing existed, only now sitting beside
   a companion instead of alone. "Ajouter au panier" matches its sibling down
   in the form: plain sentence case, no letter-spacing. */
.pdp-buy-now {
  display: flex; align-items: center; justify-content: center;
  background: var(--btn-bg); color: var(--btn-text);
  font-weight: var(--fw-heading); text-transform: uppercase; letter-spacing: .04em;
}
.pdp-buy-now:hover { opacity: .85; }
.cod-box, #checkoutForm { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Reassurance rows between the buy button and the form. The first two open;
   <details> carries that natively, so no JS is involved. */
.pdp-perks { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pdp-perk { border-left: 2px solid var(--border); }
.pdp-perk--plain {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  font-size: var(--fs-small); line-height: 1.35;
}
.pdp-perk details > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-size: var(--fs-small); line-height: 1.35;
}
.pdp-perk details > summary::-webkit-details-marker { display: none; }
/* The +/− affordance from the reference, drawn rather than shipped as an icon. */
.pdp-perk details > summary::after {
  content: "+"; margin-left: auto; flex-shrink: 0;
  font-size: 17px; font-weight: 400; line-height: 1; color: var(--text-muted);
}
.pdp-perk details[open] > summary::after { content: "\2212"; }
.pdp-perk-ico { flex-shrink: 0; display: inline-flex; color: var(--text); }
.pdp-perk-text { min-width: 0; }
.pdp-perk-text strong { font-weight: var(--fw-heading); }
.pdp-perk-body { padding: 0 14px 12px 42px; }
.pdp-perk-body p { font-size: var(--fs-tiny); color: var(--text-muted); line-height: var(--lh-body); margin: 0; }

.pdp-stock { font-size: var(--fs-small); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 7px; }
.pdp-stock::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; }
.pdp-stock--in  { color: #067647; }
.pdp-stock--low { color: #B54708; }
.pdp-stock--out { color: #b00020; }

/* Landing-page photos (product-edit → "Photos de la landing page").
   Full-bleed, stacked one under another, each at its natural ratio — the
   long-form promo images customers scroll through on a landing page. */
.pdp-landing { margin: 0 0 var(--sp-12); }
.pdp-landing-strip { display: flex; flex-direction: column; }
.pdp-landing-strip img {
  display: block;
  width: 100%; height: auto;
  background: var(--surface-muted);
}

.pdp-label { font-size: var(--fs-small); font-weight: var(--fw-medium); display: block; margin-bottom: 8px; }
.pdp-label-value { color: var(--text-muted); font-weight: var(--fw-body); }

/* ---- Variants ---- */
.pdp-variant { margin-bottom: 4px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.color-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 9px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-small); color: var(--text);
  transition: border-color var(--motion-fast);
}
.color-swatch:hover { border-color: var(--text-muted); }
.color-swatch.is-active { border-color: var(--text); font-weight: var(--fw-medium); }
.color-swatch-dot {
  width: 16px; height: 16px; border-radius: var(--r-pill); flex-shrink: 0;
  background: var(--sw, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.variant-field > span { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.variant-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.variant-pill {
  min-width: 46px;
  padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--bg); color: var(--text);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast);
}
.variant-pill:hover { border-color: var(--text-muted); }
.variant-pill.is-selected { border-color: var(--text); background: var(--text); color: var(--btn-text); }
/* Shopify-style: outlined, never filled — used for volume (ml). */
.variant-pills--outline .variant-pill { border-width: 1px; }
.variant-pills--outline .variant-pill.is-selected {
  background: var(--bg); color: var(--text);
  border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text);
}
.variant-error { color: #b00020; font-size: var(--fs-small); }
.variant-error[hidden] { display: none; }

/* COD form — dashed "ticket" box (like the reference), our B&W palette */
.cod-box {
  margin-top: var(--sp-6);
  border: 2px dashed var(--text);
  border-radius: 14px;
  padding: 20px;
}
@media (min-width: 1000px) { .cod-box { padding: 24px; } }
.cod-form { display: flex; flex-direction: column; gap: 14px; }
.cod-form.is-disabled { opacity: .55; }
.cod-form .field > span em { color: #b00020; font-style: normal; }

.qty-control {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--r-input);
  width: max-content; padding: 4px;
}
.qty-control button {
  width: 36px; height: 36px; border: 0; background: 0; font-size: 18px; cursor: pointer; color: var(--text);
}
.qty-control strong { min-width: 28px; text-align: center; font-weight: var(--fw-heading); }
.qty-control--lg { flex-shrink: 0; height: 54px; padding: 0 4px; border-radius: var(--r-btn); }
.qty-control--lg button { width: 36px; height: 100%; font-size: 20px; }
.qty-control--lg strong { min-width: 22px; }

/* Buy row: primary button + quantity stepper, same height.
   The button used to force a single nowrap line — on a narrower phone (the
   quantity stepper is a fixed width, so the button gets whatever is left) its
   own label ("Commander maintenant", or any longer text a merchant sets in
   Réglages) no longer fit. The overflow wasn't visibly clipped, it just spilled
   past the button's edges in --btn-text (white on this palette) onto the page's
   own white background — invisible, reading as "half the label missing".
   min-height instead of a fixed height lets the label wrap to a 2nd line
   instead; align-items: stretch on the row keeps the stepper matching height. */
/* Buy row: the quantity stepper (fixed width) beside "Ajouter au panier"
   (outline, fills whatever width is left) — a standard qty-then-add-to-cart
   pairing, the stepper narrow enough that it stays a row at every width
   rather than needing to stack on mobile the way the two big CTAs below do.
   "Commander maintenant" (the real form submit) sits on its own full-width
   row underneath, unchanged in role — still square, still shimmering, just no
   longer sharing this row with anything. */
.cod-actions { display: flex; gap: 10px; align-items: stretch; }
.cod-actions .cod-addcart {
  flex: 1; min-width: 0; gap: 8px;
  min-height: 54px; padding: 8px 10px;
  font-size: var(--fs-small);
  white-space: normal; line-height: 1.2;
  border-radius: 0;   /* matches "Commander maintenant" now that they're a set */
}
.cod-buy {
  min-height: 54px; padding: 8px 10px;
  font-size: var(--fs-small);
  white-space: normal; line-height: 1.2;
}

/* "Commander maintenant" — square corners, and a light glass sweep that
   drifts left to right on a slow loop. Deliberately restrained: a soft,
   narrow, semi-transparent band rather than a bright bar, so it reads as a
   glint rather than a strobe. Same masking trick as .btn-stockpilot's sheen
   elsewhere in this file (an ::after clipped to the button via its own
   overflow:hidden), tuned much quieter for a plain black button instead of a
   purple gradient one. */
.cod-buy--shimmer {
  position: relative; overflow: hidden;
  border-radius: 0;
}
.cod-buy--shimmer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  animation: cod-buy-shimmer 4.5s ease-in-out infinite;
}
@keyframes cod-buy-shimmer { 0% { left: -60%; } 45%, 100% { left: 130%; } }
/* A hover gets its own quicker, slightly brighter pass on top of the ambient
   loop — the "or on hover" half of the brief, layered rather than swapped. */
.cod-buy--shimmer:hover:not(:disabled)::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.3), transparent);
  transform: skewX(-18deg);
  animation: cod-buy-shimmer .9s ease-out;
}
.cod-buy--shimmer:disabled::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cod-buy--shimmer::after, .cod-buy--shimmer:hover:not(:disabled)::before { animation: none; opacity: 0; }
}

.cod-help {
  font-size: var(--fs-tiny); color: var(--text-muted);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.cod-help-wa {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text); text-decoration: underline; text-underline-offset: 3px;
}
.cod-help-wa:hover { color: var(--text-muted); }
.cod-help-wa svg { color: #25D366; flex-shrink: 0; }
.address-field { position: relative; }
.address-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-input);
  overflow: hidden; box-shadow: var(--shadow-panel);
}
.address-suggestions[hidden] { display: none; }
.address-suggestion { display: block; width: 100%; text-align: left; padding: 11px 16px; background: 0; border: 0; font: inherit; cursor: pointer; }
.address-suggestion:hover, .address-suggestion.is-active { background: var(--surface-muted); }

.cod-summary {
  /* A tinted surface (the same one used for image placeholders elsewhere)
     separates "receipt" from "form field"; the border on top makes that
     separation unmistakable rather than merely felt. */
  background: var(--surface-muted); border-radius: var(--r-input);
  border: 2px solid var(--text);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 9px; margin-top: 2px;
}
.cod-summary-title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-body); font-weight: var(--fw-display); margin-bottom: 2px;
}
.cod-summary-title svg { flex-shrink: 0; }
.cod-summary-row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-small); color: var(--text); }
.cod-summary-row > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cod-summary-item { min-width: 0; }
.cod-summary-item .cod-item-name {
  color: var(--text); font-weight: var(--fw-medium);
  display: flex; align-items: baseline; gap: 4px; min-width: 0;
}
.cod-item-name-text {
  /* Belt-and-suspenders alongside the server-side word cap: even four short
     words could still overflow a very narrow screen. Truncated on its own,
     so an ellipsis here never eats the "× qty" that follows it. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cod-item-name b { flex-shrink: 0; }
.cod-summary-discount { color: #067647; font-weight: var(--fw-medium); }
.cod-summary-discount > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.cod-summary-discount svg { flex-shrink: 0; }
.cod-summary-saved {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: var(--fs-tiny); color: #067647;
  background: #ECFDF3; border-radius: 8px; padding: 9px 12px;
  margin: -2px 0 2px;
}
.cod-summary-saved svg { flex-shrink: 0; margin-top: 1px; }
.cod-summary-total {
  /* var(--border) all but disappears against the summary's own tinted
     background (#E5E5E5 on #F1F1F1) — enough contrast to still read as a
     divider is needed here, not just the token used everywhere else. */
  border-top: 1px solid rgba(18,18,18,.12); padding-top: 10px; margin-top: 2px;
  font-weight: var(--fw-display); font-size: var(--fs-body);
}
.free-tag { color: #067647; font-weight: var(--fw-medium); }

.cod-trust { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.cod-trust li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text-muted); }
.cod-trust svg { flex-shrink: 0; color: var(--text); }

/* Sticky "back to the order form" bar — appears once you scroll past .cod-box */
.pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 28px -14px rgba(0, 0, 0, .18);
  transform: translateY(120%);
  transition: transform var(--motion-panel);
  padding: 10px var(--container-pad) calc(10px + env(safe-area-inset-bottom));
}
.pdp-sticky[hidden] { display: none; }
.pdp-sticky.is-visible { transform: translateY(0); }
.pdp-sticky-inner {
  max-width: var(--container-max); margin-inline: auto;
  display: flex; align-items: center; gap: 8px;
}
.pdp-sticky-thumb {
  width: 46px; height: 46px; flex-shrink: 0;
  object-fit: cover; border-radius: 8px; background: var(--surface-muted);
}
.pdp-sticky .btn { height: 48px; font-size: var(--fs-small); white-space: nowrap; }
/* Add-to-cart: icon-only pill on phones, icon + label once there's room */
.pdp-sticky-cart {
  flex-shrink: 0; width: 48px; padding: 0; gap: 8px;
}
.pdp-sticky-cart-label { display: none; }
.pdp-sticky-buy { flex: 1; min-width: 0; padding: 0 12px; }
@media (min-width: 620px) {
  .pdp-sticky-inner { gap: 12px; }
  .pdp-sticky-cart { width: auto; padding: 0 18px; margin-left: auto; }
  .pdp-sticky-cart-label { display: inline; }
  .pdp-sticky-buy { flex: 0 1 300px; }
}

/* Flash the order box when the sticky bar brings you back to it */
.cod-box.is-flash { animation: cod-flash 1.3s ease; }
@keyframes cod-flash {
  0%, 100% { box-shadow: none; }
  25%, 65% { box-shadow: 0 0 0 3px rgba(225, 29, 42, .4); }
}
body:has(.pdp-sticky.is-visible) { padding-bottom: 64px; }
/* keep the "added to cart" sheet clear of the sticky bar */
body:has(.pdp-sticky.is-visible) .added-sheet.is-open { bottom: 84px; }

.order-success { text-align: center; padding: 24px 12px; }
.order-success[hidden] { display: none; }
.order-success h3 { font-size: 22px; margin: 12px 0 6px; }
.order-success .success-check svg { width: 52px; height: 52px; stroke: var(--text); stroke-width: 3; fill: none; }
.order-success .success-check circle { stroke: var(--border); }
.success-call a { text-decoration: underline; text-underline-offset: 3px; }

.pdp-accordions { margin-top: var(--sp-4); border-top: 1px solid var(--border); }
.pdp-accordions details { border-bottom: 1px solid var(--border); }
.pdp-accordions summary { padding: 16px 0; cursor: pointer; font-weight: var(--fw-heading); font-size: var(--fs-small); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.pdp-accordions summary::-webkit-details-marker { display: none; }
.pdp-accordions summary::after { content: "+"; font-weight: var(--fw-body); font-size: 20px; }
.pdp-accordions details[open] summary::after { content: "–"; }
.pdp-accordion-body { padding: 0 0 18px; font-size: var(--fs-small); color: var(--text); line-height: var(--lh-body); }
.pdp-accordion-body p + p { margin-top: .6em; }
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-top: 1px solid var(--border); }
.spec-row span:first-child { color: var(--text-muted); }

.pdp-related { padding-block: var(--sp-8) var(--sp-12); }
.pdp-related > h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-6); }

/* ---------- Dedicated checkout page (checkout.php) -------------------- */
/* Soft grey page ground so the white summary card + white fields read as
   raised. Header and footer keep their own white background. */
body:has(.checkout) .page { background: #F4F4F4; }
/* A deeper border just on this page — the default --border is too faint to
   define the white card / white fields against the grey ground. */
.checkout { --checkout-border: #C4C4C4; padding-block: var(--sp-4) var(--sp-16); }
.checkout-title {
  font-size: clamp(21px, 5vw, 30px); letter-spacing: var(--tracking-tight);
  margin-bottom: var(--sp-3);
}

/* ---- Progress steps (Boutique › Panier › Vos informations › Confirmée) ---- */
.checkout-steps {
  list-style: none; display: flex;
  max-width: 560px; margin: 0 0 var(--sp-6);
}
.checkout-steps[hidden] { display: none; }
.checkout-step {
  flex: 1 1 0; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 11px; line-height: 1.25; text-align: center;
  color: var(--text-muted);
}
/* connector line runs from the previous dot's centre to this one's */
.checkout-step:not(:first-child)::before {
  content: ""; position: absolute; top: 11px; left: -50%; width: 100%;
  height: 2px; background: var(--checkout-border, #C4C4C4); z-index: 0;
}
.checkout-step-mark {
  position: relative; z-index: 1;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--checkout-border, #C4C4C4); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.checkout-step-label { max-width: 11ch; }

.checkout-step.is-done { color: #067647; }
.checkout-step.is-done:not(:first-child)::before { background: #067647; }
.checkout-step.is-done .checkout-step-mark { background: #067647; border-color: #067647; }
.checkout-step.is-done .checkout-step-mark::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.checkout-step.is-current { color: #067647; font-weight: var(--fw-heading); }
.checkout-step.is-current .checkout-step-mark {
  border-color: #067647; box-shadow: 0 0 0 4px rgba(6, 118, 71, .16);
}
.checkout-step.is-current .checkout-step-mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #067647;
}

@media (min-width: 720px) {
  .checkout-step { font-size: var(--fs-tiny); }
  .checkout-step-label { max-width: none; }
}

/* ---- "Scroll to the form" hint (mobile only) ---- */
.checkout-scroll-hint {
  display: none;
  position: fixed; left: 12px; bottom: 12px; z-index: 150;
  align-items: center; gap: 5px;
  padding: 7px 12px 7px 9px;
  background: #067647; color: #fff;
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-size: 12px; font-weight: var(--fw-medium);
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(6, 118, 71, .5);
}
.checkout-scroll-hint-arrow { width: 14px; height: 14px; }
.checkout-scroll-hint-arrow { animation: checkout-bob 1.4s ease-in-out infinite; }
@keyframes checkout-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}
@media (max-width: 959px) {
  .checkout-scroll-hint.is-visible { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-scroll-hint-arrow { animation: none; }
}

.checkout-empty { text-align: center; padding: var(--sp-16) 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.checkout-empty[hidden] { display: none; }
.checkout-empty h2 { font-size: var(--fs-h2); }
.checkout-empty p { color: var(--text-muted); }
.checkout-empty .btn { margin-top: 8px; }

.checkout-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.checkout-grid[hidden] { display: none; }
.checkout-main { min-width: 0; }
.checkout-form { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: calc(var(--header-h) + 16px); }
.checkout-form .field > span em { color: #b00020; font-style: normal; }
/* Keep inputs white against the grey page ground, with a clearer border. */
.checkout-form input,
.checkout-form select { background: var(--bg); border-color: var(--checkout-border); }

.checkout-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-body); font-weight: var(--fw-display);
}
.checkout-section-title svg { flex-shrink: 0; }

.checkout-submit {
  flex-direction: column; gap: 3px; line-height: 1.2; margin-top: 4px;
}
.checkout-submit-total { font-size: var(--fs-tiny); font-weight: var(--fw-medium); opacity: .82; font-variant-numeric: tabular-nums; }
.checkout-submit-total:empty { display: none; }

.checkout-form .cod-trust { margin-top: 8px; }

.checkout-summary-card {
  background: var(--bg);
  border: 1px solid var(--checkout-border); border-radius: var(--r-input);
  box-shadow: 0 1px 2px rgba(18, 18, 18, .04);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 11px;
}
.checkout-items { display: flex; flex-direction: column; }
.checkout-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.checkout-item:first-child { border-top: 0; padding-top: 2px; }
.checkout-item img { width: 52px; height: 52px; object-fit: cover; background: var(--surface-muted); border-radius: 6px; }
.checkout-item-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.checkout-item-name { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.checkout-item-ref { font-size: var(--fs-tiny); color: var(--text-muted); }
.checkout-item-controls { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.checkout-item .qty-control { padding: 2px; gap: 2px; }
.checkout-item .qty-control button { width: 28px; height: 28px; font-size: 15px; }
.checkout-item .qty-control strong { min-width: 18px; font-size: var(--fs-tiny); }
.checkout-item-remove {
  background: 0; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-tiny); color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.checkout-item-remove:hover { color: #b00020; }
.checkout-item-price { font-size: var(--fs-small); font-weight: var(--fw-heading); white-space: nowrap; font-variant-numeric: tabular-nums; }

.checkout-totals {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.checkout-offer-row { color: #067647; font-weight: var(--fw-medium); }
.checkout-offer-row[hidden] { display: none; }
.checkout-pay-note { font-size: var(--fs-tiny); color: var(--text-muted); }

@media (max-width: 959px) {
  .checkout-summary { order: -1; }
}
@media (min-width: 960px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .checkout-summary { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* Success drawer + animated checkmark */
.checkout-done { justify-content: center; padding: 24px; box-shadow: var(--shadow-panel); }
.checkout-done-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.checkout-done-check svg { width: 78px; height: 78px; overflow: visible; }
.checkout-done-check .cd-circle {
  fill: none; stroke: var(--text); stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
}
.checkout-done-check .cd-check {
  fill: none; stroke: var(--text); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 48; stroke-dashoffset: 48;
}
.checkout-done.is-drawn .cd-circle { animation: cd-draw .5s ease forwards; }
.checkout-done.is-drawn .cd-check { animation: cd-draw .34s .46s ease forwards; }
.checkout-done.is-drawn .checkout-done-check { animation: cd-pop .4s .66s ease; }
@keyframes cd-draw { to { stroke-dashoffset: 0; } }
@keyframes cd-pop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } }
.checkout-done h2 { font-size: 22px; }
.checkout-done-msg { font-size: var(--fs-small); color: var(--text); }
.checkout-done-total { font-size: var(--fs-small); font-weight: var(--fw-medium); }
.checkout-done-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
.checkout-done-call { font-size: var(--fs-tiny); color: var(--text-muted); }
.checkout-done-call a { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .checkout-done .cd-circle, .checkout-done .cd-check { stroke-dashoffset: 0; }
}

/* ---------- Static content page -------------------------------------- */
.static-page { padding-block: var(--sp-12) var(--sp-16); max-width: 760px; }
.static-page h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-6); }
.static-page-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.static-page-body h2 { font-size: var(--fs-h2); margin: var(--sp-8) 0 var(--sp-3); }
.static-page-body p { margin-bottom: 1em; }

/* ---------- Confetti (kept from the bundle promo) ---------------------- */
.confetti-burst { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-toast); overflow: hidden; }
.confetti-piece { position: absolute; top: -12px; width: 8px; height: 12px; opacity: .9; animation: confetti-fall linear forwards; }
.confetti-piece.is-round { border-radius: 50%; }
@keyframes confetti-fall {
  to { transform: translateY(105vh) translateX(var(--drift, 0)) rotate(var(--rotate, 360deg)); opacity: 0; }
}

/* ==========================================================================
   Contact bubble — every page. Cycles its own face (phone → chat → a wide
   "Contactez-nous" pill) to draw the eye while closed; opening replaces that
   with a plain ✕ and slides a menu of channels up above the button.
   ========================================================================== */
.contact-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  /* "a bit up from the very edge" rather than flush-bottom, and clear of any
     thumb-reach chrome a phone's own browser adds at the bottom. */
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 90;   /* above page content, below every drawer/overlay (200+) */
  transition: opacity var(--motion-panel), transform var(--motion-panel);
}
/* Never sits on top of the PDP's own sticky buy bar — hidden for as long as
   that bar is showing, not repositioned around it. */
body:has(.pdp-sticky.is-visible) .contact-fab {
  opacity: 0; pointer-events: none; transform: translateY(10px);
}

.contact-fab-btn {
  position: relative; display: flex; align-items: center;
  height: 56px; min-width: 56px; padding: 0 17px;
  border: 0; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-text); cursor: pointer;
  box-shadow: var(--shadow-panel);
  transition: min-width var(--motion-panel), padding var(--motion-panel);
}
.contact-fab-btn:hover { opacity: .92; }

/* Three faces stacked in the same box; only one has width/opacity at a time.
   Crossfading opacity (not swapping markup) is what makes the change read as
   smooth rather than a jump-cut. */
.cfab-face {
  position: absolute; left: 0; top: 0; height: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 17px;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
  white-space: nowrap;
}
.cfab-pill-label { font-size: var(--fs-tiny); font-weight: 700; }

.contact-fab-btn[data-state="phone"] .cfab-face--phone,
.contact-fab-btn[data-state="chat"]  .cfab-face--chat,
.contact-fab-btn[data-state="pill"]  .cfab-face--chat,
.contact-fab-btn[data-state="open"]  .cfab-face--close {
  opacity: 1;
}
/* The pill state is the only one that needs the button itself wider than a
   circle — the label is part of .cfab-face--chat, width only grows for it. */
.contact-fab-btn[data-state="pill"] { min-width: 190px; }
.contact-fab-btn[data-state="phone"] .cfab-pill-label,
.contact-fab-btn[data-state="chat"]  .cfab-pill-label { display: none; }

.contact-fab-menu {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: max-content; min-width: 220px;
  /* Five rows is close to 300px tall — on a short viewport (a phone in
     landscape, a small laptop window) that plus the button's own 90px lift
     can run the menu off the top of the screen. Scroll inside it instead. */
  max-height: min(60vh, 340px); overflow-y: auto;
  background: var(--bg); border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  transform-origin: bottom right;
  animation: cfab-menu-in .22s cubic-bezier(.32,.72,0,1);
}
.contact-fab-menu[hidden] { display: none; }
@keyframes cfab-menu-in {
  from { opacity: 0; transform: scale(.92) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.cfab-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  border: 0; background: transparent; width: 100%;
  font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer;
  transition: background var(--motion-fast);
}
.cfab-item:hover { background: var(--surface-muted); }
.cfab-item--soon { color: var(--text-muted); cursor: default; }
.cfab-item--soon:hover { background: transparent; }
.cfab-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.cfab-ico--wa   { background: #25D366; }
.cfab-ico--tel  { background: var(--btn-bg); }
.cfab-ico--fb   { background: #0084FF; }
.cfab-ico--mail { background: #F5A623; }
.cfab-ico--form { background: #7C3AED; }
.cfab-label { flex: 1; min-width: 0; }
.cfab-soon {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-muted); background: var(--surface-muted);
  border-radius: 999px; padding: 3px 8px;
}

@media (max-width: 480px) {
  .contact-fab { right: max(12px, env(safe-area-inset-right)); }
  .contact-fab-btn[data-state="pill"] { min-width: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-fab, .cfab-face, .contact-fab-btn { transition: none; }
  .contact-fab-menu { animation: none; }
}
.cfab-item--soon.is-tapped { animation: cfab-soon-tap .26s ease; }
@keyframes cfab-soon-tap { 25%, 75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }