/* ==========================================================================
   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 {
  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);
}

/* ---------- 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;
}
.header-logo {
  font-size: 20px; font-weight: var(--fw-display);
  letter-spacing: var(--tracking-tight); white-space: nowrap;
}
/* 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: 24px; }
.header-nav a {
  font-size: var(--fs-body); font-weight: var(--fw-body);
  transition: opacity var(--motion-fast);
}
.header-nav a:hover,
.header-nav a[aria-current="page"] { opacity: .55; }
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header-search-toggle--desktop { display: none; }

.header-cart, .header-wishlist { position: relative; }
.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 + search on the left, logo centered, actions right */
.header-menu-toggle { margin-left: -8px; }
@media (max-width: 1023px) {
  .header-inner { justify-content: space-between; position: relative; }

  /* The logo is centred by absolute positioning, which takes it out of the flex
     row — so nothing stops it growing straight through the icons on either
     side. It did: a 180px wordmark on a 360px screen overlapped both the search
     button and the cart.
     --header-side is the room the icon clusters actually need. The logo is
     capped by what is left between them, so it shrinks to fit instead of
     colliding, whatever size the merchant uploaded. */
  /* One value, not a scale: the icon buttons are a fixed physical size, so a
     narrower screen needs the SAME reserve — the logo is what gives way. A
     "small phones get less" override made this worse, and matched at exactly
     360px, which is the width it was breaking on.
     108px of icons + 12px of breathing room. */
  .header-inner { --header-side: 120px; }

  .header-logo {
    position: absolute; left: 50%; transform: translateX(-50%);
    font-size: 18px;
    max-width: calc(100% - 2 * var(--header-side));
    overflow: hidden; text-overflow: ellipsis;
  }
  /* The image follows the box rather than a fixed 180px of its own. */
  .header-logo--image img { max-width: 100%; height: auto; max-height: 30px; }

  .header-actions .icon-btn:first-child { display: none; } /* desktop search hidden anyway */
}

@media (min-width: 1024px) {
  .header-menu-toggle,
  .header-inner > .header-search-toggle:not(.header-search-toggle--desktop) { display: none; }
  .header-nav { display: flex; }
  .header-search-toggle--desktop { display: inline-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; }

/* The drawer itself never scrolls — the links list does, so the track card
   can float over its bottom 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: 12px 24px 24px;
}
/* With the card present, reserve room so every link can still be scrolled
   up clear of it. When the order-tracking app is off the card isn't
   rendered, `.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: 210px; }
.menu-drawer-links a {
  padding: 14px 0; font-size: 28px; font-weight: var(--fw-body);
  letter-spacing: var(--tracking-tight);
  flex-shrink: 0;
}

/* Order-tracking promo card — floats over the bottom of the menu drawer;
   the links scroll behind it. White base, a low-opacity pink→green wash
   flowing right→left, lifted on a soft 3-D shadow. Square corners
   throughout (theme style). */
.menu-track-card {
  position: absolute;
  left: 22px; right: 22px; bottom: 26px;
  z-index: 1;
  display: block;
  background: var(--bg);
  border: 1px solid rgba(18, 24, 40, .07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 2px 6px rgba(18, 24, 40, .06),
    0 20px 44px -16px rgba(18, 24, 40, .28);
  overflow: hidden;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.menu-track-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(236, 72, 153, .22), rgba(18, 197, 106, .16));
  pointer-events: none;
}
.menu-track-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 2px 6px rgba(18, 24, 40, .06),
    0 26px 54px -16px rgba(18, 24, 40, .34);
}
.menu-track-inner { position: relative; padding: 20px; }
.menu-track-head { display: flex; align-items: center; gap: 13px; }
.menu-track-icon { width: 42px; height: 42px; flex-shrink: 0; object-fit: contain; }
.menu-track-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-track-title { font-size: 17px; font-weight: 600; letter-spacing: var(--tracking-tight); }
.menu-track-sub { font-size: var(--fs-small); color: var(--text-muted); }
.menu-track-btn {
  margin-top: 16px;
  display: block; text-align: center;
  background: var(--btn-bg); color: var(--btn-text);
  border-radius: 0;
  padding: 14px 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-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 ------------------------------- */
.hero {
  position: relative;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  background: #2f2a26 center/cover no-repeat;
  overflow: hidden;
}
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.15); }
.hero-content { position: relative; z-index: 1; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero-content h1 { font-size: var(--fs-h1); color: #fff; max-width: 14ch; }
@media (min-width: 1024px) { .hero { min-height: 470px; } }

/* ---------- Product grid + card ------------- */
.products-block { padding-block: var(--sp-12) var(--sp-16); }
.products-block > h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-6); }

/* 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: 12px 12px 16px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--motion-fast);
}
/* border-hover: a full dark 1.5px frame that overlays the hairline grid */
.product-card:hover { z-index: 1; box-shadow: inset 0 0 0 1.5px var(--text); }

.product-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.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: contain;
  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: flush top-left so it never covers the product */
.product-card-oos {
  position: absolute; left: 0; top: 0; z-index: 3;
  font-size: var(--fs-tiny); font-weight: var(--fw-heading);
  background: var(--bg); padding: 4px 8px;
}
.product-card-badges {
  position: absolute; left: 0; top: 0; z-index: 3;
  display: flex; pointer-events: none;
}

.product-card-body {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding-top: 12px; text-align: center;
}
.product-card-title {
  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;
}
.product-card-title:hover { opacity: .6; }
.product-card-sub {
  font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Small "Choisir une option" + heart, one row, never wrapping */
.product-card-actions {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: stretch; gap: 8px; width: 100%;
}
.product-card-choose {
  flex: 1; min-width: 0;
  padding: 11px 8px;
  border: 1px solid var(--text); background: var(--bg); color: var(--text);
  font: inherit; font-size: 12px; font-weight: var(--fw-medium);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}
.product-card-choose:hover:not(:disabled) { background: var(--hover); color: var(--hover-text); }
.product-card-choose:disabled { border-color: var(--border); color: var(--text-muted); cursor: not-allowed; }
.product-card-heart {
  flex-shrink: 0; width: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  cursor: pointer;
  transition: color var(--motion-fast), border-color var(--motion-fast);
}
.product-card-heart:hover { border-color: var(--text); }
.product-card-heart svg { transition: transform var(--motion-fast); }
.product-card-heart.is-active { color: #E11D2A; border-color: #E11D2A; }
.product-card-heart.is-active svg { fill: #E11D2A; animation: heart-pop .32s ease; }
@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: 4px 8px; border-radius: 0;
}

/* ---------- Collection / catalog page ------- */
.collection-head { padding-block: var(--sp-12) var(--sp-6); }
.collection-head h1 { font-size: var(--fs-display); }
.collection-head p { margin-top: 12px; max-width: 60ch; color: var(--text-muted); }

.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; }

.footer-legal {
  max-width: var(--container-max); margin-inline: auto;
  padding: 20px var(--container-pad) calc(28px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: var(--fs-tiny); color: var(--text-muted); text-align: center;
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--text); }
@media (min-width: 900px) {
  .footer-legal { flex-direction: row; justify-content: space-between; }
}

/* ---------- 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: 1fr; gap: var(--sp-8);
  padding-block: var(--sp-6) var(--sp-16);
}
@media (min-width: 1000px) {
  .pdp { grid-template-columns: 1.1fr 1fr; gap: var(--sp-12); align-items: start; }
}

.pdp-gallery { 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; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.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; }

.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, both single-line */
.cod-actions { display: flex; gap: 10px; align-items: stretch; }
.cod-buy {
  flex: 1; min-width: 0;
  height: 54px; padding: 0 14px;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.cod-addcart { gap: 8px; }
.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 {
  border: 1px solid var(--border); border-radius: var(--r-input);
  padding: 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 .cod-item-name { color: var(--text); font-weight: var(--fw-medium); }
.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 {
  border-top: 1px solid var(--border); 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; }
}