:root {
  --mdc-lime: #d8e24e;
  --mdc-green: #12301c;
  --mdc-green-deep: #0b1f12;
  --mdc-cream: #fafaf5;
  --mdc-panel: #efefe6;
  --mdc-ink: #141412;
  --mdc-green-rgb: 18, 48, 28;
  --mdc-cream-rgb: 250, 250, 245;
  --mdc-selection-bg: #1b1b18;
  --mdc-selection-fg: #f4f1ea;
  --mdc-border-soft: rgba(var(--mdc-green-rgb), 0.16);
  --mdc-border-strong: rgba(var(--mdc-green-rgb), 0.3);
  --mdc-text-soft: rgba(var(--mdc-green-rgb), 0.75);
  --mdc-text-muted: rgba(var(--mdc-green-rgb), 0.6);
  --mdc-shadow-soft: 0 20px 60px rgba(var(--mdc-green-rgb), 0.08);
  --mdc-radius-pill: 999px;
  --mdc-radius-card: 24px;
  --mdc-section-pad-block: clamp(48px, 7vw, 110px);
  --mdc-section-pad-inline: clamp(16px, 4vw, 44px);
  --mdc-container-max: 100%;
  --mdc-body-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --mdc-small-size: clamp(0.875rem, 0.84rem + 0.1vw, 0.9375rem);
  --mdc-label-size: clamp(0.71875rem, 0.69rem + 0.12vw, 0.8125rem);
  --mdc-title-xl: clamp(2.5rem, 4.9vw, 5.375rem);
  --mdc-title-lg: clamp(2rem, 4.8vw, 4.25rem);
  --mdc-title-md: clamp(1.875rem, 4.6vw, 4rem);
  --mdc-title-sm: clamp(1.75rem, 3.6vw, 2.75rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: #e9e7e1;
  color: var(--mdc-green);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--mdc-body-size);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

input,
select,
textarea {
  width: 100%;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

iframe {
  border: 0;
  max-width: 100%;
}

ul,
ol {
  padding-left: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
blockquote {
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.mdc-display,
.mdc-title {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-wrap: balance;
}

h1,
.mdc-display--xl {
  font-size: var(--mdc-title-xl);
  line-height: 0.88;
}

h2,
.mdc-display--lg {
  font-size: var(--mdc-title-lg);
}

h3,
.mdc-display--md {
  font-size: var(--mdc-title-md);
  line-height: 0.94;
}

h4,
h5,
h6,
.mdc-display--sm {
  font-size: var(--mdc-title-sm);
  line-height: 0.96;
}

small,
.mdc-text-small {
  font-size: var(--mdc-small-size);
  line-height: 1.6;
}

::selection {
  background: var(--mdc-selection-bg);
  color: var(--mdc-selection-fg);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.mdc-site {
  background: var(--mdc-cream);
  color: var(--mdc-green);
}

.mdc-container {
  width: min(100%, var(--mdc-container-max));
  margin: 0 auto;
}

.mdc-section {
  padding: var(--mdc-section-pad-block) var(--mdc-section-pad-inline);
}

.mdc-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.75rem);
}

.mdc-eyebrow {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: var(--mdc-label-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mdc-text-muted);
}

.mdc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.125rem;
  padding: 0.95rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--mdc-radius-pill);
  background: var(--mdc-lime);
  color: var(--mdc-green);
  box-shadow: none;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.mdc-btn:hover,
.mdc-btn:focus-visible {
  background: var(--mdc-cream);
  color: var(--mdc-green);
  transform: translateY(-1px);
}

.mdc-btn--dark {
  background: var(--mdc-green);
  color: var(--mdc-cream);
}

.mdc-btn--dark:hover,
.mdc-btn--dark:focus-visible {
  background: var(--mdc-green-deep);
  color: var(--mdc-cream);
}

.mdc-btn--outline {
  border-color: var(--mdc-green);
  background: transparent;
  color: var(--mdc-green);
}

.mdc-btn--outline:hover,
.mdc-btn--outline:focus-visible {
  background: var(--mdc-green);
  color: var(--mdc-lime);
}

.mdc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--mdc-border-strong);
  border-radius: var(--mdc-radius-pill);
  background: transparent;
  color: inherit;
  font-size: 0.875rem;
  line-height: 1.4;
}

.sec--lime {
  background: var(--mdc-lime);
  color: var(--mdc-green);
}

.sec--green {
  background: var(--mdc-green);
  color: var(--mdc-cream);
}

.sec--green .mdc-eyebrow,
.sec--green .mdc-text-muted {
  color: var(--mdc-lime);
}

.sec--panel {
  background: var(--mdc-panel);
  color: var(--mdc-green);
}

.sec--cream {
  background: var(--mdc-cream);
  color: var(--mdc-green);
}

.mdc-surface {
  background: rgba(var(--mdc-cream-rgb), 0.72);
  border: 1px solid var(--mdc-border-soft);
  border-radius: var(--mdc-radius-card);
  box-shadow: var(--mdc-shadow-soft);
}

.mdc-prose {
  color: var(--mdc-text-soft);
}

/* WordPress core / WooCommerce use this class expecting it to be visually
   hidden (e.g. the "Obligatoire" required-field hint on every form label);
   the theme never defined it, so it was rendering as plain visible text.
   Standard WP core rule, found missing 2026-09-13 while styling the account
   page — applies site-wide, not just there. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.mdc-skip-link {
  position: absolute;
  left: 1rem;
  top: -3.5rem;
  z-index: 200;
  min-height: 2.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--mdc-radius-pill);
  background: var(--mdc-cream);
  color: var(--mdc-green);
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.mdc-skip-link:focus {
  top: 1rem;
}

/* ---------- Header / primary nav ---------- */
.mdc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mdc-green);
  color: var(--mdc-cream);
  border-bottom: 1px solid rgba(var(--mdc-cream-rgb), 0.12);
}

.mdc-header__inner {
  /* 3-column grid, not flex: the menu trigger (left) and the tools (right)
     are different widths, so only a grid with two equal outer tracks puts
     the logo in the bar's true center regardless of that difference. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(0.75rem, 2vw, 1.5rem);
  min-height: 4.25rem;
  padding: 0.5rem var(--mdc-section-pad-inline);
}

.mdc-header__logo-link,
.mdc-footer__logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.mdc-header__logo-link {
  justify-self: center;
}

.mdc-header__logo {
  /* The 2026-09-13 mark is a wide horizontal wordmark (~3:1), so it is sized
     by width again, like the original wordmark, not by height like the two
     taller marks tried earlier that day. */
  width: clamp(9.5rem, 17vw, 13.5rem);
  height: auto;
  max-width: 100%;
}

/* left: menu trigger (burger + "Menu") — its popup is `.mdc-header__menu`'s
   job (that's the grid item, `justify-self: start` below), the trigger
   itself is just a normal-flow child of it. */
.mdc-header__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: transparent;
  color: var(--mdc-cream);
  cursor: pointer;
}

.mdc-header__menu-label {
  font-family: "Archivo", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Popup menu list — set in the logo's serif (Playfair Display standing in
   for "The Silver Editorial", a paid font, until Boss says otherwise).
   Underline grows from the left + colour change on hover, on Boss's spec. */
.mdc-popup-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mdc-popup-menu__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--mdc-cream);
  font-family: "Playfair Display", "Archivo", serif;
  font-size: 1.05rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 180ms ease;
}

.mdc-popup-menu__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.3rem;
  height: 1px;
  background: var(--mdc-lime);
  transition: right 220ms ease;
}

.mdc-popup-menu__link:hover,
.mdc-popup-menu__link:focus-visible {
  color: var(--mdc-lime);
}

.mdc-popup-menu__link:hover::after,
.mdc-popup-menu__link:focus-visible::after {
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mdc-popup-menu__link,
  .mdc-popup-menu__link::after {
    transition: none;
  }
}

/* right-side tools */
.mdc-header__tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  justify-self: end;
  flex: 0 0 auto;
}

.mdc-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--mdc-radius-pill);
  background: transparent;
  color: var(--mdc-cream);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease;
}

.mdc-iconbtn:hover,
.mdc-iconbtn:focus-visible {
  background: rgba(var(--mdc-cream-rgb), 0.12);
}

.mdc-cart {
  position: relative;
}

.mdc-cart__count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--mdc-lime);
  color: var(--mdc-green);
  font-family: "Archivo", sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.05rem;
  text-align: center;
  display: none;
}

.mdc-cart__count.is-active {
  display: block;
}

/* burger (mobile only) */
.mdc-burger__bars,
.mdc-burger__bars::before,
.mdc-burger__bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.mdc-burger__bars::before { transform: translateY(-7px); }
.mdc-burger__bars::after  { transform: translateY(5px); }

body.mdc-nav-open .mdc-burger__bars { background: transparent; }
body.mdc-nav-open .mdc-burger__bars::before { transform: rotate(45deg); }
body.mdc-nav-open .mdc-burger__bars::after  { transform: rotate(-45deg); }

.site-main {
  min-height: 40vh;
}

.site-main:not(.mdc-site) {
  padding: var(--mdc-section-pad-block) var(--mdc-section-pad-inline);
  background: var(--mdc-cream);
}

.site-main:not(.mdc-site) > * {
  width: min(100%, 48rem);
  margin: 0 auto;
}

.site-main:not(.mdc-site) article h1 {
  margin-bottom: 1.25rem;
}

.mdc-footer {
  background: var(--mdc-green-deep);
  color: var(--mdc-cream);
  padding: clamp(2.5rem, 5.5vw, 4.75rem) var(--mdc-section-pad-inline);
}

.mdc-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

/* Boss, 2026-09-13: logo gets its own column, stretched to the row's full
   height (grid's default align-items is stretch, so this just needs the
   logo itself to fill the height it's given instead of a fixed width). Text
   moves to a separate column next to it. */
.mdc-footer__logo-col {
  display: flex;
  min-width: 0;
}

.mdc-footer__logo-link {
  display: flex;
  height: 100%;
  width: 100%;
}

.mdc-footer__logo {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.mdc-footer__about {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.mdc-footer__about-lead,
.mdc-footer__about-text {
  margin: 0;
  max-width: 30rem;
  color: var(--mdc-cream);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.mdc-footer__about-lead {
  color: var(--mdc-lime);
  font-weight: 600;
}

.mdc-footer__about-text {
  color: rgba(var(--mdc-cream-rgb), 0.8);
}

.mdc-footer__heading {
  margin: 0;
  font-family: "Archivo", sans-serif;
  text-transform: uppercase;
  color: var(--mdc-lime);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.12em;
}

.mdc-footer__column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--mdc-cream-rgb), 0.16);
}

.mdc-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.mdc-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0.375rem;
  color: var(--mdc-cream);
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
}

.mdc-footer__links a:hover,
.mdc-footer__links a:focus-visible {
  color: var(--mdc-lime);
}

.mdc-footer a:focus-visible {
  outline: 2px solid var(--mdc-lime);
  outline-offset: 4px;
}

.mdc-footer__meta {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--mdc-cream-rgb), 0.16);
  color: rgba(var(--mdc-cream-rgb), 0.75);
  font-size: 0.8125rem;
}

@media (min-width: 640px) {
  .mdc-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

@media (min-width: 1200px) {
  .mdc-footer__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (max-width: 639.98px) {
  /* Alone in its own row on mobile, "full height" has nothing to match --
     fall back to a normal readable logo size instead of stretching. */
  .mdc-footer__logo-link {
    height: auto;
  }

  .mdc-footer__logo {
    height: auto;
    width: clamp(9rem, 40vw, 12rem);
  }
}

/* ---------- nav drawer: full-height sidebar (Boss, 2026-09-14) ----------
   Third design for this menu. History, in order: (1) a full-screen panel
   anchored on an olive-tree illustration, (2) a small popup card right
   under the trigger (then doubled in size the same day), (3) this: neither
   -- Boss asked for a full-height sidebar that slides in from the left,
   same side as the trigger. Link list/JS (theme.js data-nav-toggle/
   data-nav-panel/data-nav-close, Escape key, click-outside-closes,
   link-click-closes) is unchanged -- that interaction model already fit a
   sidebar exactly as built, only this file's positioning/sizing changes. */
.mdc-header__menu {
  position: relative;
  justify-self: start;
}

.mdc-nav {
  /* Boss, 2026-09-14: starts under the navbar (which stays visible), not
     over it -- --mdc-header-h is the header's real measured height (set in
     theme.js), 4.25rem is only a fallback for the instant before JS runs. */
  position: fixed;
  top: var(--mdc-header-h, 4.25rem);
  bottom: 0;
  left: 0;
  width: min(85vw, 22rem);
  max-width: 22rem;
  overflow-y: auto;
  padding: 1.5rem 1.75rem 2rem;
  background: var(--mdc-green);
  box-shadow: 24px 0 48px -20px rgba(0, 0, 0, 0.45);
  transform: translateX(-100%);
  transition: transform 280ms ease;
  z-index: 200;
}

/* Dimmed backdrop over the rest of the page while the sidebar is open.
   Pure CSS, no new markup -- theme.js already closes the menu on any click
   outside the panel/trigger, so this only needs to look right, not be a
   separately-wired clickable element. */
/* Boss reported real clicks on the sidebar links didn't work, 2026-09-14.
   Root cause: .mdc-header has `position: sticky` + its own z-index, which
   makes it establish a stacking context -- .mdc-nav's own z-index:200 only
   counts *inside* that context, so the whole header+sidebar subtree was
   effectively painted at z-index 100 among body's children. This backdrop
   lived directly on <body> (root stacking context) at 190, i.e. ABOVE that
   whole subtree -- confirmed with document.elementFromPoint() landing on
   <body>, not the link, at a link's exact coordinates. Fix: keep this
   below .mdc-header's z-index (100) so the trapped sidebar still wins;
   still comfortably above ordinary page content (z-index: auto/0). */
body.mdc-nav-open::before {
  content: '';
  position: fixed;
  top: var(--mdc-header-h, 4.25rem);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(11, 31, 18, 0.55);
  z-index: 90;
  animation: mdcNavBackdropIn 280ms ease both;
}

@keyframes mdcNavBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.mdc-nav-open {
  overflow: hidden;
}

.mdc-nav__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(var(--mdc-cream-rgb), 0.7);
  cursor: pointer;
}

.mdc-nav__close:hover,
.mdc-nav__close:focus-visible {
  background: rgba(var(--mdc-cream-rgb), 0.12);
  color: var(--mdc-cream);
}

.mdc-popup-menu__list {
  margin-top: 3.5rem;
  gap: 0.35rem;
}

.mdc-popup-menu__link {
  padding: 0.65rem 0;
  font-size: 1.25rem;
}

body.mdc-nav-open .mdc-nav {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .mdc-nav {
    transition: transform 120ms ease;
  }
  body.mdc-nav-open::before {
    animation: none;
  }
}

.mdc-text-muted {
  color: var(--mdc-text-muted);
}

.site-main {
  display: block;
}

.mdc-home-hero {
  display: grid;
  grid-template-columns: 1fr;
}

.mdc-home-hero__panel {
  min-width: 290px;
  /* Boss, 2026-09-18: tightened padding/gap (was 34-80px / 28-48px) -- the
     media column stretches to match this panel's natural height (see
     .mdc-home-hero__media below), so the hero's overall height was really
     being driven by this panel's own whitespace, not the image. Shrinking
     both together is what actually makes the hero shorter, not capping
     the image alone (tried that first, it just left the image not filling
     the still-tall panel height). */
  padding: clamp(24px, 4vw, 48px) clamp(18px, 4.5vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.6vw, 30px);
}

.mdc-home-hero__title {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.5rem, 4.9vw, 5.375rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.mdc-home-hero__content {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 30px);
}

.mdc-home-hero__intro,
.mdc-home-section__intro,
.mdc-home-section__body,
.mdc-home-contact__note {
  margin: 0;
  color: var(--mdc-text-soft);
}

.mdc-home-hero__intro {
  max-width: 44ch;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  color: rgba(var(--mdc-green-rgb), 0.9);
}

.mdc-home-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Boss, 2026-09-18: replaced the 2-image split (bowl photo + olive-branch
   strip) with one product photo. Kept the same "take the image out of
   normal flow" fix from the earlier 2-image version -- position:relative
   on the container, the <picture>/img absolutely positioned with inset:0
   -- since that's what makes this immune to the intrinsic-aspect-ratio
   blowout regardless of the photo's orientation (verified the hard way
   earlier today, see git history). With only one image now, .media IS
   the positioning context directly, no inner grid needed. */
.mdc-home-hero__media {
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.mdc-home-hero__media picture,
.mdc-home-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.mdc-home-card__image,
.mdc-home-table__media,
.mdc-home-maison__media {
  overflow: hidden;
  min-height: 0;
}

.mdc-home-card__image img,
.mdc-home-table__media img,
.mdc-home-maison__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

@media (min-width: 900px) {
  .mdc-home-hero {
    grid-template-columns: 1.25fr 1fr;
  }
}

@media (max-width: 899.98px) {
  /* At this width .mdc-home-hero stacks to a single column, so .media no
     longer sits beside .panel in a shared row to stretch-match against --
     with the image absolutely positioned (contributing no height of its
     own), the container would otherwise collapse to 0. Give it an
     explicit height directly instead. */
  .mdc-home-hero__media {
    height: clamp(280px, 68vw, 420px);
  }
}

.mdc-home-marquee {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  justify-content: center;
  padding: 14px var(--mdc-section-pad-inline);
  font-family: "Archivo", sans-serif;
  font-size: clamp(0.6875rem, 1.4vw, 0.8125rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.mdc-home-marquee__divider {
  opacity: 0.4;
}

.mdc-home-section {
  scroll-margin-top: 60px;
}

.mdc-home-section__header {
  display: flex;
  gap: clamp(20px, 4vw, 60px);
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: clamp(18px, 2.4vw, 28px);
  border-bottom: 2px solid var(--mdc-green);
}

.mdc-home-section__title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2rem, 5.4vw, 4.625rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.mdc-home-section__intro {
  flex: 0 1 420px;
  font-size: clamp(0.96875rem, 1.2vw, 1.125rem);
  line-height: 1.6;
  color: rgba(var(--mdc-green-rgb), 0.75);
}

.mdc-home-huile {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 52px);
}

.mdc-home-cards {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  flex-wrap: wrap;
  align-items: stretch;
}

.mdc-home-card {
  flex: 1 1 260px;
  min-width: 240px;
  min-height: clamp(220px, 26vw, 300px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}

.mdc-home-card__number {
  font-family: "Archivo", sans-serif;
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
}

.mdc-home-card__title {
  margin: 0 0 10px;
  font-family: "Archivo", sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
}

.mdc-home-card__text {
  margin: 0;
  font-size: 1.03125rem;
  line-height: 1.6;
}

.mdc-home-card--dark {
  background: var(--mdc-green);
  color: var(--mdc-cream);
}

.mdc-home-card--dark .mdc-home-card__number {
  color: var(--mdc-lime);
}

.mdc-home-card--dark .mdc-home-card__text {
  color: rgba(var(--mdc-cream-rgb), 0.8);
}

.mdc-home-card--panel {
  background: var(--mdc-panel);
}

.mdc-home-card--panel .mdc-home-card__number {
  color: rgba(var(--mdc-green-rgb), 0.28);
}

.mdc-home-card--panel .mdc-home-card__text {
  color: rgba(var(--mdc-green-rgb), 0.78);
}

.mdc-home-card--lime {
  background: var(--mdc-lime);
}

.mdc-home-card--lime .mdc-home-card__number {
  color: rgba(var(--mdc-green-rgb), 0.4);
}

.mdc-home-card--lime .mdc-home-card__text {
  color: rgba(var(--mdc-green-rgb), 0.8);
}

.mdc-home-card__image {
  flex: 1.4 1 320px;
  min-width: 260px;
  min-height: clamp(220px, 26vw, 300px);
}

.mdc-home-table {
  display: flex;
  gap: clamp(22px, 4vw, 56px);
  flex-wrap: wrap;
  align-items: center;
}

.mdc-home-table__content,
.mdc-home-table__media {
  flex: 1 1 340px;
  min-width: 270px;
}

.mdc-home-table__content {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 28px);
}

.mdc-home-table__title,
.mdc-home-maison__title,
.mdc-home-pro__title,
.mdc-home-contact__title {
  margin: 0;
  font-size: clamp(1.875rem, 4.8vw, 4.25rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.mdc-home-table__intro {
  margin: 0;
  max-width: 46ch;
  color: rgba(var(--mdc-green-rgb), 0.78);
}

.mdc-home-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mdc-home-table__note {
  margin: 0;
  font-size: 0.84375rem;
  line-height: 1.7;
  color: rgba(var(--mdc-green-rgb), 0.55);
}

.mdc-home-table__media {
  min-height: clamp(300px, 44vh, 520px);
}

.mdc-home-table__media img {
  min-height: clamp(300px, 44vh, 520px);
  object-position: 50% 42%;
}

.mdc-home-maison__header {
  display: flex;
  gap: clamp(24px, 5vw, 72px);
  flex-wrap: wrap;
}

.mdc-home-maison__lead {
  flex: 1 1 400px;
  min-width: 280px;
}

.mdc-home-maison__copy {
  flex: 1 1 360px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.mdc-home-maison__eyebrow {
  color: var(--mdc-lime);
}

.mdc-home-maison__title {
  margin-top: 18px;
}

.mdc-home-maison__body {
  margin: 0;
  color: rgba(var(--mdc-cream-rgb), 0.84);
}

.mdc-home-maison__body--muted {
  color: rgba(var(--mdc-cream-rgb), 0.66);
}

.mdc-home-maison__media {
  width: min(100%, var(--mdc-container-max));
  height: clamp(220px, 34vh, 420px);
  margin: clamp(28px, 4vw, 52px) auto 0;
}

.mdc-home-maison__media img {
  object-position: 50% 62%;
}

.mdc-home-pro {
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  align-items: flex-end;
}

.mdc-home-pro__lead {
  flex: 1 1 420px;
  min-width: 280px;
}

.mdc-home-pro__copy {
  flex: 1 1 320px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mdc-home-contact {
  display: flex;
  gap: clamp(26px, 5vw, 72px);
  flex-wrap: wrap;
}

.mdc-home-contact__intro {
  flex: 1 1 300px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mdc-home-contact__intro-copy {
  margin: 0;
  max-width: 36ch;
  font-size: 1.03125rem;
  line-height: 1.7;
  color: rgba(var(--mdc-green-rgb), 0.75);
}

.mdc-home-contact__form-wrap {
  flex: 1.3 1 430px;
  min-width: 290px;
}

.mdc-home-contact__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mdc-home-contact__row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.mdc-home-contact__field {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mdc-home-contact__field--full {
  flex-basis: 100%;
}

.mdc-home-contact__label,
.mdc-home-contact__label-meta {
  font-family: "Archivo", sans-serif;
  text-transform: uppercase;
}

.mdc-home-contact__label {
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(var(--mdc-green-rgb), 0.7);
}

.mdc-home-contact__label-meta {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.7;
}

.mdc-home-contact__input,
.mdc-home-contact__select,
.mdc-home-contact__textarea {
  min-height: 50px;
  padding: 14px;
  border: 1.5px solid rgba(var(--mdc-green-rgb), 0.25);
  background: #fff;
  border-radius: 0;
}

.mdc-home-contact__textarea {
  min-height: 9rem;
  line-height: 1.6;
  resize: vertical;
}

.mdc-home-contact__note {
  font-size: 0.84375rem;
  line-height: 1.7;
  color: rgba(var(--mdc-green-rgb), 0.55);
}

.mdc-form-notice {
  margin-bottom: 1rem;
  padding: 1rem 1.125rem;
  border-radius: 20px;
  border: 1px solid var(--mdc-border-soft);
}

.mdc-form-notice p {
  margin: 0;
}

.mdc-form-notice--success {
  background: rgba(216, 226, 78, 0.28);
  color: var(--mdc-green-deep);
}

.mdc-form-notice--error {
  background: rgba(var(--mdc-green-rgb), 0.08);
  color: var(--mdc-green);
}

.mdc-home-contact__input[type="hidden"] {
  display: none;
}

.mdc-home-contact__honeypot {
  position: absolute;
  left: -9999px;
  margin: 0;
}

@media (max-width: 767px) {
  .mdc-home-hero__title {
    max-width: none;
  }

  .mdc-home-section__intro,
  .mdc-home-table__intro {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Boss, 2026-09-13: hide breadcrumbs sitewide, not just the account page.
   Visually hidden, not display:none -- links stay in the DOM for
   crawlers/SEO and screen readers, same clip technique as .screen-reader-text
   above. Covers both the custom page breadcrumb (page.php) and the
   WooCommerce shop/product breadcrumb: both render this same class. */
.mdc-breadcrumbs {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.mdc-breadcrumbs a {
  text-decoration: none;
}

.mdc-breadcrumbs__sep {
  color: rgba(var(--mdc-green-rgb), 0.35);
}

.mdc-home-teaser__title,
.mdc-home-teaser__intro,
.mdc-home-teaser__body,
.mdc-home-teaser__panel-title,
.mdc-home-teaser__panel-text,
.mdc-page-section__title,
.mdc-page-section__body,
.mdc-page-list {
  margin: 0;
}

.mdc-home-teaser__intro,
.mdc-home-teaser__body {
  max-width: 44rem;
  color: inherit;
  line-height: 1.68;
}

.mdc-page-hero__intro,
.mdc-page-section__body,
.mdc-page-list {
  max-width: none;
  color: inherit;
  line-height: 1.68;
}

.sec--green .mdc-home-teaser__intro,
.sec--green .mdc-home-teaser__body,
.sec--green .mdc-page-section__body,
.sec--green .mdc-page-list {
  color: rgba(var(--mdc-cream-rgb), 0.82);
}

.mdc-page-hero__media {
  min-height: clamp(13rem, 24vw, 20rem);
  overflow: hidden;
  border-radius: 24px;
}

.mdc-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mdc-page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.mdc-page-hero__copy {
  display: grid;
  gap: 0.85rem;
  align-content: center;
}

.mdc-page-hero__copy--simple {
  max-width: none;
}

.mdc-page-hero__title {
  margin: 0;
  max-width: 20ch;
  font-size: var(--mdc-title-sm);
  text-wrap: balance;
}

.mdc-page-hero__intro {
  margin: 0;
  max-width: 54ch;
}

.mdc-page .mdc-page-hero {
  padding-top: clamp(2rem, 5vw, 4.25rem);
  padding-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}

.mdc-page .mdc-page-hero + .mdc-page-section {
  padding-top: clamp(2rem, 4vw, 3rem);
}

.mdc-page-section {
  --mdc-page-section-pad-block: var(--mdc-section-pad-block);
  padding-block: var(--mdc-page-section-pad-block);
}

.mdc-page-section--pad-compact {
  --mdc-page-section-pad-block: clamp(2.25rem, 4vw, 4rem);
}

.mdc-page-section--pad-normal {
  --mdc-page-section-pad-block: clamp(3.25rem, 6vw, 5.75rem);
}

.mdc-page-section--pad-spacious {
  --mdc-page-section-pad-block: clamp(4.75rem, 8vw, 7.5rem);
}

.mdc-page-section__inner,
.mdc-page-contact {
  display: grid;
  gap: 1rem;
}

.mdc-page-hero__media,
.mdc-page-section__media {
  min-height: clamp(18rem, 34vw, 32rem);
  overflow: hidden;
  border-radius: 16px;
  background: rgba(var(--mdc-green-rgb), 0.08);
}

.mdc-page-hero__media img,
.mdc-page-section__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mdc-page-section__layout {
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.mdc-page-section__layout--split.mdc-page-section__layout--media {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--mdc-media-weight, 0.9fr));
  align-items: center;
}

.mdc-page-section__layout--inset.mdc-page-section__layout--media {
  grid-template-columns: minmax(0, min(380px, 34vw)) minmax(0, 1.35fr);
  align-items: start;
}

.mdc-page-section__layout--reverse .mdc-page-section__media {
  order: -1;
}

.mdc-page-section__content {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.mdc-page-section__layout:not(.mdc-page-section__layout--media) .mdc-page-section__content {
  max-width: none;
}

.mdc-page-section--text .mdc-page-section__content {
  max-width: none;
}

.mdc-page-section--text .mdc-page-section__content .mdc-page-section__body,
.mdc-page-section--text .mdc-page-section__content .mdc-page-list {
  max-width: none;
}

.mdc-page-section--text .mdc-page-section__content {
  gap: 1.1rem;
}

.mdc-page-section--text .mdc-page-section__content[data-cols="2"] {
  align-items: start;
}

.mdc-page-section__content[data-cols="2"] .mdc-page-section__body-wrap {
  column-count: 2;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  max-width: none;
}

.mdc-page-section__content[data-cols="2"] .mdc-page-section__body,
.mdc-page-section__content[data-cols="2"] .mdc-page-list {
  break-inside: avoid;
}

.mdc-page-section__content[data-cols="2"] .mdc-page-list {
  margin-top: 0.5rem;
}

.mdc-page-section__layout--inset .mdc-page-section__media {
  max-width: min(100%, 380px);
  justify-self: center;
  align-self: start;
}

.mdc-page-section__layout--inset .mdc-page-section__content {
  max-width: none;
}

.mdc-page-section__media,
.mdc-page-section__image {
  aspect-ratio: var(--mdc-media-ratio, 4 / 3);
}

.mdc-page-section__layout--split .mdc-page-section__media,
.mdc-page-section__layout--inset .mdc-page-section__media {
  min-height: 0;
  height: auto;
}

.mdc-page-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.7rem;
}

.mdc-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.mdc-page-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mdc-page-cards--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mdc-page-card {
  display: grid;
  gap: 1rem;
  min-height: 16rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 24px;
}

.mdc-page-card--dark {
  background: var(--mdc-green);
  color: var(--mdc-cream);
}

.mdc-page-card--panel {
  background: var(--mdc-panel);
  color: var(--mdc-green);
}

.mdc-page-card--lime {
  background: var(--mdc-lime);
  color: var(--mdc-green);
}

.mdc-page-card__number {
  font-family: "Archivo", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
}

.mdc-page-card__title {
  margin: 0 0 0.625rem;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.mdc-page-card__text {
  margin: 0;
  line-height: 1.65;
}

.mdc-page-section--feature,
.mdc-page-section--strip {
  padding-inline: 0;
  padding-block: 0;
}

.mdc-page-feature,
.mdc-page-strip {
  position: relative;
}

.mdc-page-feature__media,
.mdc-page-strip__media {
  position: relative;
  min-height: clamp(320px, 46vh, 560px);
  overflow: hidden;
}

.mdc-page-strip__media {
  min-height: clamp(160px, 22vh, 240px);
}

.mdc-page-feature__image,
.mdc-page-strip__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mdc-page-feature__scrim,
.mdc-page-strip__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--mdc-green-rgb), 0.08) 0%, rgba(var(--mdc-green-rgb), 0.82) 100%);
}

.mdc-page-feature__copy-wrap,
.mdc-page-strip__content-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
}

.mdc-page-feature__copy,
.mdc-page-strip__content {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  color: var(--mdc-cream);
}

.mdc-page-feature__copy .mdc-eyebrow,
.mdc-page-strip__content .mdc-eyebrow {
  color: rgba(var(--mdc-cream-rgb), 0.82);
}

.mdc-page-feature__copy .mdc-page-section__title,
.mdc-page-strip__title,
.mdc-page-quote__text {
  margin: 0;
  max-width: 20ch;
  color: currentColor;
}

.mdc-page-feature__copy .mdc-page-section__body,
.mdc-page-strip__text {
  margin: 0;
  max-width: 54ch;
  color: rgba(var(--mdc-cream-rgb), 0.9);
}

.mdc-page-strip__content {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.85rem;
}

.mdc-page-strip__title {
  max-width: 24ch;
}

.mdc-page-actions--center {
  justify-content: center;
}

.mdc-page-quote {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
}

.mdc-page-quote__text {
  font-size: var(--mdc-title-md);
  line-height: 0.94;
}

.mdc-page-quote__attribution {
  margin: 0;
  font-size: var(--mdc-small-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.mdc-page-section--quote.sec--green .mdc-page-quote__attribution,
.mdc-page-section--quote.sec--lime .mdc-page-quote__attribution {
  color: inherit;
}

@media (max-width: 999.98px) {
  .mdc-page-hero__grid,
  .mdc-page-section__layout--media {
    grid-template-columns: minmax(0, 1fr);
  }

  .mdc-page-cards {
    grid-template-columns: 1fr;
  }

  .mdc-page-section__layout--reverse .mdc-page-section__media {
    order: 0;
  }

  .mdc-page-section__layout--inset .mdc-page-section__media {
    max-width: none;
  }

  .mdc-page-section__content[data-cols="2"] .mdc-page-section__body-wrap {
    column-count: 1;
  }
}

@media (max-width: 767px) {
  .mdc-page-hero__media,
  .mdc-page-section__media {
    min-height: 16rem;
  }

  .mdc-page-feature__copy,
  .mdc-page-strip__content {
    padding-inline: var(--mdc-section-pad-inline);
  }

  .mdc-page-actions--center {
    align-items: stretch;
  }
}

/* --- page hero + section media tidy-up (T9 follow, Alfred) --- */
.mdc-page-hero__grid { align-items: stretch; }
.mdc-page-hero__media {
  min-height: 0;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: transparent;
}
.mdc-page-hero__media img { aspect-ratio: 4 / 3; }
@media (max-width: 800px) {
  .mdc-page-hero__media { height: auto; }
}

.mdc-home-card__title {
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.mdc-home-card__title {
  font-size: 1rem;
  font-weight: 600;
}

.mdc-home-contact__input,
.mdc-home-contact__select,
.mdc-home-contact__textarea {
  border: 1px solid var(--mdc-border-strong);
  border-radius: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.mdc-home-contact__input:focus-visible,
.mdc-home-contact__select:focus-visible,
.mdc-home-contact__textarea:focus-visible {
  border-color: rgba(var(--mdc-green-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(216, 226, 78, 0.3);
  outline: 0;
}

/* --- page hero: give the image real presence (T12b follow, Alfred) --- */
.mdc-page-hero__grid { align-items: center; }
.mdc-page-hero__media {
  height: auto;
  aspect-ratio: 16 / 11;
  min-height: clamp(15rem, 26vw, 22rem);
  border-radius: 18px;
}
.mdc-page-hero__media img { aspect-ratio: 16 / 11; height: 100%; }
@media (min-width: 900px) {
  .mdc-page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
@media (max-width: 899px) {
  .mdc-page-hero__media { aspect-ratio: 3 / 2; min-height: 0; }
}

/* --- Homepage: La collection (Boss's own design, 2026-09-14, replaces
   the old "La gamme" one-product-per-category grid) --- */
.mdc-collection { padding-block: clamp(2.75rem, 6vw, 5.3rem); }
.mdc-collection__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2.5rem;
  margin-bottom: 1.9rem;
}
.mdc-collection__eyebrow {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--mdc-text-muted);
}
.mdc-collection__title {
  margin: 0.85rem 0 0;
  font-family: "Archivo", sans-serif;
  font-size: 2.6875rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: var(--mdc-green);
}
.mdc-collection__title em {
  font: italic 1.04em "Playfair Display", Georgia, serif;
  font-style: italic;
}
.mdc-collection__intro {
  margin: 0;
  max-width: 290px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.8125rem;
  color: var(--mdc-text-muted);
}
.mdc-collection__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4375rem;
}
.mdc-collection__card {
  display: block;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
/* Boss, 2026-09-14: this section's own background is the same panel
   gray as the image box used to be, so the box had no visible edge --
   image, description and button all read as one undifferentiated gray
   square. Image box now uses cream instead, so it stands out against the
   section the same way the shop page's (cream section, gray image box)
   already does -- same idea, colors swapped to fit this section's role in
   the homepage's alternating panel/cream rhythm. */
.mdc-collection__image {
  height: 21.5625rem;
  background: var(--mdc-cream);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
}
.mdc-collection__card:nth-child(2) .mdc-collection__image {
  background: color-mix(in srgb, var(--mdc-cream) 92%, var(--mdc-panel));
}
.mdc-collection__card:nth-child(3) .mdc-collection__image {
  background: color-mix(in srgb, var(--mdc-cream) 84%, var(--mdc-panel));
}
.mdc-collection__image img {
  width: 19.375rem;
  height: 19.375rem;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.mdc-collection__index {
  position: absolute;
  left: 19px;
  top: 16px;
  z-index: 1;
  font: italic 17px "Playfair Display", Georgia, serif;
  color: var(--mdc-green);
}
.mdc-collection__type {
  position: absolute;
  right: 17px;
  top: 18px;
  font-family: "Archivo", sans-serif;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mdc-green);
}
.mdc-collection__body { padding: 1.25rem 0.0625rem 0; }
.mdc-collection__heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.9375rem;
}
.mdc-collection__heading h3 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--mdc-green);
}
.mdc-collection__arrow {
  border: 1px solid var(--mdc-border-strong);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--mdc-green);
}
.mdc-collection__body > p {
  margin: 0.4375rem 0 0;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--mdc-text-muted);
  font-size: 0.75rem;
}
.mdc-collection__sizes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.0625rem;
}
.mdc-collection__sizes span {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.625rem;
  border: 1px solid var(--mdc-border-soft);
  padding: 3px 10px;
  border-radius: var(--mdc-radius-pill);
  color: var(--mdc-green);
}
.mdc-collection__foot {
  border-top: 1px solid var(--mdc-border-soft);
  margin-top: 0.8125rem;
  padding-top: 1.4375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}
.mdc-collection__foot p {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.75rem;
  color: var(--mdc-text-muted);
}
.mdc-collection__card:hover .mdc-collection__arrow {
  background: var(--mdc-lime);
}
.mdc-collection__link {
  display: inline-flex;
  gap: 1.25rem;
  align-items: center;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mdc-green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}
@media (max-width: 1050px) {
  .mdc-collection__image { height: 18.125rem; }
  .mdc-collection__image img { width: 16.875rem; height: 16.875rem; }
  .mdc-collection__title { font-size: 2.25rem; }
  .mdc-collection__heading h3 { font-size: 1.125rem; }
}
@media (max-width: 740px) {
  .mdc-collection { padding-block: 3rem; }
  .mdc-collection__head { align-items: flex-start; flex-direction: column; gap: 1rem; margin-bottom: 1.5625rem; }
  .mdc-collection__title { font-size: 2.1875rem; letter-spacing: -0.035em; }
  .mdc-collection__intro { max-width: 350px; font-size: 0.8125rem; }
  .mdc-collection__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .mdc-collection__image { height: 20rem; }
  .mdc-collection__image img { width: 18.4375rem; height: 18.4375rem; }
  .mdc-collection__body { padding: 1rem 0 0.375rem; }
  .mdc-collection__heading h3 { font-size: 1.375rem; }
  .mdc-collection__body > p { font-size: 0.75rem; }
  .mdc-collection__type { font-size: 9px; }
  .mdc-collection__sizes { margin-top: 0.75rem; }
  .mdc-collection__foot { margin-top: 1.375rem; flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .mdc-collection__link { font-size: 0.75rem; }
}
@media (max-width: 360px) {
  .mdc-collection__image { height: 18.125rem; }
  .mdc-collection__image img { width: 16.875rem; height: 16.875rem; }
}

/* ---------- Calm, progressive motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mdcUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  html.js .mdc-home-hero__panel > *,
  html.js .mdc-home-hero__media > * {
    animation: mdcUp 450ms ease-out both;
  }

  html.js .mdc-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 450ms ease-out, transform 450ms ease-out;
    transition-delay: var(--mdc-motion-delay, 0ms);
  }

  html.js .mdc-reveal.is-inview {
    opacity: 1;
    transform: translateY(0);
  }

  html.js body .mdc-reveal:focus-within {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }

  /* Fade a fixed shadow so only opacity is animated. */
  .mdc-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(var(--mdc-green-rgb), 0.14);
    opacity: 0;
    transition: opacity 200ms ease-out;
  }

  .mdc-header.is-scrolled::after { opacity: 1; }

  body:not(.woocommerce-cart):not(.woocommerce-checkout) .mdc-btn {
    transition: transform 180ms ease-out;
  }

  @media (hover: hover) and (pointer: fine) {
    /* Boss, 2026-09-14: this whole-card lift + shadow-box-on-hover effect
       was built for .mdc-product-card (the shop-grid AJAX-cart card) and
       .mdc-collection__card got added into this same selector group when
       the homepage section was rebuilt, inheriting an effect it was never
       meant to have -- Boss explicitly does not want it: hover should
       animate ONLY the image, nothing else, matching the shop catalogue
       card (.mdc-catalog-card) which never had this box in the first
       place. Card lift/shadow-box stays for .mdc-product-card only. */
    body:not(.woocommerce-cart):not(.woocommerce-checkout) .mdc-product-card {
      position: relative;
      /* Independent translate keeps the hover lift separate from the reveal. */
      transition: translate 180ms ease-out, opacity 450ms ease-out, transform 450ms ease-out;
      transition-delay: 0ms, var(--mdc-motion-delay, 0ms), var(--mdc-motion-delay, 0ms);
    }

    body:not(.woocommerce-cart):not(.woocommerce-checkout) .mdc-product-card::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      box-shadow: 0 8px 20px rgba(var(--mdc-green-rgb), 0.12);
      opacity: 0;
      transition: opacity 180ms ease-out;
    }

    body:not(.woocommerce-cart):not(.woocommerce-checkout) .mdc-product-card:hover {
      translate: 0 -3px;
    }

    body:not(.woocommerce-cart):not(.woocommerce-checkout) .mdc-product-card:hover::after {
      opacity: 1;
    }

    /* Image-only hover animation -- this is the part the home card keeps,
       matching the shop catalogue card's behavior exactly. */
    body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.mdc-collection__image, .mdc-product-card__media) img {
      transition: transform 180ms ease-out;
    }

    body:not(.woocommerce-cart):not(.woocommerce-checkout) :is(.mdc-collection__card, .mdc-product-card):hover :is(.mdc-collection__image, .mdc-product-card__media) img {
      transform: scale(1.03);
    }

    body:not(.woocommerce-cart):not(.woocommerce-checkout) .mdc-product-card .mdc-product-card__media img {
      transition: transform 450ms ease-out;
    }

    body:not(.woocommerce-cart):not(.woocommerce-checkout) .mdc-product-card:hover .mdc-product-card__media img {
      transform: scale(1.05);
    }
  }
}

/* =====================================================================
   Contact page (page-contact.php). Boss's own design, 2026-09-14,
   implemented directly. Colors/fonts use this theme's real tokens, not
   the mockup's own custom property names -- same mapping used on every
   other mockup this session: --green/--lime/--paper/--pale/--line/--muted
   -> --mdc-green/--mdc-lime/--mdc-cream/--mdc-panel/--mdc-border-soft/
   --mdc-text-muted. No new width cap introduced (--mdc-container-max is
   100% sitewide) -- repeating the mockup's own 1320px .wrap cap here was
   exactly the mistake made (and then undone) on the shop page earlier
   today, not repeated on this page.
   ===================================================================== */

.mdc-contact-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.mdc-contact-hero__title {
  margin: 0.9375rem 0 0;
  font-family: "Archivo", sans-serif;
  font-weight: 750;
  text-transform: none;
  font-size: clamp(2.75rem, 7vw, 5.875rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--mdc-green);
}
.mdc-contact-hero__title em {
  font: italic 1em "Playfair Display", Georgia, serif;
  font-weight: 400;
}
.mdc-contact-hero__copy { max-width: 23rem; padding-bottom: 3px; }
.mdc-contact-hero__copy p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.85;
  color: var(--mdc-text-muted);
}
.mdc-contact-hero__note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.1875rem;
  font-family: "Archivo", sans-serif;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mdc-green);
}
.mdc-contact-hero__note::before { content: ''; width: 29px; height: 1px; background: var(--mdc-green); }
@media (max-width: 760px) {
  .mdc-contact-hero { display: block; padding-bottom: 2rem; }
  .mdc-contact-hero__copy { max-width: none; margin-top: 1.3125rem; }
}

.mdc-contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.75rem, 4vw, 3.625rem);
  align-items: start;
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
@media (max-width: 900px) {
  .mdc-contact-grid { grid-template-columns: 1fr; gap: 1.9375rem; }
}

.mdc-contact-visual {
  position: relative;
  height: clamp(280px, 32vw, 500px);
  overflow: hidden;
  border-radius: 3px;
  background: var(--mdc-green);
  margin: 0;
}
.mdc-contact-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.mdc-contact-visual::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(11, 31, 18, 0.85));
}
.mdc-contact-visual__caption {
  position: absolute;
  left: 1.875rem;
  right: 1.5rem;
  bottom: 1.8125rem;
  z-index: 1;
  color: var(--mdc-cream);
}
.mdc-contact-visual__caption .mdc-eyebrow { font-size: 0.5rem; letter-spacing: 0.125rem; }
.mdc-contact-visual__caption p {
  margin: 0.8125rem 0 0;
  font: italic clamp(1.75rem, 4vw, 2.3125rem)/1.09 "Playfair Display", Georgia, serif;
  letter-spacing: -0.02em;
}
.mdc-contact-visual__seal {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1;
  background: var(--mdc-lime);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: "Archivo", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--mdc-green);
  transform: rotate(9deg);
}
.mdc-contact-visual__seal b { margin-top: 3px; font: 16px "Playfair Display", Georgia, serif; font-weight: 400; }
@media (max-width: 760px) {
  .mdc-contact-visual__caption { left: 22px; bottom: 21px; }
  .mdc-contact-visual__seal { width: 62px; height: 62px; top: 16px; right: 16px; font-size: 6px; }
  .mdc-contact-visual__seal b { font-size: 14px; }
}

.mdc-contact-aside-note {
  padding: 1.5625rem 0 0;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.9375rem;
}
.mdc-contact-aside-note > span {
  font: italic 20px "Playfair Display", Georgia, serif;
  color: color-mix(in srgb, var(--mdc-green) 55%, var(--mdc-text-muted));
}
.mdc-contact-aside-note h3 {
  margin: 0 0 0.4375rem;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 0.9375rem;
  color: var(--mdc-green);
}
.mdc-contact-aside-note p { margin: 0; max-width: 21.25rem; font-size: 0.75rem; color: var(--mdc-text-muted); }
.mdc-contact-aside-note button {
  appearance: none;
  display: inline-block;
  margin-top: 0.8125rem;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--mdc-green);
  border-radius: 0;
  background: none;
  color: var(--mdc-green);
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
}

/* Boss, 2026-09-18: "Nous contacter" from a product now jumps straight to
   the form via #mdc-contact-form-shell -- reserve room for the sticky
   header so the anchor doesn't land underneath it. */
#mdc-contact-form-shell { scroll-margin-top: calc(var(--mdc-header-h, 4.25rem) + 1rem); }

.mdc-contact-context {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--mdc-panel);
  border-radius: var(--mdc-radius-card, 4px);
  font-size: 0.8125rem;
  color: var(--mdc-text-muted);
}
.mdc-contact-context a { color: var(--mdc-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.mdc-contact-form-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.mdc-contact-form-head h2 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: 1.75rem;
  letter-spacing: -0.0375em;
  color: var(--mdc-green);
}
.mdc-contact-form-head span { font-size: 0.625rem; color: var(--mdc-text-muted); }

.mdc-contact-audience {
  padding: 5px;
  background: var(--mdc-panel);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  border-radius: 4px;
  margin-bottom: 1.6875rem;
}
.mdc-contact-audience button {
  appearance: none;
  border: 0;
  padding: 12px 8px;
  border-radius: 3px;
  background: none;
  color: var(--mdc-green);
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  transition: background 150ms ease;
}
.mdc-contact-audience button[aria-pressed="true"] { background: var(--mdc-green); color: var(--mdc-cream); }
.mdc-contact-audience button:hover:not([aria-pressed="true"]) { background: color-mix(in srgb, var(--mdc-panel) 60%, var(--mdc-border-soft)); }

.mdc-contact-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1875rem 1.25rem;
}
.mdc-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: "Archivo", sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mdc-green);
  min-width: 0;
}
.mdc-contact-field--full { grid-column: 1 / -1; }
.mdc-contact-optional { font-weight: 400; color: var(--mdc-text-muted); }
/* [hidden] must win over the layout `display` below (author rules beat
   the UA default regardless of source order) -- same bug class caught on
   the shop catalogue filter panel earlier today. */
.mdc-contact-professional-fields[hidden] { display: none; }
.mdc-contact-professional-fields {
  display: contents;
}
.mdc-contact-field input,
.mdc-contact-field select,
.mdc-contact-field textarea {
  background: transparent;
  border: 1px solid var(--mdc-border-strong);
  border-radius: 3px;
  width: 100%;
  padding: 13px 14px;
  min-height: 48px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--mdc-green);
}
.mdc-contact-field input::placeholder,
.mdc-contact-field textarea::placeholder { color: var(--mdc-text-muted); opacity: 1; }
.mdc-contact-field textarea { resize: vertical; min-height: 8.9375rem; line-height: 1.7; }
.mdc-contact-field input:focus,
.mdc-contact-field select:focus,
.mdc-contact-field textarea:focus { background: #fff; border-color: var(--mdc-green); outline: none; }
.mdc-contact-field-helper { font-size: 0.625rem; color: var(--mdc-text-muted); text-align: right; font-weight: 400; margin-top: -4px; }

.mdc-contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1.25rem 0 1.375rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.625rem;
  color: var(--mdc-text-muted);
  line-height: 1.7;
}
.mdc-contact-consent input { width: 15px; height: 15px; min-height: 0; padding: 0; accent-color: var(--mdc-green); margin: 2px 0 0; flex-shrink: 0; }

.mdc-contact-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.mdc-contact-submit {
  appearance: none;
  border: 0;
  padding: 15px 23px;
  min-height: 51px;
  background: var(--mdc-lime);
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mdc-green);
  transition: background 150ms ease;
}
.mdc-contact-submit:hover { background: color-mix(in srgb, var(--mdc-lime) 85%, var(--mdc-green)); }
.mdc-contact-submit-row > a {
  font-family: "DM Sans", sans-serif;
  font-size: 0.625rem;
  color: var(--mdc-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  .mdc-contact-fields { gap: 1.0625rem 0.875rem; }
  .mdc-contact-submit-row { flex-direction: column; align-items: flex-start; gap: 0.6875rem; }
  .mdc-contact-submit { width: 100%; justify-content: center; }
}
@media (max-width: 380px) {
  .mdc-contact-fields { grid-template-columns: 1fr; }
  .mdc-contact-field--full { grid-column: auto; }
}

.mdc-contact-faq {
  border-top: 1px solid var(--mdc-border-soft);
  padding: clamp(2rem, 5vw, 3.125rem) 0 clamp(2.375rem, 5vw, 3.875rem);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.75rem, 4vw, 3.625rem);
}
.mdc-contact-faq__title {
  margin: 0.9375rem 0 1.0625rem;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(1.75rem, 3.4vw, 2.0625rem);
  line-height: 1.12;
  letter-spacing: -0.0325em;
  color: var(--mdc-green);
}
.mdc-contact-faq__title em { font: italic 1em "Playfair Display", Georgia, serif; font-weight: 400; }
.mdc-contact-faq__intro p { margin: 0; max-width: 16.5625rem; font-size: 0.75rem; color: var(--mdc-text-muted); }
.mdc-contact-faq__list details { border-bottom: 1px solid var(--mdc-border-soft); }
.mdc-contact-faq__list details:first-child { border-top: 1px solid var(--mdc-border-soft); }
.mdc-contact-faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5625rem;
  cursor: pointer;
  list-style: none;
  padding: 1.1875rem 0;
  font-family: "Archivo", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mdc-green);
}
.mdc-contact-faq__list summary::-webkit-details-marker { display: none; }
.mdc-contact-faq__list summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; line-height: 1; color: var(--mdc-green); }
.mdc-contact-faq__list details[open] summary::after { content: '\2212'; }
.mdc-contact-faq__list details p {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: var(--mdc-text-muted);
  margin: 0 1.875rem 1.25rem 0;
  line-height: 1.8;
}
.mdc-contact-faq__list details a,
.mdc-contact-faq__list details button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: var(--mdc-green);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 900px) {
  .mdc-contact-faq { grid-template-columns: 1fr; }
  .mdc-contact-faq__intro p { max-width: none; }
}

.mdc-contact-bottom {
  background: var(--mdc-green);
  color: var(--mdc-cream);
  padding: clamp(1.875rem, 4vw, 2.3125rem) 0;
}
.mdc-contact-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5625rem;
  flex-wrap: wrap;
}
.mdc-contact-bottom h2 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(1.75rem, 3.4vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.0325em;
}
.mdc-contact-bottom h2 em { font: italic 1em "Playfair Display", Georgia, serif; color: var(--mdc-lime); }
.mdc-contact-bottom__inner > a {
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--mdc-cream) 40%, var(--mdc-green));
  border-radius: 30px;
  padding: 13px 22px;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  display: inline-flex;
  gap: 1.75rem;
  align-items: center;
  color: var(--mdc-cream);
}
@media (max-width: 760px) {
  .mdc-contact-bottom__inner { flex-direction: column; align-items: flex-start; gap: 1.4375rem; }
}

/* Flavored oils: a compact introduction following the collection.
   Boss, 2026-09-18 (2nd refinement): one large advertising photo replaces
   the 4-thumbnail bottle grid. Mobile order must be label+headline ->
   paragraph -> photo -> button, which isn't the DOM's natural order (the
   button sits inside .copy, before .photo, so the desktop column reads
   naturally top-to-bottom) -- .copy unwraps via display:contents on
   narrow screens so its children become direct flex items of .layout and
   can be reordered with plain flex `order`, no JS. */
.mdc-aromatisee-teaser__layout { display: flex; flex-direction: column; gap: clamp(20px, 5vw, 32px); }
.mdc-aromatisee-teaser__head { margin: 0 0 20px; }
.mdc-aromatisee-teaser__head h2 { margin: 8px 0 0; font-size: clamp(1.9rem, 4vw, 3.25rem); line-height: 1.08; }
.mdc-aromatisee-teaser__text { margin: 0 0 28px; max-width: 52ch; }
.mdc-aromatisee-teaser__cta { align-self: flex-start; }
.mdc-aromatisee-teaser__photo img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .mdc-aromatisee-teaser__copy { display: contents; }
  .mdc-aromatisee-teaser__head { order: 1; }
  .mdc-aromatisee-teaser__text { order: 2; }
  .mdc-aromatisee-teaser__photo { order: 3; }
  .mdc-aromatisee-teaser__cta { order: 4; }
}

@media (min-width: 901px) {
  .mdc-aromatisee-teaser__layout { flex-direction: row; align-items: center; gap: clamp(32px, 5vw, 64px); }
  .mdc-aromatisee-teaser__copy { flex: 0 0 38%; max-width: 40%; }
  .mdc-aromatisee-teaser__head { margin-bottom: 20px; }
  .mdc-aromatisee-teaser__text { margin-bottom: 28px; }
  .mdc-aromatisee-teaser__photo { flex: 1 1 60%; min-width: 0; }
}

/* Flavored collection discovery, using the existing full-width section rhythm. */
/* Boss, 2026-09-18: was a 2-column grid squeezing 3 small thumbnails into a
   narrow side column. Replaced with a compact text intro stacked above one
   large photo (the real 7-bottle studio shot) spanning the full content
   width -- width/height attrs + aspect-ratio reserve the space up front so
   nothing flashes as a narrow strip while the image loads. */
.mdc-aromatisee-hero__layout { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px); }
.mdc-aromatisee-hero__intro-block { max-width: 68ch; }
.mdc-aromatisee-hero__eyebrow { margin-bottom: 24px; font-size: .875rem; line-height: 1.4; letter-spacing: .12em; }
.mdc-aromatisee-hero__headline { margin: 0; font-family: Archivo, sans-serif; font-size: clamp(2.5rem, 4.5vw, 4.75rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; text-transform: uppercase; }
.mdc-aromatisee-hero__intro { margin-top: 28px; max-width: 55ch; }
.mdc-aromatisee-hero__photo { width: 100%; }
.mdc-aromatisee-hero__photo picture,
.mdc-aromatisee-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1659 / 948;
  object-fit: contain;
  background: var(--mdc-cream);
}
.mdc-aromatisee-heading { margin: 0 0 32px; font-size: clamp(1.8rem, 3.2vw, 3.25rem); line-height: 1.05; }
.mdc-aromatisee-flavors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.mdc-aromatisee-card { display: flex; flex-direction: column; background: var(--mdc-panel); min-width: 0; }
.mdc-aromatisee-card > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.mdc-aromatisee-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.mdc-aromatisee-card h3 { font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.1; }
.mdc-aromatisee-card__pairings { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 20px; list-style: none; }
.mdc-aromatisee-card__pairings li { padding: 5px 10px; border: 1px solid var(--mdc-border-strong); border-radius: 999px; font-size: .8125rem; }
.mdc-aromatisee-card__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-top: auto; font-weight: 600; text-underline-offset: 5px; }
.mdc-aromatisee-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 6vw, 96px); align-items: start; }
.mdc-aromatisee-split > p, .mdc-aromatisee-split > div > p { margin-top: 0; }
.mdc-aromatisee-guide { margin: 0; }
.mdc-aromatisee-guide > div { border-top: 1px solid var(--mdc-border-strong); padding: 20px 0; }
.mdc-aromatisee-guide dt { font-weight: 700; }
.mdc-aromatisee-guide dd { margin: 8px 0 0; }
#saveurs { scroll-margin-top: 100px; }
@media (max-width: 1000px) {
  .mdc-aromatisee-flavors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .mdc-aromatisee-flavors, .mdc-aromatisee-split { grid-template-columns: minmax(0, 1fr); }
}

.mdc-popup-menu__sublist { list-style: none; padding: 0 0 12px 24px; margin: 0; }
/* Boss, 2026-09-18: this sat on the same dark-green .mdc-nav background as
   its text colour -- invisible submenu, reported as "a blank-looking gap
   below Nos huiles". Fixed to the same cream-on-green treatment as the
   parent .mdc-popup-menu__link, just muted + smaller to read as a level
   down, with the same lime hover/focus accent (never colour alone --
   underline too, for anyone who can't distinguish the hue shift). */
.mdc-popup-menu__sublist a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: rgba(var(--mdc-cream-rgb), 0.82); font-size: .9375rem; line-height: 1.4; text-decoration: none; transition: color 180ms ease; }
.mdc-popup-menu__sublist a:hover,
.mdc-popup-menu__sublist a:focus-visible {
  color: var(--mdc-lime);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mdc-popup-menu__sublist a:focus-visible { outline: 2px solid var(--mdc-lime); outline-offset: 2px; border-radius: 2px; }
.mdc-popup-menu__sublist a:active { color: var(--mdc-lime); }