/* ============================================================
   AZALEA enhancement layer (overlay on the built bundle)
   1. Animation tuning        — snappier reveals, no blank gaps
   2. Readability fixes       — contrast, scrims, focus states
   3. Laptop scale-fit        — 821px…1412px zoom to fit canvas
   4. Mobile relayout         — ≤820px full responsive pass
   Loaded after /assets/index-*.css so equal specificity wins.
   ============================================================ */

/* ---------- 1. ANIMATION TUNING (all widths) ---------- */

/* Faster, springier reveals; cap authored stagger delays so fast
   scrolling never leaves sections blank for long. */
.reveal {
  transition: opacity .5s ease-out, transform .55s cubic-bezier(.2, .65, .25, 1);
  transition-delay: min(var(--reveal-delay, 0s), .25s);
  transform: translateY(16px);
}
.reveal-from-left  { transform: translate(-20px); }
.reveal-from-right { transform: translate(20px); }
.reveal-scale      { transform: scale(1.02); }

/* Slow Ken Burns drift on full-bleed hero imagery. */
@media (prefers-reduced-motion: no-preference) {
  section.bg-moss > img.absolute.max-w-none,
  section.overflow-hidden > div.absolute.inset-0.bg-cover {
    animation: mz-kenburns 18s ease-in-out infinite alternate;
  }
  @keyframes mz-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.055); }
  }
  /* the home hero <img> is offset with top:-246px; keep that intact */
  section.bg-moss > img.absolute.max-w-none { transform-origin: 50% 35%; }
}

/* Card micro-interaction: gentle lift + shadow on interactive cards. */
a[class*="border"][class*="bg-white"],
div[class*="cursor-pointer"][class*="border"] {
  transition: transform .35s cubic-bezier(.2, .65, .25, 1), box-shadow .35s ease;
}
@media (hover: hover) {
  a[class*="border"][class*="bg-white"]:hover {
    box-shadow: 0 18px 40px -18px rgb(20 22 12 / .28);
  }
}

/* Buttons/links: smooth everything that changes on hover. */
#root a, #root button { transition-timing-function: cubic-bezier(.2, .65, .25, 1); }

/* ---------- 2. READABILITY (all widths) ---------- */

/* Visible keyboard focus (brand gold), never the browser default blue. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--color-gold, #b98e4e);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: #b98e4e; color: #fff; }

/* Dark "atmospheres" band: audience labels were mid-gray on dark moss. */
section.bg-moss .text-sage,
section[class*="bg-moss"] p[class*="text-[13px]"],
section[class*="bg-moss"] div[class*="text-[13px]"] {
  color: #d8d6c6;
}

/* Footer: tighten label/value columns that visually collided
   ("SOURCING‹no gap›Italy & Turkey") and lift tiny link contrast. */
#root footer p[class*="uppercase"] { letter-spacing: .6px; }
#root footer [class*="text-[12px]"] { color: #cfcdc4; }
#root footer a:hover { color: #fff; }

/* About-hero only: its paragraph sat on a bright hillside with no scrim.
   (Was global; that double-darkened bands that already carry their own
   gradient, e.g. home "Italy & Turkey".) */
body[data-mz-route="about"] #root section:first-of-type > div.absolute.inset-0:not([class*="bg-cover"]):not([class*="bg-center"]) {
  background-image: linear-gradient(90deg, rgb(24 26 16 / .5) 0%, rgb(24 26 16 / .24) 45%, rgb(24 26 16 / 0) 72%);
}

/* Premium story: low-contrast gold "READ THE STORY →" link. */
a[class*="text-gold"] { color: #a2762f; }
.bg-black a[class*="text-gold"], .bg-moss a[class*="text-gold"] { color: #d9b36a; }

/* Long-form journal articles: comfortable measure + rhythm. */
body[data-mz-route="article"] #root p[class*="text-[17px]"],
body[data-mz-route="article"] #root p[class*="text-[18px]"] {
  line-height: 1.72;
  max-width: 640px;
}

/* Reading progress hairline on journal articles. */
#mz-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--color-gold, #b98e4e);
  z-index: 90; pointer-events: none;
}
body:not([data-mz-route="article"]) #mz-progress { display: none; }

/* ---------- 3. LAPTOP SCALE-FIT (821px – 1412px) ----------
   The design is a fixed 1413px canvas; on 1280/1366 laptops the right edge
   is clipped. This is applied by enhance.js `fitCanvas()`, NOT here: CSS
   `zoom: calc(100vw / 1440)` is invalid (calc gives a length, zoom needs a
   unitless number) and gets dropped silently. Do not re-add it here. */

/* ============================================================
   4. MOBILE RELAYOUT  (≤ 820px)
   ============================================================ */
/* Burger/menu/linear-clones exist in the DOM at every width — phones only. */
@media (min-width: 821px) {
  #mz-burger, #mz-menu, .mz-lin { display: none !important; }
}

@media (max-width: 820px) {

  /* ----- 4.0 base guards ----- */
  html { scroll-snap-type: none !important; }
  body { overflow-x: hidden; }
  #root { overflow-x: clip; min-width: 0 !important; }  /* bundle locks #root{min-width:1413px} */

  /* Fluid type scale replacing fixed desktop sizes (line-heights and
     letter-spacing re-derived: the bundle uses px values tuned to the
     desktop sizes). */
  [class*="text-[144px]"], [class*="text-[135px]"] {
    font-size: clamp(52px, 15vw, 72px) !important;
    line-height: 1.02 !important; letter-spacing: -.02em !important;
  }
  /* desktop-tuned pixel pulls between stacked display words → em-based */
  [class*="mt-[-39px]"] { margin-top: -.24em !important; }
  [class*="text-[60px]"] { font-size: clamp(34px, 9.6vw, 44px) !important; line-height: 1.08 !important; letter-spacing: -.01em !important; }
  [class*="text-[54px]"], [class*="text-[52px]"] { font-size: clamp(30px, 8.8vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -.01em !important; }
  [class*="text-[48px]"], [class*="text-[46px]"], [class*="text-[44px]"] { font-size: clamp(28px, 8.2vw, 36px) !important; line-height: 1.12 !important; letter-spacing: -.01em !important; }
  [class*="text-[42px]"], [class*="text-[40px]"] { font-size: clamp(26px, 7.6vw, 32px) !important; line-height: 1.14 !important; }
  [class*="text-[36px]"], [class*="text-[34px]"] { font-size: clamp(24px, 6.8vw, 30px) !important; line-height: 1.18 !important; }
  [class*="text-[32px]"], [class*="text-[30px]"] { font-size: clamp(22px, 6.2vw, 28px) !important; line-height: 1.2 !important; }
  [class*="text-[28px]"], [class*="text-[27px]"], [class*="text-[26px]"] { font-size: clamp(20px, 5.6vw, 24px) !important; line-height: 1.25 !important; }
  [class*="text-[24px]"], [class*="text-[22px]"] { font-size: clamp(18px, 5vw, 21px) !important; line-height: 1.3 !important; }
  [class*="text-[20px]"], [class*="text-[19px]"] { font-size: 18px !important; line-height: 1.4 !important; }
  [class*="text-[18px]"], [class*="text-[17px]"] { font-size: 16.5px !important; line-height: 1.55 !important; }
  [class*="text-[16px]"], [class*="text-[15px]"] { font-size: 15px !important; line-height: 1.55 !important; }
  [class*="text-[11px]"], [class*="text-[10px]"] { font-size: 11.5px !important; }

  /* Containers: every fixed canvas goes fluid. */
  [class*="w-[1413px]"], [class*="w-[1251px]"], [class*="w-[1224px]"],
  [class*="w-[980px]"], [class*="w-[930px]"], [class*="w-[876px]"], [class*="w-[833px]"] {
    width: 100% !important; max-width: 100% !important;
  }
  [class*="w-[640px]"], [class*="w-[620px]"], [class*="w-[593px]"], [class*="w-[560px]"],
  [class*="w-[553px]"], [class*="w-[520px]"], [class*="w-[500px]"], [class*="w-[480px]"],
  [class*="w-[470px]"], [class*="w-[460px]"], [class*="w-[440px]"], [class*="w-[430px]"],
  [class*="w-[420px]"], [class*="w-[400px]"], [class*="w-[384px]"], [class*="w-[376px]"],
  [class*="w-[363px]"], [class*="w-[360px]"] {
    width: 100% !important; max-width: 100% !important;
  }
  [class*="max-w-["] { max-width: 100% !important; }
  img, svg, video { max-width: 100%; }

  /* Oversized paddings → phone gutters. */
  [class*="px-[105px]"], [class*="px-[54px]"], [class*="px-[48px]"],
  [class*="px-[46px]"], [class*="px-[42px]"], [class*="px-[36px]"] { padding-left: 20px !important; padding-right: 20px !important; }
  [class*="pl-[105px]"] { padding-left: 20px !important; }
  [class*="pr-[105px]"], [class*="pr-[360px]"] { padding-right: 20px !important; }
  [class*="py-[96px]"], [class*="py-[90px]"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [class*="py-[84px]"], [class*="py-[72px]"], [class*="py-[64px]"] { padding-top: 44px !important; padding-bottom: 44px !important; }
  [class*="pt-[156px]"] { padding-top: 64px !important; }

  /* Cavernous gaps → phone gaps. */
  [class*="gap-[132px]"], [class*="gap-[90px]"], [class*="gap-[84px]"],
  [class*="gap-[72px]"], [class*="gap-[70px]"] { gap: 28px !important; }
  [class*="gap-[56px]"], [class*="gap-[54px]"], [class*="gap-[48px]"],
  [class*="gap-[42px]"], [class*="gap-[38px]"], [class*="gap-[36px]"] { gap: 22px !important; }

  /* Two-column grids stack. */
  .grid-cols-2 { grid-template-columns: 1fr !important; }

  /* Wide flex rows that lay out content columns become vertical.
     (Excludes small inline rows via the gap filter above — safe default
     for this codebase; fine-tuned per section below.) */
  [class*="w-[1413px]"][class*="flex"]:not([class*="flex-col"]),
  [class*="w-[1224px]"][class*="flex"]:not([class*="flex-col"]) {
    flex-direction: column !important;
    height: auto !important;
  }

  /* Release fixed section heights (heroes re-pinned below). */
  #root section[class*="h-["] { height: auto !important; }
  #root section [class*="h-[154.5px]"] { height: auto !important; padding: 28px 0; }
  #root div[class*="h-[117px]"] { height: auto !important; }

  /* Absolute-collage neutralizer: inside a fluid canvas, positioned
     text blocks re-enter the flow in DOM order. Decorative layers
     (pointer-events-none) and full-bleed media stay put. */
  [class*="w-[1413px]"] > .absolute:not([class*="pointer-events-none"]):not([class*="inset-0"]),
  [class*="w-[1251px]"] > .absolute:not([class*="pointer-events-none"]):not([class*="inset-0"]) {
    position: static !important;
    transform: none !important;
    translate: none !important;
    margin: 0 0 20px !important;
    width: auto !important;
  }
  /* Giant off-canvas decorations vanish on phones. */
  .pointer-events-none.absolute[class*="ml-[-"],
  .pointer-events-none.absolute[class*="right-[-"],
  .pointer-events-none.absolute[class*="left-[-"],
  .pointer-events-none.absolute[class*="left-[calc"],
  .pointer-events-none.absolute[class*="right-[calc"],
  .pointer-events-none.absolute[class*="size-[700px]"],
  .pointer-events-none.absolute[class*="w-[222"],
  .pointer-events-none.absolute[class*="h-[955.5px]"],
  #root section div[class*="size-[1246"],
  #root section div[class*="w-[768.75px]"],
  #root section div[class*="w-[769px]"] {
    display: none !important;
  }

  /* Centered specimen/see-more rows and headings rejoin the flow. */
  #root :is(div, a, p, h1, h2, h3, h4)[class*="left-1/2"][class*="-translate-x-1/2"] {
    position: static !important;
    transform: none !important;
    translate: none !important;
    margin: 0 auto 18px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Collage sections rebuilt by enhance.js: hide the desktop canvas,
     show the linear clone. Imagery (direct <img>/inset layers) stays. */
  [data-mz-lin="1"] { position: relative; }
  [data-mz-lin="1"] > div:not(.mz-lin) { display: none !important; }
  .mz-lin {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 14px;
    padding: 44px 20px;
  }
  .mz-lin > * {
    position: static !important; transform: none !important;
    translate: none !important;
    margin: 0 !important; width: auto !important; height: auto !important;
  }
  .mz-lin * { white-space: normal !important; }
  .mz-lin > a { align-self: flex-start; }
  .mz-lin > img { max-width: 78%; height: auto !important; }
  /* Photographic images cloned out of a collage → full-width media blocks. */
  .mz-lin > img.mz-photo,
  .mz-lin img.mz-photo {
    width: 100% !important; max-width: 100% !important; height: auto !important;
    max-height: 52svh; object-fit: cover; display: block;
    margin: 8px 0 14px !important; border-radius: 3px;
    background: #e7e4dc;
  }
  /* photo-backed collages get a scrim so moved text stays legible */
  [data-mz-lin="1"] > img.absolute ~ .mz-lin::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgb(20 22 12 / .5), rgb(20 22 12 / .62));
  }

  /* Trust-icons strip → clean single-column list: icon left, label right,
     never wrapping the label onto its own line ("SOURCED FROM / ITALY…"). */
  #root div[class*="h-[117px]"] > div,
  #root section div[class*="gap-[52.5px]"] { width: 100% !important; }
  #root div[class*="h-[117px]"] div[class*="gap-[52.5px]"],
  #root section div[class*="gap-[52.5px]"] {
    display: flex !important; flex-direction: column !important;
    gap: 16px !important; padding: 4px 2px;
  }
  #root div[class*="gap-[52.5px]"] > div {
    flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; gap: 14px !important; width: 100%;
  }
  #root div[class*="gap-[52.5px]"] img,
  #root div[class*="gap-[52.5px]"] svg {
    width: 28px !important; height: 28px !important; flex: none !important;
  }
  #root div[class*="gap-[52.5px]"] > div > div,
  #root div[class*="gap-[52.5px]"] > div > p {
    font-size: 13px !important; line-height: 1.3 !important;
    letter-spacing: .3px; white-space: normal !important;
  }

  /* Children of re-flowed centered rows span the full column. */
  #root section div[class*="left-1/2"][class*="-translate-x-1/2"] > :not(img) {
    width: 100% !important; max-width: 100% !important;
  }
  /* …but centered CTA buttons keep their natural size. */
  #root section a[class*="left-1/2"][class*="-translate-x-1/2"] {
    width: auto !important; align-self: center; margin: 6px auto 26px !important;
  }
  #root section a[class*="left-1/2"] img { width: 27px !important; }

  /* Footer label/value rows breathe. */
  #root footer div[class*="flex"]:not([class*="flex-col"]) { column-gap: 12px !important; }

  /* Linearized text floors (clones keep desktop 13-14px sizes). */
  .mz-lin p { font-size: 15px !important; line-height: 1.6 !important; }
  .mz-lin a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Decorative SVG headline (ITALY & TURKEY) becomes a flowing title. */
  #root section img[src*="italyTurkey"] {
    position: static !important;
    width: min(300px, 78%) !important; height: auto !important;
    margin: 0 0 10px !important; transform: none !important;
    translate: none !important;
  }

  /* Rows wrap instead of spilling off-canvas; released heights follow.
     (Scoped to #root, not <section> — journal/contact render outside sections;
     list rows can be <a class="flex …">, so match both.) */
  #root :is(div, a, article)[class*="flex"]:not([class*="flex-col"]) { flex-wrap: wrap; }
  #root :is(div, a)[class*="flex"][class*="h-["]:not([class*="h-full"]) { height: auto !important; }
  /* Text columns beside images wrap below them instead of crushing. */
  #root :is(div, a, article)[class*="flex"]:not([class*="flex-col"]) >
    div:is(:has(h2), :has(h3), :has([class*="font-display"])) {
    min-width: min(100%, 260px);
  }

  /* Late-inventory fixed widths (decimal values missed by the first pass). */
  [class*="w-[454.5px]"], [class*="w-[706"], [class*="w-[780px]"] {
    width: 100% !important; max-width: 100% !important;
  }
  #root section [class*="w-[930px]"] [class*="w-[294px]"] { width: 100% !important; }

  /* ----- 4.1 header / mobile nav ----- */
  #root header[class*="h-[84px]"] { height: 64px !important; position: sticky; top: 0; z-index: 60; }
  #root header > div { padding: 0 20px; }
  #root header > div > a:first-child {         /* AZALEA wordmark */
    position: absolute !important;
    left: 20px !important; top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important; letter-spacing: 4.4px !important;
  }
  #root header nav,
  #root header > div > div[class*="left-[1149px]"],   /* lang chip */
  #root header > div > a[class*="left-["]:not(:first-child) {  /* CONCIERGE box */
    display: none !important;
  }

  /* Hamburger (injected by enhance.js) */
  #mz-burger {
    display: flex; position: fixed; top: 12px; right: 14px; z-index: 80;
    width: 40px; height: 40px; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; padding: 0;
  }
  #mz-burger span, #mz-burger::before, #mz-burger::after {
    content: ""; display: block; position: absolute; left: 8px; right: 8px;
    height: 1.5px; background: #111; transition: transform .3s cubic-bezier(.2,.65,.25,1), opacity .25s, top .3s;
  }
  #mz-burger::before { top: 14px; }
  #mz-burger span    { top: 19.5px; }
  #mz-burger::after  { top: 25px; }
  body.mz-menu-open #mz-burger::before { top: 19.5px; transform: rotate(45deg); }
  body.mz-menu-open #mz-burger span    { opacity: 0; }
  body.mz-menu-open #mz-burger::after  { top: 19.5px; transform: rotate(-45deg); }

  #mz-menu {
    position: fixed; inset: 0; z-index: 70; background: #EAE7E0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 84px 28px 40px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .32s ease, transform .32s cubic-bezier(.2,.65,.25,1), visibility 0s .32s;
  }
  body.mz-menu-open #mz-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  body.mz-menu-open { overflow: hidden; }
  #mz-menu a.mz-link {
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 7.6vw, 36px);
    line-height: 1.35; color: #17180f; text-decoration: none;
    padding: 6px 0; border-bottom: 1px solid rgb(23 24 15 / .08);
    opacity: 0; transform: translateY(10px);
  }
  body.mz-menu-open #mz-menu a.mz-link {
    opacity: 1; transform: none;
    transition: opacity .4s ease var(--d, 0s), transform .45s cubic-bezier(.2,.65,.25,1) var(--d, 0s);
  }
  #mz-menu .mz-cta {
    margin-top: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #17180f; padding: 14px 22px;
    font-size: 13px; letter-spacing: 2.6px; color: #17180f; text-decoration: none;
  }
  #mz-menu .mz-foot { margin-top: auto; font-size: 12.5px; color: #6b6c60; letter-spacing: .4px; }

  /* ----- 4.2 home page ----- */
  /* Hero: keep the moss canvas + image, give it a phone height. */
  body[data-mz-route="home"] #root section[class*="h-[594px]"] {
    height: auto !important; min-height: 78svh;
    display: flex; align-items: stretch;
  }
  body[data-mz-route="home"] #root section[class*="h-[594px]"] > img.absolute {
    position: absolute !important; inset: 0 !important;
    top: 0 !important; height: 100% !important; width: 100% !important;
    object-fit: cover; object-position: 62% 30%;
  }
  body[data-mz-route="home"] #root section[class*="h-[594px]"] > div[class*="w-[1413px]"] {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 40px 20px 44px; position: relative;
  }
  /* 3-panel collections strip → vertical stack of tappable bands. */
  body[data-mz-route="home"] #root section[class*="h-[339px]"] { height: auto !important; }
  body[data-mz-route="home"] #root section[class*="h-[339px]"] > div.flex {
    flex-direction: column !important; height: auto !important;
  }
  body[data-mz-route="home"] #root section[class*="h-[339px]"] > div.flex > * {
    width: 100% !important; min-height: 148px;
  }
  /* Trust icon row: 2×2 grid. */
  #root div[class*="h-[117px]"][class*="w-[1413px]"] {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 18px 12px;
    padding: 26px 20px;
  }
  #root div[class*="h-[117px]"][class*="w-[1413px]"] > div { justify-content: flex-start; }
  /* Italy&Turkey photo band + dark atmospheres band get natural height. */
  body[data-mz-route="home"] #root section[class*="h-[703.5px]"],
  body[data-mz-route="home"] #root section[class*="h-[450px]"],
  body[data-mz-route="home"] #root section[class*="h-[246px]"],
  body[data-mz-route="home"] #root section[class*="h-[294px]"],
  body[data-mz-route="home"] #root section[class*="h-[382.5px]"] {
    height: auto !important; min-height: 0 !important;
  }
  body[data-mz-route="home"] #root section[class*="h-[703.5px]"] > img.absolute {
    position: absolute !important; inset: 0 !important; width: 100% !important;
    height: 100% !important; object-fit: cover;
  }
  body[data-mz-route="home"] #root section[class*="h-[703.5px]"] [class*="w-[1413px]"] {
    padding: 48px 20px;
  }
  /* Gold CTA band + journal strip flow vertically via generic rules. */

  /* ----- 4.3 footer (all pages) ----- */
  #root footer > div[class*="h-[243px]"] {
    height: auto !important;
    display: flex; flex-direction: column;
    padding: 36px 20px 28px; gap: 22px;
  }
  #root footer > div > .absolute { position: static !important; margin: 0 !important; }
  #root footer div[class*="gap-[132px]"] {
    display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 26px 18px !important; width: 100%;
  }
  #root footer img[class*="w-[1251px]"], #root footer [class*="w-[1251px]"] { width: 100% !important; }
  #root footer [class*="text-[12px]"] { font-size: 13px !important; line-height: 1.7 !important; }
  #root footer a { padding: 2px 0; }

  /* ----- 4.4 species pages ----- */
  body[data-mz-route="species"] #root section:first-of-type div[class*="min-h-"] {
    min-height: 86svh !important;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  /* keep the first (sky/backdrop) image full-bleed, hide side collage */
  body[data-mz-route="species"] #root section:first-of-type img.absolute:not(:first-of-type) { display: none !important; }
  body[data-mz-route="species"] #root section:first-of-type img.absolute:first-of-type {
    inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover;
  }
  body[data-mz-route="species"] #root section:first-of-type [class*="w-[1413px]"] {
    position: relative; padding: 32px 20px 40px;
  }
  body[data-mz-route="species"] #root section:first-of-type [class*="w-[1413px]"] {
    background: linear-gradient(180deg, rgb(240 242 240 / .12), rgb(240 242 240 / .58) 55%, rgb(240 242 240 / .72));
  }
  /* provenance / care / more-from sections: generic flow handles most;
     centre the gap-heavy rows. */
  body[data-mz-route="species"] #root [class*="gap-[84px]"] { flex-direction: column !important; }

  /* Provenance landscape: it's `h-[356px] w-auto` inside a clipped 430px box,
     so with w-auto and no area it renders 0-wide (and never lazy-loads).
     Give the box a phone height and make the image fill it, cover-cropped. */
  body[data-mz-route="species"] #root section [class*="h-[430px]"] {
    height: 240px !important; width: 100% !important;
  }
  body[data-mz-route="species"] #root section [class*="h-[430px]"] > .absolute,
  body[data-mz-route="species"] #root section [class*="h-[430px]"] [class*="w-fit"] {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
  }
  body[data-mz-route="species"] #root section [class*="h-[430px]"] img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: 50% 45%;
  }

  /* ----- 4.5 premium story ----- */
  body[data-mz-route="premium"] .snap-slide { min-height: 0 !important; padding: 48px 0; }
  body[data-mz-route="premium"] .fixed[class*="right-[24px]"] { display: none !important; }
  body[data-mz-route="premium"] [class*="w-[1413px]"] { padding: 0 20px; }
  body[data-mz-route="premium"] .snap-slide .absolute:not([class*="pointer-events-none"]):not([class*="inset-0"]) {
    position: static !important; transform: none !important; margin: 0 0 18px;
    translate: none !important;
  }
  body[data-mz-route="premium"] .snap-slide img { max-height: 46svh; object-fit: contain; }
  /* Specimen cutout photos: re-anchor into the flow, centred. */
  body[data-mz-route="premium"] .snap-slide div:has(> img[class*="plant-cutout"]) {
    position: static !important; transform: none !important;
    translate: none !important;
    width: 100% !important; height: auto !important; margin: 0 !important;
    display: flex; justify-content: center;
  }
  body[data-mz-route="premium"] .snap-slide img[class*="plant-cutout"] {
    position: static !important;
    width: min(72%, 330px) !important; height: auto !important;
    max-height: 44svh; margin: 12px auto !important; display: block;
  }

  /* Long values (emails, phone numbers) wrap instead of clipping. */
  #root :is(p, a, span, div) { overflow-wrap: break-word; }
  /* Big display lines pinned to one line unwrap on phones. */
  #root :is(h1, h2, h3, p)[class*="whitespace-nowrap"] { white-space: normal !important; }

  /* Footer hairline divider: the un-positioned h-px rule must stay 1px —
     its size-full SVG otherwise inflates into a stretched white band. */
  #root footer div[class*="h-px"] {
    height: 1px !important; overflow: hidden;
    width: 100% !important; margin: 20px 0 14px !important;
  }
  #root footer div[class*="h-px"] img { height: 1px !important; width: 100% !important; }

  /* Footer mini-labels: never letter-wrap (SOURCING → SOURCI-NG). */
  #root footer [class*="w-[63px]"], #root footer span[class*="w-[52px]"] {
    width: auto !important; min-width: 72px;
  }
  #root footer :is(p, div, span)[class*="uppercase"] { white-space: nowrap; overflow-wrap: normal; }

  /* Wide canvas containers that carry no side padding of their own
     (essentials "The collection", collections edition header, …). */
  #root :is(section, div)[class*="w-[1224px]"]:not([class*="px-["]) {
    padding-left: 18px !important; padding-right: 18px !important;
  }

  /* Selections lives OUTSIDE any <section>. The two region tiles are
     fixed 570px-tall desktop cards: map anchored right (w-auto → collapses
     to 0 on phones), label/button absolute, and a pop-in detail card that
     overflowed. Rebuild each tile as a clean column: label → map (full
     width, % pins keep their spots) → Explore button → docked detail. */
  body[data-mz-route="selections"] #root [class*="mt-[44px]"][class*="gap-[24px]"] {
    flex-direction: column !important; align-items: stretch !important;
    width: 100% !important; gap: 18px !important;
  }
  body[data-mz-route="selections"] #root [class*="h-[570px]"][class*="shrink-0"] {
    width: 100% !important; flex: 0 0 auto !important; height: auto !important;
    display: flex; flex-direction: column; gap: 14px; padding: 20px 16px;
  }
  body[data-mz-route="selections"] #root [class*="h-[570px]"] > div[class*="inset-y-0"] {
    position: static !important; width: 100% !important; order: 2;
    display: flex; justify-content: center;
  }
  body[data-mz-route="selections"] #root [class*="h-[570px]"] > div[class*="inset-y-0"] [class*="w-fit"] {
    width: 100% !important;
  }
  body[data-mz-route="selections"] #root [class*="h-[570px]"] > div[class*="inset-y-0"] img {
    width: 100% !important; height: auto !important; max-height: none;
  }
  body[data-mz-route="selections"] #root [class*="h-[570px]"] > div[class*="pointer-events-none"][class*="left-[36px]"] {
    position: static !important; order: 1; width: 100% !important;
  }
  body[data-mz-route="selections"] #root [class*="h-[570px]"] > div[class*="pointer-events-none"] p[class*="w-[190px]"] {
    width: 100% !important;
  }
  body[data-mz-route="selections"] #root [class*="h-[570px]"] > button {
    position: static !important; order: 3; align-self: flex-start;
  }
  /* region detail card docks into the tile below the button */
  body[data-mz-route="selections"] #root [class*="animate-pop-in"] {
    position: static !important; order: 4;
    width: 100% !important; height: auto !important;
    transform: none !important; translate: none !important;
    margin: 6px 0 0 !important; animation: none !important;
  }
  body[data-mz-route="selections"] #root [class*="animate-pop-in"] img {
    max-width: 100%;
  }

  /* Collections: ACTIVE FILTERS bar — desktop px-[94.5px] squeezed it. */
  #root div[class*="px-[94.5px]"] {
    padding-left: 18px !important; padding-right: 18px !important;
    row-gap: 6px;
  }
  #root div[class*="px-[94.5px]"] > div[class*="ml-[24px]"] { margin-left: 14px !important; }

  /* Premium story: tighter, card-like slides. */
  body[data-mz-route="premium"] .snap-slide { padding: 30px 0 6px; }
  body[data-mz-route="premium"] .snap-slide + .snap-slide { border-top: 1px solid rgb(23 24 15 / .08); }
  body[data-mz-route="premium"] .mz-lin { padding: 6px 20px 30px; gap: 10px; }
  .mz-lin img[class*="w-[201px]"], .mz-lin img[class*="w-[384px]"],
  .mz-lin img[class*="h-px"] { display: none !important; }
  .mz-lin a[class*="uppercase"], .mz-lin a[class*="tracking"] {
    display: inline-flex; align-items: center; gap: 10px;
  }
  .mz-lin a[class*="uppercase"] *, .mz-lin a[class*="tracking"] * { white-space: nowrap !important; }
  /* short banner sections (intro/outro interstitials) become moss cards */
  [data-mz-banner="1"] .mz-lin {
    background: #2a2d1f; color: #e9e6d8;
    text-align: center; align-items: center;
    margin: 8px 16px 26px; border-radius: 8px; padding: 26px 18px 30px;
  }
  [data-mz-banner="1"] .mz-lin * { color: inherit !important; }

  /* Premium: strip ALL desktop fullscreen-gallery chrome on phones —
     the "Press Esc" hint (fixed), the scroll-snap dot rail, the slide
     counter, and any "leave the edition" control. */
  body[data-mz-route="premium"] #root [class*="fixed"],
  body[data-mz-route="premium"] #root button[class*="size-[12px]"],
  body[data-mz-route="premium"] #root [class*="fixed"][class*="right-[24px]"],
  body[data-mz-route="premium"] #root [class*="right-[48px]"][class*="bottom-"],
  body[data-mz-route="premium"] #root [class*="left-[48px]"][class*="bottom-"] {
    display: none !important;
  }
  /* Each specimen becomes a clean editorial card. */
  body[data-mz-route="premium"] .snap-slide { padding: 0 !important; }
  body[data-mz-route="premium"] .snap-slide + .snap-slide { border-top: 0; }
  body[data-mz-route="premium"] .mz-lin {
    padding: 26px 20px 30px; gap: 8px;
    border-bottom: 1px solid rgb(23 24 15 / .1);
  }
  body[data-mz-route="premium"] .mz-lin > img.mz-photo,
  body[data-mz-route="premium"] .mz-lin > img[class*="plant-cutout"] {
    margin-bottom: 14px !important;
  }
  /* label + name tightened, description readable */
  body[data-mz-route="premium"] .mz-lin p[class*="uppercase"] {
    font-size: 11px !important; letter-spacing: 2px; opacity: .6; margin-bottom: 2px;
  }



  /* Fixed label columns (contact/footer rows) shrink to content. */
  [class*="w-[195px]"], [class*="w-[190px]"], [class*="w-[189px]"],
  [class*="w-[168px]"], [class*="w-[166px]"] {
    width: auto !important; min-width: 108px;
  }

  /* Data tables (Care at a glance) scroll sideways in a contained strip. */
  #root table { min-width: 660px; }
  #root div[class*="rounded-"][class*="border"]:has(table) {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  }

  /* Premium story slides: cloned plant cutouts sit centred. */
  body[data-mz-route="premium"] .mz-lin > img[class*="plant-cutout"] {
    max-width: 62%; align-self: center; margin: 8px auto !important;
  }

  /* Collections: sourcing-map card — release the fixed 540px desktop
     height and stack the Italy/Turkey map columns vertically. */
  body[data-mz-route="collections"] #root div[class*="h-[540px]"][class*="rounded"] {
    height: auto !important; padding: 64px 14px 24px;
  }
  body[data-mz-route="collections"] #root div[class*="h-[540px]"][class*="rounded"] > div[class*="inset-0"] {
    position: static !important;
    flex-direction: column !important;
    gap: 26px !important;
    padding-top: 0 !important;
  }

  /* ----- 4.6 buttons & touch targets ----- */
  #root a[class*="border"], #root button[class*="border"] { min-height: 44px; }
  #root a, #root button { -webkit-tap-highlight-color: rgb(185 142 78 / .18); }

  /* Reveal distance shorter on phones (less jump, quicker settle). */
  .reveal { transform: translateY(12px); transition-duration: .4s, .45s; }
}

/* ---------- injected placeholder artwork (all widths) ---------- */
img.mz-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* a filled box whose height came from the hidden rosette must not collapse */
#root div:has(> img.mz-fill) { min-height: 150px; }