/* ============================================================
   FAUNIX — static homepage, mobile-first
   ============================================================ */
:root {
  --cream: #f7f4ee;
  --cream-2: #fdfcf9;
  --ink: #14120d;
  --ink-soft: #33301f;
  --muted: #6b6552;
  --muted-dark: #b5ae97;
  --gold: #b08430;
  --gold-light: #cfa14a;
  --dark: #23241a;
  --dark-2: #2c2d20;
  --line: #e3ddd0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--cream); color: var(--ink); font-family: 'Barlow', sans-serif; font-weight: 500; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #8f6a22; }

/* ---- entrance animations ---- */
@keyframes fx-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fx-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.oswald { font-family: 'Oswald', sans-serif; }

.btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: 14px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 26px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(20,18,13,0.18); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #c79a45; color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--cream); border: 1px solid var(--gold); }
.btn-dark:hover { background: #26221a; color: var(--cream); }

/* ============ HEADER (mobile first) ============ */
.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 36px; width: auto; display: block; }
.brand span {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: 3px; color: var(--ink);
}
.header-right { display: flex; align-items: center; gap: 18px; }
.cart-icon { font-size: 19px; cursor: pointer; }

/* CSS-only mobile menu */
.nav-toggle { display: none; }
.nav-toggle-label {
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px;
}
.nav-toggle-label span { display: block; width: 24px; height: 2px; background: var(--ink); }
.main-nav {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  padding: 8px 20px 18px;
  z-index: 50;
}
.nav-toggle:checked ~ .main-nav { display: flex; }
.main-nav a {
  font-family: 'Oswald', sans-serif; font-size: 15px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink); padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.main-nav a:hover { color: var(--gold); }
.main-nav a.active { color: var(--gold); }
.footer-nav a, .main-nav a { transition: color 0.2s ease; }

/* ============ HERO ============ */
.hero { position: relative; background: var(--cream); overflow: hidden; }
.hero-media-bg {
  position: absolute; inset: 0; z-index: 1;
  background: center / cover no-repeat;
  filter: blur(22px); transform: scale(1.12); will-change: transform;
}
.hero-media {
  position: absolute; inset: 0; z-index: 2;
  background: url("../images/hero-section-image.webp") center / cover no-repeat;
  transform-origin: center center;
}
.hero-fade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
/*   background: linear-gradient(180deg, rgba(247,244,238,0.92) 0%, rgba(247,244,238,0.65) 100%); */
}
.hero-stamp {
  position: absolute; z-index: 5; top: 18px; right: 20px;
  width: 84px; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35));
  animation: fx-fade-in 1s ease 0.5s both;
  transition: transform 0.3s ease;
}
.hero-stamp:hover { transform: rotate(-6deg) scale(1.05); }
.hero-content { position: relative; z-index: 4; padding: 56px 20px; max-width: 640px; }
.hero-title { animation: fx-fade-up 0.7s ease both; }
.hero-rule { animation: fx-fade-up 0.7s ease 0.15s both; }
.hero-text { animation: fx-fade-up 0.7s ease 0.25s both; }
.hero-ctas { animation: fx-fade-up 0.7s ease 0.4s both; }
.hero-title { margin: 0; text-transform: uppercase; line-height: 0.98; color: var(--ink); }
.hero-title .big { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(34px, 11vw, 42px); }
.hero-title .sub { display: block; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 23px; margin-top: 8px; }
.hero-rule { width: 54px; height: 3px; background: var(--gold); margin: 22px 0; }
.hero-text { font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 480px; font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* Mobile hero readability: the dark ink text sits over the background photo, so
   on small screens we keep a stronger cream scrim behind the text (fading to more
   transparent lower down so the image still shows), plus a soft light glow on the
   text. This keeps the font legible even when the background image is dark. */
@media (max-width: 767px) {
/*   .hero-fade {
    background: linear-gradient(180deg,
      rgba(247,244,238,0.96) 0%,
      rgba(247,244,238,0.92) 42%,
      rgba(247,244,238,0.74) 74%,
      rgba(247,244,238,0.58) 100%);
  } */
  .hero-title,
  .hero-text { text-shadow: 0 1px 12px rgba(247,244,238,0.85), 0 0 2px rgba(247,244,238,0.9); }
}

/* ============ FEATURES STRIP ============ */
.features {
  background: var(--cream-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 30px 20px;
}
.features-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.feature { display: flex; gap: 14px; transition: transform 0.25s ease; }
.feature:hover { transform: translateY(-4px); }
.feature:hover img { transform: scale(1.12); }
.feature img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; transition: transform 0.25s ease; }
.feature h3 {
  margin: 0; font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1.25;
}
.feature p { margin: 5px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }

/* ============ PRODUCTS BAND ============ */
.faunix-products { background: var(--dark); display: grid; grid-template-columns: minmax(0, 1fr); }
.faunix-products .faunix-product {
  display: flex; align-items: center; gap: 18px;
  padding: 30px 20px;
  border-bottom: 1px solid rgba(244,241,234,0.12);
  transition: background 0.3s ease;
}
.faunix-products .faunix-product:hover { background: rgba(244,241,234,0.05); }
.faunix-products .faunix-product:hover img { transform: scale(1.06) translateY(-3px); }
.faunix-products .faunix-product img {
  width: 90px; height: 122px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.45));
  transition: transform 0.3s ease;
}
.faunix-products .faunix-product h3 {
  margin: 0; font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--cream); line-height: 1.15;
}
.faunix-products .faunix-product .tagline {
  font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted-dark); margin-top: 8px; line-height: 1.35;
}
.faunix-products .faunix-product .more {
  display: inline-block; font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-light); margin-top: 12px;
  transition: color 0.2s ease, letter-spacing 0.25s ease;
}
.faunix-products .faunix-product .more:hover { color: #e6bc6a; letter-spacing: 2.5px; }
.faunix-products-animals { display: flex; align-items: center; justify-content: center; padding: 24px 20px; }
.faunix-products-animals img { width: 100%; max-width: 520px; display: block; }

/* ============ TRUST + DISTRIBUTOR ============ */
.trust { background: var(--cream); padding: 44px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.trust-item { display: flex; gap: 14px; align-items: flex-start; transition: transform 0.25s ease; }
.trust-item:hover { transform: translateY(-4px); }
.trust-item img { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.trust-item h3 {
  margin: 0; font-family: 'Oswald', sans-serif; font-size: 15px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; line-height: 1.3;
}
.trust-item p { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

.distributor {
  background: #ffffff; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(28,26,20,0.06);
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; align-self: stretch;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.distributor:hover { box-shadow: 0 10px 28px rgba(28,26,20,0.14); transform: translateY(-3px); }
.distributor-copy { padding: 26px 24px; }
.distributor-copy h3 {
  margin: 0; font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink); line-height: 1.25;
}
.distributor-copy p { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.distributor-copy .btn { margin-top: 18px; font-size: 12.5px; padding: 11px 20px; }
.distributor-media {
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2); padding: 0; min-height: 180px;
}
.distributor-media img {
  width: 100%; height: 100%; object-fit: contain; max-width: 240px; padding: 14px;
}
.distributor-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--ink); color: var(--muted-dark);
  padding: 30px 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.site-footer .brand img { height: 28px; filter: invert(1) brightness(1.6); }
.site-footer .brand span { color: var(--cream); font-size: 16px; letter-spacing: 2.5px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px 24px; }
.footer-nav a {
  font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted-dark);
}
.footer-nav a:hover { color: var(--gold-light); }
.footer-copy { font-size: 12.5px; }

/* ============================================================
   TABLET — min-width: 720px
   ============================================================ */
@media (min-width: 720px) {
  .site-header { padding: 16px 40px; }
  .hero-media { background-position: center right; }
  .hero-content { padding: 72px 40px; }
  .hero-title .big { font-size: 64px; }
  .hero-title .sub { font-size: 32px; }
  .hero-text { font-size: 19px; }
  .hero-stamp { width: 115px; top: 28px; right: 40px; }

  .features { padding: 34px 40px; }
  .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .feature { padding: 0 18px; border-left: 1px solid var(--line); }

  .faunix-products { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .faunix-product { border-right: 1px solid rgba(244,241,234,0.12); }
  .faunix-products-animals { grid-column: span 2; }

  .trust { padding: 52px 40px; }
  .trust-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .distributor { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

  .site-footer { flex-direction: row; align-items: center; justify-content: space-between; padding: 34px 40px; }
}

/* ============================================================
   DESKTOP — min-width: 1100px
   ============================================================ */
@media (min-width: 1100px) {
  .site-header { padding: 18px 56px; }
  .brand img { height: 44px; }
  .brand span { font-size: 26px; }

  /* horizontal nav, hide hamburger */
  .nav-toggle-label { display: none; }
  .main-nav {
    display: flex; position: static;
    flex-direction: row; align-items: center; gap: 36px;
    background: none; border: none; padding: 0;
  }
  .main-nav a { padding: 0 0 4px; border-bottom: 2px solid transparent; font-size: 14px; transition: color 0.2s ease, border-color 0.2s ease; }
  .main-nav a:hover { border-bottom-color: var(--gold); }
  .main-nav a.active { border-bottom-color: var(--gold); }

  .hero { min-height: 620px; }
  .hero-content { padding: 72px 0 72px 56px; }
  .hero-title .big { font-size: 88px; }
  .hero-title .sub { font-size: 44px; }
  .hero-text { font-size: 20px; }
  .hero-stamp { width: 150px; top: 42px; right: 56px; }
  .hero-fade {
    background: linear-gradient(90deg, rgba(247,244,238,0.94) 0%, rgba(247,244,238,0.75) 28%, rgba(247,244,238,0) 55%);
  }

  .features { padding: 34px 56px; }
  .features-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
  .feature { padding: 6px 22px; }

  .faunix-products { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr); }
  .faunix-product { border-bottom: none; }
  .faunix-products-animals { grid-column: auto; padding: 24px 30px; }

  .trust { padding: 52px 56px; }

  .site-footer { padding: 34px 56px; }
}

/* ============================================================
   WIDE DESKTOP — min-width: 1280px (homepage trust row)
   ============================================================ */
@media (min-width: 1280px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(420px, minmax(0, 2fr)); gap: 32px; align-items: center; }
  .trust-grid { display: contents; }
  .distributor { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-self: stretch; }
  .distributor-copy { padding: 26px 24px; }
  .distributor-copy h3 { font-size: 17px; }
  .distributor-copy p { font-size: 13px; }
}

/* ============================================================
   PRODUITS PAGE (mobile first)
   ============================================================ */
.btn-outline {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--ink);
  font-size: 12.5px; padding: 11px 24px;
}
.btn-outline:hover { background: var(--ink); color: var(--cream); }

.phero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(247,244,238,0.96) 0%, rgba(247,244,238,0.55) 30%, rgba(247,244,238,0.05) 62%),
    url('../images/produits-hero.webp') center top / cover no-repeat;
  padding: 48px 20px 72px;
}
.phero-intro { max-width: 640px; }
.phero-title {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(34px, 11vw, 44px); letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  line-height: 1; animation: fx-fade-up 0.7s ease both;
}
.phero-sub {
  margin: 14px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
  animation: fx-fade-up 0.7s ease 0.15s both;
}
.phero-sub::after {
  content: ""; display: block; width: 54px; height: 3px;
  background: var(--gold); margin-top: 14px;
}
.phero-text {
  margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); font-weight: 600;
  max-width: 420px; animation: fx-fade-up 0.7s ease 0.25s both;
}

/* Page-hero readability scrim. The hero text is rendered transparently over the
   full-page background photo (body.faunix-bg-*), which has NO fade at the top —
   so dark text was unreadable. This lays a cream scrim behind the hero text
   (stronger on mobile) while leaving the photo clear below the text. */
.faunix-phero { position: relative; }
.faunix-phero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
/*   background: linear-gradient(180deg,
    rgba(247,244,238,0.42) 0%, rgba(247,244,238,0.20) 55%, rgba(247,244,238,0) 100%); */
}
.faunix-phero-inner { position: relative; z-index: 1; }
@media (max-width: 767px) {
/*   .faunix-phero::before {
    background: linear-gradient(180deg,
      rgba(247,244,238,0.55) 0%, rgba(247,244,238,0.30) 55%, rgba(247,244,238,0.05) 100%);
  } */
  .phero-title, .phero-sub, .phero-text,
  .rhero-title, .rhero-sub, .rhero-text,
  .thero-title, .thero-sub, .thero-text,
  .chero-title, .chero-sub, .chero-text,
  .qhero-title, .qhero-sub, .qhero-text {
    text-shadow: 0 1px 10px rgba(247,244,238,0.9), 0 0 2px rgba(247,244,238,0.95);
  }
}

/* ---- three equal columns, per reference design ---- */
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 110px; margin-top: 130px; }
.pcol { display: flex; flex-direction: column; }

.pcard {
  position: relative;
  flex: 1; display: flex; flex-direction: column; align-items: center;
  background: rgba(253,252,249,0.97);
  border-radius: 10px 10px 0 0;
  box-shadow: 0 18px 40px rgba(20,18,13,0.28);
  padding: 0 22px 26px; text-align: center;
  transition: box-shadow 0.35s ease;
}
.pcard:hover { box-shadow: 0 26px 55px rgba(20,18,13,0.38); }

.pcard-num {
  position: absolute; top: 12px; right: 14px;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 2px; color: rgba(176,132,48,0.6);
}
.pcard-cam {
  width: 175px; height: 215px; object-fit: contain;
  margin-top: -105px;
  filter: drop-shadow(0 18px 22px rgba(20,18,13,0.45));
  transition: transform 0.35s ease;
}
.pcol:hover .pcard-cam { transform: scale(1.05) translateY(-6px); }

.pcard h2 {
  margin: 14px 0 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 27px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
}
.pcard-tagline {
  margin: 10px 0 0; font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 13.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft);
  line-height: 1.5;
}
.pcard-text {
  margin: 12px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55;
  max-width: 250px; flex: 1;
}
.pcard .btn { margin-top: 18px; }

/* animal photo flush below the card */
.pcol-animal {
  display: block; width: 100%;
  aspect-ratio: 1 / 1; object-fit: cover;
  border: 1px solid var(--gold); border-top: none;
  box-sizing: border-box;
  transition: transform 0.45s ease, filter 0.45s ease;
  filter: saturate(0.95);
}
.pcol:hover .pcol-animal { filter: saturate(1.1); }

/* tablet + up: three equal columns */
@media (min-width: 720px) {
  .phero { padding: 64px 40px 84px; }
  .phero-title { font-size: 58px; }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 170px; align-items: stretch; }
  .pcard { padding: 0 18px 24px; }
  .pcard-cam { width: 145px; height: 180px; margin-top: -95px; }
}

/* desktop */
@media (min-width: 1100px) {
  .phero { padding: 72px 56px 96px; }
  .phero-title { font-size: 72px; }
  .phero-sub { font-size: 21px; }
  .pgrid { gap: 40px; margin-top: 190px; max-width: 1200px; margin-left: auto; margin-right: auto; }
  .pcard { padding: 0 26px 30px; }
  .pcard-cam { width: 180px; height: 220px; margin-top: -120px; }
  .pcard h2 { font-size: 30px; }
}

/* ============================================================
   REVENDEURS PAGE (mobile first)
   ============================================================ */
.rhero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(247,244,238,0.92) 0%, rgba(247,244,238,0.45) 34%, rgba(247,244,238,0.05) 65%),
    url('../images/revendeurs-hero.webp') center top / cover no-repeat;
  padding: 48px 20px 56px;
}
.rhero-intro { max-width: 660px; }
.rhero-title {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(30px, 10vw, 38px); letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  line-height: 1.05; animation: fx-fade-up 0.7s ease both;
}
.rhero-sub {
  margin: 14px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  animation: fx-fade-up 0.7s ease 0.15s both;
}
.rhero-text {
  margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-soft); font-weight: 600;
  max-width: 480px; animation: fx-fade-up 0.7s ease 0.25s both;
}

/* benefits row over the photo */
.rbenefits {
  margin-top: 56px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
.rbenefit {
  background: rgba(20,18,13,0.72);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(176,132,48,0.35);
  border-radius: 8px;
  padding: 26px 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.rbenefit:hover { transform: translateY(-5px); border-color: var(--gold); background: rgba(20,18,13,0.82); }
.rbenefit img { width: 62px; height: 62px; object-fit: contain; transition: transform 0.3s ease; }
.rbenefit:hover img { transform: scale(1.1); }
.rbenefit h3 {
  margin: 16px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--cream);
  line-height: 1.35;
}
.rbenefit p { margin: 10px 0 0; font-size: 13px; color: var(--muted-dark); line-height: 1.55; }

/* contact band — dark title block left, text center, gold button right (per mockup) */
.rcontact {
  margin-top: 28px;
  background: rgba(253,252,249,0.97);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(20,18,13,0.25);
  overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
}
.rcontact h2 {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 19px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink);
  line-height: 1.3; padding: 24px 26px 0;
}
.rcontact p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; padding: 20px 26px 0; }
.rcontact .btn { margin: 18px 26px 24px; align-self: flex-start; }

/* perks strip */
.rperks {
  background: var(--ink);
  padding: 22px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.rperk {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
}
.rperk img { width: 40px; height: 40px; object-fit: contain; }
.rperk span {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 13.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cream);
}

/* tablet */
@media (min-width: 720px) {
  .rhero { padding: 64px 40px 72px; }
  .rhero-title { font-size: 54px; }
  .rbenefits { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 130px; }
  .rcontact { flex-direction: row; align-items: center; }
  .rcontact h2 { align-self: stretch; display: flex; align-items: center; max-width: 300px; padding: 24px 30px; position: relative; }
  .rcontact h2::after { content: ""; position: absolute; right: 0; top: 22px; bottom: 22px; width: 2px; background: var(--gold); }
  .rcontact p { flex: 1; padding: 24px 10px 24px 30px; }
  .rcontact .btn { margin: 0 30px; flex-shrink: 0; align-self: center; }
  .rperks { grid-template-columns: repeat(3, auto); justify-content: space-around; padding: 24px 40px; }
}

/* desktop */
@media (min-width: 1100px) {
  .rhero { padding: 72px 56px 88px; }
  .rhero-title { font-size: 64px; }
  .rhero-sub { font-size: 20px; }
  .rhero-text { font-size: 17px; }
  .rbenefits { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 170px; max-width: 1240px; margin-left: auto; margin-right: auto; }
  .rcontact { max-width: 1240px; margin-left: auto; margin-right: auto; margin-top: 34px; }
  .rperks { padding: 26px 56px; }
}

/* ============================================================
   QUI SOMMES-NOUS PAGE (mobile first)
   ============================================================ */
.qhero {
  position: relative;
  padding: 48px 20px 64px;
  background: transparent;   /* photo comes from the full-page background */
}
.qhero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
@media (max-width: 767px) {
  .qhero { min-height: 0; }
}
.qhero-title {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(32px, 10vw, 40px); letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  line-height: 1.05; animation: fx-fade-up 0.7s ease both;
}
.qhero-sub {
  margin: 12px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  animation: fx-fade-up 0.7s ease 0.15s both;
}
.qhero-text {
  margin: 16px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); font-weight: 600;
  max-width: 440px; animation: fx-fade-up 0.7s ease 0.25s both;
}

/* mission card */
.qmission {
  margin-top: 80px; max-width: 400px;
  background: rgba(20,18,13,0.78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(176,132,48,0.35);
  border-radius: 8px;
  padding: 26px 26px 28px;
  position: relative;
}
@media (max-width: 719px) { .qmission { margin-left: auto; margin-right: auto; } }
.qmission-picto {
  position: absolute; top: -46px; left: 22px;
  width: 84px; height: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.4));
}
.qmission h2 {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: 2px; text-transform: uppercase; color: var(--cream);
}
.qmission p { margin: 12px 0 0; font-size: 14px; color: var(--muted-dark); line-height: 1.6; }

/* founder cards */
.qfounders { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; }
.qfounder {
  background: rgba(20,18,13,0.82);
  border: 1px solid rgba(176,132,48,0.4);
  border-radius: 10px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 40px rgba(20,18,13,0.35);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.qfounder:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 26px 55px rgba(20,18,13,0.45); }
.qfounder-photo {
  display: block; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: center top;
  transition: transform 0.45s ease;
}
.qfounder:hover .qfounder-photo { transform: scale(1.04); }
.qfounder-info { padding: 20px 22px 24px; text-align: center; }
.qfounder-info h3 {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 23px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light);
}
.qfounder-role {
  display: block; margin-top: 4px;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12.5px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--cream);
}
.qfounder-info p { margin: 12px 0 0; font-size: 13.5px; color: var(--muted-dark); line-height: 1.6; }

/* badges strip */
.qbadges {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding: 26px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px;
}
.qbadge { display: flex; align-items: center; gap: 12px; }
.qbadge img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.qbadge span {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink); line-height: 1.4;
}

/* tablet */
@media (min-width: 720px) {
  .qhero { padding: 64px 40px 80px; }
  .qhero-title { font-size: 54px; }
  .qhero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
  .qfounders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .qmission { margin-top: 150px; }
  .qbadges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 26px 40px; }
}

/* desktop */
@media (min-width: 1100px) {
  .qhero { padding: 72px 56px 96px; }
  .qhero-title { font-size: 64px; }
  .qhero-sub { font-size: 20px; }
  .qhero-text { font-size: 16.5px; }
  .qhero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 1280px; margin: 0 auto; }
  .qbadges { padding: 28px 56px; }
  .qbadge img { width: 58px; height: 58px; }
  .qbadge span { font-size: 13px; }
}

/* ============================================================
   CONTACT PAGE (mobile first)
   ============================================================ */
.chero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(247,244,238,0.94) 0%, rgba(247,244,238,0.5) 30%, rgba(247,244,238,0.05) 62%),
    url('../images/contact-hero.webp') center / cover no-repeat;
  padding: 48px 20px 64px;
}
.chero-intro { max-width: 640px; }
.chero-title {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(34px, 11vw, 42px); letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  line-height: 1.05; animation: fx-fade-up 0.7s ease both;
}
.chero-sub {
  margin: 12px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  animation: fx-fade-up 0.7s ease 0.15s both;
}
.chero-text {
  margin: 16px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft);
  max-width: 440px; font-weight: 600; animation: fx-fade-up 0.7s ease 0.25s both;
}

.cgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }

/* coordinates column */
.cinfo { display: flex; flex-direction: column; gap: 26px; }
.cinfo-item { display: flex; gap: 16px; align-items: flex-start; }
.cinfo-item img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.cinfo-item h3 {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-light);
  text-shadow: 0 1px 3px rgba(20,18,13,0.6);
}
.cinfo-item p { margin: 6px 0 0; font-size: 14px; color: rgba(244,241,234,0.9); line-height: 1.55; font-weight: 600; text-shadow: 0 1px 3px rgba(20,18,13,0.6); }
.cinfo-item a { color: rgba(244,241,234,0.9); }
.cinfo-item a:hover { color: var(--gold); }

/* form */
.cform {
  background: rgba(20,18,13,0.78);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(176,132,48,0.4);
  border-radius: 8px;
  padding: 28px 24px 30px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 18px 40px rgba(20,18,13,0.35);
}
.cform h2 {
  margin: 0 0 4px; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: var(--cream);
}
.cform-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cform input, .cform textarea {
  width: 100%; box-sizing: border-box;
  background: rgba(253,252,249,0.08);
  border: 1px solid rgba(244,241,234,0.25);
  border-radius: 4px;
  padding: 13px 14px;
  font-family: 'Barlow', sans-serif; font-size: 16px; font-weight: 500;
  color: var(--cream);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.cform input::placeholder, .cform textarea::placeholder { color: rgba(244,241,234,0.55); }
.cform input:focus, .cform textarea:focus {
  outline: none; border-color: var(--gold); background: rgba(253,252,249,0.12);
}
.cform textarea { resize: vertical; min-height: 130px; }
.cform .btn { border: none; cursor: pointer; align-self: stretch; text-align: center; }

/* assurance strip */
.cperks {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  padding: 26px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 16px;
}
.cperk { display: flex; align-items: center; gap: 12px; }
.cperk img { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; }
.cperk h3 {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 13.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); line-height: 1.3;
}
.cperk p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* tablet */
@media (min-width: 720px) {
  .chero { padding: 64px 40px 80px; }
  .chero-title { font-size: 56px; }
  .cgrid { grid-template-columns: minmax(240px, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 44px; margin-top: 56px; }
  .cform-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cform .btn { align-self: center; min-width: 260px; }
  .cperks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 26px 40px; }
}

/* desktop */
@media (min-width: 1100px) {
  .chero { padding: 72px 56px 96px; }
  .chero-title { font-size: 68px; }
  .chero-sub { font-size: 20px; }
  .cgrid { max-width: 1240px; margin-left: auto; margin-right: auto; gap: 64px; }
  .cform { padding: 32px 32px 34px; }
  .cperks { padding: 28px 56px; }
}

/* ============================================================
   TESTS & CERTIFICATIONS PAGE (mobile first)
   ============================================================ */
.thero {
  position: relative;
  background:
    linear-gradient(180deg, rgba(247,244,238,0.94) 0%, rgba(247,244,238,0.5) 30%, rgba(247,244,238,0.08) 62%),
    url('../images/tests-hero.webp') center / cover no-repeat;
  padding: 48px 20px 56px;
}
.thero-intro { max-width: 660px; }
.thero-title {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(32px, 10vw, 40px); letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  line-height: 1.05; animation: fx-fade-up 0.7s ease both;
}
.thero-sub {
  margin: 12px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
  animation: fx-fade-up 0.7s ease 0.15s both;
}
.thero-text {
  margin: 16px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft);
  max-width: 460px; font-weight: 600; animation: fx-fade-up 0.7s ease 0.25s both;
}

/* certification cards */
.tcards {
  margin-top: 60px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
.tcard {
  background: rgba(253,252,249,0.96);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(20,18,13,0.22);
  padding: 30px 24px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.tcard:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(20,18,13,0.3); border-color: rgba(176,132,48,0.5); }
.tcard img { width: 58px; height: 58px; object-fit: contain; transition: transform 0.3s ease; }
.tcard:hover img { transform: scale(1.1); }
.tcard h3 {
  margin: 16px 0 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
}
.tcard h3::after {
  content: ""; display: block; width: 30px; height: 2px;
  background: var(--gold); margin: 10px auto 0;
}
.tcard p { margin: 12px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; font-weight: 500; }

/* values band */
.tvalues {
  background: var(--ink);
  padding: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 18px;
}
.tvalues span {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--cream);
}
.tvalues i { color: var(--gold); font-style: normal; font-size: 15px; }

/* field image */
.tgallery { display: block; background: #e8e2d4; }
.tgallery img { display: block; width: 100%; height: auto; min-height: 220px; object-fit: cover; }

/* tablet */
@media (min-width: 720px) {
  .thero { padding: 64px 40px 72px; }
  .thero-title { font-size: 54px; }
  .tcards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 130px; }
  .tvalues { padding: 22px 40px; gap: 14px 26px; }
}

/* desktop */
@media (min-width: 1100px) {
  .thero { padding: 72px 56px 88px; }
  .thero-title { font-size: 64px; }
  .thero-sub { font-size: 20px; }
  .tcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 170px; max-width: 1240px; margin-left: auto; margin-right: auto; }
  .tvalues { padding: 24px 56px; }
}

/* ============================================================
   LEGAL PAGES + BLOG (mobile first)
   ============================================================ */
.lpage, .bpage { background: var(--cream); padding: 44px 20px 64px; }
.lpage-head h1 {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 34px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  line-height: 1.1;
}
.lpage-sub {
  margin: 10px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold);
}
.lpage-sub::after { content: ""; display: block; width: 54px; height: 3px; background: var(--gold); margin-top: 14px; }
.lpage-body { margin-top: 36px; max-width: 760px; }
.lpage-body section + section { margin-top: 32px; }
.lpage-body h2 {
  margin: 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
}
.lpage-body p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* blog list */
.bgrid { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.bcard {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(20,18,13,0.10);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.bcard:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,18,13,0.18); border-color: rgba(176,132,48,0.5); }
.bcard-media { display: block; overflow: hidden; }
.bcard-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.4s ease; }
.bcard:hover .bcard-media img { transform: scale(1.05); }
.bcard-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.bcard-meta { display: flex; align-items: center; gap: 12px; }
.bcard-cat {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(176,132,48,0.45); border-radius: 3px; padding: 3px 8px;
}
.bcard-date { font-size: 12.5px; color: var(--muted); }
.bcard h2 { margin: 12px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; }
.bcard h2 a { color: var(--ink); }
.bcard h2 a:hover { color: var(--gold); }
.bcard p { margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55; flex: 1; }
.bcard-more {
  margin-top: 14px; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
  transition: letter-spacing 0.25s ease;
}
.bcard-more:hover { letter-spacing: 2.5px; }

/* blog article */
.barticle { max-width: 820px; margin: 0 auto; }
.barticle-head h1 {
  margin: 14px 0 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 30px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink); line-height: 1.15;
}
.barticle-lead { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-soft); font-weight: 600; }
.barticle-cover {
  display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border: 1px solid var(--gold); border-radius: 8px; margin-top: 26px;
}
.barticle-body { margin-top: 30px; }
.barticle-body h2 {
  margin: 30px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 21px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
}
.barticle-body h2::after { content: ""; display: block; width: 30px; height: 2px; background: var(--gold); margin-top: 8px; }
.barticle-body p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.barticle-body ul { margin: 14px 0 0; padding-left: 22px; }
.barticle-body li { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin-top: 6px; }
.barticle-footer { margin-top: 40px; }

/* tablet */
@media (min-width: 720px) {
  .lpage, .bpage { padding: 60px 40px 80px; }
  .lpage-head h1 { font-size: 44px; }
  .bgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
  .barticle-head h1 { font-size: 38px; }
}

/* desktop */
@media (min-width: 1100px) {
  .lpage, .bpage { padding: 72px 56px 96px; }
  .lpage-head, .lpage-body { max-width: 820px; margin-left: auto; margin-right: auto; }
  .lpage-body { margin-top: 40px; }
  .bpage .lpage-head { max-width: 1240px; }
  .bgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; max-width: 1240px; margin-left: auto; margin-right: auto; margin-top: 40px; }
  .lpage-head h1 { font-size: 50px; }
}

/* ============================================================
   THEME BUILDER — styles native Elementor widgets (Site Logo,
   Nav Menu, Menu Cart) used in the global header & footer, so
   they match the Faunix design while staying fully editable.
   ============================================================ */

/* ---------- Header ---------- */
.faunix-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

/* ---- mobile header: logo on the left, cart + burger grouped on the right ---- */
@media (max-width: 1024px) {
  .faunix-header > .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .faunix-header > .elementor-container > .elementor-column {
    width: 100% !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
  }
  /* brand on the left; its auto right-margin pushes everything else to the right
     (selector is more specific than the column margin reset above so it wins) */
  .faunix-header > .elementor-container > .elementor-column.faunix-brand { margin-right: auto !important; }
  .faunix-header .faunix-brand { min-width: 0; }
  .faunix-header .faunix-brand > .elementor-element-populated > .elementor-widget-wrap,
  .faunix-header .faunix-brand > .elementor-widget-wrap {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap;
    align-items: center; justify-content: flex-start; gap: 8px; padding: 0;
  }
  .faunix-header .faunix-brand .elementor-widget { width: auto !important; margin: 0 !important; }
  /* the logo image already carries the "FAUNIX" wordmark — drop the extra heading */
  .faunix-header .faunix-brand .elementor-widget-heading { display: none !important; }
  .faunix-header .faunix-brand img { max-height: 46px; width: auto; }

  /* order the right group: cart, then burger (burger rightmost) */
  .faunix-header > .elementor-container > .elementor-column:nth-child(3) { order: 2; } /* cart */
  .faunix-header > .elementor-container > .elementor-column:nth-child(2) { order: 3; } /* nav/burger */
  /* tighten the two right-hand widgets and centre them vertically */
  .faunix-header > .elementor-container > .elementor-column:not(.faunix-brand) > .elementor-element-populated,
  .faunix-header > .elementor-container > .elementor-column:not(.faunix-brand) > .elementor-widget-wrap {
    display: flex !important; align-items: center; justify-content: center; padding: 0;
  }
  .faunix-header > .elementor-container > .elementor-column:nth-child(2) { margin-left: 14px; } /* gap before burger */
  .faunix-header .elementor-widget-icon .elementor-icon { display: inline-flex; }
  .faunix-header .elementor-nav-menu__toggle,
  .faunix-header .elementor-menu-toggle { margin: 0; display: inline-flex; }
}
.faunix-header .elementor-widget-theme-site-logo img,
.faunix-header .elementor-widget-image img {
  height: 36px; width: auto; display: block;
}
.faunix-header .elementor-nav-menu .elementor-item {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink);
  fill: var(--ink);
  transition: color .2s ease;
}
.faunix-header .elementor-nav-menu .elementor-item:hover,
.faunix-header .elementor-nav-menu .elementor-item.elementor-item-active,
.faunix-header .elementor-nav-menu .elementor-item.highlighted {
  color: var(--gold);
}
/* Mobile dropdown panel */
.faunix-header .elementor-nav-menu--dropdown {
  background-color: var(--cream);
}
.faunix-header .elementor-nav-menu--dropdown .elementor-item {
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
}
.faunix-header .elementor-menu-toggle {
  color: var(--ink);
  background: transparent;
}
/* Cart icon */
.faunix-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button,
.faunix-header .elementor-widget-icon .elementor-icon {
  color: var(--ink);
  fill: var(--ink);
  font-size: 19px;
}

/* ---------- Footer ---------- */
.faunix-footer {
  background: var(--ink);
  color: var(--muted-dark);
}
.faunix-footer .elementor-widget-theme-site-logo img,
.faunix-footer .elementor-widget-image img {
  height: 28px; width: auto;
  filter: invert(1) brightness(1.6);
}
.faunix-footer .elementor-nav-menu .elementor-item {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted-dark);
  fill: var(--muted-dark);
  transition: color .2s ease;
}
.faunix-footer .elementor-nav-menu .elementor-item:hover,
.faunix-footer .elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--gold-light);
}
.faunix-footer,
.faunix-footer p,
.faunix-footer .elementor-widget-text-editor {
  font-size: 12.5px;
  color: var(--muted-dark);
}

/* ------------------------------------------------------------
   Faunix pages are edge-to-edge. On the "Elementor Full Width"
   template the parent theme should not constrain or pad the
   content wrapper.
   ------------------------------------------------------------ */
body.elementor-page .site-main,
body.elementor-page .page-content,
body.elementor-page main.site-main {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
body.elementor-page .site-header + .site-main { margin-top: 0; }

/* ============================================================
   NEUTRAL BAND
   In the static template, one hero section held the intro AND the
   cards that float over the photo. As separate Elementor widgets
   each one would re-declare that photo, repeating it down the page.
   Secondary widgets therefore use .faunix-band: the hero's spacing
   without its background. Only the page hero carries the photo.
   ============================================================ */
.faunix-band {
  position: relative;
  background: var(--cream);
  padding: 48px 20px 56px;
}
.faunix-band--dark { background: var(--ink); }
.faunix-band--flush { padding-top: 0; }
@media (min-width: 720px) {
  .faunix-band { padding: 48px 40px 60px; }
}
@media (min-width: 1100px) {
  .faunix-band { padding: 56px 64px 72px; }
}

/* ---------- Header / footer: brand lockup (logo + FAUNIX wordmark) ---------- */
.faunix-header .faunix-brand > .elementor-widget-wrap,
.faunix-footer .faunix-brand > .elementor-widget-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  gap: 10px;
}
.faunix-header .faunix-brand > .elementor-widget-wrap > .elementor-widget,
.faunix-footer .faunix-brand > .elementor-widget-wrap > .elementor-widget {
  width: auto;
  margin-bottom: 0;
}
.faunix-header .faunix-brand .elementor-heading-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.faunix-footer .faunix-brand .elementor-heading-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2.5px;
  line-height: 1;
  color: var(--cream);
  white-space: nowrap;
}

/* ---------- Header: plain cart icon, as in the template ---------- */
.faunix-header .elementor-widget-icon .elementor-icon {
  font-size: 19px;
  color: var(--ink);
  fill: var(--ink);
  padding: 0;
  background: none;
  border: none;
  transition: color .2s ease;
}
.faunix-header .elementor-widget-icon .elementor-icon:hover {
  color: var(--gold);
  fill: var(--gold);
}
/* If Elementor's Menu Cart is ever used instead, keep it unboxed. */
.faunix-header .elementor-menu-cart__toggle .elementor-button {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--ink);
}
.faunix-header .elementor-menu-cart__toggle .elementor-button-text { display: none; }

/* Brand lockup behaves as one link, like the template's <a class="brand">. */
.faunix-header .faunix-brand a,
.faunix-footer .faunix-brand a { text-decoration: none; }
.faunix-header .faunix-brand .elementor-heading-title a { color: var(--ink); }
.faunix-footer .faunix-brand .elementor-heading-title a { color: var(--cream); }
.faunix-header .faunix-brand .elementor-heading-title a:hover { color: var(--gold); }


/* ============================================================
   SINGLE POST (Theme Builder)
   Maps Elementor's native Post Info / Post Title / Post Excerpt /
   Featured Image / Post Content widgets onto the .barticle design,
   so the article template is fully editable in Elementor.
   ============================================================ */
.faunix-single {
  background: var(--cream);
  padding: 44px 20px 64px;
}
.faunix-single .elementor-widget-wrap { max-width: 820px; margin-left: auto; margin-right: auto; }

/* Meta line (Post Info) — mirrors .bcard-meta / .bcard-cat / .bcard-date */
.faunix-single .elementor-post-info {
  display: flex; align-items: center; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.faunix-single .elementor-post-info__item {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted);
}
.faunix-single .elementor-post-info__item--type-terms {
  color: var(--gold); font-weight: 600;
}
.faunix-single .elementor-post-info__item a { color: inherit; text-decoration: none; }
.faunix-single .elementor-icon-list-icon { display: none; }

/* Title */
.faunix-single .elementor-widget-theme-post-title .elementor-heading-title {
  margin: 14px 0 0;
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 30px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--ink); line-height: 1.15;
}

/* Lead / excerpt */
.faunix-single .elementor-widget-theme-post-excerpt p,
.faunix-single .elementor-widget-theme-post-excerpt {
  margin: 14px 0 0; font-size: 16.5px; line-height: 1.6;
  color: var(--ink-soft); font-weight: 600;
}

/* Cover image */
.faunix-single .elementor-widget-theme-post-featured-image img {
  display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border: 1px solid var(--gold); border-radius: 8px; margin-top: 26px;
}

/* Body copy — same treatment as .barticle-body */
.faunix-single .elementor-widget-theme-post-content { margin-top: 30px; }
.faunix-single .elementor-widget-theme-post-content h2 {
  margin: 30px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600;
  font-size: 21px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
}
.faunix-single .elementor-widget-theme-post-content h2::after {
  content: ""; display: block; width: 30px; height: 2px; background: var(--gold); margin-top: 8px;
}
.faunix-single .elementor-widget-theme-post-content p {
  margin: 14px 0 0; font-size: 15.5px; line-height: 1.75; color: var(--ink-soft);
}
.faunix-single .elementor-widget-theme-post-content ul { margin: 14px 0 0; padding-left: 22px; }
.faunix-single .elementor-widget-theme-post-content li {
  font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); margin-top: 6px;
}
.faunix-single .elementor-widget-theme-post-content a { color: var(--gold); }

/* Back-to-blog button */
.faunix-single .elementor-widget-button { margin-top: 40px; }

@media (min-width: 720px) {
  .faunix-single { padding: 60px 40px 80px; }
  .faunix-single .elementor-widget-theme-post-title .elementor-heading-title { font-size: 38px; }
}
@media (min-width: 1100px) {
  .faunix-single { padding: 72px 56px 96px; }
}


/* ============================================================
   SHOP (WooCommerce) — ported from the template's shop page.
   The WooCommerce template overrides in woocommerce/ render this
   markup, so the design applies to real products.
   ============================================================ */

/* ============================================================
   SHOP PAGE (mobile first)
   ============================================================ */
.shop { background: var(--cream); padding: 22px 16px 56px; max-width: 1400px; margin: 0 auto; }

/* category tabs */
.shop-cats {
  display: flex; flex-wrap: nowrap; gap: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 6px; margin-bottom: 8px;
  scrollbar-width: thin;
}
.shop-cat {
  flex-shrink: 0;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 40px;
  padding: 10px 18px; background: var(--cream-2);
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.shop-cat:hover { border-color: var(--gold); color: var(--gold); }
.shop-cat.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* toolbar */
.shop-toolbar {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.shop-count { margin: 0; font-size: 14px; color: var(--muted); }
.shop-count strong { color: var(--ink); }
.shop-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.shop-sort { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.shop-sort span {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
}
.shop-sort select {
  font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 32px 10px 14px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6552' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.shop-sort select:focus { outline: none; border-color: var(--gold); }

/* body layout */
.shop-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; min-width: 0; }
.shop-body > * { min-width: 0; }

/* sidebar filters */
.shop-sidebar { display: flex; flex-direction: column; gap: 16px; }
.filter {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 18px 20px;
}
.filter-head {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.filter-price { display: flex; align-items: center; gap: 10px; }
.filter-price input {
  width: 100%; box-sizing: border-box;
  font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; text-align: center;
}
.filter-price input:focus { outline: none; border-color: var(--gold); }
.filter-price span { color: var(--muted); }
.filter-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin-top: 16px;
  background: var(--line); border-radius: 3px; outline: none;
}
.filter-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--cream-2); cursor: pointer;
  box-shadow: 0 1px 4px rgba(20,18,13,0.3);
}
.filter-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--cream-2); cursor: pointer;
}
.filter-check {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; cursor: pointer; font-size: 14px; color: var(--ink-soft);
}
.filter-check input { width: 17px; height: 17px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
.filter-check span { flex: 1; }
.filter-check em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.filter-check:hover span { color: var(--gold); }
.filter-apply { border: none; cursor: pointer; text-align: center; width: 100%; }

/* product grid — auto-fill so cards never clip or cramp, whatever the width.
   min-width:0 on the grid AND items prevents grid/flex "blowout" (a child wider
   than its track pushing the whole grid past the container and clipping cards). */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, minmax(0, 1fr)));
  gap: 14px;
  min-width: 0;
}
.pcardshop {
  min-width: 0;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pcardshop:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(20,18,13,0.16); border-color: rgba(176,132,48,0.5); }
.pcardshop-media { position: relative; display: block; overflow: hidden; background: #e8e2d4; }
.pcardshop-media img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  max-width: none; /* guard against theme/WooCommerce image caps */
  transition: transform 0.4s ease;
}
.pcardshop:hover .pcardshop-media img { transform: scale(1.05); }
.pcardshop-fav {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(253,252,249,0.92); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; cursor: pointer; transition: color 0.2s ease, transform 0.2s ease;
}
.pcardshop-fav:hover { color: var(--gold); transform: scale(1.12); }
/* Badge now lives in the card body (not over the image), as a small pill. */
.pcardshop-tag {
  align-self: flex-start; margin-bottom: 8px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--cream);
  background: var(--gold); padding: 4px 10px; border-radius: 999px;
}
.pcardshop-tag--new { background: var(--ink); color: var(--cream); }
.pcardshop-tag--sale { background: var(--gold); color: var(--ink); }
.pcardshop-body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; }
.pcardshop-cat {
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 10.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
}
.pcardshop h3 { margin: 6px 0 0; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.pcardshop h3 a { color: var(--ink); }
.pcardshop h3 a:hover { color: var(--gold); }
.pcardshop-rating { margin-top: 8px; font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.pcardshop-rating em { font-style: normal; color: var(--muted); font-size: 11.5px; margin-left: 4px; }
.pcardshop-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pcardshop-price { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); }
.pcardshop-price .old { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 13px; color: var(--muted); text-decoration: line-through; margin-right: 5px; }
/* The button also carries WooCommerce's `.add_to_cart_button`, so WooCommerce
   core styles (.woocommerce a.button) fight our sizing. The high-specificity
   selectors + a few !important on the box model keep it a tidy 40x40 square. */
.pcardshop .pcardshop-add,
.woocommerce a.pcardshop-add,
.woocommerce a.pcardshop-add.add_to_cart_button {
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.pcardshop-add-icon { width: 18px; height: 18px; display: block; }
.pcardshop-add.loading { opacity: 0.6; pointer-events: none; }
.pcardshop .pcardshop-add, .woocommerce a.pcardshop-add { position: relative; overflow: hidden; }
/* clear "added" confirmation on the card: a brief green checkmark burst */
.woocommerce a.pcardshop-add.faunix-carded,
.pcardshop-add.faunix-carded { background: #2f7d4f !important; color: #fff !important; transform: none !important; }
.pcardshop-add.faunix-carded .pcardshop-add-icon { opacity: 0; }
.pcardshop-add.faunix-carded::after {
  content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow', sans-serif; font-size: 18px; font-weight: 700; color: #fff;
}
.woocommerce a.pcardshop-add.added,
.pcardshop-add.added { background: var(--gold) !important; color: var(--ink) !important; }
/* WooCommerce appends a "View cart" link after adding — hide it on the compact card. */
.pcardshop-foot > a.added_to_cart { display: none; }
.pcardshop .pcardshop-add:hover,
.woocommerce a.pcardshop-add:hover { background: var(--gold) !important; color: var(--ink) !important; transform: translateY(-2px); }

/* pagination */
.shop-pager { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.shop-page {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); background: var(--cream-2); border: 1px solid var(--line); border-radius: 5px;
  transition: all 0.2s ease;
}
.shop-page:hover { border-color: var(--gold); color: var(--gold); }
.shop-page.active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.shop-page-dots { display: inline-flex; align-items: center; color: var(--muted); padding: 0 4px; }
.shop-page-next { letter-spacing: 1px; text-transform: uppercase; font-size: 12px; }

/* tablet */
@media (min-width: 720px) {
  .shop { padding: 28px 40px 72px; }
  .shop-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
  .shop-tools { gap: 16px; }
  .shop-sort { margin-left: 0; }
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

/* desktop */
@media (min-width: 1100px) {
  .shop { padding: 32px 56px 88px; }
  .shop-body { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
  .shop-sidebar { position: sticky; top: 24px; }
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .pcardshop h3 { font-size: 15px; }
}

/* Shop: wrapper around the filter form, and the clear-filters link. */
.shop-sidebar-wrap { min-width: 0; }
.shop-clear {
  display: inline-block; margin-top: 10px; text-align: center;
  font-family: 'Oswald', sans-serif; font-size: 11.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted); text-decoration: underline;
}
.shop-clear:hover { color: var(--gold); }
/* ============================================================
   FULL-PAGE HERO BACKGROUND (per-device, editable in Elementor)
   The photo is the whole-page background again (not limited to the hero).
   It is composed from CSS variables so the Page Hero / About widgets can set
   image, position, fit, fade on/off and fade height PER DEVICE (their controls
   write these vars on body.elementor-page). Per-page defaults below render
   immediately on existing pages — no re-import needed.
   ============================================================ */
body[class*="faunix-bg-"] {
  --faunix-fade: 1;             /* 1 = bottom fade on, 0 = off */
  --faunix-fadeh: 66.67vw;      /* height of the photo/fade band (per page below) */
  --faunix-posx: 50%;
  --faunix-posy: 0%;
  --faunix-size: 100% auto;     /* whole image, full width (the liked look) */
  background-image:
    linear-gradient(180deg,
      rgba(247,244,238,0) 0%,
      rgba(247,244,238,0) 60%,
      rgba(247,244,238, calc(0.95 * var(--faunix-fade))) 90%,
      rgba(247,244,238, calc(1 * var(--faunix-fade))) 100%),
    var(--faunix-photo, none);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, var(--faunix-posx) var(--faunix-posy);
  background-size: 100% var(--faunix-fadeh), var(--faunix-size);
  background-color: var(--cream);
}
body.faunix-bg-produits             { --faunix-photo: url('../images/produits-hero.webp');   --faunix-fadeh: 66.67vw; }
body.faunix-bg-revendeurs           { --faunix-photo: url('../images/revendeurs-hero.webp'); --faunix-fadeh: 54.80vw; }
body.faunix-bg-qui-sommes-nous      { --faunix-photo: url('../images/qui-hero.webp');        --faunix-fadeh: 54.80vw; }
body.faunix-bg-tests-certifications { --faunix-photo: url('../images/tests-hero.webp');      --faunix-fadeh: 66.67vw; }
body.faunix-bg-contact              { --faunix-photo: url('../images/contact-hero.webp');    --faunix-fadeh: 54.80vw; }

/* Sections sit OVER the page photo — keep them transparent so it shows through.
   Header and footer keep their solid colours. */
body[class*="faunix-bg-"] .faunix-phero,
body[class*="faunix-bg-"] .qhero,
body[class*="faunix-bg-"] .faunix-band,
body[class*="faunix-bg-"] .faunix-band--dark { background: transparent; }
body[class*="faunix-bg-"] .site-main,
body[class*="faunix-bg-"] .page-content,
body[class*="faunix-bg-"] .elementor { background-color: transparent; }
body[class*="faunix-bg-"] .faunix-header { background: var(--cream); }
body[class*="faunix-bg-"] .faunix-footer { background: var(--ink); }

/* The hero section is just the intro text over the page photo. */
.faunix-phero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
}
.faunix-phero-inner {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}
@media (min-width: 720px)  { .faunix-phero-inner { padding: 56px 40px 72px; } }
@media (min-width: 1100px) { .faunix-phero-inner { padding: 64px 64px 84px; } }

/* Mobile: the page photo lives on the hero SECTION (so it always fills the hero
   without leaving a cream gap). It now honours the per-device controls — Image Fit
   (--faunix-size), Horizontal/Vertical Position — and defaults to `cover`. */
@media (max-width: 767px) {
  html body[class*="faunix-bg-"] { background-image: none; background-color: var(--cream); }
  /* mobile DEFAULT fit = cover (fills the hero); the Image Fit control overrides this */
  body[class*="faunix-bg-"] { --faunix-size: cover; }
  body[class*="faunix-bg-"] .faunix-phero,
  body[class*="faunix-bg-"] .qhero {
    background-image: var(--faunix-photo);
    background-size: var(--faunix-size, cover);
    background-position: var(--faunix-posx, 50%) var(--faunix-posy, 50%);
    background-repeat: no-repeat;
  }
  body[class*="faunix-bg-"] .faunix-phero {
    min-height: clamp(380px, 58vh, 560px);
    display: flex; align-items: center;
  }
  /* readability scrim behind the About hero content (stronger near the text) */
  .qhero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: linear-gradient(180deg,
      rgba(247,244,238,0.55) 0%, rgba(247,244,238,0.32) 45%, rgba(247,244,238,0.55) 100%);
  }
  .qhero-grid { z-index: 1; }
  .faunix-phero-inner { padding: 40px 20px; width: 100%; }
}

/* ------------------------------------------------------------
   Gold buttons must win over parent-theme / WooCommerce <button>
   styles (which were tinting the contact submit pink).
   ------------------------------------------------------------ */
button.btn.btn-gold,
a.btn.btn-gold,
.cform .btn.btn-gold,
.cform button.btn {
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: none !important;
}
button.btn.btn-gold:hover,
a.btn.btn-gold:hover,
.cform .btn.btn-gold:hover {
  background: #c79a45 !important;
  color: var(--ink) !important;
}
button.btn.btn-dark,
a.btn.btn-dark {
  background: var(--ink) !important;
  color: var(--cream) !important;
}

/* Contact page: info list + form card are side-by-side Elementor columns.
   (body.faunix-bg-contact is just a page identifier now — no photo painted.) */
body.faunix-bg-contact .cform { width: 100%; box-sizing: border-box; margin-top: 0; }
body.faunix-bg-contact .cinfo { width: 100%; }
body.faunix-bg-contact .faunix-band--dark { padding: 0; }
body.faunix-bg-contact .elementor-widget-wrap { align-content: flex-start; }
/* ============================================================
/* ============================================================
   SINGLE PRODUCT PAGE — Faunix (redesigned for a clean, premium feel)
   Palette: --cream --cream-2 --ink --ink-soft --muted --muted-dark --gold
            --gold-light --line
   ============================================================ */
.sp-wrap {
  background: var(--cream);
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 18px 64px;
}

/* breadcrumb */
.sp-crumb {
  font-family: 'Barlow', sans-serif;
  font-size: 13px; color: var(--muted);
  margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.sp-crumb a { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.sp-crumb a:hover { color: var(--gold); }
.sp-crumb .current { color: var(--ink); font-weight: 600; }

/* ---- layout: gallery | summary ---- */
.sp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
/* Neutralise WooCommerce's float/48% width so the grid owns the layout. */
.woocommerce div.product.sp-main, .sp-main { float: none; }
.sp-main .sp-gallery,
.sp-main .sp-summary,
.woocommerce div.product .sp-gallery,
.woocommerce div.product .summary.sp-summary {
  width: 100%; max-width: none; float: none; margin: 0; padding: 0; clear: none;
}

/* ---- gallery ---- */
.sp-gallery-main {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: 0 12px 30px rgba(20,18,13,0.06);
}
.sp-gallery-main img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .5s ease;
}
.sp-gallery-main:hover img { transform: scale(1.03); }
.sp-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cream);
  background: var(--gold); padding: 6px 13px; border-radius: 4px;
  box-shadow: 0 4px 10px rgba(176,132,48,0.35);
}
.sp-thumbs {
  margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
/* Use `button.sp-thumb` so the parent theme's generic <button> styles can't
   override the thumbnail styling (specificity fix). */
button.sp-thumb {
  padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  cursor: pointer; background: var(--cream-2); line-height: 0;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sp-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
button.sp-thumb:hover { border-color: var(--gold-light); transform: translateY(-2px); }
button.sp-thumb.active {
  border-color: var(--gold); border-width: 2px;
  box-shadow: 0 6px 14px rgba(176,132,48,0.25);
}

/* ---- summary ---- */
.sp-summary { display: flex; flex-direction: column; }
.sp-cat {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold);
}
.product_title.entry-title {
  margin: 10px 0 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(26px, 4vw, 34px); line-height: 1.12; letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--ink);
}
.sp-rating, .woocommerce-product-rating {
  display: flex; align-items: center; gap: 9px; margin: 14px 0 0;
}
.sp-rating .stars, .sp-wrap .stars, .sp-wrap .star-rating, .sp-summary .star-rating { color: var(--gold); letter-spacing: 2px; font-size: 15px; }
.sp-wrap .woocommerce-review-link { font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--muted); text-decoration: none; }
.sp-wrap .woocommerce-review-link:hover { color: var(--gold); }

/* price */
.woocommerce div.product .summary.sp-summary .price,
.woocommerce div.product .sp-summary .price,
.sp-summary .price {
  margin: 18px 0 0; font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: 32px; color: var(--ink);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
}
.woocommerce div.product .sp-summary .price del,
.sp-summary .price del {
  font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 18px;
  color: var(--muted); text-decoration: line-through; opacity: .85;
}
.woocommerce div.product .sp-summary .price ins,
.sp-summary .price ins { text-decoration: none; color: var(--ink); }
.woocommerce div.product .sp-summary .price .woocommerce-Price-amount,
.sp-summary .price .woocommerce-Price-amount { font-family: 'Oswald', sans-serif; color: var(--ink); }
.sp-tax {
  font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 12.5px;
  color: var(--muted); letter-spacing: 0;
}

/* short description */
.sp-summary .woocommerce-product-details__short-description, .sp-short { margin-top: 18px; }
.sp-summary .woocommerce-product-details__short-description p, .sp-short p {
  margin: 0; font-family: 'Barlow', sans-serif; font-size: 15.5px;
  line-height: 1.65; color: var(--ink-soft); font-weight: 500;
}

/* highlights */
.sp-highlights { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sp-highlights li {
  position: relative; padding-left: 26px;
  font-family: 'Barlow', sans-serif; font-size: 14.5px; color: var(--ink-soft); line-height: 1.45;
}
.sp-highlights li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 700;
}

/* ---- buy area (native WooCommerce form.cart, themed) ---- */
.sp-summary form.cart {
  margin: 26px 0 0; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch;
}
/* variation rows go full-width above the buy row */
.sp-summary .variations { width: 100%; border: none; margin: 0; display: grid; gap: 14px; }
.sp-summary .variations tbody { display: contents; }
.sp-summary .variations tr { display: grid; gap: 6px; }
.sp-summary .variations th, .sp-summary .variations td { padding: 0; display: block; text-align: left; border: none; }
.sp-summary .variations label {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); margin: 0;
}
.sp-summary select, .sp-summary .variations select {
  width: 100%; font-family: 'Barlow', sans-serif; font-size: 15px; font-weight: 500;
  color: var(--ink); background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 13px 15px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b6552' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sp-summary select:focus, .sp-summary .variations select:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,132,48,0.14);
}
.sp-summary .reset_variations {
  font-family: 'Barlow', sans-serif; font-size: 12.5px; color: var(--muted);
}
/* Kill any inherited grey background that the theme / WooCommerce paints behind
   the variation table, its rows/cells, and the variation wrapper. */
.sp-summary .variations,
.sp-summary .variations tbody,
.sp-summary .variations tr,
.sp-summary .variations th,
.sp-summary .variations td,
.sp-summary .single_variation_wrap,
.sp-summary .single_variation,
.sp-summary .woocommerce-variation,
.sp-summary .woocommerce-variation-add-to-cart,
.sp-summary .variations_button {
  background: transparent !important;
  box-shadow: none;
}
.sp-summary .woocommerce-variation-add-to-cart {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; margin: 0; padding: 0;
}
.sp-summary .woocommerce-variation-price { width: 100%; }
.sp-summary .woocommerce-variation-price .price { margin: 4px 0 0; font-size: 24px; }

/* quantity + add to cart on one row */
.sp-summary form.cart .quantity {
  order: 1; display: flex; align-items: center; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--cream-2);
}
.sp-summary .sp-qty-btn {
  width: 44px; height: 100%; min-height: 52px; border: none; background: none;
  font-size: 20px; color: var(--ink); cursor: pointer; transition: background .2s ease;
}
.sp-summary .sp-qty-btn:hover { background: var(--line); }
.sp-summary form.cart .quantity .qty {
  width: 52px; border: none; background: none; text-align: center;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink);
  -moz-appearance: textfield;
}
.sp-summary form.cart .quantity .qty::-webkit-outer-spin-button,
.sp-summary form.cart .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.woocommerce .sp-summary .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.sp-summary form.cart button.single_add_to_cart_button,
.single_add_to_cart_button.button.alt {
  order: 2; flex: 1 1 auto; min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold) !important; color: var(--ink) !important; border: none !important;
  border-radius: 8px; cursor: pointer; padding: 14px 26px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(176,132,48,0.28);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.woocommerce .sp-summary .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.sp-summary form.cart button.single_add_to_cart_button:hover {
  background: #c79a45 !important; color: var(--ink) !important;
  transform: translateY(-2px); box-shadow: 0 12px 26px rgba(176,132,48,0.34);
}
/* Variable products: WooCommerce disables the button until a variation is chosen
   (it drops opacity, which made the gold look washed-out/tan). Give it a clean,
   intentional disabled state instead — no fake fade, clear "not yet" cue. */
.woocommerce .sp-summary .single_add_to_cart_button.disabled,
.woocommerce .sp-summary .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed,
.sp-summary form.cart button.single_add_to_cart_button.disabled {
  background: var(--muted-dark) !important; color: var(--cream-2) !important;
  opacity: 1 !important; cursor: not-allowed;
  box-shadow: none; transform: none;
}
.woocommerce .sp-summary .single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed:hover {
  background: var(--muted-dark) !important; transform: none; box-shadow: none;
}

/* price subline (TVA / livraison) */
.sp-priceline {
  margin: 8px 0 0; font-family: 'Barlow', sans-serif; font-size: 13px;
  color: var(--muted); font-weight: 500;
}

/* stock line with dot */
.sp-stockline {
  display: flex; align-items: center; gap: 9px; margin: 16px 0 0;
  font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 600;
}
.sp-stockline .sp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sp-stockline.in { color: #2f7d4f; }
.sp-stockline.in .sp-dot { background: #2f9d5c; box-shadow: 0 0 0 3px rgba(47,157,92,0.16); }
.sp-stockline.out { color: var(--muted); }
.sp-stockline.out .sp-dot { background: var(--muted-dark); }

/* trust badges grid */
.sp-trust {
  margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 20px;
}
.sp-trust-item { display: flex; align-items: flex-start; gap: 12px; }
.sp-trust-ic {
  flex-shrink: 0; width: 24px; height: 24px; color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center;
}
.sp-trust-ic svg { width: 22px; height: 22px; }
.sp-trust-tx { display: flex; flex-direction: column; line-height: 1.3; }
.sp-trust-tx strong {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13.5px;
  letter-spacing: 0.3px; color: var(--ink);
}
.sp-trust-tx span { font-family: 'Barlow', sans-serif; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* secure payment row */
.sp-pay {
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.sp-pay-label {
  font-family: 'Barlow', sans-serif; font-size: 12.5px; color: var(--muted); font-weight: 500;
}
.sp-pay-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-pay-badge {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 10.5px;
  letter-spacing: 0.5px; color: var(--ink-soft);
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 5px 9px;
}

/* wishlist — scope under .sp-summary so parent-theme .woocommerce button styles
   can't override it (same specificity concern as the thumbnails). */
.sp-summary button.sp-wishlist, .sp-summary .yith-wcwl-add-to-wishlist {
  margin-top: 16px; align-self: flex-start; background: none; border: none; cursor: pointer;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12.5px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted);
  padding: 4px 0; transition: color .2s ease;
}
.sp-summary button.sp-wishlist:hover { color: var(--gold); }

/* meta */
.product_meta.sp-meta {
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
  display: grid; gap: 12px; font-family: 'Barlow', sans-serif; font-size: 13.5px; color: var(--ink-soft);
}
.sp-meta span { display: block; }
.sp-meta em {
  font-style: normal; font-weight: 600; color: var(--ink); font-family: 'Oswald', sans-serif;
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; margin-right: 6px;
}
.sp-meta a { color: var(--gold); text-decoration: none; }
.sp-meta a:hover { text-decoration: underline; }
.sp-meta .sp-stock { color: #4b7a2f; font-weight: 600; }
.sp-meta .sp-stock em { color: #4b7a2f; }

/* ---- tabs ---- */
.sp-tabs { margin-top: 56px; clear: both; }
.sp-tabs > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.sp-tablist {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none;
  border-bottom: 1px solid var(--line);
}
.sp-tablist li { margin: 0; }
.sp-tablist label {
  display: block; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  padding: 14px 22px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s ease, border-color .2s ease;
}
.sp-tablist label:hover { color: var(--ink); }
.sp-panel { display: none; padding: 30px 2px 0; animation: fx-fade-up .4s ease both; }
.sp-panel > p, .sp-panel li { max-width: 900px; }
#sp-tab-desc:checked ~ .sp-tablist .description_tab label,
#sp-tab-info:checked ~ .sp-tablist .additional_information_tab label,
#sp-tab-rev:checked ~ .sp-tablist .reviews_tab label { color: var(--ink); border-bottom-color: var(--gold); }
#sp-tab-desc:checked ~ .sp-panel-desc,
#sp-tab-info:checked ~ .sp-panel-info,
#sp-tab-rev:checked ~ .sp-panel-rev { display: block; }
.sp-panel h2 {
  margin: 0 0 4px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 24px;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink);
}
.sp-panel h3 {
  margin: 22px 0 0; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.4px; color: var(--ink);
}
.sp-panel p { margin: 14px 0 0; font-family: 'Barlow', sans-serif; font-size: 15px; line-height: 1.75; color: var(--ink-soft); }
.sp-panel ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-soft); line-height: 1.7; }

/* spec / additional info table */
.sp-wrap .shop_attributes, .sp-spec {
  width: 100%; max-width: 760px; margin-top: 6px; border-collapse: collapse;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.sp-wrap .shop_attributes th, .sp-wrap .shop_attributes td, .sp-spec th, .sp-spec td {
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line);
  font-family: 'Barlow', sans-serif; font-size: 14px;
}
.sp-wrap .shop_attributes tr:last-child th, .sp-wrap .shop_attributes tr:last-child td,
.sp-spec tr:last-child th, .sp-spec tr:last-child td { border-bottom: none; }
.sp-wrap .shop_attributes th, .sp-spec th {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink); width: 42%; background: var(--cream-2);
}
.sp-wrap .shop_attributes td, .sp-spec td { color: var(--ink-soft); }

/* reviews */
.sp-rev-summary, .woocommerce-Reviews .woocommerce-Reviews-title {
  font-family: 'Oswald', sans-serif;
}
.sp-rev-summary { display: flex; align-items: center; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.sp-rev-score { display: flex; align-items: baseline; gap: 12px; }
.sp-rev-score strong { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 42px; color: var(--ink); }
.sp-rev-score em { font-style: normal; font-size: 13px; color: var(--muted); }
.sp-wrap #reviews .commentlist, .sp-revlist { list-style: none; margin: 0; padding: 0; }
.sp-wrap #reviews .commentlist .review, .sp-revlist .review { padding: 20px 0; border-bottom: 1px solid var(--line); }
.sp-rev-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sp-rev-head strong { font-size: 14px; color: var(--ink); font-family: 'Oswald', sans-serif; letter-spacing: 0.4px; }
.sp-rev-date { font-size: 12px; color: var(--muted); }
.sp-wrap #reviews .commentlist .review p, .sp-revlist .review p { margin: 8px 0 0; font-family: 'Barlow', sans-serif; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

/* WooCommerce review form basics, themed lightly */
#review_form .comment-reply-title { font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: var(--ink); }
#review_form textarea, #review_form input[type="text"], #review_form input[type="email"] {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  font-family: 'Barlow', sans-serif; background: var(--cream-2);
}
#review_form .submit {
  background: var(--gold); color: var(--ink); border: none; border-radius: 8px;
  padding: 12px 24px; font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}

/* ---- related ---- */
.sp-related { margin-top: 64px; background: none; padding: 0; }
.sp-related.products { display: block; grid-template-columns: none; background: none; padding: 0; }
.sp-related h2 {
  margin: 0 0 24px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 26px;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink);
  position: relative; padding-bottom: 14px;
}
.sp-related h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--gold); border-radius: 2px; }
.sp-related-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

/* ---- tablet ---- */
@media (min-width: 720px) {
  .sp-wrap { padding: 32px 40px 80px; }
  .sp-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .sp-related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .sp-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .sp-trust { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---- desktop ---- */
@media (min-width: 1100px) {
  .sp-wrap { padding: 36px 56px 96px; }
  .sp-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .sp-gallery { position: sticky; top: 28px; }
}

/* ============================================================
   CART / CHECKOUT / ORDER-RECEIVED (WooCommerce)
   Targets WooCommerce's REAL default markup classes, scoped under the WC body
   classes (.woocommerce-cart / -checkout / -order-received) so these rules out-
   specify WooCommerce and the parent theme WITHOUT !important — you can still
   override them from Additional CSS. Works with the CLASSIC (shortcode) cart &
   checkout; the order-received page is always classic. Block cart/checkout is
   themed in the "MODERN WOOCOMMERCE BLOCKS" section further down.
   ============================================================ */

/* shared page chrome */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-order-received .woocommerce { color: var(--ink-soft); }
.woocommerce-cart .woocommerce .woocommerce-Price-amount,
.woocommerce-checkout .woocommerce .woocommerce-Price-amount,
.woocommerce-order-received .woocommerce .woocommerce-Price-amount { white-space: nowrap; }

/* ---------- CART ---------- */
.woocommerce-cart .woocommerce { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.woocommerce-cart .woocommerce > * { min-width: 0; }
/* cross-sells are not part of this design and were breaking the 2-column layout */
.woocommerce-cart .cross-sells { display: none !important; }
.woocommerce-cart .cart-collaterals { width: 100%; float: none; margin: 0; }
.woocommerce-cart .woocommerce-cart-form { margin: 0; }

/* Mobile: render the table as blocks so each item is a tidy card. */
.woocommerce-cart table.woocommerce-cart-form__contents,
.woocommerce-cart table.woocommerce-cart-form__contents tbody { display: block; width: 100%; }
.woocommerce-cart table.woocommerce-cart-form__contents {
  border-collapse: collapse; background: var(--cream-2) !important;
  border: 1px solid var(--line) !important; border-radius: 8px !important; overflow: hidden; margin: 0;
}
.woocommerce-cart table.woocommerce-cart-form__contents thead { display: none; }
.woocommerce-cart .woocommerce-cart-form__cart-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  grid-template-areas: "thumb name remove" "thumb price price" "thumb qty subtotal";
  gap: 6px 14px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center;
}
.woocommerce-cart .woocommerce-cart-form__cart-item > td { border: none; padding: 0; background: none; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-thumbnail { grid-area: thumb; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-thumbnail img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; margin: 0; max-width: none;
}
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name { grid-area: name; font-size: 14.5px; font-weight: 600; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name a { color: var(--ink); text-decoration: none; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name a:hover { color: var(--gold); }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name .variation { margin: 4px 0 0; font-size: 12px; color: var(--muted); font-weight: 500; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name .variation dt,
.woocommerce-cart .woocommerce-cart-form__cart-item .product-name .variation dd { display: inline; margin: 0; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-price { grid-area: price; font-size: 13px; color: var(--muted); }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-price::before { content: "Prix : "; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-quantity { grid-area: qty; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal { grid-area: subtotal; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); text-align: right; }
.woocommerce-cart .woocommerce-cart-form__cart-item .product-remove { grid-area: remove; text-align: right; }
.woocommerce-cart .product-remove a.remove {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--line); color: var(--ink) !important; font-size: 17px; line-height: 1;
  text-decoration: none; transition: background .2s ease, color .2s ease;
}
.woocommerce-cart .product-remove a.remove:hover { background: #b3402f; color: #fff !important; }

/* cart quantity stepper (matches product page) */
.woocommerce-cart .product-quantity .quantity {
  display: inline-flex; align-items: center; border: 1px solid var(--line);
  border-radius: 6px; overflow: hidden; background: var(--cream-2);
}
.woocommerce-cart .product-quantity .quantity .sp-qty-btn {
  width: 38px; min-height: 42px; border: none; background: none; font-size: 18px; color: var(--ink); cursor: pointer; transition: background .2s ease;
}
.woocommerce-cart .product-quantity .quantity .sp-qty-btn:hover { background: var(--line); }
.woocommerce-cart .product-quantity .quantity .qty {
  width: 44px; border: none; background: none; text-align: center;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); -moz-appearance: textfield;
}
.woocommerce-cart .product-quantity .quantity .qty::-webkit-outer-spin-button,
.woocommerce-cart .product-quantity .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* coupon + update row (kept as a real table cell so it never breaks column widths) */
.woocommerce-cart tr.actions, .woocommerce-cart td.actions { display: block; }
.woocommerce-cart td.actions { padding: 16px; }
.woocommerce-cart td.actions::after { content: ""; display: table; clear: both; }
.woocommerce-cart td.actions .coupon { display: inline-flex; gap: 8px; vertical-align: middle; margin-bottom: 12px; }
.woocommerce-cart td.actions .coupon .input-text {
  min-width: 0; font-family: 'Barlow', sans-serif; font-size: 15px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--cream);
}
.woocommerce-cart td.actions .coupon .input-text:focus { outline: none; border-color: var(--gold); }
.woocommerce-cart td.actions .button,
.woocommerce-cart td.actions button,
.woocommerce-cart td.actions input.button {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink); background: var(--cream-2);
  border: 1.5px solid var(--ink); border-radius: 4px; padding: 11px 18px; cursor: pointer; transition: all .2s ease;
}
.woocommerce-cart td.actions .button:hover,
.woocommerce-cart td.actions button:hover,
.woocommerce-cart td.actions input.button:hover { background: var(--ink); color: var(--cream); }
.woocommerce-cart td.actions .coupon .button { border-color: var(--line); }

/* cart totals card */
.woocommerce-cart .cart_totals {
  background: var(--cream-2) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; padding: 24px !important; float: none !important; width: 100% !important;
}
.woocommerce-cart .cart_totals h2 {
  margin: 0 0 16px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink);
}
.woocommerce-cart .cart_totals table { width: 100%; border-collapse: collapse; margin: 0; border: none; }
.woocommerce-cart .cart_totals th {
  text-align: left; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink-soft); padding: 12px 0; vertical-align: top; border-bottom: 1px solid var(--line); border-top: none;
}
.woocommerce-cart .cart_totals td {
  text-align: right; font-size: 14px; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); border-top: none; vertical-align: top;
}
.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td { border-bottom: none; padding-top: 16px; }
.woocommerce-cart .cart_totals .order-total td strong,
.woocommerce-cart .cart_totals .order-total td > .woocommerce-Price-amount {
  font-family: 'Oswald', sans-serif !important; font-weight: 700 !important; font-size: 22px !important; color: var(--ink) !important;
}
/* the "(incl. VAT)" note must NOT be enlarged like the total */
.woocommerce-cart .cart_totals .order-total small,
.woocommerce-cart .cart_totals small.includes_tax,
.woocommerce-cart .cart_totals .order-total small .woocommerce-Price-amount {
  display: block; margin-top: 4px; font-family: 'Barlow', sans-serif !important;
  font-weight: 500 !important; font-size: 12px !important; color: var(--muted) !important;
  text-transform: none; line-height: 1.3;
}
/* shipping row: left-align the description so it doesn't wrap into a cramped column */
.woocommerce-cart .cart_totals .woocommerce-shipping-totals td,
.woocommerce-cart .cart_totals tr.shipping td {
  text-align: left; font-size: 13px; color: var(--ink-soft); line-height: 1.45;
}
.woocommerce-cart .cart_totals ul#shipping_method { list-style: none; margin: 0; padding: 0; text-align: left; }
.woocommerce-cart .cart_totals ul#shipping_method li { margin-bottom: 6px; }
.woocommerce-cart .cart_totals ul#shipping_method label { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.woocommerce-cart .cart_totals ul#shipping_method input { accent-color: var(--gold); }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { font-size: 12.5px; color: var(--muted); }
.woocommerce-cart .wc-proceed-to-checkout { margin-top: 20px; padding: 0; }
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.button.checkout-button {
  display: block; width: 100%; text-align: center; border: none !important; cursor: pointer;
  background: var(--gold) !important; color: var(--ink) !important; border-radius: 6px; padding: 15px 20px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 1.5px;
  text-transform: uppercase; box-shadow: 0 8px 20px rgba(176,132,48,0.28); transition: background .2s ease, transform .2s ease;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #c79a45 !important; transform: translateY(-2px); }


/* ---------- CHECKOUT ---------- */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px; padding: 22px 22px 8px; margin: 0 0 22px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3 {
  margin: 0 0 16px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink);
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.woocommerce-checkout .form-row { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; padding: 0; }
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes,
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last { width: auto; }
.woocommerce-checkout .form-row-wide { grid-column: 1 / -1; }
.woocommerce-checkout .form-row label {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--ink);
}
.woocommerce-checkout .form-row .required { color: var(--gold); text-decoration: none; border: none; }
.woocommerce-checkout .form-row .input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
  font-family: 'Barlow', sans-serif; font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--cream); border: 1px solid var(--line); border-radius: 4px; padding: 12px 13px; width: 100%; box-sizing: border-box; height: auto;
}
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus { outline: none; border-color: var(--gold); }
.woocommerce-checkout .form-row textarea { resize: vertical; min-height: 90px; }

/* order review card */
.woocommerce-checkout #order_review_heading {
  margin: 0 0 16px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink);
}
.woocommerce-checkout #order_review {
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px; padding: 22px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; text-align: left; }
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout .woocommerce-checkout-review-order-table .amount { text-align: right; }
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name { color: var(--ink-soft); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity { color: var(--muted); font-weight: 600; }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th { font-family: 'Barlow', sans-serif; font-weight: 600; color: var(--ink-soft); }
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td { text-align: right; color: var(--ink); }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td { border-bottom: none; padding-top: 14px; }
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount,
.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total strong { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 20px; }

/* payment methods */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment { background: transparent; border: none; }
.woocommerce-checkout ul.payment_methods {
  list-style: none; margin: 0 0 18px; padding: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--cream);
}
.woocommerce-checkout ul.payment_methods li.wc_payment_method { border-bottom: 1px solid var(--line); background: none; }
.woocommerce-checkout ul.payment_methods li.wc_payment_method:last-child { border-bottom: none; }
.woocommerce-checkout ul.payment_methods li.wc_payment_method > label {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; margin: 0;
}
.woocommerce-checkout ul.payment_methods li.wc_payment_method input { accent-color: var(--gold); }
.woocommerce-checkout .payment_box { padding: 0 16px 14px 42px; background: none; margin: 0; }
.woocommerce-checkout .payment_box::before { display: none; }
.woocommerce-checkout .payment_box p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin: 0 0 18px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label {
  display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.4; cursor: pointer;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input { accent-color: var(--gold); margin-top: 2px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--gold); }
.woocommerce-checkout #place_order,
.woocommerce-checkout .place-order .button {
  display: block; width: 100%; text-align: center; border: none; cursor: pointer;
  background: var(--gold); color: var(--ink); border-radius: 6px; padding: 15px 20px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 1.5px;
  text-transform: uppercase; box-shadow: 0 8px 20px rgba(176,132,48,0.28); transition: background .2s ease, transform .2s ease;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout .place-order .button:hover { background: #c79a45; transform: translateY(-2px); }

/* ---------- ORDER RECEIVED (thank you) ---------- */
.woocommerce-order-received .woocommerce-order { max-width: 820px; margin: 0 auto; }
.woocommerce-order-received .woocommerce-thankyou-order-received {
  margin: 0; text-align: center; padding: 12px 0 8px;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .5px;
  text-transform: uppercase; color: var(--ink); line-height: 1.2;
}
.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: "\2713"; display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-size: 38px; font-weight: 700;
  box-shadow: 0 10px 26px rgba(176,132,48,0.4);
}
.woocommerce-order-received .woocommerce-order-overview {
  list-style: none; margin: 26px 0 30px; padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px;
}
.woocommerce-order-received .woocommerce-order-overview li {
  font-size: 13.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; border: none; text-transform: none;
}
.woocommerce-order-received .woocommerce-order-overview li strong {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; color: var(--ink); letter-spacing: .5px;
}
.woocommerce-order-received .woocommerce-order-details,
.woocommerce-order-received .woocommerce-customer-details { margin-bottom: 30px; }
.woocommerce-order-received .woocommerce-order-details__title,
.woocommerce-order-received .woocommerce-column__title {
  margin: 0 0 14px; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink);
}
.woocommerce-order-received .order_details,
.woocommerce-order-received .woocommerce-table--order-details {
  width: 100%; border-collapse: collapse; background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
.woocommerce-order-received .order_details th,
.woocommerce-order-received .order_details td { padding: 12px 16px; border-bottom: 1px solid var(--line); border-top: none; font-size: 14px; text-align: left; }
.woocommerce-order-received .order_details thead th { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.woocommerce-order-received .order_details td.product-total,
.woocommerce-order-received .order_details .amount { text-align: right; }
.woocommerce-order-received .order_details tfoot th { font-family: 'Barlow', sans-serif; font-weight: 600; color: var(--ink-soft); }
.woocommerce-order-received .order_details tfoot tr:last-child th,
.woocommerce-order-received .order_details tfoot tr:last-child td { border-bottom: none; }
.woocommerce-order-received .woocommerce-customer-details .woocommerce-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.woocommerce-order-received .woocommerce-customer-details address {
  font-style: normal; font-size: 14px; line-height: 1.7; color: var(--ink-soft);
  background: var(--cream-2); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px;
}

/* ---------- responsive ---------- */
@media (min-width: 720px) {
  .woocommerce-cart table.woocommerce-cart-form__contents,
  .woocommerce-cart table.woocommerce-cart-form__contents tbody { display: table; width: 100%; }
  .woocommerce-cart table.woocommerce-cart-form__contents tbody { display: table-row-group; }
  .woocommerce-cart table.woocommerce-cart-form__contents thead { display: table-header-group; }
  .woocommerce-cart table.woocommerce-cart-form__contents thead th {
    font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--muted); text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--cream);
  }
  .woocommerce-cart .woocommerce-cart-form__cart-item { display: table-row; }
  .woocommerce-cart .woocommerce-cart-form__cart-item > td {
    display: table-cell; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left;
  }
  /* keep the remove & thumbnail columns narrow so the table doesn't blow out */
  .woocommerce-cart table.woocommerce-cart-form__contents .product-remove { width: 44px; text-align: center; }
  .woocommerce-cart table.woocommerce-cart-form__contents .product-thumbnail { width: 96px; }
  .woocommerce-cart .woocommerce-cart-form__cart-item .product-price { text-align: center; }
  .woocommerce-cart .woocommerce-cart-form__cart-item .product-price::before { content: none; }
  .woocommerce-cart .woocommerce-cart-form__cart-item .product-quantity { text-align: center; }
  .woocommerce-cart .woocommerce-cart-form__cart-item .product-quantity .quantity { display: inline-flex; }
  .woocommerce-cart .woocommerce-cart-form__cart-item .product-subtotal { text-align: right; }
  .woocommerce-cart .woocommerce-cart-form__cart-item .product-remove { text-align: center; }
  /* actions stays a real, full-width table cell — coupon left, update right */
  .woocommerce-cart tr.actions { display: table-row; }
  .woocommerce-cart td.actions { display: table-cell; }
  .woocommerce-cart td.actions .coupon { margin-bottom: 0; }
  .woocommerce-cart td.actions button[name="update_cart"],
  .woocommerce-cart td.actions input[name="update_cart"] { float: right; }
  .woocommerce-checkout .woocommerce-additional-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-order-received .woocommerce-order-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .woocommerce-order-received .woocommerce-customer-details .woocommerce-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1100px) {
  .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr) 360px !important; gap: 40px; }
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .woocommerce > .cart-collaterals { grid-column: 2; }
  .woocommerce-cart .cart-collaterals .cart_totals { position: sticky; top: 24px; }
  .woocommerce-checkout form.checkout {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 48px;
  }
  .woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
  .woocommerce-checkout form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 24px; }
  .woocommerce-order-received .woocommerce-order-overview { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ============================================================
   MODERN WOOCOMMERCE BLOCKS (Cart & Checkout blocks)
   If the store uses the block-based Cart/Checkout (WooCommerce 8.3+ default),
   the classic markup above is not output. These rules apply the Faunix palette,
   fonts and gold buttons to the block components so it stays on-brand. (For the
   exact classic design, use the shortcode [woocommerce_cart]/[woocommerce_checkout]
   pages — see the note in README.)
   ============================================================ */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { color: var(--ink-soft); font-family: 'Barlow', sans-serif; }
.wc-block-components-title, .wc-block-cart__totals-title, .wc-block-components-checkout-step__title {
  font-family: 'Oswald', sans-serif !important; text-transform: uppercase; letter-spacing: .5px; color: var(--ink) !important;
}
.wc-block-cart-items__row, .wc-block-components-order-summary-item { border-color: var(--line) !important; }
.wc-block-components-panel, .wc-block-components-totals-item, .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-sidebar {
  background: var(--cream-2); border-radius: 8px;
}
.wc-block-checkout__sidebar, .wc-block-cart__sidebar { border: 1px solid var(--line); border-radius: 8px; }
.wc-block-components-text-input input, .wc-block-components-textarea, .wc-block-components-select select {
  border-radius: 4px !important; border-color: var(--line) !important; font-family: 'Barlow', sans-serif;
}
.wc-block-components-text-input input:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(176,132,48,0.15) !important; }
.wc-block-components-totals-item__value, .wc-block-formatted-money-amount { font-family: 'Oswald', sans-serif; color: var(--ink); }
.wc-block-components-order-summary-item__total-price, .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--ink); font-weight: 700;
}
/* block buttons -> Faunix gold */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained {
  background: var(--gold) !important; color: var(--ink) !important; border: none !important;
  border-radius: 6px !important; font-family: 'Oswald', sans-serif !important; font-weight: 600 !important;
  letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 8px 20px rgba(176,132,48,0.28);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover { background: #c79a45 !important; }
.wc-block-components-button.contained .wc-block-components-button__text { color: var(--ink) !important; }
.wc-block-components-radio-control input[type="radio"], .wc-block-components-checkbox input { accent-color: var(--gold); }

/* ============================================================
   HEADER CART COUNT BADGE + AJAX ADD-TO-CART STATES
   ============================================================ */
.faunix-cart-link { position: relative; display: inline-flex; overflow: visible; }
.faunix-cart-link .faunix-cart-count,
.faunix-cart-count {
  position: absolute; top: -7px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold) !important; color: #fff !important;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 11px; line-height: 1;
  border-radius: 999px; box-shadow: 0 2px 6px rgba(20,18,13,0.25);
  pointer-events: none; text-shadow: none;
}
.faunix-cart-count.is-empty { display: none; }

/* ---- header cart icon (redesigned) ---- */
.faunix-cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); line-height: 0; text-decoration: none; overflow: visible;
  transition: color .2s ease, transform .2s ease;
}
.faunix-cart-link:hover { color: var(--gold); transform: translateY(-1px); }
.faunix-cart-link .faunix-cart-svg { width: 24px; height: 24px; display: block; }

/* single-product "added" confirmation state — must beat the gold .button.alt rule */
.single_add_to_cart_button.button.alt.faunix-added,
.woocommerce div.product form.cart .single_add_to_cart_button.faunix-added,
.single_add_to_cart_button.faunix-added {
  background: var(--ink) !important; color: var(--cream) !important;
  box-shadow: none !important; transform: none !important;
}
.single_add_to_cart_button.loading { opacity: .75; cursor: default; }
/* WooCommerce appends its own "Voir le panier" (.added_to_cart .wc-forward) link
   after the button. Theme default renders it pink — restyle it as a clean green
   button so it reads as a success/confirmation action (no duplicate of our own). */
.woocommerce div.product .sp-summary .added_to_cart,
.woocommerce div.product .sp-summary a.added_to_cart,
.sp-summary a.added_to_cart,
.sp-summary a.wc-forward {
  flex: 1 0 100%;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 12px; box-sizing: border-box; text-decoration: none;
  background: #2f7d4f !important; color: #fff !important; border: none !important;
  border-radius: 8px; padding: 13px 20px; min-height: 50px;
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 1.5px; text-transform: uppercase; transition: background .2s ease;
}
.woocommerce div.product .sp-summary .added_to_cart:hover,
.sp-summary a.added_to_cart:hover,
.sp-summary a.wc-forward:hover { background: #276b43 !important; color: #fff !important; }

/* responsive safety: flex/grid children may shrink below content size */
.feature, .trust-item, .pcardshop, .faunix-product, .sp-summary, .sp-gallery { min-width: 0; }
.feature > *, .trust-item > * { min-width: 0; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }

/* ============================================================
   FAUNIX NAVIGATION WIDGET (.fxnav) — self-contained header
   Logo image + menu + cart, with a CSS-only mobile drawer. No Elementor
   columns involved, so it stays intact at every screen size.
   ============================================================ */
.elementor-widget-faunix-nav { width: 100%; }
.elementor-widget-faunix-nav > .elementor-widget-container { padding: 0; width: 100%; }
.fxnav { background: var(--cream); border-bottom: 1px solid var(--line); position: relative; width: 100%; }
.fxnav--sticky { position: sticky; top: 0; z-index: 9000; }
.fxnav-toggle { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.fxnav-inner {
  display: flex; align-items: center; gap: 22px; width: 100%;
  max-width: 1280px; margin: 0 auto; padding: 12px 28px; box-sizing: border-box;
}
.fxnav-logo { display: inline-flex; align-items: center; flex: 0 0 auto; line-height: 0; }
.fxnav-logo img { height: 52px; width: auto; display: block; }

/* desktop menu (centred) */
.fxnav-menu { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.fxnav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.fxnav-list li { margin: 0; position: relative; }
.fxnav-list a {
  display: block; padding: 8px 14px; text-decoration: none;
  font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 14px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink);
  transition: color .2s ease; white-space: nowrap;
}
.fxnav-list a:hover,
.fxnav-list .current-menu-item > a,
.fxnav-list .current_page_item > a,
.fxnav-list .current-menu-ancestor > a { color: var(--gold); }
/* simple dropdown for sub-menus (desktop) */
.fxnav-menu .sub-menu {
  list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0;
  min-width: 200px; background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 14px 30px rgba(20,18,13,0.12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fxnav-menu .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fxnav-menu .sub-menu a { padding: 10px 16px; letter-spacing: 1px; }

.fxnav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; margin-left: auto; }
.fxnav-cart { position: relative; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; transition: color .2s ease; }
.fxnav-cart:hover { color: var(--gold); }
.fxnav-cart .faunix-cart-svg { width: 24px; height: 24px; display: block; }

/* burger + drawer hidden on desktop */
.fxnav-burger { display: none; }
.fxnav-drawer { display: none; }

/* ---- mobile ---- */
@media (max-width: 1024px) {
  .fxnav-inner { gap: 12px; padding: 10px 18px; justify-content: space-between; }
  .fxnav-menu { display: none; }                 /* hide the inline menu */
  .fxnav-right { margin-left: auto; gap: 14px; }  /* logo left, cart+burger right */
  .fxnav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .fxnav-burger span { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  /* burger animates to an X when open */
  .fxnav-toggle:checked ~ .fxnav-inner .fxnav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .fxnav-toggle:checked ~ .fxnav-inner .fxnav-burger span:nth-child(2) { opacity: 0; }
  .fxnav-toggle:checked ~ .fxnav-inner .fxnav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* the drawer */
  .fxnav-drawer {
    display: block; max-height: 0; overflow: hidden;
    background: var(--cream); transition: max-height .3s ease;
  }
  .fxnav-toggle:checked ~ .fxnav-drawer { max-height: 85vh; border-top: 1px solid var(--line); overflow-y: auto; }
  .fxnav-drawer .fxnav-list { flex-direction: column; gap: 0; padding: 6px 0; }
  .fxnav-drawer .fxnav-list a { padding: 15px 24px; font-size: 15px; border-bottom: 1px solid var(--line); }
  .fxnav-drawer .fxnav-list li:last-child a { border-bottom: 0; }
  .fxnav-drawer .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0; }
  .fxnav-drawer .sub-menu a { padding-left: 40px; }
}