/**
 * Homepage Banner: leave desktop Framer layout alone (portrait sits on the bottom).
 * Mobile only: full-viewport hero + readable stack.
 * Asset: image-7db8ffec (Black woman).
 */

html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Copy above portrait when Image is a Banner sibling (all breakpoints). */
[data-framer-name="Banner"] [data-framer-name="Main Content"],
[data-framer-name="Banner"] .framer-1avklpf {
  position: relative !important;
  z-index: 6 !important;
}

[data-framer-name="Banner"] [data-framer-name="Title"],
[data-framer-name="Banner"] [data-framer-name="Title Inner"],
[data-framer-name="Banner"] [data-framer-name="Content"],
[data-framer-name="Banner"] .framer-1av1rm9,
[data-framer-name="Banner"] .framer-1juq7vn,
[data-framer-name="Banner"] .framer-1btzqx1,
[data-framer-name="Banner"] .framer-17mhc0 {
  z-index: 6 !important;
}

/* ---- Mobile: ~100dvh Banner, portrait below copy ---- */
@media (max-width: 809.98px) {
  [data-framer-name="Banner"].framer-1szyvc9,
  .framer-oB17b .framer-1szyvc9,
  section[data-framer-name="Banner"] {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    padding: 96px 20px 56px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  [data-framer-name="Banner"] [data-framer-name="Container"],
  [data-framer-name="Banner"] .framer-sl7kd {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
  }

  [data-framer-name="Banner"] [data-framer-name="Main Content"],
  [data-framer-name="Banner"] .framer-1avklpf {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    position: relative !important;
    z-index: 6 !important;
  }

  [data-framer-name="Banner"] [data-framer-name="Title"],
  [data-framer-name="Banner"] .framer-1av1rm9 {
    flex: 0 0 auto !important;
    z-index: 6 !important;
    position: relative !important;
  }

  [data-framer-name="Banner"] [data-framer-name="Content"],
  [data-framer-name="Banner"] .framer-1juq7vn {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 6 !important;
    margin: 0 0 18px !important;
    padding: 0 4px !important;
  }

  .framer-oB17b .framer-1y8yrxy,
  [data-framer-name="Banner"] figure.framer-1y8yrxy[data-framer-name="Image"],
  [data-framer-name="Banner"] > figure.framer-1y8yrxy,
  [data-framer-name="Banner"] [data-framer-name="Image"].framer-1y8yrxy {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    aspect-ratio: 0.833 !important;
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    height: auto !important;
    max-height: min(46dvh, 380px) !important;
    margin: 10px auto 0 !important;
    flex: 1 1 auto !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  [data-framer-name="Banner"] figure.framer-1y8yrxy img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  [data-framer-name="Banner"] .framer-svokmb-container {
    z-index: 4 !important;
    bottom: 12px !important;
    width: 100% !important;
  }

  [data-framer-name="Product Range"] [data-framer-name="Title Content"],
  [data-framer-name="Product Range"] [data-framer-name="Curated with care, made for skin."],
  [data-framer-name="Product Range"] [data-framer-name="Crafted with care, made for you."] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [data-framer-name="About"],
  [data-framer-name="Steps"],
  [data-framer-name="Organic Skincare"] {
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  [data-framer-name="About"] img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  [data-framer-name="Customer Reviews"],
  [data-framer-name="Footer Main"] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    max-width: 100vw !important;
  }

  [data-framer-name="Newsletter"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  [data-framer-name="Footer Main"] {
    overflow: hidden !important;
  }

  [data-framer-name="Bottom Content"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    row-gap: 8px !important;
    text-align: center !important;
  }

  /* Once solid, keep menu header on screen (transparent→solid still Framer-driven). */
  html.malli-header-pinned .framer-1uf6vji-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 7 !important;
    pointer-events: auto !important;
  }

  html.malli-header-pinned .framer-1uf6vji-container [data-framer-name="Background"] {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}