/* ============================================================
   FLEURA — Repeating botanical wallpaper (reference pattern)
   Crisp native tile · faded via opacity + soft wash (no blur)
   ============================================================ */

:root {
  /* Native tile dimensions — 1:1 px for sharp repeat */
  --pattern-tile-w: 679px;
  --pattern-tile-h: 1024px;
  /* Sections are transparent now — the pattern shows everywhere, so it
     must stay a whisper under the morphing page color. */
  --pattern-opacity: 0.08;
  --pattern-wash: rgba(250, 248, 245, 0.55);
}

html {
  min-height: 100%;
  background-color: #faf8f5;
}

body {
  position: relative;
  background: transparent !important;
}

/* ── Fixed page canvas: morphing section color + whisper botanical tile.
   Color transitions repaint ONLY this contained, GPU-promoted layer —
   never the scrolling document. ───────────────────────────────────────── */
.site-botanical-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--page-bg, #faf8f5);
  transition: background-color 1.2s ease;
  contain: strict;
  transform: translateZ(0);
}

.site-botanical-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url('../images/florals/botanical-wallpaper-pattern.png');
  background-repeat: repeat;
  background-size: var(--pattern-tile-w) var(--pattern-tile-h);
  background-position: center top;
  opacity: var(--pattern-opacity);
  /* Keep edges crisp — never blur or smooth-scale */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.site-botanical-bg__wash {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--pattern-wash);
}

.site-botanical-bg__art {
  display: none !important;
}

main {
  background: transparent;
}

body > *:not(.site-botanical-bg):not(.loader):not(.navbar):not(#navbar):not(.mobile-menu):not(.mobile-menu-overlay):not(.whatsapp-float):not(.cursor-dot):not(.cursor-ring) {
  position: relative;
  z-index: 1;
}

body .loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #faf8f5 !important;
}

/* Navbar must stay fixed on top (floating-card style: the bar itself is
   transparent, .navbar__inner is the white rounded card). No backdrop-filter:
   re-blurring under a fixed bar every scrolled frame kills scroll perf. */
.navbar,
#navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent !important;
  border-bottom: none !important;
}

/* One continuous page canvas: sections are transparent and the fixed
   background layer below carries a single color that morphs per section
   (--page-bg, driven by initScrollBackground in main.js). */
main > section.bg-ivory,
main > section.bg-white,
section.bg-ivory:not(footer *),
main > section.bg-cream,
section.bg-cream,
section[class*='bg-cream'],
section[class*='bg-cream/50'],
section[class*='bg-lilac-light'] {
  background-color: transparent !important;
}

body.page-home .hero-cinematic {
  background-color: transparent !important;
}

.product-card,
.product-card-luxury,
.product-card-mockup,
.occasion-card,
.occasion-card-lux {
  background-color: #fff !important;
}

/* No corner overlays — wallpaper only */
.floral-deco-zone,
.hero-cinematic::before,
.hero-cinematic::after,
.page-hero.floral-accent-tr::before,
.page-hero.floral-accent-tr::after {
  background-image: none !important;
  content: none !important;
}

/* Mobile: skip the pattern layer, body carries the morphing color. */
@media (max-width: 768px) {
  .site-botanical-bg {
    display: none;
  }

  html,
  body {
    background-color: var(--page-bg, #faf8f5) !important;
    transition: background-color 1.2s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-botanical-bg__art {
    display: none !important;
  }
}