/*
 * Magia Flory — shared storefront top rhythm, 2026-08-16.
 *
 * The homepage is the canonical vertical rhythm. Every storefront route must
 * begin its first visible hero/copy block at the same distance below the shared
 * navigation. Older page-specific layers add their own hero padding and often
 * vertically centre copy beside tall artwork; both behaviours caused the jump
 * visible when moving between routes.
 */

:root {
  --storefront-first-block-gap: 44px;
  --storefront-compact-hero-bottom: 20px;
  --storefront-compact-follow-gap: 16px;
}

/* Homepage: keep the already-approved baseline unchanged. */
.page-home--reference #main > .ref-hero:first-child {
  padding-top: var(--storefront-first-block-gap) !important;
}

.page-home--reference #main > .ref-hero:first-child .ref-hero__grid {
  align-items: start !important;
}

/* Standard listing/content heroes (catalog, selector, reviews, journal, help,
 * discounts and similar pages). storefront-refinements adds padding to the
 * hero itself while style.css also pads its container. Reset the outer value so
 * only one canonical gap remains. */
#main > .page-hero:first-child {
  padding-top: 0 !important;
}

#main > .page-hero:first-child > .container {
  align-items: flex-start !important;
  padding-top: var(--storefront-first-block-gap) !important;
}

#main > .page-hero:first-child > .container > div:first-child {
  align-self: flex-start !important;
}

/* Selector, recipes, reviews, journal, help and dynamic content indexes use a
 * compact, seamless intro rather than a tall decorative hero. Their botanical
 * hero art is removed from Blade; these rules also neutralise legacy min-height,
 * paper panels and borders so the working content follows almost immediately. */
.page-catalog #main > .page-hero:first-child,
.page-selector #main > .page-hero:first-child,
.page-recipes #main > .page-hero:first-child,
.page-reviews #main > .page-hero:first-child,
.page-journal #main > .page-hero:first-child,
.page-help #main > .page-hero:first-child,
.page-content-index #main > .page-hero:first-child {
  min-height: 0 !important;
  padding-bottom: 0 !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

.page-catalog #main > .page-hero:first-child > .container,
.page-selector #main > .page-hero:first-child > .container,
.page-recipes #main > .page-hero:first-child > .container,
.page-reviews #main > .page-hero:first-child > .container,
.page-journal #main > .page-hero:first-child > .container,
.page-help #main > .page-hero:first-child > .container,
.page-content-index #main > .page-hero:first-child > .container {
  min-height: 0 !important;
  padding-bottom: var(--storefront-compact-hero-bottom) !important;
}

.page-catalog #main > .page-hero:first-child + .catalog-section,
.page-selector #main > .page-hero:first-child + .selector-section,
.page-recipes #main > .page-hero:first-child + .recipes-listing,
.page-reviews #main > .page-hero:first-child + .reviews-page,
.page-journal #main > .page-hero:first-child + .journal-section,
.page-content-index #main > .page-hero:first-child + .section {
  padding-top: var(--storefront-compact-follow-gap) !important;
  border-top: 0 !important;
  background: transparent !important;
}

/* The live catalog uses the same compact listing rhythm. Its copy owns
 * the full container width and the legacy botanical branch is forbidden
 * even if an older CMS revision reintroduces the image element. */
.page-catalog #main > .page-hero:first-child > .container > div:first-child {
  width: 100%;
  max-width: none !important;
}

.page-catalog #main > .page-hero:first-child > .container > img {
  display: none !important;
}

.page-catalog #main > .page-hero:first-child p {
  max-width: none !important;
  margin-bottom: 0;
  font-size: clamp(1rem, 1.25vw, 1.15rem) !important;
}

.page-help #main > .page-hero:first-child + .help-nav {
  margin-top: 0 !important;
  border-top: 0 !important;
  background: transparent !important;
}

/* Editorial heroes own their outer spacing. Keep that spacing equal to home,
 * but do not vertically centre the copy beside a tall photo. */
#main > .about-hero:first-child,
#main > .article-hero:first-child,
#main > .farmers-hero:first-child,
#main > .partnership-hero:first-child,
#main > .franchise-hero:first-child,
#main > .product-page:first-child,
#main > .product-hero:first-child,
#main > section.section:first-child {
  padding-top: var(--storefront-first-block-gap) !important;
}

#main > .about-hero:first-child .about-hero__grid,
#main > .article-hero:first-child .article-hero__grid,
#main > .farmers-hero:first-child .farmers-hero__grid,
#main > .partnership-hero:first-child .partnership-hero__grid,
#main > .franchise-hero:first-child .partnership-hero__grid {
  align-items: start !important;
}

/* Recipe detail has the same double-padding pattern as .page-hero and a tall
 * centred grid, so apply the canonical gap to its container only. */
#main > .recipe-hero:first-child {
  padding-top: 0 !important;
}

#main > .recipe-hero:first-child > .container {
  padding-top: var(--storefront-first-block-gap) !important;
}

#main > .recipe-hero:first-child .recipe-hero__grid {
  align-items: start !important;
}

@media (min-width: 1100px) {
  .page-catalog #main > .page-hero:first-child p {
    white-space: nowrap;
  }
}

@media (max-width: 680px) {
  :root {
    --storefront-first-block-gap: 32px;
    --storefront-compact-hero-bottom: 16px;
    --storefront-compact-follow-gap: 12px;
  }
}