/*
 * Magia Flory — homepage identity alignment, 2026-08-16.
 * Uses the storefront paper surface continuously instead of white section bands
 * and displays the transparent artwork supplied in docs as real image assets.
 */

/* One continuous brand-paper background, identical to the storefront base. */
.page-home--reference {
  background: var(--paper-light) !important;
}

.page-home--reference #main,
.page-home--reference .ref-hero,
.page-home--reference .ref-feelings,
.page-home--reference .ref-categories,
.page-home--reference .ref-products,
.page-home--reference .ref-story,
.page-home--reference .ref-reviews,
.page-home--reference .ref-boutique {
  background: transparent !important;
  background-image: none !important;
}

/* The old decorative pseudo-image is replaced by supplied transparent artwork. */
.page-home--reference .ref-hero::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

.page-home--reference .ref-hero,
.page-home--reference .ref-story {
  isolation: isolate;
}

.page-home--reference .ref-hero > .container,
.page-home--reference .ref-story > .container {
  position: relative;
  z-index: 2;
}

.page-home--reference .ref-home-deco {
  position: absolute;
  z-index: 1;
  display: block;
  max-width: none;
  height: auto;
  opacity: .17;
  pointer-events: none;
  user-select: none;
  filter: saturate(.84);
}

.page-home--reference .ref-home-deco--lavender {
  left: max(-135px, calc((100vw - 1440px) / 2 - 165px));
  bottom: -165px;
  width: 265px;
  transform: rotate(-7deg);
}

.page-home--reference .ref-home-deco--olive {
  right: max(-120px, calc((100vw - 1440px) / 2 - 150px));
  top: 50%;
  width: 235px;
  transform: translateY(-50%) rotate(8deg);
}

/* Mood selector: supplied 900×900 transparent PNGs, without fake card backgrounds. */
.page-home--reference .ref-feeling {
  min-height: 232px;
  padding-bottom: 112px;
}

.page-home--reference .ref-feeling__image {
  bottom: -8px;
  width: 96%;
  height: 116px;
  opacity: 1;
  object-fit: contain;
  object-position: center bottom;
  background: transparent !important;
  filter: drop-shadow(0 8px 11px rgba(5, 28, 14, .12));
}

.page-home--reference .ref-feeling--energy .ref-feeling__image,
.page-home--reference .ref-feeling--love .ref-feeling__image {
  width: 88%;
  height: 120px;
}

.page-home--reference .ref-feeling--relax .ref-feeling__image {
  width: 94%;
  height: 122px;
}

/* Collections: keep the coloured cards, but let the supplied cut-outs breathe. */
.page-home--reference .ref-category__media,
.page-home--reference .ref-category--feature .ref-category__media {
  background: transparent !important;
}

.page-home--reference .ref-category__media img,
.page-home--reference .ref-category--water .ref-category__media img,
.page-home--reference .ref-category--blend .ref-category__media img,
.page-home--reference .ref-category--ritual .ref-category__media img,
.page-home--reference .ref-category--practice .ref-category__media img {
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  filter: drop-shadow(0 12px 18px rgba(45, 58, 40, .10));
}

.page-home--reference .ref-category--feature .ref-category__media img {
  padding: 6px 18px 12px;
}

/* Keep the main page rhythm continuous: cards may be light, the page itself is not white-banded. */
.page-home--reference .ref-product-card.home-product-card,
.page-home--reference .ref-review-card {
  background: rgba(255, 253, 248, .78);
}

.page-home--reference .ref-story__photo {
  background: var(--paper-deep);
}

.page-home--reference .ref-reviews__image {
  object-position: center;
}

/* Offline invitation: the supplied oil-set artwork is the full visual background.
 * The older rocks photo remains only as inert markup fallback and is never painted. */
.page-home--reference .ref-boutique__visual {
  min-height: 500px;
  background-color: var(--paper-deep) !important;
  background-image: url('../images/home-identity/essential-oils-set.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
}

.page-home--reference .ref-boutique__visual > img:first-child {
  display: none !important;
}

@media (max-width: 960px) {
  .page-home--reference .ref-home-deco {
    display: none;
  }

  .page-home--reference .ref-boutique__visual {
    min-height: 420px;
    background-position: center center !important;
  }
}

@media (max-width: 680px) {
  .page-home--reference .ref-feeling {
    min-height: 210px;
    padding-bottom: 98px;
  }

  .page-home--reference .ref-feeling__image,
  .page-home--reference .ref-feeling--energy .ref-feeling__image,
  .page-home--reference .ref-feeling--love .ref-feeling__image,
  .page-home--reference .ref-feeling--relax .ref-feeling__image {
    width: 92%;
    height: 102px;
  }

  .page-home--reference .ref-category__media img,
  .page-home--reference .ref-category--feature .ref-category__media img {
    padding: 8px;
  }

  .page-home--reference .ref-boutique__visual {
    min-height: 340px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home--reference .ref-home-deco {
    transform: none !important;
  }
}